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 + 6 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

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