Menambahkan Tombol Bookmark Tanpa Plugin

bookmark Menambahkan Tombol Bookmark Tanpa PluginSetelah beberapa hari lalu saya mengganti theme blog ini dengan yang lebih ringan, ternyata mas Guusn tertarik dalam menerapkan tombol bookmark yang sudah terintegrasi dengan theme dan tanpa perlu menggunakan plugin. Untuk memenuhi keinginannya maka saya tuliskan artikelnya

Semua code dalam artikel ini hanya saya ambil dari theme Tricks yang saya pakai. Saya belum menguasai banget jadi cuma bisa sebatas menulis dan memodifikasi . Oke, dalam pembuatan tombol bookmark ini terdiri dari 3 bagian file yaitu file bookmark yang berisi kode PHP dari penyusun urutan tombol di atas, kemudian file CSS yang berfungsi sebagai pengatur tampilan dari tulisan, background, margin, dll. Yang terakhir berisi icon-icon yang akan kita gunakan sebagai tombol bookmark. Sobat bisa menggunakan icon yang sudah ada atau pengin di ganti dengan icon bikinan sendiri

Oke untuk yang pertama kita mulai dengan membuat file bookmark.php dan masukkan dalam satu directory theme yang sobat gunakan (wp-content/themes/nama-themes)

Untuk file bookmark.php ini silahkan ketikkan kode dibawah ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="bookmark">
<h4>If You Like This Post, Share it With Your Friends </h4>
<div class="book">
<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>digg.png" alt="Digg" /></a>
</div>
<div class="book">
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>stumbleupon.png" alt="stumbleupon" /></a>
</div>
<div class="book">
<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>delicious.png" alt="Delicious" /></a>
</div>
<div class="book">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&amp;t=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>facebook.png" alt="facebook" /></a>
</div>
<div class="book">
<a href="http://twitter.com/home/?status=<?php the_title(); ?> : <?php the_permalink() ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>twitter.png" alt="twitter" /></a>
</div>
<div class="book">
<a href="http://www.reddit.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>reddit.png" alt="reddit" /></a>
</div>
<div class="book">
<a href="http://www.lintasberita.com/kirimmedia/url:<?php the_permalink() ?>" target="_blank" title="Kirimkan ke Lintas Berita" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>lintasberita.png" alt="lintasberita" /></a>
</div>
<div class="clr"></div>
</div>

Kemudian untuk file css silahkan di tambahkan saja ke file css theme sobat biasanya style.css (wp-content/themes/nama-themes/style.css). Tambahkan saja di baris paling bawah

1
2
3
4
5
6
/* Bookmark *
.bookmark{padding:10px;border:1px solid #f0f0f0;background:#f5f5f5;}
.bookmark h4{color:#666;font:bold 19px/19px Arial, sans-serif;border-bottom:solid 1px #eee;padding:0;margin-bottom:10px;}
.bookmark img{}
.book{float:left;margin:0 11px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
.booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}

Dan untuk yang terakhir ialah icon bookmark. Icon-icon ini bisa sobat pasang sendiri sesuai yang di inginkan, dengan ukuran yang bisa di sesuaikan keinginan kita. Dan jangan lupa icon-icon ini di masukkan dalam directory images tempat theme sobat berada (wp-content/themes/nama-themes/images)

Setelah semua file sudah masuk ke dalam directory themes, sekarang tinggal kita buka file single.php dan tambahkan kode ini

1
<!--?php include (TEMPLATEPATH . '/bookmark.php'); ?-->

di bawah <?php the_content(); ?> . Kode di atas berfungsi untuk memanggil file bookmark.php yang telah kita buat sebelumnya

Nah bagi sobat yang ga mau repot menulis kode program di atas, bisa mendownload file yang saya sertakan berisi  file bookmark.php, bookmark.css, dan folder images berisi icon-icon yang saya gunakan.

Download File Bookmark

Dan kalau sobat ingin mengganti salah satu tombol share di atas dengan yang lainnya, misalnya tombol Google +1 seperti permintaan mas Guusn. Maka kita tinggal mengganti link share kirim berita dengan link google +1 yang bisa kita dapatkan dari halaman google +1.

Download File Bookmark Plus 1

Bila sobat menggunakan file bookmark-plus1.php maka kode untuk memanggilnya ialah

1
<!--?php include (TEMPLATEPATH . '/bookmark-plus1.php'); ?-->

Tapi jangan lupa menambah kan file javascript ini

1
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Di header.php maupun di footer.php theme blog sobat icon smile Menambahkan Tombol Bookmark Tanpa Plugin

Semoga bermanfaat icon smile Menambahkan Tombol Bookmark Tanpa Plugin

UpdateUntuk code bookmark.php kemarin belum ada link lintas berita. Sekarang sudah saya update. Untuk file downloadnya juga sudah saya update lagi.

About Adi Wibowo
Seorang blogger yang menyukai dunia Wordpress, Internet, dan Komputer. Ingin berbagi pengetahuan dan pengalaman dengan sobat blogger yang laen melalui Satublog

38 Comments on Menambahkan Tombol Bookmark Tanpa Plugin

    46 Trackbacks & Pingbacks

    1. 20 Wooden Social Media Icon Pack | Majuterus
    2. Pentingnya Social Bookmarking | Indahnya Berbagi | Satublog.Us
    3. benchtops auckland
    4. franchises for sale nz
    5. Net Game
    6. rest assured mattresses
    7. millbrook beds
    8. powerpoint design
    9. clairvoyant phone readings
    10. Steel Storage Container
    11. water softener
    12. http://tags.justfun.co.il/story.php?title=monster-truck-games
    13. Excerpt
    14. digi article blaster
    15. Current Excerpt
    16. wp syndicator
    17. racing game
    18. New Excerpt
    19. ego C
    20. free racing games
    21. revision door
    22. recycling computers
    23. tooth whitening
    24. homemade meal replacement shakes for weight loss
    25. Epson Toner Cartridges
    26. http://www.startrekconventions.net/2012/01/24/medical-billing
    27. cheap b&b lond
    28. GPS Fleet Tracking
    29. joinery auckland
    30. Bridging loan
    31. Air charter
    32. Jet Charter
    33. Promotional merchandise
    34. advertentie manager marktplaats kopen verkopen blog
    35. pool tables
    36. Digital pr
    37. furniture hire scotland
    38. ski chalets
    39. Caribbean villas
    40. Weblinx Ltd
    41. Bboy
    42. Weblinx reviews
    43. christmas jumpers
    44. chain link fence
    45. online home design
    46. play online

    Leave a comment

    Your email address will not be published.

    *



    CommentLuv badge

    %d bloggers like this: