Teman-teman blogger mungkin sudah sering melihat widget url dibawah post ini karena sebagian desainer template blogger sudah menyediakan widget "show url" pada template buatan mereka. Widget ini biasanya di tempatkan di post-footer (bawah postingan) dan di labeli dengan title "sharing is caring", fungsi widget "show url" sebenarnya sama saja dengan tombol share, bertujuan memberikan pintasan berbagi yang mudah dipahami oleh pengunjung situs.
 |
| Cara Menampilkan Url Artikel Dibawah Posts |
Material yang kita gunakan untuk membuat widget seperti itu "show url" hanya terdiri dari css dan html saja, namun agar widget lebih menarik saya menambahkan sedikit sentuhan javascript auto select, tujuan-nya agar pengunjung dapat dengan mudah mengcopy link untuk mereka bagikan, langsung saja ikuti langkah-langkah membuat atau menampilkan url artikel dibawah posts.
Tambahkan css dibawah ini kedalam template blog anda, tepat-nya diatas kode ]]></b:skin>
.show-post-url{display:block;width:100%;box-sizing:border-box;padding:10px;margin-top:10px;border:1px solid #ccc;font-size:15px;outline:0;-o-border-radius:2px;-ms-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;text-decoration:none;cursor:pointer}
Kemudian Tambahkan kode html dibawah kode <div class='post-footer'> atau di bawah kode <div class='post-footer-line post-footer-line-1'>.
<b:if cond='data:blog.pageType == "item"'><b:if cond='true'><input class='show-post-url' expr:value='data:post.url' onclick='this.focus();this.select()'/></b:if></b:if>
Sehingga terlihat seperti contoh di bawah ini;
<div class='post-footer'><b:if cond='data:blog.pageType == "item"'><b:if cond='true'><input class='show-post-url' expr:value='data:post.url' onclick='this.focus();this.select()'/></b:if></b:if>
Terakhir save "simpan" template untuk melihat hasilnya, widget show url sudah tampil di bawah artikel (disetiap postingan) blog kamu. Jika posisi widget terlihat kurang tepat, kamu juga bisa meletak-kan widget show share url di jajaran paling bawah link share sosial media seperti contoh dibawah ini;
<div class='stlb-share-buttons'><a class='addthis_button_facebook_like' fb:like:layout='button_count' fb:like:size='small'/><a class='addthis_button_tweet'/><a class='addthis_button_facebook'/><a class='addthis_button_messenger'/><a class='addthis_button_whatsapp'/>
<b:if cond='true'><input class='show-post-url' expr:value='data:post.url' onclick='this.focus();this.select()'/></b:if>
</div>
Selesai, semoga bermanfaat dan sampai jumpa kembali.
