Hack Auto Read More

Tutorial hari ni aku nak share dengan u all, macam mana nak hack code "Auto Read More" di template yang u all guna.

Apa Itu Auto Read More ?

Auto Read More adalah satu fungsi untuk memendekkan paparan post dibahagian "Homepage Blog" dan ianya bertujuan untuk mengurangkan loading blog.

Selain dari tu...auto read more juga berfungsi untuk mengemaskan penampilan blog serta penggunaannya mampu meningkatkan "Page View" sesebuah blog.

Code Auto Read More:

<style>
.postmeta{
text-transform:uppercase;position:relative;padding:5px 0px;background:#00b4ff;}
.comm{
color:#fff;right:10px;padding:3px 0px 2px 5px;font-size:10px;text-transform:uppercase;letter-spacing: 1px;
}
.comm a:link,
.comm a:visited {color:#fff;}
.comm a:hover{color:#000;}
.read{color:#fff;right:10px;padding:4px 0px 2px 5px;font-size:10px;text-transform:uppercase;position:absolute;letter-spacing: 1px;}
.read a:link,
.read a:visited {color:#fff;}
.read a:hover{color:#000;}
</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='postmeta'>
<span class='read'><a expr:href='data:post.url'> Read More </a></span>
<span class='comm'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> ~ comments</b:if></a></b:if></span>
</div>
</b:if>

Okay code kat atas ni adalah code yang aku gunakan untuk "Auto Read More" di dalam blog aku ni. Benda ni baru jer aku pasang semalam. Code ni aku ambil dari template lain dan aku cuba masukkan dalam blog aku ni. Alhamdulillah ianya menjadi dan aku suka.

Customize:

Kalau u all nak tukar background tu mengikut warna tema blog u all. Just tukar code css yang ditandakan dengan warna merah tu dengan mana-mana code warna yang u all berkenan. Default warna background tersebut adalah biru.
CSS Code yang ditandakan dengan warna pink tu pula adalah code warna bila anda menghalakan mouse ke arah perkataan "Read More" dan "Comments Count". Default warna tersebut adalah hitam.
Ayat "Read More" tu u all bolehlah tukar dengan apa-apa ayat yang u all nak.
Okay..kalau u all nak cantikkan lagi penampilan auto read more u all. Just tambah CSS Code border dan shadow, termasuklah border radius sekali.

Tutorial ni sebenarnya khas buat pengguna template "Thesis For Blogspot (TFB)". Apa-apapun bagi pengguna template lain yang sudah sedia ada auto read more berkemungkinan boleh juga menggunakan tutorial ni.

Langkah seterusnya adalah memasukkan code diatas untuk menggantikan code yang sedia ada. Apa yang u all perlu buat hanyalah mencari code dibawah ini dan gantikan dengan code diatas.

<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>

Bagi pengguna selain dari TFB. Anda bolehlah mencari code seperti diatas dengan menggunakan keyword "jump-link". Kebiasaannya code tersebut lebih kurang sama jer, kalau ada beza pun sedikit sahaja.

Please take note: Tutorial ni bukan untuk pengguna jump-link / Read More yang dimasukkan secara manual di bahagian "Post Editor". Tutorial ini adalah untuk pengguna template yang sudah tersedia pasang "Auto Read More".

Pages