Jalan Seo Berkualiatas adalah Kemauan

Ada yang baru di SEO, Apakah anda seorang penjual product? apakah anda seorang yang berkecimpung dibidang pemasaran? apakah anda seorang penulis yang ingin berbagi karya intelektual atau bahkan anda seorang pedagang kaki lima yang ingin merambah dunia maya melalui situs web, blogger/blogspot untuk mempromosikan sesuatu yang anda miliki, Seo dari kangroni menyarankan anda untuk meluangkan beberapa menit untuk memahami tulisan tentang tips Jalan Menuju Seo yang mungkin dapat menambah pengetahuan anda di era yang serba online ini.

Search Engine Optimization
 Search Engine Optimization (SEO) atau Optimasi Mesin Pencari adalah cara meningkatkan, mendongkrak dan mempromosikan situs web untuk meningkatkan jumlah pengunjung situs melalui mesin pencari. Ada banyak cara untuk membuat web/blogger anda menjadi seo seperti link anchor atau link building baik itu link local atau link dari web lain yang mempunyai page rink lebih tinggi bahkan terkadang seo hanyalah masalah bagaimana anda dapat menyusun sebuah web yang dapat dimengerti oleh search engine.

Berbicara masalah seo bukan hanya tentang "mesin". Ini tentang membuat situs anda lebih baik, menarik dan berguna bagi orang orang juga. Saya yakin optimasi mesin dan ketekunan anda untuk membuat situs lebih baik harus berjalan beriringan. Pada kehidupan nyata yang sering kita lihat seperti pedagang banyak dari mereka yang menginginkan berjualan dilokasi yang berdekatan dengan jalan utama atau jalan raya agar lebih banyak dilihat orang seperti itu juga sebuah situs web/blogger anda akan banyak yang melihat apabila anda mau menaruhnya dipinggir jalan raya yaitu dengan cara optimasi seo, itulah yang disebut optimasi atau mengoptimalkan situs pada mesin pencari seperti google, yahoo, bing dan lain-lainnya. Selain itu juga ada aspek lain yang harus anda perhatikan bahwa Search Engine Optimization (SEO) bukan hanya tentang "mesin" saja tapi juga masalah bagaimana anda dapat membuat orang orang tertarik dan merasa butuh pada situs yang anda kelola karena seorang pedagang meski sudah mendapatkan lokasi yang baik dia juga belum tentu mendapatkan pelanggan apabila barang dagangannya tidak mempunyai daya tarik dan tepat guna. Apakah anda merasa kesulitan dan bingung tentang hal ini, jangan khawatir, anda tidak sendirian, dan keseriusan anda akan mengatasinya karena ketekunan, kesungguhan, keseriusan adalah kekuatan yang akan membuat situs web anda melaju untuk mendapatkan seo yang berkualitas.

Mengapa website butuh seo?

Saya akan tanya balik pada anda "apa yang anda buka saat memulai menggunakan komputer yang terhubung dengan internet ?" saya yakin kebanyakan dari kita akan memulai dari mesin pencari seperti google, yahoo, bing dan situs jejaring sosial, dan mesin pencari adalah lalu lintas web yang paling utama dibidang ini meski jejaring sosial juga penting untuk mendapatkan kunjungan kewebsite anda. Mesin pencari merupakan cara atau jalan utama pengguna internet untuk berselancar baik itu pencarian untuk konten, layanan, produk, informasi atau apapun yang ada diwebsite anda.

Search engine adalah jalan untuk mereka yang mempunyai rencana atau target untuk lalu lintas agar orang dapat mencari sesuatu yang anda tawarkan. Search engine adalah jalan raya yang membuat ini terjadi seperti yang sudah saya ulas di atas. jika situs atau website anda tidak dapat ditemukan oleh mesin pencari, itu berarti anda kehilangan kesempatan yang sangat besar yang disediakan oleh mesin pencari seperti google, yahoo, bing dan lain-lainnya.

Untuk membuat website yang bagus dan terencana cobalah anda mengetikkan kata-kata atau sebuah pertanyaan yang kebanyakan orang-orang mencarinya dalam kolom mesin pencarian, ini akan menambah pengalaman anda tentang lalu lintas mesin pencari dan anda akan bisa mentargetkan pengunjung kewebsite yang menyediakan layanan, informasi atau produk yang anda tawarkan.

Mengapa mesin pencari tidak dapat mengenali situs anda tanpa Seo?

Search engine (mesin pencari) memang sangat cerdas, namun mesin pencari juga masih membutuhkan bantuan supaya dapat lebih mengenali dan mempercayai web kita untuk ditampilkan dalam hasil pencarian terlebih lagi untuk 10 teratas hasil pencarian. Dengan banyaknya situs yang menawarkan baik layanan atau produk yang sama akan menjadikan suatu perlombaan untuk mendapatkan posisi teratas dalam hasil pencarian mesin, Maka dari itu search engine butuh seo untuk mengenali dan mengerti situs anda dan memberikan keakuratan hasil pencarian bahwa situs anda layak menempati posisi teratas. Seo yang tepat dan bersih akan memberikan ribuan kunjungan kewebsite anda tapi sebaliknya langkah seo yang salah akan mengubur situs anda dari penglihatan mesin pencari.

Seo tidak hanya akan membuat konten anda terdeteksi oleh mesin pencari, juga membantu konten situs anda mendapatkan peringkat atau hasil pencarian yang lebih baik sehingga orang akan lebih mudah untuk menemukan. apakah anda setuju dengan saya bahwa tingkat kepercayaan seseorang terhadap situs dinilai dari peringkat hasil pencarian.

Saya tidak pernah masuk kuliah, apakah saya bisa melakukan Seo?

Beberapa waktu yang lalu saya membaca berita dari salah satu media bahwa Seorang anak berusia 12 tahun di Donakonda, India. kisahnya berawal saat dia kabur dari rumah karena takut mengikuti ujian sekolah. Dia lalu membeli tiket kereta api jurusan Yeshwatpur-Machalipatman. Keesokan paginya, dia berada di Stasiun Yelahanka. Di situ kemudian dia melihat pedagang yang menjual keripik kentang. Dia lalu membeli beberapa paket keripik kentang dengan semua uangnya yakni 50 rupee. Dia pun mendapatkan keuntungan 30 rupee.

Sangat senang dengan penghasilan pertamanya, Kiran kemudian membeli keripik kentang dari semua uangnya dan menjualnya kembali. Dalam tiga hari dia mampu mendapatkan uang 750 rupee. Setelah mencari tahu bagaimana keripik kentang bisa menghasilkan uang untuknya, dia semakin giat. Penghasilannya tumbuh dua kali lipat. Dia menginvestasikan semua pendapatannya. Tujuan saya dari kisah ini adalah bangku sekolah bukan satu-satunya jalan agar anda menjadi pintar dan sejahtera, saya tidak bertujuan untuk melarang anda bersekolah akan tetapi memberikan motivasi/dorongan untuk saudara kita yang belum mendapatkan kesempatan duduk dibangku sekolah agar tetap percaya diri, asalkan ada kemauan dan sering berlatih pasti bisa.

Seo, anda bisa dengan mudah mempelajari dan memahami dasar-dasarnya karena pendidikan seo adalah gratis dan dapat dengan mudah ditemui dibanyak web, termasuk blog yang anda baca ini. Banyak membaca panduan seo dan praktekkan pada situs atau blogspot anda akan menjadikan anda seorang master seo baru.

Tergantung pada niat anda, kemauan untuk belajar dan menerapkan seo di situs anda sebagai strategi website. Kalau anda bersungguh-sungguh ingin membuat website yang berkualitas bagi mesin pencari dan belum terbiasa dengan seo saya sarankan untuk tidak segera melupakan kangroniblog sebagai salah satu panduan seo untuk anda.

Banyak pakar seo dunia yang terinspirasi dari kutipan terkenal Mr William Strunk ini :

" Sebuah kalimat harus berisi kata-kata yang tidak perlu , paragraf ada kalimat yang tidak perlu , untuk alasan yang sama bahwa gambar harus ada garis yang tidak perlu dan mesin tidak ada bagian yang tidak perlu . "
Read Full Entry

Membuat Menu Mega Drop Down Horizontal

Cara membuat mega drop down menu blogspot horizontal
Apa itu menu mega drop down? menu yang bisa menampung link dengan jumlah yang sangat besar yang terbagi dalam beberapa kolom,menu mega drop down ini tidak hanya unggul dalam quota link akan tetapi menu super power ini juga power speed (load page cepat dan ringan) karena menggunakan kode css dengan kombinasi kode html,menu mega drop down tidak diragukan lagi untuk dapat mempercantik blog dengan kapasitas posting yang sangat banyak dan sangat tepat untuk seorang blogger profesional yang mempunyai disiplin dan kemauan besar untuk membuat blog dengan sempurna.

Mega Drop Down Browser Support

Menu mega drop down horizontal sudah teruji dibeberapa peramban diantaranya yaitu Opera, Safari, Mozilla, Google Chrome, dan internet explore jadi anda tidak perlu khawatir untuk melengkapi blog anda dengan menu mega drop down horizontal bila anda berminat untuk mempercantik blog.

Bagaimana cara Membuat Menu Mega Drop Down?

Untuk membuat menu mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi seorang blogger profesional untuk dapat membuatnya, karena pada dasarnya anda hanya perlu melakukan copy code, paste code, mengganti link tujuan, save dan selesai mudah bukan.Dibawah ini nanti akan saya jelaskan dengan sangat detail untuk membuat menu mega drop down dengan bagian bagian kode yang ada pada menu mega drop down. Sebelum anda melanjutkan anda bisa melihat DEMONYA

Cara Membuat Menu Mega Drop Down Horizontal

1.Copy kode mega drop down dibawah ini, untuk lebih mudahnya anda klik icon view source pada syntax highlighter dibawah ini untuk mengambil kodenya (kode menu mega drop down).

<div id="menu">
<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p>Selamat datang di kangroni blog ! Ini adalah karya yang mengagumkan dari Mega Drop Down Menu.</p>             
<p>Menu ini dilengkapi dengan berbagai macam gaya yang mengagumkan dan disiapkan untuk judul, daftar dll.</p>             
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Mega drop down ini telah teruji dibeberapa peramban utama.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<div class="col_5">
<h2>Ini adalah contoh dari sebuah wadah besar dengan 5 kolom</h2>
</div>
<div class="col_1">
<p class="black_box">Ini adalah kotak teks warna abu abu gelap. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p>Kang roni blog Tutorial blog optimasi seo blogspot. Kunjungi dan dapatkan tutorial lengkap.</p>
</div>
<div class="col_1">
<p class="italic">Ini adalah contoh dari suatu teks miring. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p>Kangroni blog:Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p class="strong">Ini adalah contoh dari teks tebal. Menu mega drop down yang bisa menampung link dengan jumlah yang sangat besar.</p>
</div>
<div class="col_5">
<h2>Berikut adalah konten dengan gambar sisi</h2>
</div>
<div class="col_3">
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Kang roni blog Tutorial blog optimasi seo. Kunjungi dan dapatkan tutorial lengkap Membuat dan Mengganti Thema Syntax Highlighter Blog Syntax highlighter atau perintah untuk membuat penyorotan stabilo dengan.<a href="#">Read more...</a></p>
<img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Cara Mudah Menambah dan Membuat Cantik Footer Footer blog adalah bagian paling bawah pada halaman blog yang mempunyai baerbagai fungsi diantaranya adalah sebagai tempat untuk menambahkan gadget yang.<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">Ini adalah kotak hitam, Anda dapat menggunakannya untuk menyoroti beberapa konten. Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan Kang Roni jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo? Alasan kang roni memberi nama CSS Seo karena menu Horizontal.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Ini adalah judul judul Post</h2>
</div>
<div class="col_1">
<h3>Beberapa Links</h3>
<ul>
<li><a href="#">Kang roni blog</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Optimasi</a></li>
<li><a href="#">Seo Blog</a></li>
<li><a href="#">Blogger Seo</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Tautan lainnya</h3>
<ul>
<li><a href="#">Kang roni</a></li>
<li><a href="#">Membuat</a></li>
<li><a href="#">Cara buat</a></li>
<li><a href="#">Menu blog</a></li>
<li><a href="#">Drop down</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Tautan lainnya</h3>
<ul>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Optimasi</a></li>
<li><a href="#">Blogspot</a></li>
<li><a href="#">Seo</a></li>
<li><a href="#">Profesional</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Tautan</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li class="menu_right"><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Daftar di box</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>   
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>   
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
<div class="col_3">
<h2>Berikut adalah beberapa contoh gambar</h2>
</div>
<div class="col_3">
<img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Kangroni blog :Prediksi/Estimate/prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page.<a href="#">Read more...</a></p>
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page. <a href="#">Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>

<style type="text/css">
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color and gradients */

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders */

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}


</style>
<a href="http://roningasinanblog.blogspot.com/" title="OPTIMASI SEO" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

2.Selanjutnya buka akun blogger anda kemudian masuk pada Tata Letak -> Klik Tambah Gadget -> Kemudian klik/pilih HTMLJavascript untuk memasukkan kode mega drop down.
3.Simpan dan selesai.

Untuk mengenal kode kode di atas saya akan menjelaskan Bagian bagian Kode Mega Drop Down Horizontal.

1.Kode Menu Mega Drop Down pada Bagian Home.

<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p>Selamat datang di kangroni blog ! Ini adalah karya yang mengagumkan dari Mega Drop Down Menu.</p>             
<p>Menu ini dilengkapi dengan berbagai macam gaya yang mengagumkan dan disiapkan untuk judul, daftar dll.</p>             
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Mega drop down ini telah teruji dibeberapa peramban utama.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->

2.Kode Menu Mega Drop Down pada Bagian 5 Columns

<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<div class="col_5">
<h2>Ini adalah contoh dari sebuah wadah besar dengan 5 kolom</h2>
</div>
<div class="col_1">
<p class="black_box">Ini adalah kotak teks warna abu abu gelap. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p>Kang roni blog Tutorial blog optimasi seo blogspot. Kunjungi dan dapatkan tutorial lengkap.</p>
</div>
<div class="col_1">
<p class="italic">Ini adalah contoh dari suatu teks miring. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p>Kangroni blog:Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
</div>
<div class="col_1">
<p class="strong">Ini adalah contoh dari teks tebal. Menu mega drop down yang bisa menampung link dengan jumlah yang sangat besar.</p>
</div>
<div class="col_5">
<h2>Berikut adalah konten dengan gambar sisi</h2>
</div>
<div class="col_3">
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Kang roni blog Tutorial blog optimasi seo. Kunjungi dan dapatkan tutorial lengkap Membuat dan Mengganti Thema Syntax Highlighter Blog Syntax highlighter atau perintah untuk membuat penyorotan stabilo dengan.<a href="#">Read more...</a></p>
<img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Cara Mudah Menambah dan Membuat Cantik Footer Footer blog adalah bagian paling bawah pada halaman blog yang mempunyai baerbagai fungsi diantaranya adalah sebagai tempat untuk menambahkan gadget yang.<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">Ini adalah kotak hitam, Anda dapat menggunakannya untuk menyoroti beberapa konten. Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan Kang Roni jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo? Alasan kang roni memberi nama CSS Seo karena menu Horizontal.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->

3.Kode Menu Mega Drop Down pada Bagian 4 Columns

<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Ini adalah judul judul Post</h2>
</div>
<div class="col_1">
<h3>Beberapa Links</h3>
<ul>
<li><a href="#">Kang roni blog</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Optimasi</a></li>
<li><a href="#">Seo Blog</a></li>
<li><a href="#">Blogger Seo</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Tautan lainnya</h3>
<ul>
<li><a href="#">Kang roni</a></li>
<li><a href="#">Membuat</a></li>
<li><a href="#">Cara buat</a></li>
<li><a href="#">Menu blog</a></li>
<li><a href="#">Drop down</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Tautan lainnya</h3>
<ul>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Optimasi</a></li>
<li><a href="#">Blogspot</a></li>
<li><a href="#">Seo</a></li>
<li><a href="#">Profesional</a></li>
</ul>   
</div>
<div class="col_1">
<h3>Tautan</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->

4.Kode Menu Mega Drop Down pada Bagian 1 Columns

<li class="menu_right"><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
</div>
</li>

5.Kode Menu Mega Drop Down pada Bagian 3 Columns

<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Daftar di box</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>   
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>   
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>   
</div>
<div class="col_3">
<h2>Berikut adalah beberapa contoh gambar</h2>
</div>
<div class="col_3">
<img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Kangroni blog :Prediksi/Estimate/prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page.<a href="#">Read more...</a></p>
<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page. <a href="#">Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>

6.Selanjutnya yaitu kode CSS yang bisa anda ubah untuk menyesuaikan tampilan antara menu mega drop down dengan tampilan blog,kode cssnya bisa anda lihat di atas dari mulai kode pada baris 171 sampai 458.
Read Full Entry

Membuat dan Mengganti Thema Syntax Highlighter

Membuat dan Mengganti Thema Syntax Highlighter Blog

Syntax highlighter atau perintah untuk membuat penyorotan stabilo dengan berbagai macam jenis thema pada area tertentu dalam halaman blog yang biasanya digunakan untuk menyorot sebuah kode seperti HTML,CSS,artikel dll.Selain membuat blog cantik dan memperlihatkan kapasitas profesionalisme seorang blogger,Syntax Highlighter juga dapat memudahkan seseorang untuk mengambil/menggunakan (copas) kode atau post artikel yang ada pada page blog anda karena Syntax Highlighter ini dilengkapi dengan fungsi View Source,Copy to Clipboard dan Print.
Syntax Highlighter
8(Delapan) macam thema Syntax Highlighter yang bisa diterapkan dalam blog anda antara lain:
1.Theme Default, kodenya ( shThemeDefault )
2.Theme RDark, kodenya ( shThemeRDark )
3.Theme Midnight, kodenya ( shThemeMidnight )
4.Theme MDUltra, kodenya ( shThemeMDUltra )
5.Theme FadeToGrey, kodenya ( shThemeFadeToGrey )
6.Theme Emacs, kodenya ( shThemeEmacs )
7.Theme Eclipse, kodenya ( shThemeEclipse )
8.Theme Django, kodenya ( shThemeDjango )

Tutorial untuk menginstall/memasang Syntax Highlighter disini akan saya jabarkan dari mulai membuat Syntax Highlighter sederhana sampai dengan Syntax Highlighter berbeda thema disetiap halaman.

1.Membuat Syntax Highlighter Versi Simple/Sederhana


Syntax Highlighter Versi Simple adalah Syntax Highlighter yang hanya mempunyai satu thema dalam sebuah blog meskipun themanya bisa diganti akan tetapi hasil themanya akan selalu sama disetiap halaman blog.Misalnya anda menerapkan Syntax Highlighter dengan thema Django hasilnya nanti disetiap halaman akan sama yaitu Syntax Highlighter thema Django.Langkah-langkah Membuat Syntax Highlighter Versi Simple/Sederhana dibawah ini:

1.Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </head>

<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>
<style type='text/css'>
.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['font-size'] = '50%';
</script>

Ket:
-Untuk mengganti thema anda hanya perlu mencari kode shThemeDefault pada baris nomor 02 di atas dan menggantinya dengan salah satu dari 8(delapan) macam kode thema Syntax Highlighter di atas.
-Untuk merubah ukuran font anda hanya perlu merubah angka 76% yang terletak pada baris ke 19 kode Syntax Highlighter di atas.

2.Selanjutnya Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </body>

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

3.Kemudian Save/Simpan Template.

4.Langkah selanjutnya masuk pada halaman posting dan pastikan pada mode HTML,kemudian masukkan kode dibawah ini kedalam postingan anda.

<pre class="brush: xml;highlight: [2,4];">
Taruh kode/artikel anda disini
</pre>

5.Langkah terakhir simpan dan Publikasikan untuk melihat tampilan Syntax Highlighter pada postingan anda.

2.Membuat Syntax Highlighter Versi Mutasi/Perubahan


Syntax Highlighter Versi Mutasi adalah Syntax Highlighter yang mempunyai kemampuan untuk menerapkan thema yang berbeda disetiap halaman blog apabila anda menghendakinya.Langkah-langkah Membuat Syntax Highlighter Versi Mutasi/Perubahan dibawah ini:

1.Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </head>
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>
<style type='text/css'>
.syntaxhighlighter .line {
font-size: 76% !important;
}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['font-size'] = '50%';
</script>

2.Selanjutnya Copy code Syntax Highlighter dibawah ini dan paste diatas atau sebelum code </body>
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

3.Kemudian Save/Simpan Template.

4.Langkah selanjutnya masuk pada halaman posting dan pastikan pada mode HTML,kemudian masukkan kode dibawah ini kedalam postingan anda.
<pre class="brush: xml;highlight: [2,4];">
Taruh kode/artikel anda disini
</pre>
Ket:
-Bila anda ingin menaruh kode agar di tampilkan dalam postingan juga sebagai kode seperti yang saya lakukan terhadap anda untuk berbagi kode dan bukan sebagai widget anda harus memparse kode terlebih dahulu,klik disini untuk Parse HTML online.

5.Selanjutnya masukkan kode thema syntax highlighter dibawah ini kedalam postingan anda,dan anda bisa menaruhnya dibagian paling bawah atau tepat di atas kode pada langkah ke-empat.
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Ket:
-Untuk mengganti thema anda hanya perlu mengganti kode shThemeDefault dengan salah satu dari Delapan kode thema syntax highlighter.

Sebagai tambahan bila anda tidak mau menampilkan View source,Copy to clipboard and print,anda bisa menggunakan kode syntax highlighter dibawah ini.
<pre class="brush: xml; toolbar: false;">
Taruh kode/artikel anda disini
</pre>
Hasilnya nanti akan seperti syntax highlighter dibawah ini
Syntax Highlighter ini tidak menampilkan View source,Copy to clipboard and print
Read Full Entry

Menambah dan Membuat Cantik Footer

Cara Mudah Menambah dan Membuat Cantik Footer

Footer blog adalah bagian paling bawah pada halaman blog yang mempunyai baerbagai fungsi diantaranya adalah sebagai tempat untuk menambahkan gadget yang dianggap penting selain itu menambahkan footer juga dapat membuat blog semakin cantik dan rapi karena warna footer bisa di sesuaikan dengan warna header (bagian paling atas pada blog) maka dari itu sangat penting untuk seorang blogger anyar untuk tahu bagaimana cara menambahkan footer pada blog.

TUTORIAL BLOG DAN OPTIMASI SEO

Sebagian besar template blog memang sudah dilengkapi dengan footer akan tetapi masih banyak juga template blog yang bagus tapi belum dilengkapi dengan footer,maka dari itu untuk anda yang terlanjur cinta sama template yang sudah anda punya tapi belum dilengkapi dengan bagian footer,anda bisa membuat solusi sendiri dengan Cara Mudah Menambah dan Membuat Cantik Footer karena selain menambah footer anda juga bisa mengedit sendiri untuk menyesuaikan agar tampilan blog menjadi cantik.

Cara Menambahkan Footer pada Blog

1.Buka template blog dan cari kode ]]></b:skin>
2.Taruh kode css dibawah ini tepat di atas kode ]]></b:skin>

#footer-column-divide {
    clear:both;background: #3B5998;color:#ffcc66;
    }
    .footer-column {
    padding: 10px;
    }

3.Kemudian cari kode <div id='footer'> letaknya pada bagian bawah template blog bila tidak ada cari saja yang mirip atau semacamnya.

4.Setelah ketemu taruh kode dibawah ini tepat di atasnya (kode pada langkah ke-tiga).

<div id='footer-column-divide'>

    <div id='footer1' style='width: 33%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='kol1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 33%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='kol2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 33%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='kol3'
    preferred='yes' style='float:right;'/>
    </div>

    <div style='clear:both;'/>
    </div>

5.Save Template.

Ket:Untuk kode  #3B5998; dan  #ffcc66;  anda bisa menggantinya dengan kode yang lain untuk menyesuaikan warna footer pada halaman blog.
Read Full Entry

Membuat Menu CSS Seo Horizontal Drop down di Blog

Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog
Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan Kang Roni jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo?

Alasan kang roni memberi nama CSS Seo karena menu Horizontal Drop down ini sangat ringan dan salah satu tehnik Optimasi seo blog adalah membuat blog seringan mungkin,selain ringan juga sangat simpel dan mudah akan tetapi sangat bagus untuk mempercantik blog karena anda bisa merubah warna Menu CSS Seo Horizontal Drop down sesuai dengan blog yang anda punya .

Tehnik Membuat Menu CSS Seo Horizontal Drop down

1.LOG IN Blogger.com > Masuk ke Template > Klik Edit HTML.
2.Cari kode ]]></b:skin> kemudian taruh kode css dibawah ini tepat di atas kode ]]></b:skin> tadi.

/*Page menu*/
#foxmenucontainer{
    height:35px;
    display:block;
    padding:40px 0 0px 0px;
    font: 11px Tahoma,Century gothic,verdana, Arial, sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    overflow:hidden;
    width:530px;
    margin:0px 0px 0px 0px;
    float:right;
    }
#menu{
    margin: 0px;
    padding: 0px 10px;
    width:680px;
    height:35px;
    }
  
#menu ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#menu li {
    float:left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#menu li a, #menu li a:link, #menu li a:visited {
    color: #578cbf;
    display: block;
    margin: 0px;
    padding: 12px 10px 11px 10px;
    }

#menu li a:hover, #menu li a:active, #menu li.current_page_item a{
    color: #fff;
    margin: 0px;
    padding: 12px 10px 11px 10px;
    text-decoration: none;
    }

/* Category menu*/
#catmenucontainer{
    height:32px;
    background:#3017170;
    display:block;
    padding:0px 0 0px 0px;
    font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    overflow:hidden;
    border-left:1px solid #6cb80c;
    border-right:1px solid #6cb80c;
}
      
#catmenu{
    margin: 0px;
    padding: 0px 1px;
    width:998px;
    background:#0055EA;
    height:32px;
    }
  
#catmenu ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#catmenu li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
  
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
    color: #bfe195;
    display: block;
    margin: 0px;
    padding: 10px 10px 10px 10px;
    }

#catmenu li a:hover, #catmenu li a:active {
    background:#D90808;
    color: #fff;
    margin: 0px;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    }
  
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
    background:#567DB0 ;
    width: 150px;
    color: #bfe195;
    font-family:Tahoma,century gothic,Georgia,  sans-serif;
    font-weight: normal;
    float: none;
    margin: 0px;
    padding: 9px 10px 9px 10px;
    border-bottom: 1px solid #5E9F09;
    }
  
#catmenu li li a:hover, #catmenu li li a:active {
    background:#FC8C3D;
    color: #fff;
    padding: 9px 10px 9px 10px;
    }

#catmenu li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px;
    }

#catmenu li li {
    }

#catmenu li ul a {
    width: 140px;
    }

#catmenu li ul a:hover, #catmenu li ul a:active {
    }

#catmenu li ul ul {
    margin: -31px 0 0 170px;
    }

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
    left: -999em;
    }

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
    left: auto;
    }

#catmenu li:hover, #catmenu li.sfhover {
    position: static;
    }
Ket: 
-Untuk mencari kode supaya lebih cepat silahkan anda klik didalam kolom edit template kemudian tekan tombol keyboard Ctrl+F kemudian taruh kode yang akan dicari kedalam kolom pencarian yang ada di pojok kanan atas kolom template dan enter.
-Untuk kode yang diberi background dengan warna yang berbeda di atas adalah kode warna yang bisa anda ubah.

3.Selanjutnya cari kode  <div id='content-wrapper'>  kemudian taruh kode dibawah ini tepat di atas kode tadi.

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>

<li><a href='#'>Featured</a></li>

<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>

<li><a href='#'>Uncategorized</a></li>
      
</ul>
</div>
</div>
Ket:
-Untuk tanda # (pagar) silahkan ganti dengan link halaman tujuan anda.
-Untuk kalimat yang ditulis dengan warna merah silahkan diganti dengan kalimat yang sesuai tema blog anda.
-Selanjutnya simpan untuk melihat Menu CSS Seo Horizontal Drop down di Blog anda.
Read Full Entry