Tutorial blog

Panduan Cara Membuat Halaman Blog

 

Pada artikel sebelumnya mengenai Cara Membuat Blog tentu anda sudah tau dan bisa. Sekarang, saya akan membahas Panduan Cara Membuat Halaman Blog dnegan Mudah. Pada saat anda membuat sebuah artikel di menu Post / Postingan, pada dasarnya anda sudah membuat sebuah halaman. Tetapi halaman tersebut berbeda dengan sebuah halaman yang nantinya akan dijadikan menu utama pada blog anda.

Apabila anda sering menulis artikl, tentu membuat halaman ini akan sangat mudah. Biasanya halaman ini dijadikan menu navigasi bagi pengunjung.

Contoh isi dari menu tersebut seperti HOME , ABOUT ME, TOS, FAQ'S, Jasa Blog, Panduan Blog, Download Template, ARSIP, SITEMAP

Anda bisa membuat isi dari menu tersebut sesuai dengan keinginan anda. Jika anda membangun toko online, maka menu tersebut dapat diisi dengan Home , About, Cara Pembayaran, Privacy Policy, Syarat dan Ketentuan, Metode Pengiriman, Hubungi Kami.

Berikut panduan cara membuat halaman blog :
1. Login ke blogger.com dengan menggunakan akun anda.
2. Klik Blog yang ingin anda edit.
3. Pilih menu Laman / Page yang ada di sebelah kiri halaman blog anda.

4. Pilih Jangan Tampilkan pada pemilihan opsi tampilkan laman sebagai.
    Kemudian Klik Laman Baru. Lalu pilih Halaman Kosong / Blank Page.
    Anda juga bisa memilih Web Address apabila ingin memasukkan link url saja.
5. Maka anda akan melihat Lembar kerja seperti berikut.

6. Di lembar kerja ini berfungsi untuk membuat artikel / ulasan mengenai isi yang sesuai dengan judul menu anda. Judul pada halaman akan menjadi salah satu judul pada menu anda. Hal ini terjadi karena kita menggunakan opsi Jangan Tampilkan pada langkah ke 4. Ada beberapa opsi lain seperti :

- Tab atas
Merupakan pengaturan standart dari blogger yang secara otomatis akan tampil setiap kali anda membuat halaman baru. Laman atau halaman blog akan berada di atas blog atau tepatnya dibagian bawah header atau judul blog anda dan tampilan yang umum digunakan. Contohnya adalah blog ini.

- Tautan samping
Merupakan pengaturan standart dari blogger yang secara otomatis akan tampil setiap kali anda membuat halaman baru. Laman atau halaman blog akan berada di samping blog atau tepatnya dibagian sidebar blog. Jarang digunakan.

- Jangan tampilkan
Laman atau halaman blog tidak akan ditampilkan alias tersembunyi dan untuk menampilkannya, anda hanya bisa menggunakan cara manual dengan membuat halaman blog sendiri.
Dari ketiga opsi diatas, saya sendiri biasanya dan selalu memilih opsi yang ketiga, Jangan tampilkan. Dengan memilih opsi ini kita akan lebih praktis dalam memanfaatkan ruang dan menaruh judul halaman tersebut pada navigasi menu kita.

7. Anda dapat tinggal mengisi Judul Halaman di kotak panjang pertama.
8. Dan berikan isi , keterangan, dan penjelasan mengenai judul halaman tersebut.
9. Pada gambar no. 5 terdapat option / pilihan.
10. Anda dapat mengikuti panduannya seperti gambar ini :

11. Ada 3 opsi pemilihan yang masing-masing sesuai dengan apa yang perlu dan tidak perlu anda lakukan.

Komentar pembaca
Izinkan : menampilkan kolom komentar untuk halaman blog anda. Dengan memilih Izinkan, berarti, isi halaman blog anda bisa dikomentari oleh pengunjung blog anda.
Jangan bolehkan : kebalikannya dari Izinkan.

Mode tulis
1. Tunjukkan HTML apa adanya
Contoh : <a href="http://impoint.blogspot.com">Panduan Cara Membuat Halaman Blog</a> akan ditampilkan tulisan Panduan Cara Membuat Halaman Blog saja tanpa ada kode html nya didalam artikel.
2. Tafsirkan HTML yang diketik
Contoh : <a href="http://impoint.blogspot.com">Media Blogger | Tutorial SEO Friendly</a> akan tetap ditampilkan seperti itu didalam artikel.

Baris baru
Ada 2 opsi yang akan berlaku pada artikel anda :
Gunakan tag <br> : setiap anda membuat baris baru dalam artikel maka diakhir artikel tersebut harus anda tuliskan tag <br>. Kalau tidak, maka tulisan atau artikel anda tidak akan memiliki garis baru atau paragraf.
Tekan "Enter" untuk baris baru : cukup tekan Enter di keyboard untuk baris baru dalam artikel blog anda. Hal ini sama dengan ketika anda mengetik artikel di Microsoft Word.

Jika anda sudah melakukan pengaturan pada menu Pilihan tersebut, jangan lupa klik Save / Selesai.
Silahkan anda ketik artikelnya, bisa juga dengan memasukkan gambar, HTML dan sebagainya. Sama seperti cara membuat artikel di blog. Semoga tutorial ini dapat bermanfaat untuk anda pengguna blogger.

Cara Agar Gambar Posting Tidak Melebihi Halaman Blog 

 

Cara agar gambar posting  tidak melebihi halaman blog. Memasukan gambar didalam posting blog, merupakan salah satu cara agar isi artikel lebih mudah untuk dimengerti oleh pembaca. Namun, jika ukuran gambar melebihi lebar halaman posting, maka tampilan artikel terlihat menjadi tidak rapi. Apalagi sampai menyentuh widget-widget yang berada di samping kanan blog.

Sebenarnya, blogger sudah menyediakan tool untuk mengatur ukuran gambar, gambar bisa dikecilkan atau dibesarkan. Caranya klik gambar maka akan ada tool dengan pilihan small, medium, large, x-large atau ukuran gambar yang sebenarnya. Tapi pada postingan tertentu, mungkin kita ingin menambahkan gambar yang lebar dengan title gambar yang terlihat jelas.

Menggunakan tool dari blogger tidak cukup untuk mengatur lebar gambar, terkadang gambar masih melebihi lebar halaman posting blog. Berikut ini adalah cara agar gambar dipostingan blog tidak melebihi lebar halaman blog. 

Ikuti langkah-langkah dibawah ini.
1. Login ke blogger. Ke pengaturan template. 

2. Klik edit html, dan cara kode ]]></b:skin> , gunakan Ctrl f untuk memudahkan pencarian. 

3. Letakan kode berikut di atas ]]></b:skin> 

#header img { max-width: 99%; max-height:90%; margin:1px 1px;padding:0px;}

    .post img { vertical-align:bottom; max-width:90%; max-height:90% }

    #navigation img { vertical-align:bottom; max-width:80%; }

    

4. Selanjutnya save template, selesai.

Gambar dengan ukurang yang besar, otomatis tidak melebihi lebar posting blog. Dengan begitu, tampilan posting blog akan terlihat rapi, dan juga bisa menambah kecepatan loading blog. Untuk mengoptimalkan lagi lebar gambar, agar tidak melebihi halaman blog. Ada baiknya, sebelum gambar di upload ke blog. Gambar di kompress terlebih dahulu.

Terkadang, gambar dengan ukuran extra besar, masih bisa melewati batas halaman blog. Walaupun sudah ditambah pengaturan seperti diatas. Tapi pada umumnya, blog yang sudah diberikan pengaturan gambar seperti diatas. Gambarnya tidak akan melewati batas halaman. Mengatur ukuran gambar bisa dibilang sebagai salah satu cara untuk meningkatkan search engine optimazation atau yang biasa disingkat seo dalam dunia website.

Selanjutnya coba baca juga cara mengubah gambar jpg menjadi kecil, dengan title gambar yang masih bisa dilihat. Dan juga cara compress gambar JPG, agar ukuran file gambar menjadi lebih kecil lagi. Semoga Bermanfaat.

Cara Membuat Auto Read More

Cara membuat auto read more. Read more yang berfungsi untuk mempersingkat tampilan posting di halaman awal blog. Read more ini berbeda dengan Read More Versi Blogger, yang harus di lakukan secara manual, read more ini otomatis. Jadi tidak perlu lagi menggunakan insert jump break.

Dari gambar diatas, read more dilengkapi dengan tampilan gambar dari salah satu halaman posting, posisi gambar disebelah kiri dan diteruskan dengan sedikit penjelasan dari isi artikel. Cara membuat auto read more. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor, pilih pengaturan template.
2. Dan Klik edit HTML, dan cari kode </head> gunakan Ctrl F untuk mempermudah Pencarian.
3. Selanjutnya, jika sudah ketemu, masukan kode berikut dibawah </head>
<!-- Auto read more script Start -->

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
    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>
<!-- Auto read more script End -->
4.  Keterangan kode diatas:
summary_noimg = 430; Jumlah huruf tanpa gambar
summary_img = 340; Jumlah huruf dengan gambar
img_thumb_height = 150; Tinggi Gambar
img_thumb_width = 150; Lebar Gambar
5. Selanjutnya cari kode <data:post.body/> dan ganti dengan kode berikut ini.
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'><font color='#1780dd'>Baca Selengkapnya &gt;&gt;&gt;</font></a>
</b:if>
</b:if>
<!-- Auto read more End -->
6. Ada 3 kode yang sama dengan <data:post.body/>, ganti semuanya dengan kode diatas.
7. Kode <font color='#1780dd'>Baca Selengkapnya &gt;&gt;&gt;</font></a> . Tulisan Baca Selengkapnya bisa diganti dengan kata yang kamu inginkan, <font color='#1780dd'> Ini kode warnanya, bisa diganti dengan warna lain. &gt;&gt;&gt; ini kode tanda >>> setelah tulisan Baca selengkapnya.
8. Terakhir, save template. Selesai. Semoga Bermanfaat.

Cara Menambahkan Widget Disamping Header

Cara menambah widget disamping header. Widget yang terletak tepat disamping kanan header, sehingga header menjadi 2 bagian. Untuk lebih jelasnya silakan lihat, Contoh Gambar dibawah ini:

Seperti gambar diatas, ada 2 widget. 1 widget header yang bertuliskan judul blog, dan yang kedua widget kosong, yang bisa kita isi dengan gadget apa saja. Widget Header akan di perkecil lebarnya, agar widget buatan dapat ditempatkan disampingnya, dengan ukuran yang disesuaikan dengan lebar halaman blog. Header yang awalnya hanya ada 1 widget, dibuat menjadi 2 bagian, header kiri dan kanan. Untuk lebih jelasnya, Ikuti langkah-langkah dibawah ini.

Cara menambah widget disamping header.

1. Login ke blogger. Dari halaman dasbord pilih pengaturan Template.
2. Selanjutynya Klik edit HTML, dan cari kode .header-outer { . Kode lengkapnya.
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}
3. Ganti semua kode diatas dengan kode dibawah ini.
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;_background-image: none;min-height: 104px;}
#header {
width: 40%;
margin-right: 10px;float: left; }
#headerkanan {
float: right;
width: 54%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#headerkanan .widget {margin: 3px;}
4. Keterangan: 
.header-outer { pada bagian height: 104px(untuk mengatur tinggi  header).
 #header { pada bagian width: 40%; lebar header kiri.
#headerkanan { pada bagian width: 54%; lebar header kanan. dan margin: 20px 10px 5px 10px; posisi atas-bawah header kanan.
5. Selanjutnya. Cari kode <div class='region-inner header-inner'> dan tambahkan kode berikut disamping kanannya.
<b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
6. Keseluruhan kode menjadi.
<div class='region-inner header-inner'><b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
7. Selanjutnya Save template. Selesai. 

Dengan menambahakan widget disamping header, kita dapat menghemat penggunaan halaman blog dan juga bisa membuat tampilan blog semakin menarik. Widget disamping header bisa kita tambahkan dengan Tombol Share, iklan, tombol search atau widget yang lainnya sesuai dengan yang kita inginkan. Semoga Bermanfaat.