Menambahkan Tombol Bookmark Tanpa Plugin | Satublog™

Menambahkan Tombol Bookmark Tanpa Plugin

Setelah 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

Semoga bermanfaat

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

Adi Wibowo

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

Hosting & Domain By Kuncihost