Cara Menampilkan Url Artikel Di Bawah Posts

34 views
Cara Menampilkan Url Artikel Di Bawah Posts – Teman-teman blogger mungkin sudah sering melihat widget url dibawah post ini alasannya yaitu 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” bergotong-royong sama saja dengan tombol share, bertujuan memperlihatkan pintasan mengembangkan 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 Di Bawah Posts Cara Menampilkan Url Artikel Di Bawah Posts
Cara Menampilkan Url Artikel Dibawah Posts

Material yang kita gunakan untuk menciptakan widget ibarat itu “show url” hanya terdiri dari css dan html saja, namun biar widget lebih menarik aku menambahkan sedikit sentuhan javascript auto select, tujuan-nya biar pengunjung sanggup dengan gampang mengcopy link untuk mereka bagikan, eksklusif 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 arahan 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 ibarat 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 ibarat 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.