Yucca666.blogspot.com
klik Arrow to pause
klik Arrow to pause
klik Arrow to pause

Cara membuat sosial list di footer

1.Login Ke Blogger.com
2.Buka template
3.Edit Html

Lalu Sobat Letakkan CSS dibawah tepat di atas
 ]]></b:skin> atau </style>

untuk mempermudah pencarian gunakan CTRL+F



/* CSS Social Bar */ #social-bar {width:100%;max-width:990px;margin:0 auto;padding:0;background:transparent;border-top:2px solid #222;} .social-facebook,.social-twitter,.social-googleplus,.social-blogger{float:left;margin:0;padding:8px 0;display:inline;width:10%;text-align:center;color:#eee!important;opacity:0.9;transition:all 0.3s ease-out;} .social-facebook{background-color:#151515;width:25%} .social-twitter{background-color:#151515;width:25%} .social-blogger{background-color:#151515;width:25%} .social-googleplus{background-color:#151515;width:25%} .social-facebook:hover{background-color:#015f8f;opacity:1;} .social-twitter:hover{background-color:#1a87ba;opacity:1;} .social-googleplus:hover{background-color:#9f433a;opacity:1;} .social-blogger:hover{background-color:#b77410;opacity:1;} .blogger-24,.facebook-24,.twitter-24,.googleplus-24{background:url(http://1.bp.blogspot.com/-wNUSXsRj4d4/U0ljiOOrQdI/AAAAAAAACX0/R73l-2i2vsA/s1600/csstuts.png) no-repeat;width:20px;height:20px;display:inline-block;vertical-align:text-top;margin-top:-3px;text-align:center} .blogger-24{background-position:0 0} .facebook-24{background-position:0 -100px} .twitter-24{background-position:0 -150px} .googleplus-24{background-position:0 -200px}

Lalu Dilanjutkan Memasukkan Kode Pemanggil , Letakkan Kode Dibawah tepat di atas <footer> Atau yang mendekati dengan <footer> , Karena Setiap Template Mempunyai Struktur Kode yang Berbeda.

<div id='social-bar'> <a class='social-blogger mar10t' href='Your Social Link' target='_blank' title='Follow on Blogger'><i class='blogger-24'/><span class='phapus'><br/>Blogger</span></a> <a class='social-googleplus mar10t' href='Your Social Link' target='_blank' title='Follow on G+'><i class='googleplus-24'/><span class='phapus'><br/>Google+</span></a> <a class='social-facebook mar10t' href='Your Social Link' target='_blank' title='Follow on Facebook'><i class='facebook-24'/><span class='phapus'><br/>Facebook</span></a> <a class='social-twitter mar10t' href='Your Social Link' target='_blank' title='Follow on Twitter'><i class='twitter-24'/><span class='phapus'><br/>Twitter</span></a> <div style='clear: both;'/> </div>

Lalu Ganti Tulisan Your Social Link Dengan link kalian masing-masing.

Lihat contoh disini  :<<< DEMO >>>

Tidak ada komentar:

Posting Komentar