Cara Memperbaiki Warning Missing Required Field Updated Dan hCard author

Written by: Roni Nyul

Serba Serbi Blogging, Updated at: 9:49 AM

Serba serbi blogging kembali mengupdate kategori Bengkel Blog. kali ini tentang google webmasters Tools Rich Snippets yang acap kali kesulitan saat memperbaiki missing warning yang ditampikan oleh webmasters.

Fungsi webmasters tool snippets sendiri sebenarnya untuk menganalisa seberapa baik stuktur data HTML dalam sebuah template blog atau website, sehingga saat seseorang mengetikkan keyword di Google search engine akan menampilkan data yang cukup relevan tentu saja tujuan mbah gugel memberikan informasi yang cukup berguna sebelum menuju blog atau website. misalnya nama penulis blog tersebut, trus kapan postingan tersebut dipublikasikan alias tanggal/bulan/tahun berapa dipublish juga kapan terakhir postingan tersebut diupdate dan yang terpenting menampilkan deskripsi yang berkenaan dengan keyword. "Baca hal yang menyebabkan halaman dicekal google

Cara Memperbaiki Warning Missing Required Field Updated Dan hCard author

Berikut adalah caranya

Cara Pertama

• Login ke blogger.
• Template - Edit HTML

Untuk mempercepat pencarian Klik Format Template terlebih dulu baru Ctrl+F dan cari kode berikut ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
Lalu pastekan kode berikut tepat dibawahnya kode diatas.

<div class='tagblog'>
<div class='vcard' id='hcard-NAMA-ANDA'>
 <span class='fn n'>
   <span class='given-name'>Written by: NAMA-ANDA</span>
  </span>
 </div>
<a class='updated' href='http://URLBLOGANDA.BLOGSPOT.COM/' rel='bookmark'>JUDUL BLOG, </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
</div>

kembali gunakan Ctrl+F cari ]]</b:skin> letakan kode berikut diatasnya

.tagblog{display:none}

Kalau sudah Simpan template dan lihat hasilnya DISINI
Jika seandainya cara pertama tidak ada perubahan coba gunakan cara yang kedua

Cara Kedua
Kalau template anda tidak ada kode seperti cara pertama,
Cari <b:if cond='data:post.hasJumpLink'> lalu pastekan kode berikut di atasnya

<div class='tagblog'>
<div class='vcard' id='hcard-NAMA-ANDA'>
 <span class='fn n'>
   <span class='given-name'>Written by: NAMA-ANDA</span>
  </span>
 </div>
<a class='updated' href='http://URLBLOGANDA.BLOGSPOT.COM/' rel='bookmark'>JUDUL BLOG, </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
</div>

kembali gunakan Ctrl+F cari ]]</b:skin> letakan kode berikut diatasnya

.tagblog{display:none}

Simpan Template dan lihat hasilnya lagi.

Read More

Cara Membuat Scroll Timer Di Blog

Written by: Roni Nyul

Serba Serbi Blogging, Updated at: 9:00 AM

Serba serbi blogging kali ini akan mengulas tentang kategori Bengkel Blog dengan tema cara membuat scrool di blog atau tutorial membuat scrool pada blog yang bertujuan untuk memperindah tampilan blog, modern dan keren pokoknya tampil beda dari yang lainnya. Seperti yang diketahui arti scroll adalah menggulung atau bisa diartikan bergulir. Biasanya gulirannya bisa kekanan bisa kekiri bisa ke atas dan bisa kebawah. nah untuk scroll timer gulirannya menurun (kebawah) dan keatas(naik) seperti yang bisa sobat lihat pada tampilan blog ini.
Fungsi scroll timer sendiri untuk mengukur seberapa persen saat ketika mouse menscroll sebuah halaman, baik halaman utama maupun halaman posting. dan persennya tentu dimulai scroll 0% sampai scroll 100%. Oke langsung saja ke triks bengkel template blognya.

Langkah-langkahnya sebagai berikut

• Login ke Blogger
• Dashbord > Template > Edit HTML > Klik format Template

Langkah Pertama Cari kode ]]></b:skin> (untuk mempercepat pencarian gunakan Ctrl +F)
Lalu letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: "";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}

Kode yang dibold warna merah adalah warna background dan border, silahkan ganti jika ingin mengganti tampilan belakangnya atau sisi kirinya.

<- > Langkah kedua cari kata </body>
Lalu telakan kode berikut tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Langkah ketiga cari kata <body>
Lalu copypaste kan kode berikut tepat dibawah kode <body>

<div id='scroll'></div>

<-> Simpan Template dan Lihat hasilnya

Semoga tutorial singkat ini bermanfaat untuk sobat semuanya.

Read More

Cara Yang Benar memperbaiki Laman Yang Dicekal Google

Written by: Roni Nyul

Serba Serbi Blogging, Updated at: 12:49 PM

Cara memperbaiki Laman Yang Dicekal Google - Hari ini saya mengunjungi akun webmaster tools dan melihat laporan secara terperinci tentang perkembangan blog zonadumay ini. maklum sebagai pemula yang sedang belajar membangun blog membuka satu persatu tab laporan yang ingin dilihat mulai dari keyword yang masuk hingga mengecek data terstruktur. dalam laporan data tersruktur tersebut saya menemui laporan bahwa ada laman yang dicekal google.

Memperbaiki URL Error yang dicekal di Webmaster Tools

 Awalnya saya sempat mencari-cari cara memperbaiki laman yang dicekal oleh googlebot tersebut, tapi tak satu trik pun yang berhasil, bahkan mencoba utak atik robbot.tx. Lebih parahnya lagi di google begitu banyak judul yang beredar "Cara Mengatasi URL Dicekal Robots.tx" tapi sayangnya ternyata cara tersebut menyesatkan jika tidak paham fungsi dari robbots.tx. bisa-bisa salah memasukan perintah sama robot akan berdampak negatif pada blog kesayangan anda.

Kenapa URL laman blog anda dicekal dan dimana letak kesalahannya?

Pertanyaan tersebut pasti akan muncul ketika anda mengetahui salah satu laman dicekal oleh google, namun sadarkah anda bahwa laporan tersebut muncul karena kesalahan kita sendiri, ya masalah utama crawl error adalah tidak mengikuti aturan data tersruktur seperti yang diinginkan google. Googlebot setiap hari menganalisis laman blog anda. googlebot seakan-akan begitu paham kebiasaan user bloggernya yaitu kebiasaan gonta ganti template, kebiasaan menjadikan draf artikel yang sudah di publikasikan, kebiasan mengedit artikel yang sudah di posting!. Memang kebiasaan-kebiasan tadi tidak dilarang akan tetapi jika postingan anda sudah berhasil di index google namun besoknya anda memperharui atau mengedit lagi artikel tersebut,  ketika google bot mengindex lagi artikel/laman tersebut lalu menganalisnya dan ternyata sudah diupdate googlebot memanggil perintah "updated" dari stuktur HTML blog anda. Yang jadi maslalah adalah ketika anda mengedit/memperbahurui artikel lalu memposting kembali tapi template anda belum sesuai data tersruktur maka google berhak mengategorika laman tersebut dicekal karena tidak ada kode perintah updated dalam template anda. maka google bot pun bingung padahal seharusnya mereka saling memanggil alias tag updated yang ada dalam template memberitahu bahwa artike ini sudah di update bos!.
kira2 begitulah bahasa awam saya.

Kesalahan: Missing required field "updated"

Lalu bagaimana caranya agar kode update bisa memberitahu kepada google bot, silahkan cek url blog anda di webmasters tool. Setelah mengecek data tersruktur template serta sudah memperbaikinya Berapa lama waktu yang dibutuhkan agar laman tersebut tidak lagi dicekal oleh google? seperti yang dijelaskan google melalui support answernya bahwasanya google butuh waktu setidaknya satu sampai dua minggu agar laman tidak lagi dicekal, dalam penjelasan lanjutannya laporan laman secara keseluruhan  di webmaster akan muncul setiap satu minggu sekali. Jika selama dua minggu masih dicekal silahkan edit lagi artikel tersebut lalu posting kembali. atau silahkan submit manual url ke google kembali. harap dingat pastikan mengedit artikel setelah anda memperbaiki semua kesalahan yang ada dalam template anda. jika sudah beres baru deh boleh leluasa mengedit artikel kembali sepeti kadang ingin Optimasi SEO ON PAGE blog kesayangan anda.

Sering gonta ganti template tapi lupa atau tidak peduli data setruktur HTML template yang baru anda pasang tapi langsung memposting artikel, nah artikel ini nantinya bisa dicekal google. alasannya sederhana, template blog anda belum sesuai struktur html yang dianjurkan google. sebenarnya tujuan google sendiri agar memudahkan mereka dan menguntungkan kita sendiri.

Sekali lagi harus diingat bahwa google bot bukan manusia, melainkan robot, dan robot punya bahasa sendiri agar bisa saling memanggil atau saling memberitahu. * istilah kerennya google bot melakukan "scan otomatis"

Lebih lanjut bisa dilihat disini
https://productforums.google.com/forum/#!msg/webmasters/hob_Jl2L13k/5KIpWg_BX3cJ

Alat webmaster tools
http://www.google.com/webmasters/tools/richsnippets

Read More

Cara Memperbaiki IFrames Bad dan Apa itu IFrames

Written by: Roni Nyul

Serba Serbi Blogging, Updated at: 2:57 AM

Bagaimana cara mengetahui letak kesalahan IFrame dan Cara memperbaiki IFrames are not indexed at all, and you have 1. Ketika mengecek seberapa persen skor SEO sebuah blog yang anda banggakan pernahkah menemukan notice Iframe bad atau lengkapnya IFrames are not indexed at all, and you have 1? Jika pernah menemukan notice iframe bad, pasti anda ingin mengetahui letak kelasahan dari Iframe tersebut.sehingga anda bisa segera menghilangkan notice tersebut. Secara umum IFrame tidak mempengaruhi google saat mengindex blog anda secara keseluruhan, tapi sangat berpengaruh bagi sistem pencarian lain seperti yahoo, bing dan sitem pencarian lain. Oleh sebab itu iframe bad akan mengurangi kualitas SEO blog anda setidaknya kurang lebih menyumbang 15 persen sampai 20 persen. Hal ini saya alami untuk blog ini dan terus terang mencari solusi letak kesalahan sampai butuh waktu 5 hari, pada akhirnya ketika saya mengupload video ke youtube dan ingin menyematkan video tutorial didalam postingan cara mudah membuat animasi. saya melihat tag yang dimulai <iframe...>...</iframe> dari situ saya sedikit mengerti tentang tag iframe.

Apa itu IFrames

Menurut support google answer IFRAME adalah tag HTML yang digunakan dalam desain web untuk menampilkan sebuah laman web dalam sebuah bingkai pada sebuah laman web lainnya.

Apa maksud dari bingkai sebuah laman web lainnya?

Yaitu menyematkan atau menempelkan script tag code dari sebuah situs sehingga hamalam blog atau postingan blog menjadi sesuai yang anda diinginkan. Misalnya anda ingin menambahkan atau menyisipkan embed video dari youtube dalam postingan anda sehingga pengunjung lebih mendapat manfaat lebih dari yang sudah dibacanya atau semacam video tutorial sebagai tambahan dari panduan tutorial-tutorial yang anda buat. Contoh lainnya seperti memasukan tag IFrame plugin dari facebook seperti plugin/button share, page fans halaman, form komentar facebook dan lain sebagainya. Sebagai contoh IFrames dari button share facebook perhatikan script dibawah ini

Contoh script code dari plugin share facebook versi Iframe.

<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width=300&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:80px;" allowTransparency="true"></iframe>

Script button share fb diatas menggunakan tag <Iframe ....> ..... </Iframe> artinya sebuah flash alias bergerak. nah karena yahoo tidak mampu mengindex dengan waktu lama alias karena loading blog anda lambat mereka akan mengabaikan pengindexkan bahkan menolakannya untuk mengindex tag yang menggunkan IFrame, sebagai contoh yahoo tidak mengindex komentar di blog. karena secara default form komentar mengunakan tag iframe.

Jadi jika anda memasang button share dan kodenya sama seperti script diatas silahkan hapus dan ganti dengan tag menggunakan object yang valid HTML5 selengkapnya silahkan baca cara memasangkan share button facebook valid HTML5.

Contoh script lainnya adalah iframe video yang disematkan dari youtube

<iframe width="560" height="315" src="//www.youtube.com/embed/e9B9dlDDEyU?rel=0" frameborder="0" allowfullscreen></iframe>

Sama seperti facebook youtube pun ternyata menggunakan tag Iframe. solusinya jika anda ingin menyematkan video dalam postingan atau memasang video sidebar kanan silahkan centang gunakan kode sematan lama copy kode tersebut <object..>...</object> lalu save atau postingan dihalaman yang anda inginkan.

Gunakan tag object saat menyematkan video

Pengaruh IFrame untuk SEO

Seperti yang sudah digambarkan diatas, bahwa bagi Google tag ifrmae tidak mempengaruhui kerja googlebot untuk mengindeks seluruh laman blog anda. tapi hanya mempengaruhi sistem pencarian lain seperti yahoo akibatnya jika ada orang lain mencari artikel menggunakan layanan yahoo maka artikel anda tidak muncul di sistem pencarian orang tersebut. padahal keyword yang dia masukan tepat sasaran ke blog anda. bukankah tujuan blog SEO agar menjadi yang teratas di sistem pencarian manapun? nah sekarang anda sudah mulai menganalisa menggunakan iframe lebih banyak manfaatnya atau buruknya.Silahkan cek lagi widget-widget yang ada di tata telak blog anda atau postingan-postingan anda barang kali anda pernah menyematkan sesuatu yang mengandung tag iframe, kalo perlu yang tidak penting hapus saja. *

Read More

Cara Mengedit Template Dua Kolom Menjadi Tiga Kolom

Written by: Roni Nyul

Serba Serbi Blogging, Updated at: 3:18 PM

Cara Mengedit Template Dua Kolom Menjadi Tiga Kolom - Seni bagi seorang yang punya blog atau website pasti akan berurusan dengan kode-kode HTML dan JavaScript,  bahasa PHP dan bahasa kode pemograman lainnya. Mengedit template merupakan salah satu seninya ngeblog selain untuk belajar bahasa algoritma yang dipelajari orang bidang IT, kita sebagai masyarakat umum juga berhak untuk mempelajarinya tujuannya adalah agar bisa mengenal serba serbi dunia IT khususnya keajaiban bahasa komputer yang membuat teknologi semakin canggih, modern dan tentunya sesuatu yang sudah kita nikmati selamai ini dari megahnya teknologi. Bahasa komputer yang konon katanya bikin pusing kepala tapi toh setiap hari ada yang hal saja baru. Ide manusia tidak pernah habis dalam urusan utak atik bahasa rumit tersebut seperti contoh game terbaru, gadged terbaru,  theme atau template-template baru yang setiap hari bermunculan dan masih banyak lagi kalau mau ditulis he he.

Nah karena kita masih tahap pemula dalam kode-kodean dan sedang mencoba membuat tampilan blog lebih profesional, rapi, nyaman alias bikin betah visitor saat membaca tulisan yang kita posting. Selain membuat pengunjung nyaman karena keberadaan widget maupun penempatan iklan yang sesuai pada slotnya, kita sebagai empunya blog pun kerap kali bolak balik melihat perkembangan blog dan membanding-bandingkan dengan blog orang lain. Barang kali yang paling sering adalah masalah template dan ide tulisan yang tidak ada habis-habisnya.

Kembali ke judul posting dalam beberapa template sering kali kita menemui template yang hanya memiliki dua kolom atau satu sidebar, masalahnya kita menyukai tampilan demo template tersebut, tapi disatu sisi kita ingin mencari template dengan tampilan yang sama kecerahan bagcround yang sama dan ingin memiliki tiga kolom atau dua sidebar. dan ada juga sebaliknya sebagian orang suka dua kolom tapi demo template tersebut tiga kolom, nah bingung kan solusinya gimana?

Cara menambahnya
+ Login ke akun blogger
 - Pilih Template lalu cadangkan lalu save (buat antisipasi jika gagal)
+ Klik Edit HTML
+ Format Template

Langkah Pertama
Perhatikan kode berikut atau cari menggunakan Ctrl +F (jangan lupa format dulu sebelum mencari)
Setelah Format Template untuk lebih mudah mencarinya tekan ctrl +F ketik kata kunci Blog1 maka akan muncul kode seperti berikut :
======================================================
<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>

======================================================
Kode diatas merupakan kode 'main-wrapper' yaitu (main posting). Sedangkan 'sidebar-wrapper' bawaan sidebar blog anda yang belum ditambah. posisi kode tersebut sesuai dengan template anda saat ini masing-masing (posisi biasanya yang sering kita jumpai disamping kanan).

Langkah Kedua
Memasukan kode sidebar baru untuk disamping kiri, copy kan script kode dibawah dan letakan diatas main-wrapper atau dibawa outer-wrapper
======================================================
<div class='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' showaddelement='yes'>
</div>
======================================================

Sehingga penempatan kodenya seperti ini

<div class='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' showaddelement='yes'>
</b:section>
</div>
<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>

======================================================
Langkah Ketiga

Di langkah ketiga ini kita beralih ke bagian CSS untuk menyisipkan kode pembagian slot khusus  sidebar baru samping kiri tadi. Caranya cari kata kuncinya
.outer-wrapper atau #outer-wrapper sehingga akan muncul seperti script dibawah ini :

.outer-wrapper{position:relative;width:100%;padding:0}

Jika muncul seperti diatas itu artinya tampilan luarnya 100% relative, anda tidak perlu lagi mengubah lebarnya. Namun Jika muncul script kode atau scriptnya rada-rada mirip seperti dibawah ini

.outer-wrapper {width:840px;margin:0 auto;padding:10px;text-align:left;font: $bodyfont;}
atau
#outer-wrapper {width:840px;margin:0 auto;padding:10px;text-align:left;font: $bodyfont;}

Anda tinggal menyesuaikan tampilan luarnya. misalnya anda ingin mempersempit atau memperlebar


Selanjutanya mengurangi lebar main posting, Cari kata kunci .main-wrapper atau #main-wrapper sehingga akan tampil script atau scriptnya rada-rada mirip seperti dibawah 
.main-wrapper{width:840px;margin:0;float:left;word-wrap:break-word;overflow:hidden}
atau
#main-wrapper{width:840px;margin:0;float:left;word-wrap:break-word;overflow:hidden} 
Ubah lebar main-wrappernya menjadi Width:650px atau sesuaikan dengan main posting yang anda inginkan


Tahap Penting
Menambahkan kode script untuk sidebar kiri copy code dibawah, lalu pastekan dibawah sidebar wrapper. Caranya cari dengan kata kunci .sidebar-wrapper atau #sidebar-wrapper Sehingga muncul script seperti dibawah ini

.sidebar-wrapper{width:320px;font-size:13.3px;float:right;word-wrap:break-word;overflow:hidden}
atau
#sidebar-wrapper{width:320px;font-size:13.3px;float:right;word-wrap:break-word;overflow:hidden}

Lalu pastekan code berikut dibawah kode sidebar-wrapper

======================================================
.sidebarkiri-wrapper{width:180px;font-size:13.3px;float:left;word-wrap:break-word;overflow:hidden}  
atau
#sidebarkiri-wrapper{width:180px;font-size:13.3px;float:left;word-wrap:break-word;overflow:hidden}
 ======================================================

 Sehingga akan tampak seperti berikut ditemplate anda
======================================================
 .sidebar-wrapper{width:320px;font-size:13.3px;float:right;word-wrap:break-word;overflow:hidden}
.sidebarkiri-wrapper{width:180px;font-size:13.3px;float:left;word-wrap:break-word;overflow:hidden}
======================================================
Silahkan sesuaikan lebarnya sesuai kebutuhan anda, misal lebar sidebar-wrapper anda rubah menjadi width:300px, dan lebar sidebarkiri-wrapper anda rubah menjadi width:160px.
Perhatikan juga float:right dan float:left ini yang menentukan kedua sidebar akan ditampilkan di samping kanan (right) dan disamping kiri (left).

NB : Jika template anda menggunakan hashtag alias tanda Pagar(#), gunakan code tanda pagar. Dan jika template anda mengguna tanda titik gunakan tanda titik (.).

Langkah Keempat 

Simpan / SAVE Template Anda dan lihat hasilnya, belum berhasil? coba lagi ikuti tahapnya secara step by step.

Next..
Jika anda ingin mengapus salah satu sidebar atau kolom template yang kebetulan template anda sudah memiliki tiga kolom silahkan pahami langkah-langkah di atas. saya yakin anda menemukan solusinya :) bereksperimen mungkin akan menambah jam terbang di dunia template kwkwk :p

Salam Blogging

Read More