Pasang Widget J-Query pada Blog
Widget J-Query ini merupakan widget Social Bookmark, tetapi widget ini simple, menarik dengan background berbentuk pita, widget social bookmark yang satu ini sangat berguna untuk mempromosikan blog atau artikel kalian ke situs sosial seperti Twitter, Facebook, Email, Rss dan lain-lain.
Bagaimana memasang widget J-Query ke blog kalian.
Ikuti beberapa tutorial di bawah ini.
- Login dahulu ke blogger dasbor kalian di BloGGeR,
- Selanjutnya pilih Rancangan -- Edit HTML -- Expand Preview Template,
- Download dahulu template anda (Terserah)
- Silahkan cari kode ]]></b:skin> "Untuk mempermudah pencarian tekan CTRL-F"
- Letakan kode di bawah ini sebelum kode ]]></b:skin>
#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/AVvXsEghsoHkVLTWjnDF660HPqk3OHruQwPy4RHUYfHmMW1cXMc86qPG6inYcMOBmxuxlkkEyewEAYIH4xvEpmTJ2vPnW9RFtn_Twp_N4drE9qgPBgFsNByWfsGIq6xiUNKxIfM6gW3G6RKNXQ0/) 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/AVvXsEiJX_L18jfDoA1NZmDnkhueMXOaV5XMEYEF9w6Ms3q0qmKaURWzKviBTSFu8aKfhJsB2lbxa741gmS_80UvxcNPR6c9L5Kh2j5poa6_ZHlCTJ9hVoybnxObKdnfKOqx6C9ZqqC7179j3Oo/s400/allblogtools_rss.png);
}
#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhud_EuWPY65AD5wMDnYjsRjsCOZMTmSpjMTwZ6g-1LbvCXAM_SXiDFO7878UyPNZgFQkk21AVi47egeX0PxVWVVMe-xnVH5IpyY3gNOYpP6sjfwzE4OXCpqGl132NB0rR5Tre6Abw19ak/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKyRnOXBJFfH7bWKJoVLDLI05_wH3vTqyIjg8qePhT9eBsk9uLTDRvWkZ7JSDao0Cn5EaI5THeyyvEavSGBhUwH2Qum8FHOcNjtxJyjF_Nzeg9RxbuUeiD-zJs32FfprJbb8Aj_vcIgy4/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgvBaZyyHwuqho-FqPfgjN3GxnZHQN4nWanLWZBBIuGUfqqZKGaoNq6rSWKv7FDoA5fq_hz4rE6BpEnmHTiIPWdHuxFx84MOpTvo_GinlfjL4Tm90p-177RlVZStkozakKTjj6LX1rzdI/s400/allblogtools_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;
}
- Selanjutnya, silahkan cari kode </body>
- Letakan kode di bawah ini sebelum kode </body>
<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>
- Simpan Template
- Selanjutnya pilih Rancangan -- Pilih Elemen Edit -- Tambah Gadget -- Pilih Javascript/HTML
- Copas script di bawah ini.
<ul id="social">
<p>Follow Us </p>
<li><a href="http://namablogmu.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>
<li><a href="feedburnermu#" id="mail" title="Subscribe To Our News Letter">Mail</a></li>
<li><a href="facebookmu#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>
<li><a href="twittermu#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
</ul>
- Silahkan kalian edit sesuai dengan Nama Blog Kamu, Feedburner Kamu, Twitter Kamu, Facebook Kamu.
- Simpan
Sekian tutorial blogger dari saya, semoga tutorial ini bisa bermanfaat dan kalian senang dengan tutorial ini.
Terima Kasih.
Categories:
jQuery,
panduan blogger,
social bookmark
0 komentar:
Posting Komentar