Tutorial Blogger Membuat Widget About Me Dengan Tombol Pop Up

langsung aja ke tutorialnya :
Silahkan kalian masuk terlebih dahulu ke blogger.com
Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style>
kalo sudah ketemu, masukan CSS di bawah ini tepat di atas kode yang tadi di cari

.boxinner{z-index:999999;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#eee;border-radius:3px;text-align:middle;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-shadow:0 3px 5px rgba(0,0,0,.3)}
.circle{float:left;height:10px;width:10px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child{background-color: #EE5C55; border: 1px solid #E93027;}
.circle:nth-child(2){background-color: #F8BC32;border: 1px solid #EFA908;}
.circle:nth-child(3){background-color: #62CB43;border: 1px solid #4CAC2F;}
kepala{background:#E38202;height:50px;width:100%;position:inherit}
#textlogo{color:#FFF;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:60.6%}
#left{background:#333;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#999;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6{font-size:15px;padding:15px 25px;font-family:'Roboto Slab',Arial,sans-serif;color:#999;border-bottom:1px solid #444;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out}
.taber1:hover{background:#f88c00;color:#fff}
.taber2:hover{background:#D92121;color:#fff}
.taber3:hover{background:#0B76B9;color:#fff}
.taber4:hover{background:#27C9E9;color:#fff}
.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#FFD100;color:#fff}
div i{margin-right:10px}
#aboutme{position:absolute;border-radius:50%;background-size:100%;width:30px;height:30px;margin-top:8px;right:5px;border:2px solid #FFCC89;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtGDjHMBtrl1WkgBDaKE8uHicAHYFkqzmnItNMdsZ758aMyqQwPbHyPn4tifS8u5frghm8jRFh2Xz_DmTUWexgv0Wcj6LXmT2hWI-S5GloTC0XWJoTAb2fI3ZJjsuG8YDhd68RR9IZz0w/s1600/Favicon.png")}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:justify;position:inherit;float:left;font-size:11px}
#aboutus img{width:98%;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3);margin-bottom:5px}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{visibility:hidden;opacity:0}
#popup:target{visibility:visible;opacity:1;background-color:rgba(0,0,0,0.8);position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:99999999999;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
.popup-container{position:relative;margin:0 auto;padding:5px 15px;}
a.popup-close{position:relative;top:-24px;border-radius:50px;margin:0 auto;padding:4px 7px;font-size:13px;text-decoration:none;float: right;line-height:1}

Kemudian masukan HTML di bawah ini tepat di atas </BODY>

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'>Theboegis</span>
<span id='aboutme'/>
<a class='popup-close' href='#closed' title='Close'><i class="fa fa-power-off"></i></a>
</kepala>
      <br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img src='http://41.media.tumblr.com/5b9a6350da24e2b81caee71afea618d3/tumblr_nhxzb7baG21ska3iko1_400.jpg'/><br/>
  <center><b style="font-size: 17px;">Mas Tamvan</b></center>
  <br/>
Saya hanya membagikan script hasil COPAS, bukan hasil saya sendiri.
Semua script yang saya bagikan, ada yang premium namun banyak juga yang free. Tapi tidak di publikasikan oleh seoarang creatornya.<br/>
Awalnya saya hanya iseng tapi lama kelamaan karena nganggur jadinya ya begini.<br/>
  <br/>
<b>Saya Jadi Seorang COPASOR</b>
Sebetulnya saya juga ingin seperti mereka yang jago di bahasa pemerograman web design namun saya kurang komunikasi dan memang saya kurang pintar kali.<br/>
</div>
</div>
</div>
<div id='left'>
<div class='taber1'><a href='http://www.theboegisll.blogspot.com' target='_blank' title='theboegisll.blogspot.com'><i class="fa fa-child"></i> Blog Mas Tamvan</a></div>
<div class='taber2'><a href='LINK_GOOGLE_PLUS_ANDA' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'/> Google Plus</a></div>
<div class='taber3'><a href='LINK_FAEBOOK_ANDA' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</a></div>
<div class='taber4'><a href='LINK_TWITTER_ANDA' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a> </div>
<div class='taber5'><i class='fa fa-phone'/> Phone: 081266632xxx</div>
  <div class='taber6'><a href='/' target='_blank' title='email'><i class='fa fa-envelope-o'/> email_anda@gmail.com</a></div>
</div>
</div>
</div>
</div></div>

Note : Yang Perlu anda ganti tulisan
LINK_FAEBOOK_ANDA
LINK_TWITTER_ANDA
LINK_GOOGLE_PLUS_ANDA
LINK_YOUTUBE__ANDA
LINK_INSTAGRAM_ANDA
http://www.theboegisll.blogspot.com  = dengan link sobat masin2

Sekarang tinggal meletakan tombol buat membuka widget itu. Saya sarankan letakan di NAVBAR
Masukan HTML berikut di navbar blogger kalian, terserah mau di sebelah mana

<li><a class='popup-link' href='#popup'><i class='fa fa-user-secret'/>About Me</a></li>

Ok, sekarang tinggal save templatenya and DONE.