Saya ga bosen`terus ngasih postingan buat kalian untuk Widget Sosial..
+for+BLogger++Blogspot.png)
sekarang saya mau memberi satu widget yang sangat unik dan simple buat di simpan di template kalian, widget sosial ini berkedip saat kursor mengarah ke kotak share..!!
Lumayan lah buat mempercantik blog kalian dengan tampilan serba keren..
Contoh Social di bawah yang akan saya kasih tutorialnya.
Langsung aja liat cara pemasanganya :
1. Login / masuk blogger kalian
2. Rancangan pilih Edit HTML
3. Jangan lupa kasih centang ( Expand Widget Template )
4. Lalu cari code </head> dan simpan code di bawah ini di atas code </head>
<style type="text/css">
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; }
ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.way2blogging-social li a strong { font-weight:normal; 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);}
ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtha-CtajkHJHMNsT7raav2wmtVf0-8eWDwM3CA7zrbCAbd9zdkH8O4yXq3LFUtDgRZEbt1E5Q5AjenaWaUNYOTnhyMSKnizAXUTC7AGMfOKCFtlNs0nX5HMsYQ7BbCW23zix6bIIicedq/s1600/way2blogging-facebook.png"); }
ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUMroC6DC9GYq4eL3iVJJxsL3ct4PZIgElbj7EAms0tIZHfsciBlOdbmrpnaPAR0dcQ1aCi_SjuJGCEnxqDj4RiVmFnBe0g8N4443MAvScUJuxGnC6cZUq91_gJTCXKi_hoAMwUg-u_jP8/s1600/way2blogging-twitter.png"); }
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyovmsRYJBphFcASp6IJRLHTndH_5UySGfTZ_EjPDXbpX1E3f0K-ep7Xldep6Gda-51AEy3izvdrm6XvWyaihtuAneSCKjYrplE6pgrBYLb8Bs6Erc5MJwdXBrsQVfWEUKqpOPHX038sfK/s1600/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRLgovCkIYJeOu-J6sgZk3dM22qRvz_rfFiJGH5rRCW1cs-7dPNFWHdZPPK3hBYY_rj27T-P-UduloGe6RfKYEdFC4H11wR5MzRYDDbDmtQii1usLsBFtE_z-xuCfh5vHykYqK-F7B8Qo/s1600/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic4Z_22tniyvaTcvI2hBjQSsDvuNEGn1MxftXdcj9oK3s5jsMzDxHMYClHYrfmFlbvDzV9JVVp_YqIVWJmz9jy3KSyQ_NyyPRz5toOFj-06vGXRVY4H2tR23Rt3c7fBfqtAZiQIF2mt4jo/s1600/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCzapw3vt2L63lj4JyuTgXgYWkWHI9JRPiUH7E081iAwxooTRBZODOY2fmR8ZHQfYpR2yZKn6kRggkW0XBjip_7Vlf6AIaaf0r10XQAckc13iuRjJ2N_PP1tkgh1tqv8if0buRJC4Sm8kp/s1600/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoEVk1F8JfbiY8kPJ6aHPnspZ4Yn1Mknni5ln9Oddc6VS9GgOvMOG2vOxmoAEtUtivuwEbgjGlJdxVm7A3gNK_ku0ejFPK50rk2qjd1iygPXt_1iVZNI0iOkxzwZxgeia3WPMtTEhMNqE/s1600/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaQ-sNFIcwziXq8v5gmhOssEf6Qu_MNkqJRdvUvIkY81ZkpfeE9S8G_n68qsAdor4yHKZ5EZu7eHNspmzaaPi2iALIJ4eZCFNOerfzPjY9hf-uSVJiwIMqMYo8RrTf9_s_p72XgIkZNHsY/s1600/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYPg7kRfru_JRrwHgWBNyPGWz5KUrzm5N-dRGRc6jeUsRcMIqSryJ_taIK217al0AI5dHa9uY4yfM9dNRCZbJUdLDikeJ2TRYKcJTBzsQ3etlKLY3CWuppsFd2_fB_4pOQ8-GXdS3iIoz/s1600/way2blogging-technorati.png"); }
#way2blogging-cssanime:hover li { opacity:0.2; }
#way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#way2blogging-cssanime li:hover { opacity:1; }
#way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
</style>
5. kalau sudah beres tahan di atas lalu kita cari code yang seperti ini <data:post.body/>
6. Bila sudah ketemu simpan code di bawah ini di bawah code <data:post.body/>
7. Save template dan lihat hasilnya.
Sekian tutorial dari saya.
semoga bermanfaat buat kalian.
