yeah , nge post lagi nih , lagi bosan ya ngepost aja .. dari pada bosan ya enakan nge blog.. nah gw kasih tau nih . cara membuat widget social media yang simple . nah ini nih DEMO nya...
nah gambar yang diatas , gw ambil dari Zynation . krna gw ga pake , males nge SS nya lagi , ya lansung aja ya..
- lo buka blog lo.
- trs bukak template
- dan Edit HTML.
- lu cari kode ]]></b:skin>
- trus lu masukin kode ini diatas kode b:skin tadi.
#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; }
- trus lu buka tata letak.
- dan add gadget atau widget
- pilih HTML/javascript.
- isi code dibawah ini di HTML java script nya..
<div id='socialbox'>
<div class='text'>Find Us :</div>
<a href='URL FEED LU'>
<div class='social rss'/>
</div></a>
<a href='URL GOOGLE+ LU'>
<div class='social googleplus'/>
</div></a>
<a href='URL TWITTER LU'>
<div class='social twitter'/>
</div></a>
<a href='URL FACEBOOK LU'>
<div class='social facebook'/>
</div></a>
</div>
Keterangan : Jika lu salah satu social media diatas ga ada , yang URL nya itu ditaruk tanda #(pagar) aja , biar gak nyasar kalo orang nekan button nya.
nah gmna ?? mudah kan ? ok selamat mencoba..
ssee youu
Source
Owner Rhizovuns , for more info update , Subscribe or follow me .