SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Berkreasi pada Read more agar Auto Hidden

Berbicara masalah Blog / Web sudah pasti tidak akan terlepas dengan yang namanya Penggalan Artikel yang lazim disebut  Read more / Baca selengkapnya atau nama lainnya yang serumpun, dan letaknya ada di kiri maupun  dikanan diatas footer blog yang tujuannya untuk memotong / memenggal tampilan pada single post :#
Sekarang saya akan mencoba berbagi dengan kawan cara memindahkan / membuat Read more / Baca selengkapnya yang berada di kiri menjadi di kanan Blog :
Tahap Pertama :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor - Design/Perancang Template pilih Edit HTML
  • Copas kode berikut diatas ]]></b:skin> 
.jump-link a{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;float:right;padding:2px 12px; border:none; background:#236c95; color:#FFF;font-style: normal;border:1px solid #0FF;margin-top:10px;text-decoration:none;}
.more a:hover, .jump-link a:hover{background:#000;color:#FF0;border:1px solid #F00;text-decoration:none; }
  • Simpan Template kawan dan lihat hasilnya [seperti image diatas]
  • Read more tersebut adalah berupa text, 
  • Kawan bisa merubah warna-warnanya sesuai keinginan 

Tahap kedua :
Sesuai dengan Judul Artikel saya ini, sekarang mari bersama-sama kita Berkreasi pada Read more agar tampil Auto Hidden [akan kelihatan jika mouse kita taruh pada Post Artikel :z  dan akan hilang bila mouse kita geser kepinggir] Bagaimana, apa kawan tertarik :O
Caranya :

  • Beri tanda centang / cek pada radio disamping Expand Template Widget
  • Copas Kode berikut diatas ]]></b:skin> 
.post .hidebego {
    display:none;
}
.post:hover .hidebego {
    display:inline;
    float:right;
}
  • Selanjutnya scroll ke bawah dan Copas Kode berikut dibawah  <data:post.body/> atau diatas <b:if cond='data:post.hasJumpLink'>
<div class='hidebego'> 

  • Karena struktur template berbeda-beda, dan untuk menghindari kesalahan, simplenya copas Kode berikut tepat diatas   <b:if cond='data:post.hasJumpLink'> maka selengkapnya akan menjadi seperti berikut :
<div class='hidebego'>
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>     
      </div>
    </b:if>
    </div>

  • Simpan Template kawan dan selesai sudah pekerjaan kita untuk ber-Kreasi pada Read more 


13 komentar pada “Berkreasi pada Read more agar Auto Hidden”

  1. ampuh gak nih sob? saya udah sering kecewa sama trik seperti ini.
    ampuh gak nih sob? saya udah sering kecewa sama trik seperti ini.

    BalasHapus
  2. tips nya bagus mas ... sekalian ijin numpang backlink yak .
    nb:mudah2an dofollow

    trims

    BalasHapus
  3. maksudnya trik ini bener2 berhasil gak ya.

    maksudnya trik ini bener2 berhasil gak ya.

    BalasHapus
  4. @Said Arsyad semua artikel di blog ini sudah saya uji coba dan berhasil :z

    BalasHapus
  5. wih makin mantep nih,saya cobayah kang nanti kalau ada salah saya balik lagi soalnya beda di template saya :y

    BalasHapus
  6. mantap gan dicoba dan berhasil :@

    BalasHapus
  7. Pada templete blog saya tutorial ini tidak bisa berfungsi kawan

    BalasHapus
  8. @irwan efendi setelah saya cek blog kawan, bisa langsung pakai ke tahap kedua dan cari <div class="readmore-wrap">

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger