Sabtu, 30 Juni 2012

Memasang social bookmark di bawah posting

Keunikan dari widget sharing is sexy adalah icon-icon social bookmarking yang terdapat didalamnya bisa bergerak ketika disorot mouse sehingga terlihat lebih hidup dan menarik. Dan untuk cara memasang widget social bookmark sharing is sexy dibawah posting, ikuti langkah-langkah dibawah ini :

1. Login ke blogger

2. Masuk ke menu Design >> Edit HTML.

3. Beri centang pada ‘Expand Widget Templates’

4. Cari kode ]]></b:skin>

5. Copy kode dibawah ini dan pastekan diatas kode ]]></b:skin> tadi

div.beauty-bookmarks {
height:54px;
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ75QuAjWtLo7c90Mrg9Ntgr3s3LL61eaqQaxtlaJGVUAFDYVYZavUqr15EzcUQQuqVoJSW-mYGhPBDjiz-JiRXymZc5jGNP-j0VpoJOih_YLn5_gFwqge_g-mM8syCUZGeOQKQ2Of2Icc/’) no-repeat left bottom;
position:relative;
width:455px;
}
div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ75QuAjWtLo7c90Mrg9Ntgr3s3LL61eaqQaxtlaJGVUAFDYVYZavUqr15EzcUQQuqVoJSW-mYGhPBDjiz-JiRXymZc5jGNP-j0VpoJOih_YLn5_gFwqge_g-mM8syCUZGeOQKQ2Of2Icc/’) no-repeat right bottom;
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-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNHnqavcDc3_ElhfpF5GGqaW3Ybo5cvLU0wHcAWGNrAFwivRP_anXaQNsUmF0GyiPzChppkewkJJEvfMP5GCZffMDj0Y2qusPJxhY1OYM7iu8gL5u97Xx0bjB_YA1BwTVehJp2mHjQJ0hb/’) 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-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px 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-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;
}

6. Setelah itu cari kode <data:post.body/>
7. Copy kode dibawah ini dan pastekan dibawah kode <data:post.body/> tadi

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’beauty-bookmarks’>
<ul class=’socials’>
<!– delicious start–>
<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>
<!– delicious end–>
<!– digg start–>
<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>
<!– digg end–>
<!– technorati start–>
<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>
<!– technorati end–>
<!– reddit start–>
<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>
<!– reddit end–>
<!– Stumbleupon start–>
<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>
<!– Stumbleupon end–>
<!– designfloat start–>
<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>
<!– designfloat end–>
<!– facebook start–>
<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>
<!– facebook end–>
<!– twitter start–>
<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>
<!– twitter end–>
<!– furl start–>
<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>
<!– furl end–>
</ul>
<span class=’beauty-rightside’/>
</div>
</b:if>

8. Simpan dan lihat hasilnya

Tidak ada komentar:

Posting Komentar

Tolong kritik dan saran demi kemajuan blog kami