Bookmark Menu a-la CSS3

Kita tahu bahwa keberadaan Social Bookmark dapat digunakan untuk meningkatkan trafik web/blog dengan cukup efektif. Biasanya, untuk memudahkan pengunjung melakukan bookmarking, banyak pengelola web/blog yang menyediakan menu social bookmark pada web/blog mereka. Kebanyakan menggunakan gambar daripada link teks karena dirasa lebih komunikatif dan lebih bagus tentunya.

Nah berikut ini adalah tutorial singkat membuat bookmark bar yang cantik pada blogspot dengan CSS3

1. Langkah Awal
Selalu diingat bahwa sebelum melakukan editing pada template, hendaknya kita melakukan backup terlebih dahulu untuk mengantisipasi hal-hal yang tidak diinginkan. Setelah itu, pilih opsi Expand Template Widget

2. CSS
Mesukkan kode CSS berikut ini. Jika belum tahu, letakkan saja sebelum tag ]]></b:skin>

/* BookmarksBar
----------------------------------------------- */
ul.socials {

}

ul.socials li {
display: inline;
}

ul.socials li img{
width:48px;height:48px;
}

ul.socials a {
background:transparent;
display: inline;
float: left;
margin: 0 0 27px 10px;
width: auto;
padding: 10px 10px 15px;
text-align: center;
font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333;
-webkit-transform: rotate(-2deg);
-webkit-transition: -webkit-transform .15s linear;
-moz-transform: rotate(-2deg);
}

ul.socials img {
display: block;
}

ul.socials a:after {
content: attr(title);
}

ul.socials li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}

ul.socials li:nth-child(3n) a {
-webkit-transform: none;
position: relative;
top: -5px;
-moz-transform: none;
}

ul.socials li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
position: relative;
right: 5px;
-moz-transform: rotate(5deg);
}

ul.socials li:nth-child(8n) a {
position: relative;
right: 5px;
top: 8px;
}

ul.socials li:nth-child(11n) a {
position: relative;
left: -5px;
top: 3px;
}

ul.socials li.messy a {
margin-top: -375px;
margin-left: 160px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}

ul.socials li a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}

2. HTML
Masukkan kode HTML berikut ini pada bagian post-footer blog. Jika kesulitan, carilah kode <div class='post-footer-line post-footer-line-'>
biasanya, pada template default, terdapat tiga baris footer. Letakkan pada baris yang disuka.
Jika menginginkan icon yang berbeda, gantilah tulisan yang berwarna merah dengan alamat gambar yang dikehendaki.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sexy-bookmarks'>
<ul class='socials'>

<li class='sexy-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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizOmr9hMjQ-KtGhVIJrDasKVqZ2DXfxx_owLn93lzR_sr97qVpfiktglCGvbfF40FSFHVquUiFO4SgmXzL8zpYaUaYdIP50rl0uV_TyBmYMVn0n1JqJn2eieZb3IYeNu3pUChectCnNFE/s400/1267557422_facebook.png'/></a></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_Blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS3UeUrf3m9B9I-m_MfVZc3Z3gmo0RVGcnU_zP5NPNubvO2usPRxWYUUSTUQwSaBFm11PZY8i28HqFTJbugO2mEWLLjh_bX49K2iyg5zlmZ2VDUkXL3WKwSHVDcBD-ziW50cEButPfw8U/s400/1267557431_twitter.png'/></a></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_Blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwrZMGIjHNS4dtWl5Q3fp-P6_z7-S5rA3SgzNyCZdhA5Y4fg5vte0tmEqNQwZr-_uO0TjV83rAD8Q2EoUN664gGzZDekDx-3H7NIKatTBk194LA_xDNmKFmmNzpUh2lR_jkwONDzHFYoQ/s400/1267557426_reddit.png'/></a></li>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_Blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE_0WNM4WafzIzRZZ1Tfvt4dAjkyBKa1g5UJfZZJfdPxWuxnINc5t802elAGeNZbihWaYndXGfaPHWFDZGrGeJTDu_L0KF7Jd9xHvPsHRMkvzelBY0KIZlivE4InC91MzZWuL2SKvwsCM/s400/1267557435_delicious.png'/></a></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_Blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj34FKGJtUgjKIggf_qgUHkadyLtFFfPziQV3CvQkOrB0AZwhV-_9T5Nl0BOQtYGkLopFwmbsh7CDGSBskOSa63UdIwx-3vjAiQ1SIJPCHjD-7PxEEO15MG5jvVDnNRMttgJS6rWwDpKTY/s400/1267557438_technorati.png'/></a></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_Blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-U8wfbbWwGj-NIi5pRIfHUuvkKmyXTKeX3iFfMMBRd9XAkhyphenhyphen30xfyO110Ep6FL1XrdusVkMfzjVxMQ_J1iwbCJQc3dZ1O93QjGViHzIII5Gh2o9yZH-OO878oMWx5m48qRoE1cqCAZ0/s400/1267557441_digg.png'/></a></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_Blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkF4hqT_PxE4l5P3zc6fSiMkkX_OFU608SxH4hrzlw920q4hbUJiwYy2X6vWxvx8rtTVvzal8xnyH_BzxP4Cn9Fifr5sj8YD7zLZH2DOCU6t4btH-CyL4rlawAv9COdf7oxWAa4_rG0BA/s400/1267557447_stumbleupon.png'/></a></li>
</ul>
</div>
</b:if>

4. Demo

▪ Lihat Demo ▪

Perlu diperhatikan, karena trik ini menggunakan CSS3 (seperti -moz-transform, -webkit-animation, dsb), maka efek animasi hanya dapat ditampilkan pada browser tertentu saja. Paling baik jika dilihat menggunakan browser berbasis wbkit seperti Safari 4 dan Google Chrome 3+. Tetapi masih cukup bagus bila menggunakan Firefox 3.6.

Sangat mudah sekali bukan? Selamat mencoba!