Tips Membuat Posting Blog Agar SEO Friendly

Search Engine Optimazation memiliki banyak arti dalam dunia blogging saat ini. Tidak ada yang bisa menyangkal bahwa Google adalah salah satu mesin pencari yang terbaik dan populer saat ini. Google menyukai posting blog yang SEO itulah alasan Google menempatkan posting yang SEO selalu di atas dalam mesin pencari.

Biasanya banyak blogger hanya menulis posting untuk menarik perhatian pembaca tetapi mereka tidak memikirkan sedikit perhatian untuk membuat post blog SEO friendly.

Sangat disayangkan bahwa banyak post yang ditulis dengan baik dan menarik tapi tidak ada peringkat di mesin pencari karena kurangnya usaha SEO yang dimasukkan ke dalamnya. Mereka rupanya melewatkan kesempatan besar pencarian organik dari Google.

Menulis posting blog sangat mudah tapi membuat posting blog anda menjadi SEO friendly sangat sulit, Jadi, muncul pertanyaan bagaimana membuat posting blog SEO friendly ? Hari ini saya akan mengekspos rahasia terbesar bagaimana membuat posting blog anda SEO friendly dan mendapatkan peringkat teratas dengan cepat di mesin pencari.

Membuat Post Blog SEO Friendly Dengan Cara Sederhana 

1. Buat Judul Yang Unik Dan Menarik

Pertama hal yang paling penting adalah memilih judul yang unik dan menarik yang tentunya akan menarik perhatian dari pembaca yang ditargetkan ke blog anda. Judul memainkan peran penting untuk mendatangkan pembaca posting anda. Untuk membuat judul blog SEO friendly anda harus memiliki kata kunci yang ditargetkan dalam judul posting blog anda.

Judul membuat kesan pada pembaca blog anda dan mesin pencari menentukan relevansi posting anda. Hal lain yang penting untuk mengoptimalkan judul post agar SEO adalah judul tidak harus panjang. Judul harus di bawah 65 sampai 70 karakter.

Dalam sebuah survei, sekitar 85% dari pencari hanya memakan waktu hingga 10 detik untuk memutuskan apakah akan mengunjungi posting ini atau tidak ? Judul berlebihan dan tak sedap dipandang mata akan kehilangan ribuan pengunjung organik setiap hari.

2. Konten Harus Asli

Untuk tujuan SEO mesin pencari selalu menyaring semua isi duplikat yang persis sama di situs lain. Mesin pencari tidak pernah ingin menunjukkan konten yang sama pada posisi yang berbeda yang merugikan pengalaman pembaca.

Pastikan untuk tidak copy paste artikel situs orang lain lalu lakukan sedikit perubahan apalagi mencuri artikel orang lain tanpa mengedit.

Langkah pertama dan terpenting adalah lakukan penelitian tentang topik blog anda dan hanya mengingat semua poin penting kemudian mulai menulis dengan kata-kata anda sendiri. Selalu ingat bahwa konten anda harus asli dan tidak boleh menjiplak.

3. Harus Ada Kata Kunci Dalam Isi Konten

Anda harus memastikan kata kunci yang ditargetkan dan gunakan kata kunci tersebut dalam isi konten. Posting blog anda akan SEO friendly dengan menambahkan kata kunci yang relevan di awal, di tengah dan akhir dari posting blog.

Saya sarankan anda untuk menggunakan kata kunci dalam posting blog mengingat fakta bahwa kata kunci berperan besar dalam mendapatkan banyak pengunjung blog dan juga peringkat terbaik dalam mesin pencari.

Ingat : Jangan ketakkan kata kunci yang ditargetkan terlalu banyak karena tindakan ini merugikan SEO anda dan membuat posting blog anda jelek dan berlebihan.

4. Struktur URL Yang SEO Friendly

Untuk membuat posting SEO anda harus memiliki URL yang SEO Friendly. Memiliki URL yang SEO Friendly membuat posting lebih relevan dan cepat ditemukan di mesin pencari. Tidak tahu apa itu URL SEO Friendly ?

Tidak masalah, jika anda adalah pengguna WordPress anda dapat dengan mudah mengatur struktur URL anda dari panel admin blog anda. Perbedaan utama antara URL SEO Unfriendly dan URL SEO Friendly adalah bahwa anda memiliki kata kunci yang ditargetkan dalam URL posting blog.

Contoh :

URL SEO Friendly : www.contoh.com/judul-post-kamu
URL SEO Unfriendly: www.contoh.com/?p=58854

5. Optimasi Gambar

Untuk mengoptimalkan gambar dan untuk membuat gambar SEO friendly anda harus menambahkan teks ALT untuk masing-masing gambar. Tentu posting gambar dengan Alt meningkatkan SEO posting blog. Hal ini juga membantu untuk mendapatkan ribuan pengunjung dari mesin pencari gambar Google.

Dengan menggunakan atribut judul anda dapat dengan mudah memeriksa judul teks gambar dengan mengarahkan kursor mouse anda di atas gambar. Gambar juga membantu untuk menunjukkan posting anda grafis.

6. Memiliki Meta Description Yang Bermakna

Terakhir dan terpenting, meta description memainkan peran penting dalam menangkap perhatian pengunjung. Deskripsi ini digunakan sebagai bagian dari potongan post yang ditampilkan dalam hasil pencarian.

Pastikan untuk menggunakan kata kunci yang ditargetkan saat menambahkan meta deskripsi untuk posting blog untuk membuatnya SEO friendly. Ini adalah salah satu cara terbaik di mana anda dapat dengan mudah menggunakan kata kunci untuk meningkatkan relevansi post dan untuk meningkatkan visibilitas mesin pencari untuk menemukan posting blog anda dengan cepat.

Kesimpulan

Singkatnya, posting blog SEO Friendly membantu anda untuk mendapatkan peringkat teratas di mesin pencari. Untuk membuat postingan blog anda SEO friendly anda harus meluangkan sedikit waktu untuk mempraktekkan langkah-langkah yang disebutkan di atas dengan benar.

Yah! Sekarang giliran anda untuk menunjukkan bagaimana membantu postingan ini ? Anda juga dapat berbagi pikiran anda jika anda memiliki informasi tambahan. Kami sangat menghargai tanggapan anda.

Blogging Tips, SEO, Trafik 11:42 AM 9 comments

Merubah Background Template Blog Dengan Animasi Warna

Hari ini saya akan membagikan tutorial bagaimana anda dapat merubah background blog anda untuk warna yang berbeda dengan animasi menggunakan keyframes CSS. Animasi ini menggunakan gambar yang besar tapi telah dipadukan menggunakan kode CSS dengan loading sangat cepat dan pengunjung blog anda akan melihat beberapa interaksi berbeda di latar belakang.



Live Demo desain ini dapat lihat dengan klik link demo di bawah ini.

DEMO

Demo yang tentu saja terlihat mengagumkan sehingga untuk menambahkan latar belakang animasi ini ke blog ikuti langkah-langkah di bawah ini.

Menghapus Kode Yang Ada

Pertama-tama anda harus menghapus kode latar belakang yang ada untuk menghindari konflik di antara keduanya dan meminimalkan kode yang berlebihan. Untuk ini cari kode body pada kode CSS dalam template blog. Hapus kode di bawah kode body yang menyangkut dengan kode background. Ingat ! Jangan sampai salah hapus.

Menambahkan Kode Animasi

Sekarang anda harus menambahkan kode animasi di template blog. Untuk ini paste kode di bawah ini dan letakkan tepat di atas ]]></b:skin> <

body {
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}
@keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}

Sumber Kode : Imman Vel

Setelah menambahkan kode tersebut, simpan template anda dan selesai. Sekarang anda dan pengunjung blog anda dapat melihat animasi keren pada blog anda.

Semoga Bermanfaat.

Blogging Tips, Template 1:21 PM 3 comments

Chronicle : Template Blogger Gratis SEO Friendly

Chronicle adalah template blog gratis SEO Friendly terbaik. Template ini telah diadopsi dari WordPress yang telah dikembangkan oleh Alex di KolaKube. Tema ini telah mendapatkan popularitas lebih dalam durasi yang sangat singkat. Chan Deep yang merupakan penulis BlogTipsandTricks telah mengkonversi Chronicle dari Wordpress ke platform blogger sehingga pengguna blogger juga dapat mengambil keuntungan dari menggunakan tema ini. Sekarang pengguna blogspot dapat dengan mudah mendownload ini Tema Wp dalam mode gaya Blogger untuk blog mereka tanpa biaya alias gratis. Jadi dalam artikel ini saya akan berbagi template blogger gratis dan terbaik serta responsif.

Chronicle : Template Blogger Gratis SEO Friendly

Fitur Utama Chronicle

• SEO Friendly
• Robot Lover
• Easy Tags and Codes inside the template
• Clean Neat Structure
• Smooth Layout
• Stylish Social Sharing Widget
• Wp Like Header Style
• Fastest Loading template
• Premium Blogger template
• Beautiful Bold Fonts

Kami harap anda suka template ini setelah melihat semua fitur utama Chronicle. Untuk mengetahui lebih lanjut tentang struktur dari template ini anda harus berkunjung ke BlogTipsandTricks untuk mendapatkan informasi tentang template ini dan kode Css templatenya. Anda dapat melihat demo dan mendownload template keren dari link di bawah ini.

DEMO | DOWNLOAD

Semoga Bermanfaat.

SEO, Template 1:30 PM 1 comment

Cara Meningkatkan Trafik Blog Melalui Reddit

Reddit adalah salah satu situs social bookmarking yang menjaga kepentingan besar dalam dunia blogging. Banyak blogger mendapatkan trafik yang tinggi melalui reddit.

Dalam artikel ini saya akan membahas tentang bagaimana untuk meningkatkan trafik melalui Reddit. Pengguna Reddit mendapatkan lebih dari 5.000 lalu lintas harian dari reddit. Melalui reddit anda akan mendapatkan lebih dari 5.000 kunjungan unik setiap hari. Pengguna yang mengarahkan lalu lintas melalui reddit sebagian besar mendapatkan 65% kunjungan dari Amerika Serikat dan sisanya dari negara lain dan mereka juga mendapatkan jumlah dolar yang banyak jika mereka menggunakan program periklanan terbaik seperti Google AdSense, BuySellAds, iklan Media.net dll.

Meningkatkan Trafik dengan Reddit

Jika anda adalah pengguna baru reddit maka anda harus mendaftar terlebih dahulu di Reddit. Hanya butuh waktu 1 menit untuk mendaftar di reddit. Setelah mendaftar, pertama-tama verifikasi akun reddit anda melalui link di bawah ini. Alasan di balik verifikasi akun anda adalah untuk mencegah terkena banned atau ditandai sebagai spam di reddit.

https://ssl.reddit.com/verify?reason=submit 

Setelah verifikasi akun anda pada reddit, sekarang saatnya untuk mendapatkan trafik. Sekarang Anda harus mengirimkan link website anda di sub-reddit khusus untuk mendapatkan trafik. Sub-reddits adalah kategori di reddit. Sekarang salin link dari posting blog anda dan submit ke sub-reddit yang sesuai dengan artikel tersebut.

Setelah itu pengguna reddit akan upvote dan downvote kiriman anda. Jika artikel anda menarik untuk  dibaca, informatif dan relevan dengan sub-reddit maka posting anda akan mendapatkan lebih banyak pengunjung dan upvotes dan trafik.

Catatan: Saya sarankan anda untuk mengirimkan link blog / website setelah jam 10:00 Los Angeles (PDT). Alasan di balik ini adalah bahwa Reddit merupakan sebuah situs bookmark sosial dengan lebih dari 55% penggunanya dari Amerika Serikat.

Jadi antara dan setelah waktu tersebut sebagian besar orang Amerika sedang online dan mereka akan melihat kiriman anda dan pasti akan mengunjungi website anda.

Ingat : Jangan pernah marah ketika seseorang downvotes kiriman anda karena pada awalnya anda akan mendapatkan beberapa downvotes dan upvotes jadi ingatlah bahwa orang yang downvotes juga mengunjungi situs web anda !

Dalam reddit ada Link Karma dan Komentar Karma. Semakin banyak Link Karma dan Komentar karma anda miliki, trafik blog anda akan lebih meningkat mealaui reddit. Untuk meningkatkan Link Karma saya sarankan anda untuk terlebih dahulu mengirimkan link dari beberapa gambar dari imgur.com untuk mendapatkan beberapa tautan karma.

Hanya sekian untuk tips hari ini semoga trafik blog / web anda dapat terus meningkat.

Semoga Bermanfaat.

Google Adsense, SEO, Trafik 11:48 AM 4 comments

Tips Dan Trik SEO Untuk 2014

 Search Engine Optimization pada tahun 2014 terlalu rumit untuk pemula sehingga mereka harus perlu mengikuti beberapa Tips dan Trik SEO Terbaik yang akan meningkatkan blog mereka pada peringkat yang lebih baik di Search Engine modern.

Jadi di sini saya akan sedikit membahas beberapa Tips dan Trik SEO yang membantu untuk meningkatkan ranking blog anda. Tips dan Trik SEO terbagi menjadi 2 besar yaitu On-Page SEO dan Off-Page SEO.

Di bawah ini saya akan membahas 10 cara terbaik untuk On-Page SEO.
 
1. Artikel Yang Menarik dan Deskriptif.
Tidak ada yang akan menyukai artikel yang panjang serta membosankan sehingga minat pembaca artikel anda kurang dan artikel yang deskriptif akan memuat semua hal tentang judul artikel.

2. Kualitas Konten.
Jangan copy Paste seluruh konten dari blog lain yang tidak akan pernah membawa lalu lintas anda. Google sangat baik untuk mengetahui isi Duplikat. Hindari kata kunci isian dan trik SEO Black-hat lainnya.
 
3. Judul Yang Manis.
Judul harus relatif dan kata kunci harus hadir di Judul tersebut. Dan panjangnya lebih baik antara 40-65 Karakter.

4. Deskripsi Blog Harus Relatif.
Tulis yang pendek dan manis sekitar 156 Karakter yang akan menjelaskan seluruh artikel blog sehingga akan membuat blog anda lebih baik di Search Engine Results Page.

5. Optimalkan Rasio Kata Kunci.
Menjaga Kepadatan Kata Kunci Anda dengan cara yang aman untuk tidak mendapatkan Hukuman Algoritma Google.

6. SEO Friendly URL
URL konten harus berarti penuh dengan konten. Kemudian Search Engine mudah menyoroti kata kunci URL anda, itu juga adalah sinyal untuk meningkatkan SEO.

7. Kata Kunci Dalam Paragraf Pertama.
Gunakan Kata kunci dalam paragraf pertama sehingga Mesin pencari tahu ini adalah konten yang benar-benar menjelaskan tentang Judul tersebut.

8. Penggunaan Headings.
Gunakan penyelidik tag h1, h2, dll ... Ini akan membuat pembacaan lebih mudah dan bagus untuk konten anda.

9. Fokus Kata Kunci.
Menyoroti kata kunci dengan tag yang kuat akan meningkatkan visibilitas blog anda sehinga blog anda benar-benar di inginkan oleh pembaca.

10. Optimasi Gambar.
Satu gambar dapat menjelaskan segalanya lebih baik daripada konten yang panjang dan banyak gambarnya, dan Optimalkan gambar menggunakan Alternatif Tags yang bagus.

Demikian sedikit Tips dan Trik On-Page SEO yang dapat saya share bagi anda semua. Untuk Off-Page SEO akan saya bagikan pada artikel berikutnya.

Semoga Bermanfaat.

Google Adsense, SEO 9:30 PM 2 comments

Hal Hal Sebelum Anda Daftar Google AdSense

Tidak bisa dipungkiri lagi, Google AdSense masih menjadi cara "primadona" bagi blogger dalam memperoleh pendapatan online dari blog-blog mereka. AdSense adalah cara yang cukup cepat dan sederhana bagi blogger untuk menampilkan iklan yang relevan dengan konten blog mereka. Membuat uang dengan AdSense mungkin mudah, tapi bagaimana dengan proses menuju kesana ?

AdSense (GA) adalah affairs periklanan 'kontekstual' yang dijalankan oleh Google Inc. dimana memungkinkan penerbit / pemilik blog menampilkan iklan yang berupa tekstual, video atau gambar pada halaman websitenya dan akan mendapatkan uang (earning) ketika pengunjung situs melihat dan mengklik iklan. Anda hanya perlu sebuah website atau blog yang layak dan Google melakukan sisanya

Memperoleh pendapatan dari blog/web dengan affairs AdSense adalah hal mudah, tetapi proses agar blog disetujui setelah ditinjau tim aplikasi Adsense adalah hal lain, mereka telah membuat sistem persetujuan yang sangat ketat dan kesalahan kecil saja bisa menjadi kegagalan. Jika Anda ingin mendapatkan accept akun Adsense dalam sekali apply, maka silakan baca tip-tip berikut yang akan membantu Anda.

1. Pasang Meta Tag

Lalu lintas adalah kunci untuk mendapatkan hasil sukses secara online. Jadi, sebelum mengajukan permohonan Adsense traffik atau lalu lintas blog harus menjadi prioritas.Untuk itu Anda harus menambahkan meta tag (Judul, Kata Kunci, Keterangan, dll). Letakkan meta tag di template blog Anda, tepatnya di bawah <head>. Kode Meta Tag seperti dibawah ini :

<meta content='JUDUL BLOG ANDA' name='title'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><meta content='DESKRIPSI BLOG ANDA' name='description'/></b:if>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME' name='author'/>63 characters With Spaces
<meta content='INDEX,FOLLOW' name='robots'/> <meta content='index, follow' name='googlebot'/>
<meta content='text/html; charset=UTF-8' http-equiv='content-type'/>

2. Blog Traffic

Blog traffic atau lalu lintas situs sebaikanya minimal 300 visitor unik perhari, bahkan ada yang menyarankan lebih dari itu. Blog traffic ini dapat dibagi menjadi 2 :

#Organic Traffic
Organic Traffic berarti lalu lintas yang Anda dapatkan dari mesin pencari dan yang datang secara langsung ke situs Anda. 

#Inorganic Traffic
Inorganic traffic berarti lalu lintas yang Anda dapatkan dari media sosial seperti Google plus, Facebook, Twitter, dll.

3. Konten Berkualitas 

Usahakan untuk menulis konten berkualitas di blog Anda dan jangan "COPAS" dari blog lain, karena ini adalah cara yang tidak profesional dan tidak disukai Google. Anda setidaknya mempublikasikan 50-60 postingan di blog Anda sebelum mendaftar akun GA. Ada yang menyarankan juga minimal 100 posting.

4. Length Of Posts 

Atau panjang postingan, cobalah selalu membuat posting blog lebih panjang setidaknya terdiri 500-750 kata, karena umumnya mesin pencari tidak menyukai tulisan yang pendek atau sedikit. Dan juga jangan lupa untuk selalu cek tata bahasa konten, menghindari kesalahan ejaan, dll.

5. Google Webmaster Tools 

Untuk membantu Google untuk mengindeks semua halaman di blog Anda, Anda harus submit Sitemap Blog di Google Webmaster Tools.

6. Widget Yang Berguna

Gunakan beberapa widget berguna pada blog. Ini dapat membantu Anda untuk mendapatkan lalu lintas anorganik dari situs media sosial seperti - Facebook, Twitter dan Google+,dll. Cobalah gunakan beberapa widget yang berguna dibawah ini :

# Google+ Author Badge, Add to circles widget, dan Google+ button.
# Subscription Box
# Facebook Like Box
# Social Sharing Buttons
# Twitter Follower Button

7. Page untuk Adsense

Apa Page (halaman statis) yang diperlukan untuk Google Adsense? Jawabannya adalah About Us, Contact Us, Disclaimer and Privacy Policy. Pasanglah Page seperti itu di menu navigasi blog Anda.

8. Domain Age

Usia domain juga perlu dipertimbangkan sebelum mengajukan permohonan akun Adsense. Menurut kebijakan Google, nama domain Anda harus berusia 6 bulan, namun jika blog Anda mempunyai lalu lintas besar dan mendapatkan pengunjung unik yang banyak setiap hari dari mesin pencari maka tidak harus menunggu selama 6 bulan akun Adsense akan diapprove.

9. Desain Blog

Tampilan blog yang sederhana jauh lebih baik daripada yang rumit, unik dan tidak umum, namun berantakan. Ini disebut pula sebagai desain yang profesional. Desain yang profesional memiliki lebih banyak kesempatan untuk mendapatkan persetujuan di program Adsense. Beberapa unsur yang perlu diperhatikan agar tampilan blog lebih profesional antara lain :

# Navigasi yang mudah dan simple.
# Hindari distraction warna atau warna yang mengganggu pandangan.
# Tersedia kotak pencarian yang mudah diakses .
# Akses yang mudah ke halaman penting seperti Privasi, Disclaimer, About Us, Arsip, dll
# Gunakan font yang familiar
# Tersedia beberapa tombol sosial, profil Google Plus.
# Sebutkan nama atau sesuatu tentang diri Anda di halaman situs sehingga tim Google Adsense dengan mudah dapat memverifikasi situs Anda.

Semoga Bermanfaat.

Google Adsense 9:30 AM No comments

Cara Mengetahui Artikel Yang Dicopy Paste Orang Lain

Sebagai blogger atau pencipta konten, atau bahkan SEO, anda selalu mendapatkan risiko bahwa artikel anda akan disalin alias dicopy paste. Itu memang risiko karena meskipun mesin pencari lebih cerdas dalam mendeteksi sumber asli dari beberapa duplikat artikel. Dan tidak ada jaminan bahwa sumber asli akan selalu menjadi yang teratas dan duplikat artikel akan dihukum. Berikut adalah beberapa cara yang dapat anda lakukan untuk memeriksa beberapa artikel anda yang disalin oleh orang lain.

Ada banyak cara untuk menemukan duplikat artikel. Namun hal ini tidak semudah yang kita pikirkan. Ada banyak situs yang menyalin artikel anda atpi pencarian sering terbatas pada jumlah kata-kata dengan preposisi kurang signifikan seperti kata "di" "atau" "dan" yang tidak dihitung. Jadi mereka hanya mengcopy sebuah artikel dan paste tanpa melakukan beberapa trik. Inilah yang dapat anda lakukan untuk menemukan pelakunya.

Gunakan Operator intitle

Jika seseorang terang-terangan menyalin artikel anda, maka kemungkinan bahwa mereka mungkin telah menyalin tag judul. Anda dapat menggunakan Google Search khusus untuk judul dengan menggunakan operator pencarian intitle. Sebagai contoh, jika saya mencari duplikat artikel ini, saya akan menggunakan Google Search query berikut.

intitle:"Cara Mengetahui Artikel Yang Dicopy Paste Orang Lain"

Anda bisa melihat beberapa halaman web yang mungkin kebetulan memiliki judul yang sama seperti milik anda dengan isi yang berbeda. Tapi jika ada orang di luar sana yang menyalin penuh artikel anda, anda pasti akan menemukan mereka.

Operator Pencarian inurl

Sama seperti Operator intitle, Operator inurl dapat digunakan untuk mencari duplikat artikel. Misalnya :

inurl:cara_mengetahui_artikel_yang_dicopy_paste

Ini adalah cara yang pasti untuk menangkap bots, karena artikel disalin secara otomatis sebagian besar akan mencakup struktur URL yang sama. Orang-orang mungkin akan mengubah judul posting setelah disalin dari suatu tempat hanya untuk membuang pencipta konten asli. Tapi mereka tidak akan selalu mengubah URL, yang membuat mereka mudah ditemukan.

Google Webmaster Tools

Kadang-kadang ketika halaman indeks Google yang mendeteksi duplikat artikel, itu akan memberitahu penulis asli tentang orang yang melakukan duplikat. Tapi anda hanya dapat memanfaatkan fitur ini jika anda memiliki akun Google Webmaster Tools. Setelah diverifikasi, anda akan mulai menerima pesan untuk beberapa masalah penting seperti masalah yang ditemukan pada situs anda atau duplikat artikel yang ditemukan pada blog lain. Dalam teori, ini sangat baik. Tetapi dalam prakteknya, Google bukan yang terbaik untuk pekerjaan ini. Mungkin butuh beberapa waktu bagi Google untuk menemukan duplikat artikel dan tidak akan selalu mengirimkan pesan. Tapi untuk pemula, mungkin menjadi fitur yang berguna.

Punya teknik yang lebih yang cepat dan sederhana serta efektif dalam menemukan duplikat artikel ? Marilah kita saling berbagi di bagian komentar di bawah ini.

Semoga Bermanfaat.

Blogging Tips, SEO 12:25 PM 5 comments

Cara Membuat Blog Menjadi Super SEO Friendly

SEO (Search Engine Optimization) adalah dasar dari setiap blog, tanpa itu kita tidak bisa menyebut blognya satu komersial yang profesional. Rangking blog anda di Google sangat tergantung pada SEO dan kita semua tahu lebih baik peringkat di Google, lebih banyak trafik yang kita dapatkan. Maka orang harus berusaha semaksimal mungkin untuk membuat blognya lebih SEO Friendly. Tapi bagaimana saya melakukannya ? SEO adalah topik yang luas. Ada ribuan cara untuk meningkatkan SEO blog. Seperti menambahkan Meta Tags, Menjaga jumlah karakter yang tepat pada judul posting, menambahkan tag alt untuk semua gambar dan banyak hal lainnya.

Hari ini saya akan menunjukkan bagaimana cara membuat blog super SEO Friendly.

1. Membuat Semua Link Eksternal Terbuka Di Tab Baru
Hal ini akan mengurangi tingkat kesehatan blog anda. Tampilan halaman pada blog anda dan lalu lintas blog anda tidak akan ditransfer hanya karena satu link tunggal.

2. Membuat Semua Link Eksternal Nofollow
Secara default semua link adalah dofollow yang berarti Google dapat menggerakkan link tersebut dan karenanya banyak PageRank halaman hilang. Jadi untuk mencegahnya anda harus menambahkan tag nofollow untuk semua link eksternal.

3. Menambahkan Tag Alt Untuk Semua Gambar
Tag Alt pada gambar menjelaskan melalui mesin pencari seperti Google Images untuk menampilkan gambar blog pada query terkait. Hal ini membantu untuk mendapatkan lebih banyak pengunjung ke blog anda dan meningkatkan SEO.

Jadi pertanyaannya bagaimana melakukan semua hal ini ? Manual melakukan hal ini akan memakan banyak waktu dan hampir mustahil untuk blog dengan sejumlah posting yang besar. Jadi untuk menghemat waktu, anda dapat menambahkan kode JavaScript kedalam template blog anda.

Cara Menambahkan Kode SEO Friendly Pada Blogger

Masuk ke Blogger → Template → Edit HTML dan tambahkan kode di bawah ini tepat di atas tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[
jQuery('a').each(function(){// Let's make external links open in a new tab. var href=jQuery(this).attr('href');if (typeof href !='undefined' && href !="" && (href.indexOf('http://') !=-1 || href.indexOf('https://') !=-1) && href.indexOf(window.location.hostname)==-1){jQuery(this).attr("target", "_blank");}});//]]></script>

<script type='text/javascript'>//<![CDATA[
jQuery('a').each(function(){// Let's make external links nofollow. var href=jQuery(this).attr('href');if (typeof href !='undefined' && href !="" && (href.indexOf('http://') !=-1 || href.indexOf('https://') !=-1) && href.indexOf(window.location.hostname)==-1){jQuery(this).attr("rel", "nofollow");}});//]]></script>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){$('img').each(function(){var $img=$(this);var filename=$img.attr('src') $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));});});//]]></script>

Jika blog anda telah memiliki plugin JQuery anda dapat menghapus kode warna merah dan jika tidak tambahkan seluruh kode.

Setelah znda menambahkan kode SEO pada template. Sekarang anda dapat melihat tag alt pada gambar anda, Nofollow tag di link eksternal dan Pembukaan link eksternal di tab baru. Saya merekomendasikan setiap blogger menambahkan kode ini karena ini merupakan salah satu upaya kecil anda untuk meningkatkan SEO blog anda secara signifikan.

Semoga Bermanfaat.

Blogging Tips, SEO, Trafik 2:25 PM 14 comments

Widget Sitemap Keren Terbaru Untuk Blogger

Menambahkan Sitemap atau Daftar Isi di blog ini sangat dianjurkan untuk semua blogger baik baru atau lama. Sitemap ini membantu pembaca untuk menavigasi blog kita dengan mudah dan juga membantu blog kita dengan menurunkan tingkat bouncing nya (jumlah kunjungan yang hanya terdiri dari satu tampilan halaman). Dan hari ini saya akan menunjukkan kepada anda sebuah widget sitemap keren yang dinamakan Responsif Sitemap Widget.


Responsif Sitemap Widget

Widget ini diberi kode oleh Chandeep dari BlogTipsnTricks. Widget sitemap ini responsif dan dapat digunakan dalam setiap template blogger tanpa masalah besar. Widget tampak menarik dan tentunya keren. Anda bisa melihat contohnya dengan klik link demo dibawah ini.

DEMO 

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

Login ke Blog → Laman → Laman Baru → Laman Kosong → HTML dan paste kode di bawah ini dalam editor posting.

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

Sekarang anda dapat menerapkan Sitemap keren di blog anda. Sitemap ini pasti akan membantu pembaca blog anda untuk menavigasi situs anda lebih mudah.

Semoga Bermanfaat.

Blogging Tips, Widget 11:46 AM 1 comment

Cara Menambahkan Iklan Adsense Dalam Posting Blog

Kadang-kadang kita merasa khawatir tentang pendapatan google adsense kita dan mencoba untuk menjadi yang terbaik untuk meningkatkan pendapatan tetapi semua sia-sia dan tidak akan pernah dapat berhasil dalam situasi tertentu. Meskipun kita tahu bahwa pendapatan google adsense sebagian besar sangat tergantung pada SEO dari blog anda. Jadi hari ini kami akan memberikan beberapa tips yang menakjubkan di mana anda dapat dengan mudah meningkatkan pendapatan google adsense anda.

Salah satu cara terbaik untuk meningkatkan pendapatan google adsense adalah mengubah lokasi untuk banner adsense anda dan memasukkannya ke daerah yang tepat. Sekarang untuk melakukan hal ini kita akan menambahkan kode adsense di bawah setiap posting. Dengan cara ini anda akan mendapatkan klik maksimum pada iklan anda.

Hati-hati untuk tidak menggunakan begitu banyak iklan di blog anda yang nantinya akan mempercepat loading blog anda.

Cara Menambahkan Iklan Adsense Dalam Blog Anda

Sekarang anda dapat dengan mudah menempatkan iklan di dalam posting blog, cukup ikuti langkah-langkah sederhana dibawah ini :

1. Anda harus memparse kode AdSense >>> (Parse Disini) Atau (Disini)
2. Sekarang tambahkan kode yang telah di parse tadi kedalam kode di bawah ini dan kemudian menggunakannya dalam template.

Menambahkan Iklan Adsense Dalam Sisi Kiri Post

<b:if cond='data:blog.pageType == "item"'>
<div style="float:left;">
kode adsense yang telah di parse</div>
</b:if>

Menambahkan Iklan Adsense Dalam Sisi Kanan Post

<b:if cond='data:blog.pageType == "item"'>
<div style="float:right;">
kode adsense yang telah di parse</div>
</b:if>

Sekarang Menambahkan Iklan Adsense Diatas Atau Dibawah Post

1. Masuk ke blog anda >> Edit HTML >> Expand Widgets
2. Tekan ctrl+F dan cari kode <data:post.body/>. Jika anda menemukan dua kode <data: post.body/> dalam template anda, coba letakkan kode adsense pada kode <data: post.body/> yang pertama dan jika tidak ada hasil letakkan pada kode yang kedua.
3. Jika anda ingin menambahkan iklan adsense di bagian atas posting maka letakkan kode adsense anda tepat di atas kode <data:post.body/>
4. Jika anda ingin menambahkan iklan adsense di bawah posting maka letakkan kode adsense anda tepat di bawah kode <data: post.body />

Jika anda memiliki pertanyaan maka jangan ragu untuk meminta bantuan dengan cara berkomentar yang baik pada kolom komentar dibawah. Sekian untuk tips hari ini. Enjoy !

Semoga Bermanfaat.

Blogging Tips, Google Adsense, SEO 9:00 AM No comments

Widget Konter Komentar Keren Untuk Blog

Komentar selalu dilihat sebagai faktor penting dalam keberhasilan blog anda. Pengguna biasanya komentar di blog anda untuk menghargai penulis atau untuk mengajukan pertanyaan. Salah satu cara untuk menilai popularitas posting adalah dengan melihat jumlah komentar pada posting dan untuk itu anda harus menempatkan konter komentar di blog anda. Dalam artikel ini saya akan menjelaskan cara untuk menambahkan widget komentar indah bergelembung pada blog.

Langkah 1

Login ke blog anda dan dari dashboard blog anda , pilih Template >> Edit HTML.

Langkah 2

Klik di area kode template dan tekan ctrl+F5 untuk membuka kotak pencarian dan ketik kode berikut di kotak pencarian.

]]></b:skin>

Langkah 3

Sekarang tambahkan kode di bawah ini tepat di atas ]]></b:skin>.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://goo.gl/92MxG2);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Langkah 4

Setelah kode di atas ditambahkan ke template, cari kode di bawah ini

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Jika anda tidak dapat menemukan kode di atas, coba cari kode seperti di bawah ini.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>

Langkah 5

Sekarang tambahkan kode berikut tepat setelah kode di atas.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #000000; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

Anda dapat mengubah kode warna #ffffff dengan pilihan warna atau warna yang sesuai dengan template anda. Demikian pula dengan mengubah ukuran font 18px untuk ukuran font yang anda inginkan.

Saya telah menyediakan beberapa gambar keren yang dapat anda tambahkan ke konter komentar blog anda. Dapat dilakukan hanya dengan mengganti URL pada Langkah 3 yang disorot dalam warna merah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWueShLzuFx-MTiFzPmBnqwHnVeRNkHugoT_ngj30SyHsZ94NiHRRbh6xaxfoXzBkUlh36FAYnxOUCtpp33wJjInokaF-HGedw75Zyb1cwE_WLeZtIFWFGcjoKUmSGrC5nFR_wnTlCldj-/s1600/blue+bubbe+comment+counter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj487doHUpBAt-_baQKUZr8chtyaAKGhvQpxBe2Rh4mbP8W94EJJ4MM2z1L5AQknOog0yBpWqWBlrgCxTtfHE91iiHdGMA4d65QvRtorIC7Di6jwQa1AHqOjaU53Xu8ORpzanRtF7kSeyA3/s1600/pink+comment.png

Saya harap anda menyukai tips singkat kami ini yang memberikan konter komentar yang indah pada judul posting blog anda.

Semoga Bermanfaat.

Blogging Tips, Widget 1:03 PM 1 comment

10 Direktori Blog Terbaik Untuk Submit Blog Anda

Mengirimkan blog ke blog direktori adalah salah satu cara terbaik untuk mendapatkan trafik blog dan itu sangat berguna untuk peringkat SERP blog anda. Hari ini saya akan menulis blog-blog direktori yang masuk dalam kategori terbaik.

Kirim blog anda ke direktori dibawah ini.

1. Best of the Web Blog Search, direktori blog terbaik yang sangat selektif dan hanya berisi daftar blog berpage rank tinggi dan berharga. Backlink dari direktori ini sangat megah dan layak menjadi terbaik. 

2. EatonWeb Blog Directory adalah sebuah permata yang nyata dengan banyak inbound link berusia dan sistem rating blog. Anda mungkin harus membayar biaya untuk blog Anda ditinjau, tapi seperti Yahoo, biaya review adalah layak beberapa dolar. 

3. Blog Hub menawarkan banyak daftar blog baru dan topik yang hangat. Blog Hub adalah direktori besar untuk daftar situs Anda. 

4. Bloggernity adalah salah satu direktori yang teratur, besar, dan mudah untuk menavigasi blog anda.Terdapat sedikit iklan di halaman utama, tapi itu hanya untuk menyenangkan pembaca. 

5. Blogarama memiliki daftar yang mengesankan yaitu lebih dari 65.000 blog. Situs ini dirancang dengan baik dan mengikuti kategori konten yang sama dengan situs lainnya. 

6. Blog Search Engine merupakan salah satu blog direktori yang paling selektif di web. Dimiliki oleh perusahaan induk Performancing dan berfungsi hasil pencarian powered by IceRocket.

7. Blog Catalog termasuk fitur blog direktori terbesar. Menawarkan kemampuan untuk melakukan pencarian berdasarkan negara, bahasa, atau pengguna. Tanpa embel-embel desain, tapi menawarkan akses yang nyaman bagi anggota melalui pendaftaran blog yang sederhana.

8. Globe Of Blogs memiliki fitur yang banyak dan untuk dicatatkan di situs ini blog anda tidak boleh komersial. Situs ini mungkin tampak sibuk, tapi saya suka situs ini karena mampu melakukan pencarian berdasarkan judul, penulis, atau subjek.

9. Bloggeries memiliki kategori terbaik dan subkategori halaman rumah di internet. Tata letak jelas dan ringkas, dan pembaca dapat menemukan apa yang mereka cari dalam sekejap.

10. Bloggapedia memiliki homepage yang menarik dan tentunya enak dilihat. Pembaca dengan mudah terhubung ke blog dan posting terbaru. Kategori inovatif dan desain yang penuh warna membuat blog ini terlihat hidup.

Sekian untuk tips hari ini, semoga anda dapat meningkatkan trafik blog anda. Jika ada yang lebih baik mohon di share pada kolom komentar.

Semoga Bermanfaat.

Blogging Tips, SEO, Trafik 1:14 PM 2 comments

Cara Terbaru Membuat Latest Post News Pada Blogger

Hari ini saya akan menunjukkan bagaimana anda dapat Membuat Latest Post News pada blog. Blog WordPress dapat menambahkan hal-hal ini dengan mudah hanya dengan mengupload plugin tapi di blogger kita harus menambahkan kode secara manual untuk itu. Jadi widget ini akan menampilkan 10 (bisa ditambah atau dikurangi) posting terbaru blog anda di kotak ticker. 

Ticker ini sepenuhnya otomatis dan anda hanya perlu menambahkan URL blog anda dan akan di perbarui posting baru secara otomatis. Live Demo widget ini dapat dilihat dengan mengklik tombol demo di bawah ini.

DEMO

Setelah anda melihat demo, sekarang kita lanjutkan dengan instruksi tentang bagaimana anda dapat menambahkan ticker berita ini ke blog anda.

MENGEDIT HTML BLOG ANDA

Pertama login ke Blog → Template → Edit HTML. Tekan Ctrl+F dan cari kode <div id='content-wrapper'> dan tambahkan kode yang dibawah ini tepat di atasnya.

<div style="width:970px;height:20px;position:relative;">
<script type="text/javascript">
var blog_url = "http://www.allbloggertricks.com";
var latest_post = 10;
var scrolling_speed = "8";
var close_button = false;
var info_text = true;
</script>
<script src="http://files.allbloggertricks.com/Scripts/abt-ticker.js"></script>
</div>
<br />
<br />
<div style='clear:both;'/>

PENGATURAN 

Mengedit sedikit kode di atas sesuai dengan keinginan anda : 

var blog_url - Tambahkan URL blog anda dengan mengganti http://mirzabasri.blogspot.com 
var latest_post - Jumlah posting yang ingin terlihat di ticker 
var scrolling_speed - Kenaikan/Penurunan nomor untuk menambah/mengurangi kecepatan
var close_button - Jika anda ingin menambahkan tombol close di ticker 
var info_text - Jika anda ingin menghapus/menyimpan teks "Artikel Terbaru" dan RSS ikon. 

Setelah melakukan perubahan simpan template anda. 

Pekerjaan selesai. Sekarang anda dan pengunjung blog anda dapat melihat Latest Post News di blog anda.

Semoga Bermanfaat. 

Widget 10:00 PM 1 comment

Widget Contact Us Keren Untuk Blog

Hari ini saya akan share cara menambahkan widget Contact Us yang benar-benar mengagumkan dan keren di sebuah laman blog anda. Widget kontak ini terlihat sangat elegan dan sangat enak di pandang mata. 

Widget ini terinspirasi dari Bloggertut yang bekerja pada CSS dan terlihat sangat keren. Anda dapat membuat laman kontak lebih dahsyat dengan menambahkan widget ini ke salah satu laman blog anda. Untuk lebih jelasnya anda bisa melihat tampilan widget ini dengan mengklik tombol di bawah ini.

DEMO

Setelah melihat demo tersebut jika anda ingin menambahkan laman kontak ini di blog anda maka ikuti langkah-langkah di bawah ini.

Langkah 1 : Menambahkan CSS 

Masuk ke Blog → Template → Edit HTML. Sekarang tambahkan kode CSS di bawah ini tepat di atas ]]></b:skin>

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfCh523FIDGNCP1y8355Rk-dYOwhZ4mXpqD2jeIkjQl2_HECo8UAsLAnQ0HtOrVJycO-rJfxiT4rVcPuNjKxtHyG05X5LvM4nRtmVe0nQZX_9Lo2ZgRUfooZy0xx2ls-VV8FMSl2v7Vvw/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb_UbuRUpdQ-B0KSQkF6UX55OOsLpd6br6YtAGkE5f7vzo0OKfjMuaQDqlu5ugsCkAon_48_ynp2OC67MzKzXUtrNGC5Ls-ExEqjRK43SVBOOgdquGwZ69-Qzn6W-k5Y2N_aQ8tNKyP7k/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNhBuk2dpNfoMZupsDWkymi5ROLLHRYXOg8ITJV-5S4H9NJqhwnM8LNq0WxRWu0iNP1-Bbw-uhTs0g96Qk_CYFD2LnuBYSq5lJ4E7tQT8p3HT0M8ikVRf0CeD13PiHXftSX-0n2D7DrBg/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Setelah menambahkan kode tersebut simpan temlplate anda. 

Langkah 2 : Menambahkan HTML Pada Laman 

Pertama-tama kita perlu membuat laman baru dan untuk melakukan hal ini terlebih dahulu masuk ke Blog → Laman → Laman Baru. Editor halaman akan terbuka, sekarang klik pada tab HTML dan paste kode di bawah ini di dalamnya.

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Setelah menambahkan kode di atas, publikasikan laman tersebut. 

Sekarang anda dan pengunjung blog anda dapat melihat widget kontak yang mengagumkan dan keren pada blog anda.

Semoga Bermanfaat. 

Blogging Tips, Widget 10:15 AM 2 comments

Widget Sosial Share Melayang Untuk Blog

Tutorial ini akan membantu anda dalam menambahkan tombol sosial share melayang di bawah setiap posting blog anda. Saya pribadi menggunakan widget ini di blog saya.

Widget ringan dalam hal ukuran dan tentunya terlihat elegan. Dalam setiap posting baru widget akan muncul di bagian bawah. Widget berisi empat tombol berbagi sosial - Facebook, Twitter, Google+, LinkedIn. Juga terdapat tombol Close untuk menutup widget share tersebut.

Sebuah live demo bisa dilihat di blog saya sendiri. Hanya dengan menurunkan ke bawah ke bagian komentar dan widget sosial share akan muncul. Anda juga dapat menutupnya dengan mengklik tombol close. 

Setelah anda telah melihat demo, anda bisa menambahkan widget ini di blog anda cukup ikuti langkah-langkah di bawah ini.

MENAMBAHKAN MARKER 

Pertama masuk ke Blog → Template → Edit HTML. Tekan Ctrl + F dan cari kode <data:post.body/> dan paste kode di bawah ini tepat di bawah <data:post.body/>. 

CATATAN : Mungkin terdapat kode yang mirip dengan <data:post.body/> jadi pastikan bahwa anda telah memilih kode yang benar.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='md-active-share-comment-marker'/>
  </b:if>

MENAMBAHKAN HTML/CSS/JS PADA HTML EDITOR

Untuk menambahkan widget ini anda harus masuk ke Blog → Template → Edit HTML dan menambahkan kode di bawah ini tepat di atas kode </body>. Kode telah dioptimalkan dan membuat loading lebih cepat.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script src='http://files.allbloggertricks.com/Scripts/abt-floating-share.js' type='text/javascript'/>
    <div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
    <div style='width: 800px; margin: 20px auto;'> <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228}.linkedin .icon,.linkedin .slide{background:#007bb6}</style>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FMirzaBasri&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> </iframe> </div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='AllBloggerTrick' href='https://twitter.com/share'> Tweet </a><script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script>
  </div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div><script type='text/javascript'>
    (function() {
      var po = document.createElement(&#39;script&#39;);
      po.type = &#39;text/javascript&#39;;
      po.async = true;
      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
      var s = document.getElementsByTagName(&#39;script&#39;)[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
</script>
 </div> <div class='linkedin share-button'> <i class='icon'> <i class='icon-linkedin'> </i> </i> <div class='slide'> <p> linkedin </p> </div> <script data-counter='right' type='IN/Share'> </script> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> </div></div><div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'> Don&#39;t You Think this Awesome Post should be shared ??<br/> <span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span> </div> </div> </div> </b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Ganti kata MirzaBasri dengan Facebook Page ID anda. Simpan template. 

Enjoy. Sekarang anda dan pengunjung blog anda dapat melihat widget sosial share yang keren di blog anda.

Semoga Bermanfaat. 

Widget 7:00 AM 1 comment