SEO Friendly Article 300x300 10 Tips Menulis Artikel yang SEO Friendly

Ada banyak teknik Search Engine Optimization, tapi mungkin yang paling penting adalah bagaimana menulis artikel yang SEO friendly. Artikel adalah bagian dari blog yang dicari orang melalui search engine. Teknik SEO macam apapun akan kurang efektif bila tidak dibarengi dengan menulis artikel yang berkualitas, baik untuk SEO maupun bagi pembaca.
Berikut adalah beberapa tips dasar untuk menulis artikel SEO friendly:

Pilih Keywords dengan Tepat. Gunakan bantuan tools seperti Google Insight atau Google AdWords Keywords Tool untuk memilih kata kunci yang tepat. Dengan kedua tools di atas, kita dapat mengetahui keyword apa yang sedang trend, baik di seluruh dunia maupun negara tertentu. Kita juga bisa mendapat informasi berapa search per bulan untuk keyword tersebut, jumlah kompetitor, dan alternatif keyword yang bisa kita gunakan.
Artikel Jangan Terlalu Panjang. Sebisa mungkin buat artikel di bawah 1000 kata. Artikel yang telalu panjang mungkin akan menyulitkan crawler, tapi yang lebih penting artikel kepanjangan akan membuat visitor malas membaca. Jika memang tidak memungkinkan dibuat pendek, pecah saja menjadi beberapa postingan.

Jangan Menulis untuk Search Engine. Walaupun artikel ini mengajarkan untuk menulis artikel yang SEO friendly, bukan berarti kita harus mengabaikan isi dari artikel itu sendiri. Buat artikel yang enak dibaca, taruh keyword dengan pas, isi artikel dengan tulisan yang informatif. Percuma mendatangkan banyak pengunjung kalau mereka tidak mau kembali lagi karena tulisan yang buruk kan?
Gunakan Backlink yang Kredibel. Kalau anda memerlukan sumber dari luar untuk tulisan anda, carilah situs yang terpercaya seperti Wikipedia, kemudian link artikel anda ke situ. Mencantumkan sumber asli jika anda harus mengutip isi suatu situs akan membuat anda dihormati, dan orang mungkin akan melakukan hal yang sama kalau menggunakan artikel anda.
Jangan Copas. Yang ini penting sekali, artikel yang memiliki kemiripan hingga sebagian besar dengan artikel yang sudah lebih dahulu terindeks tidak ada nilainya di mata search engine. Kalau anda mengambil informasi dari situs lain, usahakan untuk mengubahnya dengan kata-kata anda sendiri.
Jaga Kepadatan Keyword. Jangan pernah berpikir bahwa “semakin banyak semakin baik”. Sebarkan keyword dengan merata ke seluruh artikel, dan masukkan ke dalam kalimat dengan natural.
Posisi Keyword. Satu hal yang pasti, taruh keyword dalam judul postingan. Setelah itu masukkan keyword ke kalimat pertama pada paragraf pertama (kalau bisa), dan kalimat terakhir pada paragraf terakhir. Selain itu, menaruh keyword pada sub-judul juga cukup efektif.
Internal Link. Tautkan kata kunci dalam artikel anda ke postingan lama yang berhubungan. Internal linking sangat efektif, dan akan membantu membuat posting-posting lama terindeks kembali oleh search engine.
Cek Ejaan Anda. Jangan sampai keyword anda tidak terindeks oleh search engine hanya gara-gara anda salah ketik.
Artikel Original. Walaupun susah, cobalah buat artikel original yang tidak akan bisa ditemukan di situs lain.

admin travel 07.21 New Google SEO Bandung, Indonesia

Menulis Artikel Yang Seo Friendly

Posted by software,tutorial dan alamat on Kamis, 31 Maret 2011

Memperkecil File Gambar agar mudah di Upload

Posted by software,tutorial dan alamat on Rabu, 30 Maret 2011

Cara Membuat Label Cloud

Posted by software,tutorial dan alamat on Senin, 21 Maret 2011

Teknik pembuatan daftar isi di atas bisa saja kita lakukan, akan tetapi tentunya perlu waktu yang lama untuk mebuatnya dan tentunya akan menyita waktu kita. Nah... yang ingin saya terangkan saat ini adalah bagaimana cara membuat sebuah Daftar isi blog secara otomatis. Yupppsss.. dengan hanya sekali kita membuatnya maka daftar isi tidak usah di buat berulang-ulang namun terus bekerja secara otomatis, teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta. Agar tidak bingung tentang daftar isi blog yang akan saya terangkan, silahkan alihkan perhatian sobat ke bagian sebelah kanan atas blog ini, di sana terdapat link brtuliskan Lihat Daftar Isi, jika sobat meng klik link tersebut maka secara otomatis akan di perlihatkan seluruh judul artikel yang pernah saya posting lengkap dengan tanggal serta kategori dari artikel tersebut. Sunguh menarik bukan? jika sobat ingin melihatnya sobat bisa mengkliknya dan jika sobat tidak ingin melihatnya sobat tinggal mengkliknya kembali dan daftar isi pun akan di sembunyikan sehingga tidak akan menggangu pemandangan. Tertarik untuk membuatnya? silahkan ikuti langkah-langkah berikut :
Langkah pertama :

Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik link Download full template, silahkan save untuk backup data
Copy paste kode CSS berikut di atas kode ]]></b:skin>

Klik tombol SIMPAN TEMPLATE

Langkah kedua :

Klik menu Elemen Halaman
Klik tulisan Tambah sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
Copy paste kode berikut ke dalam elemen yang muncul

Klik tombol Simpan
Pindahkan elemen yang baru di buat tepat di atas elemen Post
Klik tombol Simpan yang berada di sebelah atas
Klik tulisan Tambah sebuah Elemen Halaman kembali
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen

Ganti tulisan YOURBLOG dengan nama blog sobat
Klik tombol Simpan
Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)
Klik tombol SIMPAN yang berada di sebelah atas
Selesai

Kode yang terakhir di pasang merupakan kode asli yang di buat oleh hans dan tentunya semua hasil dari kode tersebut berbahasa inggris, baik itu judul , alert dan segala macamnya adalah berbahasa inggris, jika sobat menginginkan jadi berbahasa indonesia, saya sudah memodifikasi javascrips nya sehingga akan menjadi berbahsa indonesia seperti milik saya. Cara yang harus di lakukan sangatlah mudah, sobat tinggal mengganti kode terakhir yang di pasang dengan kode di bawah ini :

Jangan lupa untuk mengganti tulisan YOURBLOG dengan nama blog sobat.

Selamat mencoba ! admin travel 20.21 New Google SEO Bandung, Indonesia

Cara Membuat Daftar Isi Pada Blog

Posted by software,tutorial dan alamat on Minggu, 20 Maret 2011

Ada Bermacam macam Blogroll diantaranya

Blogroll dengan marquee

yang paling banyak di gunakan oleh para blogger untuk menghemat space pada blog adalah dengan menggunakan perintah marquee.

Contoh membuat blogroll dengan perintah marquee :

 <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >  
 
 <a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a> 
 <br/><br/> 
 <a href="http://user-online.blogspot.com" target="_blank">User Online</a> 
 <br/><br/> 
 <a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free Blog Template</a> 
 <br/><br/> 
 <a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize service</a> 
 <br/><br/> 
 <a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a> 
 <br/><br/> 
 
 </marquee>

Maka nanti yang akan tampil pada blog kita adalah seperti ini :

User Online

free Blog Template

Authorize service

Blog D'Tree

Sedikit clue biar agak jelas. Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" , direction="left" , direction="right" .

width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400" , height="250" .

Ada variasi lain, yaitu dengan memakai tabel, contoh :

 <table border="3" width="155" height="130" cellpadding="2"> 
 
 <tr> 
 
 <td align="left"> 
 
 <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >  
 
 <a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a> 
 <br/><br/> 
 <a href="http://user-online.blogspot.com" target="_blank">User Online</a> 
 <br/><br/> 
 <a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free Blog Template</a> 
 <br/><br/> 
 <a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize service</a> 
 <br/><br/> 
 <a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a> 
 <br/><br/> 
 
 </marquee> 
 
 </td> 
 
 </tr> 
 
 </table>

Maka hasilnya akan seperti di bawah ini :

User Online

free Blog Template

Authorize service

Blog D'Tree

Blogroll dengan menu dropdown

Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://rubrik-elektronik.blogspot.com">Rubrik elektronik</option>

<option value="http://user-online.blogspot.com">User Online</option>

<option value="http://rohman-freeblogtemplate.blogspot.com">free blog template</option>

<option value="http://kolom-authorized.blogspot.com">Authorize service</option>

<option value="http://contoh-blog.blogspot.com/">Blog D'tree</option>

</select>

</form>

Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :

Contoh variasi lainnya :

    <h3>  Blogroll  </h3>  

<div align="left">  

<select style size=5="font-weight: normal; font-size: 13px;  width="135"; font-family: Verdana,Tahoma,Arial; background-color:  rgb(229, 229, 229);"  onchange="window.open(this.options[this.selectedIndex].value,'_blank')"  size="1" name="menu"> 

<option style="font-weight: normal; font-size: 11px; color: rgb(204,  204, 204); font-family: Verdana,Tahoma,Arial;" value=""  selected="selected">--Teman-temanku--</option>           

<option value="http://rubrik-elektronik.blogspot.com">rubrik Elektronik</option>  

<option value="http://user-online.blogspot.com">User Online</option> 

<option value="http://rohman-freeblogtemplate.blogspot.com">Free blog template</option> 

<option value="http://kolom-authorized.blogspot.com">Authorized Service</option> 

<option value="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</option> 

</select> 

</form> </div>

Hasilnya akan seperti ini :

Membuat Blogroll

Cara Upload File di Blog Agar dapat di Download

Posted by software,tutorial dan alamat on Kamis, 17 Maret 2011

Membuat Link Untuk Download

Mungkin kita ingin menaruh file untuk didownload oranglain yang membuka blog kita tapi tidak tahu caranya atu kita ingin membagikan ebook kepada pengunjung dengan mendownloadnya..

Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

Silahkan klik di sini untuk menuju http://www.SnapDrive.net
Klik tulisan Register
Isi formulir yang disediakan dengan data diri sobat

Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil
Password --> isi dengan password yang di inginkan. contoh : pakraden
Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden
Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id
First name -->isi dengan nama depan sobat
Last name --> isi dengan nama belakang sobat
Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia
Postcode --> isi dengan kode post daerah sobat
Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)
Date of birth -> pilih tanggal kelahiran sobat
Preferances isi dengan tulisan yang tertera di situ

Klik tombol Register
Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi
Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum
Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut
Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih
Klik tombol OK
Silahkan Login dengan username serta password yang tadi di tuliskan saat register
Setelah berada di halaman account sobat, klik tulisan Upload
Klik tombol Add Files
Pilih file yang ada dikomputer sobat yang mau di upload
Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung
Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya
Klik tulisan HTML Code
Copy kode yang di berikan lalu paste pada program notepad
Klik tulisan Logout untuk keluar dari situs tersebut
Silahkan tutup layar browser sobat

Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">billing internet.zip</a>

Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini :

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :
Untuk men download program billing internet, silahkan anda klik link di bawah ini :
<br/><br/>
<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Maka nanti di blog kita akan tampil seperti ini :
Untuk men download program billing internet, silahkan anda klik link di bawah ini :
download
Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!
http://kolom-tutorial.blogspot.com admin travel 23.03 New Google SEO Bandung, Indonesia

Cara Membuat Link Untuk Download

Trick Memasang Meta Tag Pada Blogspot

Posted by akanglil

March 8, 2011

Trick Memasang Meta Tag Pada Blogspot. Kode meta tag saya rasa cukup perlu disematkan pada blogspot, hal ini untuk sedikit memberi warna pada teknik SEO yang kita gunakan. Sebelumnya, google telah mengumumkan bahwa penggunaan Meta Tag Keyword pada blog sudah tidak dipakai lagi, google tidak akan menilai meta kewyord menjadi hal penting untuk sekarang ini, karena banyak blog spam yang berlebihan menggunakan keyword pada meta tag nya namun tidak sesuai dengan isi blog tersebut.

Maka dari itu pada kesempatan cara memasang meta tag seo pada blogspot ini, saya akan melewatkan penggunaan keyword pada meta keyword. Disini saya hanya memakai meta Description yang berguna untuk memperjelas apa isi blog kita ketika tampil pada halaman pencarian google. To the point saja, berikut saya paparkan cara-caranya.

Trick Memasang Meta Tag SEO Pada Blogspot

1. Masuk ke blogger.com dengan akun anda.
2. Pilih blog anda
3. Masuk ke tab rancangan
4. Pilih tab edit html
5. Backup dahulu atau anda download full template anda untuk menghindari hal-hal yang tidak dinginkan.
6. Cari kode berikut

<head>
<b:include data=’blog’ name=’all-head-content’/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

7. Setelah itu anda hapus kode berikut

<title><data:blog.pageTitle/></title>

8. Ganti dengan kode meta tag dibawah ini

<b:if cond=’data:blog.pageType == “item”‘>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond=’data:blog.pageType != “item”‘>
<meta content=’Judul blog anda, deskripsikan apa isi blog anda dengan menarik jangan lebih dari 160 karakter‘ name=’description’/>
</b:if>
<meta content=’GENERAL’ name=’rating’/>
<meta content=’global’ name=’distribution’/>
<meta content=’follow,all’ name=’robots’/>
<meta content=’Indonesia’ name=’geo.placename’/>
<meta content=’global’ name=’distribution’/>
<meta name=”language” content=”kode bahasa yang blog anda gunakan, misal bahasa indonesia jadi ID, atau english jadi EN” />
<meta name=”author” content=”nama anda” />

9. Sebelum di save, ganti dahulu tulisan-tulisan yang saya beri warna pada kode meta tag blogspot diatas dengan yang anda butuhkan.
10. Save templates blogspot anda
11. Silahkan anda lihat blog anda.
Jika anda lihat dengan menggunakan klik kanan dihalaman utama blog anda, dan pilih page source, maka akan terlihat beberapa kode meta tag seperti diatas. Jika terlihat maka anda telah berhasil memasang meta tag seo pada blogspot.

Apa Fungsi Meta Tag SEO Pada Blogspot

Sebenarnya dengan anda membaca meta name dari kode-kode diatas, anda sudah tahu kode meta tag blogspot diatas mempunyai fungsi untuk apa, ada yang menjelaskan tentang Geo.place atau posisi anda, menjelaskan siapa author pada blog tersebut, menjelaskan bahasa yang anda gunakan dan yang lain sebagainya.
Yang terpenting adalah fungsi meta tag description, seperti yang sudah saya jelaskan hal ini berguna untuk memberikan gambaran pada hasil pencarian di google tentang isi blog anda. Usahakan sesuai dengan content yang anda buat, dan buat lah yang menarik agar mendapat banyak pengunjung.
Gunakan variasi kata kunci pada description blog anda, ini sangat berguna untuk memperkuat serp di pencarian google nantinya, contoh sebagai berikut :

description : Belajar SEO, blog indonesia berisi artikel untuk refferensi belajar para SEO newbie blogger indonesia.

Diatas terlihat ada variasi kata kunci selain belajar SEO, anda bisa gunakan teknik seperti diatas.

Apa Kelebihan Meta Tag SEO Pada Blogspot

Kelebihan meta tag seo diatas adalah adanya perubahan struktur penampilan judul blog, tidak seperti bawaan blogger yang disara kurang SEO Friendly. Mengapa demikian?
Bawaan blogspot akan tertulis seperti berikut :

Nama Blog Anda : Judul Postingan Anda

Konsep diatas tidak bagus dalam SEO, karena memotong judul postingan artikel blog anda yang berisi keyword. Coba saja jika judul postingan artikel anda panjang, sudah pasti akan terpotong nanti ketika di hasil pencarian, karena google membatasi panjang judul artikel dalam pencarian. Max hanya 70 karakter.
Nah degan memasang meta tag SEO untuk blogspot diatas, maka pada hasil pencarian akan berganti lebih seo friendly. Akan menempatkan judul postingan artikel anda di awal dan judul blog anda di akhir. Contoh nya sebagai berikut :

Judul Postingan Anda – Judul Blog Anda

Jika anda menggunakan teknik memasang meta tag blogspot ini, jangan lupa anda baca dahulu artikel penerapan keyword pada domain blog, dalam artikel tersebut saya menjelaskan variasi penggunaan kata kunci pada judul blog. Dengan begitu, kepadatan kata kunci pada blog anda akan semakin bagus.

Kesimpulan Cara Memasang Meta Tag SEO Pada Blogspot

Kesimpulannya penggunaan meta tag seo pada blogspot ini cukup membantu anda menjelaskan tentang isi dan berbagai hal yang ada pada blog tersebut,selain itu juga dapat membuat variasi keyword pada judul postingan anda semakin banyak sehingga akan terbantu dalam memuncaki serp di pencarian kata kunci yang anda inginkan.
Bagaimana simple dan cukup berguna bukan trick cara memasan admin travel 18.03 New Google SEO Bandung, Indonesia

Trik Memasang Meta Tag Pada Blogspot

Dalam menulis postingan yang terlalu Panjang Mungkin kita ingin menyembunyikannya agar beberapa postingan kitapun dapat terlihat,nah ini cara untuk memotong artikel dengan cara membuat readmore

Login ke akun blogspot .
Pada dasbor, klik link Tata Letak, kemudian pilih submenu Edit HTML.
Back up terlebih dahulu template blogspot pembaca agar jika terjadi kerusakan, masih bisa mengembalikan ke kondisi semula. Klik link Download Template Lengkap.
Beri centang pada bagian Expand Template Widget.
Silahkan cari kode seperti dibawah ini pada template pembaca.
<div class='post-body entry-content'>
Perlu diketahui bahwa kode tersebut ada yang sama dan ada yang beda dengan template Anda. cukup memastikan bahwa terdapat struktur class='post-body'.
Copy paste kode berikut pada kode yang Anda temukan pada langkah 5 di atas:
<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>
Selanjutnya cari kembali kode berikut ini:
<data:post.body/>
Copy paste kode berikut di bawah kode yang Anda temukan pada langkah 7 di atas:
<a expr:href='data:post.url'>Read More...</a> </b:if>
(NB: Anda boleh mengganti tulisan "Read More..." yang berwarna merah tersebut dengan tulisan "Baca selengkapnya...", "Lanjutkan...", dsb.
Setelah itu klik tombol SIMPAN TEMPLATE.
Masih pada dasbor blogspot pembaca, bukalah menu Pengaturan, kemudian pilihlah submenu Format. Pada bagian Template Posting yang ada di sebelah paling bawah, copy paste kode berikut:
<div class="fullpost"> </div>
Setelah itu klik tombol SIMPAN SETELAN.
Sekarang cobalah membuat sebuah posting baru. Pada tab Edit HTML pada kotak isian posting, pembaca akan melihat muncul tulisan yang Anda copy paste pada langkah 10 di atas.
Untuk membuat Read More muncul pada postingan, tulis bagian artikel yang hanya ingin ditampilkan pada halaman utama blog di atas kode <div class="fullpost">. Sedangkan tulisan seterusnya ditulis diantara kode <div class="fullpost"> dan </div>.

admin travel 01.18 New Google SEO Bandung, Indonesia

Membuat Tulisan Readmore Pada Postingan

Posted by software,tutorial dan alamat on Selasa, 15 Maret 2011

Menu yang terdapat pada sebuah web selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab seperti yang telah saya katakan pada postingan sebelumnya bahwa kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header

Login ke akun Blogspot pembaca
Klik link menu Tata Letak, kemudian pilih Edit HTML.
Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
Cari kode seperti dibawah ini pada template pembaca:
<b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> </b:widget> </b:section> </div>
Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5
<ul> <li><a href='URL 1'>Home</a></li> <li><a href='URL 1'>About Me</a></li> <li><a href='URL 3'>Tutorial Website</a></li> </ul>
Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.
Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]></b:skin>.
Silahkan copy struktur berikut diatas kode ]]></b:skin>
/*CSS untuk menu horizontal*/ .menuhor ul{ font: bold 13px arial; padding-left: 0; margin-left: 0; height: 20px; } .menuhor ul li{ list-style: none; display: inline; } .menuhor ul li a{ padding: 2px 0.5em; text-decoration: none; float: left; color: black; background-color: #33FFCC; border: 2px solid #33FFCC; } .menuhor ul li a:hover{ background-color: #33CCFF; border-style: outset; }
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:
<div class="menuhor"> <ul> <li><a href='URL 1'>Home</a></li> <li><a href='URL 2'>Tutorial Website</a></li> <li><a href='URL 3'>About Me</a></li> </ul> </div>
Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.
Klik tombol SIMPAN TEMPLATE.

Untuk melihat hasilnya silahkan buka disini. Seperti yang telah saya katakan, bahwa CSS tersebut berfungsi untuk mengatur tampilan menu yang kita buat tadi. Silahkan pembaca menambah atau merubah atribut CSS tersebut untuk memodifikasi tampilannya, misalnya warna tulisan, background, lebar menu, dan lain-lain. Jika pembaca ingin mengerti cara memodifikasi atau membuat CSS tersebut, silahkan klik disini. Saya yakin pembaca akan lebih mengerti bagaimana CSS tersebut bekerja. Dengan adanya menu horizontal tersebut blog pembaca pasti menjadi lebih keren dan ergonomis.
http://tutorial-website.blogspot.com admin travel 01.10 New Google SEO Bandung, Indonesia

software,tutorial dan alamat

Menulis Artikel Yang Seo Friendly

Posted by software,tutorial dan alamat on Kamis, 31 Maret 2011

Optimasi File Gambar Agar Cepat Diload

Memperkecil File Gambar agar mudah di Upload

Posted by software,tutorial dan alamat on Rabu, 30 Maret 2011

Cara Membuat Label Cloud

Langkah2 membuat label cloud di blogspot

Cara Membuat Label Cloud

Posted by software,tutorial dan alamat on Senin, 21 Maret 2011

Cara Membuat Daftar Isi Pada Blog

Posted by software,tutorial dan alamat on Minggu, 20 Maret 2011

Blogroll

Membuat Blogroll

Cara Upload File di Blog Agar dapat di Download

Posted by software,tutorial dan alamat on Kamis, 17 Maret 2011

Membuat Link Untuk Download

Cara Membuat Link Untuk Download

Trick Memasang Meta Tag Pada Blogspot

Trick Memasang Meta Tag SEO Pada Blogspot

Apa Fungsi Meta Tag SEO Pada Blogspot

Apa Kelebihan Meta Tag SEO Pada Blogspot

Kesimpulan Cara Memasang Meta Tag SEO Pada Blogspot

Trik Memasang Meta Tag Pada Blogspot

Membuat Tulisan Readmore Pada Postingan

Posted by software,tutorial dan alamat on Selasa, 15 Maret 2011

Membuat Menu Horisontal di Blog

Popular Posts

Mengenai Saya

Label