Posts

Showing posts from January, 2015

Cara Mudah Riset Keyword

Image
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 KeywordPenerapan 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 t…

Launching Logo Blog fahmirabbani.com

Image
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/BlogMenjadi kebanggaanSebuah pengakuanSebuah Inspirasi kepercayaanSebuah kehormatan dan kesuksesanMemaksimalkan fungsi Web/BlogItulah beberapa tulisan sekaligus untuk agenda launching logo blog saya, hehehe... Silahkan baca artikel yang ada di website kementrian sosial Indones…

Bloger Bloge Blooger Blogeer Blogge atau Blogger!

Image
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 BloggeKemungkinan mereka adalah orang-orang yang salah ketikKemudian 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... :DAtau mungkin saya yang kurang paham sama pembacaan…

Cara Mengganti .blogspot.com menjadi domain .com di Idwebhost

Image
Pada 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 BlogspotMasuk ke dasbor blog Anda, kemudian Klik "Setelan" atau "Setting"

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

Anda akan mendapatkan 2 CNAME, …

Cara Validasi HTML Blog di Blogger

Image
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 HTMLProfesional, 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 bloggerPertama, 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' …

Dilema Blog Newbie Versus Blog Master

Image
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 p…

Cara Memasukan Sitemap di Webmaster Tools Google

Image
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.

Membuat Template Blogger Sendiri dengan Bootstrap

Image
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 :
<…

Daftar Conditional Tags Blogger dan Fungsinya

Image
Conditional 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 TagsPertama,

<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.ho…

Membuat Posting Auto Readmore di Blogger.com Tanpa Java Script

Image
Kata 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:thumbnail…

Cara Mengganti Template Blog pada Blogger.com

Image
Tutorial 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.
Baca juga : Tutorial memendekkan karakter pada artikel pada halaman Homepage/halaman utama dengan 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…

Membuat Navigasi Menu Plus Widget Hari Tanggal Tahun

Image
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 KalenderSederhana 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&…

Cara Membuat Blog Blogger/Blogspot Terbaru

Image
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 BloggerKunjungi alamat blogger.com kemudian Log InJika 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 : Jika Seperti ini, tanda alamat blog sudah ada yang menggunakan. Silahkan membuat alamat blog yang lainnya.Jika sudah selesai mengisi, Jika seperti ini, tanda alamat bisa anda…

Tips dan Cara Membuat Akun Gmail Baru

Image
Cara 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.comKlik "Create an Account" pada layar WebMengisi 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.Min…

Cara Menerapkan Efek Sliding Underline Pada Web/Blog

Image
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.
Baca Juga artikel sebelumnya Cara Membuat Efek Sliding 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' v…

Cara Membuat Efek Sliding Underline Menggunakan CSS

Image
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: inl…

Cara Membuat Border ZigZag dengan CSS

Image
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.

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 4…