Cara Cloning Template blog Orang Lain

Cara cloning atau mencuri template blog orang 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. 

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 Opera untuk pekerjaan kali ini. Untuk target kali ini saya akan mencontohkan mengcopysportymagazine2.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 membukaheaderpic-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

Sumber : http://adf.ly/dQkMu 

Update Username dan Password Akun Speedy Instan @wifi.id Gratis 2014

Update Username dan Password Akun Speedy Instan @wifi.id Gratis 2014

          alhamdulillah gan ,, ane bisa update lagi nih ,,, ditengah tengah liburan semester ini gan ,, hehe ,, setelah kemarin posting spin yang masa berakhirnya tanggal 31 januari ini .., akhirnya pada hari ini ane mau share update Username dan pAssword Speedy Instan yg terbaru ,, biar agan and sista bisa berinternet ria gratis ,,, 

ok langsung saja gan ini dia username dan possword speedy instan baru nya ,,, ::



User1 = 89302715790
Pass   = 85016093499066

User2 = 89302715789
Pass   = 35277184619199

User3 = 89302715788
Pass   = 75644363574557

User4 = 89302715787
Pass   = 13883358116827 




nb : Username dan Password ini aktif sampai dengan 31 MEI 2014 ,, gunakan akun ini dengan bijak gan ..

ok cuman itu dulu gan dari saya ,,, sampai ketemulagi ,, diupdatean selanjutnya ,,  jangan lupa komengnya gan ,, walaupun sekedar ucapan terimakasih ,, itu sangat berarti bagi saya .

Mempercantik Menu Blog dengan mycssmenu

Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.

Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.

Safari 3.1 (Mac/Win)	yes, but no multiple shadows
Safari 4 (Mac/Win)	yes, full support
Opera 9.5 (Mac/Win/Lin)	yes, full support
Firefox 2/3 (Mac/Win/Lin)	no
Firefox 3.1/3.5 (Mac/Win/Lin)	yes, full support
Google Chrome 1 (Win)	no
Google Chrome 2 (Win)	yes, full support
IE 7/8 (Win)	no
Shiira (Mac)	yes, but no multiple shadows
Safari on iPhone	yes, but no multiple shadows
Opera Mini 4.1	yes, no blur radius

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000; 
background: #fff; 
text-shadow: 1px 1px 1px #424242;

• color : #000 adalah warna dasar tulisan
• background: #fff adalah warna latar
• 1px 1px 1px #424242 untuk warna bayangannya (shadow)

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

	color: #000;  background: #fff;  text-shadow: 2px 2px 3px #000;
	color: #000;  background: #fff;  text-shadow: 2px 2px #000;
	color: #000;  background: #fff;  text-shadow: 2px -2px 3px #000;
	color: #000;  background: #666;  text-shadow: 0px 1px 1px #fff;
	color: #666;  background: #000;  text-shadow: 0px 1px 0px #ccc;
	color: #fff;  background: #666;  text-shadow: 0px 1px 1px #000;
	color: #fff;  background: #000;  text-shadow: 1px 1px 6px #fff;
	color:#FFE9C7;background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
	color:#823210;background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
	color: #fff;  background: #fff;  text-shadow: 1px 1px 4px #000;
	color: #000;  background: #000;  text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

 Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup. 

Sumber : http://adf.ly/dPC9i

Css Generator

Salah satu bagian penting dalam template adalah kode css(cascading style sheet), seperti kita ketahui css adalah bahasa stylesheet yang mengatur tampilan sebuah dokumen. Umumnya css digunakan untuk memformat halaman sebuah blog/webdengan bahasa HTML. Dengan css, kita bisa mengatur warna dan tampilan blog, bahkan memformat ulang template dengan merubahnya secara tepat.

Untuk mengedit beberapa bagian atau keseluruhan kode css pada template, kita bisa membuatnya secara manual. Itu buat yang mengerti bahasa css, buat yang belum begitu mengerti, css style generator dari metatitan cssbuilder bisa sobat coba. Disini sobat bisa dengan mudah membuat kode css untuk template sobat, mulai dari body, header, post, sidebar, dll.

Tentukan dahulu bagian yang ingin di buat, setelah itu atur bagian font, box properties, background, posisi dan list properties. 

Hanya dalam sekejab, kode css berhasil sobat ciptakan dan tinggal memasukkannya kedalam template. Hasilnya bisa sobat lihat dibawah ini :

Itu hanya satu contoh saja, silahkan sobat kreasikan template sehingga menjadi lebih indah. Jangan takut template jadi rusak, silahkan backup template sobat sebelum melakukan edit css.

Selamat mencoba !

Sumber : http://adf.ly/dPC1N

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

border-style: dotted border-style: solid border-style: groove border-style: inset

border-style: dashed border-style: double border-style: ridge border-style: outset

Berikut ini contoh dari border yang bisa sobat gunakan :

Border-style: dotted

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">

dotted dotted dotted dotted dotted

</div>

dotted dotted dotted dotted dotted

Border-style: solid

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">

solid solid solid solid solid

</div>

solid solid solid solid solid

Border-style: dashed

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">

dashed dashed dashed dashed dashed

</div>

dashed dashed dashed dashed dashed

Border-style: groove

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">

groove groove groove groove groove

</div>

groove groove groove groove groove

Border-style: double

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">

double double double double double

</div>

double double double double double

Border-style: inset

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">

inset inset inset inset inset

</div>

inset inset inset inset inset

Border-style: outset

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">

outset outset outset outset outset

</div>

outset outset outset outset outset

Border-style: ridge

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">

ridge ridge ridge ridge ridge

</div>

ridge ridge ridge ridge ridge

Border Campur Aduk 

<div style="border-style:dotted  dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px">

dotted dashed double outset

</div>

dotted dashed double outset

Keterangan :

• border:5px adalah tebal dari border.
• #08088A adalah kode untuk warna biru, selengkpnya bisa dilihat disini.
• width:500px adalah lebar dari kotak.
• padding:20px adalah jarak antara tulisan dengan border.
• background:#FFF adalah warna latar.

Semoga bermanfaat.

Sumber : http://adf.ly/dPBuV

modifikasi blockquote

Ada pertanyaan dari salah seorang sobat pada postingan membuat navigasi horizontal 2 baris yang menanyakan tentang modifikasi blockquote. Saya akan berikan sedikit contoh blockquote yang bisa sobat jadikan referensi dan mungkin bisa dipasang pada blog. Blockquote sendiri adalah tulisan menjorok kedalam yang memang sudah ada pada fasilitas blogger.

Blockquote Gambar

Sama seperti yang ada di blog ini, kode css-nya :

.post blockquote { 
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqLXESklZmtRaTUBvdiahfjnG3otxc1-_7DMbM_5xpBdlIX402zLN3fMqciCA5mMZPYpruYHKsPSXDWMEjQbw6F8-ECWaC_fdnxpD3izGAEGaEZ8TqMg6y6pL-jYDo8ThXk4t23ge1JkY/s400/quotes_icon.gif) no-repeat scroll 5px 5px; 
color:#3B0B0B; 
border:2px outset #E6E6E6; 
margin:10px; 
padding:10px 10px 10px 40px; 
}

Hasilnya :

 

Keterangan :

• #F9F9F9 adalah warna background.
• padding:10px 10px 10px 40px --->> perhatikan saja yang 40px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 40px-nya.
• Untuk gambarnya sobat sesuaikan dengan warna background, saya punya beberapa gambar dibawah ini yang bisa sobat gunakan.

Untuk penggunannya : silahkan klik kanan pada salah satu gambar diatas, kemudian pilih properties --->> location image properites --->> copy semua url gambar tersebut kemudian ganti url tulisan warna merah diatas dengan url gambar yang baru.

---

Blockquote Border dan Warna

Kode css :

.post blockquote { 
margin: 1em 3em; 
padding: .5em 1em; 
border-left: 5px double #AEB404; 
background-color: #F2F5A9; 
}

Hasilnya :

---

Blockquote Tulisan Besar Pada Baris Pertama

Kode css :

.post blockquote { 
margin: 1em 2em; 
border-left: 1px dashed #999; 
padding-left: 1em;

} 
.post blockquote p:first-letter { 
float: left; 
margin: .2em .3em .1em 0; 
font-family: "Monotype Corsiva", "Apple Chancery", fantasy; 
font-size: 250%; 
font-weight: bold;

} 
.post blockquote p:first-line { 
font-variant: small-caps;

}

Hasilnya :

---

Blockquote Warna dan Model Tulisan

Kode css :

.post blockquote { 
color: #66a; 
font-weight: bold; 
font-style: italic; 
margin: 1em 3em; 
} 
.post blockquote p:before { 
content: '"'; 
} 
.post blockquote p:after { 
content: '"'; 
}

Hasilnya :

---

Berikut cara pemasangannya :

• Login ke blogger.
• Tuju Tata Letak.
• Pilih Edit HTML.
• Cari kode .post blockquote { …………………………………dst } hapus semua kode tersebut dan ganti dengan salah satu kode css diatas.
• Jangan Lupa Simpan Template.

Mudah-mudahan bermanfaat ya.

Sumber : http://adf.ly/dPBom

Membuat Garis lengkung Blog

Sebelumnya saya pernah membahas tutorial membuat garis lengkung pada kolom atau curve corner. Mungkin kurang lengkap dan masih banyak yang menanyakan hal ini kepada saya. Sayangnya kode border-radius ini tidak support dengan internet explorer. Jika sobat suka menggunakan ie sebagai browser utama, sobat tidak akan bisa merasakan hebatnya css untuk garis lengkung ini.

Saya akan berikan contoh pengunaan border-radius pada tulisan saja, jika ingin menambahkan pada sidebar atau kotak postingan juga bisa. Berikut ini syntax untuk border-radius dan beberapa contoh penulisan di blog menggunakan kode border-radius.

Syntax untuk border-radius

Mozilla Equivalent	Browser Opera 10.5	Webkit Equivalent (Safari 3)
-moz-border-radius-topright	border-top-right-radius	-webkit-border-top-right-radius
-moz-border-radius-bottomright	border-bottom-right-radius	-webkit-border-bottom-right-radius
-moz-border-radius-bottomleft	border-bottom-left-radius	-webkit-border-bottom-left-radius
-moz-border-radius-topleft	border-top-left-radius	-webkit-border-top-left-radius
-moz-border-radius	border-radius	-webkit-border-radius

-Moz-Border-Radius (Untuk Mozilla)

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px;  border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

-Webkit-Border-Radius (Untuk Safari)

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Border-Radius (Support Opera 10.5)

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Jika ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang saya tebalkan diatas kedalam csssidebar blog sobat.

Sumber : http://adf.ly/dPBgn