Inilah Menciptakan Tombol Share Di Bawah Posting Blog - Fezarzone

Membuat Tombol Share di Bawah Posting Blog – Tentu sudah tidak ajaib lagi dengan tombol share yang biasa terlihat di bawah posting blog, fungsi dari tombol share tersebut biar lebih memudahkan visitor untuk membagikan artikel yang sudah kita posting ke dalam beberapa media umum menyerupai facebok, twitter, google+, lintasme dan jejaring sosial lainnya.

Tanpa memasang tombol share ini bergotong-royong blogger juga sudah menyediakan widget tombol share, namun apa daya alasannya tombol share default blogger tersebut tidak valid HTML5 jadi ada baiknya apabila kita modifikasi biar tombol share yang terletak di bawah posting blog biar sanggup lolos dari validator W3C dan sanggup valid HTML5.

Untuk menciptakan tombol share ini hanya memakai CSS saja tanpa memakai gambar, sehingga tampilan dari tombol share ini lebih sederhana dan minimalis dengan di sertai warna-warna yang menarik. Untuk memasang tombol share di bawah posting blog juga cukup mudah, hanya dengan menambahkan sedikit isyarat saja yang terdapat dibawah ke dalam Edit HTML template blog maka kesannya menyerupai yang tertera pada gambar di atas. Untuk itu berikut tutorial untuk Membuat Tombol Share di Bawah Posting Blog biar valid HTML5 dan full color.

1. Login ke akun blogger.
2. Masuk ke Template kemudian pilih Edit HTML.
3. Copy isyarat berikut ini kemudian taruh di atas isyarat ]]></b:skin>

.widgetshare{font:bold 12px/20px Tahoma !important;background:#333;border:1px solid #444;padding:5px 4px;color:#fff !important;margin-top:10px}.widgetshare a{font:bold 12px/20px Tahoma !important;text-decoration:none !important;padding:5px 4px;color:#fff !important;border:1px solid #222;transition:all 1s ease}.widgetshare a:hover{box-shadow:0 0 5px #0f0;border:1px solid #e9fbe9}.fcbok{background:#3B5999}.twitt{background:#01BBF6}.gplus{background:#D54135}.digg{background:#5b88af}.lkdin{background:#005a87}.tchno{background:#008000}.ltsme{background:#fb8938}

4. Selanjutnya copy isyarat berikut ini, kemudian taruh di bawah isyarat <data:post.body/> atau sanggup juga <div class='post-footer'>

<div class='widgetshare'> Share artikel ke:  <a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a>  <a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a>  <a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a> <a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a> <a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a> <a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a> <script> //<![CDATA[ var uri = window.location.href; var ttle = document.title; document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="Inilah Membuat Tombol Share di Bawah Posting Blog"' rel='nofollow' class='ltsme'>Lintasme</a>"); //]]> </script> </div>

5. Langkah terakhir tinggal Simpan template kemudian lihat hasilnya.

Demikian tutorial untuk Membuat Tombol Share di Bawah Posting Blog. Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa isyarat <data:post.body/> dan <div class='post-footer'> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan.