OPTIMASI BLOG 3: Template Creating Website Modifikasi

Berawal dari seorang sahabat Maspena kalau nggak salah namanya, dia menanyakan template yang saya pakai dan boleh minta nggak? Tentu saja boleh, disini saya ingin berbagi tapi sabar dulu ya, saya lagi memodifikasi template tersebut sehingga cocok dipasang untuk blog dengan konten apapun. Template blog ini aslinya adalah techstop. Tapi menurut saya template ini kurang fleksibel karena hanya bisa digunakan untuk blog dengan konten tutorial atau semacam catatan harian. Sehingga banyak sekali bagian yang mesti dimodifikasi.

Untuk itu saya mencoba mencari template yang simple saja untuk memodifikasi template yang mirip dengan yang saya pakai sekarang ini. Template Creating Website Modifikasi yang sudah jadi sekarang ini awalnya adalah template Minima dengan dua kolom, kemudian saya bagi menjadi 3 kolom di bagian homepage, dan hanya 2 kolom di bagian post dan page. Tujuan saya membagi menjadi 3 kolom di homepage agar lebih fleksibel, jadi bisa juga dipakai temen-temen yang mempunyai blog dengan konten berita misalnya. Berikut ini screenshot bagian homepage dan postpage (klik gambar untuk memperbesar) :

Ada beberapa perbedaan tampilan template ini dengan yang saya pakai, selain bagian homepage, kotak berlangganan feedburner juga saya rubah sehingga sekarang mejadi satu bagian dengan fitur related post. Jadi lebih memberikan ruang kosong di bagian sidebar. Untuk bagian sidebar lebar, sengaja di bagian bawah tidak saya bagi lagi menjadi dua karena sudah saya sediakan sidebar kecil di bagian homepage.

Oke sekarang saya akan berikan beberapa kode yang mesti dipasang di bagian sidebar sehingga tampilannya mirip dengan blog yang saya pakai sekarang ini :

Translate gambar bendera (sidebar lebar atas)
Sebenernya tutorialnya sudah banyak beredar di internet, tapi daripada anda susah-susah nyarinya langsung saja saya berikan kode scriptnya untuk dipasang :
<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy8qgIMUewN7Fdh3_pjzSEs15AAyMEE2LKsZklyELw3b_fJnI9eyN5ZaD4DGCgsM2_GHhKXcWyEx9zxpUB9gBxsNKTZXCYapaSXho6RoF9rGPRSqJyIkqjs9PMX0W0cciAP9GitFGuxe0/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28EjuTseuo7L3RPLKDqFYPm_VILCCzUY9Kd7FtK-nFSuG5tw4ownm8-aj7zZhlPzRL5EHtkp4lvm1ZGpCQ9t2BlXUAz6qpCN1jJj5gDtl-YDHhptG-HNVo_bvuxVjSRhclfi5qps3Bxc/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYYlijYFOYTZrsBwyZtUqOCRKwOubA69-0ZJT0OyGAZzwTxZBCxaX6cDzZMzz-0G15Ti2M3Ro2cZQAG9chMv0a4dgJ10KDihMoOe1_LYP12b3jnsP06s-06tXn_9AEU-fLcUVIH7YEhnlN/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRwCoo_FB8EKB69KX0QmBBdMtAL9udXaRmwI8sS2GmASqTF36jNk5IqUVF-dwKm9EabTjgUK-LCR-3_CuD6bmortcswhU2qBN4lXso4QknFUAttGxcGwOi0SsdsCXXjAgB5oaRYPQlLA/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe_owMyyrihwk_EONRs9Kr1kzlLGKeehlzx-VgNCHZgvTIatyRvb3xMWp9dMtJSHk1z7X8MmDLwMIeokBhi-Cob20IJ67pkooe9vRVG_gb13YVBQUsBfXSs98qZTYuq905YWQK5wxMI4U/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCQyMJYqyVgvKWAi6pYvgiNuneAqtWqOEbbhUTH-LHNl4nJAIBtlWUQRbM3kTday_c4-qIwLLXkWk1tHus9P0PjAGOsM0AbHh4XYePoUki1oKIdcZM571E_Tz3pCxOZRzFcHuBb_XuVmdV/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJBZPDqY_UlCWQBMDEnS6G3unlvXT72w_EpI3i0qmHaOuyBtifKqq9pSSyTLqYdotk9-rol2ErvvxnXM8UhWSH-V9IrXHX9_z1tlAN1ISKHgU3DWxPNU8McDeU0I1i3WejO7q-J9srG4E/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvyXqzZtfgOZwRxr1VRA-t0Ur8cbnGH08IJj2p_RWrcLvuuQ37KOno7xVUWOpKBJ0P7xYRCKidtcomxSMnfobTcWzVarFRK8rGlimiy9XVt_HLTevqneYrGdN5IC9UGrlywoFagOOD5D0/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" /></a></div>
Tab View
Pada bagian ini, tab view yang saya pakai masih manual, sekarang sudah banyak cara membuat tab view yang lebih gampang misalnya dengan menambah sentuhan jQuery. Tapi nggak ada salahnya jika kode script yang saya pakai di blog ini saya bagikan kepada anda (Untuk lebih jelasnya bisa dibaca pada tutorial membuat tab view):
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 92px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color:#999999;
padding-top: 6px;
border: 1px solid #ffffff;
border-bottom: 1px solid #ccc;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #444343; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #F2F2F2;
}
div.TabView div.Pages div.Page
{
padding: 2px;
height: 100%;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkA9POJnXDbNGlRk6ddQMrbV5srvy4GltOzXqTyeIj-KpjeDvGY_Mhzrzor4LHuPHPwLeSayiV6JGoWrdVw-CLe3gbj6JZzSl6RyQjOmXH3i9DxT5dhwhVhe5t_OAzqoLH1LRuq3kmiqkI/") no-repeat left center;
border-bottom:1px dotted #7f7f7f;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 298px;">
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Tutorial Blog</span></a>
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Wordpress</span></a>
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Joomla</span></a></div>
<div class="Pages" style="height: 200px; width: 298px;">

<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>

<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>

<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>
</div>
</div>
</form>

<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Artikel Terbaru
Kode script yang dipasang :
<div style="background: none repeat scroll 0% 0% rgb(242, 242, 242); border: 1px solid rgb(204, 204, 204); height: 200px; overflow: auto; padding: 10px;">
<span id="pbl_labels"></span>
<div id="pbl_posts">
Recent Posts </div>

<script type="text/javascript">
var jumlah_maksimum_post = 10;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>

<script src="http://kauman.googlecode.com/files/recentpostsbylabel.js">
</script>

<script src="http://creatingwebsite-maskolis.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script></div>
Di bagian paling bawah, ganti URL nya dengan URL blog anda
Untuk membuat huruf awal dalam postingan menjadi besar seperti dalam postingan ini sangat mudah, silahkan baca tutorialnya tentang Membuat Huruf Besar (Drop Cap) pada Awal Postingan.

Sepertinya hanya itu yang mesti dipasang agar mirip dengan blog yang saya pakai ini, untuk bagian lain Anda bisa berkreasi sendiri atau memodifikasi sendiri sesuai dengan selera. Wah iya hampir lupa di bawah ini saya sertakan link dimana anda bisa melihat demo dan bisa mendownloadnya secara gratis.

NB :

Buat yang menginginkan tampilan template ini dua kolom seperti yang saya pakai, silahkan menuju link ini.
Setelah anda download dan filenya diekstrak, terdapat dua file xml yang satu dengan menggunakan show/hide comment dan satu lagi tanpa show/hide comment
Jika ada masalah dengan link downloadnya bisa tanyakan ke kotak komentar atau konfirmasi ke johnytemplate@gmail.com.
Untuk tutorial Johny Portal masih dalam perbaikan, jadi mohon untuk bersabar

Note :

If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger or re-download it then you can upload the updates one (only for Creating Website and Johny Simple Magazine templates).
And for Johny Portal, Creating Website and Johny Magazine user template, change this code (post body close to the header):
```
#crosscol-wrapper{margin:0 auto;padding:0 auto}
```
Into :
```
#crosscol-wrapper{margin:0 auto;padding:5px}
```

Demo | Download