Mengubah lebar kotak komentar bagi sebuah blog

Mengubah lebar kotak komentar bagi sebuah blog dapat memberi tempat yang lebih luas kepada pengunjung yang sering memberikan komentar panjang – panjang  dan juga dapat memberikan tempat komentar  terlihat  sama besar dengan tempat postingan.

Tutorial ini akan menunjukkan cara untuk melebarkan tempat kotak komentar, dan tutorial ini  hanya untuk blog yang menggunakan embedded comment.

Sebelum

Sesudah

Berikut adalah langkah-langkah yang diperlukan untuk mengubah lebar  kotak komentar pada blog.

1. Login akun blogger anda, dari Dasbor > Rancangan > Edit html, kemudian klik  Expand Template Widget

2. Pada keyboard anda, klik ctrl + f untuk menjalankan  fungsi find kemudian cari kode berikut.

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

Keterangan : Ganti nilai 100% dengan nilai pixel yang anda inginkan.

Contoh : Jika anda menginginkan lebar 500px, kodenya adalah

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='500px'/>

3. Save hasil kerja anda dan lihat hasilnya.

Cara agar postingan tidak bisa dicopy paste

Apakah anda tidak suka orang lain mengambil apa saja kandungan dalam blog anda.? Jika demikian anda bisa ikuti tutorial cara agar postingan tidak bisa dicopy paste.
Sebenarnya ada banyak tutorial untuk bagaimana postingan tidak bisa di copy paste agar orang lain hanya bisa melihatnya saja tanpa bisa mencopynya , kalo blog ini sih bebas mau di copy paste atau tidak, asalkan harus menampilkan link sumber artikelnya, tapi jika sobat mau trik untuk postingan sobat tidak bisa di copy paste sobat bisa ikuti langkah untuk mematika fungsi klik kanan pada blog Berikut ini :

Berikut adalah cara yang mudah untuk mematikan fungsi klik kanan. simak baik-baik ya sobat :

1. Copy kode berikut ke notepad sobat atau pengolah kata lainnya

<script language=JavaScript><!--
//edit by Blog si Asep

var message="Masukkan Pesan Anda Disini";
///////////////////////////////////function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
// --></script>

2. Silahkan signin ke blogger dengan ID anda.

3. Klik Rancangan.

4.  Klik tombol Tambah Gadget lalu Paste pada "HTML/javascript" dalam blog sobat

5. Save dan lihat hasilnya

Cara Pasang Banner di Header Blog

karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.

Sebelum menginjak kepada proses editting template, langkah awal tentunya anda harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner,anda bisa menggunakan berbagai program desain grafis yang anda kuasai, Photoshop, Coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner. jika sobat masih belum mahir dengan membuat banner di photoshop silahkan sobat bisa mengikuti Tutorial cara membuat banner blog di photoshop yang sudah saya postin.
Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai contoh , saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Sebagai contoh, saya sudah upload banner di blogger milik saya dan mempunyai alamat banner seperti ini : 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGN7yZVlAKlIg7mPIJCcXKIi8hb9y0d3AR6YZ9V3q2ReMxykSyFhyphenhyphenhR1_gm9Z17UTUOkPQvxmSJ29oJ3QzVNB8mkOTON8aBUPhcVMgrP2oxIcGGWdlWZiUF-pjZ-obsQziLWiT-VJN5Lpi/s1600/banner+kliklabel+update+27-11-11.jpg

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil dan ini blog saya tempo dulu hehe):





Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :


1. Sign in di blogger sobat

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template

5. Sisipkan kode berikut pada style sheet css anda. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

/* Header ----------------------------------------------- */ @media all { #header { width:660px; margin:0 auto 10px; border:1px solid #ccc;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGN7yZVlAKlIg7mPIJCcXKIi8hb9y0d3AR6YZ9V3q2ReMxykSyFhyphenhyphenhR1_gm9Z17UTUOkPQvxmSJ29oJ3QzVNB8mkOTON8aBUPhcVMgrP2oxIcGGWdlWZiUF-pjZ-obsQziLWiT-VJN5Lpi/s1600/banner+kliklabel+update+27-11-11.jpg) no-repeat top center; } }

6. Jika anda ingin menghapus garis yang berada di tepi banner, anda harus menghapus kode berikut :

#blog-title { margin:5px 5px 0; padding:20px 20px .25em;border:1px solid #eee; <-- hapus (delete)border-width:1px 1px 0; <-- hapus (delete) font-size:200%; line-height:1.2em; font-weight:normal; color:#666; text-transform:uppercase; letter-spacing:.2em; }

#description { margin:0 5px 5px; padding:0 20px 20px;border:1px solid #eee; <-- hapus (delete)border-width:0 1px 1px; <-- hapus (delete) max-width:700px; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#999; }

7. Klik tombol Pratinjau untuk melihat perubahan

8. Jika sudah OK, klik tombol Simpan Perubahan Template

Cara Menyembunyikan Judul Blog di Header

Cara Menyembunyikan Judul Blog di Header. Judul blog merupakan bagian penting dalam blog. Karena pada judul terdapat inti tentang isi blog tersebut. Judul blog adalah bagian pertama yang di index search engine seperti google. Tetapi jika judul blog mengganggu penampilan blog seperti gambar header. Terpaksa judul ini disembunyikan.

Berikut adalah tutorialnya :

1. Silahkan signin ke blogger sobat.

2. Klik Rancangan.

3. Klik tab Edit HTML.

4. Klik tulisan Download Template Selengkapnya. (untuk backup template sobat )

5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula

6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget

7. Kemudian cari kode di blog Anda yang mirip seperti dibawah ini (Fokuskan pencarian pada kode yang berwarna merah )

#header h1 {

margin:50;

padding:5px 0 0 10px;

font-size: 100%;

font-weight:bold;

line-height: 1.2em;

letter-spacing:.0em;

font-style:italic;

color:#FFFFFF;

}

8. Tambahkan Code Css berikut visibility:hidden; Kedalam Css Diatas Sehingga  menjadi seperti berikut :

#header h1 {

margin:50;

padding:5px 0 0 10px;

font-size: 100%;

font-weight:bold;

line-height: 1.2em;

letter-spacing:.0em;

font-style:italic;

color:#FFFFFF;

visibility:hidden;

}

9. Klik tombol Simpan Template.

10. Selesai. Silahkan lihat hasilnya sobat

Cara Mengubah lebar kotak komentar

Mengubah lebar kotak komentar bagi sebuah blog dapat memberi tempat yang lebih luas kepada pengunjung yang sering memberikan komentar panjang – panjang  dan juga dapat memberikan tempat komentar  terlihat  sama besar dengan tempat postingan.

Tutorial ini akan menunjukkan cara untuk melebarkan tempat kotak komentar, dan tutorial ini  hanya untuk blog yang menggunakan embedded comment.

Sebelum

Sesudah

Berikut adalah langkah-langkah yang diperlukan untuk mengubah lebar  kotak komentar pada blog.

1. Login akun blogger anda, dari Dasbor > Rancangan > Edit html, kemudian klik  Expand Template Widget

2. Pada keyboard anda, klik ctrl + f untuk menjalankan  fungsi find kemudian cari kode berikut.

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

Keterangan : Ganti nilai 100% dengan nilai pixel yang anda inginkan.

Contoh : Jika anda menginginkan lebar 500px, kodenya adalah

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='500px'/>

3. Save hasil kerja anda dan lihat hasilnya.

Cara Mengubah Lebar Kolom Template

Bagi sobat yang masih bingung untuk mengubah ukuran templatenya sekarang gak usah bingung-bingung lagi karena sudah banyak blog yang sudah memposting artikel tentang Cara merubah ukuran template,  Memang tidak semua template sama tapi ini contoh dari sebagian besar template yang anda gunakan serta letaknya ,ini letak kode-kode untuk mengatur lebar kolom template :

#header-wrapper {width:900px; margin:0 auto 10px; border:1px solid $bordercolor; }
#outer-wrapper {width: 900px; margin:0 auto; padding:10px; text-align:justify; font: $bodyfont; }
#main-wrapper {width: 435px; margin-left: 20px; margin-right: 20px; float: left;
}#sidebar-wrapper {width: 220px; float: right; }#newsidebar-wrapper {width: 200px; float: left; }

Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah yang berwarna MERAH. Width tentu saja dalam bahasa indonesia adalah lebar, jadi mudah bukan untuk mengenalinya. 900px adalah nilai lebar yaitu sebesar 900 pixel. 435px adalah nilai lebar yaitu sebesar 435 pixel.

Agar lebih paham, kode-kode diatas akan saya uraikan satu persatu seperti berikut :

#header-wrapper {width:900px; margin:0 auto 10px; border:1px solid $bordercolor; }

Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna).

header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan anda, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal anda tinggal tambahin nilainya, atau jika anda menginginkan garis tepi ini tidak ada maka sobat hapus saja kode ini.

#outer-wrapper {width: 900px; margin:0 auto; padding:10px; text-align:justify; font: $bodyfont; }

Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.

outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila anda memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila sobat ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.

#main-wrapper {width: 435px; margin-left: 20px; margin-right: 20px; float: left; }

Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.

main-wrapper adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila anda  merasa kolom ini terlalu sempit atau kekecilan, maka anda  bisa menambahkan nilai, contoh 550 pixel. Apabila anda berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.

#sidebar-wrapper {width: 220px; float: right; }

Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar.

Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apabila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.

#newsidebar-wrapper {width: 200px; float: left; }

Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri.

Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. kolom ini di buat agar kita bisa lebih banyak memuat berbagai aksesori yang kita inginkan. Kolom newsidebar-wrapper ini lebarnya sebesar 200px,coba bandingkan template yang sudah saya ganti ukurannya pada gambar berikut ini :

Sebelum

Sesudah

nah bila berniat merubahnya maka tinggal merubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada kolom outer-wraper.

Cara Membuat Widget Dibawah header

Memang pada umumnya pada template blogger tidak bisa untuk menyimpan widget atau elemen langsung di bawah header, biasanya hanya bisa menyimpan di atas elemen post namun tentu saja lebar dari elemen tersebut hanya selebar elemen post. Apakah ada cara agar kita bisa menyimpan widget atau elemen persis di bawah header? seperti gambar dibawah ini :

tentu saja bisa dan bahkan banyak cara untuk melakukan ini,salah satunya caranya seperti berikut 

Silahkan ikuti langkah-langkahnya dengan teliti ya .

1.     Login ke blogger dengan id anda.

2.     Klik Tata Letak.

3.     Klik tab Elemen Halaman, lihat pada struktur layout template anda.

4.     Sekarang kita akan memodifikasinya,

5.     Klik Tab Edit HTML.

6.     Klik Tulisan Download Template Lengkap, silahkan di backup dulu (penting).

7.     Cari Kode yang mirip seperti ini :

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

8.     Hapus kode di atas dan ganti dengan kode di bawah ini :

 <b:section class='header' id='header' preferred='yes'>

9.     Klik tombol Simpan template. Tunggu beberapa saat sampai template anda tersimpan.

10.   Klik tab Elemen halaman. Dan sekarang layout template anda.

11.   Sekarang anda bisa menambahkan berbagai elemen langsung di bawah header.

12.   Untuk menambah elemen halaman tinggal klik Tambah Elemen Halaman. Silahkan tambahkan apa yang anda mau, apabila sudah di tambahkan tinggal geser elemen yang baru di buat tadi ke bawah elemen header.

13.  Klik Tombol SIMPAN yang ada di bagian atas.

14.  Selesai, sekarang tinggal lihat hasilnya.