Headline
Loading...

Social Network dengan Efek Sliding


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.



*****************************************
Name : Widget Social Slide
******************************************/

#socialbdrssliding a{

font-family: 'Open Sans', Helvetica, Arial, sans-serif;

width: 40px;

transition:width 0.4s;

-webkit-transition:width 0.4s;

-moz-transition:width 0.4s;

overflow: hidden;

}#socialbdrssliding a:hover{

width: 100px;

overflow: hidden;

}#socialbdrssliding {

float: right;

position: relative;

height: 40px;

}#socialbdrssliding ul { margin: 0; }

#socialbdrssliding li,

#socialbdrssliding li a,

#socialbdrssliding li .bdrs-thumb,

#socialbdrssliding li .bdrs-title {

display: block;

position: relative;

width: 40px;

height: 40px;

}#socialbdrssliding li,

#socialbdrssliding li a,

#socialbdrssliding li .bdrs-title {

float: left;

width: auto;

overflow: hidden;

}#socialbdrssliding li a {

width: 40px;

line-height: 40px;

color: #E9E9E9;

font-size: 11px;

font-weight: bold;

text-shadow: 1px 2px 2px #000;

text-decoration: none;

}#socialbdrssliding li .bdrs-thumb { float: left; }

#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }

#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRtsqVk7pY-dhZxF_Nf5Aou9dSDUez_iV8L8GSW0FaXEaQXJRCiUwIWZv5eUghbVqulmeuRoe5JVI4uBSRdBJJee0h7LS5SGiWo5zrPaJFrKHtIPBAhyw7lQD2rxiEHD8co2l6KwVSfpQ/s1600/FACEBOOK.png")
 no-repeat 0 -40px; }

#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }

#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLIeiohp5uu6lcjUoV2IOpTC2iuma86Vwtv_zG-bOmlCj0-oPY-W8p3x74HJUFtBj0vEnAL_t78mPWWfZn6uxE10g-DL4YvNdxoKve2ue-o2XBoR4NT3efhAz-JGbZRf8S-52L_mMVXk/s1600/googleplus.png")
 no-repeat 0 -40px; }

#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }

#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFUsgwXfzK7THAt9SE72Ukf0iRyt8xIM_cTKgDXMnZaA1OkmhN-3aQmOfsZdU1wsgZdlPDu9dGANRkVU8WSoPOgPVXL18jN8g9XvkgkaJ-kofqBtDK2WAO6FKBlsQp9XIOA4iggJOk2tU/s1600/TWITTER.png")
 no-repeat 0 -40px; }

#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }

#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QxpLxyxnkHJGossyau-6jolLIIP1OcKkR5x13G2_jn_UAZTP8XtqQWtgRIx9mEJdHBqPKlufssL_QBptyHNrVOMePV7zq0WwxjkCV44syKQSbZBCmk2q8mKXGvzB2BQJE3Z4Q1ym0po/s1600/rssbd.png")
 no-repeat 0 -40px; }

#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }

#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEdJgKpCBVM_6pKAWCcDObIn4SnRjkab9mBbo7SnSZ0VwIvMRZeloIEH-9K4QWemym-RqtFWfSzPfcFbjCTou3BjH6I6nZOBAz_KoA0sdlNtWKMKaSEOp-cet0xwMh62YRZ7s22VMNZw/s1600/youtube.png")
 no-repeat 0 -40px; }

#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding 
li.bdrs-youtube  a:hover, #socialbdrssliding li.bdrs-rss a:hover, 
#socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding 
li.bdrs-gplus a:hover {background-color:#666;}
/*code CSS end */
  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Untuk memasang kode htmlnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
  • Silahkan pilih " Tata Letak " pada dasbor blog anda.
  • klik "Add gadget " ( Tambahkan gadget )
  • Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
  • Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
  • Edit html , save dan lihat hasilnya, semoga bermanfaat...
!-- BDRS widget social slide code start -->

<div id="socialbdrssliding"><ul><li class="bdrs-gplus"><a href="LINK GPlus "
 target="_blank" rel="nofollow" title="gplus"><div 
class="bdrs-thumb"></div><div 
class="bdrs-title">Gplus</div></a></li> 

<li class="bdrs-facebook"><a href="LINK FACEBOOK"
 target="_blank" rel="nofollow" title="facebook"><div 
class="bdrs-thumb"></div><div 
class="bdrs-title">Facebook</div></a></li>

<li class="bdrs-twitter"><a href="LINK TWITTER"
 target="_blank" rel="nofollow" title="twitter"><div 
class="bdrs-thumb"></div><div 
class="bdrs-title">Twitter</div></a></li>

<li class="bdrs-rss"><a href="LINK RSS"
 target="_blank"  rel="nofollow" title="rss feed"><div 
class="bdrs-thumb"></div><div 
class="bdrs-title">RSS</div></a></li> 

<li class="bdrs-youtube"><a href="LINK YOUTUBE"
 target="_blank" rel="nofollow" title="youtube"><div 
class="bdrs-thumb"></div><div 
class="bdrs-title">YouTube</div></a></li></ul></div>

<!-- BDRS widget social slide code end -->
Simpan dan Lihat Hasilnya, Semoga berhasil
at 5:17 PM

1 comments:

wisata pisak delete 6/26/2014

Setiap artikel yang ditulis harus diuji dan dipraktekan untuk melihat keberhasilan yang diinginkan....

1. Berikan Komentar Anda Sesuai dengan Judul Artikel.
2. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
3. Untuk pertanyaan Out Of Topic ( OOT ) silahkan klik Forum

Konversi KodeEmotionForum

Back to Top