Pelajaran yang harus gue lakukan Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger

Memasang Meta Tag Open Grap Facebook pada blog kita sangatlah penting, karena kita tahu facebook merupakan media sosial yang paling besar di dunia, jadi tidak mengherankan jika anak yang berumur 13 tahun sudah memiliki akun Facebook.
Pihak Facebook telah menetapkan meta tag -nya tersendiri. Untuk Apa Facebook berbuat demikian ? Ini untuk memastikan setiap entri yang anda share di Facebook akan menjadi lebih efektif kerana mengikut penetapan yang disediakan oleh pihak Facebook.
Sebelum kita memabahas cara memasangnya, ada baiknya kami sampaikan manfaat memasang Open Graph Facebook pada Blog kita:

Contoh kasus, Apakah pernah anda menShare artikel pada blog sendiri ke Facebook tapi kadang gambar tidak muncul?, ataukah gambar yang anda inginkan untuk keluar di facebook tidak sesuai keinginan?, Itu semua karena Blog sobat belum dipasang dan diverifikasikan dengan Open Graph Fb.

Meta Tag Open Graph Protocol berguna untuk menampilkan gambar atau logo blog anda ketika di share, like. Jika artikel anda yang di posting tidak memiliki gambar, maka secara otomatis gambar yang ditampilkan nantinya adalah logo blog anda.

Selain itu anda akan mengetahui jenis artikel apa saja dalam blog anda yang paling banyak diminati, yang paling banyak di Like/share dan yang terkomentari, karena kita akan diberikan laporan harian,mingguan dan bulanan. Jadi dengan mengetahui itu semua, kita bisa menentukan artikel selanjutnya yang serupa dengan top artikel yang paling populer difacebook.

Kesimpulannya sebagai blogger kita tentu butuh trafik, nah jadi penting sekali memasangnya di blog kita.
Oh ya, Apa sobat pernah mencoba tutorial serupa tapi tidak berhasil? tenang gan, kami akan melengkapi tutirial ini full gambar juga video dan dijamin berhasil.

Sebelum memasang code open grap , coba sobat cek dulu apakah blog kita sudah terpasang open grap atau tidak, sobat bisa cek disini : object Debug

Caranya:
Silahkan Masukkan URL blog pada form yang sudah tersedia, lalu silahkan klick button Debug

Jika belum terpasang hasilnya akan seperti ini :

Jika sudah terpasang hasilnya seperti ini

Berikut tips mudah Pasang protokol open graph fb pada blogspot

# Pertama

• Login ke Akun Blog masing-masing
• Pilih Blog yang akan Anda pasangkan Open Graph
• Klik blognya
• klik template
• klik edit HTML

#Kedua
Setelah terbuka Silahkan Lihat dan cari kode ini :

<b:include data='blog' name='all-head-content'/>

Supaya Lebih mudah silahkan copy Code diatas lalu klik ctrl + F pada keyboard lalu pastekan di form search

Contoh pada gambar ini:

Setelah ketemu silahkan lanjut ke tahap berikutnya yakni memasang Meta Tag Open Graph  dengan mengcopy dan pastekan kode-kode berikut tepat dibawah
<b:include data='blog' name='all-head-content'/>

Catatan:
Jika sobat sudah memasang Meta tag untuk blogspot, bisa juga dipasang dibawah meta-meta tersebut, sobat baca disini : Cara pasang meta tag

Berikut code Metanya :

<!-- open graph -->

<meta content='id_id' property='og:locale'/>

<meta content='en_US' property='og:locale:alternate'/>

<meta expr:content='data:blog.title' property='og:site_name'/>

<meta content='daenkrhapy' property='fb:admins'/>

<meta content='daenkrhapy' property='fb:profile_id'/>

<meta expr:content='data:blog.url' property='og:url'/>

<meta content='website' property='og:type'/>

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-k8Pr-qoZUq86hsl5uitOqG7gnxSpeesMXKOpiJwPprEF2b9GD7ra0e3CIhLOH3W8O4nyM5Ie0nD2GCzerkMC4wthis9_0BNf9pKOOELuDylF8knrTaNNMm8mvwl285cN7PlONNytI22w/s320/ppcarazone.png" height="200" width="200"' property='og:image'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<meta expr:content='data:blog.title' property='og:title'/>

<meta content='Selamat datang di Cara Zone Tutorial Tips Trik, dan info menarik lainnya.' property='og:description'/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta expr:content='data:blog.pageName' property='og:title'/>

<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' property='og:description'/>

</b:if>

</b:if>

Keterangan :

Ganti : daenkrhapy dengan Id Facebook sobat masing-masing

Ganti : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-k8Pr-qoZUq86hsl5uitOqG7gnxSpeesMXKOpiJwPprEF2b9GD7ra0e3CIhLOH3W8O4nyM5Ie0nD2GCzerkMC4wthis9_0BNf9pKOOELuDylF8knrTaNNMm8mvwl285cN7PlONNytI22w/s320/ppcarazone.png

dengan Logo blog masing-masing (ingat ukuran maksimal 200 x 200

Ganti : Selamat datang di Cara Zone Tutorial Tips Trik, dan info menarik lainnya

dengan deskripsi blog masing-masing.

Silahkan Simpan

# Ketiga
Sekarang Sobat Login ke akun facebook masing-masing
Lalu silahkan menuju object Debug untuk mengetahui hasilnya, apakah sudah berhasil memasang dengan baik codenya atau belum silahkan kesini :
object Debug

Jika sudah terintegrasi maka hasinya akan seperti contoh gambar diatas.

# Keempat
Supaya kita nanti mendapat laporan dari Facebook insights, silahkan masukkan/add blog yang tadi dipasangkan meta tag open graph disini : Facebook insights

Gulir tombol kebawah sampai sobat menemukan Add Your Domain silahkan di Klick dan akan muncul popup
Isi dengan URL Blog sobat lalu klik Dapatkan Wawasan

Jika tadi anda gagal dalam memasang Code Open Graph maka akan ada peringatan seperti ini :

Silahkan diperiksa kembali meta yang ada pada template sobat, Jika sudah betul maka hasilnya akan Blog sobat akan tampil pada Domain Insights
Untuk mengetahui laporan, sobat hanya tinggal klik Blog sobat pada Domain Insights.

mau tau ga sich Memperbaiki Duplicate Title Tags pada Google Webmaster Tools

MULTI PASTE - Seperti halnya duplicate meta description, maka duplicate title tags pun akan mempengaruhi relevansi pada hasil pencarian di search engine, bahkan halaman Anda bisa dianggap sebagai duplicate content.  Tentu ini akan sangat merugikan dari sisi SEO, dan akan berdampak pada rating hasil pencarian oleh search engine sesuai kata kunci yang dimasukaan oleh pengguna.

Duplicate title tags ini dapat Anda lihat melalui Google Webmaster Tools. Silahkan login ke Google Webmaster Tools, masukkan user ID serta password Anda. Kemudian pada halaman dashboard pilih menu Optimization yang berada pada sidebar sebelah kiri dan klik link HTML Improvements.  Pada halaman ini akan terdapat parameter yang menunjukan adanya indikasi duplicate title tags yang ditemukan oleh crawler search engine saat merayapi situs atau blog Anda.

Jika link duplicate title tags ini dibuka maka akan terlihat postingan mana saja yang terindikasi sebagai duplicate title tags. Anda dapat melihat dua URL terbentuk untuk setiap postingan jika icon panah warna hitam disebelah kiri postingan ini di expand. Ada satu bentuk URL yang saya sendiri belum mengetahui asal-usulnya, URL ini sama seperti URL postingan pada umumnya namun ada penambahan karakter unik ?m=0 seperti gambar di bawah ini.

Cara Memperbaiki Duplicate Title Tags

Ada beberapa tutorial hasil browsing yang saya temukan untuk memperbaiki duplicate title tags ini di antaranya :

1. Menambahkan rel='canonical'

Jika menggunakan cara ini maka Anda harus menambahkan elemen rel='canonical' pada URL halaman Anda yang terindikasi sebagai duplicate title tags, seperti di bawah ini, pada bagian head postingan dalam mode HTML.

<link rel="canonical" href="http://www.multipaste.web.id/2012/04/mengatur-tampilan-widget-blogger.html"/>

Tentu saja hal ini akan sangat merepotkan jika postingan yang terdeksi sebagai title tags banyak, seperti yang saya alami terdapat 88 duplicate title tags, kemudian harus menambahkannya satu persatu pada setiap halaman tersebut, sungguh ini suatu pekerjaan yang membosankan.

2. Mengatur URL Parameters

Solusi kedua adalah mengatur URL Parameters di Google Webmaster Tools. Pada halaman dashboard, pilih menu Configuration, di bawah menu ini terdapat menu URL Parameters, pilih menu ini dan lihat apakah ada parameter m di dalamnya. Pada bagian parameter m ini klik link Edit di sebelah kanan dan atur setingan menjadi No: Doesn't affect page content (ex: track usage) seperti gambar di bawah ini. Jika Anda tidak menemukan parameter m ini, maka Anda dapat menambahkannya melalui tombol Add parameter.


3. Menambahkan parameter pada robots.txt

Jika kedua cara di atas belum dapat mengatasi duplicate title tags, maka Anda dapat menambahkan baris perintah pada pengaturan parameter robots.txt yang tidak mengizinkan robot mesin pencari untuk mengcrawl url unik yang berakhiran ?m=0, bentuk baris perintah yang ditambahkan pada pengaturan parameter robots.txt adalah seperti di bawah ini

Disallow: /?m=0
Disallow: /?m=1
Disallow: /*/*/*.html?m=0
Disallow: /*/*/*.html?m=1

Atau anda dapat melihat parameter robots.txt yang terpasang pada blog ini, karena saya telah menggabungkan cara kedua dan cara ketiga untuk mengatasi duplicate title tags pada Google Webmaster Tools dan Alhamdulillah berhasil.

Jika Anda punya pengalaman lain, saya mengajak Anda untuk berbagi informasi pada bagian komentar blog ini, agar pengetahuan kita menjadi bertambah, sukses untuk Anda dan happy bloging.

Pelajara selanjutnya Memasang Author Rich Snippet di Blog

Memasang Author Rich Snippet di Blog - Tutorial ini masih lanjutan dari artikel sebelumnya (baca: Mengenal Google Rich Snippets dan jenisnya). Sebenarnya tutorial ini sudah banyak di share oleh sahabat blogger dengan judul Menampilkan Photo Author Blog di Hasil Pencarian. Akan tetapi dari sekian banyak tutorial, ada yang benar dan ada juga yang hanya copy paste, tanpa cek dan ricek kebenarannya.

Penggunaan Author snippet ini akan berpengaruh dalam SERP. Dengan memasang Author Snippet artinya mengklaim kepemilikan blog dengan akun Google+. Google+ merupakan jejaring sosial milik Google, dengan meklaim kepemilikan blog, maka akan bertambah kepercayaan google terhadap blog tersebut dan akan menampilkan avatar kita pada pencarian Google.

Untuk menambahkan Author snippets, ikuti langkah-langkah mudahnya :

Langkah 1 : Tambahkan Tag Author

Simpan kode ini dibawah <head>

<link href='URL-google-plus' rel='author'/>

Edit URL-Google-Plus dengan url sobat, maka jadinya kurang lebih seperti ini :

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

Langkah 2 : Tambahkan Kontributor

1. Masuk ke Pengaturan akun : https://www.google.com/settings/account
2. Klik Edit Profil Anda

3. Scroll ke bawah, Klik Edit pada Kontributor di
4. Tambahkan link blog sobat, dan Simpan.

Semoga bermanfaat...

Pelajaran yang harus gue lakukan Validasi HTML5 :

Validasi HTML5 - Berbicara masalah validasi HTML5, template blogger default sangat jauh dari valid HTML. Perlukah melakukan validasi? tentunya akan mengundang berbagai pendapat dalam hal ini. Terlepas dari perbedaan pendapat apakah perlu validasi atau tidak, bagi sahabat yang melakukan validasi, hampir 99% tutorial mengatakan harus menghapus kode :

<b:include data='blog' name='all-head-content'/>

Inilah permasalahannya. Dengan menghapus kode di atas, berarti mengapus content defaul blogger yang ada pada bagian 'head'. Saya kembali berfikir, tentunya akan banyak meta tag yang dihilangkan dengan hanya menghapus satu kode ini.

Akhirnya saya melakukan percobaan kembali menambah kode <b:include data='blog' name='all-head-content'/> pada template yang sudah valid HTML5 dan saya hilangkan meta tag yang lainnya. Ternyata dugaan saya benar, dengan menghapus 1 kode saja maka akan hilang beberapa meta tag default blogger.

Inilah kode yang dihasilkan dari <b:include data='blog' name='all-head-content'/> pada hompage :

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var b=window,e="jstiming",g="tick";(function(){function d(a){this.t={};this.tick=function(a,d,c){c=void 0!=c?c:(new Date).getTime();this.t[a]=[c,d]};this[g]("start",null,a)}var a=new d;b.jstiming={Timer:d,load:a};if(b.performance&&b.performance.timing){var a=b.performance.timing,c=b[e].load,f=a.navigationStart,a=a.responseStart;0<f&&a>=f&&(c[g]("_wtsrt",void 0,f),c[g]("wtsrt_","_wtsrt",a),c[g]("tbsd_","wtsrt_"))}try{a=null,b.chrome&&b.chrome.csi&&(a=Math.floor(b.chrome.csi().pageT),c&&0<f&&(c[g]("_tbnd",void 0,b.chrome.csi().startE),
c[g]("tbnd_","_tbnd",f))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,c&&0<f&&(c[g]("_tbnd",void 0,b.external.startE),c[g]("tbnd_","_tbnd",f))),a&&(b[e].pt=a)}catch(l){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[e].load[g]("aft")};var h=!1;function k(){h||(h=!0,b[e].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",k,!1):b.attachEvent("onscroll",k);
 })();</script>
<meta content='blogger' name='generator'/>
<link href='http://blog.kangismet.net/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://blog.kangismet.net/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Blog Kang Ismet - Atom" href="http://blog.kangismet.net/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Blog Kang Ismet - RSS" href="http://blog.kangismet.net/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Blog Kang Ismet - Atom" href="http://www.blogger.com/feeds/1575214712636951960/posts/default" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="http://blog.kangismet.net/" />
<meta content='Blog tentang tutorial, tips dan trik seputar Blogger/Blogspot dan Free Blogger Templates' name='description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

dan pada halaman postingan, semua kode diatas dan ada tambahan :

<link rel="alternate" type="application/atom+xml" title="Blog Kang Ismet - Atom" href="http://blog.kangismet.net/feeds/7483167200625408636/comments/default" />
<link rel="image_src" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOa3VPKVosNFHqRrQbyZ5OZmWQJYNCGl6UihdTcwVC3T-oR5tf6bMe0pcNnY_jLM9bVEKjVk7l-X5HvD4llfI3Hko_QXKigGMbbDAXpgjS51ElnS0QYkORX-VlzV__JPckoBOZb8XB54/s72-c/back-to-top-button.png" />
<meta content='Membuat tombol scrol back to top dengan efek memantul (bounce)' name='description'/>

Lantas apa saja yang hilang?

Yang saya fahami saja, diantara yang hilang adalah :

1. Favicon
2. Canonical untuk menghindari duplikat konten
3. Atom RSS
4. OpenID delegate, untuk berkomentar dengan openID
5. Meta Description pada halaman postingan
6. Post Thumbnail.

Solusi

Sebagai solusi yang saya tawarkan adalah setelah menghapus kode <b:include data='blog' name='all-head-content'/> tambahkan kode dibawah ini, untuk mengganti kode yang hilang diatas :

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

Sebetunya masih ada yang kurang dari default meta tag blogger. Saya tunggu masukan dan koreksinya.

pelajaran yang harus gue lakukan Cara Copy Semua Artikel Blog Orang Lain

Cara Copy Semua Artikel Blog Orang Lain - Copas atau copy paste artikel merupakan sebuah tindakan yang tidak perlu dilakukan, karena hal ini akan sangat merugikan dan tidak ada manfaatnya, karena google sudah pintar mereka memiliki algoritma yang sangat canggih, sebagian besar artikel hasil copas tidak akan terindex atau muncul di google oleh sebab itu hal ini tidak perlu Anda lakukan. Namun, saya berbagi disini hanyalah untuk menambah wawasan Anda, cara ini memang digunakan untuk memindahkan artikel di blog lama kepada blog baru, sehingga Anda tidak perlu lama-lama membutuhkan waktu untuk memindahkan artikel dari blog lama ke blog baru, dengan cara copy artikelnya lalu Anda posting ulang di blog baru.

Disini saya akan menjelaskan cara lebih efektif dan cepat untuk copy semua artikel blog lama dan memindahkan artikel tersebut kepada blog baru, saya sarankan agar tidak digunakan untuk mencopy semua artikel blog orang lain dan dipindahkan pada blog Anda. Untuk lebih jelasnya mengenai cara copy semua artikel blog orang lain silahkan baca tutorialnya dibawah ini :

1. Copy link blog yang akan di copy semua artikelnya
contoh : http://superseofaster.blogspot.com
2. Masuk ke http://ctrlq.org/blogger
3. Paste link blog yang akan di copy semua artikelnya, lalu klik Generate Sitemap
4. Lalu akan muncul sitemapnya, silahkan copy link sitemap tersebut

5. Silahkan buka link sitemap tersebut
6. Lihat, apakah postingannya full, atau hanya setengah, jika setengah lewatkan saja cari blog lain, jika artikelnya full sampai akhir maka lanjut ke langkah berikutnya
7. Tekan tombol Ctrl + S lalu pastikan file tersebut formatnya .xml dan beri nama file tersebut

8. Setelah di save, silahkan buat blog baru atau buka blog milik Anda
jika artikelnya ingin di posting di blog baru silahkan buat blog baru terlebih dahulu caranya disini Cara Membuat Blog Baru Gratis
9. Setelah itu masuk ke blog baru atau blog Anda
10. Lalu klik Setelan => Lainnya
11. Klik Impor Blog

12. Lalu klik Pilih File => masukkan kode captcha => klik Impor Blog

13. Selesai

Blog Artikel Asli Blog Artikel Copas

Cara Mencegah Semua Artikel di Copas Orang Lain

Setelah membuat artikel cara copy paste semua artikel blog orang lain, tidak ada salahnya membuat pencegahan copy paste semua artikel seperti diatas, untuk mencegah hal tersebut silahkan baca tutorial Cara Mencegah Semua Artikel di Copas Orang Lain.

Cara Tepat Menghilangkan Tanda Obeng Dan Tang Di Blog

Cara Tepat Menghilangkan atau Menghapus Tanda Obeng dan Tang Di Blog - Sebenarnya sudah banyak blog yang membahas mengenai cara menghapus tanda / Icon obeng dan tang atau icon quick edit di blog, tetapi kebanyakan hanya sekedar menyembunyikan, bukan benar-benar menghapus atau menghilangkan.

Bagi anda yang sedang melakukan optimasi SEO dan sering meng-cek skor SEO blog anda di chkme.com, tentu icon obeng dan tang atau icon quick edit ini mengurangi skor SEO anda di chkme.com, karena di chkme.com icon obeng dan tang atau icon quick edit ini terdeteksi dengan nama http://img1.blogblog.com/img/icon18_wrench_allbkg.png, sebagai gambar atau icon yang tidak memiliki title atau deskripsi sehingga mengurangi skor SEO anda di chkme.com

Dan kali ini sharehovel akan berbagi mengenai Cara Tepat Menghilangkan atau Menghapus Tanda Obeng dan Tang Di Blog, untuk mengatasi maslah tersebut.

Cara Tepat Menghilangkan atau Menghapus Tanda Obeng dan Tang Di Blog

Login ke akun blog anda

Masuk ke menu Template > Edit Html

Cari kode seperti di bawah ini ( gunakan ctrl + f untuk memudahkan pencarian )

            <b:include name='quickedit'/>

Setelah menemukannya, hapus semua kode seperti itu yang terdapat pada template blog anda. Pastikan anda menghapus semua kode tersebut, karena kode tersebut jumlahnya ada banyak, tergantung dari jumlah widget pada blog anda.

Kemudan, seve template dan lihat hasilnya

Catatan ! Jika anda menambahkan sebuah widget baru pada blog anda, jangan lupa untuk mengulangi langkah di atas, karena pada widget baru yang ditambahkan otomatis terdapat icon obeng dan tang atau icon quick edit.

Baiklah, itulah tadi postingan kai ini mengenai Cara Tepat Menghilangkan atau Mehapus Tanda Obeng Dan Tang Di Blog, semoga bermanfaat bagi anda. Jika ada kritik, saran, atau pertanyaan, silahkan tinggakan kometar pada tempat yang teah disediakan. Terimkasih telah berkunjung. Wassalam

Pelajaran yang harus gue lakukan Cara Menjiplak Template Blog Orang Lain

Kali ini saya akan sedikit mengulas bagaimana kita menjiplak template blog lain. Ada yang bilang juga cara ini adalah cara mencuri template blog orang lain namun saya kira bukan mencuri akan tetapi lebih berfikir kreatif. Cara ini hampir sama dengan cara mengetahui themes blog orang lain tapi malah lebih rumit lagi :D
Kalau untuk mengetahui themes blog orang lain akan lebih mudah pada cms open source apalagi jika yang memakai adalah orang yang kurang begitu mengerti tentang coding seperti saya. Contoh saja jika kita ingin mengetahui tema blog wordpress, sedikit tips bisa diketahui melalui link CSSnya, lihat saja dengan menambahkan url wp-content/themes/ :D
Tapi kali ini kita tidak ingin membicarakan theme wp atau CMS lain karena akan repot juga jika kita mau menjiplak tema blog orang lain yang memakai CMS open source tersebut. Jelas setiap template untuk functionnya kemungkinan beda apalagi jika yang membuat tema berbeda. Namun kita akan bekerja untuk mengcopy template blog lain di blogspot.
Untuk syarat utama yang harus anda mengerti adalah, anda benar benar mengerti tentang Page Elements Tags for Layouts blogger. Sebagaimana yang pernah saya singgung dalam artikel membuat template blogger sendiri. Apalagi jika anda sudah paham semua point yang saya sebutkan. Kalaupun belum mungkin anda juga bisa mengikuti artikel ini.
Kita ketahui tipe widget yang di sediakan blogger untuk penyusunan template seperti BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar. Akan tetapi yang sering digunakan orang dalam penyusunan template hanyalah BlogArchive, Blog, Header, HTML dan yang lainnya memang ada juga yang menggunakan namuan sangat jarang.
Format masing masing untuk widget ini seperti

• <b:widget id='Header1' locked='true' title='' type='Header'/>
• <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
• <b:widget id='HTML1' locked='false' title='' type='HTML'/>
• <b:widget id='BlogArchive1' locked='false' mobile='yes' title='Blog Archive' type='BlogArchive'/>

Saya kira anda harus paham dulu, tapi kalaupun sudah pusing ya sudahlah, lanjut lagi untuk membaca tulisan saya. Untuk selanjutnya supaya anda mudah dalam pekerjaan gunakan browser yang ada inspect element. Saya memakai Opera untuk pekerjaan kali ini. Untuk target kali ini saya akan mencontohkan mengcopy gameloft4u.blogspot.com yang katanya orang templatenya bagus. Kan ndak enak juga kalau yang di jadikan contoh yang premium wkwkw.
Lanjut ke cara copy template blog lain Coba kita buka blognya. Setelah itu kita masukan dalam inspect element yaitu dengan klik kanan dan memilih inspect element. Expand tag body dan jangan mengexpan apapun selain body. Copy scriptnya misalnya saya dapatkan seperti berikut

1. <div class="topmenupic">
2. <div id="menuwrapperpic">
3. <div id="headerpic-wrapper">
4. <div id="outer-wrapper">
5. <div class="picfooter">
6. <div class="menubottompic">
7. <div class="creditpic">

Kemudian tiap baris kode tersebut harus di tutup dengan penutup tag div </div>
Untuk contoh selanjutnya agak sedikit njlimet lagi. Saya contohkan kita akan membuka headerpic-wrapper. Kita ketahui dari kode yang saya dapatkan untuk section ini. adalah

1. <div id="headerpic-wrapper"></div>

Kita buka lagi dengan expand codenya. Ternyata ada tag div dengan id header-wrapper, newspic. saya membuka header-wrapper namun tidak ada yang spesial pada isi tag ini.lanjut lagi expand codenya. Nah loh, ternyata ada yang istimewa. Saya menemukan 2 section disini yaitu header dan header2. Sampai disini kita bekerja lagi yaitu dengan mencopy scriptnya dan masukan dalam headerpic-wrapper

1. <div id="headerpic-wrapper">
2. <div id="header-wrapper">
3. <div class="header section" id="header">
4. <div class="header section" id="header2">
5. <div style="clear:both;"/>
6. </div>
7. <div class="newspic">
8. </div>

Lihat pada line 3 dan 4 headerpic-wrapper tersebut. terdapat class header dan section kemudian di sini juga ditemukan id header. Dapat disimpulkan ini memakai section header. Dan bisa kita simpulkan scriptnya di replace menjadi

1. <b:section class='header' id='header' preferred='yes'>
2. </b:section>

Kemudian saya expand lagi untuk header tersebut dan disini saya temukan lagi

1. <div class="widget Header" id="Header1">

Kalau sampai disini kita sudah mengetahui class yang di pakai widget dan Header serta id nya Header1. Sudah jelas kalau ini memakai widget header. Lihat script untuk header diatas copy saja. Trus kita lihat idnya adalah Header1 maka jelas untuk codenya

1. <b:widget id='Header1' locked='true' title='' type='Header'/>

Tinggal masukan ke section header seperti berikut

1. <b:section class='header' id='header' preferred='yes'>
2. <b:widget id='Header1' locked='true' title='' type='Header'/>
3. </b:section>

Kemudian saya melanjutkan lagi dengan mengexpand section header2. Ternyata saya menemukan code

1. <div class="widget HTML" id="HTML5">

Saya menemukan class widget dan HTML kemudian juga ada id HTML5. Nah disini diketahui pada kode tersebut memakai widget HTML. Jadi lihat lagi code widget diatas tentang HTML. Jadinya kita ubah id menjadi HTML5 seperti berikut

• <b:widget id='HTML5' locked='false' title='' type='HTML'/>

Selanjutnya kita masukan ke section header2

1. <b:section class='header' id='header2' preferred='yes'>
2. <b:widget id='HTML5' locked='false' title='' type='HTML'/>
3. </b:section>

Nah dari sini mungkin anda bertanya kenapa untuk widget header maupun widget HTML 5 tidak di expand? Untuk yang ini memang bukan untuk di expan karena nantinya otomatis akan di generate blogger sendiri jadi anda tidak perlu menulis ataupun mengcopynya.
Berlanjut lagi mencoba membuka newspic. Ternyata tidak ada apapun isinya yang spesial. Tinggal copy semua isi yang ada didalamnya. Tag HTML dan semua script yang didalamnya. Tetapi harus hati hati jika didalamnya ada aksi javascript. Nah, ternyata saya lihat ini ada aksi javascript, maka ada beberapa tag yang seharusnya tidak ada menjadi ada. Hal ini karena inspect element membaca client dan sesudah aksi semua script. Jadi untuk amannya anda copas dari view source. Jadinya jika kita gabungkan semua script yang di dapatkan adalah sebagai berikut

1. <div id="headerpic-wrapper">
2. <div id="header-wrapper">
3. <b:section class='header' id='header' preferred='yes'>
4. <b:widget id='Header1' locked='true' title='' type='Header'/>
5. </b:section>
6. <b:section class='header' id='header2' preferred='yes'>
7. <b:widget id='HTML5' locked='false' title='' type='HTML'/>
8. </b:section>
9. <div style="clear:both;"/>
10. </div>
11. <div class="newspic">
12. <div class='news'>
13. <div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>
14. News Update :
15. </div>
16. <div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>
17. <script type='text/javascript'>
18. var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
19. cssfeed.addFeed("Herdiansyah Hamzah", "http://kloning-blog.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
20. cssfeed.displayoptions("date") //show the specified additional fields
21. cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
22. cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
23. cssfeed.entries_per_page(1)
24. cssfeed.init()
25. </script>
26. </div>
27. </div>
28. <div style="clear:both;"/>
29. </div>
30. </div>

Nah selanjutnya laksanakan untuk tag tag lain dan section serta widget lain seperti di atas. Selanjutnya jika dirasa telah selesai. Uji coba kode yang sudah anda kerjakan apakan markupnya sudah benar. Pakai saja aplikasi xmlmarker, copas codenya dan jika di temukan error tinggal perbaiki. Jika tidak lanjutkan saja.
Yang anda lakukan selanjutnya adalah membuka edit template di blogger dalam HTML. Bersihkan isi di tag <body> sampai </body>. Pastekan code yang sudah anda buat tersebut. Langkah selanjutnya anda copas CSS yang ada di blog target copykan ke area antara skin <b:skin><![CDATA[/* sampai ]]></b:skin>. Kalau sebelumnya ada isi buang saja. Langkah selanjutnya adalah menyimpan atau pratinjau template. Nah sekarang tinggal sesuaikan beberapa code yang tidak sesuai keinginan dan selesai.

Apa yang harus gue lakukan Cara Mengalihkan URL Blog Lama Ke Blog Baru ( Redirect Link )

Tutorial Cara Redirect Dari Link blog lama Ke Link blog yang Lain | sebagai contoh kalian bisa buka link berikut (CaraTerindah.blogspot.com) tunggu beberapa saat sampai loading selesai, nanti akan beralih ke link lain (Cara-Terindah.blogspot.com). itulah yang dinamakan Redirect Link atau biasa dikenal dengan sebutan Pengalihan Link

Beberapa saat yang lalu ada sobat blogger yang bertanya bagaimana cara mengalihkan alamat situs ke alamat situs yang lain. Bagi yang belum mengerti pasti anda akan bertanya-tanya dan sedikit bingung. dengan nyasarnya anda ke artikel kali ini. anda akan menemukan jawaban dari masalah yang anda pertanyakan tersebut. dan ternyata cara pun cukup mudah silahkan disimak baik-baik.

CARA MENGALIHKAN LINK BLOG KE BLOG YANG LAIN (REDIRECT LINK)

Berikut ini adalah step by step cara redirect link :

1. Buka blogger
2. Buka template > edit template
3. Cari kode </head> ( untuk mempermudah pencarian tekan ctrl +  f  )
4. Pastekan kode tersebut dibawah ini tepat diatas kode </head>

<script type="text/javascript">
  window.location="http://cara-terindah.blogspot.com";
</script>

Finish, silahkan dicek apakah berhasil atau tidak dengan membuka web/blog yang sudah dipasang kode redirect link tersebut.

Keterangan :
Ganti tulisan "cara-terindah" dengan link yang anda ingin alihkan

Demikian Cara Mengalihkan Link Ke Link Yang Lain bagi yang belum berhasil dan masih bingung cara mengalihkan link web ke link web yang lain bisa tinggalkan jejak dibagian komentar, dalam waktu dekat akan segera saya balas, terima kasih dan sampai jumpa diartikel selanjutnya.

Pelajaran yang harus gue lakukan Cara Membuat Aplikasi Facebook

Okey, Berikut cara membuat aplikasi Facebook

1.Masuk (log in) ke akun Facebook Friends atau langsung menuju ke https://developers.facebook.com/apps

2.Klik tombol  Register now seperti tampilan gambar berikut ini

3.CentangI accept the Facebook Platform Policy and the Kebijakan Privasi Facebook seperti gambar di bawah ini

4.Lalu masukan no hp Friends  seperti gambar di bawah ini dan Friends akan mendapatkan sms konfirmasi

 5.Lalu masukan kode yang di sms oleh facebook developer seperti gambar di bawah ini

6.Klik lanjut

7.Jawab pertanyaan yang diberikan facebook developer sesuai jawaban Friends masing-masing lalu lanjut.seperti gambar dibawah ini:

8.klik selesai

lalu klik 

 
AppName : Isi dengan nama aplikasi Friends. Gunakan nama yang valid dan jangan menggunakan nama dari nama-nama merek terdaftar
AppNamespace : Isi dengan nama yang sesuai dengan keinginan Friends. Ini digunakan sebagai alamat space  dari aplikasi anda yaitu http://app.facebook.com/namasesuaikeinginan
 

lalu klik lanjutkan

lalu Silahkan masukkan kode captchanya  pada Pemeriksaan Keamanan

lalu klik lanjutkan

Akan muncul tampilan seperti dibawah ini:

AppID : ID Aplikasi Facebook yang telah Friends buat
AppSecret : ID Aplikasi khusus (tidak perlu dijelaskan)

Silahkan Friends salin dan simpan ID aplikasi Facebook Friends
Selanjutnya isi beberapa kolom yang ada dibawahnya kolom ID aplikasi Facebook (kolom Informasi Umum), seperti yang terlihat pada gambar berikut ini

Dari gambar diatas ini, Friends hanya perlu menambahkan alamat Url blog Friends di bagian kolom Situs web dengan Masuk Log Facebook >> Site URL

Lalu klik Simpan Perubahan
Kini Friends sudah memiliki sebuah aplikasi di Facebook yang bisa Friends gunakan untuk keperluan Friends dan untuk sementara ini, anda hanya membutuhkan ID Aplikasi Facebook Friends untuk membuat kolom komentar di Facebook .

pelajaran yang harus gue lakukan Cara Menghilangkan Read More Otomatis di Blog

Pada artikel yang lalu saya sudah menuliskan tentang membuat read more otomatis dengan gambar dan hanya teks. Lalu pada artikel ini saya akan membahas tentang kebalikan dari artikel yang sudah saya tuliskan sebelumnya. Cara membuat menghilangkan read more otomatis yang ada di blog. Tutorial ini memang tidak begitu bermanfaat, karena jarang sekali blogger yang akan menghilangkan read more otomatis yang sudah terpasang di blognya. Tapi bukan tidak mungkin, karena suatu hal seorang blogger ingin menghapus atau menghilangkan read more otomatis yang sudah ada di blognya. Biasanya ini dilakukan untuk blog dengan hasil dari googling, kemudian ingin memodifikasinya sendiri.

1. Login ke akun blogger
2. Klik menu Template kemudian pilih Edit HTML
3. Pilih Lanjutkan,
4. Jangan lupa check kotak kecil yang ada diatas yang bertuliskan Expand Widget Template.
5. Kemudian cari kode yang hampir mirip dengan kode dibawah ini, atau cukup cari tulisan Readmore, Baca Selanjutnya, Selengkapnya, atau entah apa sesuai kata yang terpasang di blog kamu. Gunakan pencarian cepat (Ctrl + F) untuk memudahkan kamu dalam melaukakan pencarian kode.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6. Hapus tulisan read more (atau semacamnya), kemudian ganti script read more yang berwarna merah dengan kode <data:post.body/>.
7. Cari kode berikut

<script type='text/javascript'>
summary_noimg = 550; 
summary_img = 450; 
img_thumb_height = 150;
img_thumb_width = 150;
</script>

Bila sudah ketemu, hapus kode yang berwarna merah.

8. Sebelum kamu menyimpan template, saya anjurkan untuk mengklik Pratinjau terlebih dahulu. Hal ini sangat berguna jika terjadi kesalahan dalam memasukkan script, blog tidak akan terbuka dan akan ada peringatan.
9. Bila sudah yakin benar dan tidak ada masalah, klik Save / Simpan.

Itulah cara menghilangkan read more yang sudah terpasang di blog. Semoga bermanfaat dan bisa membantu kesulitan sobat sekalian.

Apa yang harus gue lakukan Cara Mempercepat Website dengan Gzip Compression

Mungkin Anda akan merasa kesal saat mengakses website Anda, website terasa lama. Hal ini bisa di sebabkan karena website Anda belum terkompresi. Untuk meningkatkan user experience ketika mengakses website kita menjadi sangat penting, karena semakin kecil ukuran komponen sebuah website, maka akan semakin cepat juga mengaksesnya.

Bagaimana Cara Mempercepat Website Anda?

Salah satu cara untuk memperkecil ukuran website Anda adalah dengan mengaktifkan gzip compression di server hosting Anda. Jika Anda menggunakan layanan Hosting Murah kami, fasilitas ini sudah tersedia untuk Anda di cpanel. Intinya, web server akan mengkompres konten website Anda sebelum dikirim ke visitor dan browser kemudian akan mendekompres dan menampilkan konten asli ke visitor website Anda secara cepat.

Gzip compression merupakan cara mempercepat website yang cukup efektif, karena juga mempunyai score yang bagus di Google PageSpeed and Yahoo YSlow. Jadi, pastikan Anda mengaktifkan gzip di hosting web Anda untuk meraih hasil tertinggi di kedua platform speed test di atas.

Bagaimana cara mengecek apakah web Anda sudah ter-gzip atau belum?

Untuk memastikan apakah website Anda sudah terkompresi dengan gzip atau belum, banyak tool-tool gratis yang menyediakan untuk hal ini, salah satunya Anda dapat memanfaatkan tools dari whatsmyip.org. Silahkan buka toolnya langsung di http://www.whatsmyip.org/http-compression-test/ lalu masukkan alamat website Anda.

Contoh di atas adalah saat saya masih belum saya aktifkan gzip pada website saya, dan setelah saya aktifkan maka hasilnya akan terlihat seperti ini:

Bagaimana Cara mengaktifkan gzip di Hosting Anda?

Jika Anda pengguna layanan shared hosting dengan cPanel, pada umumnya layanan ini sudah terinstall di shared hosting Anda, sehingga Anda tinggal mengaktifkan layanannya secara manual melalui cPanel.

Berikut adalah cara mengaktifkan gzip compression di cPanel Anda :

1. Silahkan Anda Login ke cPanel hosting Anda.
2. Pada kelompok menu “Software” Cari Menu “Optimize Website”
   
3. Pilih “Compress all content” lalu klik “Update Settings” ..
   
4. Selesai dan Anda bisa memeriksa status website Anda dengan menggunakan tool tersebut di atas.
   

Tau g sich Sepuluh Printer Terbaik untuk Cetak Foto di Tahun 2013

Jika Anda pemilik kamera digital yang memiliki hobi selalu mengambil foto apapun yang Anda temui, Anda mungkin memiliki banyak koleksi foto digital yang memenuhi ruang hard Drive dan hanya sedikit yang Anda cetak. Anda selalu bisa pergi ke tempat percetakan di tempat Anda untuk mencetak koleksi foto Anda. Tetapi bagaimana jika Anda ingin mencetak foto Anda sendiri di rumah Anda? Sebuah printer terbaik untuk cetak foto mungkin apa yang hanya butuhkan untuk memenuhi kebutuhan Anda untuk kepuasan instan.
Tapi memilih printer terbaik untuk cetak foto yang tepat dari banyaknya pilihan yang tersedia di pasaran dapat menjadi sesuatu yang membingungkan. Jangan takut, Paseban akan membawa Anda ke daftar printer terbaik untuk cetak foto di tahun 2013 ini yang bisa Anda jadikan patokan sebelum Anda membeli printer untuk Anda.
Hal pertama yang harus Anda pahami adalah bahwa printer terbaik untuk cetak fotojatuh ke dalam dua kategori utama: dedicated  ((juga dikenal sebagai small-format) dan near-dedicated Photo. Printer foto Dedicated dapat mencetak foto dan memang ditujukan untuk mencetak foto. Mereka biasanya terbatas pada ukuran kertas maksimum 2x3, 4x6 atau 5x7 inci atau variasi panorama pada ukuran ini), tetapi kategori tidak didefinisikan hanya dengan batas-batasnya. Printer ini relatif kecil dan portabel. Mereka produk elektronik konsumen yang benar-benar mandiri, dengan penekanan pada kemudahan penggunaan. Tapi itu tidak benar untuk mengatakan semua yang bisa printer ini lakukan adalah mencetak foto. Printer ini juga ditambahkan fungsi tambahan seperti kemampuan untuk memotong foto, mengubah warna, dan bahkan menyimpan foto.
Printer near-dedicated yang ditujukan setidaknya untuk para pengguna di tingkat penggunaan konsumen, ditujukan untuk fotografer amatir yang serius. Mereka menawarkan tingkat kualitas output profesional, biasanya dapat mencetak pada ukuran sampai dengan 13 x 19 inci, dan sering menuntut tingkat kecanggihan yang paling tinggi untuk mendapatkan hasil terbaik. Jika Anda harus menggunakan printer terbaik untuk cetak fotonear-dedicated untuk penggunaan pencetakan foto di kantor, pastikan untuk memilih satu yang memungkinkan Anda dengan mudah beralih antara kertas foto dan kertas biasa.
Selain itu, beberapa printer multifungsi (MFP) dapat bekerja sebagai laboratorium foto pribadi. Pada dasarnya mereka digunakan untuk mencetak teks dan grafis, tapi untuk urusan foto, mereka juga dapat diAndalkan. Mereka umumnya mendukung pencetakan dari slide, film 35mm, dan sumber-sumber lain, dan dapat beroperasi sebagai perangkat mandiri tanpa perlu terhubung ke komputer.
Apakah Anda seorang fotografer kasual atau pro hardcore, salah satu dari 10 printer terbaik untuk cetak fototerbaik pasti sesuai dengan kebutuhan Anda. Apapun yang Anda pilih, Anda akan puas dengan hasil cetak dari tangkapan terbaik Anda.
Epson PictureMate Charm – Rp1,8 jutaan
Seperti vefsi PictureMates sebelumnya, Epson PictureMate Charm memberikan kecepatan yang cepat dan biaya rendah per foto, tapi dengan output berkualitas tinggi bahkan dari generasi sebelumnya.
Epson Stylus Photo R2000 – Rp6,1 jutaan
Epson Stylus Photo R2000 menawarkan kecepatan dan kualitas output yang cocok untuk fotografer profesional dan seniman grafis dengan harga yang cocok untuk para amatir yang ingin bekerja secara serius.

Epson Stylus Photo R2880 – Rp9,7 jutaan
Cocok untuk amatir yang serius dan fotografer profesional dan seniman grafis, Epson Stylus Photo R2880 menghasilkan output yang sangat cantik dengan kecepatan cepat sama seperti saudaranya yang telah disebutkan sebelumnya.
Epson Stylus Photo R3000 – Rp9,7 jutaan
Memiliki kemampuan untuk menghasilkan output yang cantik, dan dapat mencetak dengan kecepatan tinggi, membuat Epson Stylus Photo R3000 menjadi pilihan yang menarik untuk dipertimbangkan baik untuk para amatir yang serius di dunia fotografi dan fotografer profesional serta seniman grafis.
Canon Pixma MG8220 Wireless Inkjet Photo All-in-One – Rp3,6 jutaan
Canon Pixma MG8220 Wireless Photo Inkjet All-in-One mengklaim bahwa meskipun printer ini ditawarkan dengan harga yang terjangkau, namun output yang dihasilkannya setara dengan printer MFP di kelas High-end yang cocok digunakan untuk kebutuhan pribadi di rumah.

Epson Stylus Pro 3880 – Rp15 jutaan
Epson Stylus Pro 3880 printer terbaik untuk cetak fotoprofesional ini adalah pilihan yang cocok baik untuk fotografer profesional dan para amatir yang berpikir dan berniat untuk melakukan lompatan yang serius untuk meniti karier di dunia fotografi.
Canon Pixma PRO-1 – Rp12 jutaan
Canon Pixma PRO-1 adalah printer terbaik untuk cetak fotoyang memiliki ukuran besar, lambat, dan mahal untuk printer foto A3+, tapi apa yang membuatnya masuk ke dalam daftar ini adalah karena printer terbaik untuk cetak fotoini menghasilkan hasil output yang kaya akan warna, megah dan bisa dikatakan kualitasnya hampir sempurna.
Canon Pixma Pro9500 Mark II – Rp10 jutaan
Canon Pixma Pro9500 Mark II merupakan produk kelas atas dari Canon yang merupakan perbaikan dari Iine up printer untuk cetak fotonya untuk penggunaan desktop yang hampir identik dengan aslinya, tetapi dengan kecepatan yang lebih baik.

Epson PictureMate Show – Rp3,6 jutaan
Epson PictureMate Show dapat mencetak foto besar, dan LCD sebesar 7 inci adalah fitur yang menarik, tetapi dengan harga yang ditawarkan, apakah kualitas fitur layarnya ini mampu mengatasi semua yang dibebankan di dalamnya? Mengingat printer terbaik untuk cetak foto yang memiliki harga di atasnya tidak membawa fitur serupa.
Polaroid Grey Label GL10 Instant Mobile Printer – Rp2 jutaan
Polaroid Grey Label GL10 Instant Mobile Printer memberikan hasil cetakan foto yang lebih tajam dibandingkan generasi sebelumnya, ZINK printer. Printer portabel ini juga mampu mencetak foto dalam ukuran yang besar. [PY]

Pelajaran yang harus gue Cara seo membuat dynamic heading di blog

Blog SEO friendly 2013 -

Salah satu strategi seo terbaik untuk artikel blog anda adalah membuat judul postingan menjadi title blog atau menjadi H1 dalam halaman artikel. Sejauh yang saya pahami dari template blogger, memang team blogger telah menyediakan tags h1, h2, h3, dan h4 dalam elemen html templatenya. Tapi menurut saya tags title tersebut masih mempunyai kelemahan saat artikel blog anda nanti harus bersaing dengan artikel blog lainnya di hasil pencarian google.

Bentuk title tags default html template blogger.

Pada umumnya bentuk tags title di html template blogger anda adalah seperti di bawah ini:

H1: Judul homepage blog anda. Judul beranda blog anda akan selalu tetap jadi H1 di semua halaman posting.

H2: Tanggal publish artikel blog anda. Sangat cocok jika dipergunakan oleh anda yang mempunyai blog bertema berita. Karena pengunjung blog biasanya mencari berita terupdate. Bagaimana jika tema blog anda berisi tentang tutorial atau tips dan trick?. H2 biasanya juga berbentuk judul widget dalam blog anda bagi yang menggunakan add a gadget di layout blogger. Misalkan anda menggunakan popular post, aboutMe, HTML/Javascript dalam add a gadget layout blogger, maka setiap judul yang anda ketik akan menjadi H2 dalam setiap halaman blog.

H3: Judul postingan blog anda. Ini adalah judul artikel blog anda. Setiap judul posting blog anda menjadi H3.

H4: Biasanya merupakan orang yang berkomentar atau name/url dalam halaman artikel blog. Jika anda menyediakan kotak komentar di halaman artikel, maka orang atau link yang berkomantar di blog anda akan diletakkan sebagai H4.

Pahami search engine saat melihat halaman blog.

Jika anda ingin artikel blog bisa bersaing di hasil pencarian google, maka anda harus pahami juga bagaimana google melihat halaman blog anda. Search engine google akan menampilkan link postingan blog anda saat ada pengunjung mengetikkan kata dalam browser mereka. Link yang ditampilkan adalah link yang mempunyai relevansi paling tinggi dari apa yang telah diketikkan user tersebut.

Bagaimana google menilai suatu halaman blog mempunyai relevansi tinggi dengan kata kunci yang diketiikan user. Pertama google melihat judul dari suatu halaman. Berikutnya google melihat deskripsi dan seluruh isi suatu halaman blog. Semakin berkaitan antara judul, deskripsi, dan isi suatu halaman. Maka akan semakin besar kemungkinan google menampilkan halaman tersebut di hasil pencarian.

Selain text dalam halaman, google juga melihat struktur html dalam halaman blog. Sebagai contoh jika anda menggunakan html title tags bawaan dari blogger dengan susunan seperti yang saya sebutkan di atas. Maka judul postingan blog anda akan di letakkan di prioritas nomor 3 (karena judul posting blog adalah h3). Bayangkan jika anda menuliskan judul artikel yang telah banyak dibuat di search engine. Untuk bisa bersaing dengan artikel sejenis dari blog lain, Sudah seharusnya anda membuat judul artikel tersebut adalah prioritas nomor 1 saat dilihat oleh google.

Buat dynamic heading halaman artikel.

Anda sudah membuat artikel original yang berkualitas, deskriptif, informatif, dan bermanfaat buat pengunjung blog anda, tapi artikel blog anda tetap tidak bisa berada di posisi teratas hasil pencarian google. Apa sebabnya?, pemahaman saya mungkin judul artikel blog anda kurang search engine friendly. Sudah seharusnya anda membuat setiap judul halaman artikel blog anda menjadi h1 dan mengganti judul blog hompage menjadi h2. Berikut ini adalah cara membuat semua judul postingan menjadi h1 dalam blog anda.


1. Terlebih dahulu login ke dalam blogger.com dan pilih blog anda.

2. Pada tabs sebelah kiri silahkan pilih Template >> Edit HTML. Akan lebih baik jika anda backup template terlebih dahulu.

3. Hilangkan terlebih dahulu heading tag title h1 di html template blogger anda. Cari kode di bawah ini:

<div id='header-inner'>
  <div class='titlewrapper'>
  <h1 class='title'>
    <b:include name='title'/>
    </h1>
  </div>
  <b:include name='description'/>
</div>

Ganti dengan kode di bawah ini:

<div id='header-inner'>
  <div class='titlewrapper'>
    <b:include name='title'/>
  </div>
  <b:include name='description'/>
</div>

4. Hilangkan heading tag title h1 untuk homepage yang selalu menjadi h1 di semua halaman artikel blog. Cara ini akan membuat heading tag title di homepage menjadi h2 saat berada di halaman artikel. Cari kode berikut:

          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>

Ganti dengan kode dibawah ini:

    <b:includable id='title'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType != "static_page"'>
      <h1 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
          <data:title/>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
          <data:title/>
        </a>
      </h2>
    </b:if>
    <b:else/>

    <h2 class='title'>
      <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
        <data:title/>
      </a>
    </h2>
      </b:if>
</b:includable>

5. Langkah berikutnya adalah membuat heading atau judul artikel blog anda menjadi h2 saat di halaman homepage blog dan menjadi h1 saat berada di halaman artikel itu sendiri (otomatis homepage title yang sebelumnya h1 berubah menjadi h2). sebelumnya, saya tekankan untuk jangan mengubah kode apapun yang terdapat di antara kode:

    <b:includable id='mobile-post' var='post'>
dan
</b:includable>

Yang perlu anda lakukan hanya mengganti kode yang tedapat di bawah:

              <b:includable id='post' var='post'>

Beberapa baris di bawah nya akan terdapat kode ini:

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Ganti kode tersebut dengan kode di bawah ini:

<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>

Jika anda ingin mengubah heading tag untuk tanggal postingan, silahkan cari kode di bawah ini:

        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

Ganti tulisan h2 di atas dengan h3 atau h4 atau sesuai dengan keinginan anda. Yang terpenting susunan nya adalah h1, h2, h3, dst. Hindari menambahkan heading yang susunannya melompat-lompat. Misalkan h1, h2, tanpa ada h3, kemudian ada h4, h5, dan seterusnya.

Klik Preview terlebih dahulu dan jika tidak di temukan error silahkan klik Save Templete. Seharusnya sekarang heading blog anda sudah dinamis dan tentunya lebih search engine friendly dalam mesin pencari. Untuk mengetahui apakah judul postingan sudah berubah jadi h1, silahkan anda buka halaman artikel manapun dari blog anda. Kemudian tekan Ctrl+U, saat muncul layar tambahan klik di sembarang tempat dari layar tersebut, selanjutnya tekan Ctrl+F dan ketikkan <h1. Sekarang seharusnya anda melihat di layar tambahan tersebut kode di bawah ini:

<h1 class='post-title entry-title' itemprop='name'>
Di sinilah judul artikel blog anda.
</h1>

Lakukan cara yang sama untuk cek halaman homepage blog dan buktikan kalau title homepage berubah menjadi h2 saat berada di halaman postingan. Tolong jangan ragu-ragu untuk bertanya dengan meninggalkan komentar di bawah ini. Segala saran dan masukan dari anda akan sangat membantu saya dan sahabat blogger lainnya.