cara mengganti background facebook

 

Cara Mengubah Tampilan Background Facebook dengan Foto Sendiri - Pada kesempatan kali ini saya ingin berbagi nih teman, setelah sebelumnya saya memposting tentang cara merubah tampilan tema facebook 2013, untuk update terbaru ini saya akan berbagi tutorial cara mengubah tampilan background facebook dengan gambar kita sendiri. Selain terlihat lebih keren karena kita bisa memasang gambar sesuai selera, ternyata dengan cara ini juga loading ke akun facebook kita akan lebih cepat, karena gambar background yang diload berada pada drive komputer kita sendiri. Nah buat teman semua yang ingin mencoba merubah background facebooknya berikut saya berikan tutorialnya. silahkan disimak.

Cara Mengubah Tampilan Background Facebook dengan Gambar Sendiri

1. Pertama anda harus mengganti tema facebook dulu, gunakan tutorial saya yang ini

Cara Mengubah Tampilan (Tema) Facebook

2. Setelah tema facebook terinstal sekarang kita tinggal mengganti backgroundnya saja dengan foto kita sendiri.
#. Buka browser Mozilla Firefox atau Google Chrome (pada dasarnya sama)
#. Lalu pilih menu Tools => Add-ons atau tekan Ctrl+Shift+A untuk versi Mozilla
#. Lihat pada tab User Stylish lalu pilih tema facebook yang digunakan, pilih Edit

 

klik gambar untuk memperbesar

#. Nah sekarang kita cari URL background asli dari tema lalu kita ganti, tekan Ctrl+F untuk mencari kata
#. Masukan keyword "background-image:url" lalu tekan Enter. lihat gambar dibawah ini

#. Lalu kita akan menemukan URL dari background tema yang kita gunakan. Nah disini tinggal kita mengganti URL dari foto yang asli dengan URL foto kita sendiri, foto dari komputer atau dari web. Pada contoh kali ini saya menggunakan foto sendiri dari komputer.
#. Untuk mengetahui URL foto kita di komputer silahkan buka foto dengan browser, lihat gambar berikut

#. Setelah itu tinggal kita ganti URL gambar background yang asli dengan URL gambar kita sendiri ini pada edit stylish tadi diantara tanda petik, jadi seperti ini

"file:///E:/Gambar/Manchester%20United/manchester%20united%20wallpaper%2015%20%5Bvikitech%5D.jpg"

#. Lalu klik Save 
#. Selesai

Sekarang coba buka facebook anda seperti biasa, terasa berbeda bukan ? lebih cepat, keren dan pastinya terbaru :D. Nah demikianlah tutorial facebook kali ini mengenai Cara Mengubah Background Facebook dengan Gambar Sendiri. Semoga artikel saya ini bisa diterima dengan baik oleh teman semua, silahkan dicoba dan semoga berhasil !!

sumber : http://perilian.blogspot.com

Read more »

Cara Mudah Mengetahui Jumlah Pengunjung Pada Blog

Pengunjung / Visitor.

Belajar Ngeblog _--_ Halo sobat semua, apa kabarnya nih, jumpa lagi di blog nya blogger pemula. Dalam pertemuan kita kali ini saya akan membagikan satu tutorial blogging yaitu Cara Mudah Mengetahui Jumlah Pengunjung Pada Blog. Buat sobat yang sempat membuka halaman ini dan membaca artikel tutorial blogging ini berarti anda sedang mencari tau atau dengan bahasa kerennya adalah newbie atau blog pemula, sangat lah tepat di blog ini untuk sobat sebab semua tentang info seputar blog tutorial di sinilah tempatnya di http://newblogclub.blogspot.com. Sebelum kita masuk pada penjelasan dari tema kita kali ini, saya akan bercerita sedikit tentang pengalaman saya dalam dunia blogging. Terus terang saya katakan bahwa saya juga termasuk blogger pemula atau newbie. Seorang blogger pemula atau newbie sudah pasti mereka pernah merasakan yang namanya penasaran. Mengapa saya katakan demikian sebab itulah yang saya rasakan pada blog yang saya buat ini. Yang membuat timbulnya rasa penasaran ini adalah kita selalu ingin mengetahui seberapa banyak pengunjung yang datang ke blog kita untuk mencari informasi dari pada kebutuhan pengunjung tersebut. Berbicara tentang banyaknya pengunjung  itu tergantung kepada anda sampai di mana kreatif anda dalam membuat blog dengan super SEO Friendly. Karena dengan blog yang Seo Friendly yakin lah traffic blog anda akan terus meningkat.

Bagaimana sobat, anda mau tau jumlah pengunjung yang datang ke blog anda...simak tutorialnya.

• Langsung ke alamat situsnya di http://www.histats.com
• Lakukan pendaftaran atau registrasi.
• Isi data yang di perlukan untuk melakukan registrasi.
• Dalam hal ini yang di butuhkan adalah nama anda dan email yang digunakan pada blog anda.
• Masukkan kata sandi atau password pada kotak registrasi sesuka anda. Untuk memudahkan mengingat kata sandi atau password sebaiknya anda memakai password email anda.
• Pilih negara dan zona waktu kota anda.
• Pilih kategori dan sub kategori blog anda.
• Klik kotak kecil untuk tanda centang pada persyaratan dan ketentuan.
• Ketik kode chaptca pada kotak yang tersedia.
• Klik tombol oke.
• Selanjutnya cek email yang anda gunakan pada registrasi histats.
• Buka email dari Histats dan klik link konfirmasi registrasi.
• Link konfirmasi akan di arahkan pada halaman homepaga histats.
• Daftarkan URL blog anda.
• Klik Counter Code untuk mendapatkan kode javascript counter.
• Pilih salah satu stylish counter yang anda inginkan.
• Klik untuk mencentang semua kotak kecil di atasnya.
• Scrool ke bawah dan copy kode javascriptnya dalam posisi standard html.
• Langsung ke Dashboard blog anda dan pilih menu Layout.
• Tambah widget text javascrip.
• Pastekan kodenya pada area text html, untuk judul widget boleh di kosongkan.
• Klik Save / simpan.
• Selesai.

Setelah anda melakukan langkah di atas, sekarang anda sudah dapat mengetahui jumlah pengunjung pada blog anda. Bukan hanya itu, pengunjung yang sedang online pada blog anda juga akan terlihat pada counter histats tersebut. Mudah bukan..

Semoga dengan penjelasan di atas tentang Cara Mudah Mengetahui Jumlah Pengunjung Pada Blog dapat anda lakukan sendiri dengan mudah tanpa ada kendala dengan harapan hanya satu yaitu semoga menjadi blogger profesional di masa akan datang. Salam sukses.

Read more »

Cara Memasang Daftar Isi Otomatis Pada Blog

Cara Memasang Daftar Isi Otomatis Pada Blog.

Belajar Ngeblog _--_ Pada pertemuan kita kali ini saya akan membagikan satu tutorial blog di mana kita akan sedikit menambah atau melengkapi elemen pada blog yang memungkinkan traffik blog kita bisa meningkat. Dalam penjelasan ini saya beri judul Cara Memasang Daftar Isi Otomatis Pada Blog. Seperti kita ketahui bahwa meningkatnya traffic atau banyaknya pengunjung ke blog kita, ada beberapa faktor dan salah satunya adalah mendesain blog se bagus mungkin agar tampilan blog selalu disenangi oleh para pencari informasi. Coba lihat pada gambar di bawah ini, Keren kan..

Oke sobat blogger, mari kita simak bersama langkah - langkah cara memasang daftar isi pada blog. 

Ada dua cara yang bisa anda lakukan untuk memasang daftar isi tersebut.

1. Anda dapat memasang pada bagian laman posting.

2. Juga dapat di lakukan dengan menggunakan Tambah widget pada Layout.

Nah..Pada metode di atas dengan dua cara akan semuanya saya jelaskan pada pertemuan kita kali ini.

Caranya sebagai berikut,

CARA PERTAMA

• Login ke blog dan pilh salah satu blog anda.
• Pilih Menu >> LAMAN (PAGES) pada bagian kiri menu Horizontal.
• Klik 1x Laman baru (new page) >>lalu klik Laman Kosong ( Blank Page )
• Buat judul pada laman tersebut " DAFTAR ISI "
• Pilih HTML pada bagian kiri atas di samping COMPOSE.
• Copy kode di bawah ini lalu letakkan di antara <div> dan </div> pada laman HTML.

<div 1px="1px" solid="solid" style="height: 820px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">
<link href="https://sites.google.com/site/republicofnote/script/SitemapV2.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="https://sites.google.com/site/republicofnote/script-1/daftarisipackv2.js"></script> <script src="http://newblogclub.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> <script type="text/javascript">
var accToc=true;
</script> <script src="https://sites.google.com/site/republicofnote/script-1/daftarisiv2.js" type="text/javascript"></script></div>

• Lalu klik SAVE dan PUBLISH
• SELESAI.

CARA KEDUA

• Sama seperti di atas LOGIN ke Blog terlebih dahulu dan pilih blog nya.
• Lalu pilih Menu >> LAYOUT pada bagian kiri menu horizontal.
• Klik TAMBAH WIDGET terserah mau di letakkan di mana.
• Pilih WIDGET TEXT CONVIGURASI HTML.
• Buat judul DAFTAR ISI pada kotak judul.
• Copy kode di atas dan letakkan pada area text html.
• Scroll ke bawah lalu klik SAVE.

Keterangan ; Sebelum anda klik SAVE terlebih dahulu anda mengganti kode pada scrip yang berwarna merah dengan URL blog anda agar semuanya berjalan normal tanpa ada kendala apa pun.

Sebelum saya beranjak ke tutorial berikutnya saya akan melengkapi penjelasan di atas mengenai fitur ini.

Daftar isi ini dapat di kategorikan sebagai Label atau Sitemap pada setiap postingan blog anda. Coba anda perhatikan pada saat anda selesai membuatnya, lihat pada setiap paper atau kop nya sudah jelas sama seperti label postingan pada homepage blog anda. Untuk itu bila anda memakai fitur ini anda bisa me remove widget label pada homepage anda...Nah..! mudah kan cara membuatnya. Salam

Semoga apa yang ter coret  pada postingan kali ini yaitu Cara Memasang Daftar Isi Otomatis Pada Blog dapat anda pahami dan mudah anda lakukan tanpa ada kesulitan dengan harapan sukses selalu mejadi seorang blogger indonesia. SELAMAT MENCOBA

To Be Continue.

Read more »

Tips dan Trik Melakukan Optimization On Page

Tips dan Trik Melakukan Optimization On Page

Belajar Ngeblog _--_ Ada beberapa tips penting untuk blog pemula yaitu melakukan Optimisasi on page pada blog yang baru dibuat,dan langkah ini sangat disarankan dan diharuskan agar blog cepat terindex di google. Optimisasi on page ini adalah salah satu langkah di mana blog yang kita bangun akan selalu berada di halaman pertama pada hasil pencarian mesin pencari google. Tujuan on page ini bukan semata mata untuk menjadi no. satu atau selalu berada di urutan paling atas di hasil pencarian google namun  tujuan on page ini agar setiap artikel yang di publikasikan akan cepat ter index di google, maslah no 1 di search engine itu belakangan.

Logikanya seperti ini, Melakukan langkah langkah optimization pada blog seperti halnya mengikuti balapan mobil, siapa cepat siapa dapat. Nah yang jadi pertanyaan saya adalah apakah mobil balap yang akan  saya gunakan akan mampu mengalahkan mobil balap lawan lainnya? belum tentu, on page adalah langkah awal, masih ada beberapa tahap lagi yang harus di lakukan agar bisa  menjadi sang juara di search engine. 

Agar proses optimization berjalan baik kita harus membuat artikel  konten yang berkualitas. Lakukan langkah  dengan optimisasi off page. Langkah off page ini terbagi dalam dua proses yaitu mencari backlink dan promosi blog pada jejaring sosial ( ini saya akan jelaskan nanti ). Di segmen kita kali ini saya hanya akan membahas tentang optimization on page.

Tanpa panjang lebar mari kita ikuti saja cara terbaik melakukan on page di bawah ini satu per satu, sebaiknya melakukan langkah ini haruslah dengan seksama dan teliti, karena proses ini akan di lakukan hanya sekali saja.

• Sebaiknya blog memakai template dengan tampilan super SEO Friendly.

• Blog yang sudah lama aktif yang tetap anda ingin pakai sebaiknya lakukan penyetelan dinamic heading pada blog anda.

• Sebaiknya lengkapi dengan Breadcrumbs navigasi dan konten/ artikel terkait.

• Untuk struktur template, pastikan tampilan artikel berada pada bagian kiri body dan sidebar widget pada bagian kanan body.

• Pastikan blog sudah didesain  lengkap dengan Title tag dan meta description yang berbeda di setiap halaman.

• Daftarkan blog anda pada Google Analitic dan Google Webmaster Tools dan mendapatkan kode Verifikasi pada kedua tools tersebut dan satu lagi yaitu lakukan submit sitemap pada google webmaster.

• Daftarkan Blog anda pada layanan google Feedburner.

• Setiap Gambar yang akan di posting agar selalu menggunakan alt tag.

• Pastikan blog terbebas dari iframe, script yang telah di host pada hosting luar dan Flash pada elemen widget sidebar.

• Pastikan memasang widget blog arcive, popular post dan labels.

• Jangan memasang link yang menuju blog atau website lain pada widget sidebar, Sebab pada setiap link yang aktif keluaradalah titik kebocoran, ini adalah cara mengantisipasi adanya WARNING pada blog kita jangan sampai pada tahap ke  Seo-an yaitu mencari backlink anda harus bekerja keras hanya untuk meneruskan poin ke blog orang lain.

• Perhatikan baik baik pada bagian akhir template sebaiknya anda memasang link menuju homepage blog anda yang mengandung kata kunci utama pada blog anda.

Jika anda telah melakukan optimization seperti langkah diatas maka blog yang anda bangun akan semakin sangat memadaidari sisi on page, tidak perlu lagi anda ke sana ke mari dan meng utak atik blog, hanya saja yang perlu anda lakun sekarang memastikan bahwa jangan memasang widget pada sidebar yang tidak perlu.

Mungkin ini saja yang bisa saya jelaskan pada pertemuan ini yaitu tips dan trik melakukan optimization on page pada blog.

Semoga postingan diatas bisa berguna dan bermanfaat bagi kita khususnya bagi blog pemula. Salam

Read more »

Cara Memasang Navigasi Breadchumb diatas Postingan.

Belajar Ngeblog

Cara Memasang Navigasi Breadchumb diatas Postingan. Halo sobat blogger...bagaimana nih kabarnya, baik baik aja kan. Masih ingat janji saya...? hehe..tetap aja nih ditempat belajar blog dan di jumpa kita kali ini saya akan bagi pengalaman buat sobat yaitu cara membuat blog menjadi semakin SEO Friendly. Setelah kita membahas tutorial blog kini saatnya mengedepankan blog dengan tujuan agar semakin SEO. Salah satu caranya adalah menambahkan fitur navigasi yang cara memasangnya akan saya jelaskan sebentar dan yang pasti fitur navigasi ini kita akan letakkan tepat diatas judul postingan atau judul artikel. Fitur navigasi ini para master web menyebutnya sebagai BREADCHUMB. Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol yang tertuju home atau halaman utama blog.

Pada dasarnya fitur Breadchumb ini merupakan cara seo dengan tautan internal yang memungkinkan pengunjung akan lebih mudah untuk menavigasi balik ke bagian halaman sebelumnya atau langsung ke halaman utama blog dengan cepat dan singkat

Jadi dengan breadchumb yang simpel seperti ini ; mesin pencari atau search engine bekerja hanya melihat dari label atau tags setiap postingan pada blog kita, karena saat ini google sudah tidak menggunakan  meta keywords untuk mengindex suatu web atau blog, maka yang jadi operasi google saat ini adalah pada meta description dan label atau kategori. Maka dari itu semakin relefan sebuah blog dengan label postingan maka akan semakin besar peluang untuk menjadi  no.1 di halaman depan hasil pencarian google.

Bagaimana sobat..mau kan postingan kita selalu di halaman depan google. Kalau begitu mari kita cari tau cara memasang fitur ini biar mantapp gitu lho...ok siap...?

Langkah langkahnya sebagai berikut,

LOGIN ke Blog. ( sudah pasti )
Pilih blog yang ingin di edit.
Pilih TEMPLATE pada menu Vertikal bagian kiri.
Biasakan meng klik tanda EXPAND di sudut kanan atas.
Klik UNDUH TEMPLATE LENGKAP, tunggu sampai selesai mengunduh.
Klik CLOSE pada POP UP Expand.
Klik EDIT TEMPLATE lalu langsung cari kode ini ]]></b:skin>
.
Gunakan Ctrl+F dan copas kode yang di cari lalu letakkan pada kotak search box.
Kopy kode di bawah ini lalu letakkan di atas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}

Selanjutnya sobat cari kode seperti ini <div class='post hentry'>
Lalu copy kode dibawah ini lalu letakkan tepat di bawah <div class='post hentry'>.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'> Browse &#187;
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop> </b:if> &#187;
<data:post.title/>
</div>
</b:if>
</b:if>

Klik SAVE dan selesai.

Berhasil atau tidak itu adalah cara anda, tapi jangan takut sobat di blog ini tersedia kotak komentar, silahkan bertanya insya Allah saya bisa menjawabnya.

Semoga postingan kali ini yaitu Cara memasang Navigasi Breadchumb diatas Postingan  dapat di pahami selalu di mudahkan untuk membuatnya sendiri.

Salam by Belajar Ngeblog

Read more »

Cara Memasang Title Tag Agar Lebih SEO Friendly

Belajar Ngeblog

Berbagai macam cara ala blogger mania di mana men setting  blog mereka agar tampil lebih SEO Friendly. Memang itulah usaha kita selalu bekerja dan bekerja untuk memperbaiki blog agar tetap number one di search engine. Memiliki suatu blog dengan se gudang artikel tak akan mampu mewakili blog itu untuk menjadi yang terdepan sebab dalam proses optimasi blog yang harus kita teliti dan lebih mengutamakan pada jantung blog yaitu susunan Meta Tag dan  Title Tag. Begitu pun sebaliknya, template blog yang di lengkapi dengan Meta Tag dan Title Tag tak mampu jua menjadi terdepan kalau artikel tidak mempunyai nilai dan manfaat atau dengan kata lain  Artikel yang tidak ber kualitas. Nah di segmen kita kali ini adalah saya akan membagikan satu trick SEO yaitu Cara Memasang Title Tag Agar Lebih SEO Friendly.

Sebelum kita masuk ke inti dari tema ini ada baiknya kita harus mengetahui apa arti dari pada Title Tag. Title = Judul sedangkan Tag = Label jadi apabila digabungkan dalam bahasa indonesia adalah Label Judul atau dalam bahasa blog adalah Tag Judul. Title Tag atau Tag Judul apa bila kita gambarkan biasanya ini selalu berada pada posisi paling atas contoh seperti pada sebuah toko atau warung, apabila nama toko atau nama warung tersebut tidak nampak oleh pengunjung otomatis pengunjung toko warung tersebut berkurang walaupun toko dan warung itu menyediakan alat atau menu yang sangat berkualitas. Jadi pengertian daripada Title Tag pada blog yaitu memasang Tag Judul agar pengunjung yang dengan melakukan pencarian di kotak search engine akan mudah mengenal tema blog yang akan di kunjungi. Olehnya itu buat para blogger pemula yang belum memahami atau belum mengetahui cara memasang Title Tag pada blog, simaklah baik - baik tutorialnya di sini. Dengan memasang Title Tag ini pada Blog agar tampilan akan menjadi SEO Friendly.

Mari kita simak tutorialnya sekarang..

• LOGIN ke blog ( sudah pasti ).
• Pilih Blog yang ingin di edit.
• Pilih Menu >> TEMPLATE.
• Biasakan mencentang EXPAND atau BACKUP.
• Klik DOWNLOAD TEMPLATE LENGKAP pada POP UP EXPAND.
• Klik CLOSE POP UP setelah selesai men Download.
• Klik EDIT TEMPLATE.
• Lalu tekan Ctrl+F dan copas kode ini  <title><data:blog.pageTitle/></title> ke box search codes.
• Kalau sudah ketemu kodenya, copy kode di bawah ini dan ganti kode <title><data:blog.pageTitle/></title>.

<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

• Klik SAVE untuk mengakhiri tutorialnya.

Keterangan: Setelah melakukan langkah di atas, coba anda perhatikan tampilan blognya dan klik salah satu judul artikel di blog tersebut, apakah pada tab browser tampil seperti ini " JUDUL ARTIKEL POSTINGAN | JUDUL BLOG ANDA". Kalau sudah seperti ini berarti salah satu trick SEO sudah selesai anda lakukan.

Dengan mengikuti dan menyimak bersama pada postingan kali ini yaitu Cara Memasang Title Tag Agar Lebih SEO Friendly kiranya dapat bermanfaat untuk kita semua dengan harapan agar kita menjadi seorang blogger profesional.
Salam by http://newblogclub.blogspot.com

Read more »

Cara Membuat Menu Dropdown+ Search Box

Halo sobat setia blogger...di jumpa kita kali ini saya akan membagikan satu tutorial yaitu Cara Membuat Menu Dropdown+ Search Box pada blog. Menambahkan menu pada blog rasanya lebih cantik dan lebih SEO Friendly. Coba perhatikan Gambar menu di bawah ini, keren kan...

Kalau sobat ingin menu seperti di atas mari kita simak bersama tutorialnya..Oke sudah siap untuk menyimaknya...?

Lihat opsinya berikut ini;

• LOGIN ke blog terlebih dahulu.
• Pilih blog yang ingin di tambahkan menu.
• Klik TEMPLATE >> Expand >> Unduh TEMPLATE LENGKAP >> Close POP UP Expand.
• Klik EDIT TEMPLATE
• Lalu cari kode seperti ini ]]></b:skin> atau gunakan Ctrl+F untuk mencari kode tersebut.
• Kalau sudah ketemu kode nya lalu copas kode dibawah ini, lalu letakkan tepat di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbLMdX9juVNe63a6aEz7_ba_WyIJJj0L3gal0nblg6ENvE3sul6ZC7RiRJXGZYzK54crCad1cufQ1KaKG6IxR19nG5IZSWbpXjlTotQCqnIfQeGLDfvp3AuPktK6-YC3wVv0olD5pbFE/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding: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-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3j_5ACdZeJ4pc2EbT-T4w2J-37hPoxewaya6L68DG6cLdFf4Jp68ZeR8sViHZzvzaLjBkAjOwB_YJuq-txnuBYlgJoSJnb_TRrSSi5HqIc9ua_ZG7BdYDrh1SC1Cb-MHnrgYRYDaX2Ck/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#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;padding-bottom:5px;-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{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Keterangan: perhatikan tulisan yang di cetak tebal berwarna biru, kode tersebut bisa anda rubah sesuai keinginan anda.

Langkah berikutnya adalah,

• Cari kode <header> atau gunakan Ctrl+F lalu copas kodenya letakkan pada box search.
• Lalu copas lagi kode di bawah ini dan pasang tepat di bawah atau di atas kode <header>
• Lalu SAVE.
• Selesai.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='Your Link'>Home</a></li>
<li><a href='Edit Link'>Menu</a></li>
<li><a href='Edit Link'>Menu1</a></li>
<li><a href='Edit Link'>menu2</a></li>
<li><a class='trigger' href='#'>menu3</a>
<ul>
<li><a href='Edit Link'>Sub menu1</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub Menu2</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub Menu3</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Menu4</a>
<ul>
<li><a href='Edit Link'>Sub menu1</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub menu2</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub menu3</a></li>
<li class='hr'/>
<li><a href='Edit Link'>Sub menu4/a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://newblogclub.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;
padding:4px 10px; font:12px Arial;color:#666;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxOJxdQjSzuUoaptitm7XbcmWwDfKTmIZDpP6i3Lrkrg-0hAO5SJ_gVg0NAemKJ19WrioXmAwfQWDXJBiVYJhCkGPYcsgfWaAUhNnjm-ymaGpMhMG_2ZG5DN3U7ZjeUk7t9Z0hGZkhi4/s1600/field-bg.gif)
no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuF6_yK9ej4XM9cWFC8S80dYn6w0S1nzZO6CnWtDFVRopfA-Z_AK2m4uLBMmM83TSOhCKYkbW1rdagJzuT71cHwyakap67phbG2eLdDeWAP9Pb3v2sLrGMG_eVRWkMEQmRufhp7Ubk488/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Keterangan: Lihat tulisan tebal berwarna merah, silakan di ganti dengan URL blog sobat.

Setelah semuanya selesai dan langkah di atas berhasil anda lakukan berarti anda semakin bisa membuat Blog dengan tampilan SEO Friendly.

Semoga tema tutorial kali ini yaitu Cara Membuat Menu Dropdown+ Search Box dapat bermanfaat bagi semua orang khususnya bagi blog pemula. Salam.....

Read more »