Riset Keyword adalah menganalisa kata atau beberapa susunan kata yang identik dan relevan kemudian kata kunci tersebut bisa digunakan sebagai bahan acuan sebagai judul,kategori, ataupun artikel.
Riset keyword hanya mencari variasi kata kunci yang anda target dan paling banyak pencarian di Search Engine.

Mengenal Riset Short Tail dan Long Tail Keyword

Penerapan strategi ini saya menggunakan layanan riset tools gratisan yang paling populer, yaitu keyword planner yang disediakan Google, namun ada banyak tempat layanan yang menyediakan riset keyword lainnya berbayar maupun gratisan. Berikut layanan yang menyediakan Riset Kata kunci :
  • Moz Keyword Analysis (berbayar) $99 per bulan + trial gratis selama 30 hari.
  • Raven Tools Research Central (berbayar) $99 per bulan + trial gratis selama 30 hari.
  • Keyword Discovery (berbayar dan Free) $69,95 per bulan.
  • Suggestions (Free).
  • Long Tail Pro (berbayar) $97 seumur hidup, $17 per bulan ketegori tertentu.
  • Ubersuggest (Free).

Ada 2 Istilah; Short tail dan Long tail Keyword

Short tail keyword adalah versi pendek, hanya 1 kata  atau 2 kata saja. Short Tail masih bersifat umum banget.

Misalkan saya meletakkan kata kunci "Leptop, Lenovo, Acer, Asus, Dell, Sony, Advan" sebagai simulasi ini.



Sedangkan istilah Long Tail Keyword yang memiliki arti kata kunci yang terdiri dari 3 sampai 6 kata yang tersusun, lebih tepatnya struktur kalimat yang mengarah pada produk atau tema/judul yang lebih spesifik.

Saya mensimulasikan kata kunci "acer aspire one d255";


Anda memilih jenis kata kunci yang seperti apa? 

Itu terserah anda. Namun banyak yang sudah senior mengatakan pencarian kata kunci yang pendek jauh lebih sulit dibandingkan dengan kata kunci yang panjang. Namun untuk semua niche itu tidak sama, tergantung.

Kolom "Compitition" Google AdWords Keyword Planner adalah persaingan pengiklan di AdWords bukan persaingan di mesin pencari Google.

Menurut saya tentang cara riset keyword

Menurut saya bagi para blogger lebih mengutamakan kata kunci yang panjang. Mengapa? Bisa dikatakan sulit mengalahkan Website yang sudah senior dan sudah friendly dimata search engine, sudah memiliki page rank yang tinggi, dan website raksasa. Kita bisa menggunakan kata kunci yang lebih spesifik yang banyak jumlah pencariannya.

Namun saya bisa katakan pula, bahwa riset kata kunci yang berhasil posisi utama itu untung-untungan. Namanya juga kita bersaing. Banyangkan saja jika ada Ribuan orang pakar SEO yang sama-sama menerapkan Strategi SEO.

Sudah bisa dipastikan kita yang belum punya page rank + website baru, sangat mungkin kalah dalam persaingan posisi serp.

Cara Menemukan Ide Kata Kunci untuk Membangun Strategi Website dengan Keyword Planner

  • Masuk ke Website adword.google.com > Klik Tools > Keyword Planner.
  • Klik Search for new keyword and ad group ideas.
    • Setelah memasukkan ide kata kunci  > Klik Get Ideas. Pilih Kolom Targeting, kemudian isilah sesuai dengan analisa anda yang ingin anda tergetkan.
    • Analisis dan Me-Review hasil yang ada di tabel.

    Jika kita melihat hasil dari rata-rata orang yang mencari kata kunci, kita bisa melihat ,manakah jumlah terbanyak orang mencari kata kunci tersebut. Jumlah orang mencari dengan kata kunci acer Indonesia 14,800. Maka kata kunci tersebut cukup potensial untuk dijadikan Keyword dalam penempatan judul, artikel, maupun kategori.
    Pilihlah kata kunci yang jumlah pencariannya paling banyak, dari situ kita bisa kembangkan. Hindari kata kunci yang jumlahnya pencarian rata-ratanya sedikit, sia-sia nantinya.
     Catatan, Kolom Kompitisi bukan menunjukan jumlah pemilik kata kunci tersebut, melainkan jumlah pengiklan di AdWords yang menunjukkan di setiap  kata kunci relatif yang ada di Google. Kira-kira seperti itu :).
    • Terakhir, anda bisa mendownload hasil analisa kata kunci dalam bentuk MS. Excel.

    Kesimpulan dari Cara Riset Keyword

    Kita bisa menggunakan fasilitas ini sebagai acuan kita sebelum menuliskan artikel ataupun pemasaran ke search engine. Namun untuk bisa mengoptimalkan untuk ditampilkan pada posisi pertama pada halaman search engine, kita harus memperhatikan teknik SEO.

    Sekian :) jika ada salah, saya juga masih belajar  kok... :)


    Bagi saya logo merupakan hal yang penting. Awalnya saya belum memikirkan tentang logo, lagi pula saya juga belum bisa menggunkan corel draw dan photo shop untuk membuatnya.

    Saya searcing di Google, membaca artikel dari kementrian sosial Indonesia. Pentingnya sebuah Logo dan Brand, walaupun itu hanya sekedar blog pribadi ataupun komunitas bebas.

    Akhirnya saya buat sendiri dengan keterbatasan teknik membuatnya. Saya buat se-simple mungkin, hanya dengan dengan nama "F.R".

    Logo itu bertuliskan "F.R." kepanjangan dari nama blog ini, fahmirabbani.com. Warna saya sesuaikan dengan Latar dari Blog ini. Walaupun simple saya rasa sudah cukup menjadi logo dari blog ini.

    Pentingnya Logo dan Arti bagi Website/Blog

    • Menjadi kebanggaan
    • Sebuah pengakuan
    • Sebuah Inspirasi kepercayaan
    • Sebuah kehormatan dan kesuksesan
    • Memaksimalkan fungsi Web/Blog
    Itulah beberapa tulisan sekaligus untuk agenda launching logo blog saya, hehehe... Silahkan baca artikel yang ada di website kementrian sosial Indonesia. Bagaimana dengan kalian, sudah punya logo untuk web/blog? Sekian :)

    Bloger, Bloge, Blooger, Blogeer, Blogge, atau Blogger. Entah ini beneran atau enggak, saya iseng-iseng mencoba memasukkan kata kunci di Keyword Plannel. Saya iseng mencoba memasukkan short tail "Blogger".

    Saya kurang yakin bagaimana bisa menunjukkan angka sangat keren. Ini Screenshootnya,


    Kita melihat rata-rata jumlah kali orang telah mencari kata kunci ini tepat berdasarkan rentang tanggal dan setelan penargetan yang dipilih. Menakjubkan bukan!

    Lihat kata kunci "Bloger" rata-rata perbulan mencapai 201.000, Wow! Bahkan untuk hasil kunjungan terkecil mencapai 4,400.

    Opini saya tentang kemungkinan Kata Kunci Bloger Bloge Blooger Blogeer Blogge

    • Kemungkinan mereka adalah orang-orang yang salah ketik
    • Kemudian mungkin juga mereka yang masih awam, mereka mau buat blog dengan kata kunci  blogger namun ketika mencarinya di Google, mereka salah ketik.
    • Atau mungkin ngetiknya sambil Ngantuk, z..z..z..z.. Jadi salah ketik hahaha... :D
    • Atau mungkin saya yang kurang paham sama pembacaan di Keyword Planner
    Bagaimanapun saya menuliskan judul ini juga berusaha mendapatka point terpenting dalam halaman Google. Sangat mungkin bukan jika saya memberikan Judul Bloger Bloge Blooger Blogeer Blogge atau Blogger!, mereka bisa mampir ke blog saya. Atau memang saya kurang beruntung! huh..

    Bagi kalian yang Nyasar ke Judul "Bloger Bloge Blooger Blogeer Blogge atau Blogger!" dan mau tau caranya bikin Blog

    Silahkan jika Anda memang berniat mau buat blog dengan platform blogger gratisan, ada kok artikel tentang cara membuat blog disini. Jadi Ngelantur deh...

    Sekian dari saya, artikel ini hanya iseng-iseng belaka. Jika ada yang baca bersyukurlah, jika tidak ada yang baca, tak apalah! Judulnya aja Ngawur... hahaha...

    Cara Mengganti .blogspot.com menjadi domain .com di IdwebhostPada tanggal 3 Januari 2015 saya mengganti domain .blogspot.com menjadi .com. Awal alamat blog ini campusblogger.blogspot.com kemudian saya ganti dengan fahmirabbani.com. Alasan yang membuat saya beralih .com adalah hal itu membuat saya bertambah semangat untuk memelihara sebuah blog.

    Mungkin blog dengan website sedikit berbeda. Blog dengan domain .com sangat murah meriah dengan modal 95ribu (saat saya beli) tanpa harus menyewa hosting. Sedangkan website agak sedikit lebih banyak mengeluarkan receh. Kita membutuhkan domain plus hosting.

    Namun jika anda tidak mau direpotkan dengan hosting yang limited/terbatas, kita bisa gunakan platform blog gratisan, hanya saja jika Anda mengganti .com tinggal beli tanpa menyewa hosting.

    Langkah-langkah Setting Costum Domain Blogspot

    Masuk ke dasbor blog Anda, kemudian Klik "Setelan" atau "Setting"

    Costumasi Domain .com
    Kemudian masukkan domain anda yang ingin kau ganti, menggunakan www, sehingga menjadi www.fahmirabbani.com.

    Anda akan mendapatkan 2 CNAME, semisal :
    • u4cw4tvqv6kt        gv-6hnat2fxvubeje.dv.googlehosted.com
    • www                      ghs.google.com

    Masuk ke Idwebhost

    Silahkan Anda masuk kedalam member area Idwebhost

    Costumasi Domain .com

    Kemudian Klik "Aktive Domains".

    Costumasi Domain .com

    Klik Kelola Domain yang teh Aktif

    Costumasi Domain .com

    Klik Alat Pengelolah kemudian Pilih Kelola DNS.


    Kemudian masukkan Setiap Kolom, Nama Host @, kemudian isikan masing-masing
    • 216.239.32.21
    • 216.239.34.21
    • 216.239.36.21
    • 216.239.38.21
     Lanjutkan pengisian CNAME dari blogger Anda

    Costumasi Domain .com

     Kemudian, lanjutkan ke kolom Name Server, isikan dengan
    • dns1.idwebhost.biz
    • dns2.idwebhost.biz
    • dns3.idwebhost.org
    • dns4.idwebhost.com
    Costumasi Domain .com

    Selesai, utuk Costumasi di halaman Member Area Idwebhost.

    Lanjutkan ke Halaman Blogger, untuk Mengaktifkan domain


    Costumasi Domain .com

    Untuk benar-benar aktif, tunggu untuk proses. Kemarin saya kurang dari 30 menit domain langsung bisa saya gunakan. Tergantung.

    Selamat mencoba, jika gagal hubungi CP dari costumer service Idwebhost.

    Cara Validasi HTML Blog di Blogger
    Validasi terhadap web/blog bisa kita terapkan. Sangat mudah untuk sedikit memperbaikinya, walaupun untuk mencapai 100% itu sangat sulit. Saya juga mulai sedikit memahami fungsi dari HTML itu sendiri.

    Pada awalnya saya mengatakan bahwa validasi yang sempurna pada Blog di blogger akan berpengaruh pada SEO. Namun saya salah.

    Silahkan cek di http://validator.w3.org.

    Manfaat untuk validasi HTML

    • Profesional, jika anda bisa menjadikan valid ataupun mendekati sempurna maka anda seorang yang dianggap profesional.
    • Browser Friendly, Browser anda akan lebih cepat menyesuaikan. 

    Berikut cara validasi HTML di blogger

     Pertama, Lakukan unduh semua template, untuk antisipasi kesalahan editing. Kemudian, kode ini

    <?xml version="1.0" encoding="UTF-8" ?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
    <head>

    Ganti dengan

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <HTML>
    <head>
    <meta charset='utf-8'/>

    Langkah selanjutnya, cari </html> kemudian ganti dengan </HTML>. Huruf kapital.

    Kedua, cari (ctr+f) <b:skin>. kemudian letakkan kode ini tepat diatas <b:skin>

    <link href='https://www.blogger.com/static/v1/widgets/3028179046-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
    &lt;!-- <style type='text/css'/> --&gt;

    Ketiga, hapus semua kode <b:include name='quickedit'/> yang ada. Ini terletak di setiap widget, maka untuk setiap kali submit widget baru, pastikan hapus <b:include name='quickedit'/> kembali.

    Keempat, ganti tanda & dengan &amp;

    Kelima, setiap atribut gambar harus mengandung alt="...". Kode strandart HTML img <img src='Url Gambar' alt='alt gambar'/>. Jadi masukkan alt text.

    Caranya, anda klik gambar yang ingin di publis > klik propertise > isikan Title text dan Alt text.

    Kemudian, benahi strip yang ada.

    <!-------- www.fahmirabbani.com --------> Kode Strip yang buruk

    <!-- www.fahmirabbani.com --> Kode Strip yang baik

    /*------- www.fahmirabbani.com --------*/ Kode Strip yang buruk

    /* www.fahmirabbani.com */ Lebih baik

    Silahkan cek kembali di http://validator.w3.org. Apakah sudah agak mendingan, atau tambah parah? Silahkan mencoba. Sekian tutorial Cara Validasi HTML Blog di Blogger.

    Blog Newbie Versus Master
    Newbie istilahnya adalah pemula, Blog Newbie berarti blogger pemula. Blog master artinya seorang blogger yang sudah ahli, dari ilmu SEO, Coding-codingan, sampai cara memikat pengunjung. 

    Ada banyak hal jika bandingkan, namun saya bukan menjelekkan salah satu pihak manapun. Bagaimana pun saya menuliskan secara netral. Ada banyak hal yang saya ingin curahkan disini. Namun saya kali ini mau membela mereka yang masih pemula. Saya kan masih pemula, hehehe.

    Pertama, Jangan salahkan para pemula. Bagaimanapun mereka adalah orang-orang yang berusaha untuk menyamai blog-blog master dan populer.

    Saya sangat yakin, hal yang membuat mereka semangat gonta-ganti template, sampai berusaha dengan keras mencari keyword yang bagus, dan berbagai cara mereka lakukan. Tapi itulah proses belajar.

    Kedua, Saya berkeyakinan juga, bahwa mereka pasti banyak terinspirasi oleh para master yang populer. Para master banyak menuliskan banyak tutorial dan tips menjadikan blog ataupun website menjadi terkenal atau banyak pengunjungnya. Sehingga mereka berusaha untuk meniru, bahkan sampai desain blog bahkan postingannya. Inspirasi itu halal asalkan...

    Jadi, jangan salahkan juga banyak para pemula yang banyak yang copy paste dengan sembarangan. Mungkin mereka sangat menginginkan banyak artikel di blognya, namun mereka masih minim ilmu.

    Ketiga, Jangan sesat mereka dengan Trik-trik SEO palsu, alias tidak terbukti kalo itu trik bohongan. Sangat menyayangkan pula, ada para master yang sengaja menipu mereka para pemula dengan mengiming-imingi Jasa SEO berkualitas denga harga yang lumayan mahal, dengan menamakan dirinya pakar SEO. Jangan bodohi mereka.

    Keempat, Para pemula juga manusia. Memiliki hasrat untuk mendapatkan keuntungan dengan cepat. Sehigga mereka kurang bersabar. Memasangkan iklan-iklan sembarangan demi uang receh online. Itulah sebuah proses belajar dari pengalaman.

    Kelima, Kebanyakan pemula adalah mereka yang masih sekolah, mungkin SMP, SMA. Jadi cara Ngeblog mereka masih salah karena juga mereka masih proses belajar. Tapi juga banyak juga kok, mereka yang sudah ahli tapi masih SMP. Soalnya saya juga pernah menemukan blog anak SMP yang saya katakan lumayan artikelnya. Jangan dianggap remeh.

    Keenam, Jangan anggap mereka sebagai penggembira, terutama dalam kontes SEO. Newbie bisa dipastikan kalah, tapi hargai mereka.

    Bagi para master, harus bagi-bagi ilmu supaya mereka mengerti Ngeblog yang benar. Kedepannya para Newbie ini bisa ikutan bersaing juga.

    Pesan  untuk kawan yang bener-bener Newbie

    • Point terpenting buat Newbie adalah bersabar dan Konsisten
    • Pilihlah Niche yang paling sesuai dengan kemamuan kalian
    • Jangan Copy Paste yaaa... ntar di buly
    • Harus punya keyakinan, bahwa blog kalian bisa menjadi blog populer
    • Jangan terlalu terobsesi terlebih dahulu untuk mendapatkan uang online
    • Jika memang anda benar-banar seorang pemula, fokus terhadap konten
    • Konsisten update konten
    • Mulailah terapkan ilmu SEO perlahan-lahan
    • Jangan putus asa, nasehat klasik,hehehe...
    Sekian.

    Memasukkan Sitemap ke Webmaster Tools berguna untuk memberikan kemudahan dalam memetakan situs kita. Mungkin bisa mempercepat terindeksnya oleh Google, sehingga kita mendapatkan kesempatan lebih besar untuk mendapat posisi di halaman Google.

    Langkah-langkah Cara Memasukkan Sitemap ke Webmaster Tools
    • Log In pada Google Webmaster Tools
    • Klik Situs yang ingin Anda Kelola, kemudian Klik Perayapan > Peta Situs
    • Kemudian Klik Tambahkan Peta Situs. Cara untuk mengisi bagian yang kosong, Anda silahkan buka Tab halaman browser. Kemudian Silahkan Isikan www.nama-web-atau-blog-punya-anda.com/robots.txt. Untuk URL Situs Silahkan Isikan dengan menggunakan alamat URL Web/blog sobat. 
    • Kemudian Salin kedalam Kolom "Tambahkan Peta Situs". Mungkin setiap Web/blog berbeda dalam url sitemap.
    • Kemudian Klik Simpan, dan Selesai.

    • Demikian Tutorial kali ini cara memasukkan sitemap di webmaster tools Google, semoga bermanfaat untuk SEO di Google.

    Bootstrap adalah framework atau kerangka HTML, CSS, dan Java Script paling populer digunakan untuk mendesain sebuah desain template Website yang sudah responsif.

    Sebagaimana saya gunakan pada template ini. Pada awalnya saya melihat tampilan-tampilan template yang menurut saya keren, dari situ saya mencari-cari info. Kemudian saya mendarat di situs getbootstrap.com.

    Bootstrap bagi saya sangat membantu pembuatan template ini. Saya sangat awam sekali mengenai Coding-coding HTML, CSS, apa lagi Java Script. Tapi setelah berusaha untuk serius sedikit (hehehe...) ternyata mudah. Saya hanya menyalin dan memodifikasi sedikit, terutama CSS.

    Bagi saya bootstrap cocok untuk pemula, bahkan fasilitas ini digunakan juga oleh para pakar desainer Web. Mungkin saya karena tidak  terlalu fokus dengan bahasa desain, karena saya kuliah Fisika. Maka untuk bisa menggunakan bootstarp supaya mudah.

    Mulai dari Navigasi menunya, drop downnya, sampai CSS Basic Text, CSS buttons, dll.

    Contoh framework bootstrap :


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
      <div class="jumbotron">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>       
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>

    </body>
    </html>

    Hasilnya INI DEMONYA [SILAHKAN DI KLIK]

    Jika anda ingin belajar banyak, Kunjungi halaman Web bootstrap. GETBOOTSTRAP.com.

    Dan juga penjelasan teori juga bisa di halaman W3school.com.

    Daftar Conditional Tags Blogger dan FungsinyaConditional Tags merupakan bagian terpenting dalam pengeditan template. Fungsinya apa? masing-masing Tag berbeda-beda. Sesuai dengan kode Tag-nya.

    Pada umumnya Conditional Tags ini berfungsi sebagai kode HTML pada Blogger.com untuk memberikan perintah penyesuaian letak atau kondisi untuk widget, item, header, CSS, dan lainnya.

    Conditional Tags memungkinkan fleksibilitas dalam mendesain template, mengatur widget atau bagian tertentu untuk ditampilkan atau tidak ditampilkan dalam halaman blog.

    Sebagai contoh : Saya bisa menampilkan widget  arsip pada halaman homepage saja, namun pada halaman posting widget arsip tidak muncul.

    Penjelasan secara teori tentang Conditional Tags

    Pertama,

    <b:if cond=' widget/elemet yang ingin ditampilkan == hanya pada halaman A (Misalnya)  '>
    ISI KONTEN (OBJEK)
    </b:if>

    Contoh Tag :

    <b:if cond="data:blog.url == data:blog.homepageUrl">
    ISI KONTEN (OBJEK)     
    </b:if>   

    data:blog.url adalah widget/elemen dari blogger.
    data:blog.homepageUrl adalah halaman Homepage.

    Artinya: Jika kondisi sekarang adalah ada di halaman Homepage, maka widget/elemen blog itu baru ditampilkan pada homepage. Jika kondisi sekarang bukan ada di halaman Homepage, maka widget/elemen blog itu tidak ditampilkan.
    Kedua,

    <b:if cond=' widget/elemet yang ingin ditampilkan! == hanya pada halaman A (Misalnya)  '>
    ISI KONTEN (OBJEK)
    </b:if>

    Contoh Tag :

    <b:if cond="data:blog.url! == data:blog.homepageUrl">
    ISI KONTEN (OBJEK)     
    </b:if>   

    data:blog.url adalah widget/elemen dari blogger.
    data:blog.homepageUrl adalah halaman Homepage.

    Artinya: Jika kondisi sekarang adalah ada di halaman Homepage, maka widget/elemen blog itu tidak ditampilkan pada halaman homepage. Namun jika widget/elemen blog tersebut berada pada kondisi selain halaman homepage, maka widget ini ditampilakan.

    Berikut Daftar Conditional Tags

    • Menampilkan widget hanya pada halaman Homepage
    <b:if cond="data:blog.url == data:blog.homepageUrl">
    KONTEN    
    </b:if>    

    • Menampilkan widget selain halamn Homepage
    <b:if cond="data:blog.url! == data:blog.homepageUrl">
    KONTEN    
    </b:if>

    • Menampilkan widget hanya pada halaman archive
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    KONTEN
    </b:if>

    • Menampilkan widget disemua halaman kecuali halaman archive
    <b:if cond='data:blog.pageType != &quot;archive&quot;'>
    KONTEN
    </b:if>

    • Menampilkan widget hanya pada halaman posting
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    KONTEN
    </b:if>

    • Menampilkan widget disemua halaman kecuali halaman posting
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    KONTEN
    </b:if>

    • Menampilkan widget hanya pada halaman url tertentu
    <b:if cond='data:blog.pageType = &quot;halaman url&quot;'>
    KONTEN
    </b:if>

    • Menampilkan widget disemua halaman kecuali URL tertentu
    <b:if cond='data:blog.pageType != &quot;halaman url&quot;'>
    KONTEN
    </b:if>

    • Menampilkan widget hanya pada halaman Statis
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    KONTEN
    </b:if>  

    • Menampilkan widget disemua halaman kecuali halaman Statis
    <b:if cond='data:blog.pageType !== &quot;static_page&quot;'>
    KONTEN
    </b:if>  

    Mungkin ini sebagian dari mungkin paling banyak saya gunakan dalam memodifikasi sedikit template. Conditional Tags cukup membuat kita sedikit bermain logika, namun mudah.

    Membuat Posting Auto Readmore Tanpa Java ScriptKata Readmore biasanya merupakan penyingkatan jumlah karakter artikel yang ada pada homepage, membatasi jumlah huruf dan kalimat. Bentuk penampakan yang ada di website maupun blog biasanya berupa kata "Readmore" "Continue Reading" "Baca Selengkapnya" atau yang lainnya.

    Modifikasi "Jump Break" Auto Readmore ini menggunakan  Teknik yang sama dengan ada di Popular Post.

    Berikut intipan kode HTML pada Popular post di blogger, ini tampilan jika ingin menampilkan snippset dan gambarnya.

    <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>

    Cara membuatnya sedikit dimodikasi dengan Conditional Tags dan CSS. Baca juga, daftar Conditional Tags dan kegunaannya.

    <data:post.snippet/>

    Ini merupakan kode untuk meringkas artikel pada widget popular post. sedangkan

    <img expr:src='data:post.thumbnailUrl'/>

    Sedangkan diatas adalah kode untuk gambar yang ada di posting.

    Kemudian kita padukan dan menghapus <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> , sedikit modifikasinya dengan tambahan <div><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div> untuk menambahkan kata-kata "Baca Selengkapnya" sehingga menghasilkan

      <div class='item-content'>
    <b:if cond='data:post.thumbnailUrl'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnailUrl' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    </div>
    <div class='item-snippet'><data:post.snippet/></div>
    <div><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>

    <div style='clear: both;'/>

    Langkah-langkah membuat Auto Readmore tanpa Java Script

    Masuk ke Edit HTML, masukkan kode CSS diatas ]]></b:skin> atau </style>. Untuk memberikan perintah pada thumbnail (gambar).

    .item-thumbnail {
    float:left
    margin-right:10px;
    }

    Kemudian carilah kode <data:post.body/> biasanya ada posisinya ke3, atau diantara <b:includable id='post' var='post'>...</b:includable>
    Kemudian ganti <data:post.body/> dengan kode ini :

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div class='item-content'>
    <b:if cond='data:post.thumbnailUrl'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.url' target='_blank'>
    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnailUrl' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    </div>
    <div class='item-snippet'><data:post.snippet/></div>
    <div><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>

    <div style='clear: both;'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    </b:if>

    Kemudian klik Simpan Template dan Selesai. Lihatlah hasilnya :).

    Cara mengubah frase-kata Jump Break "Readmore"

    Silahkan buka dasbor > tata letak > klik edit bagian Edit Posting > Ganti kata-kata "Baca Selengkapnya" sesuai dengan keinginan.

    Membuat Posting Auto Readmore Tanpa Java Script


    Sekian tutorial tentang  Cara Membuat Posting Auto Readmore Tanpa Java Script yang agak kepanjangan dan bertele-tele, hehehe Selamat mencoba :).

    Cara Mengganti Template Blog pada Blogger.comTutorial sederhana kali ini akan membahas untuk para pemula cara mengganti template bawaan yang ada di blogger.com. Mengapa kita harus mengganti template bawaan?

    Jawabannya terserah anda. Jika anda memang menyukai template yang tersedia di blogger, itu terserah anda. Namun, ada yang harus diperhatikan! Bagaimana jika template anda pada halaman Homepage atau halaman utama terlalu panjang. Menurut saya itu sangat membingungkan pengunjung.

    Jika anda menginginkan template bawaan agar lebih nyaman bagi pengunjung, maka kita perlu menggunakan Auto Readmore.


    Sebelum kita memasuki pembahasan, kita akan membahas terlebih dahulu tentang tips memilih template Blog untuk Blogger sebelum men-download.

    Tips dan Cara Memilih Template Blog

    • Memilih template yang loadingnya cepat, untuk membuktikan kecepatan loading anda bisa menggunakan fitur yang ada di GTMETRIX.COM. Untuk versi perdana template buatan saya yang paling fast loading yaitu Theme Super Speed "A A".
    • Memilih template yang SEO FRIENDLY, artinya kualitas kemampuan  dalam pencarian artikel oleh google, yahoo, bing, atau lainnya. Anda bisa mengecek template yang akan didownload di CHKME.COM
    • Memilih template yang ada BREADCRUMBS. Baca juga : Cara Memasang Breadcrumbs di blog
    • Memilih template yang Responsive. Artinya template yang bisa menyesuaikan ukuran gadget.
    • Selebihnya anda bisa memilih sesuai selera, asalkan template anda bukan tampilan yang terlihat sangat kontras. Mungkin kombinasi gambar, warna yang tidak bagus.

    Langkah-langkah Mengganti Template Blog Bawaan

    • Pastikan anda sudah mendownloadnya. Untuk anda yang menginginkan template buatan saya, kunjungi My Creation Template.
    • Biasanya file yang didownload berupa .zip ataupun .rar. Anda harus mengubahnya dengan meng-extract Here atau Extract files.
      Cara Mengganti Template Blog
    • Kemudian anda masuk ke halaman dasbor > Template > Cadangkan Template
      Cara Mengganti Template Blog
    • Kemudian, klik unduh jika anda untuk mengantisipasi terjadi kerusakan. Klik Unggah
      Cara Mengganti Template Blog
    • Anda sudah mempersiapkan file yang sudah di extract files, kemudian pilih dan klik open
      Cara Mengganti Template Blog
    • Ditunggu untuk loading penyesuian. Selesai. Anda siap untuk menempuh hidup baru dengan tampilan template yang baru, hehehe.
    Bagi yang mau membaca seputar SEO yang saya terapkan di blog saya, silahkan baca 6 Strategi SEO. Gunanya teknik ini adalah untuk bisa bersaing untuk mendapatkan posisi utama pada kata kunci yang dicari pengunjung.

    Sekian dulu postingan kali ini, bila ada kukurangan saya minta masukan. :)

    Cara Membuat Navigasi Menu Plus Widget Hari Tanggal Tahun

    Kali ini saya akan membahas tutorial cara membuat menu navigaton plus widget hari, tanggal dan tahun. Widget Navigasi ini saya terapkan pada Demo pada Template Pertama saya. Jika anda ingin mendownload, kunjungi Theme Blog Perdana buatanku
    Baca juga artikel saya sebelumnya mengenai Navigasi Menu dengan tambahan Search Box.

    Berikut langkah-langkah Navigasi Menu dan Widget Kalender

    Sederhana sekali. Widget ini dikombinasikan dengan kode Java Script yang dimasukkan kedalam kode HTML. Kode anda bisa temukan di googling hehehe. :D

    now = new Date();
    if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
    else (a=now.getTime());
    now.setTime(a);
    var tahun=now.getFullYear()
    var hari=now.getDay()
    var bulan=now.getMonth()
    var tanggal=now.getDate()
    var hariarray=new Array("Minggu,","Senin,","Selasa,","Rabu,","Kamis,","Jum'at,","Sabtu,")
    var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
    document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun) 

    Navigasi Menu ini juga sudah di modifikasi dengan efek Sliding dari kiri kekanan.
    Baca juga: Cara Membuat Efek Sliding Underline Menggunakan CSS 

    Masukkan kode CSS

    /* Start Navigasi */
    #cssmenu {background: #494949;width: auto;font-family: Arial, sans-serif;}
    #cssmenu ul {list-style: none;margin: 0;padding: 0;line-height: 1;display: block;}
    #cssmenu ul:after {content: ' ';display: block;font-size: 0;height: 0;clear: both;visibility: hidden;}
    #cssmenu ul li {float: left;display: block;padding: 0;}
    #cssmenu ul li a {color: #ffffff;text-decoration: none;display: block;padding: 17px 25px;font-weight: 700;font-size: 14px;position: relative;-webkit-transition: color .25s;-moz-transition: color .25s;-ms-transition: color .25s;-o-transition: color .25s;transition: color .25s;}
    #cssmenu ul li a:hover {color: #BEBEBE;}
    #cssmenu ul li a:hover:before {width: 100%;}
    #cssmenu ul li a:after {content: '';display: block;position: absolute;right: -3px;top: 17px;height: 6px;width: 6px;background: #171717;opacity: .5;}
    #cssmenu ul li a:before {content: '';display: block;position: absolute;left: 0;bottom: 0;height: 3px;width: 0;background: #E9E9E9;-webkit-transition: width .25s;-moz-transition: width .25s;-ms-transition: width .25s;-o-transition: width .25s;transition: width .25s;}
    #cssmenu ul li.last > a:after,#cssmenu ul li:last-child > a:after {display: none;}
    #cssmenu ul li.active a {color: #333333;}
    #cssmenu ul li.active a:before {width: 100%;}
    /* End Navigasi */

    Berikut kode HTML

    <div id='cssmenu'>
    <ul>
    <li><a href='index.html'><span>Daftar Isi</span></a></li>
    <li><a href='#'><span>About Me</span></a></li>
    <li><a href='#'><span>Product</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
    <li style='float: right;'><a><i class='icon-calendar'></i>
    <script type='text/javascript'>
    now = new Date();
    if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
    else (a=now.getTime());
    now.setTime(a);
    var tahun=now.getFullYear()
    var hari=now.getDay()
    var bulan=now.getMonth()
    var tanggal=now.getDate()
    var hariarray=new Array("Minggu,","Senin,","Selasa,","Rabu,","Kamis,","Jum'at,","Sabtu,")
    var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
    document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun)
      </script></a></li>
    </ul>
    </div> 

    Sebagai Demo
    Bila anda ingin memodifikasi dengan fontawsome, maka masukkan kode berikut diatas </head>

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet"/>

    Selipkan Icon-icon yang anda inginkan, Lihat pada Icon Font Awsome klik fortawesome.github.io . Sekian Tutorial kali ini, Selamat berkreasi dan otak-atik Blog. Keep Happy Blogging :)

    Kini teknologi Internet semakin maju, semua orang sudah banyak yang mengenal Blogger. Pembahasan kali ini mengenai cara membuat blog, mungkin nanti juga akan dibahas tutorial cara membuat template Blog.

    Platform paling populer untuk pembuatan blog gratisan adalah blogger. Untuk membuat blog anda diharuskan memiliki akun Gmail. Anda harus memiliki akun Gmail sebagai persyaratan untuk membuat blog menggunakan Blogger.

    Baca : Tips dan Cara membuat email baru di Google GMAIL

    Berikut Langkah-langkah membuat Blog dari Blogger

    • Kunjungi alamat blogger.com kemudian Log In
    • Jika akun Gmail anda belum pernah memiliki akses di blogger, maka akan muncul Halaman Ucapan Selamat Datang, kemudian Klik "Lanjutkan ke Blogger".
    • Anda masuk pada Halaman Dasbor.
    • Kemudian Klik "Buat baru"
    • Akan muncul 3 form, Silahkan mengisi :
      Cara Membuat Blog Blogger/Blogspot Terbaru
      Jika Seperti ini, tanda alamat blog sudah ada yang menggunakan. Silahkan membuat alamat blog yang lainnya.
    • Jika sudah selesai mengisi,
      Cara Membuat Blog Blogger/Blogspot Terbaru
      Jika seperti ini, tanda alamat bisa anda gunakan dan menjadi milik anda.
    • Klik Create Blog, dan Selesai.

    Bagaiman cara menerbitkan artikel ke blog

    • Pada halaman Dasbor, Klik "Entri Baru".
    • Mulailah menulis dengan Judul, dan Tulislah sesuka kalian.
    Cara Membuat Blog Blogger/Blogspot Terbaru
    •  Setelah selasai,klik Pertinjau. Untuk melakukan pertinjauan halaman blog anda sebelum dipublikasikan.
    • Terakhir, Klik Publish.
    Untuk melihat secara detail rangkaian permasalahan, silahkan anda masuk ke alamat Help-Google.

    Sekian tutorial kali ini, jika anda menemukan kesalahan silahkan hubungi admin untuk memperbaikinya. :)

      Tutorial dan Tips Membuat Akun Gmail BaruCara membuat akun gmail sangat mudah, dengan memiliki akun gmail anda bisa menggunakan
      semua layanan yang disediakan oleh google. Tidak hanya email saja, ada Google+, Youtube, Google Drive, dll. Dengan akun gmail, anda bisa membuat blog gratisan.

      Baca : Cara Membuat Blog Keren Blogger/Blogspot.

      Langkah-langkah membuat akun Gmail

      • Masuk ke alamat mail.google.com
      • Klik "Create an Account" pada layar Web
      • Mengisi form yang tersedia pada form pendaftaran gmail, dimulai dari nama sampai selesai.
      Yang terpenting adalah, Buatlah kata sandi yang aman. Cara membuat sandi/password yang kuat  dan aman :
      • Buat seunik mungkin, namun mudah diingat oleh anda. Kombinasikan angka, huruf kecil maupun kapital, dan beberapa simbol.
      • Usahakan sandi anda jangan sama dengan kata sandi pada alamat situs lainnya.
      • Jangan menggunakan kata sandi yang terlalu umum.
      • Usahakan jangan gunakan kata sandi yang berasal dari informasi tentang data pribadi, entah dari tanggal lahir atau nama tempat lahir, atau yang lainnya.
      • Minimal karakter kata sandi Ideal adalah 8 karakter.
      • Ubahlah kata sandi anda secara berkala, untuk antisipasi pihak yang ingin masuk tanpa sepengatahuan anda.
      • Agar memudahkan anda, simpan kode sandi anda di notepad untuk antisipasi lupa. Kemudian simpan dengan aman.
      Gunakan Verifikasi 2 Langkah, untuk apa? Gunanya untuk keamanan ekstra.  Cara kerjanya yaitu :
      • Anda masuk ke halaman akun gmail mengunakan nama pengguna dan kata sandi seperti biasa.
      • Kemudian Anda juga dimintai kode 6 Karakter yang berasal dari pesan SMS, panggilan suara, atau aplikasi seluler, kunci keamanan dengan port USB komputer (hanya pada browser Google Chrome). 
      Setelah selesai melakukan Verifikasi, mengedit profil akun gmail  anda dengan memasukkan sebuah foto. Next.

      Selesai. Akun Gmail anda inyaAllah sudah siap digunakan. Siap untuk membuat Blog gartisan dari Blogger.com. 

      Demikian Tips dari saya, kurang lebihnya mohon dimaafkan dan Terima Kasih. :)

      Judul Cara Menerapkan Efek Sliding Underline Pada Web/Blog kali ini adalah lanjutan daripada artikel yang
      telah saya buat sebelumnya yaitu Cara Membuat Efek Underline Menggunakan CSS.


      Untuk menjadikan efek underline berjalan maka kita memerlukan atribut class:"...". Saya akan mengambil contoh tutorial, Bagaimana Cara Memberikan Efek Uderline itu ke Judul Postingan yang ada di Homepage.

      Berikut Cara Membuat Efek Sliding pada Judul Post Homepage

      Saya mengambil contoh pada "Efek Garis dari kiri ke kanan.

      .kiri-kanan {
      text-decoration: none;
      display: inline-block;
      border-bottom: 3px solid transparent;
      width: 0px;
      transition: 0.5s ease;
      white-space: nowrap;
      height: 25px;
      }
      .kiri-kanan:hover {
      border-bottom: 3px solid #333;
      width: 200px;
      }

      Saya letakkan Atribut class pada bagian <h3 class='post-title entry-title kiri-kanan'>,

      <b:includable id='post' var='post'>
        <article class='post hentry'>
          <a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
            <h3 class='post-title entry-title kiri-kanan'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>...</b:includable>

      Contoh lain,...

      <span class="kiri-kanan"> Gue bukan ganteng-ganteng srigala</span> 

      Hasil Tulisan dengan Efek Sliding :
      Gue bukan ganteng-ganteng srigala

      Pada intinya, masukkan pada atribut class="...". Demikian Tutorial siang kali ini. Selamat Mencoba :)

      Cara membuat Efek Sliding Underline/Garis Bawah solid menggunakan costumasi CSS. Seperti yang saya pakai pada Judul Posting pada halaman Homepage. Dengan sedikit CSS, terlihat lebih menarik dan keren, betul gak. hehehe.

      Teknik juga ada pada bagian Menu Nav pada demo [emangbikingalau-banget.blogspot.com]. Jika tertarik download temanya, silahkan kunjung juga : Download CampBlog Template.

      Berikut kode-kode CSS yang bisa anda masukkan di atas  </styele> atau ]]></b:skin>

      Untuk Penerapannya Silahkan Baca artikel selanjutnya, Cara Menerapkan Efek Sliding Underline Pada Web/Blog.

      Efek Border dari Atas ke Bawah 

      /* Efek Border dari Atas ke Bawah*/
      .atas-bawah {
      display: inline-block;
      }
      .atas-bawah:after {
      content: '';
      display: block;
      height: 0;
      width: 100%;
      background: transparent;
      transition: height .5s ease, background-color .5s ease;
      }
      .atas-bawah:hover:after {
      height: 3px;
      background: #333;
      }
      Efek Border dari Bawah ke Atas 

      /* Efek Border dari Bawah ke Atas */
      .bawah-atas {
      display: inline-block;
      position: relative;
      }
      .bawah-atas:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      height: 0px;
      width: 100%;
      background: transparent;
      -webkit-transition: all ease 0.5s;
      -moz-transition: all ease 0.5s;
      transition: all ease 0.5s;
      }
      .bawah-atas:hover:after {
      height: 3px;
      background: #333;
      }
      Efek Border dari Kiri ke Kanan 

      /* Efek Border dari Kiri ke Kanan */
      .kiri-kanan {
      text-decoration: none;
      display: inline-block;
      border-bottom: 3px solid transparent;
      width: 0px;
      transition: 0.5s ease;
      white-space: nowrap;
      height: 25px;
      }
      .kiri-kanan:hover {
      border-bottom: 3px solid #333;
      width: 200px;
      }

      Atau dengan CSS

      /* Efek Border dari Kiri ke Kanan */
      .kiri-kanan {
      display: inline-block;
      }
      .kiri-kanan:after {
      content: '';
      display: block;
      height: 3px;
      width: 0;
      background: transparent;
      transition: width .5s ease, background-color .5s ease;
      }
      .kiri-kanan:hover:after {
      width: 100%;
      background: #333;
      }
      Efek Border dari Kanan ke Kiri 

      /* Efek Border dari Kanan ke Kiri*/
      .kanan-kiri {
      display: inline-block;
      position: relative;
      padding-bottom: 3px;
      }

      .kanan-kiri:after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      height: 3px;
      width: 0;
      background: transparent;
      transition: width .5s ease, background-color .5s ease;
      }

      .kanan-kiri:hover:after {
      width: 100%;
      background: #333;
      }
      Efek Border dari Tengah ke Luar 

      /* Efek Border dari Tengah ke Luar*/
      .tengah-keluar {
      display: inline-block;
      position: relative;
      padding-bottom: 3px;
      }
      .tengah-keluar:after {
      content: '';
      display: block;
      margin: auto;
      height: 3px;
      width: 0px;
      background: transparent;
      transition: width .5s ease, background-color .5s ease;
      }
      .tengah-keluar:hover:after {
      width: 100%;
      background: #333;
      }
      Efek Border dari Masuk Kemudian Keluar 

      /* Efek Border dari Masuk Kemudian Keluar*/
      .garis-masuk-keluar {
      display: inline-block;
      position: relative;
      padding-bottom: 3px;
      }
      .garis-masuk-keluar:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      width: 0;
      transition: width 0s ease, background .5s ease;
      }
      .garis-masuk-keluar:after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      height: 3px;
      width: 0;
      background: #333;
      transition: width .5s ease;
      }
      .garis-masuk-keluar:hover:before {
      width: 100%;
      background: #333;
      transition: width .5s ease;
      }
      .garis-masuk-keluar:hover:after {
      width: 100%;
      background: transparent;
      transition: all 0s ease;
      }
      Efek Border dari Muncul Kemudian Hilang 

      /* Efek Border dari Muncul Kemudian Hilang*/
      .garis-muncul-hilang {
      display: inline-block;
      position: relative;
      padding-bottom: 3px;
      }
      .garis-muncul-hilang:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      width: 100%;
      transition: width 0s ease;
      }
      .garis-muncul-hilang:after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      height: 3px;
      width: 100%;
      background: #333;
      transition: width .5s ease;
      }
      .garis-muncul-hilang:hover:before {
      width: 0%;
      background: #333;
      transition: width .5s ease;
      }
      .garis-muncul-hilang:hover:after {
      width: 0%;
      background: transparent;
      transition: width 0s ease;
      }
      Selamat Mencoba dan berkreasi, saya ambil dari bradsknutson.com/blog/css-sliding-underline/. Thank's...:)

      Masuk hari kedua tahun 2015, dengan keterbatasan ide saya akan menuliskan tutorial cara membuat garis border berupa zigzag. Sumber ini saya ambilkan dari bradsknutson.com. Penampakannya kawan bisa lihat pada bagian footer web ini. Saya menggunakan teknik CSS dan HTML.

      Cara Membuat Border Zigzag dengan CSS

      Bagi yang suka otak-atik CSS, mungkin ini sangat menyenangkan. Kita tidak lagi mendesain menggunakan garis solid horizontal saja, namun kita bisa menggunakan dengan garis zigzag. Mungkin ini terlihat lebih menyenangkan. Berikut tutorialnya:

      Kode CSS

      .border-zigzag {position: relative; width: 100%; min-height: 50px;margin-top:40px;}
      .border-zigzag:before { content: ""; display: block; position: absolute; top: -10px; width: 100%; height:10px;}
      .garis-border {background: #000;}
      .garis-border:before { background: linear-gradient( 45deg, transparent 33.333%, #000 33.333%, #000 66.667%,transparent 66.667% ),linear-gradient(-45deg, transparent 33.333%,#000 33.333%, #000 66.667%, transparent 66.667% );background-size: 20px 40px;}

      Kode HTML

      <div class ='garis-border border-zigzag'></div>  

      Keterangan :

      • Untuk mengatur Tinggi-rendahnya area ditengah-tengah garis anda hanya memodifakasi bagian min-height: 50px sesuai dengan keinginan anda.
      • Untuk bagian HTML, anda letakkan sesuai dengan keinginan anda. 
      • Jika anda ingin mencoba mengotak-atik, silahkan coba pada DEMO [Klik]
      Selamat berkreasi dan mencoba.