Mafia Seo

Cara Membuat SEO Blog Menjadi 100 % di Chkme.com

in SEO - on 18.23 - 5 comments

Chkme.com adalah salah satu situs untuk mengecek kualitas SEO blog kita.Sebelumnya saya telah mempostingnya di "Cara Cek Kualitas SEO". Saat mengecek kualitas blog Anda, akan muncul score SEO blog anda pada. Contoh pada blog saya yang mempunyai score 100% bukti, klik Disini. Pasti anda ingin juga agar SEO blog anda 100%.
Nah, itulah topik kita pada malam hari ini yaitu mengenai Cara Membuat SEO Blog Anda 100% di Chkme.com 2014.

Memasang Meta Tag SEO Friendly
Langkah-langkahnya silahkan lihat DISINI
Mengoptimalkan Tag H1
Cari kode dibawah ini
<div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/>
          </a>
Ubah kode yang dibawahnya menjadi
<div id='header-inner'>
        <h1><a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/>
          </a></h1>
Membuat setiap gambar dipostingan menjadi SEO
caranya yaitu :

- Setelah anda mengupload gambar/ insert image disebuah postingan
- Klik gambar yang sudah diupload tersebut
- Klik Proporties maka akan muncul gambar seperti ini :

- Isi dengan title text dan alt text dengan judul postingan anda, dan klik OK
- Lakukan disetiap postingan yang belum ada title dan alt text di blog Anda
Memasang Permalink yang SEO Friendly
Seperti pada blog saya, saya memasang sebuah permalink yang SEO Friendly
langkahnya adalah sebagai berikut :
- Masuk ke blogger anda
- Klik dashboard dan klik edit template
- Klik edit html, dan cari kode <data:post.body/> dengan menggunakan CTRL+F
- Letakkan kode dibawah ini tepat dibawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='line-height:1.4em;padding: 1px; margin: 2px;background-color: #ffffff;font-size: 11px;text-align: justify'>
<span>Terima kasih telah membaca Artikel <strong><u><a expr:href='data:post.url'><data:blog.pageName/></a></u></strong> . Jika Anda ingin Copy Paste Artikel ini, Harap cantumkan Link <strong><u><a expr:href='data:post.url'><data:blog.pageName/></a></u></strong> sebagai sumbernya.</span><br/>
<textarea cols='60' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'><a href="<data:post.url/>"><data:post.title/></a></textarea>
</div>
</b:if>
Selain itu anda, juga harus menghapus gambar Obeng yang menyebabkan error html 5
pada blog anda, dengan cara menghapus kode berikut :
<b:include name='quickedit'/>
Jangan menggunakan Iframe di blog anda, karena akan menurunkan kualitas SEO kita.
Terakhir yaitu dengan membuat BreadCrumbs di Blog, mungkin saya belum bisa membuat artikel mengenai Breadcrumbs. Agan sekarang tidak perlu lagi mencari digoogle karena blog saya sudah memposting mengenai Breadcumbs DISINI hehe

Dengan menggunakan langkah-langkah diatas Insyaallah SEO blog anda 100% di Chkme.com
Sayalah bukti dari langkah-langkah diatas, Semoga Bermanfaat :)

Membuat Floating Menu / Fixed Menu di Blog

in blog - on 17.53 - 5 comments

Membuat Floating Menu / Fixed Menu di Blog - Floating Menu (Menu Melayang) atau sering juga disebut dengan "Fixed Menu" yang intinya adalah menu yang selalu berada di atas, walaupun blog di scroll sampai bawah.

Cara membuat floating menu / fixed menu ini sudah direquest oleh beberapa sahabat, namun baru saat ini saya buat tutorialnya. Untuk lebih jelasnya,sahabat bisa lihat menu paling atas di blog ini, atau lihat screenshoot dibawah ini :

Konsep CSS dasar dari Floating Menu ini sebenarnya sangat simpel, sebagai contoh :

#floating_menu{
width:100%;
position:fixed;
top:0;
}

tinggal dimasukan tambahan-tambahan lain yang diperlukan, seperti background, height, z-index, a, color, dll.

Saat ini saya coba share 2 warna floating menu yaitu Biru ala Kaskus, seperti blog ini, dan Minimalis (berwarna hitam)

Floating Menu Blue Style

Demo

Simpan kode ini di atas ]]></b:skin>

/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head>

<!-- Floating Menu-->
<div id='ki_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRcGkpWWh0Uomx7XUcD9_eSuGGrldtBqrfr7zgomYMms-3zIEaDiwjZ31AChWCMm_4aVdinr0FZtm_ffwFNMGiMcEEmLyBk34yampqF5y6X6SdsQgFzR-NmogvjbgzPTXPUyvRTjJw2o/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

Edit Menu 1- 5 dan Home tidak usah di edit.

Floating Menu Minimalist Style

Demo

Simpan kode ini di atas ]]></b:skin>

/* Floating Menu Minimalis*/
#ki_floating_menu_black{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#ki_floating_menu_black ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu_black ul li{float:left}
#ki_floating_menu_black ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#ki_floating_menu_black ul li a:hover{background-color:#666;color:white;}

Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head>

<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUeLEMnIjaAGQoJsK4d7O55ORLFH9n3bEbUCg0xM61letrrfKruCpr2DVc8Z7lqnfLVJv-HLvSsOitVP515ybZAsRJccq2GG2HNFYJwPgB4oCsfevK2jVBTBXeWaJlhyphenhyphenpGnR82PFIwS7c/s1600/home2.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

Semoga bermanfaat

Sumber : blog.kangismet.net

Membuat Pesan di atas Form Komentar

in blog - on 17.49 - 3 comments

Membuat Pesan di atas Form Komentar - Ada beberapa pertanyaan dari sahabat, tentang bagaimana cara membuat atau memodifikasi kotak pesan di atas form komentar. Hal ini mungkin sudah sering terlihat pada blog-blog yang menyajikan tutorial blogger.

Isi dari pesan itu beragam, diantaranya Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>, atau pun lainnya. Hasilnya akan tampak seperti gambar di bawah ini :

Untuk membuatnya, silahkan masuk ke Edit HTML pada template sobat. Sebelumnya silahkan backup dulu, untuk mengantisipasi kesalahan.

Langkah 1 : Cari kode <p><data:blogCommentMessage/></p> biasanya ada 4, cari yang ke 2 dan ke 4. Kurang lebih kodenya seperti ini :

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

tambahkan pada kode diatas :

<div id='threaded-comment-form'>
...kode di atas...
</div>

hasilnya kurang lebih seperti ini :

<div id='threaded-comment-form'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

Lakukan langkah di atas, pada kode ke 2 dan ke 4. Kode ke-2 untuk memunculkan sebelum ada komentar, sedangkan kode ke 4 muncul setelah ada komentar pada postingan.

Langkah 2 : Cari kode :

document.getElementById(domId).insertBefore(replybox, null);

ganti dengan kode

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Langkah 3 : Untuk mempercantik tampilan, tambahkan CSS di atas ]]></b:skin>

/*-- Modifikasi Pesan Komentar--*/
#threaded-comment-form p {
    position: relative;
    background: #4085b8;
    border: 3px solid #5899c9;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 11px;border-radius:2px;
    }
#threaded-comment-form p::after, #threaded-comment-form p::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#threaded-comment-form p::before {
    border-top-color: #5899c9;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #4085b8;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }

Simpan Template.

Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan -> Pos dan Komentar, klikTambahkan.

Tulis pesan sobat pada kolom isian, kemudian klik Simpan Pesan di pojok kanan atas dasboard.

Semoga bermanfaat.

Sumber : blog.kangismet.net

Berbagi segala hal tentang seo blogger

Cara Membuat SEO Blog Menjadi 100 % di Chkme.com

Membuat Floating Menu / Fixed Menu di Blog

Floating Menu Blue Style

Floating Menu Minimalist Style

Membuat Pesan di atas Form Komentar

Pengikut

Popular Posts