image naruto

Read More ->>

Cara Membuat Read More Pada Blog, Blogspot, Blogger Otomatis

Cara Membuat Read More Pada Blog, Blogspot, Blogger Otomatis ini sangat mudah sekali, karena hanya tinggal mengcopykan script code yang ada ke template anda, dengan begitu andapun tidak perlu repot lagi dalam hal pembuatan readmore ini, oke tanpa panjang lebar silahkan ikuti langkah-langkahnya seperti yang di bawah ini.:

Membuat Read More Di Blogspot

► Silahkan Login di akun blogger anda
► Lalu klik Rancangan dan klik Edit HTML
► Jangan lupa untuk mencentang Expand Template Widget
► Untuk menghindari hal2 yang tidak diinginkan maka simpan/backup terlebih dahulu template saudara, untuk menghindari hal yang tidak diinginkan.
► Kemudian Cari kode </head>.  Dan untuk mempermudah pencarian kode nya anda tekan aja ( CTRL + F )
► Lalu silahkan tambahkanlah kode yang ada dibawah ini tepat diatas kode </head> tersebut.

• <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 src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/> 

 Bila anda ingin merubah ukuran pada Read More di Blogger anda tersebut, kamu tinggal merubah di bagian-bagian kode yang berwarna merah bawah ini, dan Ubahlah angkanya sesuai dengan keinginan.  

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar    
summary_img = 340; adalah tinggi potongan artikel dengan gambar  
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

► langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script 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>

 ► dan untuk tulisan " READ MORE " bisa diganti sesuai dengan selera anda.
setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Read More ->>

Cara Membuat Menu Horizontal Blog Sederhana

Berikut Cara Membuat Menu Horizontal Blog Sederhana

1. Masuk ke akun blogger anda
2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
3. Cari kode ]]></b:skin>
4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>
   .navhorizontalpic{background:#434343 url() repeat-x top left;width:100%;height:40px;border-top:1px solid #000000;margin:0 auto;padding:0 auto}
   .navhorizontal{width:960px;height:35px;margin:0 auto;padding:12px 0}
   .navhorizontal ul{padding-left:0;color:#fff;text-transform:none;list-style-type:none;font:normal 12px Arial,sans-serif;margin:0}
   .navhorizontal li{display:inline;margin:0}
   .navhorizontal li a{background:url() no-repeat center right;float:left;display:block;text-decoration:none;color:#eee;line-height:1.5em;padding:1px 12px}
   .navhorizontal li a:visited{color:#eee}
   .navhorizontal li a:hover{color:#8a8050;text-decoration:none;-moz-transition:color .25s linear;-webkit-transition:color .25s linear;transition:color .25s linear}
5. Cari kode dengan struktur seperti berikut ini
   <div id='header-outer'>
   <div id='header-inter'>
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
   <b:includable id='title'>
   ----------------------
   ----------------------
   ----------------------
   </b:includable>
   </b:widget>
   </b:section>
   </div>
   </div>
   </div>
   
   Letakkan kode berikut tepat dibawah kode </b:section> diatas
   
   <div class='navhorizontalpic'>
   <div class='navhorizontal'>
   <ul>
   <li><a href='/'><img alt='Panduan Template Blog' border='0' src='link url gambar' title=''/></a></li>
   <li><a href='#'>Forum</a></li>
   <li><a href='#'>Color Code</a></li>
   <li><a href='#'>Archieves</a></li>
   <li><a href='#'>Contact us</a></li>
   </ul>
   </div>
   <div style='clear:both;'/>
   </div>
6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog sederhana seperti yang ada pada blog ini.
7. Simpan Template

Okey, semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Sederhana

Read More ->>