Depermana12

Trik Mudah Meng-edit Tampilan Template Blogger Super Mudah pake Inspect Elemen

noreply@blogger.com (Deddia Permana) — Thu, 25 Feb 2016 23:11:00 +0000

Kasian blog ini gak keurus karena si admin fokus ke blog lain, kasian ya blog ini ga update posting... gw tau lu gapeduli.. iyakan? oke gapapa slow. Karena lagi ada angin baik jadi mau update posting blog deh, sayang sayang blog nya udah dikenal mbah Google

Kali ini gw mau update tentang tutorial Edit template blogger super mudah, bahkan buat newbie sekalipun.

ohiyaa sebelum ngebaca lebih dalam.. jangan serius serius yakk

sedikit curhat pertama kali kenal blogging

kalo dulu pertama kali ngeblog 2011 masih ababil gonta ganti template, liat template bagus langsung ganti, liat template keren langsung ganti, liat template warna-warni langsung ganti...Eh tapi template awal lebih bagus langsung ganti template awal. eh template itu kayaknya lebih keren dehh, ganti lagi... Hadehhh gini aja terus sampe Google plus ngalahin Facebook...

ngaku aja dulu lu juga gt kan..? iyakan? udah ngaku aja

oh sekarang masih gt...?ckckc tobatlahh nak...

Disini mungkin ente belum tau kalo kita bisa edit template blogger sesuka hati gacuman ganti template, kita bisa edit tampilan template blogger dengan gaya apapun lahh..pokoknya suka suka

Tapi kan gw gangerti kode kode template blogger gimana dong?

Slow disini bakal gw ajarin ilmu gw selama nyolong kode template orang lain hehehe *ups* tapi gw bukan orang yang suka kloning kokk sloww, cuman ngambil kode yang menurut gw bagus, trs gw terapin deh di blog (sama aja-_-)

oke sudah cukup curhatnya, mari kita mulai belajar edit template super mudah ala ala gw.

Pertama yang perlu diketauhi mengenai template blogger

1. Blogger mengizinkan kita buat edit template sesuka hati, beda sama sodaranya yang itu tuhh...

2. Template blogger itu berbentuk ekstensi .xml yang didalemnya berisi dari kode HTML, CSS, JAVASCRIPT/JQUERY

HTML itu kerangka luar (masih belum berbentuk)
CSS itu sebagai perangkai yang buat design HTML lebih berbentuk dan rapih
JAVASCRIPT/JQUERY itu buat fungsi fungsi kompleks dari si HTML dan CSS

Nah buat ngedit tampilan blog kita cuman perlu belajar yang HTML dan CSS, kecuali untuk tampilan yang lebih kompleks kita perlu JS (baca:Javascript)

Karena design tampilan blogger intinya cuman HTML yang diperindah dengan CSS, bisa dibilang si HTML ini Pacarnya si CSS lahh...kalo Javascript siapanya HTML? anggap aja kekasih gelap...

kenapa gw bilang si HTML ini pacarnya CSS karena dua kode ini selalu berduaan mulu..kalah gw T_T

Kalo ada HTML pasti ada si CSS...gitu

HTML tanpa CSS tampilanya ancurr...

CSS tanpa HTML kurang sreg...

Karena emang dasarnya si HTML ini dilengkapin sama CSS biar jadi rapih

lu pasti sering liat kode HTML yang ada div div nya kan? nah si kode div ini tempat si css ngebungkus HTML

contoh:

berikut ini kode css

.breadcrumbs {
border:1px solid #eee;
padding:3px 5px 5px 10px;
margin:10px auto;
font-size:11px;
color:#595959;
width:96.5%;
background:#fff;
}

dan kode ini HTML tanpa CSS

<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>Posts filed under <data:blog.pageName/></span>
</b:if>

Dan ini HTML yang udah dibungkus CSS

<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>

Nah si HTML ini dibungkus pake judul CSSnya aja contoh .breadcrumbs kodenya jadi <div class='breadcrumbs'>

Ohiya perlu diperhatiin tanda didepan CSS ada titik (.) tanda titik ini disebut class jadi <div class='breadcrumbs'>

nah Tanda didepan css juga ada yang hashtag (#) tanda ini disebut ID jadinya <div id='breadcrumbs'>

pokoknya pasangan titik (.) itu class
pasangan hashtag (#) itu id

udah ngerti kan...? udah aja ya...

kalo masih belum ngerti berguru aja di w3schools

Lanjut cara edit template blogger super mudah pake inspect elemen

kata siapa sih edit template itu susah? kata nubie lah.. ohiya bener juga

tapi sebenrnya edit template blogger itu mudah lohh, gak kaya theme wordpress hahay

untuk edit template hanya untuk tampilan design luar (antarmuka blog) itu sebenernya cuman perlu mengerti dasar dasar dari HTML sama css, sampa disini mungkin lu udah gw anggap ngerti lah ya CSS dikit dikit.

buat ngerubah tampilan template adsense it sebenernya gampang kok, gaperlu lagi harus gani kode trus save, trus liat. NO..

Mari kita edit template secara real, realnya adalah begitu kita ganti css, si template bakal berubah.

cara ini dinamakan Inspect Elemen? apatuh inspect elemen? coba buka blog lu trus klik kanan, bakal muncul tampilan trus pilih dah yang Inspect elemen

berikut nih gw ajarin

pertama tama klik kana trus klik inspect elemen

nah disitu bakal tampil isi dari blog lu, kalo yang kiri itu HTML yang kanan CSS

nahh trus coba klik icon find tuh, trus arahin deh ke bagian bagian blog yang mau dirubah tampilahnya, seperti gambar dibawah

Klik gambar untuk memperbesar

nah kalo lu liat disitu udah keluar HTML dan CSSnya, tuh dipojok kanan bawah si CSS, coba deh lu ubah ubah CSSnya entah itu warna atau angkanya..

pasti bankalan berubah langsung..

ohiya kalo udah dirasa pas dengan yang diinginkan, jangan lupa buat kopi kode yang di CSS itu ke template blogger, apus kode yang sebelumnya

Kesimpulan dari edit template ala ala inspect elemen

Ohiya sedikit saran aja, kalau mau edit template atau redesign template blogger..Buat templatenya sesederhana mungkin...dampak template yang sederhana selain jadi loadingnya cepet juga enak pas dibaca.. Karena simple is kill1ng.

Hindarin edit template yang mencolok, atau rame yang kek pasar malem... Dampak template yang terlalu mencolok dan rame itu mirip kek lu lagi tidur malem lampunya dimatiin, pas lu bangun lampunya terang, apa yang lu rasain? OMG my eyes pedess

nah gitu..

jadi edit template sesederhana mungkin, dengan warna yang enak diliat mata...pake warna yang itu ajatuh yang lagi ngetren... Flat color

Membuat Saluran Khusus (Custom Channels) Adsense Tertarget

noreply@blogger.com (Deddia Permana) — Thu, 21 Jan 2016 13:32:00 +0000

Salah satu fitur google adsense yakni custom chanel atau sering disebut saluran khusus adsense, merupakan fitur untuk memantau performa iklan adsense kamu secara spesifik dari tiap-tiap iklan yang ada.

Yang mana jika di (performance reports) laporan perfoma hanya menampilakan data data dari keseluruhan jumlah iklan dan tidak terperinci. Tetapi dengan menggunakan custom chanel data-data performa iklan seperti, jumlah klik, ctr, cpc dan coverage akan ditampilkan terperinci, dan spesisfik untuk masing-masing iklan yang ada di blog kamu

Pada artikel kali ini saya akan menjelaskan bagaimana membuat custom chanel dan cara menargetkan yang benar -benar tertarget.

Apa itu Custom Channels dan apa kegunaannya?

Custom Channels(Saluran khusus) merupakan salah satu cara ampuh memonitor performa iklan google adsense yang kamu punya, juga menjadi cara ampuh meningkatkan pendapatan dengan cara menargetkan iklan ke pihak pengiklan.

Fungsi Saluran Khusus (Custom Channel) Google Adsense

Banyak manfaat dari menggunakan custom channel untuk unit iklan adsense kamu, tidak hanya untuk memonitor setiap iklan tetapi masih banyak lagi kegunaanya seperti berikut:

1. Memantau Performa setiap unit Iklan adsense

Seperti yang sudah dijelaskan diatas, membuat custom chanel untuk iklan adsesne berguna untuk memantau masing masing performa iklan.

contoh iklan yang kamu pasang di blog berjumlah 3 unit:

a. diatas artikel 300x250
b. disidebar kanan 300x600
c. dibawah artikel 336x280

jika kamu tidak membuat custom chanel untuk masing masing iklan diatas, maka laporan performa pada adsense akan menampilkan informasi dari keseluruhan iklan diatas.

tetapi jika kamu membuat custom channel untuk masing-masaing iklan diatas, maka hasil laporan performa pada adsense akan terperinci dan spesifik untuk masing-masing iklan diatas

jika kita membuat custom channel untuk masing-masing iklan akan seperti ini modelnya

a. Custom chanel judul "iklan diatas artikel" untuk iklan diatas artikel 300x250
b. Custom chanel judul "iklan disedebar" untuk iklan disidebar kanan 300x600
c. Custom chanel judul "iklan dibawah artikel" untuk iklan dibawah artikel 336x280

Kita dibolehkan untuk membuat maksimal 500 custom chanel di google adsense, ya cukup lah untuk orang yang punya blog lebih dari satu

2. Menaikan Pendapatan Adsense dengan Targetable Ads

Dengan mencentang targetable ads pada custom channel yang kamu buat, maka pihak adsense akan akan memberikan informasi dan menampilkan custom channel tersebut ke pengiklan/advertisers di adwords.

ketika pengiklan tertarik dengan custom channel kamu, entah itu dari deskripsi, letak iklan, ataupun ukuran iklan, maka si pengiklan akan memasang iklannya pada custom chanel kita

3. Menaikan Sekaligus Menstabilkan Nilai CPC/BPK Adsense

Dengan cara membuat custom channel yang tertarget dan jika banyak dari pengiklan ingin mengiklankan di blog anda maka nilai lelang akan naik, otomatis hanya iklan dengan harga cpc/bpk tinggi yang akan tampil

lebih lengkap mengenai lelang iklan adsense baca disini https://support.google.com/adsense/answer/160525?hl=id

Cara Membuat Saluran Khusus (Custom chanel) Adsense Tertarget

Sebelum kamu membuat custom chanel di google adsense, pastikan kamu sudah membuat unit iklan. Metode yang saya gunakan yakni dengan cara membuat custom chanel untuk setiap unit iklan dengan berbeda-beda tempat, dan berbeda-beda deskripsi. Hal ini berguna untuk menaikan harga lelang iklan sehingga hanya iklan yang cpc/bpk tinggi yang tampil

Karena kita akan membuat custom channel tertarget untuk pengiklan/advertiser, maka kita harus memberikan informasi yang tertarget pula dari blog kita untuk custom channel yang kita buat. informasi ini kita akan tuliskan di bagian deskripsi custom channel.

Login google adsense kamu, pada bagian My Ads klik Custom Channels kemudian klik New custom channels

Keterangan dari gambar

1. isi dengan judul custom channel, judul inilah yang akan dilihat oleh pengiklan adwords, buatlah judul yang jelas dan padat, contoh diatas dengan judul "dibawah artikel 336x280"

2. pilih iklan yang akan dimasukan ke kustom channel

3. beri centang bagian ini untuk mentargetkan custom channel

4. isi dengan "semua halaman" untuk seluruh artikel blog. atau isi dengan "halaman beranda" jika hanya untuk bagian beranda/homepage

5. pilih dimana letak iklan kamu berada, jika iklan kamu ada dibawah maka bottom, jika ada diatas maka top

6. isi dengan deskripsi custom chanel kamu. disinilah cara jitu untuk menargetkan iklan kamu ke pengiklan. dengan deskripsi yang jelas dan tertaget maka semakin menarik dimata pengiklan.

Kita akan membuat custom channel tertarget dari deskripsi yang kita berikan, pada bagian deskripsi inilah kita menjelaskan sedikit tentang blog, ukuran iklan dll.

Saya menggunakan google analytics sebagai sumber informasi untuk deskripsi custom channel. Pada google analitycs saya mengambil informasi mengenai jenis kelamin, umur, dan minat pengunjung di segmen pasar. dari google analytics. seperti berikut

untuk melihat minat pengunung di segmen pasar, sebelumnya kamu harus mengkoneksikan akun google adsense mu dengan google analitycs

sehingga dari data-data diatas saya mendapatkan deskripsi berikut ini

Iklan ini berukuran 336x280 tampil diseluruh halaman artikel. Minat pengunjung di segmen pasar yakni, wisata/hotel dan akomodasi. Pengunjung 93% laki-laki, umur 63% 18-24 tahun

7. pilih "Indonesian" jika blog kamu berbahasa indonesia

Kesimpulan

Walaupun saya bukan pengguna profesional di bidang google adsense, tetapi sudah banyak yang membuktikan menggunakan custom chanel dapat meningkatkan pendapatan adsense hingga 400% tentunya ini tergantung dari cara menargetkan custom chanel mu dan juga niche blog kamu.

salah satu ilmu pasti untuk meningkatkan pendapatan adsense adalah trafik, kamu harus punya trafik banyak ke blog kamu.

Terimakasih dan semoga bermanfaat, jangan lupa untuk like and share oke

Cara Mudah Membuat Privacy Policy Pada Blog

noreply@blogger.com (Deddia Permana) — Fri, 10 Jul 2015 19:10:00 +0000

Cara Mudah Membuat Privacy Policy Pada Blog - Membuat blog menjadi seperti profesional tidak hanya dari konten berkualitas yang disediakan namun juga harus didukung dengan beberapa hal yang akan menambah blog anda terlihat profesional atau setidaknya terlihat bahwa pemilik blog itu benar benar terlihat niat dengan blognya, salah satu hal yang dimaksud adalah mempunyai sebuah laman statis sebuah privacy policy. apa itu privacy policy? Privacy policy adalah sebuah dokumen hukum yang menerangkan beberapa atau semua cara sebuah blog/website mengumpulkan, menggunakan, mengungkapkan dan atau mengelola data pengunjung blog/website. isi dari privacy policy itu sendiri tergantung pada hukum yang berlaku. Banyak jaringan periklanan yang mana mereka membutuhkan laman privacy yang tertera pada blog/website.

Salah satu jaringan pengiklannan google adsense memiliki syarat mutlak untuk mempunyai sebuah laman berisi privacy policy. Banyak blog yang ditolak oleh google adsense karena alasan difficult navigation/ navigasi yang sulit diantaranya karena tidak memiliki laman privacy policy karena faktor itulah banyak blog yang akan mempersiapkan untuk mendaftar ke jaringan pengiklanan google adsense memilih untuk menambahkan sebuah laman privacy policy ke blog mereka. dan juga ini menjadi faktor di approve/ terimanya sebuah blog oleh google adsense

Menambahkan sebuah privacy policy tergolong mudah seperti judul post ini cara mudah membuat Privacy Policy, tidak perlu susah-susah membuatnya dengan tulisan sendiri karena sudah ada sebuah tool privacy generator seperti privacy policy online yang akan langsung membuatkan privacy policy untuk blog anda.

Cara Membuat Privacy Policy dengan Privacy Policy Generator

1. silakan buka alamat Privacy Policy Online
2. setelah itu pada halaman depan anda akan disuruh mengisikan data data pada formulir privacy policy seperti contoh untuk blog saya

3. setelah selesai mengisi data formulir silakan klik tombol generate policy
4. Langkah terakhir adalah copy privacy policy kemudian paste kedalaman posting statis (Laman/Page) kemudian save dengan judul Privacy policy. anda bisa menaruh link posting statis privacy policy anda di menu navigasi anda atau juga bisa menaruh pada footer seperti blog ini

Demikian artikel dari saya kali ini tentang cara mudah membuat Privacy Policy untuk blog. Terima kasih dan semoga dapat bermanfaat untuk anda. Silahkan berikan tanggapan dikotak komentar jika ada yang belum dimengerti.

Cara Memasang Widget Instagram di Blog

noreply@blogger.com (Deddia Permana) — Fri, 10 Jul 2015 00:25:00 +0000

Cara Memasang Widget Instagram di Blog - salah satu mempercantik tampilan blog adalah dengan menambahkan widget-widget yang menarik pada sidebar, salah satunya yakni widget instagram untuk blog. munkin untuk anak muda pengguna iphone atau android sudah tidak asing lagi dengan yang namanya instagram. aplikasi media sosial yang banyak digunaknan oleh seseorang untuk berbagi foto maupun video mereka yaitu instagram. instagram memberikaan layanan kepada penggunana untuk mengambil foto langsung atau dengan mengupload foto yang sudah ada dan kemudian membagikannya ke berbagai jejaring media sosial termasuk milik instagram sendiri. pengguna instagram diberikan bebera fitur seperti untuk mengedit foto, memberikan fiilter, dan membagikan ke jejearing media sosial seperti facebook, twitter, maupun aplikasi path. istagram memliki beberapa kesamaan dengan twitter seperti penggunaan hastags, followers, maupun following.

DEMO WIDGET INSTAGRAM

Sebenarnya instagram tidak memiliki official widget untuk ditambahkan pada blog namun hal tersebut tidak menjadi masalah karena anda dapat menggunakan layanan pihak ketiga untuk menambahkan widget instgram di blog seperti SnapWidget, Snapwidget memungkinkan anda untuk menambahkan widget instagram kedalam blog dengan menampilkan foto dari akun instagram anda atau berdasarkan hastags, layanan snapwidget ini memberikan banyak pilihan untuk menampilakan foto dalam galeri seperti grid, slideshow, board dll. memasang Widget instagram pada blog menambah menarik dan unik tampilan blog terlebih lagi jika foto galeri yang ditampilkan memiliki hubungan dengan konten blog. untuk memasang widget ini silakan ikuti tutorial berkut:

Menambah Widget Instagram di Blog

1. silakan buka alamat web SnapWidget
2. silakan isikan data anda pada formulir seperti pada gambar berikut

Username : isikan dengan username akun instagram anda
Hastags : jka anda hanya ingin menampilkan foto dari akun anda, biarkan kosong pada kolom hastags
Widget type : silakan pilih sesuka hati anda, Grid untuk tampilan galeri, slideshow untuk tampilan slide
Thumbnail size : 100px (sesuaikan dengan kebutuhan anda)
Layout : 3x3
Photo border : No
Background color : silakan pilih sesuka anda (kosongkan jika ingin tanpa warna background)
Photo padding : 5px
Hover effect : adalah efek ketika kursor menyentuh foto (pilih sesuka anda)
Sharing buttons : yes
Responsive : yes

3. setelah selesai silakan klik tombol "GET WIDGET" untuk mendapatkan kode widget instagram
4. Copy kode widget kemudian tambahkan widget keblog. Layout >> add a gadget >> Html/javascript kemudian paste dan save widget anda.
5. selamat widget instagram sudah terpasang pada blog anda

cara mengatasi akun twitter suspended terbaru

noreply@blogger.com (Deddia Permana) — Wed, 08 Jul 2015 18:27:00 +0000

cara mengembalikan akun twitter suspended atau ditangguhkan. salah satu situs jejaring sosial media yang digandrungi adalah twitter sebagai media untuk mencurahkan apa yang sedang dialami melalui tweet pada twitter maupun sebagai media untuk saling terkoneksi sesama teman twitter atau yang biasa disebut mention. sebagai media sosial yang sering digunakan banyak permasalah yg dialami oleh pengguna twitter, seperti pada posting artikel saya sebelumnya cara mengatasi akun twitter autoretweet/bot/auto follow. dan permasalan lain yang sering dialami oleh pengguna akun twitter yakni akun twitter suspended/ditangguhkan. yang akan saya bahas pada artikel ini yakni cara mengatasi akun twitter yang kena suspend, seperti yang saya alami beberapa waktu lalu saat sedang membuka akun twitter pada android tiba tiba following menjadi 0 dan followers menjadi 0 tentunya saya mengira hanya aplikasinya yang error tetapi saat saya membuka twitter lewat desktop/komputer ternyata saat ingin login akun twitter saya di suspended/ ditangguhkan tentu ini menjadi pertanyaan kenapa akun saya bisa di suspend oleh pihak twitter.

akun twitter suspended kenapa? akun twitter suspended artinya apa? banyak alasan kenapa akun twitter anda kena suspend oleh twitter berikut ini beberapa faktor yang dijelaskan oleh pihak support twitter mengenai akun twitter yang suspended:

1. Spam

Sebagian besar akun twitter yang di suspended/ditangguhkan pihak twitter karena digunakan untuk spam, atau sekedar akun atas nama palsu, atau memberikan risiko ketidakamanan untuk Twitter dan semua pengguna twitter. dan akun tersebut bertentangan dengan kebijakan twitter yang mengakibatkan disuspend. tetapi untuk beberapa kasus akun seseorang dissuspend karena kesalahan dari pihak twitter itu sendiri.

2. Akun Membahayakan

dalam beberapa kasus kenapa akun anda disuspend adalah karena pihak twitter menduga akun telah dihacked atau disalahgunakan oleh pihak lain yang menghacked, jadi untuk melindungi data dari akun tersebut pihak twitter men suspend sampai benar benar pemilik aslinya mengkonfirmasi.

3. Tweet Kasar Atau yang Tidak Sesuai Dengan Kebijakan Twitter

pihak twitter mungkin men suspended akun yang telah dilporkan sebagai tindakan yang dilarang atau penyalahgunaan twitter, seperti akun terlibat dengan dalam perilaku kasar, mengirimkan tweet beruapa ancaman keorang lain, atau meniru akun lain. dengan ini twitter twitter bisa menangguhkan/suspended akun sementara atau secara permanen

Mengembalikan Akun Twitter yang di Suspended

anda bisa mengajukan banding kepihak twitter untuk mengembalikan akun twitter anda yang disuspended, berikut cara mengembalikan akun twiter yang suspended berdasarkan jenis permasalahannya :

1. Anda belum memverifikasi email dan nomor telfon
Jika Anda login dan melihat petunjuk yang meminta Anda untuk memberikan nomor telepon atau mengkonfirmasi alamat email Anda, ikuti petunjuk itu untuk mendapatkan kembali akun Anda anda yang di suspended/penangguhan.

2. Melakukan banding untu mengembalikan akun twitter anda
jika cara sebelumnya bukan permasalahan kenapa akun anda di suspended. cara berikut ini dapat menjadi jawaban untuk kembali mendapatkan kembali akun twitter anda. cara berikut ini dengan mengisi formulir aduan anda untuk pihak twitter untuk mengembalikan akun twitter, silakan ikuti langkah berikut:

buka alamat tautan banding dengan twitter disini
isikan kolom banding dengan data diri anda dan deskripsi kenapa akun anda disuspend

berikut silakan isikan data pada kolom

1. where are you experience this issue : twitter
2. Description of problem :

"Hi Twitter, I'm @Nama twitter anda My Account was suspended because something that i don't know. i'm pretty sure there is missunderstanding, Please remove the suspend and bring my account back. Thank you"

3. isikan dengan data diri termasuk email
5. masukan nomor handphone anda
5. klik submit untuk mengirimkan form aduan banding ke pihak twitter

Setelah anda mengirimkan form aduan banding diatas, twitter akan mengerim email ke anda. untuk itu buka email dari twitter tersebut yang akan menjelaskan apa kesalahan anda, dan anda mengakui tidak akan melakukan itu lagi. kemudian balas email tersebut dengan :

I apologize and promise not to do that again. I understand your policies and will not violate in any prohibited following behavior. Thank you"

silakan tunggu hingga 2-5 hari sampai twitter mengaktifkan kembali akun twitter anda

Demikian artikel dari saya kali ini tentang cara mengembalikan akun twitter yang di suspended atau ditangguhkan. Semoga dapat bermanfaat untuk anda. Silahkan beriakan tanggapan dikotak komentar jika ada yang belum dimengerti

Mengatasi Komentar OpenID Error Ups itu Kesalahan

noreply@blogger.com (Deddia Permana) — Wed, 08 Jul 2015 11:16:00 +0000

Mengatasi komentar openid error ups itu kesalahan- berkomentar adalah salah satu cara menanggapi sebuah artikel yang bermanfaat atau menarik bisa juga sebagai cara untuk menanyakan hal yang masih tidak dimengerti, salah satu cara berkomentar pada blog yang disediakan oleh google adalah dengan menggunakan pilihan sebagai openID untuk berkomentar. pilihan berkomentar sebagai openid tidak lain tidak tidak bukan adalah cara para blogwalker untuk mencari backlink dari berbagai blog dofollow untuk meningkatkan link juice blog mereka. saya sebagai orang yang suka berkomentar menggunkan openID sempat mengherankan karna beberapa lalu saat ingin menanggapi sebuah artikel dengan berkomentar menggunkann openID ternyata terjadi error tidak bisa berkomentar memakai openid, tidak jelas akibatnya apa hanya tertulis "ups itu sebuah kesalahan" pada saat ingin berkomentar. setelah saya mencari tahu ternyata penyebab erorrnya berkomentar menggunkanan openID ups itu sebuah kesalahan berasal dari pihak blogger yang telah menonaktifkan berkomentar menggunakan openid, tentunya hal ini akan sangat merugikan bagi para blogger pemburu backlink dengan memanfaatkan Berkomentar OpenID, karena faktor inilah banyak perbincangan dibeberapa grup dan forum tentang errornya komentar openid mulai dari penyebabnya blogger menonaktifkan berkomentar openID yang diduga sebagai salah satu penyalahgunaan dengan dengan openid, tidak salah lagi Spamming backlink adalah bentuk penyahgunaan openid.

sebenarnya masih belum jelas alasan penyebab utama kenapa blogger menonaktifkan komentar menggunkan Openid, yang jelas para blogger menduga faktor di nonaktifkannya karena sebagai media spamming komentar. tentunya hal ini merugikan bari seorang blogger pemburu backlink karena tidak bisa lagi berkomentar dengan Open id untuk mencari backlink, dampak yang dirasakan bagi blog yang akan dikomentar juga terjadinya link aktif pada komentar sebagai pengganti OpenID untuk mencari backlink yang tentunya merugikan. untuk itu pada artikel ini saya akan menjelaskan cara untuk tetap bisa berkomentar OpenID berikut tipsnya:

Trik Agar Tetap Bisa berkomentar OpenID

Sebenarnya pihak blogger tidak benar-benar menghapuskan pilihan berkomentar openID tetapi hanya menonaktifkan pada blogger. lalu apa masih bisa berkomentar dengan OpenID? tetntunya masih bisa berkomentar dengan openid menggunakan third-party atau pihak ketiga penyedia layanan Openid seperti "Stack Exchange" berikut cara agar dapat menggunakan open id dengan stack exchange:

Langkah pertama

silakan kunjungi website STACK EXCHANGE untuk melakukan pendaftaran akun untuk openid. pada halaman klik tombol "Register" setelah itu isikan data pendaftaran

Langkah kedua

setelah melakukan pendaftarn segera cek email yang didaftarkan pada langkah pertama, akan ada email untuk konfirmasi dari stack exchange. dan setelah mengklik tautan yang diberikan pada saat konfirmasi. anda akan lansung dialihkan kehalaman aku stack exchange anda.

Langkah ketiga

pada halaman akun stack exchange anda klik "Use Your Own Url to login" dan akan muncul kode html openid untuk dipasang pada template

Akan muncul kode html openid anda sebagai berikut:


<link rel="openid2.provider" href="https://openid.stackexchange.com/openid/provider">

<link rel="openid2.local_id" href="https://openid.stackexchange.com/user/5fdd1dc8-5a28-475c-8305-3a7cac3bce15">

perlu diperhatikan kode yang sudah didapatkan belum ditutup dengan (/) yang akan mengakibatkan error saat disave pada template. untuk itu sialakan tambahkan (/) pada akhir kode menjadi seperti ini



<link rel="openid2.provider" href="https://openid.stackexchange.com/openid/provider"/>

<link rel="openid2.local_id" href="https://openid.stackexchange.com/user/5fdd1dc8-5a28-475c-8305-3a7cac3bce15"/>

Langkah keempat

setelah itu copy kode html openid kemudian paste dibawah <head> template blogger anda. jangan lupa untuk mengahapus kode html openid bawaan blogger, kode html openid bawaan blogger seperti ini


<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

setelah itu save template anda, selamat anda telah berhasil mengaktifkan openid menggunakan pihak ketiga stack exchange. untuk pertama kali berkomentar setelah menggunakan openid anda akan diminta konfirmasi apakah anda akan menghubunkan blogger anda dengan aku stack exchange. klik saja setuju. untuk mencoba apakah sudah berhasil memasang openid layanan stack exchange silakan berkomentar di artikel ini menggunkan openid.

memasang fungsi google search pada kotak pencarian blog

noreply@blogger.com (Deddia Permana) — Mon, 06 Jul 2015 18:40:00 +0000

memasang fungsi google search pada kotak pencarian blog- jika pada sebelumnya saya telah memposting tutorial memasang google custom search pada blog dengan menggunakan search box bawaan google cse(custom search engine) pada tutorial ini agak berbeda karna tidak menggunakan bawaan google cse melainkan menggunakan kotak pencarian modifikasi sendiri seperti yang telah saya posting pada artikel sebelumnya, membuat kotak pencarian elegan pada blog. sebernarnya jika menggunakann google search box bawaan cse bisa juga dimodifikasi tetapi hanya sebatas untuk merubah warna, tulisan, dan jenis tampilan jadul atau moderen berbeda jika menggunakan modifikasi kotak pencarian sendiri yang bisa menkustom tampilan sesuka hati dengan menambahkan beberapa efek css3.

perbedaan lainnya jika menggunakan bawaan google search box yaitu pada layout untuk menampilakan hasil pencarian menggunakan "two column" atau dua halaman yang menhubungkan antara halaman tempat hasil pencarian dan halaman tempat pada search box itu sendiri tetapi masih pada halaman blog. berbeda jika menggunakan tutorial ini selain bisa menggunaakan kotak pencarian yang diinginkan layout yang digunakan juga hanya menggunakan "result only" atau hanya halaman hasil pencarian, biasanya cara ini berguna digunakan jika anda menempatkan kotak pencarian bukan pada area widget sidebar melainkan pada bagian menu dropdown anda bisa menghilangkan bagian sidebar dan hanya menyisakan halaman hasil pencarian secara penuh tentunya dengan menggunakan tag pengkondisian.

berikut silakan menyimak tutorial menggunakan fungsi google search pada kotak pencarian blog. untuk langkah pertama anda harus mendaftar google search custom engine terlebih dahulu.

Langkah-langkah mendaftar google custom search

1. silakan kunjungi alamat web google custom search www.google.com/cse/ silakan login menggunakan akun gmail anda

2. setelah itu klik tombol "add" utnuk menambahkan blog anda pada kustom search engine google

3. setelah mengklik tombol add, anda akan ditamppilkan pada halaman form pendaftaran seperti berikut
1. masukan url blog anda tanpa http://
2. masukan judul untuk nama search engine anda
3. kemudian klik "Create"

4. setelah mengklik create anda akan dialihkan kehalaman berikut, selanjutnya silakan mengklik tombol control panel

5. setelah anda mengklik tombol control panel anda akan dialihkan kehalaman "Setup" pada tahap ini silahkan klik tombol "Search Engine ID" dan copy paste ke ke notepad untuk digunakan nanti pada kotak pencarian. setelah itu klik tombol "Advanced" dan pada option search engine pilih "West European Latin-1 (ISO-8859-1)"

6. pada menu dibelah kiri klik pilihan "Look and Feel" dan pada bagian layout pilih "Results only" jika sudah silakan klik tombol Save & Get Code

7. pada langkah terakir anda akan dialihkan kehalaman berikut, silakan copy kode yang sudah didapatkan dan kemudian buat halaman posting page statis (halaman statis bukan post) pada blog anda. kemudian paste pada editor HTML, kemudian silakan memberi judul seperti hasil pencarian kemudian publish. setelah itu catat url posting yang baru dibuat tersebut.

Memasang fungsi kode ke kotak pencarian

pada langkah memasng fungsi google custom search engine pada kotak pencarian yang sudah didapat tadi, ikuti langkah berikut :

saya ambil contoh pada posting saya macam macam kotak pencarian elegan saya ambil tampilan kedua, kode Html pada search box tersebut tampak seperti berikut ini


<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_blank'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'>Search</button>
</form>

pada kode bagian ini



<form action='/search' id='search-form' method='get' target='_blank'>

ganti dengan kode berikut ini



<form action='Url Posting Statis pada langkah ketujuh' id='search-form' method='get' target='_blank'>

kemudian setelah kode diatas tambahkan kode berikut ini



<input type='hidden' name='cx' value='Kode Search Engine ID dari Langkah Kelima' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />

jika secara keseluruhan setalah perubahan dan penambahan kode Htmlnya tampak seperti berikut ini



<div id='search-box'>
<form action='Url Posting Statis pada langkah ketujuh' id='search-form' method='get' target='_blank'>
<input type='hidden' name='cx' value='Kode Search Engine ID dari Langkah Kelima' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'>Search</button>
</form>

dan berikut secara keseluruhan dengan css



<style>

#search-box { position: relative; width: 100%; margin: -15px 0px -20px 0; }
#search-form{ height: 40px; border: 1px solid #999; border-radius: 5px; background-color: #fff; overflow: hidden; }
#search-text{ font-size: 14px; color: #ddd; border-width: 0; background: transparent; }
#search-box input[type="text"]{ width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; }
#search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #4d90fe; border-radius: 0px 5px 5px 0px; cursor: pointer; }

</style>

<div id='search-box'>
<form action='Url Posting Statis pada langkah ketujuh' id='search-form' method='get' target='_blank'>
<input type='hidden' name='cx' value='Kode Search Engine ID dari Langkah Kelima' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'>Search</button>
</form>

selamat anda telah berhasil menambahkan fungsi google search kedalam kotak pencarian modifikasi.
sekedar saran jika anda memasng kotak pencarian pada menu bukan pada sidebar, anda bisa memanfaatkan tag pengkondisian untuk menyembunyikan sidebar dan hanya akan tampil halaman hasil pencarian secara penuh seperti blog ini untuk menyembunyikan sidebar pada halaman posting statis tambahkan tag kondesional berikut ini dibawah </style> pada template

<b:if cond='data:blog.url == "URL POSTINGAN STATIS UNTUK SEARCH RESULTS"'>
<style type='text/css'>
#sidebar-wrapper{ display: none !important; }
#main-wrapper, .post { width: 100%;}
</style> </b:if>

Menambahkan kotak pencari pada blog: lengkap keren

noreply@blogger.com (Deddia Permana) — Tue, 30 Jun 2015 16:05:00 +0000

Menambahkan kotak pencari pada blog: lengkap keren- memberikan kemudahan bagi pengunjung untuk bernavigasi tidak hanya dari tampilan blog yang sederhana, navigasi suatu blog menjadi faktor dasar yang harus ada pada elemen blog, navigasi tidak hanya berbentuk sebuah menu list, navigasi halaman ataupun dropdown tetapi sesuatu yang memudahkan pembaca blog dalam menemukan atau mencari artikel/postingan pada laman blog itu tersendiri, salah satunya adalah kotak pencarian, apa itu gadget kotak pencarian blog? ketika anda membuka google untuk mencari suatu informasi pasti anda akan menuliskan kata kunci pada kotak pencarian google kemudian akan tampil hasil dari kata kunci yang anda maksud sama halnya dengan kotak pencarian pada blog bedanya hanya kotak pencarian pada blog hanya menampilakan queri/ yang hanya terdapat pada blog anda. pada artikel ini saya akan memberikan beberapa gadget kotak pencarian yang sudah dimodifkasi menjadi lebih menarik dan keren

Cara menggunakan kotak pencarian google pada blog

Keuntungan menggunakan kotak pencarian/ search pada blog

keuntungan menggunakan kotak pencarian pada blog tidak hanya menambah unsur ekstetika pada blog, melainkan dapat mempermudah pengunjung untuk mencari artikel sebelumnya pada blog anda, ataupun ada pembaca blog anda yang selalu mengikuti perkembangan artikel blog yang kemudian ingin mencari artikel sebelumnya yang pernah blog anda publish, bukankah menjadi lebih mudah ketika tinggal menulis kata kunci yang dimaksud pada kotak pencarian dari pada harus cape cape mencari satu persatu artikel yang dicari. Keuntungan lain menambahkan kotak pencarian pada blog anda yaitu menambah jumlah pageview harian dan meningkatkan pembaca untuk tetap berlama lama mencari artikel pada blog. dan menambah seo dalam hal navigasi halaman.

jika pada dasarnya gadget kotak pencarian blog hanya terlihat kaku dan kurang menarik anda dapat mengkustomisasi sendiri menjadi lebih menarik dan keren, tapi jika anda belum mengenal betul css untuk mengkustom dan tidak mau ribet, berikut saya sediakan beberapa gaya kotak pencarian yang menarik dan keren:

7 gaya kotak pencarian/search box blog

Tampilan pertama


<style>

#searchbox {

background: #d8d8d8;

border: 4px solid #e8e8e8;

padding: 20px 10px;

width: 250px;

}

input:focus::-webkit-input-placeholder {color: transparent;}

input:focus:-moz-placeholder {color: transparent;}

input:focus::-moz-placeholder {color: transparent;}

#searchbox input {outline: none;}

#searchbox input[type="text"] {

background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;

border-width: 1px;

border-style: solid;

border-color: #fff;

font: bold 12px Arial,Helvetica,Sans-serif;

color: #bebebe;

width: 55%;

padding: 8px 15px 8px 30px;

}

#button-submit {

background: #6A6F75;

border-width: 0px;

padding: 9px 0px;

width: 23%;

cursor: pointer;

font: bold 12px Arial, Helvetica;

color: #fff;

text-shadow: 0 1px 0 #555;

}

#button-submit:hover {background: #4f5356;}

#button-submit:active {background: #5b5d60;outline: none;}

#button-submit::-moz-focus-inner {border: 0;}

</style>



<form id="searchbox" method="get" action="/search">

<input name="q" type="text" size="15" placeholder="Type here..." />

<input id="button-submit" type="submit" value="Search" />

</form>

Tampilan kedua



<style>

#search-box {

position: relative;

width: 100%;

margin: -15px 0px -20px 0;

}

#search-form{

height: 40px;

border: 1px solid #999;

border-radius: 5px;

background-color: #fff;

overflow: hidden;

}

#search-text{

font-size: 14px;

color: #ddd;

border-width: 0;

background: transparent;

}

#search-box input[type="text"]{

width: 90%;

padding: 11px 0 12px 1em;

color: #333;

outline: none;

}

#search-button {

position: absolute;

top: 0;

right: 0;

height: 42px;

width: 80px;

font-size: 14px;

color: #fff;

text-align: center;

line-height: 42px;

border-width: 0;

background-color: #4d90fe;

border-radius: 0px 5px 5px 0px;

cursor: pointer;

}

</style>



<div id='search-box'>

<form action='/search' id='search-form' method='get' target='_top'>

<input id='search-text' name='q' placeholder='Search here...' type='text'/>

<button id='search-button' type='submit'><span>Search</span></button>

</form>

</div>

Tampilan ketiga



<style>

#searchbox {

background: url(http://2.bp.blogspot.com/-Un3zhkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;width: 250px;height: 65px;

}

input:focus::-webkit-input-placeholder {color: transparent;}

input:focus:-moz-placeholder {color: transparent;}

input:focus::-moz-placeholder {color: transparent;}

#searchbox input {outline: none;}

#searchbox input[type="text"] {

background: transparent;

padding: 5px 0px 5px 20px;

margin: 10px 15px 0px 0px;

border-width: 0px;

font-family: "Brush Script MT", cursive;

font-size: 12px;

color: #595959;

width: 65%;

font-weight: bold;

display: inline-table;

vertical-align: top;

}

#button-submit {

background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;

border-width: 0px;

cursor: pointer;

margin-top: 10px;

width: 19px;

height: 25px;

}

#button-submit:hover {

background:url(http://1.bp.blogspot.com/pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;}

#button-submit:active {background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;outline: none;}

#button-submit::-moz-focus-inner {border: 0;}

</style>



<form id="searchbox" method="get" action="/search" autocomplete="off">

<input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />

<input id="button-submit" type="submit" value="" />

</form>

Tampilan keempat



<style>

#searchbox {

width: 240px;

}

#searchbox input {outline: none;}

input:focus::-webkit-input-placeholder {color: transparent;}

input:focus:-moz-placeholder {color: transparent;}

input:focus::-moz-placeholder {color: transparent;}

#searchbox input[type="text"] {

background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;

border: 2px solid #f2f2f2;

font: bold 12px Arial,Helvetica,Sans-serif;

color: #6A6F75;

width: 160px;

padding: 14px 17px 12px 30px;

border-radius: 5px 0px 0px 5px;

text-shadow: 0 2px 3px #fff;

transition: all 0.7s ease 0s;

}

#searchbox input[type="text"]:focus {

background: #f7f7f7;

border: 2px solid #f7f7f7;

width: 200px;

padding-left: 10px;

}

#button-submit{

background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;

margin-left: -40px;

border-width: 0px;

width: 43px;

height: 45px;

}

</style>



<form id="searchbox" method="get" action="/search" autocomplete="off">

<input name="q" type="text" size="15" placeholder="Enter keywords here..." />

<input id="button-submit" type="submit" value=" "/>

</form>

Tampilan kelima



<style>

#searchbox {

width: 280px;

background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat;

}

#searchbox input {outline: none;}

input:focus::-webkit-input-placeholder {color: transparent;}

input:focus:-moz-placeholder {color: transparent;}

input:focus::-moz-placeholder {color: transparent;}

#searchbox input[type="text"] {

background: transparent;

border: 0px;

font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;

font-size: 14px;

color: #f2f2f2 !important;

padding: 10px 35px 10px 20px;

width: 220px;

}

#searchbox input[type="text"]:focus {color: #fff;}

#button-submit{

background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;

margin-left: -40px;

border-width: 0px;

width: 40px;

height: 50px;

}

#button-submit:hover {

background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png);}

</style>



<form id="searchbox" method="get" action="/search" autocomplete="off">

<input name="q" type="text" size="15" placeholder="Enter keywords here..." />

<input id="button-submit" type="submit" value=" "/>

</form>

Tampilan keenam



<style>

#search-box {

    border: 1px solid #d2d2d2;

    background: none repeat scroll 0 0 #FFFFFF;

    padding: 10px;

    width: 186px;

}

#search-button {

    background: none repeat scroll 0 0 #359BED;

    border: 0 none;

    border-radius: 0 0 0 0;

    color: #FFFFFF;

    font-weight: 700;

    padding: 10px 20px;

}



</style>

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="40" type="text" placeholder="  Type to search "/>

<input id="search-button" value="Search" type="submit"/>

</form>

Cara menambahkan pada blog

1. pilih salah satu tampilan yang anda suka kemudian copy paste ke layout >>add a gadget>> html javascipt

Trik otomatis Share Artikel baru ke facebook dan twitter

noreply@blogger.com (Deddia Permana) — Wed, 24 Jun 2015 08:10:00 +0000

Trik otomatis Share Artikel ke facebook dan twitter- mengenalkan artikel blog kepada pembaca menjadi faktor wajib dalam membangun traffic ke blog anda, sebenarnya banyak cara untuk mengenalkan artikel ke pembaca selain melalui halaman pencarian google atau organic search engine pada halaman pencarian google tetapi cara ini tergolong sulit untuk sebuah blog baru. lalu, bagaimana sebuah blog baru mengenalkan artikelnya yang belum diindex oleh mesin pencari? salah satu trik mudah yang dapat dilakukan sebuah blog baru untuk mengenalkan artikelnya dengan memanfaatkan situs jejaring sosial media facebook, twitter, googleplus. contoh jejaring sosial yang banyak digunakan seperti facebook, dan twitter, nah pada artikel ini saya akan memberikan cara bagaimana sebuah artikel baru blog dapat dibagikan secara otomatis ke facebook dan twitter, bayangkan berapa banyak klik yang menunjuk kepada artikel baru blog anda dengan memanfaatkan akun jejaring sosial media milik anda dengan memposting tulisan artikel baru blog pada akun anda. semakin banyak friends/follower twitter facebook semakin besar pula kemungkinan posting anda akan dibuka.

salah satu hal dalam membangun traffic pengunjung blog untuk meningkatkan sebuah pagiveiw harian blog dibutuhkan trik mendatagangkan visitor, salah satunya yang sudah saya jelaskan diataas yaitu melalui jejaring sosial dengan memposting artikel tebaru anda pada akun jejaring sosial media. terlebih lagi jika posting yang anda buat tergolong posting menarik dan bermutu, memungkinkan lebih banyak yang mengunjungi blog anda melalui posting yang anda share ke jejaring media sosial ini akan berdampak baik bagi blog anda. jika pada artikel artikel sebelumnya saya memberikan trik auto share artikel terbaru ke twitter pada artikel ini sekaligus auto share ke facebook dan twiter.

untuk mempercantik dan menambah seo posting yang dishare di twitter dan facebook bisa menggunakan meta tag facebook open graph dan meta tag twitter card markup

cara memasang twitter card summary markup pada blog

Langkah otomatis membagikan artikel baru ke facebook dan twitter

jika pada umumnya men share artikel baru ke jejaring sosial media secara manual satu persatu ke twitter dan facebook tapi cara ini tergolong ribet dan banyak memakan waktu , maka untuk mempermudah share artikel terbaru ke jejaring sosial secara otomatis menggunakan aplikasi twitterfeed, berikut langkah menshare artikel melalui twitterfeed:

1. buka alamat http://twitterfeed.com lalu klik sign up untuk mendaftar
2. setelah mendaftar anda akan dialihkan kehalaman setting feed

pada feed name : isikan dengan judul yang anda inginkan
pada Blog URL or RSS : isikan dengan url blog sobat tambahkan pada akhir url dengan feeds/posts/default

contoh: http://www.tipsbloggerkita.web.id setelah ditambahkan menjadi http://www.tipsbloggerkita.web.id/feeds/posts/default

3. klik continue, pada halaman berikutnya pilih facebook dan twitter, dan memberikan akses terhadap twitterfeed untuk memposting di akun anda

4. klik create dan taraa twitterfeed akan menshare otomatis artikel blog anda yang baru publish

Hal penting yang harus dilakukan setelah membuat blog baru

noreply@blogger.com (Deddia Permana) — Sat, 20 Jun 2015 08:09:00 +0000

Hal yang perlu dilakukan setelah membuat blog baru - untuk seorang pemula yang baru membuat blog biasanya hanya membuat beberapa posting saja dan tanpa melakukan optimasi terhadap blog yang baru dibuat tersebut. pada tahap ketika sudah membuat beberapa posting biasanya akan muncul pertanyaan pertanyaan dalam pikiran yang sama seperti "hal apasih yang perlu dilakukan sehabis buat blog? atau gimana caranya blog muncul dihalaman pencarian? bagaimana mendatangkan pengunjung ke blog?" dari kebingunan itulah anda mulai mencari tahu bagaimana caranya, karena hal hal itulah optimasi ini penting untuk dialakukan pada blog baru anda.

Pada artikel kali ini saya akan menjelaskan hal penting apasajakah yang perlu dilakukan untuk blog yang baru dibuat. kenapa hal ini penting? pada dasarnya blog yang baru dibuat belumlah memiliki kriteria kesempatan untuk mendatangkan visitor/pengunjung ke blog anda. tetapi dengan optimasi berikut ini sudah bisa dijamin blog anda mulai kedatangan visitor, selain itu tujuan lain dari optimasi ini adalah untuk membuat blog muncul pada pencarian google, meningkatkatkan rangking alexa, seo friendly. berikut optimasi yang harus dilakukan:

1. Memilih template blog

Memilih template menjadi bagian penting dalam antarmuka blog karena mencerminkan penampilan blog itu sendiri, supaya penampilan blog enak dipandang mata banyak template template bagus yang disediakan untuk anda tetapi memilih template tidak lah hanya melihat seberapa bagus template itu dipandang mata namun terdapat faktor yang akan menjadikan blog menjadi seo friendly, berikut tips memilih template yang baik:

pilih template sesuai dengan topik blog
desain template rapih
template ringan ketika loading
memenuhi standar seo friendly
lebih baik lagi jika template sudah Responsive (Mobile Friendly)

2. Menjadikan blog seo friendly

Secara singkat pengertian SEO(search engine optimization) adalah serangkaian proses yang membuat blog anda menjadi urutan pertama atau muncul pada halaman pencarian google. untuk blog yang baru dibuat tentu belum memiliki standar seo yang baik dan masih harus dialkukan optimasi seo, hal ini menjadi bagian penting agar blog mendapatkan visitor.

baca : tehnik optimasi seo untuk blog yang baru dibuat

3. Mendaftarkan blog ke google webmaster tools

Untuk blog yang baru dibuat tentunya harus didaftarkan ke google webmaster tools, tujuan dari mendaftarkan adalah untuk mengelola blog anda sama halnya seperti dashbord blog tetapi untuk google webmaster tool lebih mendetail dalam memantau dan mengoptimalkan blog seperti jumlah artiekel yang sudah diindex, crawl error, bounce rate, data visitor. dan banyak lagi.

baca : cara mendaftarkan blog ke google webmaster tools

4. Mulai membuat artikel berkualitas secara rutin dan original(tidak copy paste)

Tujuan utama sebuah blog adalah memberikan informasi dalam bentuk artikel jadi artikel bisa dibilang menjadi jantung sebuah blog yang memberikan kehidupan diblog itu. syarat membuat artikel berkualitas adalah artikel benar benar ditulis asli dan tidak copy paste. mungkin untuk anda yang baru belajar menulis artikel untuk blog sebaiknya mencari refrensi untuk artikel yang akan anda buat, maksdunya mencari refrensi adalah misalkan anda ingin membuat tentang artikel seo blog tetapi sebelum menulis anda mencari tahu dan membaca tentang artkel seo blog itu di google, kemudian mulai menulis dengan sudut pandang dan ciri khas anda sendiri. seiring dengan berjalannya waktu dan semakin banyak artikel yang anda tulis maka kemampuan menulis anda akan meningkat dengan sendirinya.

5. Men submit sitemap/peta situs ke google, bing.

Sebuah blog yang baru dibuat tentunya sangat dianjurkan untuk men submit sitemap/ peta situs ke mesin pencari google maupun bing. fungsi ini amatlah berperan penting agar mesin pencari dapat dengan mudah meng-crawl/ merayapi semua artikel yang ada dalam blog anda yang memungkinkan lebih cepatnya pengindexan artikel anda.

baca : cara mensubmit sitemap ke search engine GOOGLE
baca : submit sitemap ke yahoo dan bing

6. Mempromosikan blog ke sosial media

Ada banyak cara untuk mengenalkan blog baru kita kepada orang lain. salah satunya adalah menggunakan sosial media sebagai wadah promosi seperti facebook, twitter, google dll. salah satu keuntungan mempromosikan blog adalah anda akan mendapakan visitor/pengunjung.

Widget bagikan artikel ke sosial media

cara membuat blog blogspot lengkap terbaru

noreply@blogger.com (Deddia Permana) — Fri, 19 Jun 2015 06:38:00 +0000

Cara membuat blog terbaru- Blog adalah kepanjangan dari web log yang sering digunakan para blogger sebutan untuk seseorang yang rajin nge-blog untuk memberikan informasi, blog menjadi salah satu sarana blogger untuk memberikan informasi dalam tulisan-tulisan yang dimuat menjadi sebuah artikel atau posting yang kemudian diterbitkan pada halaman web blog itu sendiri, salah satu penyedian layanan blog gratis yang paling sering digunakan yaitu blogspot dan wordpress, tapi pada artikel ini saya lebih menyarankan membuat blog pada blogspot karena lebih mudah digunakan untuk pemula blog dan juga memungkinkan blogger untuk mengedit, faktor lain adalah blogspot berasal dari google yang menjanjikan lebih untuk tampil pada halaman pencarian google. nge-blog juga menjadi tempat untuk bersilahturahmi (blogwaking : yaitu sebutan untuk aktivitas blogger yang saling berkomentar atau tautan) dan sebagai ajang unjuk gigi (mendesain blog semenarik mungkin). banyak orang yang menyalah artikan kalau blog dengan website adalah sama tetapi itu keliru, untuk mengetahuinya baca perbedan blog dengan website.

Jenis Jenis Blog

blog itu sendiri memiliki beberapa jenis dlihat dari dari konten atau bahasan yang dimuat pada blog, berikut beberapa jenis blog yang popular :

1. Blog Pribadi, bisa dibilang blog pribadi merupakan journal atau buku harian online yang dibuat untuk mencurahkan isi hati/kehidupan/maupun curhat.

2. Blog bisnis, fungsi utama dari jenis blog ini adalah untuk menghasilkan uang dari blog itu sendiri seperti adsense, afiliasi, amazon, dan iklan

3. Blog Informasi, adalah blog yang bermuat tetntang info info terkini dan merupakan wadah mencari informasi

4. blog penyedia konten download, blog jenis ini mengutamakan membuat konten yang memberikan sesuatu konten untuk di download

namun dari jenis jenis blog diatas memungkinkan juga suatu blog merangkup blog pribadi yang beriisi informasi informasi yang kemudian dapat menghasilkan uang.

Langkah Langkah membuat blog di blogspot

syarat utama membuat membuat blog pada blogspot adalah mempunyai akun email gmail, jika belum punya silakan baca cara membuat gmail untuk mendaftar blogspot. berikut saya pandukan untuk dengan mudah membuat blog pada blogspot :

1. buka alamat www.blogger.com kemudian login/masuk dengan akun email gmail
2. kemudian klik continue to blogger/lanjutkan blogger
3. pada halaman berikutnya kemudian klik tombol New Blog untuk mendaftarkan blog baru
4. pada form membuat blog ada info info yang harus dimasukan seperi

Title: isikan dengan judul blog yang anda inginkan
Address: isikan alamat address blog yang anda inginkan (akan ada pengecekan apakah alamat adrress sudah tersedia atau belum)
Template: pilih template sesuai keinginan anda (sesuaikan dengan tema blog yg anda mau)

Jika sudah selesai silakan klik Create Blog!

5. pada tahap ini anda sudah berhasil membuat blog.

untuk memulai membuat artikel/postingan di blog anda klik view blog >> new post. dan anda akan tampil pada halaman membuat artikel seperti ini.

Cara Membuat akun email gmail (Google mail) terbaru

noreply@blogger.com (Deddia Permana) — Thu, 18 Jun 2015 17:52:00 +0000

Cara membuat akun gmail google. salah satu dari banyak produk google salah satunya adalah layanan surel Gmail (Google mail) Keuntungan menggunakan surel email dari google ini adalah terintergrasi dengan semua produk google seperti Youtube, Google+, Webmaster Tools dan Blogspot hanya dengan login menggunakan akun gmail yang sudah dibuat. Membuat akun gmail sangat mudah sama seperti membuat akun surel lain yaitu yahoo maupun hotmail, tapi saya lebih menyarankan menggunakan gmail karena lebih banyak kelebihannya dari saingan penyedia layanan surel, beberapa kelebihan surel gmail sebagai berikut: Dapat mengirimkan lampiran 25mb per email, keamanan terjaga, kapasitas penyimpanan lebih banyak, dan dapat login untuk semua produk google seperti mendaftar blog pada blogspot

Langkah-langkah membuat akun Gmail baru

1. Buka tautan gmail http://mail.google.com/mail
2. pada antar muka gmail klik create account untuk membuat akun gmail

3. kemudian silakan isi form pendaftaran, pada formulir pendaftaran terdapat info yang harus diisikan pada formulir, sebagai berikut:

nama depan belakang
alamat email (akan ada pengecekan apakah alamat email tersedia atau tidak)
isikan password email (untuk keamanan lebih baik password terdiri dari minimal 8 digit terdiri dari huruf dan angka)
ketik ulang password untuk memastikan tidak ada yang salah
isikan tanggal lahir(tanggal/bulan/tahun)
pilih jenis kelamin
isikan nomor handphone(opsional untuk verifikasi)
masukan alamat email anda yang lain jika ada(bertujuan untuk membantu jika email bermasalah)
masukan kode captcha
pilih lokasi menjadi indonesia
centang menyetujui persyaratan gmail

4. setelah semua form pendaftaran di isi pastikan sudah benar dan lengkap lalu klik next step

5. klik continue to gmail, dan selamat akun gmail anda sudah bisa digunankan dan google akan memberikan 4 email inbox baru

3 Modifikasi tampilan popular post terkeren

noreply@blogger.com (Deddia Permana) — Tue, 31 Dec 2013 16:21:00 +0000

Modifikasi tampilan popular post - popular post memang menjadi salah widget yang harus ada dalam blog, karena sebuah widget popular post memberitahukan posting yang paling banyak dibaca/dikunjungi yang memmungkinkan post tersebut dibaca oleh pengunjung blog, kenapa bisa? karena popular post hanya menampilkan posting yang paling banuyak dikunjungi karena posting tersebut unik atau banya dicari oleh pengguna internet.

Semakin menarik tampilan popular post pada blog makin besar juga peluang mendapatkan pageviev dan menolak bounce rate yang tinggi untuk itulah posting ini memberikan sedikit tutorial memodifikasi tampilan popular post pada widget dengan 3 style yang menurut saya paling menarik.

sebelum memasang style berikut pastikan sobat telah menambahkan widget popular post pada blog

Style pertama

membuat popular post dengan penomoran otomatis

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>

 .popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; 
}
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Style Kedua

membuat popular post menjadi thumbnail

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>


#PopularPosts1 {width:100%;background:none;} 
#PopularPosts1 .widget-content {margin: 0 !important; } 
#PopularPosts1 ul {margin: 0 !important; padding: 0 !important; } 
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;
padding:0 !important} 
#PopularPosts1 ul li .item-title{display:none} 
#PopularPosts1 li {float:left;list-style:none;} 
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;
width:90px;height:90px;border:none;transition:all 400ms ease-in-out;} 
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

3. kemudian klik Jump to widget dan pilih Popularpost1
4. cari kode ini  dibawah kode tersebut ada kode seperti berikut


<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' expr:height='data:thumbnailSize' 
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>

5. ganti kode diatas dengan kode dibawah ini


<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='thumbnails' expr:src='data:post.thumbnail' 
expr:title='data:post.title' height='90' width='90'/>
</a>
</div>

untuk menyesuaikan lebar dan tinggi thumbnail edit kode yang distabilo kuning

Style ketiga

membuat widget popular post berwarna warni

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>


.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

simpan template dan lihat hasilnya :D semoga bermanfaat :D

Otomatis membuka semua external link di new tab

noreply@blogger.com (Deddia Permana) — Wed, 25 Dec 2013 12:03:00 +0000

Automatically Open all External Links in a New Tab - jika secara manual untuk membuat Link terbuka di tab baru pada blog dengan menambahkan target = "_blank" di dalam setiap hyperlink. kode jQuery yang ditulis oleh +Mohammad Mustafa Ahmedzai ini dengan sederhana yang akan menyeleksi semua hyperlink dalam halaman blog sobat dan hanya akan menambahkan atribut target = "_blank" pada link eksternal. dan tidak akan menempatkan untuk link internal pada blog kecuali nilai href diganti. kode ini hanya akan menyeleksi eksternal link dan saat menemukan maka ketika di klik, laman browser akan terbuka di jendela baru. Sehingga mencegah pembaca blog untuk meninggalkan blog sobat dan juga membantu dalam mengurangi tingkat bounce rate pada blog.

Apa itu External Link?

Link eksternal adalah tauutan/link yang mengarah ke keluar blog sobat menuju blog lain. Dengan kata lain link tersebut akan terbuka ke blog lain saat di klik, berbanding terbalik dengan Internal link yang hanya terbuka pada satu blog saja

Membuka semua external link di tab baru

untuk menerapkan metode membuka semua external link pada blog ikuti langkah-langkah berikut ini

1. Login blogger >> Template >> Edit html
2. copy kode berikut tepat diatas </head>

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

<script type='text/javascript'>
$(document).ready(function() { 
  $("a[href^='http://']").each( 
    function(){ 
     if(this.href.indexOf(location.hostname) == -1) { 
        $(this).attr('target', '_blank'); 
      } 
    } 
  );
$("a[href^='https://']").each( 
function(){ 
if(this.href.indexOf(location.hostname) == -1) { 
$(this).attr('target', '_blank'); 
} 
} 
);
  
});
</script>

jika pada template sobat sudah terdapat library jquery, pada bagian stabilo merah tidak usah di copy

3. save template, dan silakan coba klik salah satu external link yang ada pada template blog

kode ini memiliki dua pengecek untuk memeriksa link yang dimulai dengan http:// dan https://. Biasanya semua blogger blog memiliki hostname dimulai dengan http:// dan tanpa secure protocol atau https://. Oleh karena itu kode ini ditambahkan untuk membuka external link http:// dan https://

kode yang distabilo kuning adalah bagian di mana script memindai nilai-nilai di dalam atribut href dan jika nilai sama dengan yang negatif (-1 ==), maka ini menunjukkan bahwa nama host adalah domain eksternal.

Jika sobat mengganti nilai href menjadi positif (== 1) dalam pernyataan kondisional, maka semua link internal sobat akan terbuka di tab baru!

Setelah kondisi ini terpenuhi, script kemudian memasukkan target = "_blank" atribut dalam tag hyperlink.

Menambahkan Pita penanda posting baru dan lama di blog

noreply@blogger.com (Deddia Permana) — Mon, 09 Dec 2013 08:29:00 +0000

Membuat ribbon pada post. untuk membuat blog menarik dilihat merupakan keinginan semua blogger trik berikut ini dibuat untuk mempercantik tampilan posting pada homepage dengan menambahkan pita diujung kanan post, tidak hanya mempercantik tapi pita ini juga menandakan sebuah posting baru dan posting lama dengan pita itu sendiri karensa pita ini terbagi dua yaitu pita old yang menandakan posting lama dan pita new yang menandakan posting baru

dalam memasang pita pada posting, pita old dan new di filter menggunakan tag pengkondisian <b:if cond="data:post.IsFirstPost"> yang artinya post yang paling baru akan ditandai dengan pita new sebaliknya post yang sudah lama akan ditandai dengan pita old

Menambahkan pita penanda posting baru dan lama

1. login blogger >> template >> edit html
2. cari kode berikut pada template

<div class='post hentry'>

3.copy paste kode berikut tepat dibawah kode <div class='post hentry'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'> 
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://lh3.googleusercontent.com/-CmCyzrG1afM/UZ9354KsJMI/AAAAAAAAGE0/S_xjDtT2wP8/s56/New-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/>
<b:else/>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://lh4.googleusercontent.com/-7C4ym_ep0Tw/UZ9359kFn4I/AAAAAAAAGE4/QKy0Shl3XK0/s56/Old-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/> 
</b:if></b:if></b:if>

pita hanya akan tampil pada halaman home saja, jika ingin menampilkannya juga pada halaman posting hapus kode yang di stabilo biru

4. cari kode </head>. kemudian paste kode berikut tepat diatas </head>

<style>.post{position:relative;}</style>

5. simpan template dan lihat hasilnya

jika ada yang perlu ditanykan silakan tulis di kotak komentar dibawah ini. semoga bermanfaaat~

Cara memasang author rich snippet pada blog

noreply@blogger.com (Deddia Permana) — Thu, 05 Dec 2013 11:35:00 +0000

tipsbloggerkita.web.id - Cara memasang author rich snippet pada blog atau yang sering disebut menampilkan foto profil G+ pada hasil pencarian google. tutor ini sudah banyak dipakai oleh para blogger karena menjadikan blog menjadi unik dan menarik perhatian pada hasil pencarian google.

Mungkin sobat pernah melihat gambar profil atau thumbnail pengembang Google muncul pada halaman hasil pencarian?. memasang rich author snippet Ini akan menjadi bukti bahwa sobat adalah satu-satunya penulis dan pemilik situs atau blog.

memasang rich author snippet sangat berdampak baik pada SERP (search engine result page) karena Informasi seperti (jumlah circle, foto profil, kapan terakir dikunjungi) penulis/pemilik akan ditampilkan pada hasil pencarian Google, sekaligus tips untuk menarik pengunjung dan meningkatkan pengunjung ke blog sobat

Google Rich Snippets Series

Part1: Pengertian dan jenis Google Rich Snippet Pada blog

Part2: Cara memasang Google author snippet pada blog (anda sedang membaca ini)

Part3: kenapa Author snippet pada blog tidak muncul? ini jawabannya (coming soon)

Demo

Memasang Author Rich Snippet di Blog

#PERTAMA: memasang tag author pada template

1. login blogger >> template >> edit html
2. masukan code berikut ini tepat dibawah kode <head> pada template

<link href='URL-GOOGLE-PLUS' rel='author'/>

ganti URL-GOOGLE-PLUS dengan url google plus sobat. contoh

<link href='https://plus.google.com/115229808208707341778' rel='author'/>

Atau jika sobat sudah menclaim url google plus dengan nama. seperti ini

<link href='https://plus.google.com/+DeddiaPermana' rel='author'/>

#KEDUA: menambahkah kontributor di Google Plus

1. masuk ke pengaturan https://www.google.com/settings/account
2. klik Edit Profile Anda

3. pada bagian Tautan klik Edit

4. pada bagian Kontributor Di tambahkan URL blog sobat

5. klik simpan

Test author rich snippet pada hasil pencarian

1. buka http://www.google.com/webmasters/tools/richsnippets
2. masukan url blog sobat da klik Pratinjau
3. jika avatar google plus sudah muncul di samping hasil pencarian. berati sobat telah sukses memasang author rich snippet di blog.

butuh waktu kurang lebih 48 jam untuk google menampilkan avatar di seluruh halaman blog sobat. dalam kasus ini blog saya butuh waktu 3 hari...

jika ada yang kurang jelas silakan tanyakan~ dan semoga bermanfaaat...

Pengertian dan jenis Google Rich Snippet Pada blog

noreply@blogger.com (Deddia Permana) — Mon, 02 Dec 2013 09:08:00 +0000

Google Rich Snippet - Apakah sobat pernah mendengar istilah Rich Snippet. Apa itu rich snippet? bagaimana cara memasangnya? apa saja jenisnya? sebenarnya untuk kalangan blogger yang bisa dibilang sudah berpengalaman kata" Rich snippet sudah tidak asing lagi didengarnya, untuk kali ini bagi sobat yang belum mengerti silakan simak artikel berikut ini. Sebelum menjelaskan apa pengertian rich snippet dan lainnya, saya ajak sobat memahamai sebuah contoh. Misalkan sobat mengetik kata 'Apple Pie' pada pencarian Google, kemudian muncul hasilnya seperti ini :

Mana yang lebih menarik perhatian untuk diklik? Tentunya No 1 bukan? kenapa?
Pada gambar No. 1 Lebih detail menjelaskan Resep membuat 'Apple Pie' Lihat kotak2 orange yang saya tandai:
a. gambar masakan
b. ulasan
c. lama pengerjaan
d. jumlah kalori
e. komposisi

Google Rich Snippets Series

Part1: Pengertian dan jenis Google Rich Snippet Pada blog (anda sedang membaca ini)

Part2: Cara memasang Google author snippet pada blog (coming soon)

Part3: kenapa Author snippet pada blog tidak muncul? ini jawabannya (coming soon)

APA PENGERTIAN RICH SNIPPET?

Rich Snippet adalah beberapa data yang disajikan kepada mesin pencari untuk tampil pada halaman pencarian, diantara nya seperti Judul, Alamat URL, pemilik, lokasi, dll. Ketika seseorang mengetik kata kunci yang bersangkutan dengan rich snippet yang dipasang, maka mesin pencari seperti Google akan menyajikan data yang telah disertakan oleh pemilik web/blog.

Penggunaan Rich Snippet sangat berpengaruh bagi SEO. Sebagaimana telah saya sebutkan pada contoh, kita akan lebih memilih hasil penyajian dengan data yang komplit. Tapi tentunya bukan jaminan blog anda berjaya di Search Engine, banyak hal lain yang harus dioptimasi.

JENIS-JENIS RICH SNIPPETS

Di bawah ini adalah jenis-jenis rich snippet yang bisa dipasang di blog/website

#1 AUTHOR SNIPPETS

Author Snippets diantaranya menampilkan beberapa informasi :
1. Nama Author
2. Photo Author
3. Jumlah Follower

Untuk lebih jelas tentang installasi Author Rich Snippet klik disini.

#2 BUSINESS AND ORGANIZATION SNIPPETS

Rich Snippets untuk bisnis atau organisasi ini bisa mencantumkan beberapa informasi diantaranya lokasi, no telpon, harga, jam, dan review.

Untuk lebih jelas tentang installasi Business and Organization Snippets klik disini.

#3 EVENT SNIPPETS

Event Snippets atau snippet untuk agenda bisa menyertakan tanggal, lokasi, waktu pelaksanaan. Untuk lebih jelasnya lihat gambar 1 (menggunakan event snippets) dan gambar 2 tanpa event snippets.

Untuk lebih jelas tentang installasi Event Snippets klik disini.

#4 MUSIC ALBUM SNIPPETS

Dengan Music Album Snippets ini bisa menampilkan judul lagu, durasi, album, bahkan lirik lagu apabila disertakan.

Untuk lebih jelas tentang installasi Music Album Snippets klik disini.

#5 PEOPLE SNIPPETS

People Snippets menampilan informasi tentang pekerjaan, perusahaan atau affiliasi, dan lokasi. Pada people snippets juga bisa ditambahkan photo, nickname, dll.

Perhatikan gambar di bawah, perbedaan antara People Snippets dan Author Snippets.

Untuk lebih jelas tentang installasi People Snippets klik disini.

#6 PRODUCT SNIPPETS

Product Snippets menampilan informasi photo produk, rating, harga ketersediaan barang, dll.

Untuk lebih jelas tentang installasi Product Snippets klik disini.

#7 RECIPE SNIPPETS

Recipe Snippets atau Snippet Resep Masakan ini cocok bagi blog yang menyediakan resep-resep masakan. Dengan menambahkan Recipe Snippets, sobat bisa menambahkan gambar, rating, durasi memasak, jumlah kalori, dll.

Untuk lebih jelas tentang installasi Recipe Snippets klik disini.

#8 REVIEW SNIPPETS

Review Snippets atau para blogger lebih mengenalnya dengan Rating Bintang Rich Snippet. Selain bintang lima yang sering sobat liat, sobat bisa menambahkan snippet lainnya.

Untuk lebih jelas tentang installasi Review Snippets klik disini.

#9 VIDEO SNIPPETS

Apabila ingin menampilkan thumbnail video,akan ada sedikit markup yang berbeda. Google telah membuat Facebook Share markup kode, silahkan pelajari lebih lanjut pada tautan dibawah.

Untuk lebih jelas tentang installasi Video Snippets klik disini.

Untuk pemasangan rich snippets di blogger, akan ada sedikit perbedaan dengan pemasangan pada blog WP ataupun lainnya. Kedepannya, akan saya coba tutorial pemasangan rich snippet masing-masing untuk Blogger.

Sumber: Blog Kangismet

Menambahkan Widget Facebook Activity Feed Pada blog

noreply@blogger.com (Deddia Permana) — Sat, 30 Nov 2013 11:43:00 +0000

tipsbloggerkita.web.id. - Jika sebuah widget pada blog bermanfaat besar dalam meningkatkan pagiview pada blog, pasti sobat tidak akan menyia-nyiakan widget tersebut, widget ini kegunaanya mirip dengan widget related post tetapi widget yang satu ini berhubungan dengan facebook, dimana semua orang hampir memiliki facebook yang aktif, sehingga seluruh plugin facebook untuk blog sangat berdampak besar mendatangkan pageview dan visitor.

Plugin ini menampilkan posting dan juga merekomendasikan cerita baru yang disukai oleh teman-teman pengunjung blog sobat. Oleh karena widget itu membangun keterlibatan sosial dan menarik pembaca untuk menggali lebih dalam blog sobat untuk mencari tahu apa yang teman-teman mereka suka. perlu diketahui widget ini juga menampilkan rekomendasi dari orang-orang pada blog sobat berdasarkan aktivitas sosial yang dilakukannya pada halaman blog sobat.

Mari menambahkannya ke blog hanya dalam beberapa langkah sederhana. Demo dapat dilihat pada sidebar blog ini dengan judul "Rekomendasi"

Menambahkan widget Facebook Activity Feed

1. Buka facebook developer activity feed
2. isi form: seperti gambar berikut

3. setelah selesai klik GET CODE
4. akan muncul Pop up code seperti gambar berikut

5. copy kode yang pertama kemudian paste dibawah </body> pada template

pada langkah kelima jika sobat pernah memasang widget facebook likebox, recommendation bar, facebook komen,dll ataupun sudah pernah memasang kode tersebut silakan abaikan langkah kelima, dan tidak perlu menambahknya lagi pada template

6. copy kode yang kedua kemudian paste pada widget.

jika ada yang ingin ditanyakan tentan artikel ini silakan tanyakan pada kotak komentar di blog ini....

5 perbedaan antara Blog dan Website yang wajib diketahui

noreply@blogger.com (Deddia Permana) — Sat, 30 Nov 2013 02:36:00 +0000

Depermana.com - Perbedaan antara blog dan website yang sangat dicari sampai hari ini. artikel saya kali ini menjelaskan perbedaan yang sudah diperdebatkan antara blogger yang belum mengetahui bahwa BLOG dan Website itu berbeda

perbedaan mendasar adalah, blog merupakan kepanjangan dari (WEB LOG=BLOG). Website adalah kepanjangan dari. (WEB Site = Website). sobat mungkin telah mendengar tentang situs-situs statis dan situs dinamis. Ide yang mendukung perbedaan antara Blog vs website.yaitu Ada beberapa perbedaan teknis, bagaimana data disajikan kepada pembaca. dan juga beberapa alasan karena blog yang sangat dipertimbangkan sekarang ini untuk menyajikan data secara online.

5 perbedaan blog dan website

Blog umumnya lebih disajikan kepada para pengunjung. Bahasa yang digunakan seringkali jauh lebih sederhana dari pada di website. (meskipun tidak diperlukan karena banyak webmaster sekarang sudah mulai menggunakan bahasa yang lebih sederhana, untuk membuat sudut pandang mereka lebih luas dari orang-orang, di seluruh dunia.)

Di blog, ada hal yang disebut posting, karena apa yang sobat baca sekarang. Setiap posting memiliki halaman statis sendiri (menunjukan url), tetapi halaman utama blog ini didedikasikan untuk

serangkaian posting terbaru. Blogger biasanya lebih memilih untuk menunjukkan sekitar 8-12 posting terbaru di blog mereka (home) halaman beranda. Dimana tidak ada yang seperti itu di website statis. Bahkan jika sebuah website berisisi tentang tutorial.

Perbedaan utama antara, blog dan website statis adalah tentang konten. Dimana Isi utama dari website tetap sama. Meskipun webmaster bisa menambahkan halaman tambahan ke situs web untuk meningkatkan konten, tetapi urutan dimana informasi yang disajikan tidak bisa berubah. Itulah di mana blog sudah mulai mendapatkan popularitas. Apakah sobat pernah berpikir tentang cara mencari uang di internet sekarang hari? sobat juga mengikuti blog populer tertentu langsung (melalui bookmark) atau dalam banyak kasus,sobat mencari menggunakan mesin pencari.

cara mengindeks Blog pada Yahoo, dan Bing

Search engine membantu sobat untuk mendapatkan pertanyaan tertentu (seperti bagaimana menambahkan bla bla ke blogger). Ini akan membawa sobat ke sebuah blog, dengan informasi terbaik dari topik tertentu, baik itu berasal dari blog atau website. Jadi konten pada dasarnya dicari dengan cara yang sama seperti sebelumnya (melalui mesin pencari), tapi blog memberikan dimensi yang berbeda dengan cara informasi disajikan.

Kumpulan widget dan SEO

Aspek lain dari blog karena kemampuannya untuk sering dijelajahi oleh mesin pencari. Seperti posting yang diperbarui setiap hari (kadang-kadang beberapa kali dalam sehari), sehingga mesin pencari mencrawl blog berkali-kali mengenali dan mengambil konten baru dari blog tersebut.

5 perbedaan blog yang tidak dimiliki website

1. Blog memiliki Kotak komentar
2. Selalu di update dengan konten yang baru
3. Lebih sering diCrawl oleh search engine (google, bing, yahoo...)
4. Mencakup berbagai macam artikel
5. Artikel yang muncul dalam urutan reverse-chronological order (posting terbaru akan tampil terdepan pada homepage)

Jadi, Kesimpulan dari diatas adalah Blog Meyerupai sebuah koran online yang memiliki artikel unik dan menarik....

Cara membuat Halaman About us lebih menarik

noreply@blogger.com (Deddia Permana) — Fri, 29 Nov 2013 08:42:00 +0000

Memberikan tampilan yang menarik dan profesional pada halaman About us "Tentang Kami" . Mengapa harus membuat halaman "tentang kami" karena pengunjung memiliki hak untuk tahu siapa sobat, apa yang sobat lakukan dan di mana sobat berada. Tentang Kami atau about us adalah Halaman Identitas mengenai diri sobat di mana sobat menambahkan bio dari diri sobat dan kemudian menjelaskan tujuan blog atau website sobat. Ini adalah halaman yang paling penting kepada pengunjung yang kepo ingin kenal dan juga bagi pengiklan. Jadi Pastikan sobat meninggalkan kesan yang baik pada mereka dengan menyajikan halaman about us lebih menarik. Hanya satu jam yang lalu saya mendesain pribadi saya "About Me" Page dan saya berharap tutorial ini akan masuk akal setelah sobat melihat desain ini

DEMO

Cara membuat halaman about us yang benar

1. Tuliskan tentang diri sobat
2. Pakai foto sobat yang paling ganteng atau cantik
3. Buatlah beberapa paragraph tentang diri sobat, tujuan dari blog, harapan, dari blog, hobi,dll

Membuat halaman about us dengan design yang menarik

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px"> 
  <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="LINK GAMBAR" width="128" height="128" /></div>
  <div style="text-align: justify"><font color="#666666">
PARAGRAPH PERTAMA DISINI
</font></div>  </div> <div style="text-align: justify">&#160;</div>   <div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">    <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="LINK GAMBAR" width="128" height="128" /></div>   <div style="text-align: justify"><font color="#666666"> PARAGRAPH KEDUA DISINI
</font></div>  </div> <div style="text-align: justify">&#160;</div>   <div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px">    <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="LINK GAMBAR" width="128" height="128" /></div>   <div style="text-align: justify"><font color="#666666"> PARAGRAPH KETIGA DISINI </font></div>  </div> <div style="text-align: justify">&#160;</div>

DEMO

Kustomisasi

Ganti Tulisan Paragrap pertama kedua dan seterusnya dengan biografi diri sobat
Untuk mengubah warna dari garis tepi paragraph ganti hex color #686868 dengan hex warna lain. untuk lebih mudah gunakan tabel warna lenkap
Ganti tulisan Link Gambar dengan gambar sesuai topik yang sobat jelaskan
Untuk mengubah ukuran gambar silakan silakan sesuaikan pada width="128" and height="128"

Cara memasang dan menggunakan Font awesome

noreply@blogger.com (Deddia Permana) — Sun, 24 Nov 2013 06:53:00 +0000

icon font awesome lengkap dengan valuenya- kalau terdengar dari nama depannya yaitu "font"pasti yang terpintas dipikiran adalah style atau gaya tulisan, tapi tidak dengan font awesome ini. font ini bebrbentuk sebuah icon yang digunakan sebagai penambah suasana keren, font awesome ini sama sekali tidak menggunkan gambar sama sekali yang artinya dapat mengurangi http request jika menggunkan gambar

hal pertama untuk menggunakan font awesome ini copy css dibawah ini kemudian paste diatas </head>

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

cara menggunkan

gunakan <i class="icon-google-plus-sign"></i>
contoh penerapan pada link <a href='http://www.depermana.com'><i class="icon-google-plus-sign"></i> Homepage</a>

Homepage

Memperbesar ukuran

Icon Aplikasi Website

icon-adjust "\f042"
icon-anchor "\f13d"
icon-asterisk "\f069"
icon-ban-circle "\f05e"
icon-bar-chart "\f080"
icon-barcode "\f02a"
icon-beaker "\f0c3"
icon-beer "\f0fc"
icon-bell "\f0a2"
icon-bell-alt "\f0f3"
icon-bolt "\f0e7"
icon-book "\f02d"
icon-bookmark "\f02e"
icon-bookmark-empty "\f097"
icon-briefcase "\f0b1"
icon-bullhorn "\f0a1"
icon-bullseye "\f140"
icon-calendar "\f073"
icon-calendar-empty "\f133"
icon-camera "\f030"
icon-camera-retro "\f083"
icon-certificate "\f0a3"
icon-check-empty "\f096"
icon-check-minus "\f147"
icon-check-sign "\f14a"
icon-check "\f046"
icon-circle "\f111"
icon-circle-blank "\f10c"
icon-cloud "\f0c2"
icon-cloud-download "\f0ed"
icon-cloud-upload "\f0ee"
icon-code "\f121"
icon-code-fork "\f126"
icon-coffee "\f0f4"
icon-cog "\f013"
icon-cogs "\f085"
icon-collapse-alt "\f117"
icon-comment "\f075"
icon-comments "\f086"
icon-comments-alt "\f0e6"
icon-credit-card "\f09d"
icon-crop "\f125"
icon-dashboard "\f0e4"
icon-desktop "\f108"
icon-download "\f01a"
icon-download-alt "\f019"
icon-edit "\f044"
icon-edit-sign "\f14b"
icon-ellipsis-horizontal "\f141"
icon-ellipsis-vertical "\f142"
icon-envelope "\f003"
icon-envelope-alt "\f0e0"
icon-eraser "\f12d"
icon-exchange "\f0ec"
icon-exclamation "\f12a"
icon-exclamation-sign "\f06a"
icon-expand-alt "\f116"
icon-external-link "\f08e"
icon-external-link-sign "\f14c"
icon-eye-open "\f06e"
icon-eye-close "\f070"
icon-facetime-video "\f03d"
icon-fighter-jet "\f0fb"
icon-film "\f008"
icon-filter "\f0b0"
icon-fire-extinguisher "\f134"
icon-fire "\f06d"
icon-flag-alt "\f11d"
icon-flag-checkered "\f11e"
icon-folder-close "\f07b"
icon-folder-open "\f07c"
icon-folder-close-alt "\f114"
icon-folder-open-alt "\f115"
icon-food "\f0f5"
icon-frown "\f119"
icon-gamepad "\f11b"
icon-gift "\f06b"
icon-glass "\f000"
icon-globe "\f0ac"
icon-group "\f0c0"
icon-hdd "\f0a0"
icon-headphones "\f025"
icon-heart-empty "\f08a"
icon-heart "\f004"
icon-home "\f015"
icon-inbox "\f01c"
icon-info-sign "\f05a"
icon-info "\f129"
icon-key "\f084"
icon-keyboard "\f11c"
icon-laptop "\f109"
icon-leaf "\f06c"
icon-legal "\f0e3"
icon-lemon "\f094"
icon-level-up "\f148"
icon-level-down "\f149"
icon-lightbulb "\f0eb"
icon-location-arrow "\f124"
icon-lock "\f023"
icon-magic "\f0d0"
icon-magnet "\f076"
icon-mail-reply "\f112"
icon-mail-reply-all "\f122"
icon-mail-forward "\ff064"
icon-map-marker "\f041"
icon-meh "\f11a"
icon-microphone "\f130"
icon-microphone-off "\f131"
icon-minus "\f068"
icon-minus-sign "\f056"
icon-minus-sign-alt "\f146"
icon-mobile-phone "\f10b"
icon-money "\f0d6"
icon-move "\f047"
icon-music "\f001"
icon-off "\f011"
icon-ok "\f00c"
icon-ok-sign "\f058"
icon-ok-circle "\f05d"
icon-pencil "\f040"
icon-phone "\f095"
icon-phone-sign "\f098"
icon-picture "\f03e"
icon-plane "\f072"
icon-google-plus-sign "\f0d4"
icon-google-plus "\f0d5"
icon-print "\f02f"
icon-pushpin "\f08d"
icon-puzzle-piece "\f12e"
icon-qrcode "\f029"
icon-question-sign "\f059"
icon-question "\f128"
icon-quote-left "\f10d"
icon-quote-right "\f10e"
icon-random "\f074"
icon-refresh "\f021"
icon-remove-sign "\f057"
icon-remove-circle "\f05c"
icon-remove "\f00d"
icon-reorder "\f0c9"
icon-reply "\f112"
icon-reply-all "\f122"
icon-resize-vertical "\f07d"
icon-resize-horizontal "\f07e"
icon-retweet "\f079"
icon-road "\f018"
icon-rocket "\f135"
rotate-left "\f0e2"
rotate-right "\f01e"
icon-rss "\f09e"
icon-rss-sign "\f143"
icon-screenshot "\f05b"
icon-search "\f002"
icon-share "\f045"
icon-share-alt "\f064"
icon-share-sign "\f14d"
icon-shield "\f132"
icon-shopping-cart "\f07a"
icon-sign-blank "\f0c8"
icon-signal "\f012"
icon-signin "\f090"
icon-signout "\f08b"
icon-sitemap "\f0e8"
icon-smile "\f118"
icon-sort "\f0dc"
icon-sort-down "\f0dd"
icon-sort-up "\f0de"
icon-spinner "\f110"
icon-star "\f005"
icon-star-empty "\f006"
icon-star-half-full "\f123"
icon-star-half-empty "\f123"
icon-suitcase "\f0f2"
icon-tablet "\f10a"
icon-tag "\f02b"
icon-tags "\f02c"
icon-tasks "\f0ae"
icon-terminal "\f120"
icon-thumbs-up "\f087"
icon-thumbs-down "\f088"
icon-ticket "\f145"
icon-time "\f017"
icon-tint "\f043"
icon-trash "\f014"
icon-trophy "\f091"
icon-truck "\f0d1"
icon-umbrella "\f0e9"
icon-unlock "\f09c"
icon-unlock-alt "\f13e"
icon-upload "\f01b"
icon-upload-alt "\f093"
icon-user-md "\f0f0"
icon-user "\f007"
icon-volume-off "\f026"
icon-volume-down "\f027"
icon-volume-up "\f028"
icon-warning-sign "\f071"
icon-wrench "\f0ad"
icon-zoom-in "\f00e"
icon-zoom-out "\f010"

Icon Teks Editor

icon-file "\f016"
icon-file-alt "\f0f6"
icon-cut "\f0c4"
icon-copy "\f0c5"
icon-paste "\f0ea"
icon-save "\f0c7"
icon-undo "\f0e2"
icon-repeat "\f01e"
icon-text-height "\f034"
icon-text-width "\f035"
icon-align-left "\f036"
icon-align-center "\f037"
icon-align-right "\f038"
icon-align-justify "\f039"
icon-indent-left "\f03b"
icon-indent-right "\f03c"
icon-font "\f031"
icon-bold "\f032"
icon-italic "\f033"
icon-strikethrough "\f0cc"
icon-underline "\f0cd"
icon-superscript "\f12b"
icon-subscript "\f12c"
icon-link "\f0c1"
icon-unlink "\f127"
icon-paper-clip "\f0c6"
icon-eraser "\f12d"
icon-columns "\f0db"
icon-table "\f0ce"
icon-th "\f00a"
icon-th-list "\f00b"
icon-th-large "\f009"
icon-list "\f03a"
icon-list-ul "\f0ca"
icon-list-ol "\f0cb"
icon-list-alt "\f022"

Icon Penunjuk

icon-angle-left "\f104"
icon-angle-right "\f105"
icon-angle-up "\f106"
icon-angle-down "\f107"
icon-arrow-left "\f060"
icon-arrow-right "\f061"
icon-arrow-up "\f062"
icon-arrow-down "\f063"
icon-caret-down "\f0d7"
icon-caret-up "\f0d8"
icon-caret-left "\f0d9"
icon-caret-right "\f0da"
icon-chevron-left "\f053"
icon-chevron-right "\f054"
icon-chevron-up "\f077"
icon-chevron-down "\f078"
icon-chevron-sign-left "\f137"
icon-chevron-sign-right "\f138"
icon-chevron-sign-up "\f139"
icon-chevron-sign-down "\f13a"
icon-circle-arrow-left "\f0a8"
icon-circle-arrow-right "\f0a9"
icon-circle-arrow-up "\f0aa"
icon-circle-arrow-down "\f0ab"
icon-double-angle-left "\f100"
icon-double-angle-right "\f101"
icon-double-angle-up "\f102"
icon-double-angle-down "\f103"
icon-hand-right "\f0a4"
icon-hand-left "\f0a5"
icon-hand-up "\f0a6"
icon-hand-down "\f0a7"

Icon Video Player

icon-play "\f04b"
icon-play-sign "\f144"
icon-play-circle "\f01d"
icon-pause "\f04c"
icon-stop "\f04d"
icon-eject "\f052"
icon-forward "\f04e"
icon-fast-forward "\f050"
icon-step-backward "\f048"
icon-step-forward "\f051"
icon-fullscreen "\f0b2"
icon-resize-full "\f065"
icon-resize-small "\f066"

Icon Merk

icon-css3 "\f13c"
icon-facebook-sign "\f082"
icon-facebook "\f09a"
icon-twitter-sign "\f081"
icon-twitter "\f099"
icon-github "\f09b"
icon-github-sign "\f092"
icon-html5 "\f13b"
icon-linkedin "\f0e1"
icon-linkedin-sign "\f08c"
icon-maxcdn "\f136"
icon-pinterest "\f0d2"
icon-pinterest-sign "\f0d3"
icon-google-plus "\f0d5"
icon-google-plus-sign "\f0d4"

Icon Kedokteran

icon-ambulance "\f0f9"
icon-beaker "\f0c3"
icon-h-sign "\f0fd"
icon-hospital "\f0f8"
icon-medkit "\f0fa"
icon-plus-sign-alt "\f0fe"
icon-stethoscope "\f0f1"
icon-user-md "\f0f0"

Submit sitemap ke Bing dan Yahoo

noreply@blogger.com (Deddia Permana) — Mon, 18 Nov 2013 13:34:00 +0000

Submit sitemap ke Yahoo sebelumnya bisa dilakukan dengan menggunakan Yahoo Site Explorer tetapi pada tahun 21 Nop 2011 Yahoo! telah merubah transisi algoritma untuk Bing . Yahoo menggabungkan situs explorer ke Bing Webmaster Tools dengan kontrak kemitraan . Sejak saat itu dan seterusnya webmaster diminta untuk mengirimkan Sitemaps ke Bing untuk mengharapkan kualitas lalu lintas dari kedua pihak yahoo dan Bing . Site Explorer diluncurkan pada tahun 2005 oleh Tim Mayer.

Sobat bisa mendapatkan info rinci seperti pada google analitik tentang berapa banyak blog yang menghubungkan sobat dan juga dapat menghitung jumlah link internal di dalam blog sobat . Tapi karena sekarang Yahoo telah bergabung dengan mesin pencari Bing oleh Microsoft, pekerjaan kita menjadi lebih mudah, karena mengirimkan blog sobat di Bing akan mengaturnya di dua mesin pencari , yaitu kedua Bing dan yahoo .

Sebelumnya MSN tidak diperlukan sitemap dan Anda hanya perlu mengirimkan link sobat kepada mereka dengan melakukan ping mereka tapi dengan penggantian MSN mesin pencari dengan BING terbaru , Microsoft kini terbuka mengikuti jejak Google .

Submit blog Ke search engine Bing Dan Yahoo

1. login ke BING webmaster tool menggunakan akun hotmail sobat
2. Setelah sobat login pada dashboard akan ada pilihan untuk menambahkan blog. Klik tombol "Add Site"

pada URL masukan alamat blog sobat
pada add a sitemap masukan sitemap yang ada di blog sobat, jika sobat belum punya silakan baca post cara menambahkan sitemap pada blog

3. Klik Submit. Sekarang sobat akan diminta untuk memverifikasi blog yang sobat daftarkan. sobat diberikan tiga metode standar. Pilih opsi kedua yaitu "Copy paste tag di default halaman web" Klik opsi: 2

5. sobat akan diberikan kode HTML singkat. Cukup copy dan paste kode di bawah <head> dalam template blog sobat

6.Sekarang kembali ke halaman webmaster Bing dan klik "Verify". Jika sobat menyisipkan kode dengan benar maka sitemap Anda akan berhasil ditambahkan ke daftar.

7. Biasanya butuh waktu paling lama 3 hari untuk BING dan YAHOO menunjukkan statistik data dari blog sobat

Ping Yahoo Dan Bing

Fngsi dari Ping adalah untuk menginformasikan update blog sobat ke Bing dan Yahoo, sehingga mereka dapat mengirim crawler untuk mengindeks konten sobat yang baru ditambahkan. Jangan ping mesin pencari terlalu sering

1. ganti www.depermana.com dengan link dari blog sobat dibawah ini
2.Paste link berikut di address bar browser satu per satu dan tekan enter. jika benar sobat akan melihat pesan "Terima kasih telah mengirimkan sitemap Anda."

#UNTUK PING BING

1. Untuk posts diantara 1-500http://www.bing.com/webmaster/ping.aspx?siteMap=http%3A%2F%2Fwww.depermana.com%2Fatom.xml%3Fredirect%3Dfalse%26start-index%3D1%26max-results%3D500

2. Untuk post diantara 501-1000http://www.bing.com/webmaster/ping.aspx?siteMap=http%3A%2F%2Fwww.depermana.com%2Fatom.xml%3Fredirect%3Dfalse%26start-index%3D501%26max-results%3D500
3. Untuk post diantara 1001-1500http://www.bing.com/webmaster/ping.aspx?siteMap=http%3A%2F%2Fwww.depermana.com%2Fatom.xml%3Fredirect%3Dfalse%26start-index%3D1001%26max-results%3D500

#UNTUK PING YAHOO

Karena alasan yang sudah saya berikan diatas ping blog ke bing sudah sekaligus dengan ping ke yahoo

Cara menambahkan Google plus Badge ke blog

noreply@blogger.com (Deddia Permana) — Sat, 16 Nov 2013 07:02:00 +0000

Menambahkan Google Plus widget di situs/blog sobat dapat membantu mendatangkan lebih banyak pengunjung ke blog Sobat, dan pada akhirnya dapat meningkatkan pengikut/follower. Google menyediakan berbagai macam alat dan sumber untuk menciptakan dan menambahkan widget Google Plus ke blog sobat. The Google Plus Badge adalah sebuah widget yang umum digunakan blogger di blognya masing masing. karena Google Plus baru saja memperbarui Lencana Google Plus, yang membuat Google plus badge lebih fleksibel, kaya fitur, dan mudah diimplementasikan. Dalam postingan ini, saya akan berbicara tentang bagaimana untuk menambahkan Google Plus pengikut lencana ke Blogger dengan beberapa tipe.

Jenis-Jenis Google Plus Badge

Google plus memisahkan masing-masing jenis badge terhadap kebutuhan masing-masing. Berikut beberapa tipe google plus badge:

Google Plus Badge untuk profil individu. lencana ini memungkinkan pengguna untuk dengan mudah menemukan sobat di Google+ dan menambahkan sobat kedalam lingkaran langsung dari blog/situs sobat. Lihat contoh di bawah ini:

Lencana Google Plus Pages untuk halaman merek-dagang di Google Plus, tipe ini termasuk profil lencana yang ditambahkan beberapa fungsi. pengunjung dapat membantu mengkonsolidasikan Google +1 dari blog sobat dan halaman Google+ sobat.

Lencana Google plus komunitas untuk membantu orang menemukan komunitasnya. sobat dapat terlibat langsung dengan pengguna lain pada topik yang sobat anggap menarik.

Bagaima cara membuat badge baru Google Plus

Untuk menbuat/desain sebuag google plus badge caranya sangatlah sederhana. Cukup ikuti langkah-langkah berikut di bawah ini untuk membuat lencana Google plus sendiri:

pertamana: buka Google Plus Badge Creation
Kedua: Masukan url Profil google plus sobat, seperti gambar berikut

untuk memasukan url profile sobat bisa menggunakan url lama ataupun url dengan custom nama:
jika sobat ingin merubah url profile dengan yang baru sobat bisa baca di artikel Cara mengklaim Url Google Plus dengan nama

pilih dan kustomisasikan sesuai keinginan sobat

Contoh Google plus Badge Dengan tampilan potrait

Contoh Tampilan Plus Badge Dengan tampilan landscape

setelah selesai mendesain copy code hasil design dan paste pada sidebar atau dimanapun di blog sobat :D

Jika sobat memgalami masalah pada artikel saya kali ini, silakan tanyakan pada kolomkomentar dibawah ini :D

Cara meminimalisir HTTP request pada gambar dengan base64

noreply@blogger.com (Deddia Permana) — Wed, 13 Nov 2013 11:16:00 +0000

Mungkin banyak yang belum tahu apa itu gambar base64 string, maksud dari gambar ini adalah gambar yang telah di convert menjadi string base 64 yang berupa css. Yang perlu sobat ketahui adalah gambar berbentuk base64 string menjadi salah satu tips mengurangi beban loading pada blog/situs karena terbukti ampuh dapat meminimalisir HTTP request pada gambar yang berakibat beratnya loading blog dan menjadi penyebab bounce rate/ratio keluar

Data URI Generator akan menghasilkan base64 encoded data dari sebuah file gambar. Data ini kemudian dapat digunakan dalam file CSS sobat yang dapat di cache oleh browser dan tidak tergantung lagi dari permintaan HTTP gambar, oleh karena itu gambar berformat base64 dapat meningkatkan kecepatan loading halaman. Perlu diingat bahwa gambar yang sudah diconvert menjadi base64 string akan membuat file gambar lebih besar kira-kira 20%, tetapi, karena file base64 berupa CSS yang berada pada template itu artinya lebih mudah dicache oleh browser, dan lebih cepat dari pada memuat gambar setiap kali sobat mengunjungi sebuah halaman baru pada blog/situs.

intinya gambar berformat base64 akan berat ketika seseorang baru pertama kali membuka halaman tersebut, tapi akan lebih ringan ketika seseorang sudah membuka halaman tersebut lebih dari dua kali karena sudah di cache oleh browser

CARA MERUBAH GAMBAR MENJADI BASE64

1. buka Data base64 Generator

2. pilih gambar daari komputer sobat

3. klik upload

4. akan muncul code hasil convert ke base64

KETERANGAN

Lebih baik gunakan gambar base64 pada gambar background template atau gambar judul blog. lebih disarankan jika gambar background template menggunakan css repeat scroll

Cara membuat sticky widget sidebar melayang saat di scroll

noreply@blogger.com (Deddia Permana) — Tue, 12 Nov 2013 10:25:00 +0000

Cara membuat widget sticky pada sidebar blog - istilah sticky yang kalau diartikan kedalam bahasa indonesia adalah menempel maksud dari menempel adalah widget pada sidebar akan selalu beraada pada posisinya walau mouse sudah di scroll kebawah. widget dengan posisi sticky ini banyak digunakan oleh bloger sebagai widget penarik perhatian karena widget yang telah di kasih posisi sticky tidak akan hilang ketika di scroll down melainkan akan melekat dibawah adress bar blog.

untuk penggunaan widget sticky ini tidak terlalu susah karena untuk membuat widget menjadi sticky hanya perlu menambahkan class pada widget yang dipilih

Memasang kode untuk widget sticky

login blogger >> template >> edit html
copy javascript berikut ini kemudian paste diatas kode </body> pada template


<script type='text/javascript'>
      $(document).ready(function(){
    $("#on-top").sticky({topSpacing:0});
      });
    </script>
<script src='https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js' type='text/javascript'></script>

simpan template

Cara menggunakan pada widget

untuk mengaplikasikanya pada widget yang dipilih untuk di buat sticky hanya tinggal menggunakan id dibawah ini tepat sebelum kode widget

<div id="on-top">code widget yang ingin di beri posisi sticky </div>

CONTOH : disini saya akan membuat widget facebook likebox menjadi sticky

<div id="on-top"><div class="fb-like-box" data-href="http://www.facebook.com/depermana12" data-width="290" data-height="182" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div></div>