Tombol Like Dan Tombol Twitter Yang Melayang

Halo, gimana kabar kalian hari ini?

Kalian tau tombol Like dan Tombol Follow twitter yang melayang di samping kiri blog Dwi-Tekhnologikan? mau buat seperti itu? kebetulan hari ini saya akan berbagi code-code untuk membuat seperti itu.

Ok, langsung ke Step :

1. Log in ke Blog

2. Klik Rancangan --> Edit HTML --> Centang Expand Template Widget (Sebelum melakukan pengeditan silahkan Back-Up dulu template kalian)

3. Tambahkan code dibawah ini, diatas code ]]></b:skin>

#DTnavbar{border:4px solid #fff;border-radius:5px; width:125px; height:46px; margin-bottom:280px; margin-left:10px; font-family:Comic Sans Ms; color:white;text-align:left; background:rgba(89, 135, 208, 0.79); background:rgba(89, 135, 208, 0.79); background:rgba(89, 135, 208, 0.79); padding:2px; z-index:999; bottom:1px; left:1px; right:1px; position:fixed;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;-ms-transition: all 0.9s ease-out;-o-transition: all 0.9s ease-out;transition: all 0.9s ease-out;}

#DTnavbar .left{float:left; text-align:left; font-family:Supermercado; font-size:10px; font-style:normal; font-weight:normal; color:White; padding:2px 10px}

#DTnavbar:hover{box-shadow:1px 1px 5px black;font-size:20px; font-style:bold; width:125px; height:46px; margin-bottom:280px; margin-left:10px; margin-right:120px;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;-ms-transition: all 0.9s ease-out;-o-transition: all 0.9s ease-out;transition: all 0.9s ease-out;}

4. Jika sudah menambahkan code diatas, tambahkan lagi code dibawah ini, diatas code </body>

<div id='DTnavbar' style='position:fixed;'>

<span class='left'><img src='' title=''/>

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Dwi-Tekhnologi-D-T/187645087959615&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:85px; height:21px;'/>

<div style='margin-right:3px;margin-left:2px;'>

<a class='twitter-follow-button' data-lang='id' data-show-count='false' href='https://twitter.com/DwiAji_'>Ikuti @DwiAji_</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

</div>

</span></div>

* Note :

- Gantikan tulisan yang berwarna kuning dengan URL Fans Page kalian

- Gantikan tulisan yang berwarna merah dengan code tombol twitter kalian

5. Simpan, lihat hasilnya

Sumber