Widget J-Query ( pasang Icon Social) pada blogger kamu terbaru

Widget J-Query ( pasang Icon Social) pada blogger kamu terbaru

http://www.jasa-pembuatan-blog.com/2011/05/widget-j-query-pasang-icon-social-pada.html 

Widget J-Query (Ikon Sosial) pada blogger kamu. bagaimana cara menambah social icon pada blogger, akhir-akhir ini kami akan terus update ilmu blog tentang dunia oprek-oprek. Jika kurang jelas anda bisa mengirim pertanyaan ke email kami. Mari berbagi dan berikut ini caranya :)



Langkah 1, Menambah kode css

Silakan pergi ke account blogger Anda, dan arahkan ke (Dashbaord>> Desain>> Edit Html)
Dan Pada halaman ini, Silakan menemukan kode berikut,

]]></b:skin>

Tambahkan tepat diatas kode berikut ini,

#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/AVvXsEhbXEMapdLpqNjOxswBKkvOszOfFWdofyaYY1pV3QQNKipMDAD1ioBV-jcmaMhAqoO-gUd1UOj_IltcU9ILEgIyPItThLKo3qUDAG3C79v0cJTs51Xf_gxM14sepC66Rp8SsPYmM3wMY-c/) 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/AVvXsEj_nmzUyj_A5MyrZm7Qxez9VUa-Hkizu_bAAdAAPaKQFmRXGXiBHbqY6TNn_zn8p1dp2KXdZyNcs-LsQlwULOoWLio8RKub1bF-85z-ePE-oi64eAcFJBqlgtt6EssuZs1q_u-Zg8B5y_c/s400/allblogtools_rss.png);
}

#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZWoGMflbZnUOKl5YhOBplRhZfxPAgSIsYT_KgLoamKPGnXyXEpmqSrIIfZ98P2AiUSpvlVPGvq_2YPbDTYyhQ0vywah8-XaU3v1R5bgOPqWb3OD0RLvag0QXvU85ZxQFKwNA6Yo24ypQ/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRxO0DEHLnA_6JCs0Xvi47PNSplaPFS7cZUv8qRq6I7slwd5kTHjW_Y-VxanwSZ9m3BMbRw59oyWqaI4TC1eSFsRH0VPa3gVTBh9PDRlQiMphveMFx4omIvZrQC_hTiO2JBtqWDf0BqB8/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfU7u108Bi9MVh2UWu8KAvjqJPdJoOJyYx5HzO6EHzYf2VXF8ng1qbtnrOEaTzoW4rfsIt_cstRCSJfCGcFgdxMQcvpxg7cShvsVQg4tj8xuxt2oOFut5QdccMvLxqelNQRIR9MC-ncZA/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 lakukan ini,
Langkah 2, Menambah kode J-query


Pada halaman yang sama pada langkah 1, cari kode berikut,

</body>

Tepat di atas kode tersebut tambahkan kode berikut ini

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 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>

Selanjutnya klik Save Template
Dan lakukan langkah ke 3


Sekarang, masuklah ke (Dashbaord>> Design), Anda sekarang di halaman elemen halaman,
Pada sidebar, klik Add A Gadget, Dan dari daftar, pilih HTML / JavaScript
Sekarang paste kode berikut,

<ul id="social">
<p>Follow Us </p>
<li><a href="http://BLOG-NAME.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>

<li><a href="MailLink#" id="mail" title="Subscribe To Our News Letter">Mail</a></li>

<li><a href="FaceBookLink#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>

<li><a href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
</ul>

Yang harus Anda lakukan adalah untuk mengubah kata-kata hijau untuk url sosial akun Anda.
Dan klik Simpan
Semoga bermanfaat………….