Cara mempercepat loading blog lanjutan

Untuk mempercepat loading blog pertama kita harus test kecepatan blog kita. Dengan cara mengunjungi situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa skor kecepatan blog yang kalian dapatkan dari situs tersebut. Selanjutnya, ikuti langkah² dibawah ini.

Menambahkan attribute width dan height.

Untuk bagian posting, jika mengatur gambar ke small, medium, large atau x- large. Maka otomatis gambar itu sudah ada attribute width dan height. Jika Original attribute width dan height belum ada. Begitu juga dengan gambar yang kita masukan pada bagian blog lainnya. Seperti header, sidebar, footer, widget dan lain-lainnya. Contoh penambahan kode attribute width dan height:

1. Untuk kode HTML
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnyp40Sno04iAkvg7xdwbRS8Vsg6g30y6StRBalwX3KawJ-aHfk6s3-OAK18RRKoegMq7NmQX47qVXILVGMtFpmOylB5qiyYdxw98e0g0mKoeg-5JFgcCpFvXcAqR5pLfT_A1SEl608GG/s128/fandra-juani.jpg' width='32' height='32' />


2. Untuk kode CSS width:70px;height:70px;

Silakan tambahkan attribute width dan height disetiap gambar yang anda gunakan diblog.

Merubah ukuran asli dari sebuah gambar.

Contoh: Ukuran asli dari sebuah gambar adalah 400x800. Lalu kita upload ke posting blog, dan kita perkecil gambarnya, dengan pilihan Small, sehingga ukuran gambar menjadi 100x200. Itu berarti ukuran gambar yang kita gunakan hanya 100x200.

Agar loading blog lebih cepat, kita ubah dulu ukuran asli gambarnya dikomputer, dari 400x800 menjadi 100x200, setelah itu baru lah kita upload lagi ke blog, dan gantikan gambar sebelumnya dengan gambar baru. Jadi intinya, upload lah gambar dengan ukuran yang seperlunya. Maka loading blog akan jauh lebih cepat.

Mengganti server gambar blogger dengan google.

1. Buatlah entri baru, lalu masukan gambar ke posting.
2. Selanjutnya buka https://picasaweb.google.com/ di tab baru. Klik tulisan di sini. Jika ada gambar seperti dibawah ini.

3. Setelah terbuka, pilih Folder sesuai dengan nama yang anda gunakan di google.
4. Buka folder tersebut dan cari gambar yang sesuai dengan gambar yang baru saja anda masukan ke posting tadi.
5. Lalu klik gambar tersebut, setelah terbuka. Ambil URL nya, caranya klik kanan digambar, lalu klik copy image location.  
6. Setelaah itu kembali ke posting blog tadi, dan klik pada bagian HTML(disebelah compose).
7. Ganti URL gambar blogspot dengan url gambar dari google. Contoh:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdkPEy0_Ur-CGu9a6lMIMQIor2hXrZ-FjjAU43mzzZhg7fXl65bakzNUdSZxVIxWZwsMnZmc4u3zex7KxXqs-ODNSqVgjFZYGZIbQ-LCh9wAxO7uwWiZqud_tkhdwzkCIJN9aVmQCB4J9z/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdkPEy0_Ur-CGu9a6lMIMQIor2hXrZ-FjjAU43mzzZhg7fXl65bakzNUdSZxVIxWZwsMnZmc4u3zex7KxXqs-ODNSqVgjFZYGZIbQ-LCh9wAxO7uwWiZqud_tkhdwzkCIJN9aVmQCB4J9z/s1600/loading.jpg" /></a></div>

URL yang berwarna hitam diatas. Ganti dengan URL dari picasa web google. Contoh:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutQwgqXt9mYsuaWohByIh8HWedeq7Z63Vgkb6e_gDd1zVby2opd2ACLVGgMKY0oJFZ8tGAfN2W8FfDSWX4S-8dEN-5-WEwCSzRli5g2pGWOjUIdeo4R5dtvHz2x3lPOG4m-mmH-zoLRId/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutQwgqXt9mYsuaWohByIh8HWedeq7Z63Vgkb6e_gDd1zVby2opd2ACLVGgMKY0oJFZ8tGAfN2W8FfDSWX4S-8dEN-5-WEwCSzRli5g2pGWOjUIdeo4R5dtvHz2x3lPOG4m-mmH-zoLRId/s300/loading.jpg" /></a></div>
8. Selesai.

Setiap gambar yang kita masukan ke posting blog, maka otomatis gambar tersebut juga ada di picasa web album. Kenapa URL dari blogger harus diganti dengan URL gambar dari google. Karena server google lebih cepat dari blogger. Sehingga gambar akan lebih cepat dibuka.

Setelah melakukan 3 cara diatas, coba test lagi kecepatan blog anda ke situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa perubahan skor kecepatan blog yang kalian dapatkan. Contoh: Score kecepatan loading dari blog saya di situs http://gtmetrix.com/.

Cara mempercepat loading blog ini, merupakan lanjutan dari artikel sebelumnya, yaitu tentang tips dan trik mempercepat loading blog. Semoga bisa bermanfaat untuk anda.

Read More

Tanda Penulis di Kotak Komentar Blog

Cara membuat tanda penulis/author dikotak komentar blog. Seperti gambar dibawah ini. Tanda penulis berupa gambar, yang akan muncul ketika penulis memberikan komentar. Sehingga mudah untuk dibedakan yang mana author/pemilik blog dengan pengunjung yang memberikan komentar.

Untuk lebih jelasnya tentang cara membuat tanda penulis atau author dikotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Template.
2. Klik edit HTML dan cari kode ]]></b:skin> dan tempatkan kode berikut ini diatasnya.
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;
background-image:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRE0jFvrDdNyUm_qcSlhwtMlAe3FDhVznrDUm5XBrutdYf7rrjOGi-jDTHsTvAYcDDEAc4IF6lrDFoEnNdiextG8JG-19xh6s2-BlXZfklsdcSc6vWvCWF6R4OfLiMqUZW87VaHi0UvmwZ/s125/fandra%2520penulis.png);
background-position: top; float:right;width:125px;height:32px;margin:-16px 0px 0px 0px;
}
3. Save template, selesai.

Keteranga kode diatas:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRE0jFvrDdNyUm_qcSlhwtMlAe3FDhVznrDUm5XBrutdYf7rrjOGi-jDTHsTvAYcDDEAc4IF6lrDFoEnNdiextG8JG-19xh6s2-BlXZfklsdcSc6vWvCWF6R4OfLiMqUZW87VaHi0UvmwZ/s125/fandra%2520penulis.png merupakan url dari gambar yang akan ditampilkan.
• float:right; posisi gambar disebelah kanan.
• width:125px;height:32px; tinggi dan lebar gambar.
• margin:-16px 0px 0px 0px; mengatur posisi gambar agar tidak terkena komentar. Pengaturan kode: -16(kanan), 0(atas), 0(bawah), 0(kiri).

Gambar diatas menggunakan format PNG, dan background dibuat transparant. Jadi background gambar akan mengikuti warna background dari kotak komentar. Untuk membuat gambar transparan, baca di cara membuat gambar dengan background transparan. Dan silakan baca juga cara upload dan ambil url gambar, untuk memasukan gambar anda yang akan dijadikan tanda penulis.

Itulah sedikit cara desain blog yaitu tentang membuat tanda penulis dikotak komentar blog, agar pengunjung mengetahui siapa penulis atau pemilik dari blog. Silakan baca juga artikel lainnya, yang berhubungan dengan gambar. Seperti cara menambahkan gambar disamping judul posting atau cara memasang icon berbeda disetiap judul widget. Dan juga artikel lainnya.

Semoga bisa bermanfaat untuk anda.

Read More

Menu Vertical Fandra Juani

Menu Vertical Fandra Juani. Menu vertical ini berisi tulisan dengan warna yang berbeda disetiap hurufnya, ditambah dengan icon disamping kirinya. Icon yang dipasang dibuat dengan bentuk bulat. Dan ketika disentuh kursor mouse icon tersebut akan berputar.

• Fandra Juani
• Facebook
• Twitter
• Google +

Cara membuatnya ikuti langkah² dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Selanjutnya, pilih tambahkan Gadget, dan pilih HTML/Javascript. Lalu masukan kode dibawah ini.
<style>
#tentang{background:transparent;height:150px}
#tentang ul{float:left}
#tentang ul li{width:200px;float:left;list-style:none}
#tentang ul li span{float:left;font-family:Trebuchet;text-transform:uppercase;font-size:14px;padding:0 0 0 10px;text-shadow:2px 2px 5px #1780dd;font-weight:bold}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}
t{font-size:180%;color:yellow}
x{font-size:180%;color:#3af}
#tentang ul li span:hover{padding:0 0 0 20px}
#tentang ul li img{padding:0;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;float:left;position:relative;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .8s ease-in-out}
#tentang ul li img:hover{-o-transform:scale(1) rotate(360deg);-moz-transform:scale(1) rotate(360deg);-webkit-transform:scale(1) rotate(360deg)}</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><img alt="Tentang Fandra Juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKnyp40Sno04iAkvg7xdwbRS8Vsg6g30y6StRBalwX3KawJ-aHfk6s3-OAK18RRKoegMq7NmQX47qVXILVGMtFpmOylB5qiyYdxw98e0g0mKoeg-5JFgcCpFvXcAqR5pLfT_A1SEl608GG/s128/fandra-juani.jpg' width='32' height='32' title="About Me"/><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>

<li><a href='https://www.facebook.com/fandra.juani'title='My Facebook'><img alt="fandra juani"src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz7tFq8Edp_LB2aEeLIyQAaUAN6QC4v0-VoBHEf1xELlG8RhhU01kVsv8m870zHjqyiZhRvPGS5UKK1IhTAitxFKBMewV8Dx1ClnER4SCsMwpVKRXozc73OCOyacN5MeJ0clUe_9vXPPO/s128/Fb.jpg' width='32' height='32' title="Facebook Fandra Juani"/><span><t>F</t>a<h>c</h><g>e</g><j>b</j><m>o</m><r>o</r><h>k</h></span></a></li>

<li><a href='https://twitter.com/fandrajuani' title='My Twitter'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihGmR04hhNq7E78vsxXMsORQMkPMKjj-nn2sonB10I-f-Cj2zxE99va9mws6NXoF4r_7vyhIPhLXt53AoAUsOgLqNuVRu2Yfs-uzVXaEVku4cE03gy82DQb43Pjnnbce73QXeFkGwE5enP/s128/Twitter.jpg' width='32' height='32' title="Twitter Fandra Juani"/><span><x>T</x><o>w</o><m>i</m>t<j>t</j><h>e</h><r>r</r></span></a></li>

<li><a href='https://plus.google.com/u/0/110277074823916598610/posts' title='My Google+'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy5xEEsQE8-Htnt3wM8SJZ61FLQ7PtvltSC8S_PBe2V8BX1tlUSVs1WkDjVfSFjwWQsxM7dZpVgJ73rCJnqJ-Qnr7QpWr0O1WzHkC1x5lLCFHm2RvoafYC1aBjzE1MfM9BkqVRBjk_3-o4/s32/G%252B.jpg' width='32' height='32' title="Google+ Fandra Juani"/><span><l>G</l><h>o</h><r>o</r><m>g</m><k>l</k><h>e</h> <g>+</g></span></a></li>
</ul>
</div>
3. Save Gadget, Selesai.

Keterangan Kode:  #tentang{background:transparent;height:150px}atur tinggi menu vertical sesuai dengan tinggi dari menu kalian.

Keterangan kode lainnya, bisa di pelajari pada daftar artikel dibawah ini.

1. Membuat menu vertical sederhana.
2. Tulisan dengan warna yang berbeda. 
3. Membuat icon sendiri untuk website. 
4. Cara upload dan ambil URL Gambar.
5. Membuat gambar bentuk bulat diblog.
6. Membuat gambar berputar diblog.

Silakan berkreasi, dan semoga bisa bermanfaat untuk anda.

Read More

Menghilangkan kotak komentar pada halaman tertentu diblog

Menghilangkan kotak komentar pada halaman tertentu diblog. Untuk suatu halaman, seperti halaman contact, tentang/profil, atau pun juga daftar isi. Beberapa orang mungkin tidak menginginkan kotak komentar dibawahnya. Agar halaman tersebut bisa terlihat lebih rapi, dan berbeda dengan halaman-halaman lainnya.

Untuk melihat contohnya: silakan lihat halaman hubungi pada menu blog ini atau halaman tentang saya(jika masih saya gunakan). Berikut ini adalah cara agar kotak komentar pada suatu halaman diblog hilang. Tapi pada halaman lainnya, kotak komentar tetap ada. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan post.

2. Selanjutnya, buatlah entri baru atau buka artikel lama saja.

3. Lalu klik Pilihan(letaknya disebelah kanan bawah, diurutan Setelan entri).

4. Setelah itu, beri tanda Jangan bolehkan pada pilihan Komentar pembaca. Seperti gambar dibawah ini.

5. Klik selesai, lalu silahkan dipublikasikan(untuk entri baru) atau Perbarui(pada artikel lama). Dan lihat halaman tersebut, kotak komentar akan hilang. Selesai.

Setelah melakukan cara diatas. Ketika kamu membuat entri baru, coba cek pengaturan pilihan, biasanya tanda masih di Jangan bolehkan pada pilihan komentar pembaca. Ganti menjadi izinkan, agar entri baru tersebut dapat dikomentari oleh pembaca. Untuk entri baru selanjutnya. blogger akan mengatur otomatis, pengaturan komentar pembaca pada pilihkan bolehkan.

Silahkan dibaca juga cara-cara membuat suatu halaman blog berbeda dengan halaman lainnya. Seperti menghilangkan sidebar blog pada halaman tertentu, widget2 dikiri dan kanan blog akan dihilangkan. Atau baca juga artikel tentang background berbeda dihalaman berbeda, kita dapat memberi backcground pada halaman tertentu.

Dan silahkan baca juga artikel yang berhubungan dengan kotak komentar, yaitu tentang cara memasang scroll dikotak komentar blog, untuk mempersingkat tampilan kotak komentar jika sudah ada banyak komentarnya. Dan juga artikel-artikel lainnya. Semoga bermanfaat untuk anda.

Read More

Cara membuat dan memasang favicon blog

Cara membuat dan memasang favicon blog. Favicon atau gambar icon yang berada diatas bar address dari browser yang kita gunakan. Seperti contoh gambar dibawah ini.

Cara membuat favicon blog.

1. Buatlah favicon sendiri diphotoshop, paint atau program gambar lainnya. Atau bisa juga gunakan foto anda sendiri untuk dijadikan favicon.
2. Selanjutnya ganti ukuran gambar menjadi 48x48 atau 32x32, atau ukuran terkecil 16x16, agar gambar berbentuk bujur sangkar. Cara mengganti ukuran gambar baca di cara membuat icon untuk website. 
3. Setelah selesai merubah ukuran gambar, simpan gambar tersebut dengan format JPG atau save dalam format PNG jika ingin menggunakan gambar dengan background transparant.

Cara memasang favicon diblog.

1. Pertama upload gambar yang akan dijadikan favicon, ke blog lalu ambil url gambarnya. Silakan baca disini tentang cara upload dan ambil url gambar.
2. Setelah itu, masukan url gambar tadi ke format kode seperti dibawah ini.
<link href='URL gambar kamu' rel='shortcut icon'/>
3. Lalu buka pengaturan Template, klik edit HTML, dan cari kode <head>
4. Dan letakan kode favicon dari langkah 2 ke bawah <head>. Contoh:
<head>
<meta content='A87E01E095BC5007155087A5ECD3A506' name='msvalidate.01'/>
......
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
......

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbg79Jv8uvkkgLV2NMutRIEQ8PHM2gzgb8nhQXgV9ISSbrYNfRc6QWruFSyKZiKpyuTA_-WJLc8Quqc9FSh4Ll31UW8johB561TuWXe9_lfCq0AcPMG4Qz9YJGi5sdWs8_TwPbsIrXcMI/s48/Fandra-Juani.png' rel='shortcut icon'/>
5. Terakhir save template, selesai.

Sebenarnya, kita bisa mengganti favicon langsung dari blogger, yaitu dengan mengupload gambar dengan bentuk bujur sangkar di pengaturan Tata Letak > edit favicon > Upload gambar > Simpan. Kekurangannya gambar tidak akan langsung mengganti favicon di blog, kita harus menunggu dulu blogger untuk mengubah favicon yang kita gunakan. Mungkin bisa seharian.

Berbeda dengan menempatkan kode dibawah <head>, setelah di save template, favicon blog akan langsung terganti dengan gambar yang kita upload. Gambar favicon yang saya gunakan itu berformat PNG, background akan tetap transparent. Berbeda dengan menggunakan format JPG. Walaupun kita sudah edit gambar dengan background transparant, hasilnya gambar tetap akan ada backroundnya, warna backgroudnya putih.

Silakan dicoba dan Semoga bisa bermanfaat untuk anda.

Read More

Fungsi Fixed dan Cara Menggunakannya

Belajar fungsi kode Fixed dan cara menggunakannya diblog. Fixed merupakan kode css yang berarti menetapkan, dalam penggunaannya, fixed akan membuat posisi widget atau gadget menjadi menetap. Atau posisinya akan tetap disitu² saja. Walaupun kita mengarahkan mouse sampai kebawah. Untuk lebih jelasnya silakan lihat gambar dengan tulisan Contoh penggunaan kode fixed dibawah ini dibawah kiri. 

Dari contoh, posisi gambar tetap, walaupun mouse diarahkan ke atas atau bawah. Bagaimana membuatnya, silakan baca artikel cara membuat menu menempel diblog.

Setelah selesai membaca dan mencoba cara membuat menu menempel diblog. Sekarang saya beri contoh penggunaan kode fixed pada bagian header blog, sedikit lebih rumit dari cara sebelumnya. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Lalu klik Desainer Template > tingkat lanjut > Tambahkan CSS.
3. Copy kode dibawah ini. Lalu pastekan di kotak pada Tambahkan CSS.
#header {
  width: 100%;
  position: fixed;
top: 0px;
  left: 0px;
  right: 0px;
height: 88px;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 10px;
z-index: 99;
white-space: nowrap;
background-color: #33aaff;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #1780dd 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
4. Maka tampilan header blog akan menetap, tapi masalahnya jika header kita beri fixed, bagian posting(main) dan juga sidebar, posisinya akan naik. Ini dikarenakan posisi pertama dalam sebuah template itu adalah header, ketika header diberi fungsi fixed, maka akan ada kekosongan diposisi pertama, sehingga posisi kedua(main dan sidebar) akan naik menjadi posisi pertama.
5. Untuk mengatur main(posting) dan sidebar turun, tambahkan kode berikut dibawah kode dari langkah 3 tadi.
#main{margin:40px 0px 0px 0px;}
.sidebar{margin:40px 0px 0px 0px;}

Keterangan kode:
#main untuk bagian posting
.sidebar untuk bagian widget kanan dan kiri blog.
40px 0px 0px 0px untuk mengatur posisinya, atas, kanan, bawah, kiri.
6. Atur sesuai dengan yang kalian inginkan. Setelah itu baru save template. Selesai.

Sekarang, Pertanyaannya, berapa banyak widget yang anda gunakan diblog??? Jika kita hanya mengatur header saja, apalagi menggunakan background warna. Maka widget/gadget lain yang ada di bagian header akan tertutup/tidak terlihat.

Solusinya, kita harus memberikan fungsi fixed juga pada gadget lain yang ada diheader. Contoh: Misalkan anda menggunakan 2 Gadget lain pada bagian header, seperti contoh dibawah ini.

1. Gadget Menu Laman.
2. Gadget Kotak search.

Kita cari dulu kode id dari kedua Gadget/widget diatas. Cara mencarinya bisa dibaca di membuat cara membuat menu menempel diblog. Berikut contoh dari kedua kode id diatas:

1. PageList1
2. CustomSearch1

Setelah ketemu semua kode, selanjtunya menambahkan satu persatu kode tersebut dengan fungsi fixed. Contoh Dari Keseluruhan kode diatas.

#PageList1{
width: 100%;
  position: fixed;
  top: 0px;
  left: 790px;
  right: 0px;
  height: 30px;
z-index: 99;
white-space: nowrap;
}

#CustomSearch1{
width:30%;
position:fixed;
top:0px;
right:0px;
margin:40px 0px 0px 0px;
z-index:99;
white-space:nowrap}

Jika sudah memasang background pada header, gadget yang lain tidak perlu diberi background. Cukup dengan mengatur posisinya saja, atur kode width: top, right, dan margin untuk mengatur posisi widget. Semoga Bermanfaat.

Contoh penggunaan kode fixed dibawah ini

Read More

Menghilangkan sidebar blog pada halaman tertentu

Cara menghilangkan sidebar blog pada halaman atau posting tertentu. Sidebar hanya akan disembunyikan pada halaman yang diatur saja. Pada halaman yang lain, sidebar akan tetap ada. Seperti halaman posting ini, sidebar tetap ada. Berbeda dengan halaman hubungi yang ada dimenu blog ini, sidebarnya hilang.

Untuk lebih jelasnya tentang cara menghilangkan atau menyembunyikan sidebar pada halaman tertentu. Silakan ikuti langkah-langkah dibawah ini.

1. Pertama Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Lalu klik edit HTML dan cari kode </head>.
3. Setelah itu copy kode berikut ini dan pastekan di atas </head>
<b:if cond='data:blog.url == &quot;http://fandrajuani.blogspot.com/p/daftar-isi_12.html&quot;'>
<style type='text/css'>
.main-inner .columns{padding-left:0;padding-right:0}
.main-inner .column-left-outer{display:none}
.main-inner .column-right-outer{display:none}
</style>
</b:if>
4. Save Template, selesai.

Keterangan kode:

• http://fandrajuani.blogspot.com/p/daftar-isi_12.html URL dari halaman posting.
• .main-inner .columns{padding-left:0;padding-right:0} membuat halaman posting lebar hingga ke bagian sidebar.
• .main-inner .column-left-outer{display:none} menyembunyikan sidebar kiri.
• .main-inner .column-right-outer{display:none} menyembunyikan sidebar kanan.

Jika ingin menyembunyikan sidebar tanpa memperlebar halaman posting. Letakan kode berikut ini diatas </head>

<b:if cond='data:blog.url == &quot;http://fandrajuani.blogspot.com/p/hubungi.html&quot;'>

<style type='text/css'>

.sidebar{display:none}

</style>

</b:if>

Keterangan kode: .sidebar{display:none} kode untuk menyembunyikan sidebar tanpa memperlebar ukuran halaman posting.

Dari kedua cara diatas kita dapat menyembunyikan Sidebar blog sesuai dengan keinginan kita. Pertama kita dapat menyembunyikan sidebar tanpa menghilangkan ukurannya, dengan begitu ukuran dari halaman posting tetap akan sama seperti ada sidebar. Kedua, Sidebar disembunyukan dan ukurannya dihilangkan, sehingga membuat halaman posting melebar sampai ke sidebar.

Dengan menyembunyikan sidebar pada halaman tertentu, maka loading dari halaman tersebut akan lebih cepat. Karena widget2 atau gadget yang ada disidebar disembunyikan. Silakan baca juga cara menghilangkan kotak komentar blog pada halaman tertentu, untuk membuat perbedaan pada suatu halaman. Itulah sedikit tips dan trik tentang cara menghilangkan sidear blog pada halaman tertentu, yang dapat digunakan sebagai tambahan pilihan dalam mendesain blog.

Semoga Bermanfaat.

Read More