Cara Membuat Efek Melayang Pada Follow Twitter Dan Like Facebook

Cara Membuat Efek Melayang Pada Follow Twitter Dan Like Facebook

Membuat Like Facebook melayang disebelah kanan halaman adalah widget yang banyak dipasang pada blog. Media Social merupakan kegiatan yang banyak dilakukan orang pada era teknologi saat ini. Untuk itu jika kamu ingin membuat blog kamu lebih dikenal, tidak ada salahnya menambahkan sebuah kotak yang dapat menghubungkan pembaca dengan blog kamu.

Membuat Twitter Box Melayang di Blog :

1. Silahkan buat terlebih dahulu tampilan widget tersebut di http://twittercounter.com/

2. Login dengan menggunakan akun Twitter kamu,

3. Jika sudah Lalu klik My Widget, Lalu Klik Widget Setting and Code, sesuaikan dengan selera dan tampilan blog kamu, jika sudah cocok lalu copy kode script widget yang telah disediakan,

4. Masuk ke Blogger,

5. Pilih Dashboard, lalu klik Layout / Tata Letak,

6. Tambahkan Gadget Baru dengan klik Add a Widget / Add a Gadget
Sesuaikan dengan posisi letak yang ingin kamu pasang,

7. Pilih HTML/Javascript,

8. Ganti kode warna merah pada script berikut ini dengan kode yang tadi diperoleh dari twittercounter.com

<style type="text/css">
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNzkD61U9CwP9NkPWR72pajtP4IvJlEW42Z_O8w5NuDFY0Q-Chx-4aA7Fo9owYObZeCFhXGeBvWthjDWiQb-wv5Ndxu8Pa6gEQevGDoFQCY8LofSao2VdIGdXqJyWyAC5NR7Q4RekTaOsy/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-uh0sNEWbtd2pr-_Nus_CZSz9gXDZVXHCOo7EisV-D1qbbNn5coeJhgung8PykS3KaisryCo_P1YBYuQ1ebFhmuKsqzddWxwNiDUIeMDNVAyTDaQMVPUdTb05vA_DpQFIGNdA7-QJeKt/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
</style>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
PASTEKAN Script Kode TwitterCounter Disini
</div>
</div>

9. Setelah kamu ubah, copy semua kode yang telah digabungkan dengan twittercounter diatas,

10. Masukkan ke dalam kotak HTML/Javascript di Blogger tadi,

11. Simpan Widget.

12. Selesai.

Memasang Tombol Like Facebook dengan Follow Twitter Simple :

1. Masuk ke Blogger,

2. Pilih Blog Kamu, lalu ke Layout / Tata Letak,

3. Tambah Widget kamu,

4. Pilih HTML/Javascript,

5. Copy kode CSS dan HTML berikut,

<style type="text/css">

#AGCnavbar3{border:4px solid #000;border-radius:5px; width:155px; height:57px; margin-bottom:460px; margin-left:10px; font-family:Comic Sans Ms; color:white;text-align:left; background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHFKnBITsNaTmk-obCvCjpgRTzNZz32hQ9EUW9RJ3l9C9w9PM1uepQQ2mPvKkYMghmLKv6l64hTiwtzEHAJ5NWbKmz4ZZHVxJKfuwQ48an5OEiUaVfZyEzy7VJUbS72_21cQFv6Rz92w/s1600/grid.png"); background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHFKnBITsNaTmk-obCvCjpgRTzNZz32hQ9EUW9RJ3l9C9w9PM1uepQQ2mPvKkYMghmLKv6l64hTiwtzEHAJ5NWbKmz4ZZHVxJKfuwQ48an5OEiUaVfZyEzy7VJUbS72_21cQFv6Rz92w/s1600/grid.png"); background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHFKnBITsNaTmk-obCvCjpgRTzNZz32hQ9EUW9RJ3l9C9w9PM1uepQQ2mPvKkYMghmLKv6l64hTiwtzEHAJ5NWbKmz4ZZHVxJKfuwQ48an5OEiUaVfZyEzy7VJUbS72_21cQFv6Rz92w/s1600/grid.png"); 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;}

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

#AGCnavbar3:hover{box-shadow:1px 1px 5px black;font-size:20px; font-style:bold; width:155px; height:57px; margin-bottom:460px; 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;}

</style>

<div id='AGCnavbar3' 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=https://www.facebook.com/http://impoint.blogspot.com&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&font&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/ravdania'>Ikuti @Media Blogger</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>

</span></div>