Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Cara Mengubah Ukuran Header Di Blogger

Masih seputar header, hari ini kita belajar tentang Cara mengubah ukuran header. Apa kegunaannya ? Selain untuk meletakkan iklan disamping / disebelah header, juga Yang saya tau gunanya adalah untuk meringankan loading blog pada header yang terjadi ketika pertama kali kita membuka halaman blog, karena gambar latar header yang kita upload sizenya lebih kecil daripada ukuran header yang normal.

Untuk memodifikasinya, silahkan anda menuju halaman edit HTML dan cari kode:
#header-wrapper {
kode diatas adalah inti dari proses kita untuk mengubah ukuran header.
Ketika anda menemukan kode tersebut, maka anda akan menemukan struktur seperti dibawah ini:
#header-wrapper {
margin: 1px 0px 1px 0px;
padding: 1px;
width: 470px;
background: $headerbgColor;
border: 1px solid $headerBorderColor;
}
#header {
width: 470px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}
Struktur diatas adalah struktur pada template milik saya.
Silahkan anda mengatur / merubah setiap ukuran margin, padding, width, background & border pada template anda.

caramengubahukuranheaderblogspot
Bagi yang masih bingung langkah - langkahnya, saya jelaskan dari awal:
1.Login Blogger
2.klik rancangan,
3.menuju Edit HTML,
4.lalu centang  Expand Template Widget
tipstrikcaraeditblog

5.Cari kode #header-wrapper { dengan menggunakan CTRL+F

caramengubahukuranheaderblog


Silahkan ber-eksperimen, semoga sharing cara mengubah / merubah ukuran header ini bermanfaat bagi blog anda..
Thanks for visit,..


Cara Membuat Readmore Otomatis di Blogspot


Sebenarnya banyak blogger yang mempostingkan Tips ini, saya menulis ini juga supaya saya tidak lupa...

Cara membuat read more pada blog, blogspot, Blogger ini sangat mudah sekali, karena hanya tinggal mengcopykan script code yang ada ke template blogspot anda, dan Berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger seperti halnya yang digunakan pada Blog.
 
Langsung saja sebelum anda memulai membuat read more pada blog, blogspot, blogger yang harus anda lakukan adalah sebagai berikut :

1. Silahkan Login di akun blogger anda
1. Masuk Blogger pilih Template dan Edit HTML
2. Centang Expand Template Widget
3. Cari kode </head> Supaya cepat klik Ctrl F dan tuliskan </head>
4. Masukkan kode dibawah ini tepat dibawah </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 src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

5. cari kode <data:post.body/> dan Ganti dengan kode dibawah 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>

Keterangan :
READ MORE : bisa diganti sesuai selera
summary_noimg     = 430 ; adalah tinggi potongan artikel tanpa gambar, bisa diganti sesuai selera
summary_img         = 340 ; adalah tinggi potongan artikel dengan gambar, bisa diganti sesuai selera
img_thumb_height  = 100 ; adalah ukuran tinggi thumbnail, bisa diganti sesuai selera
img_thumb_width   = 120 ; adalah ukuran lebar thumbnail, bisa diganti sesuai selera
           
6. Save Template dan lihat hasilnya



Selamat mencoba,...