Cara Membuat WEB, Blogging dan Bahasa Pemrograman

Minggu, 03 Maret 2013

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.
Cara Membuat Social Button di Blog Wordpress tanpa Plugin

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).

Cara Membuat Social Button di Blog WordPress tanpa Plugin Rating: 4.5 Posted By: Yosefa Ferdianto

10 komentar :

  1. sob yang twitter ko ga ada gambarnya..setelah saya coba

    BalasHapus
  2. Balasan
    1. Iya mas/mbak, ini enggak disertai icon.

      Hapus
  3. apa manfaatnya sob buat blog?

    BalasHapus
    Balasan
    1. kalau ada pengunjung yg nge-share di akun social nya, maka kita mungkin dapat pengunjung tambahan dari teman-teman pengunjung yg nge-share tadi.

      Hapus
  4. kok gak ada iconnya gan? gimana nambahin iconnya??

    BalasHapus
  5. makasih banyak sob. ane sudah coba ok hasilnya..

    BalasHapus
  6. kalau dibawah postingan gimana mas?

    BalasHapus
    Balasan
    1. Kyknya sudah berhasil ya mbak, td ane intip sudah muncul di bawah postingan. :)

      thx kunjungannya!

      Hapus