Cara Membuat Widget Blogger, Facebook dan Twitter Melayang

Cara Membuat Widget Blogger, Facebook dan Twitter Melayang

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.


  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/AVvXsEjYoXv6CiJdHUikwzhfcUIYjziTflPNeIrsYMtfxmk0bhabgLZ7Yu3AGFVMA_Qa8nCzMeAAcmSVEC-XF1CZ_vG-kuMx2Oyaaz_k5m8Gw-XHO0ngMYW1FkMfE65pA7vm6-C1MHJRwvcE0MRc/');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/AVvXsEhvoB_7OTZiqak2kvzo4U9XbVvKeOLzz35YQqT8aMZhhM1JUFROLbsfSY3MJv1uhjjqXwmcRTmE2MxvHR-eAWNswzn2gN2KNx8uJ4hbUUTUouJl3rxyCGMYApQnh7iI2daSm9zNdbHgAwBs/');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/AVvXsEhOESB5wTTqF7MzaTonKOukQMfxJa7rRcsjQoSNlt5qFhd5MDhSIxc_AW8-PcwbxMQQ8sop-9-jnPLQeZcdppgJ1H-UIVzJhiG6kc5BstVvrg5D0xwr3v4Uuzu5j2r0aeNBU6bHBL_DHXL-/');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/AVvXsEhgKeK1R8p49Ob67rdTMcZnwxpqO5n-3I0NVJiu1TNuIthRF-4kOzzW41tEKR_iLForhHKGWUj30zhdkfcuJF17xG0knQQhp_Y2BN72j4o-IX-lnWjB9JsB2LOd1cLxFcxdVB3sbfyM6AcS/');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/AVvXsEgcu94uQ30psCVONuScDGPAVu6hhdQ3qXsY88Y3OCIOqYgM7XnLzNrSt46l4Icd3PJVOMWT2iA_5hnqAo7CYV18U6TqioOCQk0Im5orYhOXj1vraJYGd63Q8xD0IRt9xDxE_PeyHHarAp-w/');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/AVvXsEhXxGDw3ZEHDiaR_9jR1RYF9z3E4oaPUVjdr5wkqIt3w1WuEVXksVKIr7kKS-5MF4xT1YAK9ED0LUJfZvipBHBNo1IeOV7gAVHuIls4rP0zCuOECUrhANvOrAhzVKXRlKgAFCZ-uYQP-At4/');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.
  6. Setelah semuanya selesai di kustomisasi, silahkan Simpan dan lihat hasilnya.
  7. Sekian, Semoga berhasil dan Bermanfaat.

About

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Next
« Prev Post
Previous
Next Post »

# Silahkan Anda Berkomentar dengan Baik dan Sopan
# Pesan dilarang Mengandung SARA dan Spam
# Terima Kasih Telah berkunjung di Blog Sederhana ini ConversionConversion EmoticonEmoticon

Thanks for your comment
Langganan: Posting Komentar (Atom)