Cara Membuat Permalink Keren Di Bawah Postingan Blog

Setelah lama saya tidak update, kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat permalink keren di bawah postingan blog. Permalink ini akan sangat bermanfaat bagi blog dan visitor kita. Sebenarnya saya mendapatkan tutorial ini dari blog teman saya Ne-Gen. Kemudian saya sempurnakan lagi. Pertama, kalian harus tahu terlebih dahulu apa yang saya maksud dengan permalink itu. Jika kalian belum tahu, kalian bisa melihat demonya di link di bawah ini :

Demo

Bagaimana? Pada halaman tersebut di akhir postingan terdapat permalinknya bukan? Apakah kalian tertarik membuatnya? Oke, langsung saja. Berikut ini adalah cara membuatnya :

• Seperti biasa, pertama buka dasboard blog kalian.
• Masuk ke Tata Letak dan edit widget postingan untuk mengaktifkan rating bintangnya (Kalian bisa melewati langkah ini).
• Jika sudah kalian aktifkan, kemudian masuk ke Template, kemudian pilih Edit HTML.
• Cari kode ]]></b:skin>.
• Masukkan kode di bawah ini tepat di atas kode ]]></b:skin> :

.yondafuq-Permalink{
    display:block;
    width:auto;
    height:135px;
    background:#ffffff;
    border:5px solid #1c6beb;
    padding:0px;
    margin:30px 0px 10px 0px;
    color:#000;
    }
    .yondafuq-Permalink .kontainer{padding:5px;}
    .NEGen-Permalink h4{
    background:#ffffff;
    border:none;
    border-bottom:5px solid #1c6beb;
    color:#000000;
    padding:5px 10px;
    margin:0px 0px 0px 0px;
    display:block;
    }
    .yondafuq-Permalink h4 a{color:#1c6beb;}
    .yondafuq-Permalink img{
    width:86px;
    height:86px;
    margin:0px 10px 0px 0px;
    float:left;
    border:1px solid #1c6beb;
    padding:2px;
    background:#1c6beb;}

Keterangan :
Kode yang berwarna PINK adalah kode lebar. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna ORANGE adalah kode tinggi. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna KUNING adalah kode background. Kalian bisa menggatinya sesuai keinginan.

Kode yang berwarna HIJAU adalah kode garis border. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna UNGU adalah kode jarak margin. Kalian bisa menggatinya sesuai keinginan.

Kode yang berwarna CYAN adalah kode warna text. Kalian bisa menggatinya sesuai keinginan.

• Belum selesai sampai disini, sekarang cari kode <data:post.body/>.
• Letakkan kode di bawah ini tepat setelah kode <data:post.body/>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='yondafuq-Permalink'>
<h4>Penulis: Yonda Tamvan | Tentang Artikel Ini : </h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifh2uWiiM3yM5IvWF6kOpdr0P8nr6S-ntrmad7YKwdc9fa-7bvPX9QIS9XxHZv7ufO0wVjl6WL3I9UMxmtbxdlD217w2jerDimbu9OzEB51y3LysCAbE295StK9CvHuaSDw2A2q4QZnSBb/s220/untitled122.PNG'/>
Viewed Article: <script src='http://amitjain.in/pageviews.php' type='text/javascript'/>.<br/>Posting Name: <strong><a expr:href='data:post.url'><data:post.title/></a></strong>.<br/>Url:<strong><data:post.url/></strong>.<br/><b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='40' g:type='RatingPanel' g:width='200'/>
</b:if>
<div style='clear:both;'/>
</div>
</div>
</b:if>

• Kalian ganti kode yang bercetak TEBAL dengan nama atau kata-kata kalian sendiri dan kode bercerak MIRING dengan link gambar kalian.
• Terakhir tinggal kalian simpan.

Bagaimana? Berhasil? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua, Jangan lupa untuk mampir ke blog ini lagi dan klik tombol like di bawah ini.

Share :

Facebook Google+ Twitter