Trend Baru: Cara Membuat Read More dan Nama Author di atas Posting

Yang bisa berada di posisi atas tidak hanya blog title, header image atau para petinggi negeri dan mereka yang berkantong tebal semata. Atau bukan pula hanya para lelaki atau perempuan dewasa saja. Read more..., barang secuil yang biasanya hanya dengan pasrah menerima takdir di buatkan gubhug di bawah posting, dia bisa saja diletakkan di atas posting. Ibarat putaran roda nasib, jika dipindah ke atas mungkin dia akan merasa lebih senang karena sedikit bisa "memamerkan betapa pentingnya dia". Ya ...! Mengapa tidak?! Membuat read more di atas posting aku kira belum banyak dilakukan blogger. Berbeda dalam tampilan blog tentu akan menarik, apalagi bila yang kita lakukan sama sekali tidak akan membuat penampilan bertambah buruk. Sampeyan bisa menghilangkan/membuang read more yang sudah sekian lama bernasib mengenaskan di bawah posting, atau bisa juga tetap mempertahankannya. Jika itu yang dilakukan maka dalam blog sampeyan akan mempunyai dua buah read more. Yang satu "nangkring di atas posting" (sambil plempas-plempus mengepulkan asap rokok!) dan yang satunya tetap dengan setia akan menunggu datangnya kentut di bawah posting! He .... he .... Pasti asyik, antik, menarik dan pokoknya .... ehmmmm coba dulu saja, dah!

Ehh ... eh .... kelupaan lagi! Uh...! Dasar otak klo sudah "terjangkit virus kepikunan". Ah ... apapun pasti ada yang terlewat. Ini, lhoh ... Di depan read more yang di atas posting itu masih ada embel-embelnya! Sebuah tampilan menarik berupa nama author/blogger. Jadi pada intinya di atas posting (artikel) yang kta buat, di sebelah kiri ditampilkan nama author dan disebelah kanan akan bertengger si read more dengan penuh keanggunan! Heh ... heh ... heh ... pasti cantik, ya?! Mo coba, nggak? Pasti penasaran, khan?! Heh ... heh.... heh .... padahal kali ini nggak ada demo, nih! Biar saja, dah! Biar sampeyan pada penasaran sekalian! Heh ... heh ... heh ...! Tuh ... biar nggak ada demo tapi sudah aku siapkan sebuah screenshot. Yah .... daripada nggak ada sama sekali.

O... ya ..., kali ini kita nggak akan buat pakai kode CSS segala. Kita buat yang simple-simple saja. Kita hanya akan pakai sederet xHTML yang bisa langsung di simpan di bagian body. Sederhana, cepat, gampang dan hasilnya... Hmmmmm. Tapi tidak menutup kemungkinan, lhoh ... Jika sampeyan mau, buat saja menggunakan kode CSS, kemudian padukan dengan CSS3. Pasti akan jauh lebih josh!

Buat Read More di atas Posting plus read more lama tetap dipakai

• Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".
• Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
• Design/Rancangan : Cari dan klik "Edit HTML".
• Edit HTML-1 : KLIK "Download Template Lengkap" untuk melakukan "back-up" templates. Tunggu beberapa saat kemudian simpan file template di folder PC.
• KLIK "Expand Widget Templates".
• Tetap di Edit HTMl, kemudian Cari kode <div class='post-body entry-content'>. Gunakan Ctrl+F untuk memudahkan pencarian kode!
• Copy-Paste : Copy dan ganti kode di atas dengan kode HTMl di bawah.
• SAVE Templates/Simpan Template : KLIK SAVE Templates dan lanjutkan dengan membuat posting menggunakan read more.
• Buka hasilnya di halaman utama untuk mengetahui tampilan read more baru sampeyan!

<div class='post-body entry-content'>

<div style='border-bottom:1px dotted #444;margin-bottom:10px;padding:1px 0;height:25px;text-shadow:1px 1px 1px #000;'>
<span style='font-style:italic;color:yellow;'>posted by: <span style='color:blue;'>gubhug reyot</span></span>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link' style='float:right;'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title' style='text-decoration:none;'>
<span style='font-family:Cataneo BT;font-weight:normal;font-size:16px;padding-right:20px; background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/blueloop.gif) right center no-repeat;'>Read More ....</span>
<!-- <data:post.jumpText/> -->
                </a>
      </div>
    </b:if>
</div>
<div style='clear:both;'/>

Buat Read More di atas Posting - Read More Lama di hilangkan

Caranya sama dengan cara di atas. Kode HTML dan penempatan kode juga sama, tetapi tolong cari dan hapus kode HTML yang seperti terlihat di bawah ini! Kode di bawah adalah kode read more lama yang selama ini di gunakan.

<b:if cond='data:post.hasJumpLink'>
     <div class='jump-link'>
         <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
             <data:post.jumpText/>
         </a>
     </div>
</b:if>

Untuk memudahkan dalam mencari kode di atas, cari dulu satu kode misalnya :

<data:post.jumpText/>

Setelah ditemukan maka di atas dan di bawahnya akan terlihat seluruh kode yang dimaksud di atas.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «