coba blog

Mencoba bikin BlogSpot

Read More...

Cara Mengganti Background Blogspot Sesuai Keinginan

Sekian lama sudah tidak posting karena kesibukan di sekolah sebagai pelajar kini saya akan posting lagi, kali ini saya akan posting tentang Cara Mengganti Background Blogspot Sesuai Keinginan mungkin banyak dari beberapa orang ingin mengganti background sesuai keinginan tapi bingung caranya, dan kali ini saya akan memberi tahu caranya:


Berikut adalah Cara Mengganti Background Blogspot Sesuai Keinginan

1. Login ke Blogger 

2. Pilih Template >> Edit HTML

3. Cari kode .body atau #body atau jika masih tidak ketemu juga cari kata body karena tidak semua template memiliki komposisi yang sama, nanti akan muncul kode kurang lebih seperti ini:

body{background:#f5f5f5;
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#000000;}

• Lihat pada kode di atas, ada kode background:#f5f5f5; itu artinya background blog saya saat ini berwarna abu-abu terang. karena #f5f5f5 adalah kode warna untuk warna abu-abu terang. 
• Kode tersebut bisa anda ganti sesuai keinginan anda. Untuk kumpulan kode warna anda bisa lihat di Kode Warna
• Lalu bagaimana jika ingin mengganti background blog dengan gambar yang kita inginkan ? caranya masih sama, dan hanya saja diberikan beberapa tambahan. Contohnya seperti di bawah :

body{background:url (link gambar);
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#000000;
}

• Bagian di dalam kurung yang bertuliskan LINK GAMBAR itu isikan dengan link dari gambar yang ingin dijadikan background. Anda juga dapat menmbahkan kode repeat-x top left fixed; setelah tanda tutup kurung. Gunanya adalah untuk membuat gambar anda menjadi tetap dan tidak tergeser ketika anda melakukan scroll pada mouse. Contohnya seperti di bawah : 

body{background:url (link gambar)repeat-x top left fixed;
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#000000;
}

Demikian update saya kali ini mengenai Cara Mengganti Background Blogspot Sesuai Keinginan. Semoga bermanfaat !

Read More...

Cara mengetahui link url rss feeds web/blog kita

Oke langsung saja kita kecara-cara mengetahui link url rss blog kita,
Cara - Caranya :
1. Sekarang sahabat pergi ke homepage masing-masing.
Selanjutnya masukan kata ini server:source di addresbar kalian.
seperti gambar dibawah ini.

2. Setelah konek, sahabat akan dibawa pada halaman seperti gambar dibawah ini,

itu adalah halaman rancangan blog kita.
Dari header sampai footer.
3. Selanjutnya sahabat gulir kebawah sampai menemukan kata FEEDS.
Lihat kolom warna merah pada gambar dibawah ini.

4. Dan sekarang sahabat perhatikan gambar dibawah ini.

Perhatikan kolom warna merah pada gambar diatas.
Itulah link url rss feeds blog kita.
dan untuk kolom warna biru itu link url atom blog kita.
Jadi, jika sahabat diminta untuk memasukan link url rss blog sahabat disuatu situs atau apa,
Sebagai contoh, seperti ini link url rssnya => http://tema-putra.heck.in/rss.xml
Untuk atomnya, tinggal ganti rss.xml menjadi atom.xml.
Gimana, mudahkan ?
Oke cukup disini dulu artikel pada malam hari ini.
Atas kunjunganya saya ucapkan terimakasih.
good luck.

Read More...

Cara Mengetahui URL Feed Blog Kita

URL Feed ini biasanya digunakan ketika kita mendaftarkan blog pada Blog Directory, misalkan Technorati. Cara untuk mendaftarkan blog ke Technorati silahkan lihat DISINI.
Apa itu URL Feed? Apabila kita membicarakan Feed, pasti kita juga akan membicarakan tentang RSS dan Atom.
- RSS adalah versi simple dari isi blog kita dengan format XML, yang hanya menampilkan isi blog, tanpa banner, tanpa widget, tanpa header atau footer.
- Atom adalah sebuah formal sindikasi feed yang dikembangkan sebagai alternatif RSS.
- Feed adalah layanan blog untuk mengumpulkan RSS, kemudian mendistribusikan kepada orang yang berlangganan feed tersebut.
Nah, cara untuk mengetahui URL Feed blog kita adalah:
1. Pergi ke homepage blog kalian, kemudian masukkan kata " server:source " pada addresbar kalian.
2. Setelah masuk, kalian akan dibawa pada halaman rancangan blog kalian.
3. Gulir kebawah sampai menemukan kata FEEDS. Nah, yang dibawah kata FEEDS merupakan URL Feed blog kalian. Sebagai contoh URL Feed blog ini adalah "http://elbeha.heck.in/rss.xml". Untuk atomnya kita tinggal merubah rss.xml menjadi atom.xml.
Bagaimana, mudah bukan??.
Semoga bermanfaat. Apabila ada kekurangan maupun kesalahan mohon kalian memberikan kritik dan sarannya. Wassalamu 'alaikum.
tags: cara mengetahui url feed blog, apa itu url feed blog, url feed, apa itu rss, apa itu atom

Read More...

Cara Menampilkan Judul Postingan di Google

Hal yang harus kita lakukan adalah dengan merubah kode judul blog kita. Yaitu dengan kode di bawah ini. Berikut adalah langkah-langkahnya:

1. Buka dashboard Blogger, lalu pilih Template. 

2. Klik Edit HTML.

3. Gunakan Ctrl + F kemudian cari kode ini <title><data:blog.pageTitle/></ title>.

4. Setelah menemukan kode tersebut, ganti dengan kode berikut di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title></b:if></b:if>

5. Simpan.

Otomatis judul postingan kita akan muncul di index google sebelum nama blog kita.

Read More...

Cara memasukkan gambar ke blog

Memasukkan gambar bisa dilakukan dengan 2 cara baik dipostingan ataupun dengan menambah gadget (dipasang di sidebar/footer/header).

a. memasukkan gambar di dalam artikel blog

Silakan masuk ke dasbor klik entri baru untuk membuat postingan terbaru.

Jika ingin memasang gambar tepat di bawah judul blog atau di atas artikel bisa langsung klik icon gambar disamping kata Link

Jika ingin masukkan gambar setelah paragraf tertentu silakan ketikkan dulu kalimat yang dikehendaki

gbr, 1 memasukkan gambar

Jika ingin memasukkan gambar dari koleksi foto di komputer, pilih upload > Pilih file > cari di folder komputer foto yang ingin diupload. jika sudah muncul ) seperti gambar 2 di bawah, klik add selected.

gambar 2 cara pasang gambar di posting blog dengan upload

Jika ingin memasukkan gambar dari koleksi yang sudah dihosting misalnya di Picassa atau google code pilih from Picassa web album atau From a URL, sebagai contoh disini saya akan memasang gambar dari URL hosting di google code.

Caranya:

• Pilih From a URL
• Masukkan URL / Link di form yang tersedia
• Jika sudah muncul preview gambarnya Klik Add Selected

memasukkan gambar di postingan blog dengan URL

Selesai dan Gambar di postingan blog sudah masuk

b. Memasang foto di sidebar/footer

 

Tidak jauh berbeda dengan cara pertama tadi, hanya saja kita memasukkan gambar dengan menambahkan gadget lalu pilih GAMBAR.

Masuk ke dasbor > Tata Letak > Pilih / dan Klik link Gambar atau tanda Plus (+) akan muncul tampilan di bawah ini

Caranya;

1. Sobat boleh memberi judul boleh juga tidak
2. Keterangan gambar berfungsi "alt image" jika link yang dituju masih berupa internal link (link di blog yg sama, saya sarankan masukkan keterangan gambar)
3. Hubungan, boleh di isi link URL tertentu baik keluar atau keluar blog, terserah sobat
4. Pilihan gambar, sama seperti cara a. di atas, jika ingin mengupload dari komputer pilih dari komputer, jika dari web/URL, masukkan URL
5. Centang susutkan gambar jika ukuran lebar sidebar sebesar 300pixel

Nah demikian tadi 2 cara memasukkan gambar ke dalam blog, semoga bisa membantu kamu yang baru memulai ngeblog. Salam Super Gaptek.

Read More...

Cara Mendapatkan Url Gambar di Blog

SHADOWS || Cara Mendapatkan Url Gambar di Blog, URL gambar maupun HTML gambar pada dasarnya berbentuk script. URL gambar digunakan saat kita menginginkan sebuah gambar muncul dalam halaman blog atau menginginkan sebuah gambar memilik link ke alamat blog/web tertentu. Sedangkan HTML gambar secara khusus berbentuk script HTML yang digunakan untuk menampilkan gambar tertentu pada halaman blog anda...

Loging pada blog anda mulailah membuat Entri baru klik Insert image.

Dan mulailah dengan bagaimana mendapatkan url gambar di blog, upload gambar anda setetelah meng- upload klik edit html pada halaman entri anda.

Contoh HTML gambar seperti ini:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8oWO957zTfhXb3cZOxjFq4H7b8Qj-DXw122oykVN7L4BJb9jmfef1c97G4EvXTs4czCB8y14eDkR1m28Jtyj3cnn6zYcNeBsv9RQxTAbro3HCr6Tx7_9L1huxIrUbnMIfgHRXNPJIZLZ/s1600/shadowsblog+url+gambar+anda.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8oWO957zTfhXb3cZOxjFq4H7b8Qj-DXw122oykVN7L4BJb9jmfef1c97G4EvXTs4czCB8y14eDkR1m28Jtyj3cnn6zYcNeBsv9RQxTAbro3HCr6Tx7_9L1huxIrUbnMIfgHRXNPJIZLZ/s400/shadowsblog+url+gambar+anda.JPG" width="400" /></a></div>

NB: Warna merah ganti dengan URL sobat.

Contoh HTML URL gambar:

<img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8oWO957zTfhXb3cZOxjFq4H7b8Qj-DXw122oykVN7L4BJb9jmfef1c97G4EvXTs4czCB8y14eDkR1m28Jtyj3cnn6zYcNeBsv9RQxTAbro3HCr6Tx7_9L1huxIrUbnMIfgHRXNPJIZLZ/s400/shadowsblog+url+gambar+anda.JPG" width="400" />

NB: Warna merah ganti dengan URL sobat.


Nah, ada cara mudah mendapatkan URL dan HTML gambar di blog sekaligus,
yaitu melalui http://tinypic.com. Jadi jika kit butuh URL suatu gambar atau HTMLnya cukup upload saja gambarnya melalui situs ini, enaknya tanpa registrasi dulu. ini lah kenapa saya bilang CARA MUDAH.

Inilah langkah-langkahnya:


1. Sediakan file gambar dalam komputer sobat.
2. Buka situs http://tinypic.com/, klik DI SINI
3. Pilih BROWSE, yaitu untuk menjemput file gambar sobat dari komputer yg telah disediakan.
4. Pilih UPLOAD NOW, tunggu loading
5. Anda liat ada "ADD TAGS", pilih "SAVE"
6. Copy script yang ada di dalam kotak "DIRECT LINK FOR LAYOUT:

Nah sudah selesai selamat mencoba semoga bermanfaat buat para sobat.

Read More...

Apakah Blog Anda Sudah SEO? dan Bagaimana Mengetahuinya?

Kali ini saya akan berbagi tips tentang cara mengetahui Apakah Blog Anda Sudah SEO? lalu bagaimana mengetahuinya? caranya sangat mudah, sebelum saya berikan tipsnya alangkah baiknya anda mengetahui apa itu pengertian SEO? SEO adalah singkatan dari Search Engine Optimization
Search Engine Optimization kalau diartikan kedalam bahasa indonesia kira kira adalah "Optimasi Mesin Pencari" SEO (Search Engine Optimization/Optimasi Mesin Pencari) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume/jumlah/kepadatan dan kualitas trafik/traffic kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web(blog) pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung. oke sekarang udah pada tahu kan apa itu pengertian SEO? oke sekarang kita langsung aja caranya agar mengetahui berapa skor SEO blog kita:

1. Silakan Masuk ke http://chkme.com/

2. Letakan URL blog anda di kolom yang sudah di sediakan

3. Kemudian klik "Cek SEO Score" maka hasil nya akan muncul

4. Dan jika anda scroll ke bawah, maka Score SEO blog anda akan terlihat

Catatan:
Pada panah nomor 1 anda dapat melihat skor SEO blog anda dan pada panah nomor 2 anda bisa copy/paste kode HTML dan memasang widget skornya di blog anda
Blog saya mendapat skor 76% sebelumnya pernah mendapat skor 85% berarti blogsaya turun nilai skornya dan semoga aja tidak turun lagi -_- karena pengaturan Heading H1 terlalu berlebihan, dan disana dejalsakan, bila terdapat heading H1 yang berlebihan itu bisa membingungkan mesin pencari pada saat robot Google ke blog kita. Jadi usahakan mendapat hasil diatas 75%.

Oke mungkin cukup sekian tips saya kali ini dan semoga bermanfaat!

Read More...

Cara Mengukur Kecepatan Loading Blog

Pada tutorial yang lalu saya telah membuat postingan tentang Cara Cek Berat Blog Terbaru dan kali ini saya akan berposting tentang Cara Mengukur Kecepatan Loading Blog Untuk mengukur kecepatan blog tidak bisa juga dilakukan secara mengira-ngira sendiri karena belum tentu kecepatan internet yang anda miliki sama seperti kecepatan internet pengunjung (orang-orang) yang membuka blog anda. Dan sebenarnya ada banyak sekali tools yang di gunakan sebagai alat ukur kecepatan loading blog tetapi kali ini saya akan mengajarkan dengan Google Page Speed Insight 

Oke dan berikut adalah Cara Mengukur kecepatan Loading Blog

1. Silakan kunjungi Google Page Speed Insight 
2. Disana anda akan melihat sebuah kotak untuk memasukan URL blog anda, slakan masukan alamat URL blog yang ingin anda ukur kecepatannya. Jika sudah klik tombol ANALYZE

3. Tunggu prosesnya sampai selesai dan setelah itu akan muncul hasilnya.. Lihat gambar di bawah ini

Dari hasil pengukuran pada blog saya menunjukan bahwa kecepatan loading blog saya itu berada di angka 77 untuk (Komputer, Laptop, dsb) dan 78 untuk Mobile (Handphone, tablet, dsb). Semakin besar angkanya maka semakin baik kecepatan loading blog anda.

Catatan:

Perhatikan juga bahwa ada 2 hal yang saya soroti pada gambar diatas yaitu bagian panah atas dan bawah. Bagian panah atas itu maksudnya adalah kecepatan loading blog anda untuk 2 komponen, Dekstop dan Mobile.

Sedangkan bagian panah bawah maksudnya adalah beberapa sugesti atau hal-hal yang menyebabkan loading blog anda menjadi berat. Bagian yang diberi tanda seru dan berwarna merah itu berarti perlu anda perbaiki. Lalu untuk bagian yang berwarna kuning dan hijau itu tandanya sudah oke dan tidak perlu perbaikan.

Semoga Tutorial Saya Ini Bermanfaat Bagi Anda Yang Ingin Mengetahui kecepatan Loading Blog , Jangan Lupa Berkomentar Dahulu Sebelum Mempraktekan Walaupun Hanya Berterima Kasih...! 

Read More...

Cara Mengganti Warna Background Teks Saat di Blok

Pada tutorial kali ini saya akan berbagi tips Bagaimana Cara Mengganti Warna Background Teks Saat di Blok atau  yang sering disebut (selected text) pada blog atau website.
Dan biasanya pada saat saat kita memblok sebuah teks pada blog ataupun website maka akan muncul background berwarna biru dengan teks berwarna putih, pasti itu sudah biasa bukan? dan pada kesempatan kali ini kita akan mengubahnya dengan cara merubah warna background yang tadinya berwarna biru di rubah dengan selera kita sendiri dan teks yang tadinya berwarna putih kita rubah sesuai selera sendiri, dan di bawah ini adalah screenshotnya:

Keterangan:
Pada gambar paling atas itu adalah background yang berwarna biru,(Sebelum Dirubah) dan pada gambar yang dibawahnya itu adalah background berwarna hijau(Sesudah Dirubah)
Lalu bagaimana cara merubahnya?

Berikut adalah Cara Mengganti Warna Background Teks Saat di Blok
1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>

::selection {background:#01a279;color:#FFFFFF;}
::-moz-selection {background:#01a279;color:#FFFFFF;}
::-webkit-selection {background:#01a279;color:#FFFFFF;}

Catatan:

Ganti kode #01a279 untuk merubah warna background teks saat di blok

Ganti kode #FFFFFF untuk merubah warna teks saat di blok (selected teks)

Dan untuk mengetahui kode warna silakan Klik Disini!

Merubah tampilan warna blok teks (selected teks) di blog/website akan menambah kesan tersendiri pada blog/website kita. Jadi jangan ragu ragu untuk berkreasi. Sekian tutorial kali ini semoga bermanfaat ^_^

Read More...

Cara Cek Berat Blog Terbaru

Hai sob kali ini saya akan berbagi bagaimana Cara Cek Berat Blog Terbaru, Sebenarnya cara ini sudah banyak yang share tetapi agar  meramaikan postingan blog..saya share aja deh, agar sobat mengetahui berat blog sobat silakan masukan alamat blog sobat di bawah ini:

Masukkan Alamat Blog/Web Max 10 Url: (Tips & Trick Blog)

Bagaimana sob berat apa tidak blog sobat? Blog/Website yang bagus yaitu meiliki kurang dari 100KB,Tetapi Website saya ini Lumayan cukup berat yaitu 124KB tapi gak apa-apa deh nanti akan saya perbaiki agar blog saya tidak berat, dan semoga postingan saya kali ini bermanfaat ^_^

Read More...

Cara Mengatasi Pesan Komentar Yang Berada Dibawah (Turun Kebawah)

Kali ini saya akan memberikan trik Cara Mengatasi Pesan Komentar Yang Berada Dibawah masalah ini sering terjadi para pemblogger termasuk saya, mungkin anda pernah mengalami hal seperti ini, Seperti dijelaskan dipostingan sebelumnya, bahwa komentar disebuah blog sangat dibutuhkan, tapi terkadang komentar itu dijadikan hal yang tidak baik atau yang lebih dikenal dengan sebutan spam (Pengertian SPAM, Komentar SPAM, dan SPAMMER) pada praktek black hat SEO untuk mengoptimalkan blog di search engine, walaupun di pesan komentar sudah di beritahukan untuk tidak melakukan spam. Tapi bagaimana kalau pesan komentar berada di bawah formulir komentar? pasti aneh bukan ? dan di bawah ini adalah screenshot permasalahnya:

Untuk anda yang mengalami masalah ini, silahkan ikuti langkah-langkah cara mengatasi masalah pesan komentar yang jatuh dibawah form komentar berikut:
1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

TIPS: Tekan CTRL + F lalu ketik 'threaded-comment-form' (untuk mempermudah pencarian)
Lalu hapus semua kode berawal dari kode <b:includable id='threaded-comment-form' var='post'> sampai </b:includable> selanjutnya ganti dengan kode dibawah ini: 

<b:includable id='threaded-comment-form' var='post'>

<div class='comment-form'>

<a name='comment-form'/>

<b:if cond='data:mobile'>

<div id='form-wrapper'>

<p><data:blogCommentMessage/></p>

<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<iframe allowtransparency='true' class='blogger-iframe-colorize 
blogger-comment-from-post' frameborder='0' height='410' 
id='comment-editor' name='comment-editor' src='' style='display: none' 
width='100%'/>

</div>

<b:else/>

<div id='form-wrapper'>

<p><data:blogCommentMessage/></p>

<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<iframe allowtransparency='true' class='blogger-iframe-colorize 
blogger-comment-from-post' frameborder='0' height='410' 
id='comment-editor' name='comment-editor' src='' width='100%'/>

</div>

</b:if>

<data:post.friendConnectJs/>

<data:post.cmtfpIframe/>

<script type='text/javascript'>

BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);

</script>

</div>

</b:includable>

Selanjutnya cari kode berikut ini:

document.getElementById(domId).insertBefore(replybox, null);

Lalu ganti dengan kode ini:

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Simpan Template dan Lihat Hasilnya:

Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Cara Mengatasi Pesan Komentar Yang Berada Dibawah . Semoga bermanfaat ! 

Read More...

Cara Buat Dropdown Menu di Blog

Cara Membuat Dropdown Menu di blog - Hmm, Lagi-lagi saya posting tentang dropdown menu hehe gak apa-apa deh, sobat sudah pada tau dropdown menu itu apa kan? Dropdown menu adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi Dropdown menu yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.Dropdown menu kali ini saya buat sendiri kode CSSnya, oke dibawah ini adalah screenshotnya:

1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinxHiB5nTlMiGeigwj7IjcETIUcVUQbUJpMZKzBlSzovzMY6oHOec9bJ1MRmy7xjOXbqtJUI5rY1MXqzMnne1snlZxyMpfbGQJZ2DDSWqEP9uDiYoQZRm3RRdRbOsLtuq1Zk8BGexSrwk/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyx91u0772SqnxkzF9XEwgfuXIpXmwjCMzIb4ARUtYxu9gfP5X8YCDGnEhR3VTdV-wskfTo37negnat4HMeLjT4cEY3B04_9lgQTChKqdZ17BK_IGnEu-CdV5FC10f5wlIblmLHWJ4VCn/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwK9T31aQ1V347uGbdOy1SvxYxasMhHDFoSHaWqmpa0RSJS4NzUycdTuaPkBb1-bOH7xfbnnoB91t_noEGJq84b_fQirB92BD34hlFNG7w5kWKswcVg6Cb0Thcvj0UPnJ4RI4GuVhBR0/s1600/nav.png) repeat-x}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{color:#80C8FE}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinxHiB5nTlMiGeigwj7IjcETIUcVUQbUJpMZKzBlSzovzMY6oHOec9bJ1MRmy7xjOXbqtJUI5rY1MXqzMnne1snlZxyMpfbGQJZ2DDSWqEP9uDiYoQZRm3RRdRbOsLtuq1Zk8BGexSrwk/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}

Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSI7vMU4B8tvWvqA_fyq_FlbgDWp_5mkr4VoL-nC21tJibWTgqsmDwCiqJiOpDoPSXCSbLch2QGifW6ZlRxl3IOh_SaYG4Sc7Rnq9bGneaiY5w1OlCsVK6EEjB-wIcWH30eM3E0nO5tEu/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Perhatian!
Jika Kode <!-- /content-wrapper--> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /content-wrapper--> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
4. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.

Semoga Tutorial Saya Ini Bermanfaat Bagi Anda Yang Membutuhkan Navigasi Dropdown Menu , Jangan Lupa Berkomentar Dahulu Sebelum Mempraktekan Walaupun Hanya Berterima Kasih

Read More...

Tips Bagaimana Menulis Artikel yang di Sukai Google

Kali ini Saya Akan Berbagi Tips Bagaimana Menulis Artikel yang di Sukai Google, Mungkin dari anda sudah lama nge-blog dan sudah banyak menciptakan artikel di blog tetapi mungkin dari anda tidak mengetahui tentang PENTINGNYA tips menulis artikel yang di sukai google, Tips Menulis Artikel yang disukai Google Akan Berpengaruh Pada Posisi Artikel di Mesin Pencari.
dan Berikut Adalah Tipsnya:

Judul Blog Dan Artikel Relevan
maksud artikel relevan adalah harus sesuai / berkaitan dengan artikel, Judul artikel dan konten yang baik berhubungan dengan tema blog anda, sebagai contoh blog anda berjudul Tips&Trick Blog artinya minimal isi blog harus sesuai dan berkaitan dengan tema blog contohnya seperti saya.

Judul Artikel Jangan Terlalu Panjang
Judul yang terlalu panjang biasanya tidak bisa dimuat semua di URL artikel, usahakan menentukan judul yang pas agar bisa dimuat semua, dan kata kuncinya  dapat diindeks dengan baik oleh google.

Menambahkan Label
Setiap akan menulis artikel jangan lupa menambahkan label/kategori yang relevan dengan isi artikel anda, karena label artikel merupakan keyword/kata kunci yang akan di crawl oleh robot mesin pencari.

dan berikut caranya:

Menambahkan Tautan Permanen Khusus

Berfungsi agar robot spider dapat mengindeks semua tautan artikel terutama jika anda membuat judul artikel yang terlalu panjang. 

dan berikut caranya:

1. Di bagian setelan entri tepatnya di bawah jadwal, klik tautan permanen, lalu pilih tautan permanen khusus.

2. Salin bagian terakhir tautan anda lalu masukan di dalam kotak tautan permanen khusus, contoh http://henry-multimedia-informasi.blogspot.com/2013/08/tips-bagaimana-menulis-artikel-yang.html

3. Salin kode tautan yang berwarna merah, lalu klik selesai.

Bahasa Yang Mudah Dipahami

Pergunakanlah bahasa indonesia yang baik dan benar ( baku ) tidak disingkat-singkat dalam penulisan artikel, karena dengan bahasa yang baku maka artikel anda akan mudah dimengerti oleh pembaca, tentunya artikel yang ramah ( SEO Friendly) di mata Pengunjung blog anda.

Menambahkan Gambar Sebagai Panduan

Ini juga penting untuk mempermudah para pengunjung memahami tutorial yang anda sajikan, jangan lupa menambahkan judul dan deskripsi gambar, karena akan menambah point SEO di konten anda. 

Kesimpulan
Jadi inti kesimpulan dari artikel ini adalah untuk cara menulis artikel yang disukai google tersebut adalah dengan optimasi keyword. Tapi saya ingatkan, jangan terlalu banyak menggunakan keyword dalam sebuah artikel, karena Google dapat menganggapnya sebagai spam (keyword stuffing), Keyword stuffing ini termasuk kedalam teknik black hat SEO yaitu adalah suatu teknik yang negatif, curang, dan tidak direkomendasikan oleh search engine. Dampaknya jika kita menggunakan teknik ini (keyword stuffing) adalah kita bisa terkena google sandbox dan bisa di anggap spam oleh google dan terhambatnya proses indexing.

Catatan Penting:

Buatlah artikel yang memberikan solusi bagi pengunjung dan bukan mempersulit atau membingungkan, ini penting untuk konten anda agar bisa terindeks lebih optimal di mesin pencari.

 

Sekian Tips dari saya semoga dapat membantu dan juga semoga artikel saya yang ini di sukai oleh google ^_^

Read More...

Cara Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar

Pada Tutorial kali ini saya akan membahas Cara Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar, Sebetulnya tutorial ini milik kangismet. Akan tetapi saya di sini cumang ngeshare agar lebih luas lagi, Mungkin ini postingan terakhir saya karena saya mungkin tidak posting lagi setelah lebaran dikarenakan saya pergi hehe..oke langsung aja caranya sob...
1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

#comment-holder .cm-youtube {

  display:block;

  border:none !important;

  background-color:#333;

  width:450px;

  height:240px;

  margin:0 auto 30px;

}

#comment-holder .cm-image {

  display:block;

  margin:0 auto 15px;

  outline:none;

  border:1px solid #ccc;

  background-color:white;

  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);

  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);

  box-shadow:0px 1px 3px rgba(0,0,0,0.2);

  padding:5px;

  max-width:96%;

  height:auto;

  width:auto;

}

code, #comment-holder code,

#comment-holder i[rel="code"] {

  font:normal 12px Monaco,"Courier New",Monospace;

  color:blue;

}

pre, #comment-holder pre,

#comment-holder i[rel="pre"] {

  display:block;

  font:normal 12px Monaco,"Courier New",Monospace;

  background-color:#333;

  color:white;

  padding:0.5em 1em;

  word-wrap:normal;

  white-space:pre;

  overflow:auto;

  white-space: pre-wrap;

  white-space: -moz-pre-wrap;

  white-space: -pre-wrap;

  white-space: -o-pre-wrap;

  word-wrap: break-word;

}

blockquote, #comment-holder blockquote,

#comment-holder b[rel="quote"] {

  margin:0 2%;

  background-color:#eee;

  padding:1em 1.2em;

  border-left:4px solid #7498AD;

  display:block;

  font-weight:normal;

  font-style:italic;

}

#comment-holder i[rel="image"],

#comment-holder i[rel="youtube"] {

  display:block;

  overflow:hidden;

  border:2px solid black;

  position:relative;

  width:170px;

  height:100px;

  margin:0 auto 30px;

}

#comment-holder i[rel="image"]:before,

#comment-holder i[rel="youtube"]:before {

  content:"Please enable your JavaScript to see this image!";

  position:absolute;

  top:0;

  right:0;

  bottom:0;

  left:0;

  background-color:red;

  color:white;

  font-weight:bold;

  text-align:center;

  padding:15px 0;

}

#comment-holder i[rel="youtube"]:before {

  content:"Please enable your JavaScript to watch this video!";

}

• Kemudian, simpan kode ini di atas </body>

<script type='text/javascript'>

//<![CDATA[

function repText(id) {

var a = document.getElementById(id),

 b = a.innerHTML,

 b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");

 b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");

 b = b.replace(/<i 
rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig,
 "<iframe class='cm-youtube' 
src='http://www.youtube.com/embed/$1'><\/iframe>");

 b = b.replace(/<i 
rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig,
 "<iframe class='cm-youtube' 
src='http://www.youtube.com/embed/$2'><\/iframe>");

 b = 
b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig,
 "<iframe class='cm-youtube' 
src='http://www.youtube.com/embed/$1'><\/iframe>");

 b = 
b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig,
 "<iframe class='cm-youtube' 
src='http://www.youtube.com/embed/$2'><\/iframe>");

 document.getElementById(id).innerHTML = b;

 b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");

 b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");

 b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");

 b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");

 b = b.replace(/\/s(640|1600)/g, "/s400");

 } repText('comment-holder'); 

c = document.getElementById('comment-holder');

if (c) {

 b = c.getElementsByTagName("p");

 for (i = 0; i < b.length; i++) {

  if (b.item(i).getAttribute('CLASS') == 'comment-content') {

   ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");

   ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");

   ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");

   ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");         

   b.item(i).innerHTML = ki_comm;

  }

 }

}

//]]>

</script> 

Simpan Template

Format Penulisan

Menulis Tag <code>
<i rel="code">Tulis kode yang sudah diparse di sini</i>, atau
[code]Tulis kode yang sudah diparse di sini[/code]

Menulis Tag <pre>
<i rel="pre">Tulis kode yang sudah diparse di sini</i>, atau
[pre]Tulis kode yang sudah diparse di sini[/pre]

Menulis Catatan (Blockquote)
<b rel="quote">Tulis catatan di sini</b>, atau
[quote]Tulis catatan di sini[/quote], atau
[blockquote]Tulis catatan di sini[/blockquote]

Memasukan Gambar
<i rel="image">Tulis URL gambar di sini</i>, atau
[img]Tulis URL gambar di sini[/img]

Memasukan Video Youtube
<i rel="youtube">Tulis URL Video Youtube di sini</i>, atau
[youtube]Tulis URL Video Youtube di sini[/youtube]

Oke Mungkin Cukup Sekian, Semoga Bermanfaat ^_^
Henry dan Keluarga mengucapkan minal aidin wal faizin... mohon maaf lahir dan batin

Read More...

Cara Merampingkan Alexa Rank dengan Cepat

Seperti yang sudah kita pelajari sebelumnya, bahwa Alexa merupakan media informasi yang memberikan ranking kepada sebuah web atau situs. dan kali ini saya akan berbagi tips Cara Merampingkan Alexa Rank dengan Cepat tips ini di perlukan karena agar Alexa rank anda ramping terus-menurus, Semakin kecil angkanya berati semakin bagus peringkat Alexa rank anda.
Tips saya adalah:

[1].  Memperkenalkan blog ke Berbagai Search engine ( khususnya Google, yahoo, dan Bing). Klik disini!
[2].  Memperkenalkan Blog ke Blog yang lain ( dalam hal ini "Blogwalking" ).
[3].  Memperkenalkan Blog ke Jejaring Social Khususnya Facebook dan Twitter (Tips ini sudah saya coba sendiri dan berhasil)
[4].  Memperkenal Blog Ke Forum - Forum Online.
[5].  Memperkenalkan Blog Ke Social Bookmarking
[6].  Menulis Arikel Tentang Alexa (Seperti Saya ini ) :D

Tetapi Dari 6 Tips di Atas, Saya Punya Tips Yang Lebih "AMPUH" lagi, Yaitu Dengan Cara Memasang Alexa Toolbar, Perlu Anda ketahui bahwa perhitungan Alexa Rank itu masih didasarkan Pada Alexa Toolbar Yang dipakai Pada Browser Internet di Seluruh Dunia. Alexa Mengandalkan Input Data dari Semua Toolbarnya Untuk Menghitung Pageview dan Pengunjung Unik Suatu Blog. Jadi Untuk Merampingkan Alexa Rank Blog Anda Dengan Cepat Cukup Dengan Menggunakan Toolbar Alexa Pada Browser Internet Anda.
Pengalaman ini Pernah Terjadi Kepada Saya, Saya Nge-blog Sudah 3 Bulan Kenapa Alexa Saya Masih Di Atas 10 Juta, Lalu Saya Searching ke Google Saya Mencari Tentang Artikel Cara Meningkatkan Alexa Rank dengan Cepat, Caranya itu katanya dengan Cara Memasang Alexa Toolbar dipikiran Benak Saya Itu Hanya Hal yang Tidak Penting, Tetapi dari Semua Artikel yang Memuat Tentang Cara Meningkatkan Alexa, Artikel Tersebut Membahas Tentang Harus Dipasangnya Alexa Toolbar, Lalu Iseng-iseng Saya Coba Dan Hasilnya Sangat Positif, Waw Hebat Sekali yang Tadinya Peringkat Alexa Saya Di atas 10 Juta dan Sekarang Di bawah 1 Juta Bahkan Tembus 500ribu, Jadi Kesimpulanya Adalah Dengan Memasang Alexa Toolbar Peringkat Blog Dapet Naik Dengan Pesat, dan Pada Tutorial kali Ini Saya akan Berbagi Cara Pasang Alexa Toolbar di Blog
Berikut ini adalah cara memasang Alexa Toolbar pada browser Mozilla:
1. Kunjungi http://www.alexa.com/toolbar dan klik tombol Install Alexa Toolbar

2. Akan terbuka halaman User License Agreement. Klik Accept dan Install

3. Firefox akan melakukan konfirmasi, silahkan klik Allow

4. Tunggu proses download selesai, akan muncul jendela baru dan klik Install

5. Setelah selesai penginstalan, anda akan diminta untuk melakukan restart

6. Setelah restart akan ada laman The Alexa Toolbar for Firefox - Demographic Information, silahkan klik tombol No Thanks

7. Akan terbuka halaman yang berisikan ucapan selamat : Alexa Toolbar - Installation Successful! The Alexa toolbar is now installed in your browser and should look like this:

8. Jika muncul pemberitahuan seperti di bawah, silahkan klik OK.

Oke, Mungkin Cukup Sekian Tips dari Saya Semoga Bermanfaat! and Happy Blogging ^_^

Read More...

Cara Membuat Komentar Admin Berbeda Pada Threaded Comment

Pada tutorial kali ini saya akan membahas tentang Cara Membuat Komentar Admin Berbeda Pada Threaded Comment, dan kebetulan tadi sore ada pengunjung blog saya, Fico Pangestu bertanya kepada saya

dan pada malam ini saya akan menempati janji saya yaitu membahas tentang Cara Membuat Komentar Admin Berbeda Pada Threaded Comment
Blogger telah menerapkan sistem komentar baru dengan reply / balas atau istilahnya Threaded Comments, maka tutorial kali ini akan menjelaskan cara membuat komentar admin berbeda pada sistem threaded comments. Hal ini tentunya supaya pengunjung mudah membedakan, mana komentar admin dan mana komentar visitor. kurang lebih screenshotnya seperti yang di atas tadi

Berikut Cara Membuat Komentar Admin Berbeda Pada Threaded Comment

1. Login ke Blogger

 

2. Pilih Template >> Edit HTML

3. Cari kode </body>, copy kode dibawah ini dan letakkan tepat diatas kode </body>



<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- Komentar admin  start -->
<script>
$(function() {
function highlight(){
$(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
.css(&#39;border&#39;, &#39;1px solid #A8B2CE&#39;)
.css(&#39;background&#39;,&#39;#EDEFF4 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimbAZp1SQS_IHn9Jly9HHA-JVQUbceiIqFttGtj5XIRgmXt8lUnLHR0OvSnA-12ioy2MWJ6nhJ6aJkDnNUfspNhb7-_GbKjhst_qaDNNxt6cxLI8GKsF9uvgU9FRu_Bo89PtHcnygGVA6R/s1600/adminh.png&quot;) no-repeat bottom right&#39;)
.css(&#39;padding&#39;, &#39;10px&#39;);
}
$(document).bind(&#39;ready scroll click&#39;, highlight);
});
</script>
<!-- Komentar admin ends -->

Catatan:
Untuk mengedit  warna garis pinggir silahkan edit 1px solid #A8B2CE. Untuk melihat pilihan warna silahkan klik disini

Untuk mengedit warna background silahkan edit #EDEFF4 . Untuk melihat pilihan warna silahkan klik disini

Untuk mengedit atau menghapus tulisan admin silahkan edit https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimbAZp1SQS_IHn9Jly9HHA-JVQUbceiIqFttGtj5XIRgmXt8lUnLHR0OvSnA-12ioy2MWJ6nhJ6aJkDnNUfspNhb7-_GbKjhst_qaDNNxt6cxLI8GKsF9uvgU9FRu_Bo89PtHcnygGVA6R/s1600/adminh.png lalu ganti gambar dengan yang anda inginkan
Oke mungkin cukup sekian, Semoga Bermanfaat!
Happy Blogging ^_^

Read More...

Fixed Header Blog dengan Box Search Engine

Dalam tutorial kali ini saya akan membahas tentang cara membuat Fixed Header Blog dengan Box Search Engine, Sebenarnya kegunaanya adalah sebagai search engine di blog namun widget ini di lengkapi dengan gambar logo yang anda bisa ganti sendiri, dan di bawah ini adalah screenshotnya:

Berikut Cara membuat Banner Iklan 125x125 di Blog:

1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

/* Floating Menu
----------------------------------------------- */
#top-menuwrapper{background-color: #fff;border-top:3px solid #F4661A;box-shadow: 0px 1px 2px rgba(0,0,0,0.3);height:76px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;border-bottom:3px solid #F4661A}
#top-menuwrap{width:1100px;margin:0 auto;}
#top-menu{width:100%}
#top-menu ul{list-style: none;margin-right:250px}
#top-menu ul li{float:right}
#top-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#999;font-size:30px;text-transform:uppercase;display:block;text-decoration:none;}
#top-menu ul li a:hover{color:#555;}
.logo{float:left;background:#fff;}
.logo img{margin-top:-16px;}

/* Kotak Pencarian
----------------------------------------------- */
#search-wrapper{float:right;padding-right:210px;}
#search-form-feed {
width:210px; /* lebar kotak penelusuran */
position:fixed;
top:26px;
margin:0 0 10px;
padding:0 0;
font:normal normal 11px Arial,Sans-Serif;
color:#333;
z-index:9999;
}
#feed-q-input {
display:block;
width:70%;

height:16px;
border:1px solid #ccc;
background-color:white;
padding:5px 5px;
font:normal normal 13px Tahoma,Arial,Sans-Serif;
color:#ccc;
margin:0 0;
}
#feed-q-input:focus {
border-color:#F4661A;
color:#333;
outline:none;
}
#sbutt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDMVLmpCTXBULANj6SjF2bvKyc2XdOJKL932V_tHTbo7wh9aPMYlw9u1uko8jOxHozQQt5S5hBlnh2XNpm7xgjEvzsAVcGkEfJoqzs8fHz5jFPb3gSz8z8_btvRlYLm4Hh8H57Ax7V87M/s1600/search.png)no-repeat;
color:none;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 1px;
margin: 0px;
border:none;
width:58px;
height:28px;
cursor: pointer;
margin-top:-28px;
float:right;
}
#search-result-container {
width:550px;
height:320px;
overflow:auto;
position:absolute;
top:100%;
right:0;
z-index:999;
background-color:#f2f2f2;
border:1px solid #ddd;
padding:10px 10px 0;
margin:10px 0 0;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
display:none;
}
#search-result-container mark {
background-color:yellow;
color:black;
}
#search-result-container a {
text-decoration:none;
color:#0D3E71;
font-weight:bold;
font-size:12px;
display:block;
}
#search-result-container a:hover {
color:#052748;
}
#search-result-container h4 {
margin:0 0 10px;
font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
color:#B50001;
}
#search-result-container ol {
background:transparent;
border:none;
margin:0 0 10px;
padding:0 0;
}
#search-result-container li {
margin:0 0 1px;
padding:7px 8px;
list-style:none;
border:1px solid #B7C1CE;
background-color:white;
overflow:hidden;
word-wrap:break-word;
text-align:left;
}
#search-result-container li img {
display:block;
float:left;
margin:0 10px 4px 0;
border:1px solid #B7C1CE;
background-color:#F5F5F5;
padding:2px 2px;
}
#search-result-loader {
position:absolute;
top:100%;
left:0px;
z-index:999;
background-color:#ED702B;
color:white;
padding:3px 5px;
margin:-2px 0 0;
font:normal bold 10px Arial,Sans-Serif;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
display:none;
}

4. Sekarang Cari Kode <body> , dan letakan kode dibawah ini tepat dibawah <body>

<div id='top-menuwrap'>
<div id='search-wrapper'>
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onfocus='this.value=&apos;&apos;;' onkeyup='resetField();' type='text' value='Cari di sini...'/><input class='btnSearch' id='sbutt' type='submit' value=''/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
    url: "Url-Blog-Anda", // URL Blog
    numPost: 9999, // Jumlah maksimal temuan
    summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
    summaryLength: 400, // Jumlah karakter ringkasan posting
    resultTitle: "Hasil penelusuran yang di temukan", // Judul hasil pencarian
    noResult: "Tidak Di Temukan!!!", // Deskripsi 'tak ditemukan'
    resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
    thumbSize: 40, // Ukuran & resolusi thumbnail
    fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js' type='text/javascript'/>
</div></div>

5. Sekarang Cari Kode </head> dan letakan kode ini di bawah kode </head>

<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<div class='logo'>
<a href='Url-Blog-Anda' target='_blank'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRyY01qaw7SshlOhXONM2T2VNKjx_GpaRINi-rj0EOYhA4cVzqYjubASA60jsXIEJ2kmyzD0mPm3P8P6aMU3lq-TFBNpGa3zmw-XarpCMb4mDbMWg4D-2qIG8hMlGHwE8Io_8NPBwn5M/s1600/henrylogov2.png' style='padding:0px;'/></a>
</div>
<ul>
</ul>
</div>
</div>
</div>

Catatan:
Ganti Kode Warna #F4661A dengan kode warna yang anda inginkan, untuk melihat pilihan warna klik disini

Ganti Kode Url-Blog-Anda dengan Alamat Url blog anda!

Ganti Kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRyY01qaw7SshlOhXONM2T2VNKjx_GpaRINi-rj0EOYhA4cVzqYjubASA60jsXIEJ2kmyzD0mPm3P8P6aMU3lq-TFBNpGa3zmw-XarpCMb4mDbMWg4D-2qIG8hMlGHwE8Io_8NPBwn5M/s1600/henrylogov2.png dengan kode gambar logo yang anda inginkan!
 
Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Fixed Header Blog dengan Box Search Engine. Semoga bermanfaat !

Read More...