http://otebagiilmu.blogspot.com_ Kali ini
Ote akan sedikit mengulas bagaimana kita mengcopy 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 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
1. <b:widget id='Header1'
locked='true' title='' type='Header'/>
1. <b:widget id='Blog1'
locked='true' title='Blog Posts' type='Blog'/>
1. <b:widget id='HTML1'
locked='false' title='' type='HTML'/>
1. <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 sportymagazine2.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
1. <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 dulu. Nah tinggal anda sesuaikan beberapa tah
yang tidak sesuai keinginan. copy template blog orang lain di blogspot selesai
:D.. Mudah atau mumet wkwkwkwk
Selamat mencoba kawan
Add My Facebook, Follow Twitter atau
Add Google+ oteoxcel untuk terus mendapatkan informasi terbaru seputar
teknologi dan download software terbaru.
Semoga sukses kalau gagal terus coba dan coba karena kegagalan adalah musuh
kita bray :) :)
Wassalamu'alaikum Wr. Wb
Powered by Oktri Ahmad
0 komentar:
Posting Komentar