Monday, 18 March 2013

Cara Membuat Kotak Permalink Dengan Foto Di bawah Postingan

Cara Membuat Kotak Permalink Dengan Foto Di bawah PostinganMungkin 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

Permalink Jona Rendra

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://lh5.googleusercontent.com/-ZBPCue86bWA/UOQMUD_Iv8I/AAAAAAAAA6g/W_lApECJP5k/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

KATEGORI:
arrow_back
arrow_forward

17 komentar

Semoga menang kontes SEO nya gan.
mampir jg di blog pemula.
(blogwalking SitusTopInfo)

kontes seo?
ya makasih atas dukungannya -_-

terima kasih triknya :)
bermanfaat sekali ini :)

terimakasih atas tutorialnya sob

Bagus tapi ada satu pertanyaan saya bagaimana caranya membuat kode seperti itu dari awal tanpa mengkopi punya Anda ini? Maksud saya apa alamat atau aplikasi membuat kotak permalink itu tanpa mengkopi alias buatan kita sendiri?

aplikasi pembuat permalink? gak ada aplikasinya. Ini langsung edit HTML

mksh atas tutorialnya salam knl saja

iya, sama sama
salam kenal juga

makasih gan tutorialnyaa..
kunjungi juga lapak ane gan..
http://wahyudin-21.blogspot.com/
salam blogger..

owh iya dong :D
makasih sudah berkomentar

ya, sama sama
makasih juga sudah berkunjung

ya, sama sama
sudah saya kunjungi balik lapak nya :D

Jujur saja bagi saya permalink itu bisa menambah keindahan blog. Jadi, permalink itu sangat penting kita pasang di blog kita masing-masing.

iya, saya setuju banget atas pendapatnya
selain tambah menarik, blog juga tambah seo

terima kasih banyak gan,bermanfaat :)

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon