Cara Cloning Template Blogspot

Cara Cloning Template - Berawal dari saya mencari di mbah google template Blogger Valid HTML5 + Responsive untuk mengganti template default bawaan dari blogger untuk Blog Sederhana saya ini, namun semuanya tidak sesuai dengan selera/keinginan saya hehehe :D Dalam pencarian Template Valid HTML5, saya di arahkan mbah google ke blog master om Agus Ramadhani dan Kang Ismet

Saya suka Tema Template kedua master Blog ini. Nah di sini muncul ide kreatif saya untuk meng-cloning template master blog ini. (Maaf ya om Agus dan Kang Ismet) hehehe Piss \m/_.._\m/ saya hanya sekedar mengembangkan kreatifitas saya, dan tidak akan share hasil Template clonengan buatan saya :).

Pertama kali saya clonng template Kang Ismet dan berhasil. Berikut screenshoot nya :



Waktu Pembuatan template clonengan hanya membutuhkan waktu dua jam, termasuk menyusun formulasi template, dan menemukan kode kode yang disembunyikan atau yang tidak ditampilkan, sampai proses upload template di blogger. Dalam pembuatan template, anda tidak perlu repot-repot mencari template yang mirip mirip template bawaan template orang yang anda akan di cloning. cukup copy source code templatenya saja.

Disini saya tidak akan share hasil Template clonengan blog master buatan saya, namun saya akan memberitahukan cara cloning template blog orang lain. Okay !! mari kita langsung aja caranya (simak baik-baik) :

Dalam Bahasan postingan ini, saya kasih contoh cloning template blog saya sendiri, hasil clonengan dari template Blog om master blog Agus Ramadhani atau biasa dikenal di sebut o-om.com

Pertama
Hal pertama yang anda lakukan pilih salah satu postingan template target anda, terserah anda postingan apa aja!!. Setelah memilih salah satu postingan, lalu klik kanan di area bebas. Klik Kanan > Lihat Code Sumber Laman. Jika browser di kommputer anda berbahasa inggris kira-kira seperti ini: Right Click > See Source Code. (saya menggunakan Browser Firefox Berbahasa Indonesia). Lalu buat Notepad, dan copy semua Source code halaman postingan pilihan anda, Paste lalu beri Judul notepad anda "dplkt-halaman-postingan.txt" (tanpa tanda kutip). atau "dplkt-halaman-postingan.xml" (tanpa tanda kutip). Jangan Lupa Buat Folder Baru dan Beri judul "Duplikat Template" (Tanpa Tanda Kutip). Simpan Hasil Copian Sorce Code anda di folder tersebut, biar gampang di ingat.

Kedua
Perlu di ketahui, susunan Template Blog umumnya seperti ini :

• Header Wrapper terdiri dari Header Left dan Header Right. (pada Template duplikat saya, seperti ini Header Inner dan .blog-desc)
• Outer Wrapper terdiri dari Main Wrapper dan Sidebar Wrapper.
• Footer Wrapper terdiri dari Bottom Left, Bottom Center dan Bottom Right
• Credit Wrapper.

Okay!! anda mulai dari bawah code HTML dulu, hasil dari copian sorce code tadi. Cari dan perhatikan baik-baik code pada bagian Footer Wrapper, misalnya seperti ini:

Susunan code bagian Footer Wrapper dari template duplikat saya, terdiri dari :

 id='footer-wrapper'>

 id='bottom'> ..... susunan dari Bottom terdiri dari :
- left-bottom
- center-bottom
- right-bottom

 id='upper-footer'> dan

 class='credits'>

Contoh code pada bagian Footer Wrapper:

 id='footer-wrapper'>

 id='bottom'>
<div class='bottom section section' id='left-bottom'>

 class='widget HTML' id='HTML4'>


 class='title'>About Me


 class='widget-content'>


 class="profile-textblock">

Note:

• Perhatikan code yang berwarna merah. yang berwarna merah, Hapus saja.
• Perhatikan code yang berwarna Hijau, code div ganti dengan b:section lalu tambahkan preferred='yes' di belakang code id='left-bottom', sehingga hasilnya seperti ini :

<b:section class='bottom section' id='left-bottom' preferred='yes'/>

Lalu lanjut pada bagian center-bottom dan right-bottom. dan hasil lengkap dari b:section widget pada sub bagian bottom seperti ini :

 class='bottom section' id='left-bottom' preferred='yes'/>
 class='bottom section' id='center-bottom' preferred='yes'/>
 class='bottom section' id='right-bottom' preferred='yes'/>

Hasil Selengkapnya pada sub bagian Bottom dari Footer Wrapper seperti ini :

 id='footer-wrapper'>

 id='bottom'>
 class='bottom section' id='left-bottom' preferred='yes'/>
 class='bottom section' id='center-bottom' preferred='yes'/>
 class='bottom section' id='right-bottom' preferred='yes'/>

 id='upper-footer'>
 class='footer section' id='footer' preferred='yes'/>

 


 

 class='credits'>

Note:
Perhatikan dan teliti baik-baik code sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code tersebut.

Ketiga
Lanjut pada bagian Outer Wrapper yang terdiri dari Main Wrapper dan Sidebar Wrapper.

Contoh susunan bagian Outer Wrapper :

 id='main-wrapper'>

 id='main-wrapper-border'> <-- 5px="" body="" border="" ini="" kanan="" postingan="" saja="" sebelah="" sekedar="" span="" tambahan="" tebalnya="">

 id='sidebar-wrapper'>

Pada bagian Outer Wrapper ini, sama seperti cara menyusun bagian Footer Wrapper, namun khusus pada bagian b:section Main, anda sisa meng-copy saja code template yang lama milik anda. Contohnya seperti ini :

 id='outer-wrapper'>

 id='main-wrapper'>

 id='main-wrapper-border'>
 class='main' id='main' showaddelement='no'>  <--- anda="" b:section="" blog="" code="" copy="" dari="" lama="" main="" mulai="" sampai....="" semua="" span="" star="" template="" yang=""> id='Blog1' locked='true' title='Posting Blog' type='Blog'>
 id='main' var='top'>
.
.
.

.
.
.

<-- akhir="" code="" dari="" dengan="" ini="" sampai="" span="">
Note:

• Yang berwarna biru mulai star peng-copian dari template blog lama anda sampai akhir dari

.

Khusus code

penutup untuk Outer Wrapper belum ditambahkan dari keterangan diatas, karena masih ada Sidebar Wrapper. Nantinya code penutup untuk Outer Wrapper akan di sematkan tepat dibawah Sidebar Wrapper.

Dalam kasus ini, saya meng-copy isi code Main Wrapper dari template default bawaan blogger. mengingat masih lengkap, masih perawan, Karena belum ada pengurangan atau pengeditan yang saya lakukan dari template default bawaan blogger tersebut. (isi dari code Blog Post dan isi code Comments).

Selanjutnya, anda lanjut pada sub bagian Sidebar Wrapper. Lihat contoh di bawah ini :

 id='sidebar-wrapper'>
<div class='inner-box section section' id='inner-box'>

 class='widget Feed' id='Feed1'>



New Post

class='widget-content' id='Feed1_feedItemListDisplay'>

style='filter: alpha(25); opacity: 0.25;'> href='http://metropersonal.blogspot.com/feeds/posts/default'>Memuat...
Note:

• Perhatikan code yang berwarna merah. yang berwarna merah, Hapus saja.
• Perhatikan code yang berwarna Hijau, code div ganti dengan b:section lalu tambahkan preferred='yes' di belakang code id='inner-box', sehingga hasilnya seperti ini :

<b:section class='inner-box section' id='inner-box' preferred='yes'/>

Hasil Selengkapnya pada sub bagian Sidebar Wrapper dari Outer Wrapper seperti ini :

 id='sidebar-wrapper'>
 class='inner-box section' id='inner-box' preferred='yes'/>

Dan sebagai penutup bahasan bagian Outer Wrapper, berikut Hasil Selngkap-lengkapnya :

 id='outer-wrapper'>

 id='main-wrapper'>

 id='main-wrapper-border'>
 class='main' id='main' showaddelement='no'>  <--- anda="" b:section="" blog="" code="" copy="" dari="" lama="" main="" mulai="" sampai....="" semua="" span="" star="" template="" yang=""> id='Blog1' locked='true' title='Posting Blog' type='Blog'>
 id='main' var='top'>
.
.
.

.
.
.

<-- akhir="" code="" dari="" dengan="" ini="" sampai="" span="">

id='sidebar-wrapper'> class='inner-box section' id='inner-box' preferred='yes'/>

class='clear'> 

class='clear'/>

class='backtotop'> href='#'>Back to Top

Note:

• Perhatikan dan teliti baik-baik code

sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code penutup tersebut.

Khusus untuk code penutup

ini, fungsinya sebagai code penutup dari data vocabulary Review, gunanya untuk merating semua postingan anda, letak tepatnya, anda bisa lihat tepat dibawah code
Keempat
Selanjutnya, anda lanjut pada bagian Header Wrapper, sebagai akhir dari pembahasan code ini. Berikut Susunan code dari Header Wrapper :

 id='branding'>

 id='head-inner'>

 id='header-wrapper'>

Header Wrapper terdiri dari Blog Desc dan Header. Pada bagian Header Wrapper ini, sama seperti cara menyusun bagian Outer Wrapper, namun khusus pada bagian b:section Header, anda sisa meng-copy saja code template yang lama milik anda. Contohnya seperti ini :

 id='branding'>

 id='head-inner'>

 id='header-wrapper'>
 class='blog-desc section' id='blog-desc' preferred='yes' showaddelement='yes'/>
 class='header' id='header' maxwidgets='1' showaddelement='no'>  <--- anda="" b:section="" blog="" code="" copy="" dari="" header="" lama="" mulai="" sampai....="" semua="" span="" star="" template="" yang=""> id='Header1' locked='true' title='Metro Personal (Header)' type='Header'>
 id='main'>
 cond='data:useImage'>
 cond='data:imagePlacement == "BEHIND"'>
.
.
.

.
.
.



 <-- akhir="" code="" dari="" dengan="" ini="" sampai="" span="">

 

Note:

• Pada bagian blog-desc section, saya tambahkan showaddelement='yes' yang nantinya anda akan ganti menjadi 'no' setelah anda mengisi deskripsi tambahan agar supaya tidak ada penambahan widget lagi. Khusus deskripsi tambahan saja.
• Yang berwarna biru mulai star peng-copian dari template blog lama anda sampai akhir dari

.

Perhatikan dan teliti baik-baik code

sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code penutup tersebut.
Kelima (penutup)
Rangkuman hasil Duplikat Template dari semua pembahasan code HTML diatas sebagai berikut :

xml version="1.0" encoding="UTF-8" ?>



 charset='utf-8'/>

//////////////////////////////////////////////

]]>

itemscope='' itemtype='http://data-vocabulary.org/Review'>

id='branding'>

id='head-inner'>

id='header-wrapper'> class='blog-desc section' id='blog-desc' preferred='yes' showaddelement='yes'/> class='header' id='header' maxwidgets='1' showaddelement='no'> <--- anda="" b:section="" blog="" code="" copy="" dari="" header="" lama="" mulai="" sampai....="" semua="" span="" star="" template="" yang=""> id='Header1' locked='true' title='Metro Personal (Header)' type='Header'> id='main'> cond='data:useImage'> cond='data:imagePlacement == "BEHIND"'> . . . . . .

<-- akhir="" code="" dari="" dengan="" ini.="" sampai="" span="">

//////////////////////////////////////////////

id='outer-wrapper'>

id='main-wrapper'>

id='main-wrapper-border'> class='main' id='main' showaddelement='no'> <--- anda="" b:section="" blog="" code="" copy="" dari="" lama="" main="" mulai="" sampai....="" semua="" span="" star="" template="" yang=""> id='Blog1' locked='true' title='Posting Blog' type='Blog'> id='main' var='top'> . . . . . .

<-- akhir="" code="" dari="" dengan="" ini="" sampai="" span="">

id='sidebar-wrapper'> class='inner-box section' id='inner-box' preferred='yes'/>

class='clear'> 

class='clear'/>

class='backtotop'> href='#'>Back to Top

//////////////////////////////////////////////

id='footer-wrapper'>

id='bottom'> class='bottom section' id='left-bottom' preferred='yes'/> class='bottom section' id='center-bottom' preferred='yes'/> class='bottom section' id='right-bottom' preferred='yes'/>

id='upper-footer'> class='footer section' id='footer' preferred='yes'/>

class='credits'>

Share on Google Plus

About Admin