TeDuWeb Social Share

Habis Jalan Jalan Di Group Facebook!
Malah Widget Yang Unik!
Penasaran?

blogger logo
Klik Donk!!

Di Bawah Ini Contohnya





Mau Kan?

Langsung Praktek Yuk!

Langkah 1

Copy CSS Di Bawah

.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:bold; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.facebook { background-image:url(http://2.bp.blogspot.com/-uEHigx-ZdBk/Tu7CghQbd7I/AAAAAAAAASg/xukVyRfqk94/s1600/social_facebook.png); }
li.flickr { background-image:url(http://4.bp.blogspot.com/-KnealmRrmFY/Tu7CgkKZX7I/AAAAAAAAASs/RA9aeMOWaLY/s1600/social_flickr.png); }
li.linkedin { background-image:url(
http://3.bp.blogspot.com/-hBPOdeYwJWE/Tu7Cg9xbBbI/AAAAAAAAAS4/ayfxXLJw1_s/s1600/social_linkedin.png); }
li.rss { background-image:url(http://4.bp.blogspot.com/-ABr3akhDst8/Tu7ChCTfU6I/AAAAAAAAATA/IwuF2fLvw9g/s1600/social_rss.png); }
li.twitter { background-image:url(http://2.bp.blogspot.com/-Sx05izey6SU/Tu7ChGyV5FI/AAAAAAAAATQ/UwcI3h-lAik/s1600/social_twitter.png); }

/* SOCIAL ICONS - CSS3 */
#css3:hover li { opacity:0.2; }

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-25px; }

Paste Di Atas Kode ]]></b:skin>

Langkah 2

Copy HTMLnya Di Bawah Ini

<ul class="social" id="css3">
            <li class="twitter">
                <a href="http://twitter.com/"><strong>Twitter</strong></a>
            </li>
            <li class="facebook">
                <a href="http://www.facebook.com/"><strong>Facebook</strong></a>
            </li>
            <li class="flickr">
                <a href="http://www.flickr.com/photos/"><strong>Flickr</strong></a>
            </li>
            <li class="linkedin">
                <a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a>
            </li>
            <li class="rss">
                <a href="http://feeds.feedburner.com/teduweb"><strong>RSS</strong></a>
            </li>
</ul>

Paste Di HTML/Javascript

Selesai
Kode Tersebut Harus Anda Improvisasi

19 Orang Yang Cerewet:

Share Our Knowledge mengatakan...

pertamaX. :D
memperberat gk ya?

DODE-XP.COM mengatakan...

izin utak-atik dan pasang link sahabat bloggers :)

Uda Cucanto mengatakan...

@Rama : Enggak
@DODe : iya! OK"

Harrys76 | Share Everything mengatakan...

bagus widget nya! thx :D

Widodo mengatakan...

makasih tipsnya sob

yeppy mengatakan...

wah nice info bang.
ijin make yah gan :)

Uda Cucanto mengatakan...

@harry : iya!
@widodo : iya!
@yeppy : Iya!

health and Beauty Tips mengatakan...

kayaknya kurang pas kalo ditaruh di blog saya

randy oktaran mengatakan...

pertamax disini :D

randy oktaran mengatakan...

weh gak pertamax nih btw dulu sering
make ginian hehe

Anonim mengatakan...

http://cucantooo.blogspot.com/

manfaat Buah Apel mengatakan...

klo saya pakai jasa addthis.com

Cucantooo mengatakan...

http://cucantooo.blogspot.com/

Cucantooo mengatakan...

http://cucantooo.blogspot.com/

Cucantooo mengatakan...

http://cucantooo.blogspot.com/

Cucantooo mengatakan...

http://cucantooo.blogspot.com/

Agung Car mengatakan...

Yang mahal idenya sobat, improvisasi memang spesialis bangsa kita ... hehehe

Baju Kartun mengatakan...

Mantab boz ... Boleh dicoba nich di Putri Busana. Thks ya

Yuda Susanto mengatakan...

Good for your resource <a href="http://fudoteka.blogspot.com> http://www.Fudoteka.blogspot.com <a> !

Posting Komentar