Cara Agar Kata Kunci Yang Kita Buat Menjadi SEO Friendly

Artikel ini sengaja saya kutip dari blog LimsWeb ditulis oleh LIMS yang menerangkan bahwa Teknik Agar Kata Kunci Yang Kita Buat Menjadi SEO Friendly itu tidaklah mudah, perlu pemikiran yang matang untuk menembak jitu sebuah keyword dari search engine.

Berikut ini ada beberapa teknik yang mungkin bisa berguna :

1. Kata kunci dalam URL

Kata kunci dalam URL dari situs web. Saya berpendapat hal ini membantu dalam posisi website pada kata kunci tersebut. Sebagai contoh: Untuk pencarian “cara membuat blog” domain http://www.caramembuatblog.com , mungkin berada pada posisi yang baik.

2. Kata kunci dalam judul atau “title”

Ini adalah salah satu yang paling penting karena isi tag “Judul” akan ditampilkan di search engine.
Keyword dalam konten atau posting
Merupakan pertimbangan penting dalam menentukan relevansi kata kunci. Selain itu kita juga harus mempertimbangkan keyword density atau kepadatan kata kunci.
Selengkapnya silahkan anda baca Cara Optimasi Meta Tag.

3. Kata kunci dalam teks link

Juga penting karena menentukan subjek halaman yang sedang diakses.

4. Kata kunci dalam header tag h1 h2 h3 …

Hal ini penting untuk mengukur apa yang bisa digunakan pada header tag h1 h2 h3 … .
Untuk penerapan dan keterangan lebih jauh lagi silahkan baca Mengatur Heading Tag h1 h2 h3 Agar Seo.

5. Kata Kunci pada awal postingan

Kata kunci di awal, dari berbagai referensi yang saya baca, akan memberikan posisi yang baik pada mesin pendari.

6. Kata kunci dalam atribut alt

Spider tidak dapat membaca gambar dan diagram, sehingga spider akan mengindeks atribut alt pada gambar, seperti nama gambar,dll
Selengkapnya untuk mengatur Tag Atibut Alt silahkan baca Cara Agar Tag Image Bisa Mendapat Ranking di SE.

7. Kata kunci dalam meta tags

Hal ini juga penting, untuk menempatkan keyword pada meta tags description dan keyword. Saya mengibaratkan ketika sobat masuk perpustakaan dan mencari buku berjudul jejak – jejak ekonomi syariah , maka sobat akan memilih rak dengan kategori ekonomi kemudian mencari buku tersebut. Begitu juga google, Secara sederhana saya berpendapat bahwa spider akan mengindeks meta tags deskripsi kemudian judul posting.
Selengkapnya silahkan anda baca Cara Memasang Meta Tag Agar Seo.

8. Kepadatan kata kunci

Adalah kedekatan antara kata kunci. Misalnya dalam membuat posting. Kepadatan kata kunci adalah rasio dari sebuah kata atau frase untuk total kata dalam teks. Misalnya, untuk sebuah teks dari 100 kata, jika sebuah kata muncul 5 kali, kepadatan adalah 5%.

9. Frase kata kunci

Ini adalah konsep penempatan kata kunci yang membentuk frase kunci. Misalnya, “belajar seo”, “belajar seo bagi pemula”, “ seo untuk pemula”,

10. Kata kunci sekunder

Mengoptimalkan kata kunci sekunder untuk mendukung kata kunci utama berdasarkan kompetensi . Misalnya jika kata kunci utama “ cara membuat facebook”. Kita dapat memilih keyword sekunder misalnya “cara mudah membuat facebook” ,”cara bikin fb baru”. Kemudian keyword tersebut kita tempatkan dalam postingan.

11. Sintaksis kata kunci

Jika kita membuat kesalahan mengetik kata kunci dalam blog kita, mungkin akan berpengaruh dalam pencarian di search engine. Sehingga sebelum memposting artikel, sebaiknya kita memilih judul yang tepat dan teliti dulu apakah terjadi kesalahan penulisan, karena ketika sudah diposting meski sudah diedit, url tidak akan berubah. Misalnya kamu membuat judul posting “ cara membuat facebook”, namun salah ketik jadi “ cara membuwat faceboook”.

Demikian Informasi mengenai Membuat Kata Kunci Menjadi SEO Friendly semoga berguna dan bisa bermanfaat buat kita semua.


Sumber : Membuat Kata Kunci Menjadi SEO Friendly | LimsWeb

Cara Membuat Daftar Isi atau Sitemap dengan Tampilan Berbeda

Pada kesempatan siang ini kembali Ajatshare akan membagikan tips cara membuat daftar isi atau sitemap dengan tampilan berbeda dari biasanya. Mungkin sebagian sobat Ajatshare ada yang pernah melihat tampilan tersebut dan memang betul sekali daftar isi atau sitemap ini dipakai pakai dalam blog DTE yang scriptnya dibuat oleh Taufik Nurrohman.

Dan yang akan saya share  adalah script aslinya jadi tampilan tidak seperti yang di DTE silahkan sobat edit kembali dan sesuaikan dengan blog masing-masing, untuk lebih jelasnya dapat dilihat pada live demo di bawah ini:

Urutkan artikel berdasarkan:	POSTING TERBARU POSTING DIPERBAHARUI
Filter artikel berdasarkan kategori:	MEMUAT...
Cari dengan kata kunci:

Bagi sobat yang ingin mengganti sitemap yang lama dengan sitemap yang keren ini, silahkan ikuti petunjuknya di bawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan lalu pilih Edit HTML
3. Centang Expand Template Widget.
4. Cari kode berikut kode ]]></b:skin> atau <style>
5. Copy dan paste kode berikut tepat di bawahnya

#table-outer {
  padding:7px 10px;
  margin:30px 30px 0;
}
#table-outer table {
  width:80%;
  margin:0;
}
#table-outer form {font:inherit;}
#table-outer td {padding:2px 2px;}
#table-outer label {
  font-weight:bold;
  color:#999;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  display:block;
  text-align:right;
  margin:0 10px 0 0;
  padding:4px 0 0;
}
#table-outer select[disabled] {opacity:.4;}
#post-searcher {
  display:block;
  margin:0;
  padding:0;
}
#table-outer input,#table-outer select {
  width:100%;
  background-color:#111;
  border:none;
  display:block;
  margin:0;
  padding:5px 5px;
  font-size:70%;
  text-transform:uppercase;
  color:#777;
  outline:none;
  -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {background-color:#090909;}
#feed-container {
  display:block;
  clear:both;
  margin:0 30px;
  padding:0;
  list-style:none;
  overflow:hidden;
  position:relative;
  border:1px solid #3c3c3c;
  border-top:none;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#feed-container:after {
  content:"";
  display:block;
  width:1px;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  background-color:#3c3c3c;
}
#feed-container li {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #3c3c3c;
  color:#999;
  width:50%;
  float:left;
  display:inline;
}
#feed-container li .inner {
  margin:15px 16px;
  height:116px;
  overflow:hidden;
  word-wrap:break-word;
  text-overflow:ellipsis;
}
#feed-container li a {
  text-decoration:none;
  color:#5687B8;
}
#feed-container li a:hover {
  text-decoration:none;
  color:#eee;
}
#feed-container li a.toc-title {font-weight:bold;}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
  margin:0 10px 5px 0;
  padding:5px;
  background-color:#222;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  float:left;
}
#result-desc {
  margin:0 30px;
  padding:0;
  border-bottom:4px solid #303030;
}
#result-desc span,#result-desc div {
  display:block;
  margin:0;
  padding:5px 10px 7px;
  color:#D64D52;
}
#result-desc div {color:inherit;}
#feed-nav {
  margin:10px 30px 0;
  text-align:center;
  font-weight:bold;
  text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
  background-color:#111;
  padding:0;
  color:#999;
  text-decoration:none;
  display:block;
  height:30px;
  line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
  background-color:black;
  color:white;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
#feedContainer li {
  float:none;
  display:block;
  width:auto;
  height:auto;
}
#feedContainer:after {
  display:none
}
}

Copy dan paste kode berikut diantara kode <body>.....</body> atau di widget

<div id="table-outer">
  <table border="0">
    <tbody>
    <tr>
      <td><label for="feed-order">Urutkan artikel berdasarkan:</label>
      </td>
      <td><select id="feed-order">
        <option selected="selected" value="published">POSTING TERBARU</option>
        <option value="updated">POSTING DIPERBAHARUI</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="label-sorter">Filter artikel berdasarkan kategori:</label>
      </td>
      <td><select disabled="disabled" id="label-sorter">
        <option selected="selected">MEMUAT...</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="feed-q">Cari dengan kata kunci:</label>
      </td>
      <td><form id="post-searcher">
        <input id="feed-q" type="text" />
        </form>
      </td>
    </tr>
    </tbody>
  </table>
</div> 
<a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKdTZGbmdhUkUtbTA" type="text/javascript"></script>

Social Share Unlocker Popup untuk Blogger

Hari ini saya akan menunjukkan bagaimana Anda dapat menambahkan Social Share Unlocker Popup untuk Blogger. Setelah menambahkan kode di blog Anda, Anda akan melihat satu waktu popup yang akan meminta Anda untuk baik Seperti, Google +1 atau Ikuti Anda untuk melihat isi dari blog. Timer dapat disesuaikan sesuai dengan kebutuhan Anda secara default adalah 60 detik. Anda juga dapat membuat closeable blog dan menambahkan tombol silang dengan mengutak-atik pengaturan. Kotak ini bekerja pada jQuery dan juga terlihat elegan.

Widget ini akan sangat efektif dalam meningkatkan kontra sosial Anda dan menyebarkan blog Anda. Secara keseluruhan CSS telah baik kode untuk membuat desain terlihat cantik. Anda dapat melihat demo live plugin ini dengan mengklik tombol di bawah ini.

LIVE DEMO - Social Share Unlocker Popup untuk Blogger

Setelah Anda telah melihat demo kita dapat melanjutkan dengan tutorial mengenai bagaimana Anda dapat menambahkan Social Share Unlocker Popup ke blog blogger Anda.

Langkah 1 : Menambahkan kode

Pertama pergi ke Blog Judul → Template → Edit HTML dan cari kode < / body> dan paste kode di bawah ini diberikan tepat di atas itu.

<script type='text/javascript'>
//<![CDATA[
TITLEKN='AjatShare';FBKN='https://www.facebook.com/mangsudradjat';
TWITTERKN='https://twitter.com/ajatshare';
URLKN='https://plus.google.com/109703640991842154536';
//]]>
</script><a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<link href="https://googledrive.com/host/0B-qFC4Ni6GSKbHI3LXlMSzFVVXM" rel="stylesheet" type="text/css"/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKLUU3TkZoVHZtUDg" type="text/javascript"></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){                         
$().KN3IN1({
   timeout: 60,
   wait: 0,
closeable: false });
});
//]]></script>

Setelah menambahkan kode berikut Langkah 2 untuk pengaturan.

Langkah 2 : Pengaturan

Mengubah teks warna merah dengan nama pengguna Anda dari Facebook dan Twitter . Ubah URL dengan yang di mana Anda ingin mendapatkan Google +1.
Ganti 60 dengan tidak ada yang Anda inginkan . detik Anda ingin popup untuk muncul .
Mengubah false ke true jika Anda ingin popup menjadi closeable dan menambahkan tombol silang dalam popup.

Setelah mengkonfigurasi kode simpan template . Anda selesai sekarang . Sekarang Anda bisa mendapatkan lebih banyak saham sosial setiap kali pengunjung baru dan unik mengunjungi blog Anda dengan menambahkan ini Popup Social Share Unlocker plugin Blogger.

Cara Membuat Widget Recent Comments dengan Animasi Melayang

Halo sahabat AjatShare, Kali ini saya akan posting mengenai widget Recent Comments awalnya dikodekan oleh Danish Harish dan kemudian diedit oleh banyak rekan-rekan blogger. Sama seperti mereka, saya pun telah telah malakukan perubahan dalam widget ini dan menambahkan animasi melayang-layang di dalamnya.

Demo live widget ini dapat dilihat dengan mengklik tombol di bawah ini.

LIVE DEMO - Cara Membuat Widget Recent Comments dengan Animasi Melayang

Setelah Anda telah melihat demo , untuk menambahkan widget ini di blog blogger Anda ikuti petunjuk yang diberikan di bawah ini.

Menambahkan Widget

Untuk menambahkan widget ini di blog Anda terlebih dahulu pergi ke Blog Judul → Tata Letak → Tambah Widget → HTML / JavaScript. Tambahkan kode di bawah ini diberikan.

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>

<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Your Name';
//]]>
</script><a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKTEdlU1NNSTZnb2c" type="text/javascript"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Tambahkan kode di atas dan ikuti petunjuk di bawah ini:

Menyiapkan Widget

Setelah menambahkan kode memeriksa konfigurasi widget.
numComments - Menunjukkan jumlah maksimum komentar untuk ditampilkan di widget.
showAvatar - Ubah ke false jika Anda ingin menyembunyikan avatar di widget.
avatarSize - Ukuran avatar di widget diukur dalam pixel.
roundAvatar - Ubah ke false jika Anda tidak ingin avatar menjadi berbentuk bulat.
karakter - Jumlah karakter untuk menunjukkan di komentar.
defaultAvatar - Gambar yang akan digunakan bila komentar tidak memiliki avatar.
adminBlog - Ganti Nama Anda dengan nama admin sehingga komentarnya dapat disembunyikan.

Setelah membuat semua perubahan jangan lupa untuk menyimpan template. Sekarang Anda dan pengunjung Anda dapat melihat widget komentar mengagumkan di dalam blog blogger Anda.

Cara Membuat Daftar Isi atau Sitemap yang Responsive

Menambahkan Sitemap atau Daftar Isi di blog ini sangat dianjurkan untuk semua blogger baik baru atau lama. Peta Situs ini membantu pembaca untuk menavigasi blog dengan mudah dan juga membantu blog kita dengan menurunkan tingkat bouncing nya ( jumlah kunjungan yang terdiri dari hanya satu tampilan halaman ). Dari teman saya sangat baik + Chandeep J telah bekerja di widget Sitemap untuk membuatnya lebih menarik dengan diberinama Responsif Sitemap Widget untuk Blogger

Responsif Sitemap Widget untuk Blogger

Widget ini diberi kode oleh Chandeep dari BlogTipsnTricks . Widget sitemap ini responsif dan dapat digunakan lebih atau kurang dalam setiap template blogger tanpa masalah besar . Widget terlihat menarik dan eye catching juga. Sebuah demo kerja langsung dapat dilihat dengan mengklik tombol di bawah ini :

LIVE DEMO - Cara Membuat Daftar Isi atau Sitemap yang Responsive

<script src="https://googledrive.com/host/0B-qFC4Ni6GSKQnE2b0o5V25tcnc" type="text/javascript"></script>
<script src="URL Blog Anda/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }</style>

Untuk menambahkan widget Sitemap ini ke dalam blog cukup ikuti petunjuk di bawah ini .

Pergi ke Blog Judul → Page → New → Halaman Halaman Kosong → HTML dan paste kode di bawah ini diberikan dalam editor posting . Lalu ganti tulisan warna merah dengan URL Blog Anda.

Cara Membuat Thumbnail otomatis dan Fungsi Read More pada Blogger

Ikuti langkah-langkah :
1 . Pergi ke " Design" klik "Edit HTML "
2 . Centang pada " Expand Template Widget "
3 . Cari kode ini

<data:post.body/>

4 . Ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

5 . Sekarang , cari < / head> dan paste bagian kode berikut tepat sebelumnya :

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

LIVE DEMO - Cara Membuat Thumbnail otomatis dan Fungsi Read More pada Blogger

Keterangan:
summary_noimg = 430 ; tinggi posting tanpa gambar
summary_img = 340 ; tinggi posting dengan gambar
img_thumb_height = 100; tinggi gambar thumbnail
img_thumb_width = 120 ; lebar gambar thumbnail

Typography Icon Set

Typography (gaya penulisan) dalam sebuah artikel akan membuat nyaman pengunjung blog dalam membaca artikel yang disajikan penulis, karena blog akan terlihat rapi dan lebih profesional. Cara pembuatan ini hanya menggunakan CSS yang kemudian diterapkan pada posting artikel.

Icon set

This is a sample file1 message.
Use <p class="gkfile1">Your message goes here!</p>.

This is a sample kfile2 message.
Use <p class="gkfile2">Your goes here!</p>.

This is a sample search message.
Use <p class="gksearch">Your message goes here!</p>.

This is a sample zoom- message.
Use <p class="gkzoomminus">Your message goes here!</p>.

This is a sample zoom+ message.
Use <p class="gkzoomplus">Your goes here!</p>.

This is a sample error message.
Use <p class="gkerror">Your message goes here!</p>.

This is a sample tick message.
Use <p class="gktick">Your message goes here!</p>.

This is a sample book message.
Use <p class="gkbook">Your goes here!</p>.

This is a sample map message.
Use <p class="gkmap">Your message goes here!</p>.

This is a sample tag message.
Use <p class="gktag">Your message goes here!</p>.

This is a sample stats message.
Use <p class="gkstats">Your goes here!</p>.

This is a sample star message.
Use <p class="gkstar">Your message goes here!</p>.

This is a sample ribbon message.
Use <p class="gkribbon">Your message goes here!</p>.

This is a sample nav message.
Use <p class="gknav">Your goes here!</p>.

This is a sample graph message.
Use <p class="gkgraph">Your message goes here!</p>.

This is a sample flash message.
Use <p class="gkflash">Your message goes here!</p>.

This is a sample location message.
Use <p class="gklocation">Your goes here!</p>.

This is a sample locationminus message.
Use <p class="gklocationminus">Your message goes here!</p>.

This is a locationplus cd message.
Use <p class="gklocationplus">Your message goes here!</p>.

This is a sample bulb message.
Use <p class="gkbulb">Your message goes here!</p>.

/*icons*/
.gkfile1,
.gkfile2,
.gksearch,
.gkzoomminus,
.gkzoomplus,
.gkerror,
.gktick,
.gkbook,
.gkmap,
.gktag,
.gkstats,
.gkstar,
.gkribbon,
.gknav,
.gkgraph,
.gkflash,
.gklocation,
.gklocationminus,
.gklocationplus,
.gkbulb {
background-position: 0 8px !important;
background-repeat: no-repeat !important;
min-height: 38px !important;
padding: 0 0 2px 62px !important;
}

LIVE DEMO - Typography Icon Set

Langkah 2 : Untuk penerapan ke dalam template ikuti petunjuk sesuai dengan gambar di atas.

Typography Boxes Styles

Typography (gaya penulisan) dalam sebuah artikel akan membuat nyaman pengunjung blog dalam membaca artikel yang disajikan penulis, karena blog akan terlihat rapi dan lebih profesional. Cara pembuatan ini hanya menggunakan CSS yang kemudian diterapkan pada posting artikel.

Boxes Style

<p class="box-info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>

<p class="box-tips"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>

<p class="box-warning"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>

This is a sticky. Use <p class="box-list">Your clip note goes here!</p> to create a clip note!

This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!

This is a grey box. Use <p class="box1">Your content goes here!</p> to create a grey box!

This is a hilite box. Use <p class="box2">Your content goes here!</p> to create a hilite box!

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

/* Warning message */
.box-info,.box-tips,.box-warning, .box-list, 
.box-download{ border: 1px solid #eee;clear:both; display: 
block;line-height: 22px; min-height: 38px; padding: 10px 12px 12px 68px;
 margin: 15px 0;}
.box-info{ background: #F8F8F8 
url('https://dl.dropboxusercontent.com/u/58902557/typography/info.png') 
no-repeat 12px 8px; color: #222}
.box-tips{ background: #7CADDE 
url('https://dl.dropboxusercontent.com/u/58902557/typography/tips.png') 
no-repeat 12px 8px; color: #fff;}
.box-warning{ background: #db6161 
url('https://dl.dropboxusercontent.com/u/58902557/typography/warning.png')
 no-repeat 12px 8px; color: #fff;}
.box-list { background: #F7FCF9 
url(https://dl.dropboxusercontent.com/u/58902557/typography/sticky-big.png)
 no-repeat 16px 14px;}
.box-download { background: #F8F8F8 
url(https://dl.dropboxusercontent.com/u/58902557/typography/download-big.png)
 no-repeat 16px 14px;}
.box1 { margin: 15px 0; padding: 10px 15px !important; background-color: #329579; color: #fff}
.box2 { margin: 15px 0; padding: 10px 15px !important; background-color: #ffffdd; color: #006699;}

LIVE DEMO - Typography Boxes Styles

Langkah 2 : Untuk penerapan ke dalam template ikuti petunjuk sesuai dengan gambar di atas.

Breadcrumbs SEO Friendly dan Valid HTML5

Selamat malam sobat AjatShare. Pada malam ini kita akan membahas tentang Breadcrumbs SEO Friendly dan Valid HTML5. Mungkin sobat banyak yang sudah tau tentang Breadrumbs. Kabarnya dengan adanya Breadcrumbs akan menambah nilai tambah SEO untuk blog dan website yang sobat punya. Jika Breadcrumbs yang seo friendly sudah biasa dan sudah banyak dishare oleh sobat blog lainnya, namun kali ini kita akan bica tentang Breadcrumbs SEO Friendly dan Valid HTML5.

LIVE DEMO - Breadcrumbs SEO Friendly dan Valid HTML5

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

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah 2 : Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'> &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span> </b:loop> &#187;
<span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187;
<span>Unlabelled</span> &#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Apabila sobat sudah menerapkan breadcrumbs pada artikel sebelumnya, silahkan cari kode seperti ini:

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a>
</span>
<b:loop values='data:post.labels' var='label'> &#187;
<span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

ganti dengan kode berikut ini :

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
</span>
<b:loop values='data:post.labels' var='label'> &#187;
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

Selamat mencoba...

sumber : kangismet.net

Membuat Dropdown Menu Animasi Responsive Dengan CSS3

Navigasi menu dropdown dengan fade in dan animasi cantik untuk geser sub menu ke atas. CSS animasi menu ini berjalan baik di semua browser modern termasuk Internet Explorer.

Menu ini juga memiliki border-radius dan box-shadow yang dapat terlihat sempurna dalam IE9 +

Untuk browser Safari yang digunakan pada handphone, iPad dll sub menu dapat ditutup dengan menekan layar dimana saja. Untuk lebih jelasnya silahkan coba Live Demo di Bawah ini:

LIVE DEMO - Membuat Dropdown Menu Animasi Responsive Dengan CSS3

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#url">Services</a>
    <ul>
      <li>
        <span><a href="#">Printing &amp; Framing</a>
        <span><a href="#">Photo Editing</a>
        <span><a class="last" href="#">Storage &amp; Backup</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Contacts</a>
    <ul>
      <li>
        <span><a href="#">Support</a>
        <span><a href="#">Sales</a>
        <span><a href="#">Buying</a>
        <span><a href="#">Photographers</a>
        <span><a href="#">Stockist</a>
        <span><a class="last" href="#">General</a>
        </span></span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Stores Location</a>
    <ul>
      <li>
        <span><a href="#">South West Region</a>
        <span><a href="#">North East Region</a>
        <span><a class="last" href="#">Central Region</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Contact Us</a>
    <ul>
      <li>
        <span><a href="#">Email Addresses</a>
        <span><a href="#">By Post</a>
        <span><a class="last" href="#">Telephone Numbers</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url"> Sales </a>
    <ul>
      <li>
        <span><a href="#">Digital SLR Cameras</a>
        <span><a href="#">Interchangeable Lenses</a>
        <span><a href="#">Flash Guns &amp; Accessories</a>
        <span><a href="#">Professional Tripods</a>
        <span><a class="last" href="#">Filters &amp; Lens Hoods</a>
        </span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</div>

/* Responsive Nav Menu Copyright @ ajatshare.blogspot.com */
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#555; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s; 
-moz-transition: 0s 0.75s; 
-ms-transition: 0s 0.75s; 
-o-transition: 0s 0.75s; 
transition: 0s 0.75s; 
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}
.menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;
 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
 }
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}

Menu support untuk IE7, IE8, IE9 Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, Avant, iPhone, iPod Touch dan iPad.

Dropdown Navigation Menu Responsive Cross Browser

Dropdown Navigation Menu Responsive Cross Browser dengan animasi yang cakep yang dapat tampil sempurna di Firefox 4, Opera, Safari, Chrome, iPad, iPhone dan iPod Touch. Browser membuka sub menu dengan alay,.. maksudnya delay ,.. :D untuk mencegah dropdowns tertutup, jadi ketika mouse bergerak (ke sub menu atau lainnya) yang punya sedikit jarak, akan menjaga drop down sub menu tidak tertutup secara tiba-tiba.

Drop down menu akan menghasilkan popup tab “close x” saat tampil di Touch iPad, iPhone dan iPod di atas top level menu yang dapat dimanfaatkan untuk menutup struktur menu. Untuk lebih jelasnya silahkan coba Live Demo di bawah ini:

LIVE DEMO - Dropdown Navigation Menu Responsive Cross Browser

<div class="menus">
  <ul>
    <li><a href="#url">Home</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Contact Us</a>
    <ul>
      <li><a href="#url">Email</a></li>
      <li><a href="#url">Telephone</a></li>
      <li><a href="#url">Online Form</a></li>
      <li><a href="#url">Snail Mail Address</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Resort</a>
    <ul>
      <li><a href="#url">Ski Hire Facilities</a></li>
      <li><a class="fly" href="#url">Main Ski Slopes</a>
      <ul>
        <li class="p1"><a href="#url">Beginners Slopes</a></li>
        <li><a href="#url">Intermediate Slopes</a></li>
        <li><a class="fly" href="#url">Advanced Skills</a>
        <ul>
          <li class="p1"><a href="#url">Local</a></li>
          <li><a href="#url">Nearby</a></li>
          <li><a href="#url">With instructor</a></li>
          <li><a href="#url">Snow boarding</a></li>
        </ul></li>
        <li><a href="#url">Expert</a></li>
      </ul></li>
      <li><a href=#url">Night Life</a></li>
      <li><a class="fly" href="#url">Restaurants</a>
      <ul>
        <li class="p1"><a href="#url">Snow Hotel</a></li>
        <li><a href="#url">The Snowman</a></li>
        <li><a href="#url">Ice Cavern</a></li>
        <li><a href="#url">Ski Inn</a></li>
      </ul></li>
      <li><a class="fly" href="#url">Car Hire</a>
      <ul>
        <li class="p1"><a href="#url">From Airport</a></li>
        <li><a href="#url">In Resort</a></li>
        <li><a href="#url">Multiple Resorts</a></li>
      </ul></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Surrounding Area</a>
    <ul>
      <li><a href="#url">Where to go</a></li>
      <li><a href="#url">What to do</a></li>
      <li><a href="#url">Places of interest</a></li>
      <li><a href="#url">Parks &amp; Museums</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Information</a>
    <ul>
      <li><a href="#url">Money Exchange</a></li>
      <li><a href="#url">Resort Information</a></li>
      <li><a href="#url">Language</a></li>
      <li><a href="#url">Short Breaks</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
</div>

/* Copyright http://ajatshare.blogspot.com */
.menus {height:50px; position:relative;}
.menus ul {padding:0; margin:0; list-style:none; width:150px; float:left;}
.menus ul ul {position:absolute; z-index:-1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul ul ul {position:absolute; left:150px; top:0;}
.menus ul ul ul.rgt {position:absolute; left:auto; right:150px; top:0;}
.menus ul li {float:left; width:150px; position:relative; z-index:10; 
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
}
.menus ul ul li {
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menus ul ul ul li {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul li a {display:block; width:139px; height:29px; padding-left:10px; background:#006699; font:normal 12px/29px arial, sans-serif; color:white; text-decoration:none; margin-bottom:1px; margin-right:1px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menus ul li a.fly {background:#006699 url(http://zifana.com/wp-content/uploads/2013/07/arrow-over.gif) no-repeat right center;}
.menus ul li:hover > a {background-color:#86A9D9; color:#fff;}
.menus ul li:hover > a.fly {background:#86A9D9 url(http://zifana.com/wp-content/uploads/2013/07/arrow.gif) no-repeat right center;}
.menus ul ul li {margin-top:-30px;}
.menus ul ul li.p1 {margin-top:0;}
.menus ul ul ul {margin-left:-150px;}
.menus ul li:hover > ul > li {margin-top:0;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul ul li:hover > ul {margin-left:0;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.menus ul li.close {margin-top:-30px; z-index:-1;}

@media (max-width:768px){
/* for iPhone, iPod Touch and iPad */
.menu ul li:hover + li.close {margin-top:-60px; z-index:0;}
}

Menu support untuk IE7, IE8, IE9 Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, Avant, iPhone, iPod Touch dan iPad.