Cara Membuat Kotak Permalink Dengan Foto Di bawah Postingan Cara Membuat Kotak Permalink Dengan Foto Di bawah Postingan

Cara Membuat Kotak Permalink Dengan Foto Di bawah Postingan. Mungkin beberapa dari anda ada yang belum mengetahui apa itu permalink. Ada baiknya saya menjelaskan apa itu permalink terlebih dahulu. Permalink merupakan kode HTML yang bisa membentuk sebuah link jika ditempatkan di kotak HTML. 

Kotak permalink yang akan saya berikan kali ini adalah kotak permalink yang tidak hanya berupa "kotak dan kode HTML" melainkan saya menambahkan beberapa CSS untuk mempercantik tampilannya. Misalkan, saya menambahkan Foto dan Kalimat yang berpesan untuk orang yang copy-paste agar memberikan backlink dengan mengcopy-paste kode HTML di kotak permalink.

Berikut ini tampilan kotak permalink saya yang berisi foto dan kalimat - kalimat

Mungkin cukup gambaran dari permalink yang saya sudah jelaskan diatas. Sekarang kita lanjut dengan

Cara Membuat Kotak Permalink Dengan Foto Dibawah Postingan

1. Login dulu ke akun blogger anda lalu masuk ke menu Template > Edit HTML
2. Klik / centang kotak kecil expand template widget
3. Cari kode ]]></b:skin>
 bisa dengan menggunakan CTRL + F
4. Copy kode dibawah ini lalu pastekan diatas kode ]]></b:skin>

.jonapermalink{ display:block; width:auto; background:#fff; border:2px solid#99FF9B;
    box-shadow:0 1px 3px #99FF9B -moz-box-shadow:0 1px 3px #99FF9B -webkit-box-shadow:0 1px 3px #99FF9B;
    padding:0;margin:30px 0 10px 0; font:normal 12px Arial, Sans-Serif;color: #000;}
.jonapermalink .kontainer{padding:5px;}
.jonapermalink h4{background:#99FF9B;border:none;border-bottom:1px solid #;color:#000; text-transform:normal; text-  box-shadow:0 1px 3px #99FF9B -moz-box-shadow:0 1px 3px#99FF9B;-webkit-box-shadow:0 1px 3px #99FF9B; font:bold 12px Arial,Sans-Serif;padding:5px 10px; margin:0 0 0 0; display:block; }
.jonapermalink h4 a{color:#000;}
.jonapermalink img{width:110px;height:110px; margin:0 10px 0 0; float:left; border:1px solid #99FF9B;padding:2px; background:#99FF9B;   box-shadow:0 1px 3px #4eabff;-moz-box-shadow:0 1px 3px #00EE23;-webkit-box-shadow:0 1px 3px #99FF9B;}

5. Cari lagi kode  <data:post.body/> menggunakan F3 (mungkin anda akan menemukan beberapa kode tersebut, agar berhasil, perhatikan kode yang kedua)
6. Copy kode dibawah ini lalu pastekan di bawah kode <data:post.body/>

<!-- jonarendra.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='admin-tulisan'><h4>Ditulis Oleh : <b><data:post.author/></b> ~ jonarendra.blogspot.com</h4><div class='kontainer'><img alt='Jona Rendra' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIp4SwawFL2EmynI8ytsiRTs436Dtfzj2ppvet9UdyobxdUqTi5FlEg5fh33ry5X2PgC7pRXJdX0FigI5YOn2IgP-i_-bu3EoFkvlP6MeBGYXOSGQhsE_UPkURyVK5ZUCQ48ZR0XQjgpw/s200-c/26940_101708753199133_3717238_n.jpg'/>
Anda sedang membaca postingan saya yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Jika anda menyukai artikel saya, anda bisa menyebarluaskannya tetapi dengan disertakannya link yang sesuai dengan postingan tersebut sebagai sumbernya
<textarea cols='42' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea><br/><b>Hargailah Karya Tulis Orang Lain</b>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://jonarendra.blogspot.com/' target='_blank'>:: jonarendra.blogspot.com ::</a></span></p>
<div style='clear:both;'/></div></div></b:if><!-- jonarendra.blogspot.com -->

Keterangan :

• Text yang bercetak tebal adalah URL foto atau gambar yang akan ditampilkan. Bisa anda ganti dengan URL gambar anda (kalau tidak diganti nanti ada foto saya)
• Kalimat bisa anda ganti dengan kata kata yang anda ingin tampilkan di kotak permalink
• Untuk kalimat jonarendra.blogspot.com dan Jona Rendra, anda ganti saja

7. Klik Simpan Template

Bagaimana? apakah anda sudah berhasil memasang kotak permalink yang menarik dengan kalimat dan gambar? Sekian dulu postingan Jona Rendra yang berjudul Cara Membuat Kotak Permalink Dengan Kalimat Dan Foto Dibawah Postingan, semoga bermanfaat untuk anda dan jika ada pertanyaan silahkan poskan komentar