Trik Dan Tips Cara Menampilkan Url Artikel Di Bawah Posts

Cara Menampilkan Url Artikel Di Bawah Posts - Teman-teman blogger mungkin sudah sering melihat widget url dibawah post ini alasannya ialah 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" bahwasanya sama saja dengan tombol share, bertujuan menawarkan pintasan membuatkan yang gampang dipahami oleh pengunjung situs. Untuk lebih jelas-nya silahkan lihat demo widget show url/link pada laman berikut ini [Klik Disini]

Cara Menampilkan Url Artikel Dibawah Posts

Material yang kita gunakan untuk menciptakan widget menyerupai itu "show url" hanya terdiri dari css dan html saja, namun semoga widget lebih menarik aku menambahkan sedikit sentuhan javascript auto select, tujuan-nya semoga pengunjung sanggup dengan gampang mengcopy link untuk mereka bagikan, pribadi saja ikuti langkah-langkah menciptakan 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 isyarat 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 == &quot;item&quot;'>
<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 menyerupai pola di bawah ini;

<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, kau juga sanggup meletak-kan widget show share url di jajaran paling bawah link share sosial media menyerupai pola 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 hingga jumpa kemabali.