Cara Membuat Like Facebook , Twitter , dan Google+ Melayang di Sisi Blog

Selamat datang sahabat,,, :) Kali ini Saya akan membahas tutorial cara membuat widget sosial Facebook, Twitter, Google+ melayang di sebelah kanan blog. Mungkin di blog-blog lain juga sudah banyak yang posting tentang widget ini, ini sangat bermanfaat bagi blog Sobat yang laman blognya sudah dipenuhi artikel-artikel atau iklan. Selain tampilannya yang simpel, ini juga akan membuat blog Sobat menjadi lebih keren and sexy, seperti gambar di bawah ini:
widget sosial media 
Bagaimana cara membuat widget ini? Ikuti langkah-langkah  berikut:

1. Seperti biasanya masuk ke akun Blogger Sobat
2. Pilih tataletak, tambah gadget
3. Selanjutnya pilih HTML/JavaScript
4. Lalu copas kode script di bawah ini:

<style>

img,a {

    border: 0;

}

#on {

    visibility: visible;

}

#off {

    visibility: hidden;

}

#facebook_div {

    width: 196px;

    height: 340px;

    overflow: hidden;

}

#twitter_div {

    width: 246px;

    height: 353px;

    overflow: hidden;

}

#google_plus_div {

    width: 152px;

    height: 97px;

    overflow: hidden;

    margin-left: 50px;

    margin-top: 10px;

}

#knfeedburner_div {

    width: 300px;

    height: 97px;

    overflow: hidden;

    margin-top: 5px;

    margin-left: -4px;

}

#kakinetwork_div {

    width: 300px;

    height: 97px;

    overflow: hidden;

}/* right side style */#facebook_right {

    z-index: 10005;

    border: 2px solid #3c95d9;

    background-color: #fff;

    width: 196px;

    height: 353px;

    position: fixed;

    right: -200px;

}

#facebook_right img {

    position: absolute;

    top: -2px;

    left: -35px;

}

#facebook_right iframe {

    border: 0px solid #3c95d9;

    overflow: hidden;

    position: static;

    height: 360px;

    left: -2px;

    top: -3px;

}

#twitter_right {

    z-index: 10004;

    border: 2px solid #6CC5FF;

    background-color: #6CC5FF;

    width: 246px;

    height: 353px;

    position: fixed;

    right: -250px;

}

#twitter_right_img {

    position: absolute;

    top: -2px;

    left: -35px;

    border: 0;

}

#google_plus_right {

    z-index: 10003;

    background-color: #F2F2F2;

    border: 2px solid #006ec9;

    border-top: 2px solid #0056a0;

    border-bottom: 2px solid #0056a0;

    border-right: 2px solid #0056a0;

    border-left: hidden;

    width: 152px;

    height: 97px;

    position: fixed;

    right: -154px;

}

#google_plus_right_img {

    position: absolute;

    top: -2px;

    left: -33px;

    border: 0;

}

#feedburner_right {

    z-index: 10003;

    background-color: #fefefe;

    border: 2px solid #5b5b5b;

    border-top: 2px solid #5b5b5b;

    border-bottom: 2px solid #5b5b5b;

    border-right: 2px solid #5b5b5b;

    border-left: hidden;

    width: 300px;

    height: 97px;

    position: fixed;

    right: -303px;

}

#feedburner_right_img {

    position: absolute;

    top: -2px;

    left: -33px;

    border: 0;

}

#kakinetwork_right {

    z-index: 10003;

    border: 2px solid #303030;

    background-color: #fff;

    width: 300px;

    height: 97px;

    position: fixed;

}

#kakinetwork_right img {

    position: absolute;

    top: -2px;

    left: -101px;

}/* left side style */#facebook_left {

    z-index: 10005;

    border: 2px solid #3c95d9;

    background-color: #fff;

    width: 196px;

    height: 353px;

    position: fixed;

    left: -200px;

}

#facebook_left img {

    position: absolute;

    top: -2px;

    right: -35px;

}

#facebook_left iframe {

    border: 0px solid #3c95d9;

    overflow: hidden;

    position: static;

    height: 360px;

    right: -2px;

    top: -3px;

}

#twitter_left {

    z-index: 10004;

    border: 2px solid #6CC5FF;

    background-color: #6CC5FF;

    width: 246px;

    height: 353px;

    position: fixed;

    left: -250px;

}

#twitter_left_img {

    position: absolute;

    top: -2px;

    right: -35px;

    border: 0;

}

#google_plus_left {

    z-index: 10003;

    background-color: #006ec9;

    border: 2px solid #006ec9;

    border-top: 2px solid #0056a0;

    border-bottom: 2px solid #0056a0;

    border-left: 2px solid #0056a0;

    border-right: hidden;

    width: 152px;

    height: 97px;

    position: fixed;

    left: -154px;

}

#google_plus_left_img {

    position: absolute;

    top: -2px;

    right: -33px;

    border: 0;

}

#feedburner_left {

    z-index: 10003;

    background-color: #fefefe;

    border: 2px solid #5b5b5b;

    border-top: 2px solid #5b5b5b;

    border-bottom: 2px solid #5b5b5b;

    border-left: 2px solid #5b5b5b;

    border-right: hidden;

    width: 300px;

    height: 97px;

    position: fixed;

    left: -303px;

}

#feedburner_left_img {

    position: absolute;

    top: -2px;

    right: -33px;

    border: 0;

}

#kakinetwork_left {

    z-index: 10003;

    border: 2px solid #303030;

    background-color: #fff;

    width: 300px;

    height: 97px;

    position: fixed;

}

#kakinetwork_left img {

    position: absolute;

    top: -2px;

    right: -101px;

}

.box-title1 {

    border: 1px solid #ddd;

/*border-radius*/

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

/*box-shadow*/

    -webkit-box-shadow: 5px 5px 5px #CCCCCC;

    -moz-box-shadow: 5px 5px 5px #CCCCCC;

    box-shadow: 5px 5px 5px #CCCCCC;

    padding: 10px;

    margin: 10px 0;

}

.enteryouremail {

    background: #fff !important;

    border: 1px solid #d2d2d2;

    padding: 0px 8px 0px 8px;

    color: #a19999;

    font-size: 12px;

    height: 25px;

    width: 165px;

/*border-radius*/

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    margin: 0px;

}

.submitbutton {

    background: #F2F2F2;

    border: 1px solid #F66303;

/*box-shadow*/

    -webkit-box-shadow: 3px 3px 3px #666;

    box-shadow: 3px 3px 3px #666;

    font: bold 12px Arial, sans-serif;

    color: #000000;

    height: 25px;

    padding: 0 12px 0 12px;

    margin: 0 0 0 5px;

/*border-radius*/

    -webkit-border-radius: 5px;

    border-radius: 5px;

    cursor: pointer;

}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>


<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>


<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on">

 <div id="facebook_right" style="top: 18%;">

  <div id="facebook_div">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SZ9yQUKcaUtb1ZXB8yiN0Ve2yzhdd5Q-OWWTJk3TG7932cjL1my1aTvRtYGeM7Go30krv0PgtwZOrB5g0QIAI26Fkeydsx9QiYB2W9SJuD7VY4zoo5DkHWe2802GNHBo5dafAC_TVgc/s1600/helperblogger.com-facebook-icon.png" alt=""/>

   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F4bdulkh0lik&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">

   </iframe>

  </div>

 </div>

</div>

<div id="on">

 <div id="twitter_right" style="top: 35%;">

  <div id="twitter_div">

   <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTwq3h59gq8vjcpPCzFaqRLF_cYuhIk9NApSv5H9dfhAUy-zr22Spi1bcB0GmBmFvDonD15mXk31pwnh6HnZu92AQ9H_2E_yPceWpF1xqRAIiPy0IkeEexorHywFsFVNpDkdP6P6x0-w/s1600/helperblogger.com-twitter-icon.png"/>

   <script src="http://widgets.twimg.com/j/2/widget.js"></script>

   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('browzink').start();</script>

  </div>

 </div>

</div>

<div id="on">

 <div id="google_plus_right" style="top: 52%;">

  <div id="google_plus_div">

   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_Y1Y67qi_2vbZqD9Q54Qh9kM5lhCIVC6Rm8WrVnguOQl0dq68U9GwGSmxA3FGMkn9GDSutQVJH_NxCLzdJsJgJ3XXRv6lkBZkDBXWohp-mLf1FQlCjN_JPoV0FaY35krVX1c8G2MpvE/s1600/helperblogger.com-google-plus-icon.png"/>

   <div style="float:left;margin:10px 10px 10px 0;">

    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>

   </div>

  </div>

 </div>

 <div id="on">

  <div id="feedburner_right" style=" top: 69%;">

   <div id="knfeedburner_div">

    <center>

    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>

    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Se-carablogspotcomBloggerTrick-Kampus-TipsSeo-WidgetBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="Se-carablogspotcomBloggerTrick-Kampus-TipsSeo-WidgetBlog" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>

    </form>

    </center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMK8rcKhE9hvj7-qEy8u7dngIZusBuSzlOt9KVqNdYFFyQphrhYA5p71yxHdYA1vtrJXDq1bEFJtCwppoUbJpzcFUycHk9nGz0AQ0rZ0zHVaOH9QMbA0ntWt9wOKgZT4dke3SPJaBqCFQ/s1600/helperblogger.com-subscribe-icon.png"/>

   </div>

  </div>

 </div>

</div>

KETERANGAN: 
Kode yang berwarna merah itu adalah kode javascript slide. Jika widgetnya tidak berfungsi, mungkin di blog Sobat sudah ada javascript untuk slide, hapus kode yag berwarna merah.

Yang berwarna kuning silahkan ganti dengan ID Facebook Page, ID Twitter dan ID Feedburner Sobat.

5. Klik simpan dan lihat hasilnya.

Semoga bermanfaat, jangan lupa tinggalkan komentarnya..!
 


Share this article :

+ komentar + 7 komentar

11 September 2014 pukul 18.51

Keren Banget Gan, makasih

11 September 2014 pukul 18.51

Thanks you gan :D

29 September 2015 pukul 10.44

Apa ini tidak melangar tos gan, kalau kita ikut adsence...
Btw nice info gan...
jangan lupa berkunjung juga ke blog saya gan

5 November 2016 pukul 21.32

infonya mantap gan. thanks

29 April 2018 pukul 10.09

kk mau tny utk pemasangan iklan betting disitus informasisekarang.blogspot.com diperbolehkan ga?
klo bole bisa minta daftar harga perbulan utk masing2 posisi banner?

terima kasih

26 September 2021 pukul 00.23

Bonus Daily Reload 5% Live Casino

- Bonus Dapat di Claim Pada Provider Live Casino : AG Casino, All Bet Casino, Big Gaming Casino, Dream Gaming, Evolution Gaming, Golden Deluxe, SA Gaming, dan Sexy Gaming
- Minimal Deposit 100.000
- Maksimal Bonus Dapat di Claim 500.000
- Extra credit 5% langsung dimasukan kedalam account, dengan melakukan confirm promo di menu deposit
- Withdraw dapat dilakukan apabila sudah mencapai TO sebanyak 7x
Contoh : 1.000.000 (depo) + 50.000 (bonus) = 1.050.000 x 7 (TO) = 7.350.000
- Jika tidak mencapai TO , Maka Withdraw Tidak Dapat Dilakukan
- Tidak Dapat Digabungkan dengan Promo Rollingan & Cashback & Pindah Jenis Permainan Lain.
- Tidak diperbolehkan double bet (bet kanan & kiri atau over-under dalam 1 pertandingan)
- Bonus tidak berlaku jika terdapat persamaan IP address, nama rekening, no tlp dan email dengan member lain yang sudah terdaftar.
- Pihak BVgaming Berhak Membatalkan Bonus Apabila Mendapati Kecurangan.

Mari bergabugn di situs online judi kami dan secara LIVE CASINO bersama wanita cantik dn seksi...

Silahkan bertanya untuk informasi selengkap nya
WhatsApp: 0812 1495 2061

15 Desember 2025 pukul 09.02

Dari Modal Receh, Jadi Jackpot Fantastis.

Hari Ini Giliranmu Jadi Raja Jackpot!

Freechip Setiap Pekan, Bikin Kantong Makin Tebal.

Bukan Cuma Mimpi, Kemenangan Besar Nyata di Sini.

Live Casino dengan Dealer Cantik & Profesional.

JADI TUNGGU APA LAGI SEKARANG JUGA JOIN!

MAU CARI KEUNTUNGAN TAPI TIDAK MAU CAPEK??

Buruan sekarang juga join disini!!!

AKAN KAMI BANTU JIKA KESUSAHAN MENANG

JOIN SEKARANG JUGA & MAIN BERSAMA KAMI

JANGAN BINGUNG LAGI NIH SAYA SEDIAKAN WEBSITE UNTUK KAMU

JANGAN TUNGGU LAGI KALAU MAU CARI KEUNTUNGAN YANG BANYAK

PROSES WD DISINI SECEPAT KILAT

JANGAN TAKUT RUNGKAD KALAU DISINI

BANYAK BONUS YANG MENANTIKAN KAMU

JANGAN SAMPAI KAMU KETINGGALAN JUGA

SINI JOIN BERSAMA KAMI , KAMU MAMPU MENANG BERAPAPUN AKAN DIBAYAR

SAMA KAMI JANGAN DIRAGUKAN LAGI

INI SANGAT REKOMENDASI BUAT KAMU YANG MENCARI KEUNTUNGAN DALAM SEKEJAP

Belum punya akun? Tenang kami bantu daftarkan... klik link daftar dibawah

BANYAK HADIAH PROMO MENARIK YANG MENANTIMU

Dapatkan penawaran khusus new member buat kamu yang daftar hari ini

Mari join segera bersama kami

HANYA DI - WINNING303

PROMO DEPOSIT PULSA | DEPOSIT VIA OVO DANA GOPAY LINKAJA JENIUS SAKUKU

SPECIAL BONUS :
✅Bonus Freechip Games Slot Gacor Hari Ini
✅Bonus Mabar Geng Gacor Auto Cuan
✅Bonus Absensi Member Setia Paling Top
✅Bonus Lucky Spin Profit Setiap Hari
✅Bonus Reward Member Level Up Pasti Untung
✅Bonus Harian 50% Pasti Maxwin
✅Bonus Member Baru 100% Pasti Gacor
✅Bonus Deposit Pulsa Tanpa Potongan
✅Bonus Event Mix Parlay Pasti Hoki
✅Bonus Harian 10% Sports & Casino Pasti Cuan
✅Bonus Deposit Harian POKER
✅BONUS DEPOSIT HARIAN 50%
✅BONUS ROLLINGAN up to 1%
✅BONUS CASHBACK 10%
hingga masih banyak bonus lainnya.
LINK DAFTAR & PROMO MENARIKNYA => DAFTAR AKUN CASINO
atau
HUBUNGI KAMI => WHATSAPP : +62 878-7536-1656

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Info Menarik - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger