Sebelumnya kita sudah pernah membahas tentang cara membuat blogrol versi Text Area. Bagi anda yang belum mengetahui informasinya, anda bisa lihat di sini. Udah di baca belum..?? Udah aja yah.. :D
Sekarang Lanjut... Untuk selanjutnya saya akan membahas tentang cara membuat blogrol versi MARQUE. Kira-kira apa kelebihan blogrol versi marque? Simak baik-baik informasinya:
BLOGROL VERSI MARQUE
Secara garis besar fungsinya sama, yaitu untuk menampung Link-link yang dapat menghemat halaman blog kita agar halaman blog kita terlihat rapih dan tertata dengan baik. Ada sedikit perbedaan antara Blogrol Versi Text Area dengan Blogrol Versi Marque ini. Jika di dalam blogrol text area terdapat scrol bar yang bisa ditarik kebawah/keatas untuk melihat link/judul yang tersedia di dalam blog kita. Sedangkan dalam Blogrol Versi Marque tidak menggunakan scrol Bar, tetapi Link/judul Postingnya dapat berjalan/bergerak keatas,kebawah,ke kanan, dan kekiri secara otomatis. Hal ini menjadi kelebihan tersendiri untuk Blogrol Versi Marque tersebut.
Berikut Cara membuatnya :
1. Anda loggin ke blogger, kemudian masuk dasbor.
2. pilih Tata letak/page element.
3. Add gadget-->"HTML/Java script".
4. Masukkan code dibawah ini kedalamnya :
<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >
<a href="http://inprest3city.blogspot.com/2012/06/Bisnis.html" >razoe3x</a> <br/>
<a href="http://inprest3city.blogspot.com/2012/06/Bisnis.html" >razoe3x</a> <br/>
<a href="http://inprest3city.blogspot.com/2012/06/Bisnis.html" >razoe3x</a> <br/>
</marquee
Code "up" (Linknya berjalan keatas). Anda dapat menggantinya dengan "down,right/left". Tetap jangan lupa, jika ingin menempatkan linknya berjalan sejajar maka code <br/> harus dihilangkan.
Code http://inprest3city.blogspot.com/2012/06/Bisnis.html Ganti dengan link anda.
Code razoe3x adalah judul yang akan ditampilkan.
Dan jika anda ingin memasukkan lebih banyak link lagi, anda tinggal copy code yang terdapat link dan judulnya kemudian ganti dengan link dan judul baru anda.
Simpan pekerjaan anda, dan selesai.
READ MORE......
Berganti hari, berganti minggu, berganti bulan, sampai berganti tahun..
Apa maksudnya yah..?? Hi..hii..saya pun bingung.
Gini aja deh..Seiring berjalannya waktu, maka makin banyak postingan di dalam blog kita. Halaman blog menjadi sesak dan kurang rapih. Kadang kita bingung melihat tampilan blog yang penuh dan tidak tertata dengan baik. Dari itu saya akan berbagi untuk mengatasi solusinya. Saya menyarankan anda memasang blogrol, karena dapat mengurangi kepadatan halaman blog anda. Selain itu blogrol juga berguna bagi pengunjung agar mereka tidak kesulitan dalam mencari sebuah artikel.
Sebenarnya ada 2 jenis blogrol, yaitu Blogrol versi Text Area dan Blogrol versi Marque. Disini saya akan mengulas tentang cara membuat blogrol versi Text area. Blogrol versi text area memiliki sebuah scrol bar yang dapat ditarik keatas/kebawah dalam mencari sebuah artikel. Berikut cara membuatnya :
1. Loggin ke blogger. kemudian masuk dasbor.
2. Pilih Tata Letak/Page Element.
3. Add gadget -->"HTML/Java Script".
4. Masukan code dbawah ini ke dalam kotak tersebut.
<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">
<a href="http://inprest3city.blogspot.com/2012/06/Bisnis.html" >razoe3x</a> <br/>
<a href="http://inprest3city.blogspot.com/2012/06/Bisnis.html" >razoe3x</a> <br/>
<a href="http://inprest3city.blogspot.com/2012/06/Bisnis.html" >razoe3x</a> <br/>
<a href="........
</div>
Code Width dan Height adalah ukuran kotak blogrol, anda bisa menggantinya sesuai dengan ukuran yang anda inginkan. Code yang berwarna biru adalah Link anda dan judul yang akan ditampilkan.
Jika ingin membuat linknya tampak sejajar, maka hilangkan code <br/>.
Simpan dan Lihat hasilnya.
READ MORE......
Sedikit tips lagi untuk anda dalam pembuatan readmore. Kebanyakan yang dpake oleh blogger adalah readmore versi manual. seperti yang sudah saya bahas dalam "cara membuat readmore versi manual". nah begtulah contohnya. Dan pada kesempatan kali ini saya mengajak anda untuk mengenal dan membuat readmore versi otomatis. "Lho kok bisa.? kaya mobil aja ada manual dan ada yang otomatis"..hihihi..:D. penasaran? "yuk ikuti saya...
Bedanya yaitu dalam Readmore versi manual jka kita ingin membaca posting selengkapnya(klik Readmore), kita harus menunggu loading terlebih dahulu sampai halaman tersebut terbuka (Capwe Duueeehh.:D). Sedangkan Readmore versi otomatis kita tidak perlu menunggu loading untuk membuka sebuah halaman seluruhnya(klik Readmore), karena secara otomatis seluruh postingannya akan terbuka kebawah. Sudah mengerti kah anda..? sudah kan?? bagusss..baguss...
Lanjut...
Untuk membuatnya, ikuti langkah berikut dari awal sampai akhir..
1. Awal kisah anda Loggin dulu ke blogger, kemudian pergi ke Dasbor.
2. Setelah itu anda pilih Layot/Template-->> "Edit HTML".
3. Jangan Lupa Backup template anda terlebih dahulu.
4. Centang tulisan "Expand Template Widget" yang berada diatas.
5. Copy code berikut :
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>
Kemudian letakkan diatas code </head>.
untuk mencari code </head> . tekan f3 pada keyboard, letakkan teks tersebut ke dalam kotak search.
jika sudah, selanjutnya anda cari code :
<div class='post-header-line-1'/>
Lihat dibawah code tersebut, ada code begini (<div class='post-body entry-content'>).
Anda ganti dengan code berikut :
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
Sudah kan..??.. Kemudian anda lihat lagi dibawahnya ada code (<p><data:post.body/></p>). Tambahkan code berikut dan letakkan dibawah code tersebut.
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
6. Lihat Tulisan "Selengkapnya" dan "Ringkasan". anda bisa ganti tulisan tersebut dengan tulisan yang anda inginkan.
7. Kemudian simpan template.
8. Setelah itu anda pilih Setting-->"Pos dan komentar".
9. Masukan code berikut di dalam kotak Template Entri :
<span id="fullpost">
</span>
10.Simpan Settng.
Catatan : jika ingin membuat postingan, anda pilih HTML. lihat di pojok kiri atas. Untuk bagian awal postingan anda letakkan sebelum code <span id="fullpost"> . Dan untuk isi postng selengkapnya anda letakkan di antara code <span id="fullpost"> dan code </span>.
Selamat Berjuang ..:
READ MORE......
Readmore/Baca selengkapnya dapat digunakan untuk menghemat ruang posting anda. Jika postingan anda terlalu panjang maka anda perlu memasang readmore tersebut agar postingan anda tidak memanjang kebawah. Contohnya bisa anda dilihat readmore di dalam postingan saya. Berikut cara membuatnya :
- Login ke blogger, terus masuk dasbor.
- kemudian anda pilih Template -->"Edit HTML".
- Centang "Expand Template Widget"
- setelah itu anda cari code <div class='post-body'>
.- jika sudah ketemu, anda ganti code-code tersebut, dari mulai code <b:if cond=...sampai code </b:if>. Anda ganti dengan code dibawah ini.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>
Kata "Readmore" bisa anda ganti dengan kata lain. Misal "Baca Selengkapnya".
Kemudian simpan/save.
Setelah itu anda pilh Setting-->"Pos dan komentar". Didalam kotak "Template Entri" Masukan code di bawah ini:
<span class="fullpost">
</span>
Code tersebut gunanya untuk membuat kotak Readmore.
Catatan : Pada tampilan awal posting/text awal ditulis sebelum code <span class="fullpost">. Kemudian untuk posting selengkapnya anda tulis di celah celah antara code <span class="fullpost"> . ..dan code </span>.
Sampai disini dan terima kasih..:D
READ MORE......
