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!



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!

Posting Komentar Blogger Disqus

  1. PERTAMAX Gan... Terima kasih infonya izin di coba semoga berhasil

    Salam Blogger

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top