shad0w-share

Pengaruh Html, CSS, dan JavaScript Terhadap SEO Blog - Waduh, akhirnya artikel blog ini sudah sampai pada pembahasan mengenai SEO, padahal saya sendiri tidak tahu mengenai SEO itu sendiri tapi kalau secara acak-acakan ya seperti inilah, seperti yang saya terpakan untuk blog ini. Hanya melakukan apa yang bisa saya lakukan!. Okey, pada artikel ini Pengaruh Html, CSS, dan JavaScript Terhadap SEO Blog, kita akan membahas mengenai pengaruh html, css, javascript terhadap SEO blog yang kita gunakan dan kita pasang didalam template blog kita.


Teman-teman blogger semua pasti tahu apa itu Html, CSS, dan Javascript karena didalam setiap template blog kita tidak pernah luput dari ketiga kode tersebut dan artikel ini saya dapatkan setelah saya mengecek mengenai kualitas SEO blog ini dengan menggunakan beberapa layanan seo analisa dengan beberapa perbandingan sehingga menghasilkan artikel ini. Dan berikut penjabarannya..

Pengaruh Html, CSS, dan JavaScript Terhadap SEO Blog

1. Pangaruh HTML terhadap SEO
   Secara keseluruhan, blog yang kita bangun merupakan satu kesatuan dari sebuah Html dan Html itu sendiri juga terbentuk karena adanya beberapa kode yang ada didalamnya, termasuk CSS dan JavaScript. Namun jika hanya berbicara mengenai Html sendiri, blog kita sudah memiliki Html utama dan beberapa Html yang terbentuk sehingga menjadi sebuah blog. Html yang membangun sebuah blog hanya terdiri dari 5 Html yang ada didalam blog yaitu :
   
   1. Html utama blog
   2. Html header blog
   3. Html body blog
   4. Html sidebar blog
   5. Html footer blog
   Dan dari setiap Html diatas, memiliki ukuran-ukuran yang berbeda sehingga semakin besar ukuran Html sebuah blog maka semakin besar pula ukuran dari sebuah blog itu sendiri dan dari sinilah kualitas SEO blog juga dipengaruhi. Lalu darimana ukuran besar-kecilnya Html in? Biasanya bertambahnya ukuran Html yang banyak terletak pada kolom-kolom sidebar blog. Semakin banyak kolom widget yang terpasang, maka semakin besar ukuran Html. Dan agar saat pemasang kolom widget tidak terbaca Html, solusi terbaiknya adalah menjadikan satu setiap widget yang terpasang. Misalnya, kolom widget popular post jadi satu kolom dengan kolom widget recent post.
2. Pangaruh CSS terhadap SEO
   CSS merupakan bagian kode yang ada didalam Html sebuah blog yang biasanya terletak dibagian atas kode ]]></b:skin> serta berada diatas kode </head>. CSS ini memiliki peranan penting untuk sebuah tampilan blog, semakin bagus CSS yang diterapkan maka semakin bagus pula tampilan yang dihasilkan sebuah blog. Namun pernahkah anda mneyadari jika CSS juga mempengaruhi kualitas SEO sebuah blog? Lalu bagaimana CSS mempengaruhi SEO? Sama seperti Html, semakin banyak CSS yang terpasang didalam template blog, maka semakin besar ukuran Html blog dan semakin lama proses loading yang diperlukan.
   
   Jika anda senang dalam menerapkan dan memasang beberapa CSS kedalam template, dan agar CSS serta ukurannya tidak banyak maka solusi terbaik adalah menggabungkan CSS yang sama mirip serta memiliki satu letak yang sama antara CSS yang satu dengan yang lainnya dan untuk melakukan hal ini, anda harus mengetahui caranya.
   
3. Pangaruh JavaScript terhadap SEO
   Meskipun berada didalam kode Html, JavaScript sendiri setelah saya 'selidiki' ternyata tetap dibutuhkan oleh sebuah blog namun sama halnya dengan CSS, terlalu banyak menggunakan javascript maka kualitas SEO akan buruk juga karena javascript sendiri merupakan kode-kode panjang dengan ukuran yang besar dan selain itu beberapa javascript juga mengandung link-link yang secara tidak langsung akan terbaca menjadi link ekternal blog, apalagi jika kode javascript ini masih berada di luar host maka loading blog juga akan terpengaruh.
   
   Agar kode javascript tidak terlalu banyak maka solusi terbaiknya adalah menggabungkan beberapa kode menjadi satu kode javascript atau menjadi satu didalam file .js sehingga dengan cara ini, maka blog tidak akan membaca banyak kode didalam template.

Jadi kesimpulan dari Pengaruh Html, CSS, dan JavaScript Terhadap SEO Blog adalah proses loading blog atau kecepatan load blog itu. Dan kita semua tahu kalau proses loading merupakan bagian dari dalam menentukan kualitas SEO sebuah blog. Okey, itulah analisa saya untuk Html, CSS, JavaScript dan pengaruhnya terhadap SEO Blog. Mohon maaf jika ada perbedaan pendapat, jika ada yang mau diskusikan mari berkomentar untuk artikel ini, Pengaruh Html, CSS, dan JavaScript Terhadap SEO Blog

Benarkah Kolom Widget Memperberat Loading Blog? Mungkin itu adalah pertanyaan yang sering timbul jika kita ingin memasang beberapa kolom widget di blog, baik itu diatas, disamping atau dibawah. Dalam menambahkan beberapa isi kolom widget tertentu didalam blogspot, secara langsung saya hampir tidak pernah menggunakan isi kolom yang telah disediakan oleh Blogspot karena selain tampilannya yang monoton juga mempengaruhi tampilan blog dan juga yang saya ketahui isi kolom widget yang telah disediakan oleh Blogspot, beberapa sebagian, merupakan buatan dari para Developers (pengembang) yang nota bene akan terpasang script tertentu kedalam isi kolom widget tersebut. Sehingga jika kita memasang beberapa isi kolom widget yang ada di Blogspot hal inilah yang akan mempengaruhi tampilan blog, salah satunya kecepata loading blog akan berkurang. Itulah kenapa, banyak para master blogger yang menyarankan untuk tidak memasang terlalu banyak isi kolom widget bawaan Blogspot. Bukan karena isi widget kolom itu tidak sesuai dengan topik yang kita berikan untuk blog kita tapi karena isi kolom widget tersebut bukan dari Google ataupun Blogspot (Blogger).

Jika kita memasang isi kolom widget ke dalam blog kita maka secara tidak langsung saat proses loading berjalan maka mesin space hosting yang ada di Google ataupun Blogspot akan langsung terhubung dengan space host yang digunakan oleh para Developers dalam menyimpan script-script yang mereka gunakan didalam isi kolom widget blogspot. Coba anda perhatikan dibagian pojok kiri bawah saat proses loading blog, web site, atau situs-situs lainnya. Dibagian tersebut akan menampilkan beberapa link yang tidak semuanya link merupakan link internal yang di load tapi ekternal link juga, dan dari sinilah secara tidak langsung ada link-link ekternal yang terpasang didalam blog kita! Seperti yang terlihat pada contoh tampilan gambar berikut


Semakin banyak anda memasang kolom widget, apalagi itu adalah widget-widget yang bukan merupakan buatan Google atau Blogspot maka semakin lama proses loading blog anda. Lalu bagaiaman cara mengetahui kolom widget buatan Google sendiri dan yang bukan? Gampang saja, coba perhatikan perbedaan 2 gambar widget yang ada di Blogspot berikut ini


Dari gambar diatas, anda tentu sudah bisa membedakan mana kolom widget yang disediakan oleh Google atau Blogger dan mana yang bukan

Jadi, benarkah kolom widget memperberat loading blog? Salah satu faktor yang saya akui, iya! Karena selain kolom widget, masih ada beberapa faktor yang juga memperberat loading blog, diantaranya banyaknya kode CCS yang digunakan, JavaScript, dan Html-Html yang masih ada kaitannya dengan pemasangan kolom widget. Untuk lebih jelasnya silahkan buka artikel Pengaruh Html, CSS, dan JavaScript Terhadap SEO Blog.
Jika loading blog kita berat dan mempengaruhi kecepatan loading maka pada tahapan selanjutnya akan mempengaruhi kualitas SEO yang ada didalam blog kita, dan hasilnya akhirnya bisa anda rasakan sendiri :)

Okey, itulah sedikit gambaran mengenai kolom widget yang memperberat loading blog. Sebenarnya kalau dibahas lebih dalam lagi, kita akan sampai pada pembahasan mengenai SEO dan pembahasan diatas mungkin bisa anda pelajari lebih lanjut lagi. Jika ada pertanyaan mengenai kolom widget memperberat loading blog ini, mari kita diskusikan bersama dengan meningalkan komentar untuk artikel ini, Benarkah Kolom Widget Memperberat Loading Blog?

Cara Membuat Nomer Halaman Pagenavi Blog - Sebenarnya sudah banyak yang membahas tentang cara membuat nomer halaman blog atau pagenavi blog yang biasanya (lebih banyak) berada di halaman depan blog untuk memasang nomer halaman blog ini. Setelah melakukan pencarian tentang pagenavi ini dan mencoba beberapa kode yang saya temukan, hampir semuanya saya gagal memasangnya ke dalam blog ini atau beberapa blog saya lain. Saya tidak tahu, apakah kode itu memang tidak work dengan template blog saya atau saya saja yang belum bisa memanipulsai kode tersebut.

Akhirnya, setelah beberapa minggu saya melakukan pencarian dan tes trial error saat membuat nomer halaman blog. Saya pun menemukan kode yang lebih simpel dan mudah yang bisa digunakan dalam membuat nomer halaman blog atau pagenavi blog.
Dan juga artikel ini merupakan permintaan mas Rohan yang selalu penuh semangat menanyakan "kapan nomer halaman blognya?", "..kalau bisa minggu depan di update..", maaf ya mas Rohan memang saya selalu menundanya biar mas Rohan penasaran saja hehehe

Namun, sebelum menerapakan isi artikel tentang cara membuat halaman blog ini. Perlu saya garis bawahi bahwa Tidak Semua Template Cocok Dengan Kode Nomer Halaman Blog Ini jadi ketika anda memasang kode nomer halaman ini kedalam template blog anda dan nomer halaman tidak keluar atau tidak sesuai dengan tampilan seperti yang ada digambar berikut ini, jangan salahkan saya karena saya sendiri belum menemukan kode yang secara global benar-benar cocok untuk semua template

Berikut Contoh nomer halaman blog yang telah saya pasangi nomer halaman untuk 2 blog saya sendiri


DEMO 1, 2
Berikut Cara Membuat Nomer Halaman Pagenavi Blog

1. Masuk ke akun Blogger anda
2. Klik Template >> Edit HTML >> tekan Ctrl+F pada keyboard
3. Cari kode ]]></b:skin>
4. Tambahkan kode berikut tepat diatas atau sebelum ]]></b:skin>
   
   .showpageArea a{text-decoration:none}
   .showpageNum a{ display:inline-block; padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
   .showpageNum a:hover{padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #9168C9; background:#9168C9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#FFFFFF; text-shadow:0px 1px 0px rgba(255,255,255,1)}
   .showpagePoint{ display:inline-block; padding:0px 9px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
   .showpageOf{margin:0 3px 0 0; padding:7px 14px; text-decoration:none}
   .showpage a{ display:inline-block; padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
   .showpage a:hover{text-decoration:none}
   .showpageNum a:link, .showpage a:link{color:#000000; text-decoration:none}
5. Selanjutnya cari </body>
6. Tambahkan kode berikut tepat diatas atau sebelum </body>
   
   <script type='text/javascript'>;
   var home_page=&#39;/&#39;;
   var urlactivepage=location.href;
   var postperpage=4;
   var numshowpage=4;
   var upPageWord =&#39;Prev&#39;;
   var downPageWord =&#39;Next&#39;;
   </script>
   <script type='text/javascript'>
   //<![CDATA[
   eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ... \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
   //]]>
   </script>
7. Selesai. Simpan template dan lihat hasilnya
8. var postperpage=4; menunjukkan jumlah post atau artikel dalam satu halaman
   var numshowpage=4; menunjukkan jumlah halaman yang tampila pada nomer halaman

Jika ada yang salah dengan kode diatas atau ada kode nomer halaman blog yang lain yang work (bekerja/sesuai) dengan semua template, silahkan tampilkan ide anda dengan meninggalkan komentar di artikel ini, Cara Membuat Nomer Halaman Pagenavi Blog

Cara Mengetahui Kode Template Blog - Setiap template blog ada yang memiliki kode-kode yang berbeda dengan kode template yang lainnya. Sehingga setiap kita ingin mengedit atau menambahkan sesuatu kedalam template maka kita harus mengetahui kode template blog tersebut dan dengan mengetahui kode template blog ini maka dengan mudah kita menemukan kode tersebut didalam kotak pencarian kode template.

Selain itu, tentunya dalam mengedit template juga akan lebih mudah dilakukan tanpa mengalami kesalahan. Itulah mengapa setiap saya membuat panduan atau cara mengedit template blog tidak pernah menuliskan Update Terlebih Dahulu Template karena selain sudah mengetahui letak kode template yang di edit juga karena adanya menu Preview yang berguna untuk mengetahui benar salah kode template yang di edit tersebut

Cara mengetahui kode template blog ini juga sangat bermanfaat dan membantu kita dalam menginginkan sesuatu tampilan yang ada di blog orang lain. Misalnya ada tampilan yang sangat menarik di blog orang lain dan tentunya anda akan bertanya "wah tampilan di sidebar blog ini keren banget.. gimana cara bikinnya ya?" atau "wah tampilan di footer blog ini keren banget.. pake kode apa ya?" atau tampilan-tampilan lainnya yang lebih keren lagi... Untuk lebih jelasnya silahkan baca artikelnya di Cara Mengambil dan Menyalin Kode Template Blog

Dalam menerapkan cara mengetahui kode template blog ini yang harus pertama kali disiapkan adalah Browser yang anda gunakan karena cara emnegtahui kode template blog ini berbeda dari setiap masing-masing browser dan tentunya browser yang anda gunakan harus telah terupdate pada versi terakhir. Dan pada artikel ini, saya hanya menjelaskan 3 browser utama yang banyak digunakan saat ini yaitu Firefox, Chrome, dan Opera

Cara Mengetahui Kode Template Blog Menggunakan Firefox

1. Buka blog anda atau salah satu artikel di blog anda
2. Klik kanan pada area blog atau artikel di blog anda, sehingga muncul tampilan gambar seperti berikut ini
   
   
3. Pilih menu Inspect Elemen, sehingga akan muncul menu bar dibagian bawah seperti gambar berikut ini
   
4. Klik tombol Inspect Element seperti yang ditandai pada panah di gambar berikut ini
   
   
5. Bawa kursor mouse ke bagian elemen untuk mengetahui kode template blog anda atau orang lain. Sehingga akan terlihat kode yang terdapat pada elemen tersebut. Untuk contoh cara mengetahui kode template blog telah saya buatkan seperti yang ada dibawah ini namun tidak semuanya. Selebihnya silahkan lakukan sendiri
   
   Contoh: kode header-outer
   
   Contoh: kode main-wrapper
   
   Contoh: kode sidebar
   
6. Selesai
7. Cara Mengetahui Kode Template Blog Menggunakan Chrome
8. Cara Mengetahui Kode Template Blog Menggunakan Opera

Jadi, dengan melakukan cara mengetahui kode template blog seperti yang telah saya jelaskan diatas maka akan lebih mudah bagi anda untuk mencari dan mengedit kode template blog anda. Awalnya saya ingin membuat video panduan tentang cara mengetahui kode template blog ini tapi karena koneksi tidak memungkinkan, untuk sementara videonya saya pending dulu. Sekian, terimakasih telah membaca cara mengetahui kode template blog

Cara Mengganti Background Blog Dengan Gambar - Terimakasih buat sist Farida Ratna Sari atas komentarnya Disini "gmn sih cara mengganti background polos putih menjadi gambar?? aku coba tambah url kok gak bisa2 ya.. gak muncul2 gambarnya.. apa kodenya salah atau gmn?? tlg di jelaskn ya... termksh. aku suka templatenya tp gak suka warna backgroundnya yg polos.. jd pingin q ganti gtuu" Artikel tentang cara mengganti background blog dengan gambar ini merupakan request dari mbak Farida

Dan ini adalah background blog milik mbak Farida yang telah saya ganti tampilannya, maaf ya mbak Farida yang penting masih terlihat link blognya kan? hehee


Berikut Cara Mengganti Background Blog Dengan Gambar

1. Silahkan cari kode-kode berikut untuk mengganti background blog dari setiap elemen blog yang akan diganti backgroundnya
2. Background Blog Keseluruhan
   Cari kode body {
   Letakkan kode background: url(pasang link gambar background disini) repeat-y center; diantara kode body yang telah ada
   Hasilnya
   body {
   color: #000000;
   background: url(pasang link gambar background disini) repeat-y center;
   ---
   }
3. Background Judul
   Cari kode #header-wrapper {
   Letakkan kode background: url(pasang link gambar background disini) repeat-x scroll left bottom; diantara kode #header-wrapper yang telah ada
   Hasilnya
   #header-wrapper {
   background: url(pasang link gambar background disini) repeat-x scroll left bottom;
   height:90px;
   width:100%;
   }
   
   Catatan: Beberapa template ada yang menggunakan #header-outer, #header-inner
4. Background Posting atau Artikel Blog
   Cari kode #main-wrapper {
   Letakkan kode background: url(pasang link gambar background disini)repeat-y; diantara kode #main-wrapper yang telah ada
   Hasilnya
   #main-wrapper {
   background: url(pasang link gambar background disini)repeat-y;
   float:left;
   ----
   }
   
   Catatan: Beberapa template ada yang menggunakan #content-wrapper
5. Background Diluar Area Posting
   Cari kode #outer-wrapper {
   Letakkan kode background: url(pasang link gambar background disini)none repeat scroll 0 0; diantara kode #outer-wrapper yang telah ada
   Hasilnya
   #outer-wrapper {
   background: url(pasang link gambar background disini)none repeat scroll 0 0;
   border:1px solid #000;
   ---
   }
   
   Catatan: Beberapa template ada yang menggunakan #inner-wrapper
6. Background Sidebar
   Cari kode #sidebar h3{
   Letakkan kode background:#9F9E9E url() repeat-x top;letter-spacing:-.001em;font:normal 12px Arial;color:#eee; diantara kode #sidebar yang telah ada
   Hasilnya
   #sidebar h3{
   background:#9F9E9E url() repeat-x top;letter-spacing:-.001em;font:normal 12px Arial;color:#eee;
   ---
   }
   
   Catatan: Beberapa template ada yang menggunakan #sidebar h2, .sidebar h2, .sidebar h3
7. Background Footer
   Cari kode #footer{
   Letakkan kode background: url() repeat-x scroll bottom;font:normal 12px Arial; diantara kode #footerr yang telah ada
   Hasilnya
   #footer{
   background: url() repeat-x scroll bottom;font:normal 12px Arial;
   ---
   }
   
   Catatan: Beberapa template ada yang menggunakan #footer-wrapper, .footer

Jika semua kode yang anda cari tidak ada didalam template blog anda, silahkan sesuaikan dengan nama elemen yang anda cari. Misalnya body, header, sidebar, main, content, dan footer. Dan jika masih belum menemukan kode-kodenya silahkan baca artikel berikut ini Cara Mengetahui Kode Template Blog Secara Profesional

Terimakasih, semoga artikel ini bermanfaat dan memudahkan kita dalam mengedit blog kita. Jika ada pertanyaan, silahkan tinggalkan komentar untuk artikel ini, Cara Mengganti Background Blog Dengan Gambar

Menjadikan Homapage Dua Kolom Posting Blogspot sebenarnya anda tidak perlu repot-repot harus menambahkan atau mengedit kode template blog anda karena dengan menggunakan mesin pencari dengan kata kunci template dua kolom posting maka anda akan menemukan beberapa blog yang menyediakan template dengan homepage dua kolom posting. Jika anda tetap kesulitan menjadikan homepage dua kolom posting, untuk panduannya silahkan buka di cara membuat dua kolom posting homepage blogspot. Di artikel tersebut telah saya jelaskan secara detail dan jelas.

Seperti halnya blog ini yang memiliki tiga kolom posting di homepage, awalnya memang saya ingin meniru sebuah tampilan website yang memiliki lima kolom posting homepage dan tanpa sidebar namun setelah salah satu artikel dibuka maka sidebar pun tampil tapi karena beberapa alasan maka saya urungkan niat meniru tersebut karena takut melanggar hak cipta dari sang pemilik website itu sehingga saya biarkan sidebar tetap ada di homepage atau sesuai dengan template aslinya dan hanya beberapa poin yang masih meniru website tersebut


Selain itu, dengan memilih tampilan template seperti yang saya gunakan di blog ini, memang ada keuntungan tersendiri untuk perkembangan blog ini. Seperti yang telah saya rasakan saat ini yaitu mendapatkan PR 1 dalam waktu singkat. Kok bisa? Maaf kalau ini tetap menjadi rahasia saya :)

Jadi, menjadikan homepage dua kolom posting atau lebih menjadikan halaman depan blog tampil minimalis sehingga para pengunjung blog tidak terlalu capek untuk melakukan scrolling ke bawah. Dan itulah mengapa semua template toko online menggunakan 4 - 5 kolom di halama depannya karena mereka memiliki tujuan terhadap tampilan tersebut yaitu meningkatkan penjualan!

Terakhir, semua pilihan ada ditangan anda untuk memilih menggunakan template atau mengedit dan menjadikannya dua kolom atau lebih. Terimakasih telah membaca artikel wacana ini, Menjadikan Homapage Dua Kolom Posting Blogspot

Cara Membuat Dua Kolom Posting Homepage Blogspot ini merupakan artikel request dari mas Ibnu Syamsun dalam komentarnya disini oke mbak ane sukses menerapkan di blog ane makasih tutorialnya sangat jelas. request "membuat posting 2 kolom di hompage dong" :) Untuk membuat dua kolom posting homepage blogspot ini sebenarnya sudah ada di mesin pencari Google namun sedikit ada tambahan yang perlu saya benahi dari beberapa artikel tentang cara membuat dua kolom posting homepage blogspot agar lebih baik lagi. Berikut gambar dari hasil cara membuat dua kolom posting homepage blogspot yang telah saya buat di blog saya sendiri


Berikut Cara Membuat Dua Kolom Posting Homepage Blogspot

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari Kode ]]></b:skin>
4. Letakkan kode berikut dibawah kode ]]></b:skin>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style>
   .post {width:250px;height:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
   </style>
   </b:if>
   
   Tambahan 1 :
   
   • Jika anda ingin menambahkan background cukup memasang kodenya saja seperti berikut ini
     .post {background:#00000;width:250px;height:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
   • Atur lebar dan tinggi postingan
     width:250px;height:400px;
   • Atur jarak antar postingan
     margin:0 20px 5px 0;
   
   Tambahan 2 :
   Jika di blog anda terdapat Readmore, atur juga jumlah kata, lebar dan tinggi gambar yang terdapat didalam kode Readmore tersebut
   Contoh:
   <script type='text/javascript'>
   var thumbnail_mode = "float" ;
   summary_noimg = 250; ← perkecil angka ini
   summary_img = 250; ← perkecil angka ini
   img_thumb_height = 200; ← perkecil angka ini
   img_thumb_width = 200; ← perkecil angka ini
   </script>
   <script type='text/javascript'>
   .............
   </script>
5. Selanjutnya cari kode .post {
   Pasang auto diantara kode jarak dalam .post {
   Sebelum
   .post {margin:0.5em 0 1.5em;}
   Sesudah
   .post {margin:0.5em auto 0 1.5em;}
   
   Penambahan auto ini sebenarnya hanya tambahan saja agar jarak antar artikel sesuai. Bisa anda tambahkan, bisa juga tidak, namun untuk mengetahuinya apakah perlu menambahkan auto, silahkan preview blog terlebih dahulu dan bandingankan hasilnya antara ada dan tidak adanya auto
6. Setelah selesai. Preview blog anda terlebih dahulu dan lihat hasilnya. Jika hasilnya seperti gambar berikut ini, dimana link Posting Lama terlihat seperti gambar berikut ini
   
   
   
   
   Pada gambar diatas, link Posting Lama atau sejenisnya berada sejajar dengan artikel blog dan untuk mengembalikan ke posisi sebenarnya yaitu berada di bawah kanan, silahkan cari kode <b:include name='nextprev'/> dan tambahkan kode <div style='clear: both;'/> tepat diatas <b:include name='nextprev'/>
   Hasilnya:
   <div style='clear: both;'/>
   <b:include name='nextprev'/>
7. Preview lagi blog anda
8. Selamat! Halaman depan atau homepage blog anda sudah berubah menjadi dua kolom posting

Jika ada pertanyaan tentang cara membuat dua kolom posting homepage blogspot ini, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Cara Membuat Dua Kolom Posting Homepage Blogspot

Cara Membuat Satu Kolom Widget Diatas Footer adalah juga sama seperti membuat satu kolom dibawah header atau diatas header dan tentunya lebih mudah dalam membuatnya. Kenapa saya mengatakan sama dalam membuat satu kolom widget diatas footer dengan diatas header? karena sama-sama dalam satu template dengan lebar template yang sama :) dan yang membedakan hanya pada tata letak saja. Silahkan anda bandingkan tata letak pada artikel yang telah saya jelaskan sebelumnya (hasil membuat satu kolom) dengan hasil setelah anda menerapkan artikel ini, cara membuat satu kolom diatas footer


Berikut Cara Membuat Satu Kolom Widget Diatas Footer

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Salin kode berikut tepat diatas kode ]]></b:skin>
#oneupperfooter{margin:10px 0;padding:2px;width:100%;}
5. Cari kode berikut ini <div id='footer'>
6. Letakkan kode berikut ini tepat dibawah <div id='footer'>
   <b:section class='footer' id='oneupperfooter' preferred='yes'/>
   Sehingga hasilnya seperti berikut ini
   <div id='footer'>
   <b:section class='footer' id='oneupperfooter' preferred='yes'/>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasil di menu Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Okey, semoga artikel cara membuat satu kolom widget diatas footer ini memberikan manfaat dan mudah dibuat untuk dipasang diblog anda. Terimakasih, silahkan tinggalkan komentar anda jika ada permasalahan dalam membuat satu kolom widget diatas footer

Cara Membuat Dua Kolom Widget Dibawah Postingan adalah cara yang sama ketika membuat dua kolom dibawah header atau kolom-kolom widget yang lainnya hanya perbedaann kode, perbedaan tata letak dan perbedaan cara saja. Seperti halnya fungsi dan manfaat saat membuat satu kolom widget dibawah postingan, manfaat dua kolom widget ini juga lebih maksimal karena ada link artikel yang sejajar antara kolom yang satu dengan yang lainnya (kolom kanan kiri) seperti yang terlihat pada blog saya ini, sayang kolom yng sebelah kanan masih kosong :)

Cara membuat dua kolom widget dibawah postingan ini sebenarnya ada dua cara yang bisa dilakukan yaitu kita bisa benar-benar membuat dua kolom dibawah postingan dan hasilnya bisa terlihat di menu Tata Letak, sedanghkan yang satunya lagi, kita membuat dua kolom dibawah postingan tapi hasilnya tidak terlihat di menu Tata Letak seperti yang saya gunakan pada template blog ini (nanti akan saya share juga..)


Berikut Cara Membuat Dua Kolom Widget Dibawah Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode berikut ini
   #main-wrapper {float:left;margin-right:10px;overflow:hidden;width:507px;word-wrap:break-word;}
4. Letakkan kode berikut tepat dibawah kode no.3
   #twounderposting {width:100%;float:center;margin:10px 0;padding:0px;}
   #twounderpostingleft{width: 45%;float: left;}
   #twounderpostingright{width: 45%;float: right;}
   
   • Atau jika anda tidak menemukan kode #main-wrapper karena perbedaan kode pada template, cari saja kode ]]></b:skin>
   • letakkan kode berikut tepat diatas kode ]]></b:skin>
     #twounderposting {width:100%;float:center;margin:10px 0;padding:0px;}
     #twounderpostingleft{width: 45%;float: left;}
     #twounderpostingright{width: 45%;float: right;}
5. Cari kode berikut ini
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
   </b:section>
   </div>
6. Letakkan kode berikut sebelum kode penutup pada no.5
   <div id='twounderposting'>
   <div id='twounderpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twounderpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twounderpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
   <b:section class='main' id='twounderpostingright' preferred='yes' style='float:right;'/>
   </div>
   </div>
   Sehingga hasilnya akan terlihat seperti berikut ini
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
   </b:section>
   <div id='twounderposting'>
   <div id='twounderpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twounderpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twounderpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
   <b:section class='main' id='twounderpostingright' preferred='yes' style='float:right;'/>
   </div>
   </div>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda
Sekian, jika ada permasalahan dalam membuat dua kolom widget dibawah postingan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Dua Kolom Widget Dibawah Postingan

Cara Membuat Satu Kolom Widget Dibawah Postingan sama halnya dengan membuat satu kolom diatas postingan, hanya beda tempat saja dan tentunya beda penempatan kode html. Membuat satu kolom widget dibawah postingan menurut saya lebih banyak keuntungannya jika meletakkannya tepat berada dibawah artike terkait artikel blog karena pada satu kolom tambahan tersebut bisa terpasang iklan (mis; AdSense) yang bisa 'menjebak' pengunjung blog untuk melakukan klik terhadap link iklan yang dikira link artikel blog, tentunya dengan sedikit trik agar mereka bisa mengklik secara valid! Membuat satu kolom widget dibawah postingan bisa anda buat dengan mengikuti beberapa cara sederhana berikut ini


Berikut Cara Membuat Satu Kolom Widget Dibawah Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode berikut ini
   #main-wrapper {float:left;margin-right:10px;overflow:hidden;width:507px;word-wrap:break-word;}
   
4. Letakkan kode berikut tepat dibawah kode no.3
   #oneunderposting {background:#ffffff;width:100%;margin:0 0 0.5em;padding:0.5em;}
   Atau jika anda tidak menemukan kode #main-wrapper karena perbedaan kode pada template, cari saja kode ]]></b:skin> dan letakkan kode #oneunderposting {background:#ffffff;width:100%;margin:0 0 0.5em;padding:0.5em;} tepat berada diatas kode ]]></b:skin>


5. Selanjutnya cari kode berikut ini
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
   </b:section>
   </div>


6. Letakkan kode berikut sebelum kode penutup pada no.5
   <b:section class='main' id='oneunderposting' showaddelement='yes'/>
   Sehingga hasilnya akan terlihat seperti berikut ini
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
   </b:section>
   <b:section class='main' id='oneunderposting' showaddelement='yes'/>
   </div>


7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak


8. Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Sekian, jika ada permasalahan dalam membuat satu kolom widget dibawah postingan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Satu Kolom Widget Dibawah Postingan

Cara Membuat Dua Kolom Widget Diatas Postingan merupakan kelanjutan dari artikel sebelumnya yaitu cara membuat satu kolom widget diatas postingan yang hanya membaginya menjadi dua kolom widget seperti yang dijelaskan pada artikel ini, cara membuat dua kolom widget diatas postingan


Berikut Cara Membuat Dua Kolom Widget Diatas Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   #twoupperposting{margin:10px 0;padding:0px;width:100%;}
   #twoupperpostingleft{width: 45%;float: left;}
   #twoupperpostingright{width: 45%;float: right;}
5. Cari kode <div id='main-wrapper'>
6. Letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
   <div id='twoupperposting'>
   <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
   </div>
   </div>
   
   Sehingga hasilnya seperti ini
   
   <div id='main-wrapper'>
   <div id='twoupperposting'>
   <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
   </div>
   </div>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   <b:section class='main' id='mainbottom' showaddelement='yes'/>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Kode diatas bekerja di template blog saya dan setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Alangkah senangnya saya jika anda berkenan untuk meninggalkan komentar anda dalam artikel cara membuat satu kolom widget diatas postingan ini karena saya akan menjadi Follower blog anda. Terimakasih telah membaca artikel ini, Cara Membuat Dua Kolom Widget Diatas Postingan

Cara Membuat Satu Kolom Widget Diatas Postingan adalah kita akan menambahkan beberapa kolom yang lebarnya sejajar dengan kolom postingan atau artikel blog. Kita tidak hanya bisa membuat satu kolom widget diatas postingan saja tapi selama lebar postingan blog anda mencukupi untuk dipasang kolom, maka anda bisa membuatnya lebih dari satu kolom widget. Dua kolom widget, tiga kolom widget bahkan penempatannya tidak hanya bisa dipasang diatas postingan saja, dibawah area tersebut juga bisa ditambahkan beberapa kolom. Dan pada artikel ini, kita akan membahas cara membuat satu kolom widget diatas postingan


Berikut Cara Membuat Satu Kolom Widget Diatas Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   .upperposting{width: 100%;padding:10px 0px 10px 10px;background:#fff;margin:0px 0px 10px 0px;text-align:left;}
   .upperposting .widget{}
5. Cari kode <div id='main-wrapper'>
6. Letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
   <b:section class='upperposting' id='upperposting' preferred='yes'/>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Selanjutnya jika ada permasalahan dalam mengikuti panduan ini, silahkan tinggalkan komentar untuk artikel ini, Cara Membuat Satu Kolom Widget Diatas Postingan

Cara Membuat Tiga Kolom Widget Dibawah Header ini sudah tidak ada uraian khusus lagi, cara membuatnya juga sama dengan membuat dua kolom widget dan kita langsung saja pada penerapan dari artikel ini, yaitu cara membuat tiga kolom widget dibawah header


Berikut Cara Membuat Dua Kolom Widget Dibawah Header

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   #triunderheader {clear:both;} .triwidget {}
5. Cari kode <div id='main-wrapper'>
6. Letakkan kode berikut ini tepat diatas kode <div id='main-wrapper'>
   <div id='triunderheader'>
   <div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
   <b:section class='header' id='kolom1' preferred='yes' style='float:left;'/>
   </div>
   <div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>
   <b:section class='header' id='kolom2' preferred='yes' style='float:center;'/>
   </div>
   <div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
   <b:section class='header' id='kolom3' preferred='yes' style='float:right;'/>
   </div>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat tiga kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat tiga kolom widget dibawah header

Cara Membuat Dua Kolom Widget Dibawah Header merupakan kelanjutan dari artikel sebelumnya yaitu membuat satu kolom widget diatas dan dibawah header yang pada artikel selanjutnya akan dibahas cara membuat tiga kolom widget dibawah header. Cara membuat dua kolom widget dibawah header ini juga sama ketika anda membuat kolom-kolom yang lain yang masih berada di area header blog serta memiliki fungsi dan kegunaan yang sama.


Berikut Cara Membuat Dua Kolom Widget Dibawah Header

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Salin kode berikut tepat diatas kode ]]></b:skin>
   #twounderheader { clear:both; } .twounderheader-widget { padding:0px 10px 10px 10px; }
5. Cari kode <div id='main-wrapper'>
6. Pasang kode berikut tepat diatas kode <div id='main-wrapper'>
   <div id='twounderheader'>
   <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
   <b:section class='header' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
   <b:section class='header' id='col2' preferred='yes' style='float:left;'/>
   </div>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat dua kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat dua kolom widget dibawah header

Cara Membuat Satu Kolom Widget Dibawah Header masih sama dengan ketika anda membuat satu kolom widget diatas header dan bedanya hanya terletak pada penempatan saja. Seperti yang telah saya jelaskan pada artikel sebelumnya, cara membuat satu kolom widget dibawah header ini juga memberikan manfaat bagi anda untuk memasang beberapa konten yang ingin anda tampilkan dibawah header apalagi jika anda membuat dua atau tiga kolom widget. Silahkan anda pelajari cara membuat satu kolom widget dibawah header berikut ini


Cara Membuat Satu Kolom Widget Dibawah Header

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:sin>
4. Letakkan kode berikut diatas kode ]]></b:sin>
   #oneunderheader{margin:10px 0;padding:1%;width:100%;}
5. Cari kode berikut ini
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>
6. Letakkan kode berikut ini tepat dibawah kode </div> pada no.5
   <div id='oneunderheader'>
   <b:section class='header' id='oneunderheader' preferred='yes'/>
   </div>
   
   Sehingga hasilnya seperti berikut ini
   
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>
   <div id='oneunderheader'>
   <b:section class='header' id='oneunderheader' preferred='yes'/>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat satu kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat satu kolom widget dibawah header

Cara Membuat Satu Kolom Widget Diatas Header seperti yang terlihat pada gambar dibawah (panah merah) telah saya buat khusus untuk anda dengan cara yang mudah, anda bisa membuat satu kolom widget diatas header blog anda dengan mengikuti panduan cara membuat satu kolom widget diatas header. Dengan adanya tambahan satu kolom widget diatas header akan memberikan tambahan ruang dalam blog anda yang nantinya bisa anda gunakan untuk memasukkan konten-konten diluar topik blog anda atau dari dalam topik blog anda sendiri. Apalagi jika di area header blog ditambahkan lagi dua kolom atau tiga kolom widget maka anda akan lebih leluasa dalam memasukkan atau memasang konten-konten yang anda sukai.


Berikut Cara Membuat Satu Kolom Widget Diatas Header

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari Kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   #oneupperheader{margin:10px 0;padding:1%;width:100%;}
5. Cari kode berikut ini
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>
6. Letakkan kode berikut ini tepat dibawah <div id='header-wrapper'>
   <b:section class='header' id='oneupperheader' preferred='yes'/>
   Sehingga hasilnya seperti berikut ini
   <div id='header-wrapper'>
   <b:section class='header' id='oneupperheader' preferred='yes'/>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Sekian, jika ada ide lain dalam membuat satu kolom widget diatas header, mari kita diskusikan bersama dengan meninggalkan komentar di artikel ini Cara Membuat Satu Kolom Widget Diatas Header