Widget Sosial Icons Metro Style Kotak Di Blog ~ Ron1st Blog

Pada artikel yang akan saya bagikan ini, Akan saya share sebuah Widget sosial icons, widget ini memiliki bentuk unik, Tidak seperti Sosial Media lainnya memeliki bentuk mendatar, widget ini memiliki bentuk Kotak.

Widget ini sangat cocok sama Template yang memiliki Warna cerah, dan warna yang Cerah sangat cocok, Widget ini sangat Elegan dan Mudah untuk dipratekkan, Kalau sobat tertarik dengan widget ini dan ingin mengunakannya Tutorilanya seperti ini :

Widget Sosial Icons Metro Style Kotak Di Blog

Pertama, Sobat harus masuk ke Blogger
Setelah Berada disana, Klik menu ''Tata Letak''
Klik ''Tambah Gadget''
Pilih Gadget ''HTML/JavaScript''
Mauskan kode dibawah ini, didalamnya

<center> <ul id="abt-social-icons"> <li class="rss-icon"><a href="http://feeds.feedburner.com/FEED ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQH3xQRGslDojl59040ULUULNZBnPVQ9dPdTaNStwaH-lqkcjwIp5hPJHkG0W_s14sPtQBEUwXHsqn7CoQHydCChG21rTYz1BL7G39kEs5zex6pCHyjVP68t9-Sh1OFsfL03r5Bap33UI/s1600/rss.png" width="147" /></a></li> <li class="twitter-icon"><a href="http://www.twitter.com/TWITTER ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ylErBv8sLdD7q0h6O7zfhklEH5aEFh2m9SH8m3fJulUlz3r447L3-Ib4XwKwQ-VNRJCpHgvF4xozeGc8I89raUjaRbnmqDHqgs7vBOa7kuxWE5F9SJI43jEbigI9trIeZTdoDjLOQUQ/s1600/twitter.png" width="147" /></a></li> <li class="facebook-icon"><a href="http://www.facebook.com/PAGE ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9jX3xLplzNsxyH_m4ImWnU1d2vzJ82sUISj0Kh0n_-xDMTjfkRlRFIlGAX3pwxFxIFUmnxtXj_Fo05WkNIguMph_sABlwCVU42LoIAT0ojqEQNRkIL5UR9cFnJeFw41Ei6KJgM000q54/s1600/facebook.png" width="147" /></a></li> <li class="google-icon"><a href="https://plus.google.com/YOUR ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKs_r157Rz4Lq_BqrnzoMisT3dWk01DooGwzTIgITbpFWB3eMkq9GNdkhlaGoiv4Sv8U6_HYIvph4JJDpN2lnaWGxyDyWjRRVIpiQ5g9T1QY3Kx_N6kbP_7Zd5anmAdGvdDL0b6I6K8M/s1600/google.png" width="147" /></a></li> </ul> </center> <style> #abt-social-icons li { float: left; width: 147px; height: 147px; margin: 0 6px 6px 0; padding: 0 0 0 0; border-bottom: none;
list-style: none; } #abt-social-icons li a { line-height: 1px; display: block; }
#abt-social-icons li a:hover img { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; }
#abt-social-icons li a span { display: none !important; } </style>