Social widget
meupakan widget
yang sering diminati oleh kebanyakan blogger termasuk saya. Oleh karena itu social widget yang ditempatkan pada blog haruslah yang sesuai dengan blog dan tidak memberatkan blog itu sendiri. Disini Hack4rt akan
memberikan social widget yang didapatkan dari template Simple Faster yang sudah responsive.
Social widget
ini termasuk elegan dan tidak memakan banyak loading pada blog. Berikut tutorialnya.
EDIT HTML dan CSS
Pada EDIT HTML Template carilah kode ]]></b:skin> dan letakkan kode berikut tepat di atas ]]></b:skin>
#socialbox {
max-width:100%;
padding:10px;
background:#fff;
margin:0;
box-shadow:inset 0px 0px 6px #ddd;
-mox-box-shadow:inset 0px 0px 6px #ddd;
-webkit-box-shadow:inset 0px 0px 6px #ddd;
border:1px solid #ccc;
border-radius:5px;
overflow:hidden;
}
.social {
background:#fff url(http://1.bp.blogspot.com/--4CvEviaskw/UUsmFnxffgI/AAAAAAAAAD0/-yTMUjlcXPo/s1600/csg-514b240d34eeb.png) no-repeat top left;
}
.facebook,.googleplus,.twitter,.rss {
-moz-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
.text { height:24px;line-height:24px !important;float:left;margin:6px;font-size:17px;font-style:italic;color:#555;font-weight:bold;}
.facebook:hover{cursor:pointer; background-position: 0 0; width: 24px; height: 24px; }
.facebook{float:right;margin:6px 10px; background-position: 0 -44px; width: 24px; height: 24px; }
.googleplus:hover{ cursor:pointer; background-position: 0 -88px; width: 24px; height: 24px; }
.googleplus{float:right;margin:6px 10px; background-position: 0 -132px; width: 24px; height: 24px; }
.rss:hover{ cursor:pointer; background-position: 0 -176px; width: 24px; height: 24px; }
.rss{ float:right;margin:6px 10px;background-position: 0 -220px; width: 24px; height: 24px; }
.twitter:hover{ cursor:pointer; background-position: 0 -264px; width: 24px; height: 24px; }
.twitter{float:right;margin:6px 10px; background-position: 0 -308px; width: 24px; height: 24px; }
TATA LETAK (WIDGET)
Buatlah sebuah gadget dengan pilihan HTML/Javascript dan isi dengan kode HTML berikut
<div id='socialbox'>
<div class='text'>Find Us :</div>
<a href='/feeds/posts/default'>
<div class='social rss'/>
</div></a>
<a href='https://plus.google.com/105442910391457381115'>
<div class='social googleplus'/>
</div></a>
<a href='http://twitter.com/Novalbintangs'>
<div class='social twitter'/>
</div></a>
<a href='http://www.facebook.com/novalbs'>
<div class='social facebook'/>
</div></a>
</div>
Silahkan huruf yang berwarna
Hijau disesuaikan dengan selera :)
Copas? Jangan lupa Sumber linknya!
Terimakasih telah membaca artikel Cara Membuat Social Widget di Blogger. Anda bisa bookmark halaman ini dengan URL http://hack4rt-blog.blogspot.com/2013/03/cara-membuat-social-widget-di-blogger.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.
