Cara Menambahkan Widget Social Media Keren

 

Hay Sobatb Raysoft , gimaanaa Widget Social Media Diatas . Keren Bukan ?
naah Kali ini Admin Akan share Ke kalian semua para Blogger , Cara Menambahkan Widget Social Media Keren . Untuk preview nya , Saya udah pasang Kok ini widget Di Blog saya Sob . Widget Ini Memiliki Kelebehin looh Sob , Diantaranya Adalah :

Meliputi empat tombol jejaring sosial
 Media Social paling sering digunakan dan ditambah ikon RSS
Efek memperluas ke samping
Penggunaan CSS sprite
Sangat rapi dan bersih

Naah Gimana Sob ? Tertarik Untuk Mencoba Atau Menambahkan Widget
Social Media ini Ke dalam Blog Sobat ? Niih Admin Kasih Tau Caranya , Saya bikin Se Mudah Mungkin Ini Tutorialnya , Biar Sobat-sobat yg Masih Newbie Pun Bisa Melakukanya . Ikitu Step to Step yaah

1. Pertama , Silahkan Sobat Masuk Ke Blogger Sobat , Lalu Pilih Dashbor Blogger
2. Kemudian , Pilih atau Klik Menu " TATA LETAK"
3. Pilih Lokasi atau tempat Untuk memasang Widget ini , Pilih "TAMBAH GADGET"
4. Ada banyak Pilihan , Lalu pilih yg "HTML/JAVA SCRIPT"
5. Pastekan Script Dibawah Ini Ke dalamnya , Judul Kosongin Juga gapapa

<style> #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJVn-oESmIgp5yYVSRtxKWHvafZHbwfVDvkgn9JvDpv1B9DMskEm3PEH0fGpWTChGBGQ27loPKI-Nw2_rqSMNAlblywFwpeNdm6l4KLlqlaJPiZp-BFmkmydl4x3PW6lLEme9DXcu-EGM/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbisose .icon{overflow:hidden; color:#fafafa;} #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbisose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li> </ul> <small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"> <a href="http://safryan-art.blogspot.com/2013/11/cara-membuat-widget-social-media-keren.html" target="_blank" title="Widget Follow Us">-> Get This Widget Here</a></div> </small> 

6. Simpan dan Lihat Hasilnya Sob

Keterangan : Silahkan Ganti Kode # Dengan Link Akun Anda

Misalnya href="#">Follow us on Facebook</a></li> 

Tanda Pagar Saya ganti Link FB Saya menjadi 

href="www.facebook.com/reg.anonymouse">Follow us on Facebook</a></li>

Begitu juga Dengan Link-link Lainya Seperti :

href="#">Follow us on Google+</a></li> 

href="#">Follow us on Twitter</a></li>

href="#">Follow us on Pinterest</a></li> 

Oke Sob Sekian dulu yaa Postingan saya kali ini , jika Ada pertanyaan silahkan tinggalkan komentar di kotak komentar yaa sob :) goodnight

INFO PENTING
Kabar Gembira Untuk Kita Semua !
ada game yang menghasilkan uang, dan jika kita meng-install aplikasi atau ngerjain task akan dibayar 0,1 - 1$ dan juga saat pertama kali mendaftar pakai coupon AE89874 langsung dapat 0,3$ Namun ini khusus bagi pengguna android.
Nama aplikasinya : WHAFF
Masukan coupon : AE89874 (langsung dapat 0,3$)
Downloadnya dimana : Google Playstore atau bisa langsung klik disini

Share :

Tweet

✚

Related Post