jQuery Follow Us Dengan Social Icons Untuk Blogger

Hari ini Oto Website akan berbagi tutorial dan untuk tutorial kali ini temanya adalah jQuery Follow Us Dengan Social Icons Untuk Blogger.
Ini adalah widget Follow Us yang memiliki beberapa icon di antaranya icon rss, berlangganan, facebook dan twitter. Widget ini sangat indah dan para blogger harus mencobanya karna blog Anda layak menjadi lebih Indah.

Untuk cara mengistal jQuery Follow Us Dengan Social Icons Untuk Blogger ini juga sangat mudah,. Sebelum kita membahas cara menginstalnya pada blog Anda lebih baik Anda lihat dulu demonya dengan menekan tombol di bawah ini!

Lihat Demo

---

Cara Menginstal jQuery Follow Us Dengan Social Icons Untuk Blogger

---

Seperti yang saya bilang di atas untuk menginstal jQuery Follow Us Dengan Social Icons Untuk Blogger sangatlah mudah, silahkan ikuti petunjuk berikut untuk mulai menginstalnya pada blogger Anda.

1. Pergi ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup template Anda.

4. Selanjutnya dalam Edit HTML temukan kode ]]></b:skin> (Bila kesulitan mencari kode HTML klick DISINI)

5. Lalu letakkan kode css berikut tepat di atas kode tadi

#social {
width: 98%;
height: 45px;
margin: 0;
padding: 10px 5px 5px 30px;
list-style: none;
border-right:solid 1px #853529;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Nmx3WtWZRy4p_U-yGg8Bdrl_HvqwQ1EHlw-dKG-LHhcrIeMrGdvo_qxrb_U8tXwBX9PexRGZLaA0osYTSswG8j9SuKhYzlhRH7YuJTMhPBDMO1qpBb7uUKrOy64wR4WEYV3hFiIX7w/s1600/otowebsite_background.png) no-repeat left top;
}
#social p{
font-size:1.5em;
color:#FFFB98;
font-weight:bold;
float:left;
margin: 10px 10px 0 0;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
.abt{
font-size:0.8em;
color:#787878;
float:right;
margin: 0 -30px 0 0;
text-shadow: 1px 1px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=1, offy=1);
}
#social li {
width: 32px;
height: 32px;
float: left;
margin-right: 3px;
}
#social li a {
float: left;
display: block;
width: 100%;
height: 100%;
text-indent: -1000em;
background-repeat: no-repeat;
text-decoration: none;
}
#social #rss {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEnaT39EBd0FlHDT2aenDn7Nfm46klLq6CLKRUZSm3_moF_0yThu0MieY7BAveuHANqlubvUOBS8lROXAhget6kz1obfEjq0XhoTlqAZZbYjgmInHd161KtiTnnTAi_lkFDqPs9xAtw/s1600/otowebsite_rss.png);
}
#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Pv97sW6T3S5PoxurT_LCFvMVlBK28bZPlI63CjHF8vaboyDZKL1V2h3pUXfKYVahOESTXPyMiJbaOqmuPYDs0eSmaqnfpLynmAtsWZJvKV9w6O-_Z82-c4jClzGQ4IuzWNrQWOs3AQ/s1600/otowebsite_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2jgK3_9iD56tmauQvCwd_ZJ427_yQN7bycXSD-oPrvoYMNRTURuj1y1Jg96iUe54YknHsBiluEaETRLP795LFoqSdsENlF6vWH8WssjqIkATfqmhcYsb34S-6AssuTze6Mgjl4CSx3g/s1600/otowebsite_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4-GWVBYkdkWLQzBsBM30c1ZJC-p4i8LoU5pgn6UFssn4wB0elbh9PpkK5dBkoImULFLJcNRO2cdDXX1cq5_sZAEDeb0Z7Df8leYvufNiSp-n_lD1IaxoNAIxWzf0U0WY-sWCZxlf99w/s1600/otowebsite_email.png);
}
span.tooltip {
background: #575757;
padding: 3px;
display: block;
width: 140px;
border: 1px solid #000000;
position: absolute;
margin-top:-40px;
color: #F0F0F0;
font-size:10px;
text-indent: 0;
font: Arial, sans-serif;
text-align: center;
-webkit-box-shadow: inset 2px 2px 2px #616161;
-moz-box-shadow: inset 2px 2px 2px #616161;
box-shadow: inset 2px 2px 2px #616161;
-moz-border-radius: 5px;
border-radius: 5px;
}

6. Langkah selanjutnya temukan kode </body> dan letakkan kode berikut tepat di atasnya.

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#social li').each(function() {
var $li = $(this);
var title = $li.find('a').attr('title');
$li.find('a').removeAttr('title');
$('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();

$li.find('a').mouseover(function() {

var top = $(this).position().top;
var left = $(this).position().left;
$(this).find('span').fadeIn()({
top: top,
left: left
}, 'slow');
});
$li.find('a').mouseout(function() {

$(this).find('span').fadeOut('slow');

});
});

});
//]]>
</script>

6. Simpan Template.

7. Sekarang Pergi ke Dasbor ➨ Tata Letak.

8. Tambah gadget ➨ Pilih elemen HTML/Java Script.

9. Lalu letakkan script berikut ke dalamnya.

<ul id="social">
<p>Follow Us </p>
<li><a href="http://Nama Blog.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=otowebsite" id="mail" title="Subscribe To Our News Letter">Mail</a></li>
<li><a href="https://www.facebook.com/pages/dekrif" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>
<li><a href="http://twitter.com/otowebsite" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
</ul>
<b class="abt"><a href="http://otowebsite.blogspot.com/2012/08/jquery-follow-us-dengan-social-icons.html">Get This Widget</a> | By <a href="http://www.latesthack.com">Oto Website</a></b>

• Keterangan: Ganti semua teks yang di block merah dengan id Anda sendiri.

10. Simpan.

Sekarang Anda bisa lihat hasilnya pada blog Anda.

---

Cara Menginstal jQuery Follow Us Dengan Social Icons Untuk Blogger

---

Jika Anda mengalami kesulitan atau masalah dalam penginstalan jQuery Follow Us Dengan Social Icons Untuk Blogger jangan sungkan untuk bertanya melalui komentar, Saya akan berusaha dengan cepat membalas komentar Anda!