Membuat kotak scroll

Salah satu cara untuk menghemat tempat pada sidebar blog anda adalah dengan cara membuat menu scroll, cara ini cukup efektif seperti yang terlihat pada blog ini.

Cara membuat menu scroll sebagai berikut :

membuat kotak scroll

Cara membuat blog di blogspot

Cara mengganti Tamplate blog

Cara menambahkan Widget pada blog

Cara mengganti Favicon pada blog

Custom domain blogspot

Cara membuat readmore otomatis

masuk ke dasboard blog anda pilih ke tata letak dan klik tambah gadget pilih HTML/JavaScript dan copy paste code berikut dibawah dan klik simpan.

<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px;
overflow: auto; width: 288px; padding-top: 10px; height: 341px" 1px="1px"
solid="solid">

<p><a href="http://iblogger-tutorial.blogspot.com/2010/02/cara-

menambahkan-widget-blog.html">Cara membuat blog di blogspot</a></p>

<p><a href="http://iblogger-tutorial.blogspot.com/2010/02/cara-mengganti-

template-blog.html">Cara mengganti Tamplate blog</a></p>

<p><a href="http://iblogger-tutorial.blogspot.com/2010/02/cara-

menambahkan-widget-blog.html">Cara menambahkan Widget pada blog</a><

/p>

<p><a href="http://iblogger-tutorial.blogspot.com/2010/02/cara-mengganti-

favicon-pada-blog.html">Cara mengganti Favicon pada blog</a></p>

<p><a href="http://iblogger-tutorial.blogspot.com/2010/02/custom-domain-

blogspot.html">Custom domain blogspot</a></p>

<p><a href="http://iblogger-tutorial.blogspot.com/2010/02/cara-membuat-

readmore-otomatis.html">Cara membuat readmore otomatis</a></p>

</ul>
</div>

Ganti Code yang berwana merah dengan link artikel anda.

Cara membuat readmore otomatis

Rasananya aneh jika seseorang masuk kehalaman depan blog anda melihat artikel-artikel panjang dan harus menggulung kebawah, jika terlalu banyak menggulung halaman blog anda, pengunjung pastinya merasa segan.

Untuk mengatasi hal itu agar secara otomatis artikel-artikel anda terpotong buatlah sebuah artikel yang terpenggal-penggal caranya dengan membuat readmore otomatis.

 

 contoh readmore seperti pada blog ini

Berikut langkah-langkah cara membuat readmore otomatis :

1. Masuk ke dasboard blog anda klik tata letak klik edit halaman dan klik Expand Template Widget

2. Cari code kemudian masukan code dibawah ini dan letakan di bawah code tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://h1.ripway.com/blogproperti/read-moreotomatis.js ' type='text/javascript'/>

3. Cari code <data:post.body/> atau code <p><data:post.body/></p> replace code tersebut atau ganti code tersebut dengan code di bawah ini.

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

ket :
Summary noimg 430 = tinggi artikel terpenggal tanpa image
Summar img 340 = tinggi artikel terpenggal dengan image
Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll.

4. Simpan template dan lihat hasilnya.

Jika anda ingin menambahkan background pada kata READMORE... masukan code CSS berikut sebelum code ]]></b:skin>

#colLeft .blogItem a.more-link {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YM7dPUbmMQX6EqHGhxGKmrJrhhA9iAfcMcFbNX86QpRzEq2iB-_-VTva1RVU8KAfx8oOy1YkJZnvqiskx2n8ddG4PbXEQSlcS1OpPPO_hWHxAz96v91Gt58JUtMAZ81T-brEgbvGKg/s1600/bk_readmore_blue.png) 0 0 no-repeat;
color:#fff;
}

Ganti url image yang berwarna merah dengan url image anda.
Selamat mencoba!