Home Archives for January 2016

Cara Mendaftarkan Blog ke Bing dan Yahoo Webmaster

Posted by Desain Kode Sunday, January 24, 2016 0 comments
Cara Mendaftarkan Blog ke Bing Webmaster - Sama halnya seperti Google, Bing dan Yahoo juga merupakan search engine terbesar setelah Google. Perlu diketahui, beberapa tahun yang lalu Yahoo menutup layanan webmasternya dan bergabung dengan Bing Webmaster. Jadi nantinya, ketika mendaftarkan blog ke Webmaster Bing, secara otomatis juga akan terdaftar di mesin pencari yahoo.
mendaftarkan blog dan artikel ke bing webmaster tools

Baca juga : Cara Mendaftarkan Blog ke Google Webmaster

Bing yang dulunya dikenal dengan Live Search dan MSN, disebut-sebut akan menjadi pesaing berat dari google, dimana penggunanya semakin hari semakin meningkat. Bukan tidak mungkin, Bisa saja Bing yang di bentuk pada tahun 2009 lalu akan menyalip kepopuleran Google jika terus membuat terobosan baru yang tidak dimiliki oleh google. Tapi saya rasa, google yang sudah mendunia ini juga tidak ingin di kalah bersaing oleh Bing dan Yahoo. Kalau bicara statistik Alexa, secara global Bing lebih populer daripada Google, tapi untuk wilayah Indonesia, Google masih menang jauh dari Bing.
perbedaan statistik bing dan google

Membuat Email dan Mendaftarkan Blog ke Bing Webmaster

Setelah mengukuti tutorial ini hingga akhir, anda juga nantinya akan memiliki email baru dari microsoft, karena memiliki akun atau email microsoft memang syarat untuk mendaftarkan blog ke Bing Webmaster. Tenang saja, semuanya layanan tersebut bisa kita miliki secara gratis.

Membuat Akun Microsoft

Kalau google mempunyai gmail.com, microsoft punya outlock.com dan hotmail.com. Berikut langkah-langkah untuk mendaftarkan email baru ke microsoft.
1. Buka Microsoft Sign-up

2. Isi dengan lengkap data-data diri anda. Lalu klik Create Acount pada bagian bawah halaman
mendaftarkan akun baru microsoft

3. Selesai. Anda telah mempunyai alamat email baru.
4. Silahkan masukkan alamat email tersebut ke bagian footer blog DesainKode jika ingin berlangganan artikel blog ini secara gratis.

Mendaftarkan Blog dan Mengirim Sitemap ke Bing Webmaster

Setelah memiliki akun dan email microsoft, anda siap untuk mendaftarkan blog ke Bing webmaster. Sebenarnya bisa jika hanya ingin mendaftarkan blog (submit) saja tanpa harus mendaftarkan ke Bing Webmaster, tapi sebaiknya langsung saja mendaftarkan dengan akun Webmasternya untuk mendapatkan layanan yang lebih banyak seperti halnya Google Webmaster Tools. Ikuti langkah-langkah berikut :

1. Buka Add URL Bing
2. Isi URL blog di kotak seperti pada gambar dibawah, lalu klik Submit. Sampai pada tahap ini, URL blog/web anda telah terdaftar di Bing dan Yahoo Search.
3. Selanjutnya akan ada 3 pilihan. Pilih saja yang pertama untuk melanjutkan mendaftarkan Sitemap Blog.

  • Pilihan pertama untuk melanjutkan pendaftaran ke Bing Webmaster, (recomended)
  • Pilihan kedua untuk mengetahui lebih lanjut tentang Bing Webmaster dan 
  • Pilihan ketiga cukup mendaftarkan url blog saja tanpa harus mendaftarkan akun webmaster Bing.

4. Isikan dengan lengkap data diri, data blog dan preferensi kontak. Tambahkan "sitemap.xml" setelah URL blog pada kotak Add a Sitemap (lihat gambar dibawah).

5. Klik Save pada bagian bawah halaman.
6. Selanjutnya akan di alihkan ke halaman verifikasi. Ada 3 pilihan cara yang disediakan. Untuk lebih mudahnya, gunakan Pilihan (option) 2.
Copy Kode HTML dari kotak seperti gambar dibawah.
submit sitemap to bing webmaster

7. Buka Blogger Menu Template Edit HTML
8. Paste kode HTML tadi dibawah kode <head>  lalu Save Template.
Baca juga : Cara mengedit template blog dengan mudah

9. Jika sudah, kembali ke halaman verifikasi tadi lalu klik VERIFY (dibagain kiri bawah halaman)
10. Selesai

Sama halnya seperti Google, Bing  juga menyadiakan banyak layanan gratis di tool webmasternya untuk mengelola dan memonitoring situs anda di search bing dan yahoo. Beberapa diantaranya adalah Submit sitemap dan Fetch as Bingbot untuk mendaftarkan artikel agar cepat terindeks oleh Bing dan Yahoo search. Karena pada saat mendaftar bing tadi, kita sudah sekalian mendaftarkan artikel lewat sitemap blog, maka cara lain yang perlu dilakukan lagi adalah lewat menu Fetch as Bingbot

Menggunakan Fitur Fetch as Bingbot di Bing Webmaster

Kalau Google punya Fetch as Google, Bing juga punya Fetch as Bingbot. Fungsi dan tujuan penggunaannya sama yaitu agar Bing cepat mengenali dan mengindeks halaman konten/artikel yang baru dibuat. Berikut langkah mendaftarkan artikel melalui fitur fetch as Bingbot.
1. Buka Menu Diagnostics & Tools Fetch as Bingbot
2. Masukkan URL artikel dengan lengkap lalu klik FETCH (lihat seperti gambar dibawah)
fetch as bingbot bing webmaster

Bisa terlihat pada gambar diatas, masih banyak menu-menu dan layanan gratis yang bisa kita gunakan. Saya tidak memaparkannya di sini, tapi anda bisa mencoba semuanya. Penting untuk diketahui, mendaftarkan blog ke bing dan yahoo belum menjamin secara langsung halaman blog atau artikel akan berada di posisi teratas SERP. Sama halnya dengan goolge, Bing dan Yahoo juga mempunyai pertimbangan dan algoritma khusus untuk mengatur posisi artikel yang dicari dengan kata kunci tertentu. Baca artikel Cara Membuat Artikel SEO , agar bisa bersaing dengan artikel lain di Bing dan Yahoo search.

Sekian artikel tentang cara mendaftarkan blog ke bing dan yahoo. Tetap ikuti perkembangan blog DesainKode. Jika ingin berlangganan artikel secara gratis, silahkan mendaftarkan alamat email anda pada bagian footer halaman ini.
Categories: ,

5 Rahasia Master SEO dalam Membuat Artikel

Posted by Desain Kode Friday, January 22, 2016 2 comments
Menulis Artikel juga ada Rahasianya?
Yaa.. itu yang menjadikan beberapa ahli seo di dunia seperti Brian Dean dan Neil Patel sukses mendatangkan puluhan ribu pengunjung ke website mereka.
Artikel atau Konten berkualitas tidak dapat dibuat hanya dalam hitungan menit, bahkan hitungan jam sekalipun. Dengan kata lain, hal ini berhubungan dengan Peningkatkan Kualitas, bukan kuantitas.
Butuh kerja keras untuk menciptakan sebuah artikel yang hebat, kecuali anda memang seorang penulis hebat, mungkin embuatnya bisa hanya dalam hitungan jam saja.
rahasia master seo membuat artikel

Sebenarnya untuk membuat sebuah artikel atau konten dengan kualitas tinggi itu mudah, Jikaa... Anda benar-benar mengetahui caranya. Perlu ada pedoman khusus untuk bisa menuntun kita dalam membuat sebuah artikel berbobot.
Apa saja ciri dari artikel berbobot dan berkualitas tinggi? berikut ciri-cirinya :
  • Asli hasil karya sendiri, Bukan Hasil COPAS
  • Bernilai dan Bermanfaat bagi pembaca
  • Jelas dan Mudah Dipahami
  • Dapat dijadikan bahan Referensi
  • Ditulis secara Sistematis

Teknik dan Rahasia yang dipakai oleh pakar SEO dunia dalam menulis Artikel.

Hari ini, saya akan memaparkan teknik dan rahasia tersebut. Rahasia-rahasia ini akan disajikan dan dipaparkan disini dalam 5 tahap :

Tahap 1 : Mencari Ide

Mencari ide Artikel harus sesuai dengan Topik dan Niche Blog. Contoh, kalau blog anda seputar SEO, tulislah yang berkaitan dengan SEO. kalau tentang otomotif, buat artikel sehubungan dengan teknik mobil, motor dan sebagainya. Kalau seputar musik, yaa.. tulis artikel seputar seni musik juga.
Perhatikan hal-hal berikut. Ini bisa dijadikan panduan dalam mencari ide untuk sebuah artikel :
  1. Mencari yang dibutuhkan orang saat ini. Misalnya, pada era teknologi yang telah berkembang ini, ada banyak jenis gadget namun minus trik dan tutorialnya. Ini bisa dijadikan ide dalam membuat artikel.
  2. Mencari Artikel jadul dan memperbaharuinya. Biasanya trik ini lebih cocok ke blog-blog panduan atau tutorial.
  3. Mencari ide dari pertanyaan-pertanyaan d blog lain, forum-forum atau bisa juga dari koran dan membuat artikel yang bisa menjawabnya. Jadi, rajinlah mengunjungi blog lain (blogwalking) yang punya topik/niche sama dengan blog anda. 
  4. Mencari ide dari pengalaman pribadi atau dari pengalaman orang lain.
  5. Mencari yang sedang trend di waktu itu. Kalau yang satu ini ada kekurangannya, artikel dari ide tersebut hanya akan trend di waktu itu juga.
Note : Jangan sekali-kali mencari ide yang anda tidak pahami sama sekali. Kedepannya bisa saja berdampak anda akan melakukan copy paste saja jika tidak mengetahui apa lagi yang akan anda tulis.

Tahap 2 : Mencari Bahan Artikel

Cari dan kumpulkan beberapa artikel yang hampir mirip dengan ide yang sudah anda tentukan tersebut lalu tingkatkan isinya. Kumpulkan minimal 5 artikel terbaik, tapi semakin banyak juga semakin baik. Sumbernya bisa dari mana saja. Kalau punya isi artikel sendiri, justru lebih bagus. yang jelasnya berisi fakta dan sudah di buktikan sendiri.
Ini beberapa situs yang bisa digunakan dalam mencari bahan artikel :

Tahap 3 : Tulis Garis Besarnya dan Tingkatkan

Ketika sudah menemukan sejumlah artikel, tulis kelebihan dan kelemahan dari setiap artikelnya. Buat poin-poin penting, gabungkan dan buat lebih lengkap. Tentunya anda sudah bisa membayangkan apa yang akan di bahas dari semua poin tersebut.

Dalam tahap ini, anda juga perlu mempelajari Karakter Google dan Manusia ketika menulis artikel.
Ada 2 hal yang berkaitan langsung dengan artikel yaitu Google dan Manusia.
Sebelum menemui pembaca, artikel sebelumnya akan bertemu mesin pencari seperti google dan yahoo. Tapi beda halnya kalau artikel tesebut langsung di share di media sosial. Jadi, perlu dipelajari juga karater google dan manusia pada umumnya serta konten seperti apa yang diinginkannya.
Nah, Konten Berkualitas menurut Google itu seperti apa?
Ini kenyataannya, Konten yang berkualitas dan berbobot menurut Google dan Search Engine lainnya mencakup hal-hal berikut :
  1. Bukan Copy paste, Hanya ada satu-satunya di google. Perlu diketahui bahwa google sangat menyukai artikel yang unik.
  2. Memiliki Bounce Rate yang Rendah. Bounce rate adalah persentase nilai jumlah pengunjung yang langsung meninggalkan blog anda setelah salah satu dari halaman dibuka. Semakin kecil nilai Bounce Rate artinya semakin baik blog tersebut.
    Begini ilustrasinya : saat anda mencari artikel dengan kata kunci tertentu, google akan menampilkan semua artikel terbaik berdasarkan hasil penilaian dari beberapa bagian. Salah satu bagiannya adalah seberapa lama anda berada pada halaman tersebut. semakin lama anda berada pada sebuah halaman, maka google akan berpikir : "sepertinya halaman ini sangat disukai orang, mungkin saya harus meletakaannya di posisi pertama"   
  3. Punya Klik yang Tinggi. Klik tersebut bisa berasal dari Search Engine dan dari Media Sosial tentunya. Sama seperti hal diatas, google juga akan mempertimbangkan sebuah halaman jika diakses dari berbagai media sosial yang ada.

Berikut ini adalah konten berkualitas menurut manusia :
  1. Mengacu ke Fakta (Bukan Hoax). Bangun kepercayaan pembaca dan pengunjung blog dengan memberikan Artikel yang memang terpercaya sumbernya. Lebih baik lagi kalau anda bisa membuktikannya sendiri.
  2. Ada Nilai Positif yang diambil setelah membacanya. Semakin bermanfaat Artikel di Blog anda, semakin menambah kepercayaan orang yang mengunjunginya.
  3. Bisa Menjawab apa yang mereka cari. Ingat, jangan setengah-setengah dalam menulis konten. Bagikan semua apa yang anda tahu dalam artikel tersebut.
  4. Tidak Basa Basi. Banyak artikel murahan yang selalu mengulang dan menumpuk kata kunci sama terus menerus. Meskipun terlihat panjang, tapi artikel tersebut sudah tidak berbobot.

Tahap 4 : Memperhatikan SEO Artikel. 

Artikel anda sudah jadi? Perhatikan dan periksa bagian SEO-nya. Optimasi Artikel menjadi SEO friendly disini bertujuan agar google dapat dengan mudah mengenali sebuah halaman artikel yang anda buat. Jadi perlu ada bagian-bagian khusus dalam artikel yang harus memenuhi kriteria mesin pencari Google untuk dapat di indeks dengan cepat. Baca OPTIMASI SEO ARTIKEL : 9 BAGIAN PENTING DALAM ARTIKEL ini secara rinci.

Tahap 5 : Cari Pembaca yang Tepat

Tahap ini adalah tahap penting ketika telah membuat artikel yaitu mencari Audiens, bukan menulis artikel baru lagi. Konten berkualitas tinggi tentu tidak ada apa-apanya kalau tidak ada yang membacanya.
Lantas apa yang harus dilakukan untuk mencari pembaca dan pengunjung artikel tersebut? Betul. Anda harus membagikannya. Membagikannya juga tidak sembarang, Harus tepat sasaran. Jangan membagikan artikel "Cara membuat kue bolu" ke orang yang tidak suka memasak, akan terlihat sia sia saja. Sambil membagikan artikel anda, jalinlah hubungan baik dengan semua orang.
Ini yang bisa anda lakukan saat akan membagikan artikel anda :
  1. Kunjungi Forum-forum dan Bagikan ke mereka. Bergabunglah ke forum-forum besar seperti KasKus. Cari Subforum yang berkaitan dengan niche blog anda dan mulailah berdiskusi dengan member yang lain. Agar tidak dikatakan nge-spam, jangan langsung menaruh link artikel anda sana sini. Aktiflah berdiskusi terlebih dahulu dan bantu member lain menyelesaikan masalah. Setelah mendapatkan sedikit kepercayaan dari member lain, anda bisa menghubung-hubungkan pembahasan dengan menaruh link artikel anda.
  2. Bagikan ke Media Sosial seperti Facebook, Twitter dan Google+. Cari Grup dan Komunitas di Facebook dan Google+ yang relevan.
  3. Email? Ini yang dilakukan Brian Dean. Dalam artikelnya tentang Teknik Skyscraper, Brian mengirim email ke 160 orang yang mengelola situs dengan niche sama dengan yang dimilikinya. Selain mencari pembaca, Brian juga mencari backlink untuk artikelnya. Dan apa hasilnya? dari 160, ada 17 orang yang menautkan kontennya. Bayangkan? mencari 1 backlink saja sangat susah,tapi dengan menggunakan teknik email ini, anda mungkin bisa mendapatkan yang lebih.

Ke-5 hal diatas dapat anda jadikan pedoman ketika akan mempublikasikan sebuah artikel. Saya berharap strategi ini bisa membantu anda mengembangkan konten dan artikel dalam blog anda. Ingat, butuh usaha yang keras untuk menciptakan Web/blog yang bernilai tinggi.
Sekian pemaparan tentang rahasia master SEO dalam membuat artikel. tetap ikuti perkembangan blog desainkode. Jangan lupa subscribe artikel terbaru dibagian footer.
Categories:

Memasang Tombol Back To Top Smooth Scroll jQuery

Posted by Desain Kode Wednesday, January 20, 2016 0 comments
Kalau mencari di google, ada banyak yang sudah membuat tutorial cara Memasang Tombol Back To Top ini. Semua yang ditawarka memiliki fungsi yang sama, hanya beda di cara kerjanya saja. Pada kesempatan ini, saya akan memaparkan tutorial Back To Top dengan efek smooth and soft scrool (halus). Menurut saya efek ini lebih baik dari yang lainnya, karena lebih simpel tidak menggunakan gambar melainkan menggunakan jenis font awesome. Jadi, bagi mereka yang memang dari dulu sudah menggunakan font awesome, akan lebih baik jika sekalian menggunakannya di Tombol ini agar tidak perlu memberatkan blog lagi dengan memasang gambar sebagai tombolnya.

Membuat tombol back top top smooth scroll jquery


Tentunya semua sudah tahu tujuan dari pemasangan tombol ini yaitu agar pengunjung tidak perlu repot memutar roda tengah mouse atau mengusap jari mereka di touch pad dan smartphone lagi saat ingin kembali bagian atas sebuah halaman blog/web. Semuanya bisa dilakukan hanya dengan sekali klik pada tombol ini. Klik Tombol di bawah untuk melihat demonya terlebih dahulu.

DEMO

Memasang Tombol Back To Top

Berikut ini langkah-langkah pemasangannya :

1. Buka menu Template Edit HTML
2. Seperi biasa, simpan kode CSS ini diatas ]]></b:skin>
/* Back To Top */
#back-to-top{visibility:hidden;background-color:#4c4c4c;color:#fff;width:42px;height:42px;text-align:center;line-height:42px;position:fixed;bottom:20px;right:20px;z-index:90;cursor:pointer;opacity:0;border-radius:3px;-webkit-transform:translateZ(0);transition:all .4s}
#back-to-top .fa{font-size:22px;}
#back-to-top:hover{background-color:#46a3fa;color:#fff;opacity:1;}
#back-to-top.show{visibility:visible;opacity:1;}
Note : Ganti kode pada bagian yang berwarna kuning dengan kode warna yang diinginkan.

3. Simpan kode jQuery berikut diatas </body>
<script type='text/javascript'>
//Back To Top jQuery
if ($('#back-to-top').length) {
    var scrollTrigger = 200, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}
</script>
Berikut ini penjelasan angka yang ada di dalam jQuery :
200 = Jarak dari atas saat tombol muncul(dalam pixel)
0 = Posisi akhir dari atas saat akan back to top/kembali(dalam pixel)
700 = kecepatan kembali ke atas (dalam milisecond)

4. Letakkan kode HTML berikut juga diatas </body>
<a href="#" id="back-to-top" title="Back to top"><i class='fa fa-chevron-up'></i></a>

5. Karena tombol ini menggunakan Font Awesome, jadi perlu CSS exernal resourcenya. Agar lebih rapi, simpan kode CSS dan jQuery berikut di atas </head> 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Note : Kalo di template anda sudah ada CSS Font Awesome dan jQuery terbaru, abaikan langkah ini.

6. Save dan Lihat Hasilnya

Sekian tutorial untuk membuat Tombol kembali ke atas (Back To Top). Semoga Bermanfaat.
Categories:

Cara Mendaftarkan Blog ke Google Webmaster

Posted by Desain Kode Monday, January 18, 2016 2 comments
Cara Mendaftarkan Blog ke Google Webmaster - Kita semua tahu bahwa Google merupakan salah satu mesin pencari terbesar pertama disusul oleh yahoo, bing, ask.com, CNN dan aolsearch.com. Meskipun Yahoo dan Bing bersatu, Google tetap mendominasi posisi teratas paling sering digunakan orang untuk mencari konten/web/halaman atau hal apapun yang berkaitan dengan internet. Menurut data statistik, lebih dari 50% pengguna internet menggunakan Google sebagai partner dalam berselancar di dunia maya. Perusahaan yang didirikan pada 7 september 1988 ini telah mengalami perkembangan pesat hingga saat ini dengan memberikan berbagai macam karya dan inovasi baru dalam perkembangan dunia internet.
mendaftarkan blog dan artikel ke google webmaster tools

Salah satu inovasi Google guna mendukung hal terkait Web dan Blog adalah Google Webmaster Tools. Tools ini merupakan salah satu dari banyak tools optimasi SEO yang selalu digunakan oleh ahli-ahli SEO dunia. Tapi tenang saja, bukan cuma pakar SEO, tools ini bisa digunakan oleh siappun secara gratis. Layanan ini sebenarnya dibentuk bagi mereka para pemilik situs (webmaster) dalam mengelola, mengecek, memperoleh informasi dan mengoptimalkan Web/blog mereka di hasil pencarian halaman SERP Google (Search Engine Result Page).

Menggunakan Tools ini sama saja dengan mendaftarkan Blog ke Google. Tapi tidak hanya itu, masih banyak layanan gratis lainnya yang didapat saat mendaftarkan blog ke google webmaster tools. Namun, sebelum mengetahui lebih jauh tentang layanan lain yang diberikan, ada baiknya mengetahui cara mendaftarkan ke layanan tersebut. Jangan tunda lagi, kalau situs web/blog anda belum terdaftar, segeralah mendaftarkannya.

Saya sering bertemu komentar-komentar di blog dan web lain, ada beberapa orang selalu mempertanyakan penyebab situs mereka lama bahkan tidak berada di pencarian google atau penyebab situs mereka masih sepi pengunjung. Jawabannya jelas, karena belum mendaftarkan blognya ke Google. Pernah juga saya bertemu Blog yang menurut saya sangat bermanfaat dan memiliki segudang ilmu, tapi sayangnya, posisinya di Google belum optimal. Hal ini bisa saja disebabkan mungkin karena adanya beberapa masalah dalam blog tersebut tapi pemilik situsnya tidak mengetahuinya dan tidak memeriksanya di layanan ini. Jadi, mendaftarkan blog ke Google Webmaster Tools sangat penting untuk dilakukan.

Langkah-langkah Mendaftarkan Blog ke Google

Setelah membuat blog dan menulis artikel, wajib untuk mendaftarkan blog ke Google Webmaster Tools. Berikut panduannya :

1. Buka Google Webmaster Tools
2. Masukkan URL Situs Web/Blog dalam kotak pada halaman tersebut, lalu klik ADD PROPERTY (seperti gambar dibawah)
mendaftarkan url blog ke google webmaster tools

3. Anda akan dialihkan ke halaman Verifikasi. Verifikasi ini bertujuan agar google tahu kalau abda tadi yang mendaftarkan blog tersebut (milik kepunyaan anda). Banyak cara bisa digunakan untuk memverifikasi blog/web yang sudah di daftarkan sebelumnya. Untuk lebih mudah, gunakan verifikasi Metode HTML Tag
Pilih tab Alternate Methods klik option HTML Tag. Sesuai petunjuknya, Copy Kode HTML dalam kotak seperti gambar dibawah.
verifikasi meta tag google webmaster
Note : Jangan tutup halaman dan jangan klik verify dulu

4. Buka Blogger Menu Template Edit HTML
5. Paste kode HTML tadi dibawah kode <head>  lalu Save Template.
Baca juga : Cara mengedit template blog dengan mudah

6. Jika sudah Save, Kembali ke halaman verifikasi tadi lalu klik VERIFY
7. Selesai. Anda telah berhasil mendaftarkan blog ke google.
sukses mendaftarkan blog ke google webmaster

Cukup mudah bukan? Setelah sukses mendaftarkan blog ke google, klik Continue untuk masuk ke halaman utama Webmaster Tools. Ada banyak pilihan menu di sebelah kiri halaman, menu-menu tersebut akan digunakan setiap saat untuk memonitoring keadaan blog di Google. Terkait dengan mendaftarkan Blog ke Google Webmaster Tools, ada beberapa menu yang digunakan untuk mengirim isi (Artikel/Konten) dari halaman blog kita diantaranya mengirim lewat menu Sitemap dan lewat menu Fetch as Google.

Mengirim Sitemap Blog ke Google Webmaster

Tidak cukup jika hanya mendaftarkan blog ke google webmaster. Langkah selanjutnya adalah mengirim (submit) Sitemap/Peta Situs ke layanan tersebut, agar seluruh isi konten dalam blog, cepat dikenali dan di indeks oleh google. Dengan begitu, artikel bisa cepat berada di halaman pencarian (SERP) google dengan kata kunci tertentu. Pelajari juga cara membuat artikel SEO agar dapat bersaing dengan artikel lain di halaman pertama Google. Sebaiknya utamakan menulis artikel berkualitas terlebih dahulu sebelum mendaftarkannya ke Google. Berikut langkah-lagkah mengirimkan sitemap ke Google Webmaster Tools:

1. Pada menu sebelah kiri, klik Menu Crawl Sitemap
mengirim sitemap blog ke google webmaster tools

2. Pada bagian kanan halaman, temukan dan klik Tombol ADD/TEST SITEMAP
3. Isi "sitemap.xml" pada kotak seperti gambar dibawah.
submit sitemap xml blog

4. Sitemap submitted. Silahkan Refresh Halaman, untuk melihat jumlah halaman web/blog yang anda kirim untuk di indeks ke Google.

Menggunakan Fitur Fetch as Google di Google Webmaster

Tujuan dari penggunaan fitur Fetch as Google ini adalah agar Google cepat mengenali dan mengindeks halaman konten yang baru saja selesai dibuat. Fetch as Google juga biasanya digunakan untuk mendaftarkan kembali artikel setelah diedit. Berikut langkah-langkahnya :

1. Pada menu sebelah kiri, klik Menu Crawl Fetch as Google
mendaftarkan artikel ke google webmaster tools

2. Masukkan URL artikel anda baru anda (tanpa url homepage), lihat seperti gambar dibawah.
mengirim artikel baru ke google webmaster tools

  • Pada dropdown option, pilih Desktop
  • Pilih "Fetch and Render" jika baru mendaftarkan artikel untuk pertama kali
  • Pilih "Fetch" jika artikel sudah pernah didaftarkan, artinya anda mendaftarkan ulang artikel tersebut, entah karena telah di edit ataupun karena telah mengganti template blog.

3. Tunggu beberapa detik hingga loading pending selesai, lalu klik submit to index Go
4. Selesai. Anda sudah berhasil mendaftarkan artikel ke Google.

Mengecek Blog dan Artikel yang sudah didaftarkan

Setelah mendaftarkan halaman blog dan artikel, kita tentunya ingin memastikan apakah blog yang kita daftarkan tersebut sudah berada di halaman SERP google. Cara untuk mengeceknya sangat mudah:
  • Buka google.com
  • Ketik "site:namabloganda.blogspot.co.id" di kotak pencarian google.
    Contoh : jika ingin melihat halaman apa saja pada Blog DesainKode yang telah terindeks oleh google ketik saja site:desainkode.blogspot.co.id di kotak pencarian google.

Perlu diketahui, mendaftarkan blog ke google webmaster tools tidak secara instan akan memberikan posisi halaman pertama pencarian google untuk kata kunci tertentu. Panduan diatas hanya untuk mendaftarkan blog dan artikel saja di Search engine Google. Untuk membuatnya berada di halaman pertama SERP google, masih banyak pertimbangan yang di lakukan oleh google seperti, kekuatan SEO onpage halaman tersebut, backlink berkualitas yang mengarah ke halaman tersebut, tingkat bounce rate dan masih banyak lagi.

Sekian artikel tentang cara mendaftarkan blog ke google webmaster tools. Jangan lupa masukkan alamat email anda di bagian footer jika ingin berlangganan artikel blog DesainKode secara gratis.
Categories: ,

Share Jejaring Sosial jQuery saat Klik Kanan

Posted by Desain Kode Sunday, January 17, 2016 1 comments
membuat sharing media sosial saat klik kanan

Kembali lagi dengan tutorial Share Jejaring Sosial, kali ini saya akan membagikan cara membuat widget share media sosial saat blog di klik kanan (right click). Memang ada kekurangan dari widget ini tak lain yaitu mematikan semua fungsi dari klik kanan. Tapi hal itu tidak akan jadi masalah besar bagi pengunjung blog anda yang sudah lama berselancar di dunia maya, karena semua fungsi/menu yang ada pada klik kanan tersebut mempunyai tombol shorcut keyboard masing-masing

Fungsi-fungsi klik kanan yang sering dipakai seperti :
  • Copy, Paste dan Cut bisa diganti dengan menekan Ctrl+C, Ctrl+V dan Ctrl+X pada keyboard
  • Open Link New Tab bisa diganti dengan menekan Roda Mouse atau menekan Ctrl + Click kiri pada link
  • Refresh atau Muat Ulang bisa diganti dengan Menekan Ctrl+R atau F5 pada keyboard
  • Inspeksi Halaman bisa diganti Ctrl+Shift+I
  • dll.

Coba Juga : Costum Tombol Share Rotasi Melayang CSS dan jQuery

Sebelum membuatnya, Gunakan JSFIDDLE, Editkode-Live atau yang sejenisnya untuk mengetesnya terlebih dahulu. Silahkan tekan tombol di bawah untuk melihat demonya.

DEMO

Membuat Menu Share Jejaring Sosial jQuery saat Klik Kanan

Berikut ini Langkah-langkah pembuatannya :

1. Buka Menu Template Edit HTML

2. Taruh kode CSS ini diatas ]]></b:skin> 
.context {
display:none;
font-size: 1.1em;
position: absolute;
width: 200px;
height: auto;
padding: 5px 0px;
border-radius: 5px;
top: 10;
left: 10;
background-color: #27ae60;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
color: #fff;
}
.context .context_item {
height: 32px;
line-height: 32px;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.context .context_item:hover { background-color: #2ecc71; }
.context .context_item .inner_item { margin: 0px 10px; }
.context .context_item .inner_item i {
width:20px;
margin: 0 5px;
font-weight: bold;
}
Note : Ganti bagian yang berwarna kuning dengan kode warna yang diinginkan.

3. Simpan kode HTML berikut di atas </body>
<div class="context">
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;https://plus.google.com/share?url=&apos; + encodeURIComponent(document.URL)); return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'></i> Google Plus</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;https://www.facebook.com/sharer/sharer.php?u=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Facebook'><i class='fa fa-facebook'></i> Facebook</div></div>
<div class="context_item"><div class="inner_item" 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' title='Tweet'><i class='fa fa-twitter'></i> Twitter</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://www.tumblr.com/share?v=3=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Post to Tumblr'><i class='fa fa-tumblr'></i> Tumblr</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://www.reddit.com/submit?url=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Submit to Reddit'><i class='fa fa-reddit'></i> Reddit</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://pinterest.com/pin/create/button/?url=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Pin it'><i class='fa fa-pinterest'></i> Pinterest</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://www.linkedin.com/shareArticle?mini=true=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Share on LinkedIn'><i class='fa fa-linkedin'></i> Linkedin</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;https://getpocket.com/save?url=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Add to Pocket'><i class='fa fa-get-pocket'></i> Getpocket</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://wordpress.com/press-this.php?u=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Publish on WordPress'><i class='fa fa-wordpress'></i> Wordpress</div></div>
</div>

3. Simpan kode jQuery berikut di atas </head>
<script type="text/javascript">
//Share Klik Kanan jQuery
$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $(".context")
        .show()
        .css({top: event.pageY + 15, left: event.pageX + 10});
});
$(document).click(function() {
  isHovered = $(".context").is(":hover");
  if (isHovered == true) {
    //nothing
  } else {
    $(".context").fadeOut("fast");
  }
});
</script>

4. Simpan External Resource Font Awesme dan jQuery di atas </head> (abaikan jika sudah ada CSS Font Awesome dan jQuery terbaru di template anda)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

5. Save dan lihat hasilnya.

Sekian tutorial cara membuat Share Media/Jejaring Sosial Klik Kanan ini. Sebenarnya masih banyak yang bisa aplikasikan pada konteks menu ini, seperti halnya jika hanya ingin memodifikasi tampilannya saja atau mengganti menu-menunya. Tunggu saja di artikel selanjutnya. Untuk berlangganan secara gratis, silahkan masukkan alamat email anda di bagian footer blog DesainKode ini.
Categories: ,

Membuat Judul pada Tag Pre Code

Posted by Desain Kode Thursday, January 14, 2016 2 comments
Kembali lagi dengan tutorial yang berkaitan dengan Tag PRE untuk blog-blog jenis tutorial, kali ini saya akan membagikan cara untuk membuat Judul pada Tag Pre. Selain memberikan warna pada isi tulisan (kode) dalam Tag Pre, memberikan judul diatasnya akan menjadikannya lebih terlihat menarik dan lebih profesional. Tidak hanya penambahan nama judul, dalam tutorial ini juga akan dibagikan cara mengganti warna background pada judul tersebut berwarna secara otomatis sesuai dengan judul tag pre-nya. Untuk demonya, silahkan lihat di blog Desain Kode ini.
membuat judul pada tag pre code

Membuat Judul/Nama Kode pada Tag Pre

Berikut ini Langkah-langkah penerapannya :
1. Buka menu Template Edit HTML

2. Simpan kode Berikut diatas kode ]]><b:skin>
/* JUDUL TAG PRE */
pre[codetype]:before {
content: attr(codetype);
display: block;
margin-top: 5px;
margin-bottom: -5px;
padding: 7px 15px;
font-family: georgia,Sans-serif;
font-size: 13px;
text-transform: uppercase;
color: #E2E2E2;
}
pre[codetype="CSS"]:before{background-color:#c0392b}
pre[codetype="CSS"] code{border-left: 5px solid #c0392b;}
pre[codetype="HTML"]:before{background-color:#d35400}
pre[codetype="HTML"] code{border-left: 5px solid #d35400;}
pre[codetype="JavaScript"]:before{background-color:#2980b9}
pre[codetype="JavaScript"] code{border-left: 5px solid #2980b9;}
pre[codetype="JQuery"]:before{background-color:#16a085}
pre[codetype="JQuery"] code{border-left: 5px solid #16a085;}
}

Note : Edit sesuai dengan keinginan.

3. Save.

Cara Pemakaiannya:

Tambahkan codetype="JENIS_KODE" dalam pre saat menuliskan kode dalam postingan (Mode HTML). Lihat contoh ini :
<pre codetype="CSS"><code> ------- </code></pre> /* Untuk Kode CSS */
<pre codetype="HTML"><code> ------- </code></pre> /* Untuk Kode HTML */
<pre codetype="JavaScript"><code> ------- </code></pre> /* Untuk Kode JS */
<pre codetype="JQuery"><code> ------- </code></pre> /* Untuk Kode JQuery */

Hanya ada 4 tipe Code yang ada diatas yang paling sering digunakan oleh kebanyakan blogger tutorial. Silahkan ditambahkan jika ingin memakai kode yang lain. Mau hasil yang lebih maksimal dan menarik untuk Tag Pre? Gunakan juga Syntax Highlighter (Mewarnai tulisan dalam Tag Pre Code). Baca artikel tentang Cara Membuat Kode Berwarna pada Tag Pre .

Sekian tutorial singkat mengenai cara penambahan Judul pada Tag Pre. Saya rasa tutorial diatas sudah jelas, namun jika ada hal yang ingin ditanyakan, silahkan berkomentar di bawah. Jika berlangganan artikel DesainKode secara Gratis, isi alamat email anda pada footer blog ini.
Categories:

Cara Membuat Kode Berwarna dalam Tag Pre - Syntax Highlighter

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

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

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

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