Cara Membuat Widget Blogger, Facebook dan Twitter Melayang

Malam Sobat Free Download dan Tutorial, setelah kemarin saya share tentang Cara Membuat Gadget Followers Blogger dan Cara Membuat Widget Twitter Conversation, maka kali ini saya akan melanjutkannya dengan tentang Cara Membuat Widget Blogger, Facebook dan Twitter Melayang. 3 buah widget yang menjadi satu melayang di sisi kanan Blog anda seperti gambar disamping. dengan cara ini, bener-bener dapat menghemat tempat di blog anda. dan kelihatan lebih keren. Langsung saja deh, buat anda yang ingin mencobanya, silahkan ikuti langkah dibawah ini.

Cara Membuat Widget Blogger, Facebook dan Twitter Melayang :

1. Login ke akun blogger sobat
2. Klik Tata Letak > Tambah Gadget pilih HTML/Javascript, 
3. Silahkan Copy Paste Script dibawah ini.
   

   <style type="text/css"> .barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6T4su_eBKJVTK_Ze0SJ-l4o9dL2SCncBNvVrwkbynpwxl-TdtuygbuE3EcYyPp51G-xmQyBX-EVT0K4S04XfRAQAP5v5gl11yeP4gyOEgv3EErM-HS2DPyqggl36iGR1qJr3d4SsXzbRb/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;} .barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfl7L3jlT5mP9bIXMBCUzDu_qDj7UyZMRmwdU6mXzqh2DCdhn5lIgfmf_S9iV7UspiowzI2nq9Vy2_z7gYqHBZdZgsmgag-CTmWznZhNRB6iuawlP-fhUtMBqsNGlOnPtvm5I-NdKf9DjP/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;} .barconteblogger{margin:5px 0 0 47px} .barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxfKESVvICKsSon8PbfyfAzta1q8dsthXEnLAuBI83R-IDmumjO8qHSmhyphenhyphenCjLU68N5jWqrgpHWCNg454LITZ3EJ9CNP8bl00y1ozr1I5OUvpF8GKnbwSU_NQ26hGVXCrsKLV6hm9kqoHvj/');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/AVvXsEi2ZEw3WRsrhwO34kZCk4OAME22ThWqww_fHJWoIrw-hOuHEjObo4Le1-m0Hhi502YbT3EBr0-iDXD0Pd8Hj-DV_uxruO5Q9CVzUESFwPSzpM3FRGicWI4le6dFnxJRslf-eVSLlfMX8UGT/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;} .barcontetwitter{margin:5px 0 0 47px} .barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLH3MdnhIkK8w7zA9s9Z9N4hm_qXESDReNswErkzHbv2N-GsbtPVmWBEK2HYjYiZvLYvI4XctYM_n1wigk7qlvqSTdVJC-KRPwFF5DrGO0elLcgkz69UnhZwlt0qUkIyiyfr3ixeRc_Ub3/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;} .barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu7rlUdrnAg7ezu93NSv6_VRKyqhDZYy7DKdPTgKeIvNOZnNzVMtfSpx1phYxeOAOQUMTKDcuxvnvZ7MC7V4vKww_OwHESvOa6_D2Mm-Wh8tY_n3s37Szocm3rjsI27lpT_VURUVK-DJkH/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;} .barcontefacebook{margin:5px 0 0 47px} </style> <div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"> <div class="barconteblogger"> CONTENT BLOGGER HERE </div> </div> <div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"> <div class="barcontetwitter"> CONTENT TWITTER HERE </div> </div> <div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"> <div class="barcontefacebook"> CONTENT FACEBOOK HERE </div> </div>

4. Keterangan :
• Ganti Tulisan berwarna merah "CONTENT BLOGGER HERE" dengan Kode Google Friend Connect (Followers Blogger)
• Ganti Tulisan berwarna merah "CONTENT TWITTER HERE" dengan Kode Widget Twitter Conversation
• Ganti Tulisan berwarna merah "CONTENT FACEBOOK HERE" dengan Kode Facebook Like Box.
5. Untuk mengetahui masing-masing Kode Content diatas, Anda bisa mengikuti Tutorial di bawah ini.
• Cara Membuat Gadget Followers Blogger
• Cara Membuat Widget Twitter Conversation di Blog
• Cara Memasang Kotak Like Box di Blog 
6. Setelah semuanya selesai di kustomisasi, silahkan Simpan dan lihat hasilnya.
7. Sekian, Semoga berhasil dan Bermanfaat.