Secara default, tampilan " Read more » " atau " Baca Selengkap » " adalah seperti ini
Besarnya huruf ( font ) akan mengikuti besarnya font yang di setting dalam template anda, begitupun dengan warna link akan sama dengan warna link yang dipakai. Tampilan tersebut sebenarnya bisa anda kreasikan menjadi bentuk lain yang mungkin akan dianggap lebih menarik sehingga akan sedikit menambah keindahan tampilan blog anda.
Sebagai dasar pengetahuan, kode read more blogger adalah seperti ini :
<b:if cond='data:post.hasJumpLink'>Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai kreasi.
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
* Agar read more tampil di sebelah kanan
Secara default " Read more " akan tampil di sebelah kiri. Jika anda berkeinginan agar read more tampil di sebelah kanan, anda bisa menambahkan kode tambahan seperti ini :
<b:if cond='data:post.hasJumpLink'>Atau jika anda lebih suka memasang pada CSS, bisa seperti ini ;
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
Simpan ini di atas kode ]]></b:skin>
.readmore { float:right;padding: 10px 0px 5px 0px; }dan pasang ini di bagian body nya ;
<b:if cond='data:post.hasJumpLink'>* Agar Read more ditampilkan tebal
<div class='jump-link'>
<div class='readmore'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
Agar tampilan "Read more »" atau " Read more » " bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong>Read more »</strong> atau <b>Read more » </b>. Contoh :
<b:if cond='data:post.hasJumpLink'>* Agar Read more tampil plus Judul Posting
<div class='jump-link'>
<strong><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </strong>
</div>
</b:if>
Tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya bisa seperti ini :
<b:if cond='data:post.hasJumpLink'>* Agar Read more diganti dengan banner
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/> → 
<data:post.title/></a>
</div>
</b:if>
Apabila anda menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan dengan tombol atau banner, misal banner seperti ini :
<b:if cond='data:post.hasJumpLink'>Contoh nyata seperti ini :
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src='URLgambarmu' alt='read more'/></a>
</div>
</b:if>
Dan anda bisa menciptakan puluhan atau bahkan ratusan kreasi untuk tampilan read more ini agar blog anda tampil menarik.<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + "#more"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBal5HtDRbewan7RTS7DyRHnH-GIsOHxsRGZd_2pAOAXFB4RaEZEhLSEW4l3I1cJ3aG6CjN90QaTr29cN7gU7gDB_lkgdyOr2ObdDbP4CUzbvwFOaR31d4IFXcW3WIOnN8eKOTK9Yl4l4/[1].png' alt='read more'/></a></div></b:if>
Masih pusing dimana menempatkan hasil kreasi read more mu? berikut gambaran langkah-langkahnya :
1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "
<div class='post-body entry-content'>6. Silahkan ganti kode di atas dengan hasil kreasimu seperti yang di contohkan kang rohman tadi di atas.
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.
Selamat berkreasi!
Tips N Triks
- Tips & Trik Jumper | Teknik Jumper Keypad Handphone
- Blackberry Software Solution By Kenny ic3
- Tips mempertahankan baterai laptop agar bertahan lama I Battery Care | Hausgame software center
- cara menggabungkan dan memotong video
- membuat poster animasi gokil abis dengan photobie
- Pengalaman membasmi virus shortcut, W32 Ramnit
- Perbaiki Safe Mode bermasalah dengan Safe Mode Fixer
- BlackBerry 8520 Curve usb solution
- Nokia E63 E71 E72 SMPS Jumper
- Hardware pack For Nokia X6 16GB Latest Software
- Nokia x6 16gb hardware solution
- Nokia X5 Hardwere Solution One Exe
- Nokia x5
- Nokia X6 32GB solution
- Nokia C1-00 All Hardware Latest Solution Pack
- Nokia X2 Soution
- x6 Nokia ALL UseFull Hardware Repair Solution Pack
- Nokia X3 all Hardware Tested Solution
- NOKIA x6 All Solution Here (Setup File v-4)
- Nokia X5 All Hardware Latest Solution
- Nokia X7-00 charging way
- Nokia E 71 Hardware Solution
- Nokia 1616 Display
- nokiaE7-00 power key way
- Nokia C,E,N,X series All hardware solution exe
Blogger
- Kamus Nama bagus
- Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
- Merubah Lebar Template Blog
- Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
- Cara Memasang Yahoo Messenger Di Blogger
- Cara membuat browser bergetar saat klik kanan
- Cara Membuat Sitemap di Blogspot
- Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
- Cara Pasang Buku Tamu Facebook di Blog
- Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
- Mengganti Tulisan Newer Post Older Post Dengan Gambar
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Memasang Radio Online atau MP3 di Blog
- SEXY BOOKMARKS V2 FOR BLOGGER
- Show Comment Bubble at Top Right of each Blogger Posts
- Automatic Read More with Thumbnail for Blogger
- Social Bookmarking Widget for Blogger with auto scrolling function
- CARA MEMBUAT EXPLORER D-TREE...
- Cara Pasang Tag Meta Robot Blogspot
- Cara Membuat Drop Caps Otomatis di Posting Blog
- Koleksi banner blog dofollow
- Cara mengecek kecepatan Blog
- Membuat Link Terbuka Pada Halaman Baru
- Memasang Feedjit Pada Blogger
- Membuat Gradient Effect dengan CSS
Read More
- Automatic Read More with Thumbnail for Blogger
- Cara Membuat Read More Otomatis Dengan Gambar
- Mengganti Link Read More dengan Icon Gambar
- Cara Mengganti Tulisan ReadMore Dengan Image Gif
- Mengganti Link Read More dengan Icon Gambar
- Cara pasang Auto Read More terbaru
- Pasang Auto Read More di Blogger Posts
- Koleksi gambar readmore
0 komentar:
Posting Komentar