Apa itu halaman statis? Halaman statis atau static page di blogger merupakan halaman independent/ tersendiri yang dibuat oleh author blog untuk tujuan tertentu. Sebagai contoh static page digunakan oleh para blogger untuk menampilkan profil blognya atau biasa kita kenal About us yang bisa kita tenukan di menu navigasi. Ada juga yang membuatnya untuk menampilkan forum di blog ataupun contact author itu sendiri.

Dalam keadaan default di blogger jika kita membuat static page maka tampilannya akan  seperti halaman postingan biasa. Lalu bagaimana cara merubahnya agar tidak biasa? Saya ambil contoh untuk halaman about us, jika kita menampilkan halaman tersebut tanpa sidebar dan comment tentu lebih baik bukan. Lalu bagaimana cara membuatnya?

Pertama siapkan gula, kopi dan air panas terlebih dahulu. Kemudian buat kopi dan hidangkan bersama pisang goreng... #biar lebih enjoy ngeblognya...hehe. Oke kita mulai saja cara membuat static page blogger tanpa sidebar dan comment.

• Back up terlebih dahulu template anda untuk berjaga-jaga jika terjadi kesalahan fatal
• Masuk ke menu edit template
• Kemudian cari kode  ]]></b:skin> (lebih mudah dengan ctrl+F)
• Kemudian letakan kode berikut dibawahnya:

<b:if cond='data:blog.pageType'>

<style>

.sidebar,.comments {display:none;}

#main-wrapper{width: 100%}

</style>

</b:if>

• Kemudian save 

Keterangan: ganti kode #main-wrapper,.sidebar,.comment sesuai nama kode css yang digunakan pada template.

Untuk melihat hasilnya diharuskan sudah memiliki static page di blog. Selamat mencoba....

Pernah berkunjung ke blog hongkiat.com? Kalo belum silahkan mampir sebentar dan lihat ada apa aja disana, ada yang bagi-bagi sembako lho... hehe. Menarik, itu yang saya rasakan ketika berkunjung ke blog tersebut. Blog populer yang membahas seputar design ini memiliki  template yang bagus menurut saya. Salah satunya adalah ketika melakukan scroll down, kemudian melihat menu navigasi blog yang tadinya berwarna biru berganti menjadi menu iframe berwarna hitam.
Ganti kode berwarna hijau sesuai jarak yang diinginkan dengan acuan awal bagian atas template dalam satuan pixel, kemudian ganti kode berwarna merah  dengan fungsi pemanggilan div (tulis dengan perintah fungsi pada kode CSS). Sebagai contoh: misalkan kita ingin menampilkan menu navigasi dengan kode CSS (.navbar-atas {................isi kode css.......}, maka pada fungsi div kita tulis <div id='navbar-atas'>.........</div>. muntuk penulisan pada Javascripnya adalah kode berwarna merah diganti dengan .navbar-atas.

Maaf jika tutorialnya cukup membingungkan karena saya juga bingung mau menjelaskan detailnya bagaimana jadinya seperti ini. Ya sudahlah silahkan dicoba jika memang ada kesulitan bisa ditanyakan dengan menuliskannya di kolom komentar. Selamat mencoba...

Blogodolar.com merupakan salah satu blog populer di Indonesia. Adalah kang Herman Yudiono si pemiilik blogodolar, dimana dia selalu menyajikan tulisan-tulisan seputar tips blogging dan cara menghasilkan uang lewat blog yang pastinya bermanfaat bagi pembaca. Jika anda ingin menggeluti bagaimana meraup dolar dari proses ngeblog, saya pikir blogodar.com lah blog yang cocok untuk  tempat anda belajar. Bukan hanya tulisan-tulisan kang Herman yang berkulitas tapi juga tampilan blog yang simpel membuat pengunjung blog betah. 

Membuat text widget wordpress versi blogger atau blogspot, itulah yang saya lakukan kemarin untuk memodifikasi template super seo punya kang Ismet yang saya gunakan di blog ini. Berhubung di sidebar masih ada ruang kosong untuk widget, saya coba mencari kira-kira tambahan widget apa yang cocok untuk template ini. Terinspirasi dari text widget yang ada blog kang Herman Yudiono yaitu blogodolar.com saya pun ingin memasang widget serupa di blog ini. Tapi apa bisa, blog kang Herman kan menggunakan wordpress sedangkan saya pake blogspot?.

Pepatah mengatakan "Dimana ada kemauan disitu ada jalan". Coba browsing di google siapa tau sudah ada yang share membuat text widget serupa untuk blogger, ternyata oh ternyata hasil pencarian hanya mengarahkan pada text widget wordpress yang mengharuskan menggunakan plugin di self hosting wordpress.  Berhubung saya hanya menggunakan blog gratisan blogger ya apa boleh buat satu-satunya cara adalah membuat sendiri text widget untuk blogger.

Dengan sedikit jurus html dan css sayapun memaksakan diri membuat text widget serupa. Agar tampilan text widget sama seperti di blogodolar.com maka saya harus lakukan adaah membongkar code html dan css yang ada di blog tersebut. Google Chrome memudahkan saya dalam proses bongkar kode di blognya kang Herman.

Setelah sekitar 10 menit berlalu mengbongkar dan membaca kode yang ada di blogodolar.com, akhirnya saya menemukan celah kode untuk text widget agar bisa dipasang di blogger alias blogspot. Daripada saya sendirian yang pake text widget ini di blogger, lebih baik saya share untuk rekan-rekan blogger lainnya 'itu juga kalo ada yang mau pake' ha ha. Mari kita mulai :

• Log-in ke Blogger
• Pilih layout > Edit HTML
• Untuk berjaga-jaga silahkan backup terlebih dahulu blog anda.
• Letakan kode css dibawah ini diatas code ]]></b:skin>

/* Text Widget  */

#textwidget {display: block;}

#sidebarwrap .textwidget ul{list-style-type: none;margin: 0;padding: 0;}

#sidebarwrap .textwidget ul li{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonUan66wXWhNby-_m2de-oXz5fBKoVsVUBOB7Z8TfxFxdYaqkOZdjVMx_dl-VMlBs4g0uE0OAQjgQpmSOZhNLx1LRJEqynQcasnRw673cMKrAdve_8dODG75SHYkygCCriOqxmlLabQ/s1600/sidebar+list.png) no-repeat top left;border-bottom: 1px dotted #ddd;margin: 0 0 5px;padding: 0 0 5px 16px;word-wrap: break-word;}

#sidebarwrap .textwidget ul li a:hover{color: #0072A4;text-decoration: underline;}

• Simpan template anda dan tutup editor html.
• Sekarang masuk ke Layout > Page Element > Pilih add a gadget pada sidebar.
• Kemudian pilih HTML/Javascript
• Copy dan paste kode dibawah ini di html/javascript form

<div class="textwidget"><div style="padding-top: 5px; background-color: #f5f5f5;">

<ul>

<li><a href="http://ecotutorials.blogspot.com/2013/06/cara-menampilkan-iklan-adsense-diatas.html">Google Adsense diatas Header</a></li>

<li><a href="http://ecotutorials.blogspot.com/2013/06/edit-seo-friendly-blogger-template.html">Edit Super SEO Template</a></li>

<li><a href="http://ecotutorials.blogspot.com/">Blogger Tutorials</a></li>

 </ul>

</div></div>

Catatn: Ganti text berwarna hijau dengan url postingan dan text berwarna biru untuk text yang akan tampil saat blog halaman tampil.

• Save widget.

<b:section class='topads' id='topads' preferred='yes'/>

</div>

• Tambahkan code CSS berikut sebelum ]]></b:skin>

/* Top Ads

----------------------------------------------- */

#topads-wrapper {

margin: 0;

padding: 0;

position: relative;

text-align: center;

width: 100%;

}

#topads {margin: 0; padding: 0;}

#topads .widget {margin: 0; padding: 5px 0;}

• Simpan template anda.
• Kemudian masuk ke Layout > Page Element
• Sekarang anda bisa lihat section baru diatas header.
• Klik dibagian add gadget dan pilih Gadget Google Adsense . Pilih salah satu jenis ikan adsense yang ingin tampil diatas header blog.
• Klik save, dan lihat tampilan baru blog anda dengan iklan diatas header blog.