@Sekstivitas

Monday 15 July 2013

Panduan Lengkap Meta Tag Pada Blog

Apa itu Meta Tag?

Meta tag itu terdiri dari satu set elemen yang menggambarkan isi pada web. Meta tag itu sangatlah penting untuk berbagi informasi tentang web atau blog kita dengan browser atau crawler mesin pencari. Meta tag ini sangatlah penting untuk Optimasi Mesin Pencari atau SEO untuk menarik Search Engines tentang topik dan isi pada halaman web atau blog tertentu, dan Meta tag ini dimasukkan di daerah <head> dokumen HTML.

Apa Tujuan Meta Tag?

Meta tag ini mengandung data yang terdiri dalam Meta di dokumen HTML, dan ini terdiri dari berbagai unsur yang dapat digunakan untuk menjelaskan secara detail tentang web atau blog pada halaman tertentu.

Contoh Meta Tag

Meta tag dapat kita temukan pada Template, lebih tepatnya di antara kode <head> dan </head>. Sebagai contoh lihatlah pada Tag HTML berikut.

<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>

Note: Pada Meta Tag diatas merupakan contoh dari Meta Tag Description yang mengartikan ringkasan pada halaman web atau blog, dan sedangkan Keywords ini mengartikan sebuah kata kunci yang sesuai pada isi halam web atau blog. Kedua Meta Tag diatas adalah salah satu Meta Tag yang sangat penting dalam suatu halam web atau blog.

Penjelasan Rinci Tentang Meta Tags

Tag Description adalah tag yang menampilkan ringkasan pada halaman web atau blog anda, dan Tag ini menjadi suatu bibit untuk mengoptimalkan halaman web atau blog anda di Search Engines.

Contoh Meta Description Tag

Lihat pada Tag dibawah ini.

<meta content='Your Blog Description here!' name='description'/>

Daerah konten terdiri dari informasi ringkas yang ada pada halaman web atau blog anda, sebagai contoh pengisiannya 'Blog tentang tutorial, tips dan trik seputar Blogger atau Blogspot dan Free Blogger Templates' jumlah karakter dalam pengisian ini maksimal 160 karakter.

Meta Tag Keywords

Meta Tag Keywords ini mengartikan sebuah kata kunci yang sesuai pada isi halam web atau blog. Kedua Meta Tag diatas adalah salah satu Meta Tag yang sangat penting dalam suatu halam web atau blog. Sebagai contoh lihat pada Tag dibawah ini.

<meta content='Your Keywords here!' name='keywords'/>

Daerah konten yang berfungsi untuk menemukan informasi pada halaman web atau blog anda, meta ini haruslah benar-benar memilih Kata Kunci atau Keywords yang sesuai pada isi halaman web atau blog anda. Sebagai contoh pengisiannya tentang ulasan halaman web 'Teknik Pembelajaran SEO' isilah pada Tag Keywordnya seperti 'SEO, Teknik, Panduan Lengkap SEO, Belajar SEO' Janganlah memasang Kata Kunci pada Tag ini yang berlebihan atau spam.

Meta Author Tag

Meta ini menceritakan tentang si penulis konten pada halaman, sebagai contoh lihatlah pada Tag dibawah ini.

<meta content='Author Name here!' name='Author'/>

Meta Robots Tag

Meta Robots Tag ini menganalisa tentang si Tag robot dalam mesin pencari, tag ini seakan memberi sinyal kepada si mesin pencari untuk mengindeks atau tidak kepada halaman web atau blog tertentu.

<meta content='index, follow' name='robots'/>

Note: Index itu mengikuti, sedangkan Noindex lawan artinya.

Cara Penggunaan Meta Tag - Cara Memasang Meta Tag

<head>
<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>
<meta content='Author Name here!' name='Author'/>
<meta content='index, follow' name='robots'/>
</head>

Mungkin itulah sebagai Pemandu atau Mengenal seluk beluk tentang Meta Tag, dilanjut pada postingan selanjutnya. Sebagai pendukung SEO jangan lupa pasang Sitemap atau Daftar Isi pada blog anda yak.

Template

Template Blog Seo Friendly Terbaru July

Template Blog Seo Friendly Terbaru July - Template Seo Friendly Ompaps Wusss ini adalah hasil dari re-desain Template Johny Wusss yang merupakan template handalan dari seorang master Template yaitu Maskolis. Entah kenapa saya selalu suka dengan kekayaan widget-widget yang ada pada template hasilnya.

Template ini benar-benar jauh berbeda dari template pada awalnya yang mempunya halaman posting terbagi menjadi 2 kolom, dan halaman sidebar yang menganut fitur show - hide. Tak habis pikir untuk saya me re-desain template Johny Wusss ini ke dalam tampilan yang bisa dibilang diatas standart tampilan Profesional. Silahkan Baca postingan saya pada Template Blog Seo Friendly.

Template Blog Seo Friendly Ompaps Wusss

Template Blog Seo Friendly, Template Seo Friendly, Template Seo Friendly Terbaru

Fitur Sebagai Berikut

1. Template blogger dengan tampilan elegan
2. Auto readmore
3. Loading sangat ringan dan cepat
4. Stylish threaded comment
5. SEO friendly and visitor friendly
6. Navigation menu
7. Dynamic Heading

Note: Pada kode title sidebar template diharapkan menggunakan H4, jika nanti anda kesusahan dalam mengatasi judul sidebar yang berbeda silahkan cari kode <h2><data:title/></h2> lalu ganti menjadi seperti ini <h4><data:title/></h4>. Jika ada pertanyaan seputar template ini, silahkan tinggalkan komentar anda pada postingan ini.

Untuk mengganti feedburner yang ada dibawah setiap postingan cari kode dibawah ini pada Edit HTML.

<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/BelajarSeoBlogger' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://ompaps.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BelajarSeoBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='BelajarSeoBlogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/BelajarSeoBlogger'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/BelajarSeoBlogger?bg=99CCFF&fg=444444&anim=0&label=listeners' style='border:0' width='88'/></a>

Kode yang diberi background biru itu adalah ID Feedburner yang ada pada demo template, silahkan anda ganti dengan ID feedburner sendiri.

Nah segini dulu artikel tentang Template Blog Seo Friendly Terbaru July - Template ini memang sama dengan template yang saya gunakan, sedikit berbeda hanya pada menu folating saja yang tidak saya kasih di template ini. Salam Hormat.

Widget

Cara Membuat Menu Navigation Melayang di Blogger

Cara Jitu Membuat Menu Navigation Melayang - Cara Membuat Floating Menu Navigation di Blog - Membuat Menu navigation melayang, tentunya anda sudah punya gambaran tentang Tutorial kali ini yang Ompaps bahas. Menu Navigation ini adalah menu yang selalu mengambang disepanjang anda menurunkan scroll tanpa ada yang berubah di menu tersebut.

Penting atau Tidak Menu Navigation di Blog?

Menu Navigation ini menurut saya lumayan bermanfaat untuk tidak merepotkan pengunjung, ketika membaca postingan sampai ke bilah yang paling bawah dan ia ingin mencari menu lainnya cukuplah menaikan cursor mouse kepada Menu Navigation yang sudah kita buat. Recommended tentang Template Blog Seo Friendly 2013.

Dimanakah Menu Navigation ini akan Muncul?

Cara Pemasangan Menu Navigation Melayang

Hal yang pertama anda harus login kedalam akun blogger, barulah anda memilih Blog yang ingin anda pasang Menu Navigation Melayang ini. Pada sisi sebalah kiri klik -> Template -> Edit HTML lalu cari kode ]]></b:skin> Jika sudah ketemu copy kode dibawah ini dan letakan persis diatas kode tadi.

/*--MyBloggerLab Sticky Navigation Bar--*/

#MBL_wrapper .MBL_social_wrapper

{

margin-top: 15px;

}

#MBL_wrapper

{

width: 100%;

margin: auto;

background: #fff;

height: 50px;

border-top: 5px solid #2c2f32;

border-bottom: 1px solid #EBEBEC;

-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);

-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);

-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);

box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);

position: fixed;

z-index: 999;

}

#MBL_wrapper .topmenu.notice

{

float: left;

width: 500px;

margin-top: 15px;

color: #fff;

}

#top_menu a

{

color: #fff;

}

#top_menu

{

display: block;

float: left;

list-style: none;

margin-top: 12px;

}

#top_menu li

{

display: inline-block;

margin-right: 15px;

font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;

font-size: 14px;

text-transform: uppercase;

}

#top_menu li ul

{

display: none;

}

#boxed_wrapper

{

width: 980px;

margin: auto;

}

.MBL_standard_wrapper

{

width: 960px;

margin: auto;

}

.MBL_standard_wrapper.wide

{

width: 980px;

}

.MBL_standard_wrapper.header

{

margin-bottom: 0px;

}

.MBL_social_wrapper

{

width: auto;

float: right;

}

#menuforall .MBL_social_wrapper

{

margin-top: 15px;

}

.MBL_social_wrapper ul

{

list-style: none;

}

.MBL_social_wrapper ul li

{

float: right;

margin-left: 5px;

}

.MBL_social_wrapper ul li img

{

width: 24px;

}

#MBL_menu_wrapper

{

width: 930px;

height: 50px;

padding: 0;

margin:auto;

}

.mainmenu.notice

{

float: left;

width: 600px;

padding: 17px 0 10px 12px;

z-index: 999;

}

#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav

{

list-style: none;

display: block;

float: left;

margin: 0 23px 0 5px;

width: 700px;

}

#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li

{

display: block;

float :left;

margin: 0;

}

#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul

{

display: none;

list-style: none;

background: #000;

position:absolute;

padding: 0;

margin-top: 51px;

width: 200px;

height: auto;

z-index: 1000;

padding-top: 5px;

border-bottom: 5px solid #000;

border-left: 0;

}

#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul

{

margin-left: 200px;

margin-top: 5px;

}

#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a

{

background: none;

}

.main_nav li ul li

{

width: 100%;

}

#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a

{

color: #fff;

display: block;

width: 188px;

font-weight: bold;

line-height: 1em;

padding: 10px 0 10px 12px;

background: none;

}

.main_nav ul, .main_nav

{

list-style: none;

margin: auto;

width: 600px;

height: 50px;

z-index: 999;

float: left;

border-left: 1px solid #EBEBEC;

}

.main_nav ul li, .main_nav li

{

display: block;

float :left;

margin: 0;

}

.main_nav ul li a, .main_nav li a

{

display: block;

float :left;

margin: 0 0 0 0;

padding: 18px 15px 14px 15px;

color: #2c2f32;

font-family: 'Patua One';

text-transform: uppercase;

font-size: 13px;

font-weight: 500;

border-right: 1px solid #EBEBEC;

}

.main_nav ul li ul li a, .main_nav li ul li a

{

width: 165px;

padding: 7px 19px 7px 16px;

border: 0;

font-size: 12px;

font-weight: normal;

color: #ccc;

font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;

}

.main_nav ul li ul li:last-child a, .main_nav li ul li:last-child a

{

border-bottom: 0;

}

.main_nav ul li a:hover, .main_nav li a:hover, .main_nav ul li a.hover, .main_nav li a.hover, .main_nav ul li a:active, .main_nav li a:active, .main_nav li.current-menu-item a

{

color: #fff;

background: #1bc4de;

}

.main_nav li:last-child a:hover, .main_nav li:last-child a.hover

{

border-right: 0;

}

.main_nav li ul li a, .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,

{

display: block;

width: 170px;

line-height: 0.7em;

padding: 5px 0 5px 30px;

}

.main_nav li ul li a:hover, .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover, .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover

}

div

{

margin:0;

padding:0;

border:0;

font-weight:inherit;

font-style:inherit;

font-size:100%;

font-family:inherit;

vertical-align:baseline;

}

a

{

color: #2C2F32;

text-decoration: none;

-webkit-transition: color .2s linear, background .1s linear;

-moz-transition: color .2s linear, background .1s linear;

-ms-transition: color .2s linear, background .1s linear;

-o-transition: color .2s linear, background .1s linear;

transition: color .2s linear, background .1s linear;

}

/* Font Face ----------------------------------------------- */

@font-face {

font-family: 'Patua One';

font-style: normal;

font-weight: 400;

src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');

}

ul{

margin: 0;

padding: 0;

list-style: none;

}

Ketika anda sudah selesai meletakan kode diatas, carilah kode <body> dan letakan kode berikut persis dibawah kode <body>.

<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0Neb5_WPntH-wJmvLGdFhDfZGiyYT66ywkGM5fdU8EeSQD74je9-b4Fh9jmR0GegqsRI-W4Wd4dosUWfLKbpcqHJxpSJWyZP8ZbI8ZB_XJ78Z_wzdyR32sOnA9R2S_YIjKdqyHKFFQXR/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL0KUSy3fw2WA-fmAPIPAtP417hh961wN9yyY34yjmqO8QhOLbmmlw_wwmD_jpO5wD6FD4wNEeg8pSxDqEnqovRtX3Y3A-6ySywvyMxGluG-twPvZb-bXrYify8DlxGaFPL6XszKISYwC/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMLDY1ps-nmXwbppYTZTOjwXtAWvSiBsVyCrjSM-5Aj68JPNZdfusLcsAIHQBs4ypWM7nQqhbBqJflrPVeCWVV9SryyVntIUsieTsSEfl4gX4Bz_e0fT7WH_hyjHboV77L-InMr6UOIbl/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSidbbw59LHPDZKA41KjRe2Fg7VK6hvN1G3dbioAcdA4ILCEIg2NrbColWIUIbDeqkzHVX1C5yQV7oT5Zn0kMq7gBXqZKfmPRGTyH11OEBkTdY80KUCH_Xw_RqheiegQygdSOCIYPCHV9/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP5afvsB5v_aBaneMjIt2d3fE6Lbz0Pd4VFxVzk-9RMOAxbu4NlvgiWMG0pCnBy7JBnnTm-EraXQKPG2QzKaZn2_-laL08bG-4gMIrEEGrzqO3ZNhrq5cdafI72Zuy1zDDXh2RE9If9wK0/s1600/tumblr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2DbRIoTG8-2UElP0TJ0VuGEgxPum5LNT1eQYKXIpxnhEcuYcbWdOgy-X1CWI8Mh3Q4YevyKHOB0OfKR6UvywOg9PsLszj4DMWMdl0tWnY3i7tVfm2CvSzFhFIQbLY4XZM3U8W68i9jR0F/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4v3jcqjPD6Mu1XpU7zASLIqd9kclMboOKvm_eqoSXA1hMCeb5BSGoNItQ0HpbS89vCFYdd8yrtSUYuP1Xgz24pKLWIiUU9FFEyYs8STW2sLPKt5ruqVZZHZ5yxpfgMPDCsYbpKuc-b6N/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga2SGfluzaahv8R0Ehk01anyjLP3bA_4NyAplmEZyB1I9ALOMyZ6f_n-rhaH-oa119K4LFrNFVmFd1Cpsr9MmbtEYJ8Cx4WTKbUsmdRLnMS1jBBaTJueLWuuPiurhF9KAD1vmsKUQqtYZr/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH4GcWqKcgqqAvXqQXNZ30K_Jp0urNiAumdAhibuTCAc7K9guF652bf8lnDzqVsU-iVf8Perq133DInx14FwceEnMEdJMeJ9G-yi-EwFgjTXeVigySR8RE13-HzfWpeZ2ZqNxrxKpD96Ol/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUW_e0blohDOT7S4eer8NqPIVRnggkWrtT834eExD11U6HqohK8Vp9gaRB8zb7ioEQ28CVfwnDWDgREeqoDG6GeUSMa1hKLpYpecQB-FW5Uff-5WSsVxm12hZVgN522hOPyebb11EHuWa/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9YMTL-LOsvWSmxbunQM_K0wkNMlq0SNCSWPiKTxh4kA7QgvOqrA63AXITX43j-i7C-CoOfs2AC63WFVKi9TnYEEF7MWN1GqW1Js7aqyxbqsMq-rEcesdMsqvAYQH1-BeqmgC3QohqIlqI/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>

Sebelum klik Simpan Template, tidak ada salahnya jika anda untuk me-review perubahan yang ada pada template blog anda. Jika semua tampilan mulus tak ada kendala atau pengacakan tampilan, mulailah anda klik Simpan Template.

Sekiranya begitulah tentang Cara Membuat Menu Navigation Melayang di Blogger, atas perhatian kalian saya ucapkan terimakasih dan Salam Hormat dari saya Ompaps. Jika ada pertanyaan tentang Tutorial ini, silahkan menuju halaman komentar.

Widget

Cara Memasang Widget Contact Form Blogger di Halaman Statis

Cara Memasang Widget Contact Form Blogger Pada Halaman Statis - Widget Contact Form Blogger ini adalah widget bawaan dari blogger dan ternyata widget ini adalah widget yang baru saja dirilis akhir - akhir ini oleh team Blogger.com.

Pada kesempatan kali ini saya akan memberikan penjelasan tentang Cara Memasang Widget ini di halaman statis, kenapa anda ingin memasang di halaman statis? iya, karena widget ini jika di pasang di sidebar tampilannya akan nggak etis sekali menurut saya.

Widget Contact Form Blogger Pada Halaman Statis.

Langkah 1: Tambahkan Widget Contact Form Blogger.
Untuk menambahkan silahkan anda masuki halaman Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Contact.

Untuk sementara biarkan widget Contact Form Blogger ini berada pada halaman sidebar anda.

Langkah 2: Tambahkan Halaman.
Untuk menambahkan halaman silahkan anda masuk ke Laman ► Laman Baru ► Laman Kosong. Copy kode dibawah ini dan paste-kan tepat di form Laman kosong anda dalam mode HTML bukan Compose.

<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30"

 type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">

*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email"

size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">

*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message"

 name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button"

 value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Pada Menu Pilihan atau Option, pilih Tekan "Enter" untuk baris baru.

Lalu tekan Publikasikan.

Langkah 3: Menyembunyikan Widget dari Halaman Sidebar Menggunakan CSS.
Tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>.

#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus,

 #ContactForm1_contact-form-email:focus,

 #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message,

 #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Selesai, klik Save Template kemudian lihatlah hasilnya.

Sebelum menutup acara pada postingan Cara Memasang Widget Contact Form Blogger di Halaman Statis, saya sangat berterimakasih kepada Kang Ismet http://blog.kangismet.net atas tutorial - tutorial yang ia berikan sangatlah bermanfaat. Salam Hormat.