Monday

meletak autoHiding sosial bookmarking

TUTORIAL FOR BLOG

mahu kan sosial boormark seperti ini di bawah entri anda
lets get start..


Login ke Blogger anda , pilih Layout / Design
then '' Edit HTML '' dan klik " Expend Widget Template "

lebih mudah guna " Ctrl + F "
cari kod di bawah
</head>

copy dan paste kod di bawah
di ATAS/SEBELUM kod tersebut 


<!--HIDDEN-BOOKMARKS-STARTS-->
<style type='text/css'>
div.beauty-bookmarks                                                                     {
height:54px;
background:url('http://i52.tinypic.com/sxd4e8.jpg') no-repeat left top;
position:relative;
width:540px;                                         }                                                                                              div.beauty-bookmarks span.beauty-rightside                               {
width:17px;
height:54px;
background:url('http://i52.tinypic.com/sxd4e8.jpg') no-repeat right top;
position:absolute;
right:-17px;                                              }                                                                                          div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;      }                                                                                          div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;         }                                                                                         div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;                                      }                                                                                                 .beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i51.tinypic.com/2nw02f4.jpg') no-repeat !important;                                                                                        
}                                                                                                .beauty-furl {
background-position:-300px top !important;          }                                                                                                .beauty-furl:hover {
background-position:-300px bottom !important;                                                                                         }                                                                                               .beauty-digg {
background-position:-500px top !important;        }                                                                                                .beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;                                                                 }                                                                                                     .beauty-stumble {
background-position:-50px top !important;    }                                                                                                .beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;                                                      }                                                                                                .beauty-yahoo {
background-position:-650px top !important;      }                                                                                                 .beauty-yahoo:hover {
background-position:-650px bottom !important;                                                                                         }                                                                                                               .beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;                                                                                          }
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;                                                                  }                                                                                                            .beauty-myspace {
background-position:-200px top !important;                                                        }                                                                                                        .beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;                                                                 }                                                                                                           .beauty-facebook {
background-position:-450px top !important;                                                                                          }                                                                                                          .beauty-facebook:hover {
background-position:-450px bottom !important;                                                                                         }                                                                                                    .beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;                                                                                    }                                                                                                    .beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;                                                        }                                                                                                   .beauty-designfloat:hover {
background-position:-550px bottom !important;                                                                            }                                                                                                      .beauty-syndicate {
background-position:-150px top !important;                                                                                         }                                                                                                  .beauty-syndicate:hover {
background-position:-150px bottom !important;                                                                                          }                                                                                                       .beauty-email {
background-position:-753px top !important;       }                                                                                                 .beauty-email:hover {
background-position:-753px bottom !important;
}

</style>
<!--HIDDEN-BOOKMARKS-STOPS-->


dan sekarang , next

cari kod di bawah
lebih mudah gunakan " Ctrl + F "

<data:post.body/>

dan di BAWAH/SELEPAS kod tersebut
copy dan paste kan kod ini


<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/#' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>


warning : jangan lupa backup template anda dahulu 

Anda bole " Preview " dan klik  " Save Template "

ok, im DONE !

SELAMAT MENCUBA


4 comments:

  1. pandainyaaa awak wat tutorial edit blog template , mana belajo.. ahaks

    ReplyDelete
  2. Pandainya...kena baca teliti sebelum buat ni

    ReplyDelete
  3. masuk tengok kot ader post baru..ahaks

    nanti wat tutorial macam mana nak masukkan lagu kat blog boleh ker

    ReplyDelete
  4. cantek... tapi fening jugak... apa-apapun tq...

    ReplyDelete