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='http://4.bp.blogspot.com/_znjmv4LDwck/Sj_bXRRRXzI/AAAAAAAAA98/HIXOZAkEyqY/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='http://1.bp.blogspot.com/_znjmv4LDwck/Sj_cLDgz2cI/AAAAAAAAA-E/Nc04OTHnR48/s400/twitter_64x64.png'/>

<!-- the label -->

<span>Twitter</span>

</a>

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

<!-- the image -->

<img src='http://4.bp.blogspot.com/_znjmv4LDwck/Sj_afPEG_8I/AAAAAAAAA9E/Ljs7O64hckc/s400/technorati_64x64.png'/>

<!-- the label -->

<span>Technorati</span>

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

<!-- the image -->

<img src='http://2.bp.blogspot.com/_znjmv4LDwck/Sj_axehjkOI/AAAAAAAAA9c/nk9FGYOz-X4/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='http://2.bp.blogspot.com/_znjmv4LDwck/Sj_asJdgxzI/AAAAAAAAA9U/Qjz2LuzIaPE/s400/yahoo_64x64.png'/>

<!-- the label -->

<span>MyBlogLog</span>

</a></li> <li>

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

<!-- the image -->

<img src='http://1.bp.blogspot.com/_znjmv4LDwck/Sj_ak6NscZI/AAAAAAAAA9M/rqTYrs6mybg/s400/google_64x64.png'/>

<!-- the label -->

<span>Google</span>

</a>

</li><li>

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

<!-- the image -->

<img src='http://3.bp.blogspot.com/_znjmv4LDwck/SkBFqKRsuQI/AAAAAAAAA-c/jg0o_f0jLp4/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