Cara Membuat Kotak Admin Berisi Judul Nge-Link ke Postingan

Cara Membuat Kotak Admin Berisi Judul Nge-Link ke Postingan - Salah satu unsur SEO adalah adanya kata kunci terbidik yang nge-link ke postingan itu sendiri. Nah, tulisan ini membeber rahasia membuat internal linking di bawah artikel, di mana judul artikel muncul di sana secara otomatis disertai link ke artikel itu sendiri. Dengan menempuh cara ini, berarti Anda juga telah belajar Cara Menyisipkan Kotak Profil Penulis Di bawah Artikel.

Tampilan Kotak Admin Berisi Judul Nge-Link ke Postingan yang akan dishare di sini seperti tampak di bawah artikel (atau gambar di bawah) ini. Materi dan redaksinya bisa Anda rubah sendiri sesuai keinginan, dilengkapi dengan keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah artikel.

Nah, buat sobat yang ingin mencoba menampilkan profil atau biografi singkat tentang diri sobat, maka sobat bisa mengikuti langkah berikut ini.

Pertama-tama, masuklah ke halaman Design, pilih edit HTML template sobat, kemudian centang bagian Expand Template Widget agar seluruh elemen pembangun posting tampil.


Temukan kode ini:

<div class='post-footer'>


TIPS: Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencarian.


Salin kode ini, kemudian letakkan tepat di atas kode <div class='post-footer'> :

<!-- Profil Admin -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='admin-penulis'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><b><data:post.author/></b></a></h4>

<div class='kontainer'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8iE88VZFCOpF8ndpf5Jczk4ZUsIBpSGqQ0QIGUBffyQI7WWWyUdKOT3zEAsg7V3ltsm9WduaCc3pDwUdVT57cC5KMwCx0DyTqiSUGIC4UXMlZPWj_dF4s57jATlLQMOSr27_tifqlWQtU/s1600/favicon.png'/>

Anda baru saja membaca <a expr:href='data:post.url'><i><data:post.title/></i></a> yang ini ditulis oleh <b><data:post.author/></b> pada hari <i><data:post.dateHeader/></i>. Jika dirasa artikel ini bermanfaat, jangan lupa menyebarkannya kepada teman-teman. Terima kasih telah berkunjung. Dengan senang hati, kami menerima masukan dan saran, khususnya seputar <b><data:post.title/></b>.

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://bismillahyaallah.blogspot.com/2012/05/cara-membuat-kotak-admin-berisi-judul.html' target='_blank'>:: Get this widget ! ::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Profil Admin -->

Silahkan sobat ganti kode yang berwarna merah dengan image profil sobat.

Kemudian cari lagi kode ]]></b:skin> pada template Anda. Kemudian copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat bisa juga meletakkan kode CSS ini tepat dibawah kode <data:post.body/>.

.admin-penulis {

   display:block;

   width:auto;

   background:#defdef;

   padding:0;

   margin:30px 0 10px 0;

   font:normal 12px Arial, Sans-Serif;

   color:#222;

   border:2px solid #fff;

   box-shadow:0 1px 3px #000;

   -moz-box-shadow:0 1px 3px #000;

   -webkit-box-shadow:0 1px 3px #000;

   }

.admin-penulis .kontainer {

   padding:5px;

   }

.admin-penulis h4 {

   background:#699019;

   border:none;

   border-bottom:1px solid #699019;

   color:#fff;

   text-transform:normal;

   text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);

   font:bold 12px Arial,Sans-Serif;

   padding:5px 10px;

   margin:0 0 0 0;

   display:block;

   }

.admin-penulis h4 a {

   color:#FEEA83;

   }


.admin-penulis img {

   width:70px;

   height:70px;

   margin:0 10px 0 0;

   float:left;

   border:1px solid #954B02;

   padding:2px;

   background:#ffffff;

   box-shadow:none;

   -moz-box-shadow:none;

   -webkit-box-shadow:none;

   }

Pastikan semua karakter ter-copy semua. Lalu klik simpan template. Agar sesuai dengan selera Anda, silakan berkreasi sendiri. Semoga tips singkat tentang Cara Membuat Kotak Admin Berisi Judul Nge-Link ke Postingan ini bermanfaat bagi Anda.