Home All posts

Cara Membuat Kode Berwarna dalam Tag Pre - Syntax Highlighter

Habis Baca, Jangan lupa tinggalkan komen yaa..
Posted by Desain Kode Wednesday, January 13, 2016 0 comments
Membuat text/script berwarna atau yang disebut dengan SYNTAX HIGHLIGHTER biasanya digunakan oleh blogger yang berkaitan dengan source kode dan bahasa-bahasa pemrograman seperti HTML, Javascript, CSS, JSON, SQL, Apache, C++, dll. Terkadang juga kita akan mendapatinya di blog-blog tutorial seperti blog DesainKode ini. Tujuan pewarnaan kode/script ini adalah selain memberikan tampilan yang elegan juga bertujuan untuk membedakan yang mana kode CSS, JS, HTML, XML, PHP, Tag pembuka atau penutup, String, Title, dan lainnya.
membuat kode dan tulisan berwarna dalam tag pre

Ada beberapa jenis Syntax Highlighter yaitu Highlight.js, PRISM, GeSHi, Google Code Prettify, SHJS. Namun yang akan saya bahas disini adalah jenis Highlight.js, karena jenis ini lebih mudah penggunaannya dan paling banyak digunakan oleh blogger-blogger Indonesia. Pengaplikasiannya digunakan dalam Tag PRE (pre-formatted). Beda dengan Blackquote (kutipan), Tag Pre memang lebih cocok di pakai dalam menuliskan script/kode, selain itu juga mendukung Syntax Highlighter ini. Sudah banyak style/tema Highlight.js yang telah dibuat sampai saat ini, dan kurang lebih sudah mengenali 120 bahasa pemrograman. untuk lebih lengkapnya nanti bisa dilihat dibagian Style CSS Highlight.js artikel ini.

Langsung saja, untuk membuatnya silahkan ikuti langkah-langkah berikut :
1. Simpan kode Javascript ini diatas </head>
<script src='http://cdn.rawgit.com/editorkode/live/master/highlight.pack.js'/>
<script>hljs.initHighlightingOnLoad();</script>

2. Pilih salah satu Style dari CSS yang ada di bawah lalu taruh di atas ]]><b:skin>. Ini contoh kode CSS Highlight yang dipakai oleh Blog DesainKode saat artikel ini dibuat. 
pre code {
    display: block; 
    padding: 10px; 
    background:#141510;
    color: #DCCF8F;
    font-size:85%;
    margin-top: 5px;
    overflow-wrap: break-word; 
    overflow: auto; 
    overflow-x:hidden;
    border-left: 5px solid #9A3135;
}
 
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}

66 Jenis Style/Tema Syntax Highlighter

Kode-kode CSS dibawah sudah termasuk bahasa pemrograman yang biasa digunakan blogger dalam membuat kode tutorialnya (CSS, JS, HTML). Silahkan klik tombol di bawah untuk melihat demonya terlebih dahulu.

DEMO

Semuanya style diatas sudah saya edit ulang, jadi klo mau digunakan, kodenya tinggal di copy saja. Itupun kalau masih ingin mengatur sedikit tata letaknya, silahkan diedit bagian pre code {...}
Note : Kalo punya style sendiri, silahkan hubungi saya untuk ditambahkan ke daftar list diatas.

3. Berikut ini cara penggunaannya, saat ingin membuat Kode/Script dalam postingan blog (dalam Mode HTML):
<pre><code> ---LETAKKAN DISINI KODE CSS, HTML, JS, JQUERY, dll--- </code></pre>

Sekian tutorial untuk membuat pewarnaan source kode, script atau bahasa-bahasa pemrograman dalam Tag Pre. Untuk menambahkah nama/judul pada tag pre tersebut, baca artikel tentang cara Membuat Judul Tag Pre Code ini. Silahkan subcribe di bagian footer blog ini untuk berlangganan artikel DesainKode. Masukkan alamat Email anda untuk saya kirimi artikel blog ini secara Gratis.
Categories:

Membuat Sidebar Menu 2 Level CSS dan jQuery

Habis Baca, Jangan lupa tinggalkan komen yaa..
Posted by Desain Kode Tuesday, January 12, 2016 1 comments
membuat sidebar menu 2 level css dan jquery

Pada kesempatan ini, saya akan membagikan tutorial membuat Sidebar Menu atau menu yang ada di samping kanan blog Desain Kode ini. Tutorial ini akan menjawab pertanyaan berikut dari salah satu komentator di blog DesainKode. Memang saya sudah menjelaskannya di balasan komentar tersebut, tapi alangkah baiknya jika dijadikan artikel tutorial di blog ini, agar yang lain bisa mencobanya jika berminat dengan menu samping ini.

membuat menu samping blog desainkode


Menu ini bersifat melayang (fixed) dimana iconnya menggunakan font-awesome. Jadi, kita bebas memilih ikon dan bebas menentukan nama judul-judul menunya. Klik Tombol dibawah untuk melihat demonya.

DEMO

Langsung saja, silahkan ikuti langkah-langkah berikut jika ingin menerapkannya di blog anda :

Membuka Menu Di Awal Tampilan

1. Buka Menu Template Edit HTML

2. Letakkan kode CSS berikut di atas kode ]]></b:skin>
.MenuKanan {
  min-width: 1260px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
.MenuKanan.MenuKanan-mengecil .MenuKananblog {
  width: 62px;
  transition: all 200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
  transition-delay: 400ms;
}
.MenuKanan.MenuKanan-melebar .MenuKananblog {
  width: 250px;
  transition: all 200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-mengecil .MenuKanan-icon {
  transform: rotate(90deg);
  transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-melebar .MenuKanan-icon {
  transform: rotate(0deg);
  transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-mengecil .LogoMenu {
  height: 135px;
  transition: all 200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
  transition-delay: 400ms;
}
.MenuKanan.MenuKanan-melebar .LogoMenu {
  height: 135px;
  transition: all 200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-mengecil #LogoMenu {
  opacity: 0;
  transition: all 300ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
.MenuKanan.MenuKanan-melebar #LogoMenu {
  opacity: 1;
  transition: all 300ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
  transition-delay: 400ms;
}
.MenuKanan.MenuKanan-mengecil #IsiMenuKanan span {
  opacity: 0;
  transition: all 100ms linear;
}
.MenuKanan.MenuKanan-melebar #IsiMenuKanan span {
  opacity: 1;
  transition: all 300ms linear;
  transition-delay: 400ms;
}
.MenuKananblog {
  position: fixed;
  float: left;
  width: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #353940;
  color: #BFBFBF;
  font-family: "Segoe UI";
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
#IsiMenuKanan {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}
#IsiMenuKanan li {
  position: relative;
  margin: 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(69, 74, 84, 0.7);
  padding: 0;
}
#IsiMenuKanan li ul {
  opacity: 0;
  height: 0px;
}
#IsiMenuKanan li a {
  font-style: normal;
  font-weight: 400;
  position: relative;
  display: block;
  padding: 10px 20px;
  color: #BFBFBF;
  white-space: nowrap;
  z-index: 2;
}
#IsiMenuKanan li a:hover {
  color: #ffffff;
  background-color: #333944;
  transition: color 2100ms cubic-bezier(0.45, 0.05, 0.55, 0.95);, background-color 2100ms cubic-bezier(0.45, 0.05, 0.55, 0.95);;
}
#IsiMenuKanan li.active > a {
  background-color: #2b303a;
  color: #ffffff;
}
#IsiMenuKanan ul li { background-color: #2b303a; }
#IsiMenuKanan ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#IsiMenuKanan li ul {
  position: absolute;
  visibility: hidden;
  right: 100%;
  top: -1px;
  background-color: #2b303a;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.1s linear;
  border-top: 1px solid rgba(69, 74, 84, 0.7);
}
#IsiMenuKanan li:hover > ul {
  visibility: visible;
  opacity: 1;
}
#IsiMenuKanan li li ul {
  right: 100%;
  visibility: hidden;
  top: -1px;
  opacity: 0;
  transition: opacity 0.1s linear;
}
#IsiMenuKanan li li:hover ul {
  visibility: visible;
  opacity: 1;
}
#IsiMenuKanan .fa { margin-right: 5px; }
.LogoMenu {
  width: 100%;
  padding: 22px;
  box-sizing: border-box;
}
.MenuKanan-icon {
  position: relative;
  float: right;
  margin-top: 30px;
  border: 1px solid #454a54;
  text-align: center;
  line-height: 1;
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 3px;
  color: #888;
  background-clip: padding-box;
  text-shadow: 5px 5px 7px rgba(0,0,0,0.5);
}
.fa-heartbeat {
  color: #fff;
  margin-left: 50px;
}

3. Taruh kode HTML berikut di atas kode </body>
<div class="MenuKanan">
<div class="MenuKananblog">
    <header class="LogoMenu"> <a href="#" class="MenuKanan-icon"> <span class="fa fa-bars"></span> </a> <a href="#"> <span id="LogoMenu" class="fa fa-heartbeat fa-5x"></span></a> </header>
    <div style="border-top:1px solid rgba(68, 74, 74, 0.8)"></div>
    <div class="IsiMenuKanan">
      <ul id="IsiMenuKanan" >
        <li id="IsiMenuKanan-home" ><a href="http://desainkode.blogspot.co.id/"><i class="fa fa-home"></i><span>Home</span></a></li>
        <li><a href="#"><i class="fa fa-envelope"></i><span>About</span><span class="fa fa-angle-right" style="float: right"></span></a>
          <ul>
            <li><a href="#">Halaman Kontak</a></li>
            <li><a href="#">Tentang Kami</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-anchor"></i><span>Blog Tools</span><span class="fa fa-angle-double-right" style="float: right"></span></a>
          <ul>
            <li style="width: 130px" ><a href="#">Tools 1<i class="fa fa-angle-right" style="float: right; margin-right: -8px; margin-top: 2px;"></i></a>
              <ul>
                <li><a href="#">Tools 1.1</a></li>
                <li><a href="#">Tools 1.2</a></li>
              </ul>
            </li>
            <li><a href="#">Tools 2</a></li>
            <li><a href="http://editkode-live.blogspot.co.id/"><span>EditorKode-Live</span></a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-sitemap"></i><span>Sitemaps</span></a></li>
        <li><a href="#"><i class="fa fa-share-alt"></i><span>Share</span><span class="fa fa-angle-right" style="float: right"></span></a>
          <ul>
            <li><a href="#" onclick='window.open(&apos;https://www.facebook.com/sharer/sharer.php?u=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Facebook' rel='nofollow' target='_blank'><i class="fa fa-facebook"></i> Facebook</a></li>
            <li><a href="#" onclick='window.open(&apos;https://twitter.com/intent/tweet?text=&apos; + encodeURIComponent(document.title) + &apos;:%20&apos;  + encodeURIComponent(document.URL)); return false;' rel='nofollow' target='_blank'><i class="fa fa-twitter"></i> Twitter</a></li>
            <li><a href="#" onclick='window.open(&apos;https://plus.google.com/share?url=&apos; + encodeURIComponent(document.URL)); return false;' rel='nofollow' target='_blank' title='Share on Google+' rel='nofollow' target='_blank'><i class="fa fa-pinterest"></i> Google+</a></li>
          </ul>
        </li>
        
      </ul>
    </div>
  </div>
</div>

4. Taruh kode jQuery berikut, juga di atas kode </body>
<script>
//Sidebar IsiMenuKanan DesainKode
var toggle = true;
            
$(".MenuKanan-icon").click(function() {                
  if (toggle)
  {
    $(".MenuKanan").addClass("MenuKanan-mengecil").removeClass("MenuKanan-melebar");
    $("#IsiMenuKanan span").css({"position":"absolute"});
  }
  else
  {
    $(".MenuKanan").removeClass("MenuKanan-mengecil").addClass("MenuKanan-melebar");
    setTimeout(function() {
      $("#IsiMenuKanan span").css({"position":"relative"});
    }, 500);
  }
                
                toggle = !toggle;
            });
</script>

5. Agar template lebih tersusun rapi, simpan saja eksternal resource Font Awesome dan jQuery Library berikut di atas <b:skin>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
Note: Hapus salah satu atau kedua eksternal resource tersebut jika sudah ada di template blog anda

6. Save dan Lihat Hasilnya

Menutup Menu Di Awal Tampilan

Saat ditampilkan, menu ini akan langsung terbuka jika menggunakan kode yang diatas. Nah, jika ingin menampilkan menu yang tertutup di awal, Edit di bagian CSS-nya :

  • Ganti semua width: 250px; dengan width: 62px; (ada 2)
  • Ganti juga width: 62px; dengan width: 250px; (ada 1)

Sekian tutorial untuk membuat Sliding Sidebar Menu 2 Level dengan CSS dan jQuery. Jangan lupa Subcribe dan berlangganan Artikel dari blog DesainKode, masukkan alamat email di bagian footer blog ini. Gratis, langsung ke email anda.
Categories:

Cara Membuat Tool Code Converter atau Parse HTML

Habis Baca, Jangan lupa tinggalkan komen yaa..
Posted by Desain Kode Monday, January 11, 2016 0 comments
Konversi Kode atau yang biasa disebut Parse HTML pada dasarnya memiliki fungsi yang sama dengan Ad Converter atau konversi kode iklan seperti Google Adsense. Tujuannya adalah untuk menulis suatu kode HTML atau Javascript, bukan membacanya sebagai kode. Tool ini sangat berguna dan wajib dimiliki oleh blogger yang berkecimpung di bagian Tutorial Web dan Edit Web seperti blog DesainKode ini. Selain dalam postingan, untuk menulis kode pada bagian komentar blog juga perlu di konversi sebelumnya.
cara membuat konversi kode iklan parse html

Bagi yang belum mengerti penggunaan Konversi Kode, lihat contoh perbedaan dengan dan tanpa penggunaan tool Konversi ini :

Contoh 1 : Saat menuliskan kode di postingan blog dalam mode HTML (bagian atas), apabila tidak di konversi maka hasil postingannya akan tampak seperti pada bagian bawah (blogger membacanya sebagai kode).

membuat tool code converter parse html

Contoh 2 : Saat menuliskan kode yang sudah di konversi dengan Tool Code Converte (bagian atas), maka hasilnya postingannya akan tampak seperti pada bagian bawah (tidak di baca sebagai kode, melainkan sebagai tulisan).

membuat tool code converter parse html

Dalam tutorial ini, kita akan membuat Tool Konversi Kode tersebut pada halaman statis blog. Beda dari yang biasa di jumpai, tool ini sudah dilengkapi dengan pilihan character yang ingin di konversi. Berikut ini karakter yang akan dikonversi :
  • < menjadi &lt;
  • > menjadi &gt;
  • " menjadi &quot;
  • ' menjadi &#039;
  • & menjadi &amp;
DEMO

Untuk membuatnya sangat mudah, silahkan diikuti langkah-langakah berikut:
1. Buka Menu Pages New Page

2. Copy dan Paste Kode Berikut pada Mode HTML
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea> 
<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div>
<ul id='wrapin'>
<li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
</ul>
<style type="text/css">
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{font:13px 'Courier New',Monospace;border:1px solid #e9e9e9;width:550px;height:250px;margin:0 auto;display:block;background-color:#f3f3f3;color:#333;padding:15px;}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{border: none;padding: 5px 12px;color: #fff;background-color: #0ea6d8;cursor: pointer;font-size: 13px;margin: 0 10px;line-height: 23px;border-radius: 3px;transition: all 0.3s ease-in-out;}
button:active{background:#3f92e1;}
button[disabled],button[disabled]:active{background:#3f92e1;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin-right:10px;}
</style> 
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('convert').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/</g, "&lt;");
    if (opt3.checked) cv = cv.replace(/>/g, "&gt;");
    if (opt4.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt5.checked) cv = cv.replace(/'/g, "&#039;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>

3. Publish dan Lihat hasilnya

Note : Edit seperlunya. Ganti bagian width:550px untuk lebarnya dan height:250px untuk tingginya, sesuaikan dengan keinginan dan ukuran template masing-masing.

Sekian tutorial cara membuat Tool Konversi Kode (Parse HTML). Jangan lupa subscribe di bagian footer blog ini untuk berlangganan artikel terbaru blog DesainKode.
Categories:

9 Bagian Penting Artikel untuk Optimasi SEO

Habis Baca, Jangan lupa tinggalkan komen yaa..
Posted by Desain Kode Saturday, January 9, 2016 0 comments
Artikel yang baik dimata Search Engine dan Manusia adalah Artikel yang Berkualitas dan mengikuti aturan. Ada beberapa bagian dalam artikel yang perlu bahkan sangat perlu diperhatikan sebelum menerbitkan Artikel. Aturan ini sudah disimpulkan dari beberapa pengalaman blogger dalam menerbitkan artikel baru sehingga lebih SEO Friendly dan Human Friendly.
Cara Membuat Seo Artikel

Bagian-bagian penting dalam artikel yang mempengaruhi SEO

Ketika ingin membuat sebuah artikel dengan kualitas sesuai standar seo, ada beberapa unsur/ bagian yang perlu mendapat perhatian lebih.  Langsung saja disimak garis besar dari 9 Bagian Penting dalam membuat sebuah Artikel SEO tersebut:

1. Judul Artikel

Mengapa Judul di tempatkan di No.1? Jelas bahwa judul merupakan bagian yang terpenting dari sebuah Artikel. Bahkan sama pentingnya dengan isi dari Artikel. Tidak masalah jika kita menghabiskan waktu berlama-lama memilih kata yang terbaik untuk judul postingan.
Coba bayangkan, apa yang pertama kali dilihat oleh orang jika ada yang membagikan artikel anda? Tentu Jawabannya, Judul.

Dalam membuat/ menentukan judul untuk artikel, gunakan kata yang lebih spesifik, mempertanyakan dan membuat penasaran bagi yang membacanya. Coba lihat contoh-contoh berikut :

Judul 1 : Panduan Bermain Piano
Judul 2 : 5 Teknik Dasar Jago Bermain Piano dalam 1 Bulan
Judul 3 : Wow, 1 Bulan Jadi Master Piano, ini yang Dilakukan Seorang Bocah 5 Tahun

Bandingkan ke-3 Judul tersebut? Jelas terlihat letak perbedaannya kan?
Ada beberapa hal terkait dari judul-judul tersebut.
  • Ada Penggunaan Angka didalamnya. Penggunaan angka dalam judul artikel sudah terbukti mendapat respon positif dari calon pembaca karena lebih menunjukkan judul yang spesifik
  • Menggunakan Sinonim untuk membuat judul yang Unik. seperti penggunaan kata "Jago" dan "Master" dalam contoh diatas.
  • Penggunaan kata seperti "Wow". Ini disebut dengan teknik "Eye Catching". Kata-kata lain yang bisa digunakan seperti "Wow", "Sempurna", "Tebaik", "Hot" , "Astaga", "Buset".
Hipnotis calon pengunjung blog anda untuk ingin mengklik Artikel hanya dengan membaca judulnya saja. Tapi ingat, tetap berikan yang terbaik dalam isi artikel tersebut, jangan sampai menipunya. Dalam membuat artikel seo, setelah memiliki ide dari judul artikel tersebut, tempatkan Kata Kunci dalam Judul sebisanya pada bagian Awal Kalimat.

2. Url Artikel (Permalink)

Permalink adalah kependekan dari permanen link atau biasa disebut juga Tautan Permanen. Dikatakan sebagai permanen link karena URL (Uniform Resource Locator) ini bersifat permanen/ tidak bisa diubah lagi ketika menerbitkan artikel.
Sebelum menerbitkan sebuah konten baru, permalink juga wajib diperhatikan karena sifatnya permanen. Karena sifat permanen itulah sehingga pihak blogspot membuat fasilitas untuk memodifikasi URL ini. Hal ini tentu perlu dimanfaatkan oleh semua blogger di dunia.
Menurut pendapat beberapa pakar SEO didunia, URL yang baik mengandung 3 - 5 suku kata. Ingat, usahakan hanya 3 sampai 5 kata kunci saja.
Ada 2 bagian dalam Permalink Artikel, yaitu :
  • Tautan Permanen Otomatis. dimana URL artikel akan di bentuk berdasarkan apa yang di tulis dalam Judul Artikel. Secara Otomatis, Blogspot akan membentuk permalink ini kurang lebih sebanyak 40 Character, dimana setiap spasi di ganti dengan character "-" (dashes)
  • Tautan Pemanen Khusus atau tempat untuk memodifikasi Permalink. Disarankan sebaiknya selalu menggunakan pilihan ini. Jadi, gunkanlah sedikit waktu juga untuk mengedit di bagian ini.
Permalink dalam sebuah artikel seo juga mengandung kata kunci didalamnya, Jadi dari 3-5 suku kata tersebut, sisipkan beberapa kata yang menjadi kata kunci artikel seo anda.

3. Headline Tags

Headline Tags sering juga disebut Tag Heading. Hal ini juga sangat penting dalam mengoptimasi SEO sebuah halaman dan artikel. Ada 6 Jenis Tag Heading yaitu H1, H2, H3, H4, H5 dan H6.
Struktur Tag heading pada artikel seo harus tersusun rapi mulai dari judul header, judul artkel hingga judul sub bagian dalam artikel tersebut.
Meskipun masih menjadi bahan pembicaraan tentang struktur/ Tata letak Tag Heading yang dinamis, ada beberapa aturan penting dalam menyusun Tag Heading dalam satu halaman blog.
  • Tag H1 jumlahnya hanya boleh ada 1 buah dalam satu halaman. Ingat, 1 halaman bukan 1 Artikel. Jangan sampai ada Tag H1 lagi di bagian lain halaman blog tersebut. Mesin pencari seperti Google dan Bing menyukai jika sebuah halaman hanya mempunya 1 buah Tag H1. Sebaiknya H1 digunakan pada Judul Artikel saja.
  • H2 hingga H6 boleh digunakan beberapa kali dalam artikel. Biasanya dipakai jika Artikel mengandung Sub-Judul didalamnya.

4. Link Building

Link building juga salah satu penentu dalam membuat artikel seo friendly. Ada 3 aturan dalam pemasangan Link dalam Artikel, yaitu :
  • Membuat agar semua link terbuka di tab baru. Caranya adalah dengan menambahkan "target=_blank" didalamnya. Jika menulis artikel lewat mode Compose, nanti akan ada pilihan mengenai hal tersebut saat memasukkan link.
  • Lakukan penerapan Internal Link di dalam Artikel. Internal link yang dimaksudkan adalah semua link yang menuju Artikel lain di dalam blog. Tujuannya agar robot mesin pencari dapat lebih mudah mengindeks dan menelusuri blog kita.
  • Bedakan antara Internal Link dan Eksternal Link. Untuk link dengan tujuan ke halaman luar blog (selain halaman blog sendiri), wajib menggunakan kode rel="nofollow". Bagian ini bisa diaktifkan saat memasukkan link dalam artikel dalam mode Compose.

Di bawah ini adalah contoh link eksternal yang sudah SEO friendly (lihat dalam mode HTML):
<a href="http://editkode-live.blogspot.co.id/" rel="nofollow" target="_blank">Editor Kode Live</a>

5. Gambar (Visual Media)

Gambar dalam Artikel SEO harus memiliki Title tag dan Alt Tag. Title tag dan Alt tag bertujuan untuk mendeskripsikan Gambar ke mesin pencari seperti Google dan juga ke Manusia tentunya.
Hal lain mengenai gambar dalam artikel adalah menggunakan nama yang benar (tidak menggunakan angka) serta ganti "spasi" dengan character "-" (dashes).
Perlu diketahui bahwa mesin pencari juga membaca dan mengidentifikasi semua kode yang ada pada sebuah halaman. Jika, Spasi tidak diganti, saat gambar diupload, karakternya akan berubah menjadi "%20". Hal ini tentu sedikit berdampak buruk dalam SEO blog.

Lihat contoh berikut :
Ini adalah struktur kode standar (dalam mode HTML) ketika mengupload Gambar :
<a href="http://desainkode.blogspot.com" imageanchor="1"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy87zEj4tcr_HvREQlRe_2wp1Lnik7Wec4qM_10CDAZsI4nbpvz_4FeKMHW2OPEJhGKIvmxi4CAJuu1JwxhFtsLGjujN2qNvkO_X8gFmStfCPNCxd5i2x7sHPVF9S8fVnYi1s92mDb7ps/s320/tag-kondisional-blogspot-dan-cara-menggunakannya.png" width="320" /></a>

Sebaiknya menghapus bagian border="0" dan  imageanchor="1" lalu tambahkan title="nama_title" dan alt="deskripsi_title". Dalam mode Compose, klik gambar lalu pilih Properties untuk menambahkan Title dan Alt Tag. Bisa juga di tulis manual pada mode HTML.

Berikut ini contoh struktur kode yang sudah SEO Friendly :
<a href="http://desainkode.blogspot.com" ><img height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy87zEj4tcr_HvREQlRe_2wp1Lnik7Wec4qM_10CDAZsI4nbpvz_4FeKMHW2OPEJhGKIvmxi4CAJuu1JwxhFtsLGjujN2qNvkO_X8gFmStfCPNCxd5i2x7sHPVF9S8fVnYi1s92mDb7ps/s320/logo-desain-kode.png" width="320" alt="Logo Blog Desain Kode" title="Blog Desain Kode"  /></a>


Terkait dengan hal ini, perlu diketahui bahwa gambar Obeng pada Widget blog tidak mempunyai Title dan Alt Tag, Jadi sebaiknya dihapus saja.
Edit dibagian Template - Edit HTML. Hapus semua kode <b:include name='quickedit'/> yang ada

6. Label Postingan

Label berfungsi untuk mengelompokkan artikel-artikel yang saling berkaitan dalam satu label tersebut. Label atau kategori, pada dasarnya berguna untuk pembaca dan pengunjung agar dengan mudah menemukan artikel sambungan, artikel lanjutan ataupun hal hal yang berhubungan dari artikel yang dibacanya. Secara tidak langsung juga dapat memudahkan blogger dalam mengelompokkan semua artikel yang telah di buat.

Nah, trus apa pengaruhnya untuk SEO?

Saat mendaftarkan blog ke Google atau mesin pencari lainnya, Google akan menelusuri dan mengindeks semua bagian dari blog. Saat melakukannya, google hanya membutuhkan 1 link saja dari setiap halaman untuk ditelusuri. Dan akan menjadi masalah apabila Crawler google mendapati link yang sama dari berbagai halaman dalam blog karena akan membingungkan mesin telusur tersebut. Jadi untuk mengoptimalkan SEO Artikel, sebaiknya satu artikel hanya mempunyai satu label saja.
Selain itu, agar Google dapat mengidentifikasinya sebagai kata kunci dan topik dalam artikel seo yang anda buat, lakukan penambahan rel='tag' pada kode label. Berikut cara menambahkannya :
  • Masuk pada menu Template - EditHTML
  • Cari dan temukan kode <a expr:href='data:label.url'
  • Tambahkan kode rel='tag' setelahnya, sehingga menjadi :
<a expr:href='data:label.url' rel='tag'

7. Strong Code

Penggunaan kode "strong" dan "b" dalam postingan memang mempunyai fungsi sama yaitu untuk menebalkan huruf dan kata. Namun untuk membuat artikel seo, sebaiknya gunakan kode "strong" sebagai penekanan di kata kunci dan kode "b" untuk memberi tebal pada bagian lain. Penerapan ini mengikuti aturan sesuai dengan standar yang telah ditetapkan W3C.

8. Ada Tombol Share

Menurut beberapa sumber, mesin pencari seperti google dan bing mulai menggunakan Algortima Jejaring Sosial, dimana sebuah artikel bisa saja berada dihalaman pertama Google atau mesin pencari lainnya jika lebih banyak diakses melalui media sosial. Sebenarnya lebih baik jika Tombol share jejaring sosial sudah otomatis terpasang di semua halaman dalam blog. Ini hanya untuk mengingatkan saja, karena akan repot apabila setiap artikel atau konten dipasangi kode Tombol Share lagi.
Jika belum memasangnya, silahkan coba 2 cara membuat tombol share ini :

9. Hindari penggunaan Flash dan Frame

Sebagai Tambahan saja, dalam membuat artikel seo sebisanya hindarilah penggunaan Flash dan iFrame dalam sebuah postingan.


Saran saya, bookmark halaman ini atau copy isinya lalu simpan. Jadi, jika setiap kali ingin menulis/ membuat artikel seo, periksa masing masing bagian-bagian diatas sebelum diterbitkan.
Tapi setelah melakukan hal-hal diatas, tugas anda belum selesai. Bagaimana jika semua blogger menerapkan aturan diatas? Artikel sebaik apapun, jika tanpa dukungan atau backlink dari pihak lain tentu tidak akan ada apa-apanya. Oleh karena itu tetaplah mencari backlink artikel dengan kualitas tinggi. Lebih baik menghabiskan waktu untuk mencari backlink 1 artikel seo yang telah anda buat daripada membuang waktu menulis 10 artikel tanpa adanya satupun backlink ke semua artikel tersebut. Lebih baik juga mempunyai satu artikel super seo daripada 10 artikel murahan.
Categories:
DMCA.com Protection StatusMau copy artikel? Jangan lupa cantumkan link sumber desainkode