Membuat Read More Otomatis

Setelah belajar membuat read more secara manual dengan menggunakan peralatan yang sudah disediakan oleh pihak Blogger, sekarang kita belajar membuat Read More secara otomatis dengan mengutak-atik CSS.
Ilmu ini saya dapatkan dari blog teman saya Wan Bloggers.
Langkah-langkah dalam membuat Read More secara otomatis adalah sebagai berikut :

• login ke akun blogger terlebih dahulu
• bagi anda yang masih menggunakan pengeditan read more secara manual, selakan di hilangkan terlebih dahulu
• kemudian masuk ke template
• lalu edit HTML
• centang pada kotan Expand Template Widget
• cari kode </head> , untuk mempermudah mencarinya bisa menggunakan CTRL+F atau F3
• kemudian letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script>  

• sebentar, ini belum selesai lho.. masih pada Edit HTML cari kode <data:post.body/>

• kemudian ganti kode <data:post.body/> dengan semua kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'> <b>Read more</b> »»   </a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if>

• nah sekarang tinggal di save.

• selesai, silakan dicek blog anda sekarang sudah menggunakan read more otomatis.

 Selamat mencoba...

read more

Membuat Read More

Terkadang kita bosan dan tidak begitu cocok melihat tampilan blog yang menampilkan semua postingannya tanpa ada yang terpotong. Dan itupun tidak hanya satu postingan saja yang ditampilkan pada beranda blog. Selain itu tampilan beranda blog menjadi panjang.

Untuk mengatasi hal tersebut bisa digunakan Read More yang sudah disediakan oleh Blogger pada lembar pengetikan posting. Letaknya di kanan atas lembar pengetikan blogger. Gambar iconnya seperti selembar kertas yang terkoyak menjadi dua pada bagian tengahnya.

Cara penggunaannya juga sangatlah mudah.

• letakkan cursor pada bagian teks yang akan dipotong,

• kemudian klik pada icon Read More tadi,

• maka akan muncul tanda seperti dibawah ini

•  klik tombol Publish

Seperti itulah cara membuat Read More di postingan blog dengan menggunakan layanan yang sudah disediakan oleh pihak Blogger.

Selamat mencoba, happy blogging.

read more

Membuat Buku Tamu Unik

Sekarang ini masih ramai digunakan dan diminati oleh para bloggers untuk menampikan buku tamu tersebut dapat disembunyikan dan dikuka dengan mengeklik tombol yang disediakan. Seperti milik saya yang bisa teman-teman lihat dengan mengeklik tombol Buku Tamu di sisi kanan halaman blog.

Selain hemat tempat, cara ini juga menambah ganteng/cantik blog teman-teman lo.. Mau mencobanya? Silakan ikuti langkah-langkah berikut ini:

• login ke blogger
• kemudian masuk ke halaman Layout
• klik Add Gadget
• kemudian pilih HTML/Javascript
• copy dan patekan code berikut ini

 <style type="text/css"> #at{ position:fixed; right:35%; z-index:+1000; } * html #at{position:relative;} .attab{ height:0px; width:0px; float:top; cursor:pointer; background:url(url); } .atcontent{ float:left; border:2px solid #fff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwy6QcpGmcATcD28czZ7VmBir5pu4kK7ze9CcisoFZgj_10ThHFYk0GuK1dHshckt2GQlnfr6tiYiyI0QTuWZcPHV-PLfzba2miN7iT0n32knyaOmi_V0cFU2bGGvpFf8zdRt2KNy1JsW/)#000000 repeat-x bottom center scroll; -moz-border-radius:10px; padding:10px; } .atcontent:hover{ border:2px solid #fff; background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;"> Strip kode cbox sobat </div> </div> <br /> <div align="right"> <a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div> </div> </div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.bottom = (-200-at.offsetWidth).toString() + "px"; </script>

•  save/simpan

keterangan : (gunakan bantuan CTRL+F)

• right:35%;  adalah jarak cbox dari sisi kanan, bisa disesuaikan sendiri

• Strip kode cbox sobat, adalah tempat meletakkan kode cbox yang akan ditampilkan

• url-url dibawah ini adalah alamat gambar yang akan digunakan, silakan diatur sendiri sesuai selera

http://petir-project.googlecode.com/files/zuaz-petir.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwy6QcpGmcATcD28czZ7VmBir5pu4kK7ze9CcisoFZgj_10ThHFYk0GuK1dHshckt2GQlnfr6tiYiyI0QTuWZcPHV-PLfzba2miN7iT0n32knyaOmi_V0cFU2bGGvpFf8zdRt2KNy1JsW/

http://i53.tinypic.com/oiu4n9.gif

http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png

Selanjutnya cara membuat tombol untuk menampilkan cbox nya :

• tetap login di akun blogger anda
• masuk di menu Layout
• kemudian Add gadget
• lalu HTML/Javascript
• copy dan paste kan kode berikut

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"> <a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGCHxhNbTK5DR4talXvOSog9ydik1BKgpvR_XPcoeDL-10wcz6Qyijj93u_OV1XQbOupM9Tr9eixwXz0W7ZrpdsutA0AlSZ6HfujqvNJoibT7-DUcxcJdSCuq3ccUHEmaDRr11CLP26lR/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

keterangan :

• kode ini top: 55px; right: adalah posisi dan jarak tombol

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGCHxhNbTK5DR4talXvOSog9ydik1BKgpvR_XPcoeDL-10wcz6Qyijj93u_OV1XQbOupM9Tr9eixwXz0W7ZrpdsutA0AlSZ6HfujqvNJoibT7-DUcxcJdSCuq3ccUHEmaDRr11CLP26lR/s128/guestbook.png adalah link gambar

Demikian cara membuat buku tamu yang unik dan dapat disembunyikan.

Selamat mencoba.

Sumber: http://zuazz.blogspot.com/2012/04/cara-lengkap-memasang-buku-tamu-cbox-di.html

read more