Blogroll

Juni 16, 2012

Membuat Readmore Versi Otomatis

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

Membuat Readmore Versi Manual

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

Memasang Animasi Dipojok

Apaan sih ini..?? Pada bingung kan?..:D
Harap tenang saudara-saudara.. Pertanyaan anda akan saya jawab. Sebelumnya coba anda lihat ke bawah tepatnya sebelah pojok kiri blog saya. Apa yang anda lihat.? udah ada yang bisa nebak kan.? nah itulah yang saya maksud. Sebuah animasi bergerak yang bisa anda pasang di dalam blog anda. sebenarnya fungsi dari animasi tersebut hanya untuk hiasan blog saja agar tampilan blog anda lebih menarik. Anda bisa menggantinya dengan image, logo, atau lainnya. Animasi ini terdapat keunikan tersendiri. ketika kita menarik scrool bar keatas/kebawah, animasi tersebut tetap berada ditempatnya. Cara membuatnya cukup mudah. Anda hanya perlu mengikuti langkah-langkah berikut.

Langsung Menuju TKP....

1. Loggin ke blogger, kemudian masuk dasbor.
2. Pilih Template-->'Edit HTML"
3. Cari code ]]></b:skin>
4. Copy code dibawah ini kemudian letakan diatasnya.

#trik_pojok {
position:fixed;_position:absolute;
bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }



Code "bottom" dan "left" adalah posisi animasi/image. Jika anda ingin menempatkan animasi/image tersebut di pojok kanan bawah, maka ganti code "left" menjadi "right". Dan jika anda ingin animasi/imagenya berada dipojok atas, anda ganti code "bottom" menjadi "up".

Pekerjaan anda belum selesai..

5. Selanjutnya anda cari code </body>. . Kemudian anda copy code dibawah ini dan letakkan sebelum code </body>.

<div id="trik_pojok">
<a href="http://inprest3city.blogspot.com">
<img src="http://http://razoe3x.com/images/soniclari.gif" border="0" /></a>
</div>


6. Code http://inprest3city.blogspot.com diganti dengan alamat blog anda.
7. Code http://http://razoe3x.com/images/soniclari.gif ganti dengan URL gambar anda.

Catatan : jka anda ingin mengganti animasi/image dengan widget-widget lainnya, anda tinggal copy script widget anda kemudian ganti URL tersebut dengan code Script anda.

8. Simpan dan selesai.

Selamat Berkreasi..!

READ MORE......
inprest3city.blogspot.com. Diberdayakan oleh Blogger.
 

Home | Blogging Tips | Blogspot HTML | Make Money | Payment | PTC Review

RaZoe3x © Template Design by RaZoe3x | Publisher : inprest3city