Saturday, 13 August 2011

Membuat Social Bookmark tanpa Plugins

Sebenarnya untuk membuat social bookmark sudah banyak Plugin yang menyediakan. Namun ketika kita memutuskan menggunakan Plugin untuk membuat Social bookmark, kita harus memikirkan perfomance dari Blog kita. Karena rata rata penggunaan Plugin akan menurunkan kecepatan dari loading suatu Blog.
Alternatif untuk membuat social Bookmark sebenarnya bisa kita buat secara manual, memang sedikit ribet tetapi dari sisi kecepatan loading jauh lebih cepat dari pada menggunakan Plugin. Satu hal lagi yang biasanya orang enggan untuk memakai cara manual adalah dari sisi tampilan, tapi hal ini sebenarnya tergantung dari kreatifitas yang membuat.
Baik kita langsung ke masalah tehnis pembuatannya, Coba anda lihat screen shoot dibawah ini , nanti hasil dari Social Bookmarknya kurang lebih seperti ini .

sedangkan kode nya adalah seperti ini :

1
2
3
4
5
6
7
8
9
10
11
12
<strong>Share This:</strong>
<div style="border: 1px solid #ccc; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; padding: 3px; text-align: left; background-color: #f8fff5; height: 30px; width: 400px;">
<a title="Share To Facebook" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" rel="nofollow" target="_blank"><img src=" http://i1092.photobucket.com/albums/i414/yasin_ahnaf/facebook.png" alt="" width="40" height="40" /></a> 
<a title="Tweet About It!" href="http://twitter.com/home?status=<?php the_title(); ?> - <?php the_permalink(); ?>" rel="nofollow" target="_blank"><img src=" http://i1092.photobucket.com/albums/i414/yasin_ahnaf/tweet.png" alt="" width="40" height="40" /></a> 
<a title="Submit to Digg" href="http://digg.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" rel="nofollow" target="_blank"><img src=" http://i1092.photobucket.com/albums/i414/yasin_ahnaf/digg.png" alt="" width="40" height="40" /></a> 
<a title="Technorati" href="http://technorati.com/faves?add=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><img src=" http://i1092.photobucket.com/albums/i414/yasin_ahnaf/technorati.png" alt="" width="40" height="40" /></a> 
<a title="Stumble It!" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" rel="nofollow" target="_blank"><img src=" http://i1092.photobucket.com/albums/i414/yasin_ahnaf/stumbleupon.png" alt="" width="40" height="40" /></a> 
<a title="Bookmark this post on delicious" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>" rel="nofollow"><img src=" http://i1092.photobucket.com/albums/i414/yasin_ahnaf/delicious.png" alt="" width="40" height="40" /></a> 
<a title="Submit to Reddit" href="http://reddit.com/submit?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><img src=" http://i1092.photobucket.com/albums/i414/yasin_ahnaf/reddit.png" alt="" width="40" height="40" /></a> 
<a title="Google Bookmark" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>&amp;annotation=<?php the_excerpt(); ?>" rel="nofollow" target="_blank"><img src=" http://i1092.photobucket.com/albums/i414/yasin_ahnaf/google2.png" alt="" width="40" height="40" /></a> 
<a title="Kirim ke Lintas Berita" href="http://www.lintasberita.com/kirimmedia/url:<?php the_permalink(); ?>" rel="nofollow" target="_blank"><img src="http://i1092.photobucket.com/albums/i414/yasin_ahnaf/lintas2.png" alt="" width="40" height="40" /></a>
</div>
Untuk penempatannya anda bisa menempatkan pada single.php setelah kode ini:
1
<?php the_content(); ?>
atau memasukkan pada file index.php sedangkan untuk penempatannya silakan cari yang paling cocok, sesuai dengan selera anda misalnya dibawah judul postingan atau diahir postingan
Icon diatas adalah selera saya anda bisa menggantinya dengan mengganti link yang berada dibelakang kode :
1
<img src
Selamat mencoba semoga bermanfaat.

0 comments:

Post a Comment