AutoHide Social Bookmark for Blogger

อย่างที่เราๆรู้กันดีกว่า Social Bookmark ก็คือตัวช่วยอย่างหนึ่งที่ช่วยโปรโมทบล็อกของเรา ให้เป็นที่รู้จัก คล้ายๆการบอกผ่านต่อๆกันไปเรื่อยๆ จนขยายเป็นวงกว้าง เพราะฉะนั้น การมี Social Bookmark ไว้ในบล็อกจึงถือเป็นเรื่องจำเป็นมาก วันนี้เราจึงขอนำเสนอ AutoHide Social Bookmark  ที่มีความสวยงามและมีลูกเล่น คือ เมื่อเอาเอาเม้าท์ไปวางบนไอค่อนที่เราต้องการ มันก็จะโชว์ขึ้นมาให้เห็น ออกแนวๆผลุบๆโผล่ๆ แบบนี้ (จิ้มที่รูป)

1) ไปที่ Layout > Edit HTML กดติ๊กที่ช่อง Expand Widget Templates

2) กด(Ctrl+F) หาแท็ก </head> แล้ววางโค๊ตนี้ไว้ข้างหน้า

<!--AutoHiden-Social-Bookmarks-Start-->
<style type='text/css'>
div.beauty-bookmarks { height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom; position:relative; width:540px;}
div.beauty-bookmarks span.beauty-rightside { width:17px; height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') 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-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://i44.tinypic.com/1znbj83.png') 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>
<!--AutoHiden-Social-Bookmarks-End-http://tomatoessource.blogspot.com-->

3) กด (Ctrl+F) หา <data:post.body/> มันจะอยู่แถวๆบรรทัด <div class='post-body entry-content'> เมื่อเจอ <data:post.body/> แล้ว ให้วางโค๊ตด้านล่างนี้ไว้ ก่อนหน้า หรือ หลัง

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

ตัวสีแดงคือส่วนที่ต้องเปลี่ยน มันคือ ลิงค์ Feed ของเรา หากใครยังไม่มีสมัครได้ที่ Feedburner.com   


การปรับแต่ง
เราสามารถลบไอค่อนไม่ต้องการออกได้ วิธีลบก็คือ จากโค๊ต ข้อ (3)

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

หากตัวสีแดงคือส่วนที่เราไม่ต้องการก็ลบมันออกไปเลย แต่เวลาลบต้องดูดีๆ อย่าลบ แท็กอื่น เป็นอันขาด ลบแค่ บรรทัด <li>......</li> เท่านั้น

จากนั้นเราก็ต้องไปลบ โค๊ตในข้อที่ (2)
จากตัวอย่างเราลบไอค่อน technorati.com เพราะฉะนั้น เราก็ต้องไปลบ โค๊ต CSS ไอค่อนของ technorati ออก จริงๆแล้วจะลบหรือไม่ลบก็ได้ ไม่ต่างกัน แต่ถ้าต้องการแบบลบเรียบ ก็ควรลบมันซะ จาก โค๊ตข้อ (2) หาโค๊ตตัวสีแดง และลบมันออก

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

.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;}

แก้ตำแหน่ง แก้โค๊ตข้อที่ (2)

<!--AutoHiden-Social-Bookmarks-Start-->
<style type='text/css'>
div.beauty-bookmarks { height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no repeat left bottom; position:relative; width:540px;}
div.beauty-bookmarks span.beauty-rightside { width:17px; height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom; position:absolute; right:-17px;
}

ให้เปลี่ยนตัวสีแดง เช่นเปลี่ยนจาก left bottom เป็น left top  (ซ้ายล่าง เป็น ซ้ายบน) แล้วแต่เรา