Ngintip Template Wordpress Tetangga

Sebelum saya memulai tutorial ini saya coba mau tanya, anda pasti sering melihat template yang sering sekali anda idam - idamkan, Rasanya pasti anda pernah. Sama seperti saya, saya juga pernah mengalaminya. Didalam tutorial ini saya akan coba menunjukkan kepada anda, bagaimana cara melihat template orang lain. Saya mohon maaf sebelumnya kepada salah satu web template yang saya gunakan sebagai contoh.


Sepertinya tidak usah lebih lama lagi untuk memulai kisah menyedihkan ini

.( untuk itu saya mohon maaf untuk sebesar-besarnya).
Yang perlu anda siapkan:

1. Pertama yang perlu anda siapkan sebuah browser srigala api (firefox),
2. Lalu sebuah equip (add-ons) untuk srigala api yang namanya Web Developer ( bisa anda download di alamat ini )
3. Yang keempat koneksi internet

Bila kita sudah siap mari kita mulai,
Pertama buka web site o-om, setelah itu bila firefox anda sudah terpasang web devloper carilah menu CSS — View CSS atau anda bisa tekan CTL+SHIFT+C( atau lihat gambar dibawah ini). isana akan muncul css nya o-om, seperti ini

/* Main settings
--------------------------------------
*/
body{background:#ececec url(http://img152.imageshack.us/img152/6128/bgrmp2.gif) repeat-y center; margin:0; padding-top:0px; font:12px verdana,arial,Sans-erif; text-align:center; color:#333}
.updateinfo{display:none}
a:link{ color:#346ba4; text-decoration:none}
a:visited{ color:#800000; text-decoration:none}
a:hover{ color:#56b9ff; text-decoration:underline}
#main .post-body a:link{ color:#346ba4; text-decoration:none}
#main .post-body a:visited{ color:#800000; text-decoration:none}
#main .post-body a:hover{ color:#56b9ff; text-decoration:underline}
a img{ border-width:0}
.post-body img{ margin:5px; border:1px solid #444}
#main-wrapper a:link{ color:#222; text-decoration:none}
#main-wrapper a:visited{ color:#c13a10; text-decoration:none}
#main-wrapper a:hover{ color:#c13a10; text-decoration:underline}
/* Header
--------------------------------------*/
#header-wrapper{ background:#fff; width:900px; height:135px; margin:0; padding:0; text-align:left; border-top:10px solid #fff}
#header{ margin:0; padding:0}
#header h1{ margin:0; padding:0px 0 0 0px; font-size:90%; font-weight:bold; line-height:1.3em; letter-spacing:.1em; font-style:normal; color:#333; display:none}
#header a{ color:#333; text-decoration:none}
#header a:hover{ color:#333; text-decoration:underline}
.descriptionwrapper p{ margin:0; padding:3px 0 0 10px; line-height:1.3em; font-style:normal; font-weight:bold; font-size:90%; letter-spacing:.1em; color:#333; display:none}
.ad-banner{ width:200px; margin:0; padding:7px 0 0 7px; float:left}
.ad-banner2{ width:390px; height:117px; margin:0; padding:7px 0px 0 0; float:right; border-left:4px dotted #c0c0c0;}
#ad-banner2 li{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP1DOIdyWeUABhDvsLzFBCXVOezuTDj4VTccIR8KgeMal2BqsQzNchnwpgm7TxFtK5ca54gpDB_E1yJ2lvTgIwjCHR2Igw-MbMCeBT2Ro3pjHlxjEr-KLFAnlkKCxwGGFGhSHthBZ1-Uk/s400/link_arrow.png") no-repeat 0px .30em; margin:0; padding:0 0 .25em 17px; line-height:1.2em}
#ad-banner2 ul{ list-style:none; margin:0 0 0; padding:7px 20px 0px}
.ad-banner3{ width:780px; margin:0; padding:0px 0 0 70px; float:center}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper{background:#fff; width:900px; margin:0 auto; padding:0; text-align:left; border-right:0px solid #222; border-bottom:0px solid #222; border-top:0px solid #222; border-left:0px solid #222}
#main-wrapper{background:#fff; width:520px; float:left; margin:0px; padding:10px 0 0px 15px; word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#sidebar-wrapper{background:#fff; width:330px; float:right; margin:2px; padding-right:12px; word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
.ad-box{ margin:0; padding:17px 0 0; text-align:left}
.sidebar-left{ width:150px; float:left; margin:0; padding:3px 2px 0 0}
.sidebar-right{ width:150px; margin:0; padding:3px; float:right}
.sidebar-bottom{ width:330px; float:right; padding:3px; margin:0; padding-right:0px}
.sidebar-bottom-hide{ width:330px; float:right; padding:3px; margin:0; padding-right:0px;visibility:hidden}
br{ clear:both}
/* Headings
----------------------------------------------- */
#sidebar-wrapper h2{ margin:.6em 0 .6em; padding:0; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px dotted #c0c0c0}
/* Headings
----------------------------------------------- */
h2.date-header{ margin:.0em 0 0; padding:0; font-size:80%; color:#777; height:0px; visibility:hidden}
.post{ margin:.5em 0 1em; padding-bottom:1em; padding-right:1em; text-align:justify}
.post h3{ margin:.5em 0; padding:0 0 0; font-size:12px; font-weight:bold; font-style:normal; line-height:20px; color:#333}
.post h3 a, .post h3 a:visited, .post h3 strong{ display:block; font-size:18px; text-decoration:none; font-style:normal; color:#333; font-weight:normal}
.post h3 strong, .post h3 a:hover{ color:#777; text-decoration:underline}
.post{ margin:0 0 .10em; line-height:20px}
.post-body, .post-body p{ margin:0; padding:0; line-height:20px}
.post-footer{ margin:.75em 0 0px; color:#ff7800; letter-spacing:.0em; font-size:90%; line-height:1.3em; border-bottom:1px dotted #B7B7B7}
.post-footer p{ margin:0; padding:0px 0 5px; line-height:1.3em}
.post-body{ margin-top:0}
.comment-link{ margin-left:.6em}
.post img{ margin:0px; padding:0; border:1px dotted #fff}
.post bt{float:left; color:#222; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px}
.post blockquote{ margin:1em 20px; padding-left:30px; padding-right:5px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxOMt6dv8biQTzPuOQnlaGt2nuxHbmrB20ApeMQbTAWm4Ip9_-v30LMkeEEj89zkeRVTKujVg0T6g5A4YTvNcRosi6XbGv0k4kh4TQLJ1CxQgWKfDEOP1qn6R32dTQ1Lokz7_uKlFkLs/s400/quotes_icon.gif") no-repeat 0 .0em; color:#666; border:1px dotted #ccc}
.post blockquote p{ margin:.75em 0; padding-right:5px; padding-left:5px; border:1px dotted #ccc; background:#F7F7F7}
p.post-footer-line-3{ margin:0 auto; padding:0}
/* Comments
----------------------------------------------- */
#comments h4{ background:#efefef url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2xSFE6pX4hQyP52WIvbyk5BP74otk2KlYlm8Owk4mnKsjSzFPVknr5YqvIF8qeTC0aFC1cwabns_xpWVdDLKRbSk1ckmoqWsT4t-o7ImBju2oL2N2EssWtgtQYa8cuGdNoJYdi5SdYtYZ/s400/icon_comments.png") no-repeat 3px .3em; width:485px; margin:.1em 0; font-size:12pt; font-weight:bold; line-height:1.5em; letter-spacing:.1em; color:#111; padding-left:25px}
#comments-block{ border:1px dotted #ccc; width:510px; margin:1.3em 0 1.5em; line-height:1.6em}
#comments-block .comment-author{ margin:.5em 0; padding-left:25px; background:#FFFFCC url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8VV1YYrJuj8IYZGqucVB3LYY34cFT8xTCsbUvVofvkpKnM9t2Ofm_URfakqj3nVVJIC2inVudk5_wl-g7Zo_LVc6tKy2plQqj2w-GlfP-OiEJuU8t5Z5EiPoDNih_F_r4WEN3UQm4aX3m/s400/icon_comment.gif") no-repeat 3px .3em; color:#111}
#comments-block .comment-body{ margin:.25em 0 0; color:#333}
#comments-block .comment-footer{padding-left:5px; margin:-.25em 0 2em; line-height:1.5em; font-size:7pt; letter-spacing:.1em}
#comments-block .comment-body p{ margin:0 0 .75em; padding-left:5px; background:#f3f3f3}
#comments-block a:link{ color:#c13a10}
.deleted-comment{ font-style:italic; color:gray}
.owner-Body{margin:0 0 .75em; padding:0 0 0 0px; padding-left:5px; background:#DFFFDF}
.owner-Body p{margin:0 0 .2em 0}
#blog-pager-newer-link{ float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{ float:right; line-height:1.8em; font-weight:bold}
#blog-pager{ width:510px; text-align:center; background:#efefef; line-height:1.8em; font-weight:bold; color:white}
.feed-links{ clear:both; line-height:0em; display:none}
/* Sidebar Content
----------------------------------------------- */
#sidebar-wrapper ul{ list-style-type:none}
#sidebar-wrapper p{ padding-left:12px; color:#333}
#sidebar-wrapper{ color:#333; line-height:1.3em}
#sidebar-wrapper ul{ list-style:none; margin:0 0 0; padding:0 0 8px}
#sidebar-wrapper li{margin:0; padding:0 0 .25em 0px; line-height:18px}
#sidebar-wrapper ul li {border-bottom: 1px dotted #B7B7B7}
#sidebar-wrapper .widget, .main .widget{ margin:0 0 0px; padding:0 0 5px}
.sidebar section{ margin:0; padding:0}
.main .Blog{ border-bottom-width:0}
#ArchiveList{ padding-left:0px}
widget-content{}
/* Profile
----------------------------------------------- */
.profile-img{ float:left; margin:3px 7px 1px 0; padding:0px; border:1px solid #ccc;}
.profile-data{ margin:0; letter-spacing:.1em; font-size:90%; font-weight:bold; line-height:1.4em; display:none}
.profile-datablock{ margin:.5em 0 .5em .5em; }
.profile-textblock{ text-align:justify; margin:0.5em; line-height:1.6em}
.profile-link{padding-left:0px; font-weight:bold}
/* Footer
----------------------------------------------- */
#footer-wrapper{ height:0px; clear:both; margin:0 auto; text-align:left; padding:1px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0;padding-top:10px}
.credits{ margin:0; width:900px; padding:0px 0px 0px; font-size:95%}
body#layout #header{ margin-left:0px; margin-right:0px}
/* bottom
---------------------------- */
#bottom{ background:#444 url(http://img152.imageshack.us/img152/8805/buttommenubgraq8.gif) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff;}
#bottom a:link{color:#fff; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:underline}
#bottom h2{padding:20px 0 2px 0; margin:0 0 10px 0; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#FF9933}
#bottom ul li{list-style-type:none; border-bottom:0px solid #626200; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP1DOIdyWeUABhDvsLzFBCXVOezuTDj4VTccIR8KgeMal2BqsQzNchnwpgm7TxFtK5ca54gpDB_E1yJ2lvTgIwjCHR2Igw-MbMCeBT2Ro3pjHlxjEr-KLFAnlkKCxwGGFGhSHthBZ1-Uk/s400/link_arrow.png") no-repeat 0px .30em; padding-left:17px; margin-top:2px}
#left-bottom{width:210px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:330px; float:left; padding:0 5px 0 28px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
/*-- (Menu/Nav) --*/
#nav{background:#fff url(http://img244.imageshack.us/img244/2094/topmenubgrhy3.gif) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:660px; padding-left:6px}
#nav-right{float:right; display:inline; width:200px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold;}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}
/*-- (Search) --*/
#search{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqS2HcSg0LCIFsuCwouOHSrgbekk1t8u8if4QjJjbZAncYCbI9scX8HFrfbga3eTm0u3dby9FemQp3TSrbdAW6WR6Qe_UmejX26FioCgl4YQhNKbP_G9QLhzlxd1dvJwCsgCzCqZBv7Em/s400/search.gif) 6px 0px no-repeat; border:1px solid #333; float:right; height:23px; margin:0 15px 0 0; width:180px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 30px; width:140px}


Sekarang kita bisa lakukan copy paste pada code yang dimulai dari main sampai search saja. Jadi bukan asal copy paste. Setelah itu jadi deh template yang sesuai dengan target kita.

Good Luck