Cara Membuat Social Button di Blog WordPress tanpa Plugin

Jika Anda suka berkreasi, tidak ada salahnya mencoba cara ini untuk membuat social button seperti facebook share, G+, tweet dan lain-lain. Meskipun lebih banyak hal yang harus dilakukan daripada menggunakan plugin langsung. Tetapi ada kelebihannya, yaitu kita bisa mengedit dan mendekorasinya dengan sesuka hati untuk mencapai tampilan yang diinginkan. Langkah-langkah untuk membuat social button di blog wordpress tanpa plugin adalah sebagai berikut.

Cara Membuat Social Button di Blog Wordpress tanpa Plugin

Pertama, copypaste kode di bawah ini

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

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&amp;t=<?php the_title(); ?>" target="_blank" rel="external nofollow">Share to FB</a>

<a href="http://twitter.com/home/?status=<?php the_title(); ?> <?php the_permalink() ?>" target="_blank" rel="external nofollow">Tweet this Article</a>

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow">Stumble this Article</a>

<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow">Digg this Article</a>


<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>&amp;source=<?php the_permalink() ?>" title="Share on LinkedIn" target="_blank" rel="external nofollow">Share this Article</a>

Kemudian pasang kode di atas di file single.php

Bagaimana, mudah bukan Cara Membuat Social Button di Blog Wordpress tanpa Plugin?
Kode di atas dapat dikreasikan dengan kotak berlangganan menjadi 2 kolom yang berdampingan seperti gambar di bawah ini.

Untuk membuat tampilan seperti di atas, ada beberapa hal yang diperlukan. Seperti kode CSS dan HTMLnya. Cara-cara untuk membuat tampilan seperti di atas adalah sebagai berikut.
1. Letakkan kode di bawah ini ke file CSS theme Anda (Misalnya di /wp-content/themes/twentyeleven/style.css)

/* Subscribe */
.subscr {border:1px dashed #FF0000;background:#FFE99D;padding:5px 15px;}
.subscr-right {border-left:1px dashed #FF0000;width:160px;padding-left:20px;margin-left:20px;float:right;}
.subscr h4{padding:0;margin-bottom:10px;}

2. Letakkan kode di bawah ini di file single.php theme Anda (Misalnya di /wp-content/themes/twentyeleven/single.php)

<div class="subscr">
<div class="subscr-right">
<h4>Share this article</h4>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="small"></g:plusone>

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&amp;t=<?php the_title(); ?>" target="_blank" rel="external nofollow">Share to FB</a>

<a href="http://twitter.com/home/?status=<?php the_title(); ?> <?php the_permalink() ?>" target="_blank" rel="external nofollow">Tweet this Article</a>

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow">Stumble this Article</a>

<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow">Digg this Article</a>


<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>&amp;source=<?php the_permalink() ?>" title="Share on LinkedIn" target="_blank" rel="external nofollow">Share this Article</a>
</div>
<div>
<h4>Ingin Berlangganan Artikel dari Blog ini?</h4>
Dapatkan update email newsletter gratis, <strong>masukkan email Anda di sini:</strong><p />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=URIBLOGANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" style="width:200px" name="email" class="inputbox" value="Enter Your email here..." onfocus="if (this.value == 'Enter Your email here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your email here...';}" /><input type="hidden" value="URIBLOGANDA" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input type="submit" value="Subscribe" class="button" />

</form> 
<p>Jangan lupa untuk mengonfirmasi subcriptionnya.</p>
</div>

Catatan: URIBLOGANDA pada kode di atas harus diganti dengan URIBLOGANDA yang diberi pada saat mendaftar di feedburner untuk membuat kotak berlangganan via email.

Selamat, Anda selesai membuat kotak berlangganan dan social button berdampingan yang seperti di gambar di atas (tidak sama persis sekali).

Tweet