February 14, 2012

Tutorial : Blogger Follow Us Widget

Hai dan selamat tengah hari panas-panas-panas semua. Selamat musim bunga! -.- Tak payah jadi bengap lah sangat azizi kan ? 

Dah lama aku tak buat tuto. Hehe. Arini rasa rajin sangat nak post-post ni. Korang tak kesah? Aku cakap aku kesah ke ? 



Ni la yang kita nak buat hari ni. Selalunya widget ni sesuai untuk korang yang bukak bizznezz. Korang yang tak berbisnes pun tak salah kalau nak buat benda alah ni. Hee. 

1.  Backup template dulu untuk elakkan scene Ombak Rindu ulang kembali. 

2.  Pergi ke Dashboard > Design > Edit HTML 

3.  Tekan CTRL + F dan cari code ni:
]]></b:skin>
     Paste code di bawah ni SEBELUM  ]]></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(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.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(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);
}


#social #facebook {
background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(http://1.bp.blogspot.com/--tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/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;
}


Merah : URL background untuk widget
Biru : icon untuk social site

4.  Then cari code:
</body>
     paste code ni SEBELUM code  </body>





<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> <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></div>


5.  Then korang boleh PREVIEW. SAVE kalau dah ok. 

6.  Pergi ke Dashboard > Design > Add Gadget > HTML/JAVASCRIPT. 

7.  Paste code ni dalam ruangan HTML tadi. 



<ul id="social">
  <p>Follow Us </p>
  <li><a href="URL BLOG/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>


URL BLOG : ganti dengan URL blog korang. 
MailLink# : ganti dengan link mail korang. 
TwitterLink# : ganti dengan link Twitter korang. 
Oren : Sweet tiles tooltips korang bila dihover. 

8.  SAVE. Then klik SINI. 

1 comments: