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 (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 . "
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 -->
<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.
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.
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>
-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>
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>
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.
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.
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>
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.
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.
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.
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.
Mengenal Fungsi Bagian-bagian Fitur atau Menu Dasbor pada Blogspot|Post ini kangroni tujukan untuk sobat blogger yang masih anyar sebab kangroni perhatikan beberapa waktu belakangan pengguna internet semakin menggandrungi pembuatan situs yang berbasis blogger/blogspot karena alasan tertentu mungkin dari mulai gratisan,banyak fitur yang dapat digunakan,diberi keleluasaan untuk mengelola/mengatur tampilan,seo,load page ringan dll.Penulisan posting ini kangroni sengaja membuatnya karena banyaknya sobat blogger yang masih belum begitu mengenal dengan bagian-bagian fitur yang ada pada Dasbor Blogspot.
Yang membuat sulit dalam mengelola blogspot untuk blogger anyar adalah dikarenakannya masih sedikitnya tutorial pengelolaan blogspot versi sekarang.
Kenapa sangat sedikit ? ya, karena rata-rata peblogger banyak yang sudah menguasainya jadi tidak terlalu gregetan untuk mempublikasikannya,itulah yang membuat kangroni terlalu lama untuk mempublikasikan post ini akan tetapi kangroni tidak akan menyia-nyiakan kesempatan yang bagus ini untuk membantu sobat blogger semua dalam mengelola akun blogspot agar dapat membantu untuk menambah ilmu pengetahuan dan semangat dalam berkarya,berbagi dan menjalin persahabatan.
Dalam posting ini Kang Roni hanya akan menjelaskan bagian-bagian fitur blogspot yang kangroni anggap sangat penting saja untuk blogger anyar dalam mengelola akun blogger.
Perhatikan Gambar halaman Dasbor dibawah ini yang akan anda jumpai saat pertama kali anda login Blogger.com.
Fungsi fitur blogspot akan kangroni jelaskan menurut angka yang tertera pada gambar di atas.
Pada fitur nomor satu ini anda dapat membuka Profil Blogger dan mengeditnya,mulai dari Privasi, Identitas, Foto Profil, dll.
Pada fitur nomor satu ini anda juga dapat masuk pada setelan akun yang di antaranya mempunyai fungsi untuk merubah bahasa utama dan profil Google+
Pada fitur blogspot nomor satu ini adalah satu-satunya fitur yang digunakan untuk keluar akun blogger.
Fitur nomor dua berfungsi untuk merubah bahasa utama mulai dari Inggris, Indonesia dll.
Fitur nomor tiga berfungsi untuk melihat Home page blogger anda.
Pada fitur nomor empat anda dapat melakukan peninjauan luas atau gambaran ikhtisar yang terdiri dari beberapa bagian penting,di antaranya adalah:
Ikhtisar (untuk melihat gambaran luas seperti penayangan, ringkasan statistik, dan pembaruan).
Pos (untuk melihat dan mengedit artikel yang sudah anda publikasikan).
Komentar (melihat komentar masuk dan yang terpenting adalah dapat melihat komentar spam)
Statistik (untuk mengetahui kemajuan blog atau halaman posting anda bahkan dapat mengetahui negara asal pengunjung, dll)
Tata letak (untuk mempercantik blog dengan menambahkan gadget seperti HTML/JavaScript dll-nya di area yang disukai).
Template (untuk mengedit tema/template blog anda mulai dari menyesuaikan dengan template bawaan bahkan fitur cadangkan/pulihkan yang dapat berfungsi untuk mengupload template dan bisa juga mengedit langsung melalui Edit HTML).
Setelan/Settings (mempunyai banyak fungsi mulai dari edit judul blog, memberikan Deskripsi dll).
Untuk fitur blogspot nomor lima digunakan untuk membuka daftar entri baik yang sudah diterbitkan ataupun belum diterbitkan,selain itu juga berfunsi untuk mengetahui berapa banyak komentar dan penayangan setiap posting yang sudah anda terbitkan.
Untuk fitur nomor enam kangroni kira sobat semua pasti sudah tahu kegunaannya yaitu untuk membuat entri baru.
Untuk Mengenal Fungsi Menu Fitur Blogspot lainnya kangroni kira sobat semua pasti sudah bisa mempelajarinya sendiri dan lebih bagus apabila sobat mempunyai akun blogger kedua yang khusus untuk otak-atik blog.
Dasar-Dasar Mendesain Template Blogger
Membuat blog cantik dan menarik tidak harus selalu download template dan meng-upload lagi tapi bisa anda lakukan dengan cara merubah desain aslinya tanpa harus mengganti template yang baru, karena dengan seringnya mengganti template blogger akan memperlambat SEO blog anda.Mungkin sobat semua bertanya,kenapa bisa begitu? Ya,karena mesin pencari seperti google perlu waktu untuk merespon dan mengenali perubahan pada blog anda lagi seperti halnya anda memodifikasi sebuah mobil atau motor pastinya orang-orang disekitar anda tidak akan langsung mengenali bahwa itu adalah motor anda kalaupun mengenali pasti ada jeda waktu untuk berpikir, selain itu meta tag dan keyword yang telah anda pasang akan hilang dan itu akan memperburuk SEO bahkan sebagian link anchor-pun akan ikut hilang.Untuk mengatasi semua masalah itu dan anda tetap bisa melakukan perubahan pada template dari mulai header, lebar outer, footer bahkan background dll.
Dasar-Dasar Mendesain Template Blogger
1. Kenali Gambar Header dan Kodenya
Perhatikan lingkaran merah pada gambar di atas adalah header atau kepala blog,dan kodenya kurang lebih seperti dibawah ini dalam template anda.Untuk lebih mudahnya dalam mencari kode tekan tombol F3 dan masukkan kode #header-wrapper { dalam kolom pencarian.
#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#3371A3 none no-repeat scroll right top;
height:200px;
margin:0 auto;
width:780px;
}
Ket: Background:untuk merubah warna header,dan bila blog anda menggunakan gambar sebagai header tinggal mengganti link gambarnya saja. Height:untuk merubah tinggi Header. Width:untuk merubah panjang Header.
2. Mengenal Bagian Outer wrapper
Bagian Outer wrapper yaitu meliputi Luas yang dilingkari warna merah seperti pada gambar di atas.
Kodenya kurang lebih seperti dibawah ini dalam template anda.Untuk lebih mudahnya dalam mencari kode tekan tombol F3 dan masukkan kode #outer-wrapper { dalam kolom pencarian.
#outer-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #DDDDDD;
font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:-5px auto 0;
padding-top:25px;
text-align:left;
width:780px;
Untuk pengetahuan dasar anda bisa merubah ukuran border, width, kode warna background atau bahkan font seperti yang anda lihat di atas.Untuk pengetahuan lebih lanjut anda bisa merubah semua ukuran di atas tapi sebelumnya Download template lengkap dulu untuk keamanan bila terjadi kesalahan dalam pengeditan.
Meskipun Tips Dasar-Dasar Mendesain/Modifikasi Template Blogger dari Kang Roni sedikit asalkan sobat kreatif/berani otak-atik pasti akan mendapatkan pengetahuan yang banyak yang mungkin tidak bisa dicari oleh semua orang didalam mesin pencari seperti google.
Membuat Kotak Pencarian/Search Box Blogger Bervariasi
Search box atau kita sebut kotak pencarian adalah gadget yang berfungsi untuk mempermudah seorang pengunjung blog/situs untuk menjelajahi atau mencari artikel yang di inginkan pada situs yang di kunjungi. Sebagai contoh adalah Kolom pencarian/Search Box Google Custom di atas.
Membuat Search Box Blogger Sederhana
Jika anda ingin membuat kotak pencarian simple pada blog anda, anda hanya perlu menaruh kode widget pencarian dibawah ini pada bagian blog yang anda inginkan.
Kode di atas nanti akan terlihat seperti search box dibawah ini
Perlu anda ketahui, bahwa kode yang di beri tanda dengan warna merah di atas adalah wilayah yang bisa anda gunakan untuk menambahkan variasi gaya pada kotak pencarian.Dan Elemen input search-box adalah kotak yang berisi pencarian dimana anda bisa menuliskan frase yang di cari, sedangkan elemen input search-btn adalah tombol kunci untuk mengirimkan permintaan pencarian frase ke server.
Mengganti Warna pada Kotak Pencarian
Setelah anda tahu cara membuat search box sederhana seperti yang sudah saya jelaskan di atas secara rinci dan mudah di pahami, selanjutnya kita akan memberi sentuhan warna yang berbeda agar kotak pencarian terlihat lebih cantik dan menarik pengunjung agar menuliskan sesuatu di dalamnya untuk mencari artikel anda yang lain. Sebagai contoh saya akan merubah warna dalam kotak menjadi hijau dan border berwarna merah.
Untuk membuat search box dengan warna baru seperti di atas, anda hanya perlu menambahkan sedikit kode css setelah elemen search-box seperti dibawah ini yang saya beri warna merah dan biru.
Kode yang berwarna merah dan biru di atas adalah kode css untuk merubah warna kolom dan border, untuk kode yang di sorot dengan warna biru itu adalah kode warna dan ketebalan border yang bisa anda ubah untuk menyesuaikan tampilan blog anda.
Membuat background Gambar pada Kotak pencarian
Seperti yang telah anda lihat, bahwa kolom kotak pencarian bisa di hiasi dengan background gambar, sebenarnya cara ini sudah pernah saya jelaskan pada posting yang terdahulu Membuat Background dan Border pada Halaman Posting hanya saja dalam posting ini saya sedikit membuat hal yang baru yaitu menggabungkan antara cara membuat background dan membuat search box.
Untuk membuat search box dengan background gambar kode yang harus di pakai adalah ini.
Ket: Kode yang disorot dengan warna merah adalah link/Url gambar yang bisa anda ganti dengan link gambar yang di kehendaki.
Mengganti Warna Huruf dalam Kotak
Anda bisa melihat kode dibawah yang disorot dengan warna merah, itu adalah kode untuk membuat huruf yang diketikkan dalam kotak pencarian mempunyai warna sesuai yang kita inginkan.
Untuk lebih jelasnya anda bisa mencoba mengetikkan beberapa kalimat kedalam kolom pencarian dibawah ini.
Membuat Gaya pada Tombol Search Box
Setelah penjelasan cara membuat variasi warna pada kotak/kolom pencarian, selanjutnya saya akan menjelaskan bagaimana cara mengubah gaya pada tombol search box. Tombol search box adalah tombol yang berada disamping kotak pencarian dan biasanya terdapat tulisan Cari/Search yang berfungsi untuk mengirimkan permintaan pencarian kata yang di tulis didalam kotak pencarian kepada server.
Lihat tombol search box dibawah ini.
Untuk membuat tombol seperti di atas kita harus menambahkan sedikit kode css setelah elemen search btn.Lihat kode css yang disorot warna merah dibawah ini itu adalah kunci cara mengubah gaya pada tombol search box.
Ket: Untuk kalimat yang berwarna biru(Search) bisa anda ganti dengan kalimat lain.Seperti contoh search box dibawah ini.
Membuat Teks Terlihat dalam Kotak
Perhatikan kode yang berwarna merah dibawah ini, itu adalah kode untuk membuat teks terlihat dalam kotak pencarian dan anda boleh mengganti teks sesuai keinginan.
Menggunakan gambar sebagai tombol sangatlah mudah karena tehniknya hampir sama dengan cara mengubah background warna dengan background gambar dalam kotak pencarian yang sudah dijelaskan di atas, yaitu kita hanya perlu mengubah jenis input dari "Submit" untuk image dan menentukan URL gambarnya.
Dibawah ini adalah kode input untuk tombol search box sebelum menggunakan gambar sebagai tombol.
Kode yang diberi warna biru di atas adalah wilayah pengaturan gaya untuk kotak pencarian.
Sedangakan kode yang di beri warna merah adalah wilayah pengaturan gaya untuk tombol pencarian.
