Assalamualaikum Wr. Wb
Saya selaku admin baru di sini mau share tentang
Cara mengetahui jenis template blog seseorang
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.
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 mencopy 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 Mozila Firevox
untuk pekerjaan kali ini. Untuk target kali ini saya akan mencontohkan
mengcopy www.skynurdinhs.blogspot.com, yang katanya orang templatenya bagus. Kan ndak enak juga kalau yang di jadikan contoh yang premium.
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
<div class="topmenupic"><div id="menuwrapperpic"><div id="headerpic-wrapper"><div id="outer-wrapper"><div class="picfooter"><div class="menubottompic"><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.
<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.
<div id="headerpic-wrapper"><div id="header-wrapper"><div class="header section" id="header"><div class="header section" id="header2"><div style="clear:both;"/></div><div class="newspic"></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
<b:section class='header' id='header' preferred='yes'></b:section>
Kemudian saya expand lagi untuk header tersebut dan disini saya temukan lagi
<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
<b:widget id='Header1' locked='true' title='' type='Header'/>
Tinggal masukan ke section header seperti berikut
<b:section class='header' id='header' preferred='yes'><b:widget id='Header1' locked='true' title='' type='Header'/></b:section>
Kemudian saya melanjutkan lagi dengan mengexpand section header2. Ternyata saya menemukan code
<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
<b:section class='header' id='header2' preferred='yes'><b:widget id='HTML5' locked='false' title='' type='HTML'/></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
<div id="headerpic-wrapper"><div id="header-wrapper"><b:section class='header' id='header' preferred='yes'><b:widget id='Header1' locked='true' title='' type='Header'/></b:section><b:section class='header' id='header2' preferred='yes'><b:widget id='HTML5' locked='false' title='' type='HTML'/></b:section><div style="clear:both;"/></div><div class="newspic"><div class='news'><div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>News Update :</div><div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'><script type='text/javascript'>var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")cssfeed.addFeed("Herdiansyah
Hamzah", "http://kloning-blog.blogspot.com/feeds/posts/default")
//Specify "label" plus URL to RSS feedcssfeed.displayoptions("date") //show the specified additional fieldscssfeed.setentrycontainer("div") //Wrap each entry with a DIV tagcssfeed.filterfeed(10, "date") //Show 10 entries, sort by datecssfeed.entries_per_page(1)cssfeed.init()</script></div></div><div style="clear:both;"/></div></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 dulu. Nah tinggal anda sesuaikan beberapa tah
yang tidak sesuai keinginan. copy template blog orang lain di blogspot
selesai