Membuat Widget Social Bookmark 3D yang Bisa Berputar

Setelah sempat vakum bebeapa hari di karenakan akses internet yang di blokir sepihak oleh provider, akhirnya saya bisa meng-update rumah saya yang sederhana ini. Di tutorial kali ini, saya akan membagikan widget sosial bookmark. Yup, memang di beberapa postingan sebelumnya saya memang pernaha membagikan tentang widget sosial bookamrk. Ada yang berbentuk segitiga, hati dan lain sebagainya yang bisa kamu cari di daftar menu.

Kalau widget yang saya bagikan ini, terlihat sangat cantik dan menarik. Bagaimana tidak, selain bentuknya yang imut dan 3D, widget ini apabila kamu letakkan kursor kamu ke icon-nya, maka iconnya akan berputar 360 derajat secara otomatis ! Wow sangat keren bukan ? naha kalau kamu tertarik dengan widget ini, bisa kamu coba triknya dengan mengikuti langkah-langkah di bawah ini.

1. Masuk ke Blogger.com dengan akun kamu.

2. Klik Tata letak --> Tambah Gadget --> Pilih HTML/Javascript dan kamu masukkan kode-nya di bawah ini.

    <style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> 

<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="MASUKKAN URL FEED KAMU DISINI" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRzbliNX9GZt2y2QfBaS7m4EsgUsH2n9BmBvXjpFCT5pyL3NQhCnCr77wty5fyk8_sBHM6Cl_7zwzLJmURuTtOhDmO_ip47mtz9WiIvR_CUNdaM8d2Ksiy1BnE-4KdUrucH1ELwwcWVvmf/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJsqkc6-ejrASJO1Hb1winInDlLG1GbV2gXVMLEaWH4QA0wpdkrKC7ONjEz2yC8T-0FDo3yERxhCEunu_0qbO4GXTZwiVfGBQv2AJf7IxpN3TCy33GXOJRn_MlgxnhD-Q6U9e5SgK0wgv/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> 

<!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="MASUKKAN URL FACEBOOK KAMU DISINI" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PWCP6EaejBnLr_SXVuq2McfZhO-Uh5OxFkCYzN0wJjgxpoRgeBUtjxAtahq7wI5Xo7NbcTsQUHHu587oS6Tsn4innvtXPpakCazkJhMrPSfGgo_foePqdV9OEyldQnoHRZJKEe8Jrktt/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> 

<!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="MASUKKAN URL TWIITER KAMU DISINI" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrob3UOhyphenhyphennGuEnDgNg-_hiX48fkIyp9cIwbRSMPB6OM0LZwLwTsSYxJ_MPXDmxKIuVzHiQQ-U6fw8VlCe8iM7SwVFfq3ASMCgoHIAZRWtIH3hsLrvBvoKd7w299Le4bQ_kChVi4ywDO1E/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> 

<!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="MASUKKAN URL GOOGLE PLUS KAMU DISINI" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEico2qdSIN3H1Hl-J4jGxKzD1_UfAYtIrUxRpgVjf9yxLQp_TS_K6ZSGUS3QjMUxDNjec18dhEcbuZmvN4LpgtjDVNsxJNoEJ2_d_9GUthfqqhP_zn1SeUbnLl9-f3BTFKrFSj4LGv6NF0k/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> 

<!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="MASUKKAN URL PINTEREST KAMU DISINI" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yqZgkpwt9XTMkkdGxLDJe81VRGVwZeZTy9ExFUkBMHERRyksGVa4Rqjh_GX5o4xBOPLevglLRO3kr1SbkoaTP8CSWhhesh_vvIBv2FvEMKU9v0dqi5Z71scyoPr6EVrgMucrAR5rLTab/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

 <!--Start Feed Count Button--> <a href="MASUKKAN URL FEEDBURNER KAMU DISINI" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/MASUKKAN-USERNAME-FEEDBURNER-KAMU DISINI?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

3. Tinggal kamu ganti saja kode yang berwarna biru, masukkan kedalam kotak HTML/Javascript tadi, setelah itu kamu simpan deh, mudah bukan ? untuk demo langsung widgetnya, bisa kamu lihat di bawah ini.

Postingan Terkait:

Posted in: Blogger,Social Bookmarking