• Ingin cantikkan blog?? Design blog secara PERCUMA..Grab cepat sebelum terlambat
  • Ingin cantikkan blog?? Design blog secara PERCUMA..Grab cepat sebelum terlambat
  • Ingin cantikkan blog?? Design blog secara PERCUMA..Grab cepat sebelum terlambat
  • Ingin cantikkan blog?? Design blog secara PERCUMA..Grab cepat sebelum terlambat

Label Cloud

Search This Blog

03 March 2010

online counter 'Page Peel Social Bookmark'.

Assalamualaikum , di aktu tengahati yang panas ini MSue ingin berkongsi ngan korang sume bagamana hendak membuat atau memasang 'Page Peel Social Bookmark'.



1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada kotak Expand widget)

3. Cari kod di bawah (gunakan Ctrl + F untuk memudahkan korang mencarinye)


]]></b:skin>


4. Pastekan kod dibawah ini di atas kod tersebut


<style type='text/css'>

<!--

.expand-down {

font-family:Arial, Helvetica, sans-serif;

line-height:normal;

margin-top:20px;

height:54px;

width:500px;

background: url('http://img34.imageshack.us/img34/4388/socialbookmarkandshare.gif') no-repeat;

margin-bottom:30px;

}

/* reset margins and paddings */

.expand-down * {

margin: 0;

padding: 0;

}

.expand-down ul {

padding-top:25px;

margin-left:10px;

}

.expand-down ul li {

float:left;

list-style-type:none;

}

.expand-down ul li a {

text-decoration:none;

}

.expand-down ul li a img {

width:50px; /* initial width of images, 50% of width */

height:50px; /* initial height of images, 50% of height */

border:none;

}

/* initially, don't show the label inside <span> tag */

.expand-down ul li a span {

display:none;

}

.expand-down ul li:hover a span {

/* show label on mouse hover */

display:block;

font-size:14px;

text-align:center;

color:#000;

}

/* expand the image to 100% on mouse hover.

** an image becomes active when mouse hovers it

** ideally, the image should have same width and height as below

*/

.expand-down ul li:hover a img {

width:100px;

height:100px;

}

/* expand the image next to the right of the active image to 60% using + selector */

.expand-down ul li:hover + li a img {

width:60px;

height:60px;

}

/* expand the image second to the right of the active image to 55% using + selectors */

.expand-down ul li:hover + li + li a img {

width:55px;

height:55px;

}

-->

</style>



5. Cari kod di bawah ini pula


<div class='post-footer-line post-footer-line-3'/>



6. Letakkan di bawah kod tersebut


<div class='expand-down'>

<ul>

<li>

<a href='http://www.facebook.com/share.php'>

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwh9QO2pucRdFpypO6CrDHy4cbf2i73TQZf0eFyb1jtySCFrTPFJMBD_GpPJhbZOUUDh_SGefDap1qvwNSnXxIvK22SS1Y7QLw2wsSl8SDgpDiPCpDjnPWRltKqaOH-kzkI9-4LmSmzCA-/s400/facebook_64x64.png'/>

<!-- the label -->

<span>Facebook</span>

</a>

</li>

<!-- make copies of <li>...</li> block to create more items ... --><li><a href='http://twitter.com/home'>

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz7A5GHSwnPGWGie9EYDdKKPGjWa981PAlDqYojCrlHd3DsPu8VUVOEUt5LobU5Het1iaR-BBgdRoer895wNt6xLDdDEeTNUhZtMQA01YboXky293k6B2hg_JyETF7Jv6itjRtelIjCgAT/s400/twitter_64x64.png'/>

<!-- the label -->

<span>Twitter</span>

</a>

</li><li><a href='http://technorati.com/faves'>

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB4Ll6ePaehiWMQChT5_EpV3ClN3yBmT7mLfgmz0vvCPfwhPBHCZXP3UwOX6e1Avy4iofCbc16IfS8WohILsRNh__DDMxnX5cbKuZPsu0NSZetwuEIfAgO305lal7LX-Yod_F9_cVIFdkR/s400/technorati_64x64.png'/>

<!-- the label -->

<span>Technorati</span>

</a></li><li><a href='http://feeds2.feedburner.com/msueroomz'>

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzOHsUNy67qhSz71pVZQ6prdpdUgqNpKxwUUxwWZ3YTrvgv-8EUWUvGK-OjWaP_jQVS3awKqaRXvPkWXB2_uWg5H29uogmSqJmoaryIikvhKEEs45gYdETirknU4xUNm9x89jeTgit3Nat/s400/rss_64x64.png'/>

<!-- the label -->

<span>Rss</span>

</a></li><li><a href='http://www.mybloglog.com/buzz/community/bebyboi'>

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUHuPiLHuIt_Tqit2-TuYDWabyA1O0oaojOOkJjDL6SpNc6cKIh2VdXon2ldWknM1eK3_tEvlYA6nz9nASLaFz38HjJDyV6s3Erzgyrjh_vEjo0LjYrQQ97X2j2YFoMz9U5UlbWtGgurd4/s400/yahoo_64x64.png'/>

<!-- the label -->

<span>MyBlogLog</span>

</a></li> <li>

<a href='http://www.google.com/bookmarks/mark'>

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEf0lIl8DEJA6CZ9sdCZe3A074IqeGvRMdqrR0xSdwjSXXY_jUz6rRbFxl3SWTuAuURD0zzIgGhxL6Z7eB9dDQ2B94Bsszc1qpYYRGDnNtP110aOm_nc_E3bQtHy-6biaNDKuloO3pKnVx/s400/google_64x64.png'/>

<!-- the label -->

<span>Google</span>

</a>

</li><li>

<a href='http://negaraku.net/faves'>

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVvhk2W0a7sH5j7DhPqA5J-aypgHIAC6v0EtZ2d9BwfvxUNrnyvtAmKUzTnz9n_RjFpawd-GgvQAdeN68QbNEycKIMgjR6mPkbv_14BqKNfkZI5jvwrx0t_6SzSuBnLHfkDyIXsBIgpQKx/s400/SyamZone-Flag-Icon.png'/>

<!-- the label -->

<span>Negaraku.Net</span>

</a>

</li>

</ul>

</div>


7. Preview dan Save template .:okay:



Note : Pada highlight merah itu korang tukarkannya




Via - ShamZone




Tinggalkan Komen Anda Disini