Review: Magazine 2010 untuk BLOGGER

Sebelumnya saya pernah posting artikel tentang pengalaman saya dalam mengamati Create an Image Rotator with Description pada blog ini. Dari hasil penerapan ke MINIMA, akhirnya disamping berhasil, saya pun juga telah memodifikasi MINIMA BLOGGER yang menggunakan Image Rotator With Description pada homepage.


Dalam posting ini saya hanya mencoba mereview hasil dari modifikasi MINIMA yang saya beri nama MAGAZINE 2010. Berikut ini adalah spesifikasi dari MAGAZINE 2010 untuk Blogger.

1. Bagian Header terdiri dari dua kolom, untuk kolom kiri seperti biasa digunakan sebagai TITLE blog. Sedangkan pada bagian kanan sebagai wadah dari Iklan. Yang unik disini adalah saya memasang kode Scrolling Box, sehingga iklan yang akan ditambahkan tidak hanya satu iklan. Ukuran kelebaran iklan maksimal 468 px hingga 480 px, untuk ukuran tinggi tidak ada masalah. Dengan kemampuan Adobe Photoshop yang tidak seberapa, saya mencoba mendesain background dari header sedemikian rupa, sehingga apabila iklan digulirkan akan terlihat tulisan BLOGGER pada background kotak iklan. Sebenarnya saya mau menambahkan kode filter: alpha pada header kanan, namun kuatir diprotes sama pihak advertise. Jadi intinya anda dapat memajang iklan, entah iklan dari PTC maupun adsense di bagian ini.

2. Menu horizontal dengan CSS menampilkan menu sederhana dengan penambahan Tags Bookmark Label dan kotak pencarian.

3. Image Rotator with Description yang dapat digunakan untuk menampilkan review singkat baik dari artikel baru kita maupun untuk memajang iklan anda. Dalam pembuatan Image Rotator with description ini, perlu disiapkan 2 gambar dengan ukuran yang berbeda.
Untuk gambar utama berukuran 318px X 250px sedangkan untuk thumbnail ukurannya adalah 50px X 38px. Pada bagian ini kita menggunakan jQuery JavaScript Library v1.3.2 yang diterapkan langsung dalam edit HTML Blogger.

4. Penambahan tiga kolom dibawah Main-wrapper sekaligus dengan Judul Item, disini kita bisa menambahkan beberapa info penting yang terkait dengan isi blog kita maupun info lain sebagai pendukung blog yang kita kelola.

5. Dua kolom yang sengaja saya buat untuk Clip Video, namun pada bagian ini dapat disesuaikan dengan kebutuhan.

6. Penambahan button bullet untuk mempercantik tampilan item link pada sidebar li maupun lowbar li.

Untuk sementara model Magazine 2010 ini belum dapat saya luncurkan, mengingat masih dalam tahap modifikasi.

Jika penasaran dengan tampilan Magazine 2010 untuk blogger, silahkan kunjungi demonya.
Klik DISINI.

Download BC-MAGAZINE BLOGGER 2010

BC-MAGAZINE Blogger 2010 setelah tertunda peluncurannya karena masalah internet yang lambat dan sempitnya waktu yang ada, dalam postingan kali ini saya memberitahukan kepada rekan-rekan Blogger yang ingin mengganti template blognya, BC-Magazine Blogger 2010 mungkin dapat dijadikan solusinya.



Penjelasan install template ini, jika anda sudah mendownload eBOOK modifikasi Minima dan membacanya maka saya yakin sudah bisa mengganti template anda dengan template ini.

Disini saya hanya menambahkan tentang bagaimana menambahkan Recent Post yang dalam demo template ini berada di kolom footer sebelah kiri.

Setelah login masuk Layout/ Tata Letak kemudian Elemen Laman pilih Html/ Javascript, kemudian tambahkan kode dibawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBZXPUeHqOkSOxw38EwHhwRW-bm_bu55phqjv31x6fmSa9ZxjrpuCei5GeEQnIyC9bPKcj1rf83Vd0V-xlu9W-EVN08qwYkEpsiSEfBK6m-dAcb981lzjLomop5LGO3mrtYDnuF5Uv3s/s1600/my-data.png";

showRandomImg = true;
boxwidth = 550;
cellspacing = 8;
borderColor = "#eefacf";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NAMABLOG.blogspot.com/";
</script>


<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='no')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td style="font-size: 12px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> - <span style="font-size: 9px; color: #616161;'+cmtext+' </span></td></tr>';if(summaryPost==0){trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td>'+icon+'<a href="'+posturl+'">'+posttitle+'</a></td></tr>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); //]]>
</script>


Silahkan ganti text warna merah masing-masing dengan URL GAMBAR dan NAMA BLOG anda.

Untuk mendownload template ini, silahkan kunjungi bCOMStudio sedangkan untuk melihat tampilan dari BC-Magazine Blogger 2010 silahkan klik DISINI.

Semoga bermanfaat.

BC-Magazine Blogger 2010

Tak puas dengan modifikasi minima (Grid Minima Blogger 2010) dengan sistem Grid, justru kali ini sasaran modifikasi saya adalah template yang saya gunakan sebagai tempat nongkrong bidikCOM.


Modifikasi kali ini hanya mengganti warna, Menu navigasi dan menambahkan Sliding Slide.
Penerapan jQuery maupun javascript lainnya langsung di edit HTML, jadi tidak menggunakan jasa hosting lain.

Jadi dalam dua pekan ini saya sudah memodifikasi 2 template untuk komunitas Blogger. Mengingat Grid Minima Blogger 2010 sudah tuntas namun belum sempat saya kirim ke bCOMStudio (Blog khusus nongkrong hasil modifikasi saya), mumpung otak tidak puyeng saya segera menuangkan ide-ide GOBLOK saya dalam ruang edit HTML Blogger kesayangan kita.

Kemungkinan dua template ini akan segera saya luncurkan, setelah tutorial cara install template ini selesai saya buat...

Penasaran, coba tengok DEMO-nya.

Grid Minima Blogger 2010

Suatu kebanggaan tersendiri bila kita dapat membuat sebuah karya yang bisa digunakan oleh orang lain, walaupun disini saya hanya sekedar memodifikasi dari MINIMA Blogger yang sederhana menjadi sebuah template dalam bentuk MAGAZINE.

Berawal dari chatting dengan sorang sobat lewat Facebook, beliau ingin mempunyai template yang mirip-mirip dengan template yang diidam-idamkan namun tidak ada link untuk mendownloadnya (menurut saya dia tidak tahu dimana harus mendownload template tersebut).

Aku langsung menuju ke URL demonya dan mencoba mengintip lewat toolbar VIEW kemudian masuk ke PAGE SOURCE, kemudian tampilan itu aku COPAS dalam NOTEPAD.. aku pelajari dan mulailah aku mencoba melirik minima sebagai bahan untuk dasar modifikasi. Dalam modifikasi ini aku menggunakan perpaduan antara GRID dan Teori ASAL JADI.... maklum aku khan BLOGGER GOBLOG.

Dari hasil modifikasi ini lahirlah sebuah template ala BLOGGER GOBLOG mirip saya... (Emang saya) GRID MINIMA BLOGGER 2010. Seperti biasa aku membagi-bagi template minima yang sudah halus jadi ancur ndak karuan... dan hasilnya seperti gambar dibawah ini :

Karena aku ndak pinter cropping gambar secara utuh, jadi bila penasaran silahkan kunjungi demonya DISINI.

Kerjaan ini baru 75 %, nanti setelah selesai segera mengisi bCOMStudio dan rekan-rekan yang sudi mampir disini dapat mendownloadnya.

Rencananya saya juga akan membuat ebook panduan bagaimana cara memodifikasi template ini termasuk penerapan GRID pada minima Blogger.
Jika anda ada masukkan, silahkan isikan di kotak komentar yang jaraknya tidak ada satu kilo dari posting ini.

Modifikasi Template Blogger 2010

Setelah kemarin mencoba memodifikasi minima, kali ini saya memodifikasi template hasil karya dari TNB ( Template Novo Blogger ) yaitu Template Setembro. Agak aneh memang kedengarannya, karena memang Ariane pembuat template ini berasal dari Brasil. Hasil karyanya menurutku sangat bagus, termasuk tutorial yang disajikan oleh Ariane.

Nah, dasar diriku selalu suka utak-atik template maka templatenya yang sudah bagus saya modifikasi lagi. Hitung-hitung menerapkan tutorial yang tersebar diseluruh jagad yang luasnya hanya 14 inchi sesuai ukuran monitor COM-ku.

Hasil dari modifikasi ini aku beri nama : Mdf-Setembro Blue. Bagian-bagian yang telah aku modifikasi dari Template Setembro ini antara lain :

1. Total keseluruhan bagian background.

2. Tampilan untuk posting lama pada halaman utama secara otomatis menjadi dua kolom.

3. Penerapan kode jQuery dan s3Slider secara langsung pada edit template, jadi tidak perlu lagi upload ke tempat hosting ( enak khan... kita-kita khan sukanya gratisan).

4. Penerapan Kode javascript "Summary Posts with thumbnails" secara langsung pada edit HTML termasuk saya tambahkan beberapa kode untuk penerapan gambar secara otomatis, sehingga apabila dalam penulisan artikel tidak mengandung gambar maka secara otomatis akan muncul gambar yang telah saya setting.

5. Kita-kita khan sukanya pasang iklan, walau ndak pernah ada yang suka jahil untuk ngeklik. Saya sudah siapkan space iklan di atas/bawah posting ( untuk saat ini saya nyakin sudah banyak yang pinter ngakal-i adsense jadi ndak perlu dijelaskan).

6. Pada Bagian Judul Sidebar juga tidak luput dari modifikasi.

7. Apalagi...ya, ohya... untuk di sedebar sudah aku pasang DONASI bila anda sudi membelikan saya tahu tempe.....he..he..he...

Untuk sementara saluran download masih tertutup, lagi hujan deras takut kebanjiran.
Penasaran dengan hasilnya ? Silahkan lihat di ruang DEMO.
Untuk Download dan petunjuk instalasi, silahkan kunjungi tempat parkir hasil modifikasiku di bCOMstudio.

Template Blogger 2010

Sebenarnya aku bingung mau memberi nama apa tentang template ini, habis beberapa hari ini mencoba menerapkan sistem penulisan Javascript langsung dalam template... ndak jadi-jadi. Akhirnya dengan sak kepenak-ke dhewek aku sebut saja Mbulet blog.

Masih seperti biasanya, aku mencoba memodifikasi template MINIMA kemudian dengan memperhatikan beberapa template yang beredar saat ini, saya mencoba menerapkannya ke dalam template minima ini.

Mbulet blog sebenarnya terdiri dari dua kolom, namun karena aku mencoba memodifikasi agar terkesan multikolom maka aku tambahkan modifikasi dari html-nya.

Pada ruang Home Page, semua posting terakhir akan tampil penuh sedangkan posting kedua dan seterusnya ( tergantung kita format berapa tampilan postingannya ) secara otomatis akan menempatkan diri di kolom tengah. Jadi untuk kolom ini tidak bisa ditambahkan widget, sedangkan pada bagian sidebar dapat dipasang widget suka-suka kita.

Yang perlu diperhatikan dalam penggunaan template ini.

1. Pada bagian posting pertama, untuk tinggi ruang apabila panjang artikel melebihi 1500px, maka kita harus merubah ukuran Height secara manual. Untuk mengubah ukuran height, coba perhatikan bagian ini :

#first{
width: 530px;
height: 1500px;
margin: 0px 15px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
clear:both
}

Ukuran 1500px saya anggap standart, apabila pada bagian ini tidak saya tambahkan maka apabila artikel pada posting terakhir terlalu pendek maka tampilan cuplikan posting kedua dan seterusnya akan berada di bawah posting pertama bahkan terkesan berantakan.
Ukuran bisa ditambah sesuai dengan panjang artikel.

2. Tentu saja kita ingin menambahkan iklan di dalam ruang posting pertama, maka coba perhatikan kode dibawah ini : ( centang Expand Template Widget )

<div class='first-body'>
<p><data:post.body/></p>
</div>

Untuk menambahkan kode iklan anda, silahkan perhatikan kode dibawah ini :

<div class='first-body'>
<p><data:post.body/>...... Tambahkan kode anda disini.......</p>
</div>

3. Apabila artikel yang ditulis tidak bergambar, jika artikel ini nantinya akan menjadi artikel kedua dan seterusnya maka gambar akan secara otomatis diisi gambar yang sudah saya setting. Untuk merubah tampilan gambar tersebut, coba perhatikan kode dibawah ini

.......dst.......

if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px !important;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAT-RRC13jf9SVEkbTm6EFgN1qlbcMn75hyDXpFxBk-6ubCJnHayLedZkDv7keQTiXH-ZZNdNCkdDRpgUEm_69D_yyYpfL-QVrR12OaQyMLhskRTLQ7cFvK2o2_gTJk5VnvwbUBDzHaoaz/s320/logo-nyar-bcom.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>

........dst......

Silahkan ubah URL berwarna merah dengan Url image yang anda punyai.

Jika ada waktu anda bisa menyempatkan untuk melihat demonya di SINI.
Untuk download, anda bisa berkunjung ke bCOMstudio, tempat dimana saya mengompulir hasil modifikasi template.

Blogger Newspaper 2

Iseng-iseng blogwalking, saya menjumpai beberapa situs yang terdiri dari beberapa feature. Dari tampilan ini saya mulai tertarik untuk membuat template dengan model feature tanpa sidebar.
Pada Blogger Newspaper 1, saya tidak bisa membagikan templatenya karena aku pakai sendiri. Namun pada template Blogger Newspaper 2, Insya allah saya akan mencoba untuk berbagi dengan rekan-rekan blogger yang membutuhkan.

Blogger Newspaper 2 terdiri dari beberapa

feature

, terdapat tabview yang saya design mirip dengan tabview yang ada di situs peretas online pada umumnya, dimana dibawah tampilan utama feature terdapat beberapa link terkait yang dipasang.

Konsep Auto Readmore juga saya terapkan di Blogger Newspaper 2, termasuk Thumbnail otomatis yang muncul, meski kita posting tanpa gambar. Susunan Main-wrapper pada homepage teridir dari tiga kolom, dimana artikel posting berada di situ.

Jika anda berminat silahkan hubungi saya, termasuk jika anda ingin memberikan Donasi.... buat ongkos mudik..he..he..he..

DEMO

Blogger Newspaper Template

Iseng-iseng ngotak-ngatik template, memang mengasyikkan. Dalam minggu ini sudah 1 template yang saya modifikasi dan 2 template sudah saya design dalam bentuk MAGAZINE.

Sebut saja MadTrend Blogger Template, template yang saya design minimalist dengan beberapa kolom feature . Template ini saya gunakan untuk blog saya sendiri, namun bila rekan-rekan blogger berkenan untuk menggunakannya silahkan hubungi saya atau tinggalkan email di kotak komentar.

Bersamaan proses finishing MadTrend Blogger Template yang sekaligus BLOG baru saya yaitu ALAKADARDOTNYA, saya mencoba mendesign template Magazine Style dengan beberapa kolom feature dan tabview. Hasilnya adalah BLOGGER NEWSPAPER Template.

Blogger Newspaper ini saya design dengan beberapa kolom feature yang dapat diisi cuplikan artikel dengan berdasarkan pengelompokan kategori dari artikel itu sendiri. Ide design dari Blogger Newspaper adalah mencontoh beberapa model situs Peretas Online yang saat ini ada dan saya kagumi model designnya. Melihat tampilannya, membuat saya berpikir bagaimana agar saya model situs majalah ini bisa saya terapkan ke dalam blogger. Meski baru 80 % proses finishing, sambil update posting, aku pamirkan hasilnya.... siapa tahu ada yang tertarik dan berminat....he.e...he....


DEMO

MagTrend Blogger Template

Kalau kemarin saya sudah mencoba memadukan konsep template Hybrid dan Revolution City, kali ini saya memodifikasi minima dengan sistem konsep keduanya.

MagTrend Blogger Template merupakan template satu kolom utama, karena hanya terdiri dari main wraper dan footer. Sengaja saya tidak membuat sidebar, karena memang saya ingin menampilkan kesan MagTrend Blogger Template ini minimalist namun sepertinya butuh ketelitian dalam mengeditnya ( Tenang saja.. ntar dibuat tutorialnya).

Modifikasi minima dengan nama MagTrend Blogger Template ini, masih dalam tahap 75 % diorat-arit dan diobrak-abrik.

Gaya magazine masih nampak disini. Pada MagTrend Blogger Template ini, kita tidak perlu kuatir untuk memasang gadget, misalnya Shoutbox. Saya menerapkan script untuk gadget dengan sistem Hidden dan terletak di sebelah kiri, sehingga terkesan ada sidebar yang tersebunyi. Padahal script tersebut saya tanam di bagian footer. Untuk alasan inilah saya tetap menambahkan beberapa kolom pada footer.

Modifikasi MagTrend Blogger Template ini, merupakan jawaban rasa penasaran saya tentang penerapan file JS, yang biasanya saya upload di tempat hosting gratis. Berhubung sekarang banyak yang tutup, saya mencoba mencari solusi. Dari beberapa konsep yang ada serta mencoba mencuri kode lewat Show Page Source firefox dari template premium yang bertarif, saya mencoba menggali menemukan titik kunci dimana kode JS tersebut terpasang. Saya copas di notepad, lalu saya otak-atik. Alhamdulillah berhasil.

Pada MagTrend Blogger Template, saya menerapkan beberapa file JS, termasuk di dalamnya adalah Query 1.2. pack, readmore auto dsbnya. Semula saya ragu, apakah file JS ini saat loading bertabrakan dengan file JS yang lain. Tapi, setelah saya terapkan... ternyata keraguan itu hilang dengan sendirinya.

Mau tahu demo dari MagTrend Blogger Template, silahkan lihat hasil kerja saya yang nekat dan ngawur karena terus terang saya tidak pernah mengenal pelajaran orat-orit HTML, CSS atau Javascript di bangku SD sampai Militer.

Namun, disini saya ingin mengajak rekan-rekan blogger untuk berpartisipasi dengan cara berikan komentar, masukan saran ...masukan yang lainnya, yang penting jangan caci maki bin dampratan ( masukan dollar juga boleh... utk beli 234 GOLD).

DEMO | Download... tunggu tanggal mainnya, karena saya ingin melihat sejauh mana template MODE H-BLOGGER THEME didownload dan digunakan oleh rekan-rekan blogger.

Memadukan Hybrid dan Revolution City

Berdasarkan pengalaman dari memberikan tutorial tentang cara install Revolution City dan juga permintaan dari sobatku yang baik hati, baik hati karena memberikan aku model template Revolution City, memberikan aku inspirasi dari hasil permintaannya yaitu Bagaimana agar posting nampak di atas kolom Category pada template Revolution City (pada template ini, posting bersifat hidden), dan membuatku berpikir bagaimana caranya agar aku bisa memenuhi permintaannya dan jangan sampai mengecewakannya.... akhirnya muncul ide menggabungkan teknik pengolahan CSS dan Javascript antara Hybrid News dan Revolution City yang aku sendiri bingung untuk memberi nama model modifikasi ini.

Untuk sementara Model template yang sering dipakai di kalangan Wordpress ini aku beri nama MODE H-BLOGGER THEMES, benar atau ndak pengejaannya terserah yang menilai... yang penting template ini punya panggilan, bila si Harry Seenthings alias Nyegik berteriak memanggilanya..ha..ha..ha..

Mengapa aku memilih Hybrid News dan Revolution City ? Masing-masing punya kelebihan, untuk Hybrid News menerapkan sistem javascript yang langsung tanpa lewat upload hosting ( karena Yahoo!Geocity dll tutup ) sedangkan Revolution City menerapkan tampilan kolom berdasarkan kategori. Untuk kelebihan yang lain, aku malas menyebutnya... capek.

Yang perlu diketahui dari Mode H-Blogger Themes adalah :

- Magazine Style
- Slide Feature [Automatic update for post summary and image thumbnail)
- Model kolom untuk posting berdasarkan Label, penerapan secara manual.
- Penerapan file .JS secara langsung pada template, jadi tidak diperlukan file hosting.
- Ready Adsense
- Dan masih banyak yang lain... termasuk GRATIS buat anda setelah HS bin Nyegik.

Proses masih berjalan, jadi bila anda ingin mendapatkan template ini... berikan dukungan buat saya untuk segera menuntaskannya. Namun yang jelas, template ini spesial buat sobatku Harry Seenthings alias Nyegik karena saya berjanji orang pertama yang akan saya beri template ini adalah saingan Harry Potter ini.

Update: Karena saya sudah kirim template ini ke pemesan, sekarang giliran anda untuk bisa download dan mempelajari cara installnya di bCOMStudio.

Oke... capek basa-basi, silahkan lihat DEMOnya.

Sentuhan Adobe di Template Blogger

Sambil mengisi siaga dalam rangka Pemilu 2009, saya mencoba mendesain template dengan sentuhan Adobe Photoshop CS3 terutama pada bagian Header. Ini merupakan kali pertama saya mencoba memodifikasi template minima dengan menggunakan Adobe.

Meski harus bergelut dengan lambatnya konektifitas internet ditempatku, sambil sebentar-sebentar cek sisa pulsa takut kehabisan dan macet ngenetnya.....(duh... kasihan dech luuuuu!!!!), akhirnya tuntas juga template dua kolom yang aku beri nama NGELOE SIMPLE BLOGGER...
Lucu memang namanya, sesuai situasi saat itu...

Fiture template adalah : 2 Columns, Fixed width, Two columns on the header, Right sidebar,
Automatic Read More Hack For Blogger With Thumbnails

Ini adalah tampilannya :



Silahkan digunakan bagi yang mau tentunya, tapi ingat jangan suka mengganti Credit Link yang ada di bawah template.


DEMO | Link download bisa anda dapatkan di AYOMAOS.

Thirteen Mag Blogger Template

Sebuah template "Thirteen Mag Blogger Template" telah saya buat dan sudah dianggap final untuk segera saya sebar agar bisa digunakan oleh komunitas blogger yang saya cintai. bidikCOM juga menggunakan template ini, hanya saja pada bagian footer saya rubah jadi tiga kolom.


" Thirteen Mag Blogger Template" ini terdiri dari :

• 13 kolom dengan perincian : 4 kolom atas dengan scroll, 3 kolom utama dan 6 kolom sebelum footer.
• Header dibagi dua kolom, jadi pengguna " Thirteen Mag Blogger Template" dapat menambahkan iklan dengan ukuran 486 X 100px.
• " Thirteen Mag Blogger Template" mempunyai navigasi menu yang mudah dioperasikan.
• " Thirteen Mag Blogger Template" diinstall pula Tabview yang terdiri dari 3 kolom.
• " Thirteen Mag Blogger Template" dengan readmore automatis.
• " Thirteen Mag Blogger Template" menerapkan sistem gulir pada bagian kotak atas dan Kotak Komentar

Cara install " Thirteen Mag Blogger Template" .

• Backup terlebih dahulu blog yang akan anda ganti dengan " Thirteen Mag Blogger Template" .
• Yakinkan secara manual dengan menyalin Widget yang ada pada blog anda dengan menggunakan notepad.
• Browse " Thirteen Mag Blogger Template" kemudian unggah " Thirteen Mag Blogger Template" .
• Setelah konfirmasi dan simpan " Thirteen Mag Blogger Template" .
• Selanjutnya terserah cara anda memperindah penampilan blog anda.

Cara dan larangan mengganti bagian-bagian tertentu.

1. Pengguna " Thirteen Mag Blogger Template" dimohon untuk tidak mengganti bagian credit - footer :

<div id='credit-footer'><!-- do not delete this section/jangan menghapus bagian ini -->
&lt;p&gt;
Copyright @ 2009 By : &lt;a href=&quot;http://www.nataludin.com&quot; target=&quot;_blank&quot;&gt;&lt;font color=&quot;yellow&quot;&gt;Ayomaos&lt;/font&gt;&lt;/a&gt; | Distribution by : &lt;a href=&quot;http://bcomstudio.blogspot.com&quot; target=&quot;_blank&quot;&gt;&lt;font color=&quot;yellow&quot;&gt;bCOMstudio&lt;/font&gt;&lt;/a&gt; | Powered By: &lt;a href=&quot;http://blogger.com&quot; target=&quot;_&quot; blank&gt;&lt;font color=&quot;yellow&quot;&gt;Blogger&lt;/font&gt;&lt;/a&gt; |
&lt;/p&gt;

&lt;p class=&quot;credit&quot;&gt;
&lt;a href=&quot;http://mozilla.com/firefox&quot; target=&quot;_&quot; title=&quot;Firefox&quot; blank&gt;&lt;img width=&quot;12&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IEh1Fsrwq5fOCSY7zX2rSEiTqD5KrX7vBNZxtaT6zggILSHVW6M3EHi6l1_Sy7ISkLYFQCTTzWlqcimGNhP0bEf9LFEuucZyYx4JvRK2ENsHiqx1-YCFkKbdSCEv1DmCt-inwtmPG2ck/s1600-r/firefox-icon.gif&quot; height=&quot;12&quot;/&gt;&lt;/a&gt;

&lt;a href=&quot;
http://www.microsoft.com/windows/internet-explorer/default.aspx&quot; target=&quot;_&quot; title=&quot;Internet Explorer 8&quot; blank&gt;&lt;img width=&quot;13&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorrlncEXiC0w_XeL7dsEc9QX-z6ZmUrYGbc26a_qDHLQA0XTQDl3tmK5ta2MGVIz4_SjJFFKEo4D7ukNYJ7x4sOrdYpvHMOj1UWnQPmRowWDDkYgRQFCvJzmEQiTfjMnWty3tKFoLGifK/s1600-r/eweb-ie7.gif&quot; height=&quot;14&quot;/&gt;&lt;/a&gt;
&lt;/p&gt;
</div>

2. Judul Blog yang ada di Header-Left.

Anda harus membuat gambar dengan ukuran 400 X 100 px ( gunakan Adobe Photoshop), kemudian diupload pada www.photobucket.com. Setelah mendapatkan kode gambar, kemudian kode gambar tersebut di ENCODE. Dibawah ini contoh menambahkan kode yang sudah diencode.

<div class='headerleft'>

&lt;a href=&quot;http://s288.photobucket.com/albums/ll179/ahnning/?action=view&amp;current=headertemplatebarucopy.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://i288.photobucket.com/albums/ll179/ahnning/headertemplatebarucopy.jpg&quot; border=&quot;0&quot; alt=&quot;magazine blogger template&quot;&gt;&lt;/a&gt;

</div>

Menambahkan kode IKLAN dibagian Header-right dengan cara encode kode iklan anda, kemudian tambahkan kode tersebut pada bagian header-right.

Contoh :

<div class='headerright'>

...... tempat kode iklan yang telah diencode ......

</div>


3. Mengganti bagian navigasi. Coba perhatikan susunan kode dibawah ini, kemudian lakukan penggantian sesuai dengan petunjuk yang ada di masing-masing bagian dari kode terebut.

<!-- This is the start of the menu -->
<div id='mainMenu'>
<a>Products</a><!-- ganti sesuai kemauan anda -->
<a>Support</a><!-- ganti sesuai kemauan anda -->
<a>About us</a><!-- ganti sesuai kemauan anda -->
<a>Download</a><!-- ganti sesuai kemauan anda -->
</div>
<div id='submenu'>
<!-- The first sub menu -->
<div id='submenu_1'>
<a href='http://ahn-bidikcom.blogspot.com'>Product 1</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>Product 2</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>Product 3</a><!-- ganti sesuai kemauan anda -->
</div>
<!-- Second sub menu -->
<div id='submenu_2'>
<a href='http://ahn-bidikcom.blogspot.com'>Phone</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>Email</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>Knowledge base</a><!-- ganti sesuai kemauan anda -->

</div>
<!-- Third sub menu -->
<div id='submenu_3'>
<a href='http://ahn-bidikcom.blogspot.com'>History</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>The team</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>Contact us</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>Visions</a><!-- ganti sesuai kemauan anda -->

</div>
<!-- Fourth sub menu -->
<div id='submenu_4'>
<a href='http://ahn-bidikcom.blogspot.com'>Patches</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>Whitepapers</a><!-- ganti sesuai kemauan anda -->
<a href='http://ahn-bidikcom.blogspot.com'>Tab menu</a><!-- ganti sesuai kemauan anda -->
<a href='http://www.nataludin.com'>Color picker</a><!-- ganti sesuai kemauan anda -->
<a href='http://www.nataludin.com'>Window scripts</a><!-- ganti sesuai kemauan anda -->
<a href='http://www.nataludin.com'>Games</a><!-- ganti sesuai kemauan anda -->


</div>
</div>
<br id='clearmenu'/>

4. Untuk perubahan pada tab view seperti saat anda menambahkan gadget pada sidebar.

Semoga "Thirteen Mag Blogger Template" ini bermanfaat khususnya bagi komunitas blogger.
Tinggalkan pesan bila anda membutuhkan bantuan, Insyallah saya bantu sampai saya ampun-ampun menyerah....

Demo dan Download bisa anda lihat di bCOMStudio.

Blog ' Cerita Penaku"

Setelah kemarin saya mencoba memodifikasi minima dengan menambahkan efek spoiler, kali ini saya memodifikasi minima kembali dengan beberapa kolom.

Template ini saya buat bagi mereka yang suka akan blog bergaya majalah. Template untuk kalangan Blogger ini terdiri dari : Navigasi menu yang saya pelajari dari www.dynamicdrive.com, empat kolom dengan tinggi yang sama dibawah header, tiga kolom utama, dan enam kolom diatas footer.

Masih dengan konsep portal, pada sub halaman sidebar kiri akan menghilang. Menggunakan readmore secara auto, dan saya juga mencoba menerapkan scroll pada bagian kolom komentar.

Template masih 80 % dalam proses, jika anda berminat silahkan kunjungi demonya.
Berikut adalah tampilan halaman utama template tersebut ( belum ada judul )



Dibawah ini adalah tampilan sub halaman


Kira-kira menurut anda, template ini diberi nama apa, ya?
Silahkan berikan ide-ide anda demi suksesnya pembuatan template ini, dan tentunya semakin cepat selesai, maka akan semakin cepat didownload oleh rekan-rekan yang membutuhkan.

DEMO | berikan komentar pada demonya, ya..... please!!!!

Memadukan Spoiler di Blogger Template

Sudah lama saya tidak otak-atik template, akhirnya kali ini saya mencoba memodifikasi minima dengan hasilnya adalah Spoiler Minima Template.

Mengapa saya sebut Spoiler Minima Template, karena di dalam Spoiler Minima Template ini terpasang sistem spoiler yang aku terapkan pada kolom dibawah navigasi menu. Apa sih Spoiler itu ? Anda bisa mengetahuinya di bCOMStudio, termasuk mendowload template tersebut.

Spoiler Minima Template ini sederhana, karena hanya terdiri dari dua kolom. Meskipun sederhana, tapi tidak boleh dipandang sebelah mata... apalagi dipandang dengan mata bathin.

Bagaimana saya menerapkan Spoiler ini pada Spoiler Minima Template, berikut penjelasannya :
(sebaiknya coba pada template baru dengan template minima dan ukuran width: 750px )
Langkah awal saya menambahkan dua buah kolom dibawah navigasi menu/ header atau di atas Content Wrapper.

Saya menambahkan kode berikut :

/* -- kotak dhukur -- */

#kotak {
width:750px;
clear:both;
margin:0 auto;
float:left;
padding: 10px 0;
color:#ffffff;
background:#434741;
border-top:#ffffff;
border-bottom:#ffffff;
}

#kotak a:link {
color:#006699;
text-decoration:none;
}

#kotak a:hover {
color:#c06000;
text-decoration:underline;
}

#kotak a:visited {
color:#808080;
text-decoration:none;
}

#kotak h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}

#kotak ul {
padding:0;
margin:0;
color:#333;
}

#kotak ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background: url(&amp;quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcus6vrktn3YwPsfUG5f60CXMavSqZT9E2ireJaVS21bBVBzyv6NRQX0J-Ny2s-pZOFfp-KtZ9yWTrWUOcKchEh0VEcakHns9xhTU0E5He2XjbDW_3w_e4hdI8w2BGn0B_3xJq3D28ME/s144/Arrobblue.png&amp;quot;) no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}

#kotak1 {
width:300px;
float:left;
padding-left:10px;
}

#kotak2 {
width:390px;
float:left;
padding:0 10px 0 10px;
border-left: 2px solid #ffffff;
}

Kemudian saya menambahkan kode berikut, di atas kode : <div id='main-wrapper'>

<div id='kotak'>
<b:section class='kotak' id='kotak1' preferred='yes'/>
<b:section class='kotak' id='kotak2' preferred='yes'/>
</div>

Kemudian saya menerapkan kode spoiler pada kode di atas, seperti ini :

<div id='kotak'>
&lt;div&gt;&lt;div style=&quot;margin: 5px;&quot;&gt;
&lt;div class=&quot;bigfont&quot; style=&quot;margin-bottom: 2px;&quot;&gt;&lt;input value=&quot;Show&quot; style=&quot;margin: 0px; padding: 0px; width: 60px; &quot; onclick=&quot;if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show&#39;; }&quot; type=&quot;button&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;alt2&quot; style=&quot;border: 0px inset ; margin: 0px; padding: 6px;&quot;&gt;
&lt;div style=&quot;display: none;&quot;&gt;

<b:section class='kotak' id='kotak1' preferred='yes'/>
<b:section class='kotak' id='kotak2' preferred='yes'/>

&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
</div>


Kata Show maupun Hide bisa dirubah sesuai keinginan.
Bila anda ingin mendowload daripada template ini, silahkan kunjungi bCOMStudio.

Pada demo template, anda juga bisa mencoba alunan musik berikut link downloadnya pada sidebar.

(Pesan Singkat : Pada template bCOMStudio telah saya terapkan kombinasi link iklan, jadi sebelum anda masuk ke URL sebenarnya, anda terlebih dahulu disodori halaman iklan. he..he..he.... saran saya diklik iklanya, biar bidikCOM dapat dollar....... wik, bCom ... malu-maluin....... )

DEMO

Green Revolution Magazine Style

Untuk template gratis Blogger Theme kali ini saya mencoba menghadirkan sebuah template bernuansa hijau dan tetap bertemakan MAGAZINE.

Green Revolution Magazine Style ini sebenarnya hasil kepiawian tangan bang Agus Ramadhani yang diberi nama Green Revolution Blogger Template yang mana anda dapat melihat demonya DI SINI.

Berhubung ada yang minta kepada saya untuk mencoba memodifikasi template tersebut menjadi sebuah Magazine Style, maka saya mencoba untuk berusaha memodifikasinya. Terus terang saya sendiri enjoy dengan tampilan template yang bernuansa hijau ini.

Susunan CSS nya tidak serumit template lain yang saya modifikasi, namun ada beberapa hal yang masih perlu saya SHARING sama mas Agus Ramadhani, terkait pemasangan Feed dan navigasi.

Dengan bekal Comot Sana Sini dari CSS aslinya, maka lahirlah Green Revolution Magazine Style atau GR Magazine Style.

Ini adalah tampilan Halaman depan dari Green Revolution Magazine Style tersebut :


Ini adalah tampilan Sub Halaman Green Revolution Magazine Style, setelah anda mengklik Readmore :



Dan ini adalah tampilan Footer Green Revolution Magazine Style yang terdiri dari tiga kolom :


Bila anda ingin download template aslinya silahkan kunjungi : www.O-Om.com
Bila anda ingin mengetahui hasil modifikasinya, silahkan kunjungi :

bCOM- Studio.

Template Ads Ready

Modifikasi MINIMA kali ini saya beri nama Template Imut 2. Disini saya mencoba memodifikasi template yang ready terhadap iklan baik berbentuk slider maupun fixed, jadi apabila para blogger mania mendambakan template yang bisa dipasang banyak iklan dengan ukuran 125 X 125 px mungkin template ini pantas diperhitungkan.

Langsung pada tutorial :


1. Sebelum menggunakan template ini, silahkan dibackup dulu template anda. Namun saya sarankan untuk mencoba pada blog baru.

2. Untuk merubah background header kanan dan iklan adsense, cari kode dibawah ini:

<div id='header'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='headerleft'>
<a href='http://edan-ne-cadangan.blogspot.com' style='display: block'>
<img alt='Imut template' height='100' id='Header1_headerimg'
src='http://i288.photobucket.com/albums/ll179/ahnning/imut2.gif' style='display: block'
width='350'/>
</a>
</div>
</div>
</div><div class='widget HTML' id='HTML5'>
<div class='headerright'>
&lt;script type=&#39;text/javascript&#39;&gt;&lt;!--
google_ad_client = &quot;pub-7181952237540333&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* 468x60, created 6/18/08 */
google_ad_slot = &quot;5864627181&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39;

type=&#39;text/javascript&#39;&gt;
&lt;/script&gt;
</div>

Silahkan rubah kode berwarna merah dengan milik anda.

3. Untuk merubah background slider iklan : cari kode dibawah ini :

#slider { background: white

url(http://i288.photobucket.com/albums/ll179/ahnning/slider-bg.jpg); height: 227px;

overflow: hidden;position: relative; margin: 10px 0; }

4. Untuk merubah susunan slider iklan atau slider recent post, cari kode dibawah ini :

<div class='slide' id='slide-1'>
<h1>Garden Rack</h1>
<p>Donec gravida posuere arcu. Nulla facilisi.
imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien.
Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p><a
href='#'><img alt='learn more'
src='http://i288.photobucket.com/albums/ll179/ahnning/slide-1-image.png'/></a>
</div>
<div class='slide'>
<h1>Tulip Bulbs</h1>
<p>Donec gravida posuere arcu. Nulla facilisi.
Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien.
Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<a href='#'><img alt='learn more'
src='http://i288.photobucket.com/albums/ll179/ahnning/slide-2-image.png'/></a>
</div>
<div class='slide'>
<h1>Garden Gloves</h1>
<p>Donec gravida posuere arcu. Nulla facilisi.
Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien.
Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<a href='#'><img alt='learn more'
src='http://i288.photobucket.com/albums/ll179/ahnning/slide-3-image.png'/></a>
</div>

Text warna biru adalah judul dan penggalan artikel, sedangkan yang berwarna merah adalah url tempat dimana kita menyimpan gambar.

5. Untuk merubah advertise pada sidebar cari kode dibawah ini :

<div id='advertisment-block'>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

</div>

Sedangkan untuk merubah advertise pada footer, cari kode dibawah ini :

<div id='advertisment2-block'>
<center><h2> Pasang iklan anda, cukup Rp. 50.000,-/bln</h2></center>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>
</div>

Kode berwarna biru adalah url alamat yang dituju iklan, sedangkan yang berwarna merah adalah tempat penyimpanan gambar iklan.

Semoga bermanfaat.

DEMO | Download lihat di blog ini

Blackireng Magazine Style

Ditengah-tengah mencari solusi ikutan program Afiliasi Click2Sell dan Clickbank, saya mencoba merancang template berbentuk Magazine dengan nama Blackireng Magazine Style Blogger Theme.

Template ini terdiri dari :

1. Main Wrapper yang terbagi menjadi dua kolom
2. Satu Sidebar atas dan dua sidebar bawah
3. Footter, dimana saya taruh recent post horizontal.

Adapun cara penginstalan.

- File hasil download, silahkan buka dengan program Winrar atau Winzip.
- Sebelum menggunakan template ini sebaiknya backup dulu template anda atau praktekkan pada blog baru.
- Untuk bagian Topbar sudah auto, sehingga tidak perlu lagi merubah URL Feed.
- Untuk bagian header kiri sebagai judul sedangkan header kanan untuk iklan.
- Untuk merubah kode iklan, silahkan kode iklan anda diencode dulu disini, hasil encode Copas di notepad. Setelah itu masuk pada Edit HTML cari kode berikut :

<div id='headerright'>
&lt;script type=&#39;text/javascript&#39;&gt;&lt;!-- google_ad_client = &quot;pub-7181952237540333&quot;; google_ad_host = &quot;pub-1556223355139109&quot;; /* 468x60, created 6/18/08 */ google_ad_slot = &quot;5864627181&quot;; google_ad_width = 468; google_ad_height = 60; //--&gt; &lt;/script&gt; &lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39; type=&#39;text/javascript&#39;&gt; &lt;/script&gt;
</div>

Silahkan ganti kode berwarna merah tersebut dengan kode anda yang sudah diencode.

- Untuk merubah Navigasi Menu silahkan cari kode berikut :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li> <a href='#'>Page</a> <ul> <li> <a href='#'>Sub Page #1</a> <ul> <li><a href='#'>Sub Sub Page #1</a> <ul> <li><a href='#'>Sub Sub Sub Page #1</a></li>

...... dan seterusnya, silahkan ganti # dengan url terkait demikian juga dengan Page dan subpagenya.

- Berikut saya contohkan cara menempatkan gadget pada kolom tengah seperti yang terlihat pada Demo. Masuk pada Tata Letak | Elemen Halaman | Tambah gadget | pilih Text, kemudian setelah jendela text muncul, klik Edit HTML dan masukkan code seperti dibawah ini :

<img id="BLOGGER_PHOTO_ID_5315209842303552306" style="margin: 0pt 10px 10px 0pt; cursor: pointer; width: 269px; height: 200px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TciVKAVs4A5Y367_Ez2Awfe7jYNZSlZPpfopheFyM9uRUN_nhMoUTjWrmY7LGw0x043DNzoLEX6s0xrwLZxuaZ-Nk5e_CzYtUtM-AuqDFJGFuGbwg_KlWe2SUq67SNC1mg-GTBWjXNs/s200/logo.jpg" border="0" />Money4Idiots� eBook Kit can put you on the path to financial enlightenment, because you will learn not just online money making strategies, but also the psychology and secret necessary to make money in any online business.

Untuk mendapatkan kode gambar ( warna merah ), silahkan anda buat posting baru namun bersifat draft dan jangan dipublish juga jangan dihapus. Upload gambar yang akan anda buat target untuk mengisi kolom tengah atau sidebar, kemudian copy kodenya seperti kode diatas.
Sedangkan text berwarna biru adalah keterangan dari gambar atau penggalan artikel yang terkait.

- Untuk menambahkan gadget recent post horizontal pada footter seperti pada demo, silahkan anda masuk Tata Letak | Elemen Halaman | tambah Gadget | HTML/ Javascript kemudian tambahkan kode dibawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";
imgr[5] = "http://librarysupporter.googlepages.com/thumb5.jpg";
imgr[6] = "http://librarysupporter.googlepages.com/thumb6.jpg";
imgr[7] = "http://librarysupporter.googlepages.com/thumb7.jpg";
imgr[8] = "http://librarysupporter.googlepages.com/thumb8.jpg";
imgr[9] = "http://librarysupporter.googlepages.com/thumb9.jpg";

showRandomImg = true;

tablewidth = 978;
cellspacing = 7;
borderColor = "#000000";
bgTD = "transparant";

imgwidth = 113;
imgheight = 100;

fntsize = 12;
acolor = "#ffffff";
aBold = true;
icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 0;
summaryFontsize = 11;
summaryColor = "#03f8fb";
icon2 = " ";

numposts = 8;

home_page = "http://ahn-bidikcom.blogspot.com/";

</script>
<script src="http://librarysupporter.googlepages.com/recentposts_horizontal_title_below_no.js" type="text/javascript"> </script>

URL berwarna merah ganti dengan blog anda atau url blog yang akan dibuat gadgetnya.

Penasaran dengan DEMO dan mendownload template ini, silahkan kunjugi bCOM Studio.
Semoga bermanfaat.

IrengBlue Style Blogger Theme

Bersamaan dengan peluncuran perdana blog bCOM Studio yang bertemakan Sharing Template Blogger Theme, dengan ini pula saya luncurkan sebuah template untuk blogger yang saya beri nama "IrengBlue Style Blogger Theme".

IrengBlue Style Blogger Theme terdiri dari 1 kolom main, 1 kolom sidebar dan tiga kolom pada footer.
Pada bagian Header saya modifikasi agar kita dapat menempatkan sebuah widget Recent post dengan numpost = 1.

Petunjuk instalasi.

Saya rasa para blogger sudah tahu persis bagaimana menerapkan sebuah template pada blogger. Hanya saya sarankan, terapkan IrengBlue Style Blogger Theme pada blog baru anda, baru setelah berhasil dan anda merasa puas silahkan terapkan "IrengBlue Style Blogger Theme" pada blog kesayangan anda.

1. Pemasangan Recent Post pada Header.

Masuk pada page element | tambahkan gadget | pilih "HTML/Javascripts | kemudian tambahkan kode berikut :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";
showRandomImg = true;
tablewidth = 400;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 75;
imgheight = 75;
fntsize = 10;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 1;
home_page = "http://nama blog anda.blogspot.com/";
</script>
<script src="http://librarysupporter.googlepages.com/recentposts_thumb.js" type="text/javascript"></script>

2. Mengatur format tanggal.

Pada pengaturan format, buat aturan seperti pada gambar dibawah ini :


3. Untuk pemasangan menu Recent Post baik dari blog anda sendiri atau blog favorit anda, silahkan ikuti tutorialnya di SINI.

4. Bila anda tertarik, silahkan meluncur di blog mungil saya.


DEMO & DOWNLOAD TEMPLATE

Free Download C-Magazine Style Blogger Theme

Akhirnya dengan ini saya luncurkan URL download C-Magazine Style Blogger Theme, dengan harapan dapat digunakan bagi para blogger mania khususnya yang gemar akan model template bentuk magazine.

Beberapa petunjuk dalam menambahkan gadget dalam template ini :

1. Untuk menambahkan kode kotak pencarian pada bagian Header sebelah kanan :

Melalui Page elements | tambah gadget | HTML/ Javascript, tambahkan kode berikut :

<p align="left">
<form id="searchthis" action="http://combret.blogspot.com/search"

style="display:inline;" method="get">
<strong>Info COMBRET<br/></strong>
<input id="b-query" maxlength="255" name="q"
size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p><br/>


silahkan masukan URL & nama kotak pencarian anda pada kode berwarna merah.


2. Untuk menambahkan kode waktu pada header bagian kanan.

Melalui Page elements | tambah gadget | HTML/ Javascript, tambahkan kode berikut :

<div style="border:1px dotted; padding: 5px;" align="center">
<script

src="http://kunoichi.info/bloggerbuster_templates/date.js"></script>
<form name="clock"> <input style="border:0;"
value="hh:mm:ss" name="face" size="8"
type="TEXT"/> </form><script
src="http://kunoichi.info/bloggerbuster_templates/time.js"></script></
div><br/>


3. Untuk merubah susunan menu dropdown.

Masuk pada TATA LETAK |Edit HTML kemudian centang kotak Expand Template Widget, lalu cari kode dibawah ini :

<div id='sidebar-wrapper'>
<div class='arrowlistmenu'>
<h3 class='menuheader' style='cursor: default'>COMBRET STYLE</h3>
<div>
</div>

<h3 class='menuheader expandable'>Shoutbox</h3>
<ul class='categoryitems'>
<div class='bd' style='height: auto;'>
<div class='fixed'>
<p>
<center>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe frameborder='0' height='250' scrolling='auto'

src='http://www2.shoutmix.com/?nataludin' title='nataludin' width='300'>
<a href='http://www2.shoutmix.com/?nataludin'>View shoutbox</a>
<br/><a href='http://www.shoutmix.com' title='Get your own free shoutbox chat

widget at ShoutMix!'>Free chat widget @ ShoutMix</a><br/>
<!-- End ShoutMix --></iframe></center>
</p>
</div>
</div>
</ul>

<h3 class='menuheader expandable'>Link Sobat</h3>
<ul class='categoryitems'>
<div style='overflow: auto;background-color:transparant; margin: 0px auto; padding:

5px;font-size: 12px; height: 200px;width: 94%;text-align: left;'>
<li><a href='#'>linksatu</a></li>
<li><a href='http://ahn-bidikcom.blogspot.com'

target='_blank'>bidikCOM</a></li>
</div>
</ul>
<h3 class='menuheader expandable'>Artkel Menarik</h3>
<ul class='categoryitems'>
<div style='overflow: auto;background-color:transparant; margin: 0px auto; padding:

5px;font-size: 12px; height: 200px;width: 94%;text-align: left;'>
<li><a

href='http://ahn-bidikcom.blogspot.com/2008/08/ajax-labels-with-label-cloud.html'

target='_blank'>Ajax Labels with Label Cloud</a></li>
<li><a
href='http://ahn-bidikcom.blogspot.com/2008/08/health-and-beauty-products.html'
target='_blank'>Hasil Review</a></li>
<li><a href='http://loedinnewspaper.blogspot.com/2008/07/test-mata-anda.html'
target='_blank'>Tes Mata Anda</a></li>
</div>
</ul>
</div>

<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

Silahkan modifikasi sendiri kode di antara :

<div id='sidebar-wrapper'>

dan kode

<b:section class='sidebar' id='sidebar' preferred='yes'/>

Sebelum anda menggunakan template ini coba luangkan waktu sejenak untuk membaca keluhan saya pada posting demonya. Setelah anda membaca, tolong hargai usaha saya dengan tidak merubah kode berikut :

<center><font size='2'>Copyright @ 2009 <data:blog.pageTitle/> | CMSBT | Modified By <a href='http://ahn-bidikcom.blogspot.com' target='_blank'>NATALUDIN</a> |</font>
<font size='2'><br/>Thanks for : <a href='http://www.blogger.com' target='_blank'>BLOGGER</a> | <a href='http://www.photobucket.com'
target='_blank'>PHOTOBUCKET</a> | PICASSA </font></center>

Silahkan tambahkan diantara kode tersebut nama & URL anda bila anda menambahkan modifikasi lainnya.



Semoga bermanfaat.

DEMO | Download Template

Combret Magazine Style Blogger

Kali ini saya mencoba memodifikasi template dengan model magazine. Untuk template ini saya mencoba membagi header menjadi 3 kolom.

Rancang bangun template ini baru mencapai tahap 45 %, karena hari ini mau mudik ke ndeso dalam rangka 40 harinya mertua, jadi kelanjutan cerita template ini minggu depan saja.

Silahkan berikan masukan, saran dan ejekan..he..he..




DEMO | Link download tunggu perkembangan