Widget ikon sosial media keren - Jika anda sedang Modifikasi blog anda supaya tampil keren dan enak dilihat,tepat sekali anda berada di artikel ini. Kali ini saya akan share cara memodifikasi blog anda dengan widget icon sosial media hanya dengan menyimpan kode Java Script di tata letak/html java script. Widget ikon sosial media ini akan memberikan efek spinner atau berputar pada saat di sorot cursor mouse.
Icons social media dengan efek spin
DEMO
Tutorial membuat Widget icons social media :
- Pertama anda buka dasbord blog anda
- Kemudian klik Tata Letak
- HTML/JavaScript
Kemudian anda Copy kode dibawah ini dan masukan ke HTML/Javascript :
Copy kodenya DISINI
<style>Keterangan : URL yang warna merah silakan ganti dengan Url sosial media anda
#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);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}
</style>
<br />
<center>
<div id="social">
<a href="http://feeds.feedburner.com" target="_blank" title="Grab Our Rss Feed">
<img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwLh9_N2pvlIhik42HcJWEA9diW5EVLD6Lav7ziiWs7Fhd-QTpGSMMIvqq2W8yTher9MOdGTcZvrQa9zvMbr5RWHP6DyjYeeaDKQg7ELrDcrwu3Ab70txDBUKEan_cAiUQj0pISOtAVKDq/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburnerurl&loc=en_US" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHCsIM6J6AWlQOXtsu8jGb7_K4y9Js5vgOdUIWgsNTdHxH1RYVwbIdqxtGFEjYW8dk1OVUt5qNlUVy05FdByHxD8VV1NrUI99C3H1qyN3QVhTqa58430eFVS5nuFox49dQxe_dU5fZJqJe/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a>
<a href="http://facebook.com" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-vY6UPI9Sflxzfzgx8q9-IY5EcC5cnDvIWKl_xa92aYE9CqfDkCEFo6nQyoNgRkuQS4nRdTIHAT4HUpK6bJxprsw-u3KlKBbKCSiGDqh5dWZG_XmJhBG4WkWopHUTseBvIEnjGguza_2J/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a>
<a href="http://twitter.com" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCgIOGMurA5FNmU5dfhVENG5vmrfbx-63MSwt2JNMTofX2n0XUkwVgZys047TpkCeG20iDhhvztFxZENzkeyvipBt-JiaK3yXhuYzqKk1yMwYDU93MvrKCKg84Vw8TcR93bqiSqeVX0wL/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a>
<a href="https://plus.google.com" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMSWMTACMeMZf7nHJt-C0jddL0oI_hQnloXwc6sitz2YPFX7pWxs_w9HY2hxQOHhfeXmDlhk3xAs2F1qaYm7aZlb19Q6cQ-Ai89AK-K1kfsl0FeheOi6iBzqN4XAVedx-32uYH41LZiwok/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a>
<a href="http://pinterest.com" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOCAJ-4Al-dD4Zcl0FO9GAXsrUjXOWc7QuZ9-eaNx28yUCh5AYANUlJsxFLYZHTXHdg5z8i-ACnnr0wLnmLykQLUJ7pGUFvJNnsgfhaZ902GKaSW2VtJbDrhGyibfHTbnQ66KuJh57vlE/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>
Itulah cara Modifikasi blog dan memasang widget icon social media di blog.
Semoga bermanfaat.
No comments:
Post a Comment