Cara Membuat Share Button Simple Tanpa Javascript di Blog

Kali ini penulis membahas artikel tentang Cara Membuat Share Button Simple tanpa Javascript di Blog. Dengan Share Button yang simple dan tanpa Javascript ini, artikel blog kalian tidak akan menjadi berat dan baik buat SEO karena  Pembuatan Share Button tersebut menggunakan Kode CSS Eksternal dan kode Html saja. Penampilan Share Button nya seperti gambar di bawah ini :



Bagaimana ? apa kalian tertarik untuk tahu cara membuat Share Button Simple Tanpa Javascript di Blog ? perhatikan cara membuat nya berikut ini :

Pertama-tama yang perlu kalian lakukan yaitu menuju ke tema blog selanjutnya klik edit html seperti gambar dibawah ini.


Cara selanjutnya kemudian meletakkan kode CSS eksternal untuk Share Button di atas kode </head> setelah kode </style>. Kode Css Eksternal untuk Share Button seperti dibawah ini..

.brsosial{border-top:3px solid #ccc;border-bottom:1px solid #ddd;width:100%;height:50px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px}
.jdsosial{float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777}
.fbsosial{margin-left:100px;background: #fff; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;}
.twsosial{background: #fff; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;}
.ggsosial{background: #fff; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;}

Cara Selanjutnya yaitu tekan “Ctrl + F” , cari kata articlebody letakkan kode html untuk Share Button  di bawahnya <data:post.body/>.  Kode Html Share Buttonnya seperti dibawah ini...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='brsosial'>
<div class='jdsosial'>
Share this <data:post.title/> article :
  </div><br/><br/>
<a class='fbsosial' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' expr:title='&quot;Share to Media sosial Facebook : &quot; + data:blog.title' target='_blank'>Facebook</a> <a class='twsosial' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' expr:title='&quot;Share to Media sosial Twitter : &quot; + data:blog.title' target='_blank'>Twitter</a> <a class='ggsosial' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:title='&quot;Share to Media sosial Facebook : &quot; + data:blog.title' target='_blank'>Google+</a>
</div>
</b:if>

Untuk lebih jelasnya kalian bisa perhatikan gambar tentang cara meletakkan kode HTML Share Button di bawah ini :



Begitulah artikel tentang Cara membuat Share Button Simple Tanpa Javascript, Semoga Bermanfaat.

Share this Cara Membuat Share Button Simple Tanpa Javascript di Blog article :

Facebook Twitter Google+

Artikel Terkait Cara Membuat Share Button Simple Tanpa Javascript di Blog

TENTANG PENULIS

Nanang Sugiarto

Penulis seorang Programmer Aplikasi Database Vb6 dan Blogger. Situs Web yang dibuat Penulis yaitu : Nanang Sugiarto WorkShop, Tutorial VB6 Sugiarto, Tutorial Microsoft Office Sugiarto, dan Seputar Pengetahuan Pangan.