Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...

seo Membuat menu blog menggunakan CSS 2013

Seo Master present to you: Dulu sebelum ada yang namanya kode CSS, menu navigasi dibuat dengan menggunakan table dengan kode HTML. Baik itu secara horizontal menu atau vertikal menu. Bahkan, untuk membuat sebuah layout website pun masih pake table. Nah...kalo sekarang udah ga zaman bikin menu navigasi dengan table udah ada cara lain yaitu dengan menggunakan kode CSS. Berikut cara-caranya dan mudah2an dapat dipahami.........

Membuat menu blog menggunakan CSS

Sebelum dimulai, perlu diketahui bahwa untuk menempatkan kode CSS di blog yaitu harus diantara tag <head> dan </head>. Atau untuk lebih gampangnya, simpan aja diatas kode

]]></b:skin>
</head>

Ok....langsung aja ke cara membuat kode CSS untuk menu navigasi.
Pertama anda harus buat dulu kode css untuk tag pengaturan menu navigasi. Lihat kode dibawah ini :

#menu
{
margin-bottom: 10px;
height: 29px;
background: transparent ;
padding: 0px 0;
}

Setelah itu, buat kode CSS untuk merubah format default untuk tag ul dan li

#menu ul
{
margin: 0;
padding: 7px;
height: 29px;
text-align: center;
}
#menu ul li
{
list-style: none;
display: inline;
}

Maksud dari kode CSS diatas adalah untuk merubah format tag ul dari vertikal ke horizontal serta mengatur margin dan padding tiap menu navigasi. Selanjutnya, buatlah kode CSS untuk membuat variasi link dari menu navigasi. kodenya :

#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: white;
margin-bottom:4px;
padding: 13px 7px 13px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: yes;
background: url(http://i283.photobucket.com/albums/kk315/
meezanx_2008/menu.gif) repeat-x;
background-position:center;
}

#menu ul li a:hover
{
color: white;
}

Nah.....kode2 diatas itu semua adalah Tutorial mebuat kode CSS menu navigasi. Untuk lebih jelasnya dan cara menyimpan kode tersbut di template blog anda ikuti langkah2 berikut :

* Login ke Blogger lalu pilih layout kemudian edit HTML
* Sebagai kemanan silahkan download dulu template anda
* Ingat....Jangan kasih tanda checklist pada kotak Expand Template Widget.
* Cari kode berikut :

]]></b:skin>
</head>

* Kalo sudah ketemu. silahkan copy paste kode berikut di atas kode HTML tadi

#menu
{
margin-bottom: 10px;
height: 29px;
background: transparent ;
padding: 0px 0;
}
#menu ul
{
margin: 0;
padding: 7px;
height: 29px;
text-align: center;
}
#menu ul li
{
list-style: none;
display: inline;
}
#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: white;
margin-bottom:4px;
padding: 13px 7px 13px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: yes;
background:
url(http://i283.photobucket.com/albums/kk315/meezanx_2008/menu.gif)
repeat-x;
background-position:center;
}

#menu ul li a:hover
{
color: white;
}
* Setelah selesai copy paste nya, cari kode berikut :

<div id='content-wrapper''>

* Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi

<!-- MULAI MENU -->
<div id='menu'>
<div style='display:none;'>
<img alt='preload' src='menuon.png'/>
</div>
<ul>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
</ul>
</div>
<!-- AKHIR MENU -->
Catatan Penting :

1. Ganti URL ANDA dengan link yang anda maksud dan Text Anda dengan nama dari masing - masing link. Lihat Cara Membuat Link.
2. Jika anda mengerti kode CSS, anda bisa ganti kode CSS-nya, sesuai dengan kebutuhan anda.

Kalo sudah selesai, save template.

Good Luck.....
SEO Tutorial Blogger
2013, By: Seo Master

seo Percepat loading page dengan CSS Compressor 2013

Seo Master present to you: Teknik kompresi pada CSS paling tidak mampu meningkatkan performa loading page blog anda. Disini bukan dalam artian super cepat ya, tapi cenderung ke arah optimalisasi CSS. Jika kita bicara masalah kecepatan loading page, CSS Compress ini cuma salah satu bumbu penyedap saja, tidak ada cara sebagus apapun selain optimalisasi pada size image (jangan dibandingkan dengan kecepatan koneksi internet dulu ya...kita anggap saja koneksi yang kita gunakan sama).

http://www.cssdrive.com/index.php/main/csscompressor/ merupakan salah satu layanan gratis yang biasa SEO gunakan untuk keperluan ini. Yang menarik, tools ini menyediakan 3 level mode kompresi berbeda yaitu Light, nomal dan Compact. Cara kerja metode ini berusaha memperkecil ukuran dengan menghilangkan spasi dan komentar yang tidak diperlukan. saya sarankan untuk yang baru utak atik CSS jangan langung mencoba mode Super Compact dan Strip All Comments..sebaiknya gunakan mode Light dan don't strip any comments terlebih dahulu. Untuk yang sudah mengerti bisa mencoba level kompresi selanjutnya pada pilihan http://www.cssdrive.com/index.php/main/csscompressoradvanced/


Selain fungsi Compress tentu kita juga mengenal mode Uncompress. Biasanya uncompress digunakan sebagai kebalikannya. Sayang CSS Drive tidak memiliki fungsi ini, jadi SEO sarankan kita bisa mencoba pada layanan ini http://mabblog.com/cssoptimizer/uncompress.html

Cara Kompresi CSS pada Blogger:

(sebelumnya jangan lupa backup semua kode pada halaman Edit HTML)

Pada halaman Edit HTML, Code CSS biasanya terletak diatara kode <b:skin><![CDATA[ dan ]]></b:skin> silahkan copy-paste semua kodenya kemudian lakukan kompress pada tools diatas, jika sudah..copy-paste lagi kode yang sudah di compress ke halaman Edit Html pada posisi semula. Selamat mencoba.
SEO Tutorial Blogger
2013, By: Seo Master
Powered by Blogger.
Design by Dev Nasser