Cara Copy Template Blog Lain

Cara Copy Template Blog Lain

Kali ini Blogger Sragen 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



Relasi Cara Copy Template Blog Lain

Fitrah Al Anshori

Mantap bang,,, btw gimana cara upload theme untuk blogger yang baru yach?

6/2/12 21:16
Sragen ASRI

Saya kurang tahu untuk blogger yang baru soalnya memang ndak sesuai dengan koneksi yang saya punya. Saya masih menggunakan untuk dasbor yang lama :D

6/2/12 21:32
simple

wowowoooow nyimak ni om,.. action nya tar klo g galau ckckc haha

6/2/12 22:21
bimaSakti

wew termasuk bisa copy template premium om ?
ijin nyimak & dikit2 praktek sik :P

6/2/12 22:50
bloggersolo

oOo gitu ya.. langsung praktekkin aja siapa tahu templateku nanti jadi lebih keren

7/2/12 12:27
addyn

mantapp, coba dulu om

7/2/12 13:25
Gaptek

luar biasaaaaaaaaaaaaaaaaaaaaaaaaaaa..... Pening

8/2/12 09:27
iezul blog

sama kaya ctrl+U itu ya mas?

8/2/12 10:13
Muhammad Mufid

ruwet ,:?!!

8/2/12 17:04
Ady Blink

ada gak yang langsung copy template nya?

24/2/12 01:40
medanweb

GAN. AGAK sedikit pusing ne kpala gan. tapi mantap tips nya gan...

27/2/12 23:12
phupunk

bisa di coba nnt bang...
thanx buat infox..

27/2/12 23:56
reckydj

wah nice info nih gan

27/3/12 19:39
Mbah Kuncen

Pusieng uy...

Cara mudahnya ada gak Bos...???

1/4/12 14:46
BlogAndri.com

Saya tertarik template herbal teman, alamatnya:
http://templates-toko-obat-herbal.blogspot.com/

Bisa bantu copy gak Bos?

Hehe...

Makasih,,,,

1/4/12 14:53
sragen asri

kayaknya bisa.. wani piro wkwkwkw.. lha kalau teman tinggal minta saja tow xi3..

1/4/12 18:09
file-edu.com

mbah bowo mantep mbah seo mu

2/4/12 20:04
situs pelajar

uwihhh,,, mantap bgt kang tutorialnya

6/4/12 20:54
Petak Crop

Kalau dipandang mumet. coba tak praktekin dulu. siip untuk tutoriallnya

6/4/12 21:35
TORAYASURABAYA

Kloning aja bos .. :D

7/4/12 16:19
osojisub

gan klo ngilangin generator blogg gimana gan cara nya ....

12/4/12 23:08
Obat Herbal Kanker Kelenjar Getah Bening

aduh,,gak ngerti,,kalo web bisa nggak gan,,soalnya pengen template kaya yang lain tapi gak tahu namnya..

24/4/12 08:53
bengkel mobil klasik antik

mumet banget gan

29/4/12 04:52
heru

ada cara yang lebih mudah gak gan? mumet neh, maklum newbie.. saya ada blog yang saya ingin templatenya tapi gak tau nama templatenya jadi gak bisa saya cari. bisa kasi saran?

9/5/12 16:35
Anonymous
Anonymous

yang ngasi artikel setan yang baca artikel pki

16/5/12 06:17
Ratri primacya rosa

gak ngerti gak ngerti .. -_- mbingung

18/5/12 18:45
Rudy Hartono

makasih baget infonya

21/5/12 19:10
qiw

binguuung..

22/5/12 21:56
ranggapopfm
25/5/12 14:10
Admin ./Boriel Cyber ++==

membingungkan bro

27/5/12 09:18
kuceng21

Mantab, rada puyeng juga baca kalo belum di praktekin,,, ^^

28/5/12 09:51
Anonymous
Anonymous

MAS KLO AGAR TEMPLATE KITA TIDAK DI CURI GIMANA CONTOH KAYAK MAS PUNYA DI Balas yahhhhh

30/5/12 13:15
Blogger Sragen

Masak templateku tidak bisa di copy :O .. yang bener om

30/5/12 14:29
Mas Jamal

Sumpah mumet banget om. Btw kalau bisa Mas Jamal minta theme yang dipake blog ini dong om. Keren tampilannya :D

11/6/12 22:11
naraka

mudah ato mumet itu relatif klow yang tau XML... klow yang mau mumet biasanya karena dia coder XML yang fanatik alias ga pernah puas kaya saya ckckckck... yah klow orangnya biasa2 aja mah, klow udah sama paling bilang "Yah alhamdulillah mas udah kaya gini, udah bersyukur saya"...
hayo sapa coder XML yang kaya gitu ?
ngmong2 kenapa si Blogger make XML ko ga pindah ke PHP aja ya ? saya dari dulu tanya ke yang punya alias google kaga ada jawabannya... ada yang bisa jawab ?

12/6/12 04:32
naraka

yang ngmong gimana templatenya biar ga dicuri tolong angkat tangan dan enyah dari dunia internet sekarang :D
internet itu bebas bung, emang yang bikin template kamu siapa ? kamu sendiri... imposibblezzztttttt.... ckckckck... yang namanya HTML, CSS itu client scripting yang diloadnya ya di browser kamu ngapain pake diumpet2in... hahhh... aya2 wae,

12/6/12 04:35
waloetz

keren ulasanya. tpi nambah pusing he..
sya dpt template tp loading nya lama bnget gan.

13/6/12 01:31
Admin

anaeh bisa clone/mencuri template blog orang

15/6/12 09:31
Gaptek Plus

bingung kang

21/6/12 13:20
zakin

salam..memang pening dan dicuba tak menajdi la...
boleh tak saudara tolong saya copy template ni young internet master...

15/7/12 16:32
Anonymous
Anonymous

mumet tingkat dewa

18/7/12 17:49
yoga89

pusing 7 keliling !!!

20/7/12 09:42
sya

harus dicoba ni, moga sukses,, hehehhee

21/7/12 19:52
bocah bandar dalam

ora ngerti aq kang......ga cra lg ya slain d ats...

22/7/12 22:22
d'candra's

bih aku mumed banget yaaaa ???? g' paham

10/8/12 12:49
ortotis prostetis

hora mudeng blas......awang2


tp tetep trims artikelnya menarik banget

5/9/12 18:27
ardena

kok saya coba masih gak bisa ya

8/9/12 21:17
Informasi Terkini

pusing gan, ada g cara" dari awal supaya agak gampang gitu lohh di cerna newbie

19/9/12 14:19
Balyan

panjang x penjelasannya!

21/9/12 15:24
Limit Post

boleh dicoba nih hehehe :)

3/10/12 14:53
Blogspot Tutorial

patut dicoba gan :-bd
tapi... cara diatas kurang lengkap tuch.

ada beberapa template yang menggunakan tag conditional, custom comment box (bukan hanya custom CSS, tapi custom HTML), custom mobile template, bekh.... banyak yang lain.

coba kunjungi blog saya, ada sebagian kecil template yang share dari sekian banyak template yang saya clone.

16/10/12 18:28
Abed Saragih

Agak susah juga ya Gan. :)

20/10/12 12:36
liberty reserve

kalau untuk mengkopi scrip website apakah sama caranya gan..
karena aku lagi ada tugas dari kampus mau buat sistem pmb online..
terus mau nyontoh di website yang sudah ada..
tolng penjelasnanya..terimakasih

23/10/12 21:57
randi

mantap triknya mas . thanks for sharing sangat membantu sekali walaupun mumet bacanya panjang buanget hehehe

27/10/12 15:13
lukman

waduh pusing.... ntar bookmark dulu ah... lain kali dibaca ulang.. btw thanks sob..

3/11/12 07:22
Arminaven Gayo

bisa gak di tiru template berikut mas:
http://newlaptopspecs.blogspot.com/

ane pingin banget punya template gitu mas
terima kasih

7/11/12 22:46
RAHASIA PENGUSAHA KAYA

menyimak dan memcoba memahami...

9/11/12 11:48
Desi

Mantap sob tutorialnya!

1/12/12 17:21
administrator

Arminaven Gayo@ enteng itu bos

13/12/12 22:32
kevin ananta

saya pusing dan tidak mengerti

22/12/12 17:34
cherylaghniads

aduhhhh puyeng mas bro.... belajar pelan-pelan deh mas bro, hehheheeee

30/12/12 18:30
info cah bagus

mntap ni caranya,,,agak pusing juga hehhehe saya

17/1/13 14:50
devilz-adrian

Sedikit Puyeng buat mempelajarinya bro :D

30/1/13 13:45
Gudang Makalah -Mu

waduh....
ane pusing nih bang....
:D :D :D

16/2/13 09:12
Ace Maxs

Wah patut dicoba nih,. :)

16/2/13 09:13
Kambuhlagi

pusing... g paham blal maz brow...

8/4/13 02:14
kerja online

boleh diuji coba niih
walaupun mumet tapi namanya juga ilmu
thx bro

10/4/13 01:12
pilih agama

aw aw, sedkt puyeng, prlu tes y

30/4/13 10:47
DarutNews.com

agak sulit sekarang menurut saya..hehe

4/5/13 15:54
danil

hahaha kalu sudah berhadapan sama kode script seperti ini, pasti pusing saya

17/6/13 14:45
indowebster-movies

Pusing saya gan bacanya, saya bookmark aja deh supaya bisa dipelajari lagi nanti. Makasih atas ilmunya.

20/7/13 17:16
ad darussalam Yamazaky

MUUUMEEETE PUUUUOOOOOLLLL tapi yo thank matur be are phun mumet tp nice artickelle

20/7/13 20:18
dimaz aconk

mumet gan,tapi gak pa2 nambah ilmu

23/8/13 00:10
Semar Bingung

Owhhh, jadi caranya meng-copy atau cloning template blog seperti itu ya Sob? Terus-terang saja saya baru tahu setelah membaca uraian dalam artikel ini. Akan tetapi jujur saja saya belum juga dapat memahami sepenuhnya tentang cara meng-copy template seperti itu. Maklumlah, pengetahuan dan wawasan saya tentang hal seperti ini memang masih sangat minim sekali.

Oh ya, kalau saya boleh tanya, misalnya template yang akan dicopy itu menggunakan berbagai fungsi kondisional blogger didalamnya untuk menandai CSS ataupun HTML-nya, maka apakah template tersebut juga masih dapat dicopy atau di-cloning, Sob?

Sekian, salam kenal, salam berbagi, dan tidak lupa saya sampaikan terimakasih apabila Sobat berkenan memberikan uraian jawaban atas pertanyaan saya tersebut.

20/11/13 01:18
Bowo Ekowidodo Sragen

Om Semar Bingung menurut saya, kalau blogger lebih gampang di copy cuman tingkat kesulitan yang berbeda. Soal fungsi kondisional blogger memang tingkatannya lebih rumit hanya saja ketika kita bisa membandingkan dan paham cara kerja fungsi kondisional blogger tersebut saya rasa tidak ada masalah walaupun waktu yang diperlukan lebih lama

20/11/13 09:13
Semar Bingung

Hmmmm, jadi begitu ya Sob. Berarti walau mungkin pengerjaannya lebih sulit, akan tetapi seperti template yang saya pakai untuk ELTELU itu dapat dicloning juga ya Sob?

20/11/13 09:30
Bowo Ekowidodo Sragen

Saya rasa masih bisa selama semua proses masih menggunakan serba otomatis, kalau sudah manual paling cuman bisa di cloning tampilan :D. Maksudnya otomatis disini anda masih menggunakan json buat ngisi data di bagian home.

Selama blog masih online saya kira masih bisa di cloning walaupun cuman sebatas tampilan saja. Makin mudah pengcodean makin mudah pula untuk di clonning seluruh metode templateya

20/11/13 09:40
Semar Bingung

Wahhh, kalau begitu berarti saya hanya bisa berharap dan berdoa agar blog yang saya kelola tidak sampai dicloning oleh orang lain dong.

Oh ya, btw terimakasih banget ya Sob, karena Sobat telah berkenan berbagi ilmu yang dapat saya jadikan sebagai sebuah pengetahuan dan wawasan baru.

20/11/13 10:02
Bowo Ekowidodo Sragen

Sebenarnya kalau menurut saya sih pemikiran yang mesti di rubah, di kloning biarin saja :D dengan begitu kita tahu teman yang sama selera.

Klo saya ya biarkan di kloning, malah jadi tantangan untuk membuat bagaimana konsep template supaya sulit di cloning :D , Paling ndak ada alasan untuk coding :D

20/11/13 10:11
Ficri Pebriyana

emang bisa ya template di copy, kan ada kode yang tersembunyi

19/3/14 21:21
Bowo Ekowidodo Sragen

Bisa saja, kalau ndak bisa ndak ramai dunia pebloggerran soal cloning

20/3/14 15:41
Yofi Mohamad

ah mumet banget om :v

3/7/14 12:04
Dhia Syarafana

Mantap sekali tipsnya om, boleh di coba ni

21/7/14 11:51
Suaraa Yogyakar

terima kasih infonya..

http://www.suarajogja.com

22/7/14 21:16

[ 84 ] Komentar Cara Copy Template Blog Lain

Jangan menaruh live link di kotak komentar.