Memasang 'Page Peel Social Bookmark'.

Sekiranya anda ingin memasang 'Sexy Social Bookmark' Klik di sini atau 'Classic Social Bookmark Klik di sini.

Untuk memasang 'Page Peel Social Bookmark' seperti screenshot di atas, sila ikuti beberapa langkah mudah di bawah.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

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

7. Sekarang cari kod ini.

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

8. Copy kod di bawah dan letakkan di bawah kod tadi.

<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/AVvXsEh2ZpVBX_ImMvyKiXQZnqF9-oWF_DNIhp4ZzfSWsf1fLu_hCv3ObWHK-KHTTZOcSvJjC5KQsApkb98w-e-TpPBh9W9iLxUteMkoIpJ3KSiqclX2hpRb0r80WCSixyWkdY1vu2onuWi7uh6J/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/AVvXsEixS0VOFrn_BLIcOoFwjhTGe0MqLLARrCVGJcKJmErD3niYFlXMZHeMBcAXYTJRhDWkI9QYBxJGuxAsPYG6VPsGsHVycP0jag2GvWJMULf0fYf2PEupT0aV1dqHQkaGBY8mls26Gm-Q1xLI/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/AVvXsEjNlyZizGGQQN-iuv49DEm6pur_Ytf6MKe4ucwMbjzRHGPSh4m1g-_1J24XXQje3jChybAMWzfowbuEvVaD9PTMCQ0sjyAhWb95foIYqTixOY8TYc6nTplKWpJihjBcZvgI7tJw0GKLOIbN/s400/technorati_64x64.png'/>

<!-- the label -->

<span>Technorati</span>

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

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvEX4qTadQYuxjI0pj-R6NnWmD9gu3nG4etn-gERUUjQCW0X8ukcvvkUoa8WJyN6n2yvm3Nac-B6thQfzcPlnJSHupDdlI047ETVlgRkSf2Jf9CMrfB3HHz286QuPkuFYPb5aP8ZtN72ZA/s400/rss_64x64.png'/>

<!-- the label -->

<span>Rss</span>

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

<!-- the image -->

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8tdlDTPeR_ukrKzZ0jnisnk1S9e-AfnLjGmX2GTxDU9tmqRFAhe26JXlp2bP2EGkSS9XpAU_H2duxZWnwwny2PwE6FFlV8OF-Mjzz3koAT_P-sPGmGMJtwEe9N8L4tJ36U4gRFdMiLg66/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/AVvXsEgC3tCAMwzbc9aiStw1e5lPGCKZ5XSvjK1DZJ8O7S-tgMToLEm3o58qdCJhN96sJEU4HQbqONrY8San2c_gcjrlHMiNZbwYMcFC8wuBZmQH973ZIn_LhAZBN9GMCleDooSrojE7mOo08c29/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/AVvXsEiFocYtM-vsf26jhPywf3AtDUZB9UF7gJ4NIuC5ZDQU6w0769C5eMvmYosskyHGXacR8J3wAXXLFSzCAkwfM25iZ_lz0MuYGNUywzSlMNv2WgPGwLtG4qRBwA1m4Ga88QaqxO35-Pozqq6n/s400/SyamZone-Flag-Icon.png'/>

<!-- the label -->

<span>Negaraku.Net</span>

</a>

</li>

</ul>

</div>

Perhatian !!! Gantikan text / kod berwarna merah.

9. Pilih PREVIEW untuk melihat hasilnya.

10. Sekiranya anda berpuas hati SAVE TEMPLATE.

Sumber asal SyamZone™