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

Prediksi/Estimate SEO Blogspot 2013

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 situs yang tepat dan benar untuk mendapatkan traffik teratas agar seorang pebrowsing (orang yang menuliskan kata kunci dalam mesin pencari) tidak salah mengunjungi situs, mungkin anda juga pernah dalam situasi yang membosankan atau bahkan membuat anda sedikit marah hingga wajah anda menjadi merah karena hasil pencarian mesin browsing tidak seperti yang anda harapkan padahal dilihat dari segi traffik adalah yang teratas, keluhan itulah yang membuat mesin browsing selalu memperbaiki keakuratannya dalam memilih page situs yang tepat dan benar dalam tiap tahunnya.
2013
Tips seo untuk tahun 2013 ini adalah prediksi atau perkiraan saja bahkan setiap artikel yang menjelaskan optimasi seo yang sudah saya tulis semuanya adalah estimate saja karena bila anda bertanya pada penghuni Google dan rival-rivalnya mereka tidak akan mau membuka mulut, meski begitu mereka tetap memberikan signal pada pemilik situs yang benar-benar mempunyai kesungguhan dalam mengelola situs web/blog. Saya adalah seorang blogger pemula dalam mempelajari seo jadi jangan pernah tanya pada saya apa langkah selanjutnya Google dan rival seprofesinya karena anda tidak akan pernah mendapatkan jawaban yang tepat dari saya, bahkan bila anda bertanya pada Dosen Seo saya jamin mereka tidak akan bisa memberi jawaban yang tepat untuk anda akan tetapi bila anda memaksa saya untuk memberikan jawaban yang paling tepat saya akan menyuruh anda untuk menonton Sepakbola Liga Inggris dalam satu musim dan membaca berita satu laga musim yang sudah terlewatkan, karena apa ? akan saya jawab sendiri untuk anda, karena cukup bagi anda untuk bisa menjadi komentator atau penonton yang bisa memprediksi hasil laga yang akan datang meski hasilnya tidak selalu benar tapi itu adalah usaha yang bagus untuk memprediksi hasil laga, sama halnya pertandingan sepakbola tadi adalah bermain dengan mesin browsing untuk mendapatkan traffik/peringkat seo, anda harus tahu apa saja yang terbaik untuk seo ditahun 2012, Apakah itu taktik Link building, jangkar teks, daftar isi, meta tag, deskripsi, pemasangan kata kunci yang tepat, kecepatan loading halaman situs dll, yang pasti kedepan akan ada lagi yang akan datang dari Seo web/blog yang direncanakan Google dan rival-rival abadinya untuk memilih page situs yang terbaik. 

Setelah banyak kata di atas saya akan membagi sedikit tips SEO yang sangat berguna untuk keberhasilan anda dalam mengelola web/blog di tahun-tahun mendatang. 

1.Membuat Variasi pada Anchor Text/Jangkar Text 

Pada Anchor Text/jangkar text yang merupakan bunyi dari sebuah link yang menghubungkan antara satu situs dengan situs yang lain atau text yang menghubungkan antar halaman situs, perlu diperhatikan jika setiap link yang terhubung ke situs anda baik dari dalam maupun luar kesemuanya menggunakan jangkar text dengan bunyi yang sama seperti"Pariwisata terbaik dan terindah dalam negeri"mungkin akan dibaca sebagai link spam terutama jika itu terdapat dalam sebuah kalimat seperti dibawah ini. 

Selamat berlibur panjang di akhir tahun bersama keluarga dengan mengunjungi pariwisata terbaik dan terindah dalam negeri dengan diskon 30%. 

Sangat tidak wajar dan tidak menunjukkan sifat natural apabila itu terjadi berulang-ulang, memang benar anchor text adalah sebuah signal, akan tetapi setiap profile link yang solid/padat dengan sendirinya akan merangkul dan menggunakan teks yang bersangkutan dengan kontek yang juga releven.Contoh diatas merupakan contoh jangkar teks yang tidak natural, jadi anda bisa membedakan dengan variasi jangkar teks dibawah ini.

 Kang roni blog berasal dari indonesia, yaitu negara di Asia Tenggara, yang dilintasi garis khatulistiwa dan berada di antara benua Asia dan Australia

2.Membuat Variasi pada Link 

Link yang menghubungkan antar page blog akan sangat berguna untuk menarik dan mempermudah seorang pengunjung dalam menjelajahi situs blog anda, dan itu akan tercapai apabila anda dapat membuat banyak variasi pada link yang anda sajikan dengan paduan anchor text yang natural, pastinya anda harus rajin menulis artikel agar mempunyai banyak page untuk dihubungkan karena anda pasti bosan bila mengunjungi halaman situs yang mempunyai banyak link building akan tetapi merujuk pada satu halaman, anda mungkin berpikir kalo kang roni menipu anda tapi coba anda renungkan dan tanyakan pada diri anda, Apakah benar atau salah? Jadi anda harus mempunyai rencana yang besar dengan melihat link anda berasal di tahun 2012 dan mencoba mempertimbangkan sesuatu yang baru di tahun-tahun berikutnya. 

3.Variasi Sumber Lalu Lintas 

Mendapatkan sumber lalu lintas adalah tujuan kita dalam taktik perjuangan seo tapi perlu diperhatikan masalah yang serius adalah kita terlalu tergantung pada traffik lalu lintas Google, Apakah anda setuju dengan pendapat kang roni?, jika itu benar maka anda harus siap dilempar dari google karena kita tidak tahu kapan google penguin (nama kode untuk update algoritma google) bekerja, bahkan jika anda sudah mengikuti peraturan saat itu juga lalu lintas situs anda akan langsung turun peringkat. 

Belajar dari prediksi/perkiraan di atas maka anda harus membuat variasi lalu lintas yang seimbang di beberapa mesin pencari,anda harus menaruh pandangan diluar google dan saya juga merasakan bahwa itu sulit tapi jika kita hanya tergantung pada google maka risiko besar yang akan kita hadapi, mungkin langkah awal anda bisa melakukan submit situs dibeberapa direksi. 

4.Membuat Variasi dalam pemasaran 

Berbagai cara dapat anda lakukan untuk pemasaran/mengenalkan situs anda pada masyarakat umum,kalau anda mempunyai kantong tebal itu akan sangat mudah untuk dilakukan tapi kalau sebaliknya anda harus bersiap untuk meluangkan banyak waktu untuk bersosialisasi dengan masyarakat melalui situs jejaring sosial dan berkunjung ke banyak situs dengan memberikan komentar yang bagus atau bertanya dengan topik yang dibicarakan, ingat! komentar spam akan membuat usaha anda sia-sia. 

5.Membuat variasi tampilan pada poin tertentu 

Jika memungkinkan buatlah variasi tampilan pada page atau poin tertentu agar pengunjung selalu melihat suasana yang berbeda seolah dia menjadi turis yang baru pertama kali berkunjung tapi jangan sampai membuat page blog anda menjadi lebih berat dari biasanya karena akan membosankan dan menjengkelkan bila anda dalam situasi yang sama dan dapat di prediksi situs blog anda akan langsung ditinggalkan, itu berarti anda gagal sebagai seorang penulis dengan artikel tanpa pembaca, seperti rumah mewah yang tak berpenghuni. 

6.Prediksi/Estimate SEO Blogspot 2013 adalah tips seo untuk tahun sekarang dan kedepan bila anda bisa menggunakan satu kata "VARIASI" sebagai dasar untuk mencoba sesuatu yang baru.
Read Full Entry