Monday, November 11, 2013

Browse Manual » Wiring » » » » » » » » » » Membuat Keterangan dan Foto Author di Bawah Postingan Blog

Membuat Keterangan dan Foto Author di Bawah Postingan Blog

Image


Author secara harfiah diartikan sebagai pengarang. Pengarang dalam hal ini adalah pemilik blog, atau lebih tepatnya penulis artikel. Adanya author di bawah postingan memudahkan pembaca untuk mengetahui siapa pengarang dari artikel yang dibacanya.

Sebenarnya di blogger sudah disediakan sebuah format untuk menunjukan pengarang, lokasi, waktu termasuk juga widget untuk membagi (share) artikel tersebut ke beberapa media social. Akan tetapi format yang disediakan oleh blogger terlalu sederhana dan kurang menarik. Bagi beberapa blogger, form pengarang ini perlu didesain lebih menarik agar memberikan kesan positif bagi pembaca artikel. 

Namun demikian ada juga beberapa blogger yang beranggapan bahwa pemasangan author atau penulis ini sangat penting dan bahakan wajib, apalgi dengan gencarnya google memprogramkan hak cipta kepemilikan blog. Sehingga ada tanggung jawab yang jelas antara artikel dan penulisnya.

Namun apapun alasannya, tentu menjadi nilai lebih tersendiri dengan adanya keterangan author di bagian bawah postingan, karena akan memberikan dampak pada kepercayaan pembaca terhadap isi tulisan.

Baiklah, tidak perlu berlama-lama menjelaskan tentang apa itu author. Karena saya yakin setiap orang punya pemahaman dan pemikirannya masing-masing.

Langsung saja ke TKP

  • Masuk ke Blog  anda
  • Masuk ke Templete
  • Edit HTML (jangan lupa centang Expand Widget Templete)
  • Temukan (Ctrl + F) tag <div class=post-footer>
  • Kemudian letakan script berikut di bawah tag <div class=post-footer> 


<!-- Kotak Admin -->
<b:if cond=data:blog.pageType == &quot;item&quot;>
     <div class=admin-tulisan>
          <h4>Penulis: <a expr:href=data:blog.homepageUrl><data:post.author/></a> Lokasi: Jalan Narakusuma, Denpasar</h4>
          <div class=kontainer>
               <img src= http://i1339.photobucket.com/albums/o719/nym_artopraph/Me/NyomanAS6copy_zps2cf7e148.jpg/>
Artikel <a expr:href=data:post.url><data:post.title/></a>, ditulis oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini memberikan manfaat bagi anda. <data:post.author/> hanya seseorang yang suka belajar dengan moto sharing is carring.
               <div style=clear:both;/>
          </div>
     </div>
</b:if>
<!-- Akhir Kotak Admin -->


  • Jangan lupa mengganti URL foto di atas (huruf yang dicetak tebal) dengan url foto yang akan anda gunakan.
  • Anda juga bisa mengganti ulasan di atas sesuai keinginan anda
  • Setelah itu temukan (Ctrl + F)  tag ]]></b:skin>
  • Kemudian kode berikut di atas tag ]]></b:skin>


.admin-tulisan {
  display:block;
  width:98%;
  background:#CFE2E0;
  border:2px solid #fff;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  padding:0;
  margin:30px auto 10px auto;
  font:normal 11px Arial, Sans-Serif;
  color:#222;
}

.admin-tulisan .kontainer {padding:5px;}

.admin-tulisan h4 {
  background:#8A9C04;
  border:none;
  border-bottom:1px solid #699019;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  font:bold 11px Arial,Sans-Serif;
  padding:5px 10px;
  margin:0 0 0 0;
  display:block;
}

.admin-tulisan h4 a {color:#FEEA83;}

.admin-tulisan img {
  width:70px;
  height:70px;
  margin:0 10px 0 0;
  float:left;
  border:1px solid #954B02;
  padding:4px;
  background:#C36702;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}


  • Kemudian save dan lihat hasilnya !!!
Demikianlah tips bagaimana menambahkan identitas author beserta foto dan keterangannya. Semoga tips ini bermanfaat buat anda.

Salam J

Posted by at
Labels: , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)