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
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>
<!--
.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/AVvXsEgXbqV2ULNz-gyyOT7pnJpcHOt5PQliYqSXaHcmyihxUXCNSFGqEwl_6TfQrAPc9mJ4FmHmKHcgh7jWO_l4B682Yu0lszdU_KQHPSWShyphenhyphenrKBlCJbH4-odWapJnopnQnjBp9qCg_SG4t7dJX/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/AVvXsEgcudlFDjKprGt4JNkDxsMO7WE2XphuayOV0vfjrKvxIjyZJTRkNFUCoNDwdya5q6BDAaRdxy6rAxQjYFj-Wj_EshtRB3jIp0xZxi9jeQfcKifAN_9PJzaX0iRI7DXa5e8WnOy7WMFShvm9/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/AVvXsEh0iV48Dg3UtIu46fBVOLTyZIOEVyvAt2QdNLxXycj9ZXXS4rIlsANubVte3IsMmq7J_kusDsSFVza4IXYGE8a3CWHJCG0dJtyg01sXxknsvD5bek28muSPqGj4w3WKQYR5BTDeTLU8cR-G/s400/technorati_64x64.png'/>
<!-- the label -->
<span>Technorati</span>
</a></li><li><a href='http://feeds2.feedburner.com/Trik bloGs'>
<!-- the image -->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG82dlabWNhoVdl2eBdqlFHve1p9hAG1PzelSzZWAp6Jlp4NQkXWx-ZYkzT5G6Gwx7hI-V2lC0W8jzYz01I69V0ZS-YEW2UpuQP0P7vJJJfcCh6F7C0VzN2cXfXMSDvnDOzYnsk78bsJyx/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/AVvXsEj0cVbJUPBCdLEclcUWHT5efZ6ZyKEjZxjj7lZSLSxPPjfcF8H9rWjxxwbHCkBYzfd6VPJDIPo8ciTdN64wjefte7OqhD7YP0lN_1M_zs20YJWg9G17CXdFBvQF67nValBm_1qU1Tn1cHUb/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/AVvXsEjbnOrFJfT99vkhOyGY7_5JH9VOhvjn1ZixCK9k-GyYFnB3BDaeWosQdH636Rj2AFtYMl8nh5K_mxZK2DYg74GqKi20i3W_UdTSEuL8kRwF7h9SZK2AQYnYugehM8ikamcTVsDE0Gp3eWAL/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/AVvXsEj2ulIq7i043FFj3eU46vGuK0MHFMJ12ZcspzT7PZODQn4rjLJ8IVc_gPfICghSpQR9xU5G2q0nnYcOli1Hwy5MF7E0wcnWunniSsBki3txBhhHAZH9bS_fj_2rAp-YaqaWxiX9P9hrYR_-/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.
