03 March 2010
'Page Peel Social Bookmark'.
hak milik
Sue
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 .
Note : Pada highlight merah itu korang tukarkannya
Via - ShamZone
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 .
Note : Pada highlight merah itu korang tukarkannya
Via - ShamZone
Tinggalkan Komen Anda Disini