29 February 2016

Membuat Widget Social Media dengan Efek Berputar di Blog

Pada postingan kali ini, saya share artikel dari hasil BlogWalking ke Blog milik Mas farihihsan.blogspot.co.id. Yakni cara Memasang Widget Social Media dengan Efek Berputar di Blog.

Untuk anda yang template Blog-nya belum ada Tombol social Media, bisa menggunakan alternatif ini. Selain bisa mempercantik tampilan Blog, juga berfungsi untuk mempromosikan artikel Anda ke Social Media.

Membuat Widget Social Media dengan Efek Berputar di Blog


Mari kita mulai Memasang Widget Social Media dengan Efek Berputar di Blog :

1). Login ke Blogger >> Tata Letak >> Pilih HTML/Java Script >> Lalu masukkan kode HTML 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"><a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCntbbFC16tj-Y_1ICvN03G2nofMF7Drx-JJdumXIvu4w-PJ4v_zwSEgs_yl_5WweSFZVWRl1JDZRhQMBBJJtk56OsV-YfgEIMNwrAuy3j4w-Lu9RXz7DND2t3XbCz6aFJJfpt8k_uwu8o/s1600/RSS-48x48.png" width="40" height="40" style="margin-right:1px;" alt="Icon"/></a><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/AVvXsEhBmQKBVuPVgExAS47Ybb7ivpPlLyujA1m7tBpOF7dcqESiIFqTL9J0GTfPvTwoiN4-W19aKa7EifjqR-zbDmPRe3218i4fbOt8s3og1NyRv9JDiaPAHhwt3mMZeIEEJi1wcAC49VoBVM6Q/s1600/RSS-EMAIL-48x48.png" width="40" height="40" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkLWWU1uxUs6frXWActLtGXQL9cXqMwNx23GdHnGjJfk0EJLtojZNjwzxzgJ35oym7-2Vjl1Rppdg1ruieuT_Icqc2-QA4Um7UaDBAVz3pxwVWK8wJOTdH4pJeRsMz6kmbj3ppr2zxSFGa/s1600/FACEBOOK-48x48.png" width="40" height="40" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpdLYsQwIZ4cbiofLoJj2Z_vpcHHhYHskZNWaoBHvrmVJSQHOmUXdm8RkurH6gDk_EasTD6bNgJjskdkUC77Ods25W351IltP9DUD6jlFDa6mh9fVy2BgmxQ-w9EAEQ7mmUP2h7egdnt17/s1600/TWITTER-48x48.png" width="40" height="40" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMVhCXUSdzReFfZfA82mRMlN26nzEEB5gjsj7sR3UOzfDnMZMjebu6Paz8jSAI46dLOaVguN5VbenjLlfNsU3oRhnctCRZoEC0iFqah5za5MuyN8mno4_RP_fpN4FSUb0y3BPXlTB71WhJ/s1600/GOOGLE-PLUS-48x48.png" width="40" height="40"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qBNF-ZjjQXthx_2P_2FrgTazGVrTU0NZ47bst-Um_kVYIs_D_wbzNpSc-JOBcBW5jIWmzVyZ9oGgjVbCmxQvmtlSpc3ok7-caByjuy95-e9lwvUF1OUgu8m3c4CMS65pAion3xIfGC_m/s1600/PINTEREST-48x48.png" width="40" height="40" alt="follow me on pinterest" /></a></div></center>


Note:
Ganti kode berwarna biru dengan ID milik Anda

5). Stelah yang di atas selesai, silakan klik Simpan,  sekarang Widget Social Media dengan Efek Berputar sudah ada di Blog Anda. Untuk Contohnya bisa Anda lihat di SideBar Blog Ini.
5 Berbagi Tips Blogger: Membuat Widget Social Media dengan Efek Berputar di Blog Pada postingan kali ini, saya share artikel dari hasil BlogWalking ke Blog milik Mas farihihsan.blogspot.co.id. Yakni cara Memasang Widget S...

No comments:

Post a Comment

< >