Memasang Header Pada Blog

Halo Bro, Berjumpa Lagi Dengan Saya Si Gaul, Disini Saya akan Mengajari Anda bagaimana cara untuk mengubah header Blog anda sesuai keinginan anda. Pastinya penasaran kan. Tapi sebelumnya saya akan menerangkan apakah itu header?
header adalah tampilan di halaman atas tempat judul Blog. oke udah mudeng kan? oke. lanjut!
Supaya blog Anda terlihat unik atau beda dari yang lain. Maka Anda harus mengganti tampilan blog Anda.

Ada banyak cara untuk melakukannya. Misalnya dengan mengganti template yang dibuat oleh pihak ketiga tapi rata-rata template tersebut sudah ada yang menggunakannya.

Terkecuali Anda membuat template sendiri namun cara ini memerlukan waktu yang lama dan tidak mudah untuk membuat sebuah template yang bagus. Jadi salah satu cara yang paling mudah dan efektif adalah mengganti header pada template.

Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Jadi mengganti header merupakan cara yang paling tepat.

Header tidak harus berupa gambar. Anda juga bisa menggunakan teks sebagai header yang penting enak dilihat. Jika anda ingin menggunakan gambar sebagai header tetapi tidak bisa membuatnya. Jangan khawatir, karena saat ini ada banyak situs yang menyediakan gambar header secara gratis jadi Anda tinggal mendownload saja. Beberapa website yang memiliki header yang cukup bagus seperti: 100pixel.blogspot.com, freewebpageheaders.com, smashingmagazine.com, dan masih banyak lagi.

Pada postingan ini saya akan membahas tentang mengganti header dari freewebpageheaders.com. Untuk mendowloadnya, silahkan ikuti langkah-langkah dibawah ini:

1. Buka situs http://freewebpagesheaders.com/gallery

2. Untuk mendownload header. Anda harus memiliki account terlebih dahulu. Klik register untuk mendaftar.

3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info.

Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini

4. Kemudian klik Submit Registration Form. Jika sudah Anda akan mendapat pesan seperti ini.

5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.

6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.

7. klik Return to the front page of free Web Page Headers.

8. Lalu klik Login untuk mendowload gambar header.

9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.

10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.

11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda

Langkah selanjutnya yang harus Anda lakukan adalah mencari tahu berapa ukuran header pada template Anda supaya pada saat mamasang ukurannya pas dengan header template Anda. Caranya:

1. Klik Layout->Edit HTML.

2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketik "header-wrapper" lalu tekan Next.

3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya #header-wrapper { background: url } no-repeat; width:980px; height:100px;

Width adalah panjang header dan Height adalah lebar header. Berarti Anda harus meresize gambarnya menjadi 980x100 pixel. Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, photoshop untuk meresizenya.

4. Setelah selesai. Buka Blogger, masuk ke menu Design->Page Elements.

5. Klik Edit pada bagian Header.


6. Kemudian akan muncul halaman baru.



7. Pilih Browse from your computer jika gambarnya disimpan dikomputer atau Browse from the web jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket, dan Geocities.

8. Pada bagian "Placement". Pilih Behind title and description jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description jika Anda ingin menutupi judul dan deskripsi blog.

9. Lalu klik Save. Klik View Blog untuk melihat hasilnya.

Catatan:
Tidak semua template bisa dipasang gambar. Ada yang menggunakan teks saja. Jadi pilihlah template sesuai kebutuhan.

Selamat mencoba. Semoga berhasil...

Readmore

Cara Membuat Read More

Halo Sobat!, apa kabare rek?
jumpa lagi Dengan Saya. Disini. hehe, udah pada Penasaran kan gimana cara Buat ReadMore untuk keseimbangan Blog kita, mari Baca dengan seksama.
Pembuatan link 'Read more' atau 'Baca selengkapnya' merupakan teknik untuk menyembunyikan sebagian isi artikel pada halaman depan blog agar halaman blog tidak terlalu panjang.

Dengan demikian pengunjung akan lebih mudah untuk mengeksplorasi halaman blog anda dan bila ada pengunjung yang tertarik untuk membaca lebih lanjut artikel anda dapat dengan menekan link 'Read more' atau 'baca selengkapnya'.

Teknik ini banyak disukai oleh pemilik blog karena selain membuat blog terlihat lebih profesional, cara ini juga mempercepat loading blog.

Bagi anda yang ingin memasang link read more pada blog anda, silahkan ikuti langkah-langkah berikut:

1. Login ke Blogger. Klik menu Design-> Edit HTML.

2. Beri tanda centang pada "Expand Widget Templates".

3. Agar lebih aman, back-up terlebih dahulu template Anda dengan cara klik pada Download Full Template.

4. Setelah itu, cari kode pada template Anda. Supaya lebih mudah untuk mencarinya, tekan Ctrl+F lalu masukkan kode trus klik Next.

5. Jika sudah ketemu, letakkan kode dibawah ini diatas kode

Catatan:
Bagi para blogger yang sudah pernah memasang kode read more harus dihapus terlebih dahulu kodenya sebelum memasang kode ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'>

var fade = false;
function showFull(id) { var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) { if (spans[i].id == &quot;fullpost&quot;) { if (fade) { spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == &quot;showlink&quot;) spans[i].style.display = 'none';
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = 'inline';
} }


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) { if (spans[i].id == &quot;fullpost&quot;) {
if (fade) { spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
} if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = 'inline'; if (spans[i].id == &quot;hidelink&quot;) spans[i].style.display = 'none';
} post.scrollIntoView(true);
}
function checkFull(id) { var post = document.getElementById(id);
var spans = post.getElementsByTagName('span'); var found = 0; for (var i = 0; i &lt; spans.length; i++) { if (spans[i].id == &quot;fullpost&quot;) { spans[i].style.display = 'none'; found = 1; } if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0)) spans[i].style.display = 'none';
} }

</script>
</b:if>

6. Kemudian cari kode<div class='post-body'> atau <div class='post-body entry-content'> dan <p><data:post.body/></p>
7. Kalau sudah ketemu, hapus kedua kode tersebut dan ganti dengan kode dibawah ini:

<div class='post-body' expr:id='"post-" + data:post.id' >
<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>
<span id='showlink'>
<a expr:href='data:post.url'><b>Read More...</b></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Catatan:
Kata Read More yang dicetak tebal diatas bisa anda ganti dengan kata lain misalnya, Baca Selengkapnya, Selanjutnya, Lanjut membaca, dan lain-lain.

8. Jika sudah, simpan template anda
Sampai disini proses pengeditan template telah berhasil. Namun fungsi read more masih belum bekerja. Untuk mengaktifkan fungsi read more pada artikel, anda harus menyelipkan dua baris kode diantara artikel yang mau disembunyikan.

1. Klik menu Posting -> Edit Post. Buka artikel yang mau dipasang read more. (Cara ini juga berlaku untuk artikel yang akan dipublikasi).

2. Pilih mode Edit HTML



3. Masukkan kode <span id="fullpost"> diatas artikel yang mau disembunyikan dan kode </span> di akhir artikel. Sehingga posisinya menjadi seperti ini

Isi artikel yang ditampilkan

<span id="fullpost">
Isi artikel yang mau disembunyikan
</span>

4. Agar lebih jelas perhatikan gambar dibawah ini



5. Kalau sudah, klik tombol Publish Post dan lihat hasilnya.

Selamat mencoba dan semoga berhasil

Readmore