Ad 468 X 60

Minggu, Juni 02, 2013

Cara Membuat Social Tab Fan Box Floating ( Melayang ) Di Blog

Di dalam Social tab ini terdapat 5 sosial media fan box yang merupakan suatu alternatif bagi suatu blog untuk mendapatkan traffic bagi blognya sendiri, Didalamnya terdapat Like FB, Twitter Box, Google+. Youtube, dan Pinterest. Karena iseng mencari cari tutorial diberbagai penjuru dalam bahasa inggris akhirnya saya bisa mendapatkan suatu widget yang menarik lainnya. tidak bisa dipungkiri bahwa pengguna blogger dari 100% kalangan penghuni blog 70%-nya adalah anak berusia 15 tahun sampai 25 tahun, bahkan ada yang lebih muda lagi. Untuk Contohnya bisa dilihat gambar disamping,
Widget ini memang masih belum begitu digunakan disetiap blog, jadi bagi yang ingin memakai-nya diblog agar terlihat menakjukan. Baca sampai akhir dan Join di Blog saya + Like FB dan bagde Google+.
Jika ingin melihat hasilnya klik DEMO

Bagaimana Cara membuatnya :
  • Masuk Ke Blogger - Pilih blog - Klik Template - Edit HTML
  • Kemudian cari Code Dibawah ini
]]></b:skin>
  •  Setelah Ketemu Copy code dibawah ini dan letakan tepat diatas code ]]></b:skin>.
/* --- Azhariian.blogspot.com/ - Ian Azhari --- */
.MBL-slideshow{
height:400px;
display:inline-block;
position:fixed;
left:0;
top:50px;
width:35px;}


.MBL-slideshow.wk_right{
left:auto;
right:0;}

.wk_containt-button{
background-image:url("http://3.bp.blogspot.com/-Lhrq9Oz0SXI/ULTI5OOV02I/AAAAAAAAIfk/APiSTHC6-Fw/s1600/wk_social_tab.png");background-repeat:no-repeat;
cursor:pointer;
display:inline-block;
height:36px;
position:relative;
width:35px;
margin-bottom:5px;
left:0px;
top:40px;}

.MBL-slideshow.wk_right .wk_containt-button{
left:auto!important;
right:0px;}

.wk_containt{
display:block;
left:0;}

.MBL-slideshow.wk_right .wk_containt{
left:auto!important;
right:0px;}

.wk_data{
border:5px solid #ff0000;
border-left:none;
display:inline-block;
left:-305px;
position:absolute;
height:360px;
overflow:hidden;
background-color:#FFF;
width:285px;
z-index:9999;
top:0px;
border-radius:0px 13px 13px 0px;}

.MBL-slideshow.wk_right .wk_data{
left:auto!important;
right:-300px;
border:5px solid #ff0000;
border-right:none;
border-radius:13px 0 0 13px;}

#wk_facebook{
background-position:-45px -41px;}

#wk_linkedin{
background-position:-5px -0px;}

#wk_google{
background-position:-5px -82px;}

#wk_twitter{
background-position:-45px -82px;}

#wk_youtube{
background-position:-5px -41px;}

#wk_pintrest{
background-position:-45px -0px;}

#pintester-board{
height:321px;
list-style:none outside none;
overflow:auto;
margin:0px;
padding:0px;}

#pintester-board li{
background-color:#FFFFFF;
box-shadow:0 1px 2px rgba(34,25,25,0.4);
font-size:11px;
padding:15px 15px 45px;
width:192px;
margin:10px auto;
overflow-y:auto;
overflow-x:hidden;
border-bottom:1px solid #ccc;}

#pintester-board li .pinitem{
display:inline-block;
padding:5px;
background:#ccc;
width:200px;}

#pintester-board li .pinitem img{
background:none repeat scroll 0 0 #FFFFFF;
border:medium none;
margin-bottom:2px;}

#pintester-board li .pinitem a{
display:block;
text-align:center;}

#pintester-board .date{
background-color:#F2F0F0;
bottom:0;
color:#8C7E7E;
display:block;
font-style:normal;
font-weight:bold;
left:0;
padding:5px 10px;}

.profile h3{
background:none repeat scroll 0 0 #ECECEC;
border-bottom:1px solid #CCCCCC;
padding:10px;
position:relative;}

.profile h3 a{
color:#555555;
display:inline-block;
letter-spacing:1px;
padding:3px 0 0 20px;
text-shadow:0 1px 0 #FFFFFF;
text-transform:uppercase;
margin:0;
text-decoration:none;
font:bold 12px/14px Arial,sans-serif;}

.profile .dcsmt-btn{
background:none repeat scroll 0 0 #FF0000;
border-radius:3px 3px 3px 3px;
color:#FFFFFF;
cursor:pointer;
display:inline-block;
font:bold 12px/14px Arial,sans-serif;outline:medium none;
padding:5px 8px;
position:absolute;
right:10px;
text-decoration:none;
top:6px;}

.wk_data .profile{
padding-bottom:5px;
height:20px;}

.profile h3{
margin:0px;
text-align:left;}

#google-board{
height:295px;
overflow:auto;}

#google-board .meta{
color:#999999;
display:block;
font-size:90%;
padding-top:3px;}

#google-board .thumb img{
background:none repeat scroll 0 0 #FFFFFF;
border:3px solid #ECECEC;
padding:1px;}

#google-board .title{
color:#333333;
margin-bottom:5px;
text-decoration:none;}

#google-board .title:hover{
text-decoration:underline;
background-color:transparent;}

#google-board .meta span{
display:block;
float:left;
line-height:12px;
margin:0 8px 5px 0;
padding:0 0 0 15px;}

#google-board .meta span.plusones{
padding-left:0;}

#google-board li
{border-bottom:1px solid #CCCCCC;
font-size:15px;
overflow:hidden;
padding:10px 5px;
text-align:left;}

#google-board .thumb{
float:left;
margin:0 10px 0 0;}

#google-board span.shares{
background:url("http://2.bp.blogspot.com/-n0eM0NjrirU/ULTJUIn_ZgI/AAAAAAAAIfs/AS66Eftyf7s/s1600/shares.png") no-repeat scroll 0 0 transparent;
padding-left:20px;}

#google-board span.comments{
background:url("http://1.bp.blogspot.com/-DUUnFRSvHNQ/ULTJVIYDD-I/AAAAAAAAIfw/EF5X96oD14o/s1600/comments.png") no-repeat scroll 0 0 transparent;}

#google-board .date{
display:block;
clear:both;}

#google-board{
list-style:none outside none;
margin-top:-14px;
overflow:auto;
padding:5px;
background-color:#fff;}

.g-plus{
height:50px;
border-bottom:1px solid #ccc;
margin-bottom:15px;
background-image:url("http://2.bp.blogspot.com/-uIWqKNwZONA/ULTJWSzhWzI/AAAAAAAAIf8/kPzxYUvL1-U/s1600/google_err.png");background-repeat:no-repeat}

.wk_youtube_head{
overflow:hidden;
height:104px;}

#wk_youtube_header{
overflow:hidden;
height:104px;
width:100%;
border:0;}

#wk_youtube_data{
background-color:#ffffff;
height:258px;
width:285px;
overflow-y:auto;
overflow-x:hidden;
border-top:1px solid #ccc;}

#wk_youtube_datalist{
list-style:none;
margin:0 auto;
padding:6px 0 0 12px;}

.wk_youtube_link{
height:45px;
float:left;}

.wk_youtube_img{
width:70px;
height:45px;
float:left;}

.wk_clear{
clear:both;}

.wk_youtube_lebal{
display:inline-block;
margin-left:10px;
width:170px;}

a.wk_youtube_subject{
color:#333;
text-decoration:none;}

a.wk_youtube_subject:hover{
text-decoration:underline;}

#wk_youtube_datalist li{
clear:both;
padding:5px 0px;
border-bottom:1px solid #CCC;}

  • Kemudian simpan template dan menunggu sampai proses save selesai.
  • Jika sudah disimpan, kemudian Pilih Tata Letak (Layout ) - Tambah Widdget (Add a Gadget)  - Pilih Opsi HTML/Javascript.
  • Copy Paste Code dibawah ini.
<script type="text/javascript"> if (typeof jQuery == 'undefined'){document.write(unescape("%3Cscript src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));}</script><script src="https://mybloggerlab.googlecode.com/files/MBL-slideshow.js"></script>
<!-- Facebook Social Tab-->

<div class="MBL-slideshow "><div class="wk_containt"> <span class="wk_data" style="border-color:#3C5B9B;"><script type="text/javascript">(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-root" id="fb-root"></div> <div class="fb-like-box" data-colorscheme="light" data-href="http://www.facebook.com/azhariian" data-width="300" data-height="360" data-show-faces="true" data-stream="false" data-header="false"></div> </span> <span class="wk_containt-button" id="wk_facebook"></span> </div>


<!-- Google Plus Social Tab-->

<div class="wk_containt"> <span class="wk_data" style="border-color:#F63E28;"> <div id="googal-tab" class="tab_div ui-tabs-panel"> <div class="g-plus" data-height="69" data-href="https://plus.google.com/u/0/106374439082237286396" data-rel="author"></div> <script type="text/javascript">(function(){var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
</script><ul id="google-board"></ul> </div> </span> <span class="wk_containt-button" id="wk_google"></span> </div>


<!-- Twitter Social Tab-->

 <div class="wk_containt"> <span class="wk_data" style="border-color:#2DAAE1;"> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 7,interval: 30000,width: 287,height: 275,theme: {shell:{background: '#2DAAE1',color: '#ffffff'},tweets: {background: '#ffffff',color: '#000000',links: '#47a61e'}},features:{loop: false,live: false,scrollbar: true,avatars: true,behavior:'all'}}).render().setUser('Ian_azharii').start();</script> </span> <span class="wk_containt-button" id="wk_twitter"></span> </div>

<!-- YouTube Social Tab-->

 <div class="wk_containt"> <span class="wk_data" style="border-color:#FE3432;"> <div class="wk_youtube_head"> <iframe id="wk_youtube_header" src="http://www.youtube.com/subscribe_widget?p=Ra5taF4r4" scrolling="no" frameBorder="0"></iframe> </div> <div id="wk_youtube_data"> <ul id="wk_youtube_datalist"> </ul> </div> <script>var wk_youtube_user_id='Ra5taF4r4';</script> </span> <span class="wk_containt-button" id="wk_youtube"></span> </div>

 <!-- Pinterest Social Tab-->

 <div class="wk_containt"> <span class="wk_data" style="border-color:#CB2027;"> <div id="pintester-tab" class="tab_div ui-tabs-panel"> <div class="profile"> <h3><a class="btn-type-pinterest" href="http://www.pinterest.com/fosterzone">Pinterest</a></h3> <a class="dcsmt-btn btn-type-pinterest" href="http://www.pinterest.com/azhariian">Follow on Pinterest</a> </div> <ul id="pintester-board"></ul> </div> <script type="text/javascript">var wk_pintrest_id='fosterzone';</script> </span> <span class="wk_containt-button" id="wk_pintrest"></span> </div> </div>
Perthatian untuk code yang berwarna :
  • Ganti http://www.facebook.com/azhariian dengan URL FB sobat hanya azhariian saja.
  • Ganti https://plus.google.com/u/0/106374439082237286396 dengan ID G+.
  • Ganti Ian_azhariin dengan Use ID Twitter.
  • Ganti Ra5taF4r4 dengan Usernane atau pengguna Youtube. kalau tidak perlu bisa dihapus dari <!-- YouTube Social Tab--> sampai <!-- Pinterest Social Tab-->
  • Ganti azhariian dengan Username acount Pinterest, kalau belum punya bisa dibuat sendiri lah,, hari gini gitu, semua serba Free jadi ga usah takut mengalami kesulitan. yang dibutuhkan cuma Connecti yang memadai aja.. Free Free Free
Okeh Cukup sekian, jangan lupa untuk Join site blog nih,, Like facebook juga yo,, Thanks Attention


Get Free Email Updates Daily!

6 komentar:

  1. asik gw suka nih yang pake jquery,keliatannya keren. maknyos

    BalasHapus
    Balasan
    1. hehe,, ia gan, klo mau bikin widget ini, jga harus di edit dlu JS-nya trus di Upload lagi,,

      Hapus
  2. yang twitter koq ga muncul min?

    BalasHapus
    Balasan
    1. klo ga bisa pake script bawaan twitter aja.. trus di replace beberapa script punya mas azhariian, yar muncul twitter nya mas bregas. tuh ane udh edit dikit diblog ane.

      Hapus
  3. tq mas bro.. bisa & berhasil, 2 jempol deh & salam kenyot, cuma ane utik2 dikit mas,,,

    BalasHapus
  4. asik bang keren thanks yah gw izin pke kursor lu yah smoga bisa kyaka lu bang blog gw aminnn :) :) :)

    BalasHapus