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.