™Galery™

Demonya bisa dilihat disini

Buat yang menyukai Social Bookmark mungkin ini bisa membantu kawan-kawan untuk membuatnya, Social bookmark ini menggunakan jquery jadi tampilannya juga lebih menarik dengan efek Fade in dan fade outnya. untuk kelemahannya itu sendiri sudah pasti memeberi beban tersendiri pada blog. :D
Untuk cara membuatnya ikuti langkah-langkah berikut ini untuk memasangnya dibawah artikel:

1. Login blogger
2. Rancangan, Edit Html
3. Centang menu Expand Template Widget
4. Simpan CSS berikut diatas kode ]]></b:skin> :

/***********************************
*     SOCIAL ICONS - GENERAL        *
***********************************/
.social h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #121621; text-shadow: 0px 2px 6px #333; }
.social h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #000000; }
.social h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #312400; text-shadow: 0px 2px 6px #333; }
.social h2 a:hover { color: #AF7F00; }
.social h3 { clear:both; padding:20px 0 0 60px; }
.social p { padding:5px 10px; }
.social a { color:#AF7F00; text-decoration:underline; }
.social a:hover { text-decoration:none; }
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3P-hfbMIcXK35eWNqeTY9U5mhJfCSU0BV1F63EvJ7pOhEC73-Y0QQumBm1l4zDIiCnYSfBV9U1u3iaXuqUvk8ms03wzdAChqdZ4RDQvaKqsadAEg7heUW9uG-LgVwOnwKoXRSPySaQs/s1600/delicious.png"); }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjiFxxA_gWkJ5VJQY2egJ8l3Z7CH0doyfqkj8QElf5eaCBY5JTtYwvrsckIGDq9LKwZZg2hjyHJpbuR383xPtPPrY74OjftKnPlxudTA34ELx28SyE6BcQwnKjjj6oH9GyC3iyDod6X4s/s1600/digg.png"); }
li.facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikLC2VDtcAkVjAY5CBS_6CgY_EIHsCK-rnz5ijG365wZvNx20snOlD1WvvWC4HJLnE5xZ9ZJm9mOOmBgaIkS7I36hf9NNytXrmsMhQVw7rJic70490DPuYVYm8vf_gxvoERLvCYMou_cc/s1600/facebook.png"); }
li.flickr { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sVj7-Hh6y_R78ZIWmIjuRjyMV3eOoCAZ3ncPz521zucE8yycLmkRcuZjfZIqFd2kR6h70yvt8U352qEJ7v0x4YaSAexqq40NWSZ-2HomcL-URhRlxj8ifzRCoFFoKpnPlM71ZidVy_s/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsX2OQZIEydmpPnh7smxUI_f1Nf3du7FcZACmTMCT1QJsAnnC7Fn_8M9PpXmKKmAUHUe1kC_A_KRZcPjls0nbT55T5Oh-p0Y_cWswmXDT5-2_wljwByO8mnK_w3ysCbT4ul7e8u1l0dkw/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Gg-mqFMAIqoeKo7QcVqyp3OUhHi0N69Fit0UVGmEwhAPe1pqRt20ejATPpMh8fLJRD_8vOp2aWnj5C9Ipme2EnBIRnCOJ5sb4cuR2ZyUS7wYyNFDpk3LzsgvaaPh3MnjGXKpvfRGw5I/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbldFILEHlUUu866tsmeuVZv1ikWB49OyiPoPV-TfPXE7pGe7URaQZUzsteJEOTcyh71jcdObMh4XQpFBI-bVKGuARShEzF6xQA30AJx5yZsA8sl-rI25DLW9-oekKUCWG2390mbIXjYc/s1600/rss.png"); }
li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtHmICYnEA9WplcwCQeorf_W0OAlCJbXexRxfqFl3y4UaWUiLw1D1HTaVU-Os_t-2pm_gPoez0w3oD301lXStcTRjhhL18C_IcLMykTQm-RjIjFq1dBEwtBVPBOaf1fZz2gyAOhnEUiCg/s1600/twitter.png"); }

 Keterangan: Jika kawan ingin mengganti Ukuran imagenya, jangan lupa juga ukuran pada CSS nya juga disesuaikan.
5. Cari kode <div class='post-footer'> dan simpan kode berikut diatasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class="social" id="jquery">
<li class="delicious">
<a href="http://del.icio.us/post?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
<li class="digg">
<a href="http://digg.com/submit?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?u=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
<li class="flickr">
<a href="http://www.flickr.com/people/59053382@N04/"></a>
</li>
<li class="linkedin">
<a href="http://www.linkedin.com/"></a>

</li>
<li class="reddit">
<a href="http://www.reddit.com/submit?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
<li class="rss">
<a href="http://feeds.feedburner.com/JqueryShareBookmark"></a>
</li>
<li class="twitter">
<a href="http://twitthis.com/twit?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
</ul>
</b:if>

Tambahan: Untuk penempatannya, boleh sesuai keinginan sendiri berdasarkan template masing-masing jikapun tidak diatas kode <div class='post-footer'>
6. Simpan template dan lihat hasilnya.