Tweety Bird Blogger Template

Alhamdulillah setelah sekian bulan berlalu terbitnya template perdana desain saya yaitu (Al-Aswad Al-Fateh dan Natural Green Template). Hari ini saya bisa menambahkan koleksi free blogger template di dunia maya ini dengan sebuah template sederhana tweety bird blogger template.

Template tweety ini merupakan template request khusus dari seorang sahabat yang banyak memberikan inspirasi lahirnya berbagai tutorial di blog ini, inspirasi yang hadir dengan banyaknya pertanyaan yang diajukannya :-) Karenanya sebagai satu ungkapan terimakasih padanya saya upayakan dengan segala keterbatasan yang ada untuk memenuhi request tersebut.

Template ini didominasi dengan image tweety mulai dari header, icon pada post dan sidebar titel sampai bullet link serta nuansa warna kuning, karena Suci merupakan fans berat tweety bird dan warna kuning. Sedikit ada tambahan nuansa biru karena selain kuning sobat Suci juga toleran dengan biru dan pink...bukan gtu de suci? Tapi maaf saya tidak memoles pink pada template ade, soalnya blog saya tidak pingin ada saingannya... hehe becanda lagi.

Kategori template: Tiga kolom, featured post slider, tiga kolom footer dan sebuah tab view sederhana.

Berikut sedikit panduan penggunaan:

1. Untuk mengedit menu navigasi horizontal cari kode berikut: <div class='menuhorisontal'> perhatikan jajaran link dibawah kode tadi dengan anchor teksx silahkan diganti dan sesuikan!

2. Untuk menambahkan featured post slider, tentu setelah sign in pada bagian elemen halaman>>> tambah gadget>>> HTML/JavaScript>>> tambahkan kode berikut:

<!-- begin featured -->
<div id="featured">

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Twitter Traffic </a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB_0jyFhDQMmi6yM9kvyK1NZDHcN_i3CHbcyWarZkI4A6dvbXOSvxmXaZ1WQmb7qyItwG-ATmVf8b-HIRtwZrynxAmiwE0-Ak68OmworZVPCOGCEhj4dpmNc5sMABturUZ-7uHhCm6prkk/s400/twitter_lg2.jpg" /></div>
<p>If you aren&#8217;t using twitter as a way of generating free traffic to your website, you&#8217;re missing out on one of the easiest marketing strategies ever to hit the Internet.
With so many social communities online, it is easy to see why Internet Marketers with limited time have been drawn to the simplistic interface and speediness...</p>
<div class="featured-meta">
<span class="featured-date">11th October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Email Marketing</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBhqEUh_6hoDqGBOPBalmWpgaIkF2tMLqZSErNmXyjxwUK5lPyqDB_nk6pkJG6xhG-gqa1tU69peGR7u3rhbty_0kdFgg26PN2X7u-B1qG1RpJVre9nVQaXfsglFIwiGLd0CS8GgA1H8EQ/s400/ebook_350.png" /></div>
<p>Online marketing may have developed a sudden surge these past few years, but many in the know how have felt its rise even from way then. As more internet based businesses are put up, the need to develop new marketing skills and knowledge based on this new medium have arisen. More and more marketing strategies...</p>
<div class="featured-meta">
<span class="featured-date">1st October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Get paid to blog at today.com</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZbS2gPXQG6Gggn5lytkeJ0nZ80_pZHeI5tsmh3jFMnQzOz7A9s7xydTZayeQ_l8wRORlZ024xAfZKTgKbKcKWpbcq-sOHDmMhZ_Nck7dS7RF70SPmj9BIq8jxT0hThO1L_-OMLJ6W2ar8/s400/070125_the_traffic_bully.gif" /></div>
<p>Today.com is a free blogging platform that works like Blogger and Wordpress, except that you will be paid for blogging at Today.com. Payment will be made on the 10th of each month via Paypal or check with $50 minimum payment.
How to Earn Money with Today.com
1. $2.00 per 1000 unique visitors for the first 30 days.
2....</p>
<div class="featured-meta">
<span class="featured-date">25th March 2009</span>
<span class="featured-comment"><a href="/#comments">4 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Free download CPA marketing guide</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzutR7GjgA0WiWslul27tk4QyObf5Mp6NJWdAG5B_AkacnRq0xMFIlcfRySpzZfoxxW9jnOmFsw7gH6E3oDMLpc9G5gZzjg-Z9aG05VhsnY9zuveenD7rhjsP-Uv9ynlyaaqAOdztAavuc/s400/downloadreport.jpg" /></div>
<p>Gauher Chaudhry, the man behind Pay Per Click Formula, has just released an 89 page insider&#8217;s guide to CPA marketing profts for FREE!
That&#8217;s right, FREE as in cost you zero cents to get the most comprehensive guides on CPA marketing and learn the way to earn as much as $100,000 per day with CPA...</p>
<div class="featured-meta">
<span class="featured-date">18th March 2009</span>
<span class="featured-comment"><a href="/#comments">10 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Delicious ice cream post</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtIJY7mDYX5IJKGnF5ZtPj7jSyaezgIvQcezvIRYhvi5ajyiIZKoejmiXbpq5kdPmBTmepHLiXNdOkgZke5D8Go07iqFWtzbJKyA-wSdv1SHUfc3-7aRC6TnTApf8oPjqBnP8dGSgP7TA/s400/ice_cream.jpg" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec lorem. Duis erat. Mauris faucibus, nibh sed scelerisque commodo, libero lacus posuere diam, at ornare felis quam vitae mauris. Nam in diam. Cras nec metus. Nam suscipit elementum eros. Mauris ut nibh. Maecenas id velit. Nulla pellentesque porttitor dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
<div class="featured-meta">
<span class="featured-date">3rd December 2008</span>
<span class="featured-comment"><a href="/#comments" title="Comment on Delicious ice cream post">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

</div>
<!-- end featured -->

<!-- more -->

Silahkan ganti isi dari featured post diatas! Simpan widget dan drag diatas main atau kolom posting.

3. Untuk menambahkan isi tab view sederhana, masih pada bagian elemen halaman>>> tambah gadget>>> HTML/JavaScript>>> tambahkan kode berikut:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>

<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href=http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html target="_blank" title="Tabview Widget">Add This Widget To Ur Blog</a></div>

Silahkan isi setiap menu tab, simpan widget drag pada bagian sidebar yang diinginkan. Simpan lagi. Selesai

Download template disini, Untuk preview lihat disini.

Panduan Menggunakan Natural Green Template dan Al-aswad Al-Fateh

Screenshot dari template blogger  tiga kolom desain perdana saya:

Download Natural Green Template disini. Untuk demonya lihat disini
Download Al-Aswad Al-Fateh  disini. Untuk demo lihat disini

Spesifikasi dan panduan penggunaan template diatas:

• Tiga kolom blogger template
• Terpasang read more, mengfungsikannya dengan menambahkan kode berikut pada awal kalimat yang akan dipenggal <span class="fullpost">...dan diakhiri </span>
• Untuk mengedit tab navigator horizontal=> Tata Letak=> Edit HTML=> Expand Template widget=> Cari kode berikut

<div class='menuhorisontal'> pada bagian bawah akan terlihat jajaran kode seperti ini silahkan edit kode berwarna merah

<a href='YOUR LINK'>YOUR TITEL</a>
<a href='YOUR LINK' target='_blank'>YOUR TITEL</a>
<a href='YOUR LINK' target='_blank'>YOUR TITEL</a>
<a href='YOUR LINK' target='_blank'>YOUR TITEL</a>
<a href='YOUR LINK' target='_blank'>YOUR TITEL</a>
<a href='YOUR LINK' target='_blank'>YOUR TITEL</a>
<a href='YOUR LINK' target='_blank'>YOUR TITEL</a>

• Untuk mengedit menu slider => Tata Letak=> Edit HTML=> Expand Template widget=> Cari kode berikut  <div id='content-wrapper'>

Pada jajaran bawah kode tadi terdapat kode berikut:

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Posted by you</span>
<h2><a href='YOUR LINK HERE'>Your Titel</a></h2>
<p>Descriptions here</p>
<img alt='Ngeblog Offline' src='URL image here'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by you </span>
<h2><a href='YOUR LINK HERE'>Your Titel</a></h2>
<p>Descriptions here</p>
<img alt='Tab View Slide' src='Your Titel'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by you  </span>
<h2><a href='YOUR LINK HERE'>Your Titel</a></h2>
<p>Descriptions here</p>
<img alt='tab view sederhana' src='Your Titel'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

• Untuk menambahkan tab view kedua pada  caranya: Pada tata letak=> Elemen halaman=> klik tambah gadget=> Pilih HTML/JavaScript=> Kopi kode berikut pada konten:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1 
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Widget by Indahnya Berbagi</a></div>

• Untuk menambahkan menu dtree Pada tata letak=> Elemen halaman=> klik tambah gadget=> Pilih HTML/JavaScript=> Kopi kode berikut pada konten:

<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Your Blog Arsip');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link anda.html');
d.add(11,0,'File[non-folder]',' link anda.html');
d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

• Jangan lupa tuk mengedit id feed bunner saya pada sosialbookmar dan formulir berlangganan dibawah posting

Udah ya capek nie? Satu harapan saya, sobat yang menggunakan template ini tidak menghapus link credits pada footer walaupun telah mengedit sedikit atau banyak sebagai bentuk amanah ilmiah dan apresiasi sebuah karya yang dibagikan secara cuma-cuma.

Selamat menggunakan template ini, semoga bermanfaat!

Free Download Template Blogger Tiga Kolom

Layaknya arah yang tak pernah rampung dalam kejaran, demikianlah cita yang terus berjinjit maju tanpa batas kelar. menggandakan upaya pada pintalan karya, menjadi mercusuar terang dalam mendayagunakan kreasi-kreasi indah yang menyejukan alam dan nurani. Manusia dalam kiprah adalah jasad bergerak bergelimang kurang dan alpa, topangan anugrah Ilahi kemudian datang bersambut menjadi sobat pengingat serta penyempurna. Maka yang luar biasa dalam konteks abadi hanyalah Allah beserta kebijakan anugrahNya. Merangkai cipta mungil lagi sederhana, semoga saja merupakan pengembangan anugrah Talenta yang Allah ilhamkan kedalam pribadi hamba-hambaNya.

Terkilir ketika telah mulai meniti rajut kebajikan atau kreasi ringan tentu bukanlah hal yang cela, selama niat yang terpatri tetaplah lurus menembus kisi-kisi mashlahat ( manfaat ) kemanusiaan dengan berbagai ragam dan macamnya, sebab menghadiahkan kegembiraan kedalam hati sesama merupakan pekerti luhur yang tak henti dikampanyekan oleh islam. Dan karena itulah tindak lanjut dari sebuah kemauan menghadirkan kerja nyata yang berkesinambungan.

Template sederhana ini, tentu tidaklah mencurah banyak arti tuk sahabat pembaca yang notabene adalah insan produktif dalam berkarya. Tapi meslkipun demikian, pun juga tidaklah keliru bila kebersahajaan menjadi kesan dalam setiap persembahan.

"Saat ragam pikiran bersua, maka moment kematangan bagi akal makin dekat", itulah pepatah kuno padang pasir 12 abad silam. Disisi lain kedewasaan ilmiah juga bagian dari impian, dan pencapaiaannya hanyalah dapat terwujud apabila ada kesiapan serta lapang dada tuk saling bertukar, memberi dan menerima dari atas, menengah ataupun bawah.

Semoga Allah senantiasa menganugerahi kita semua usia yang penuh makna, menghiasi kehidupan kita dengan karya-karya baik hingga dapat menjadi kontribusi positif bagi kelanjutan kilau alam maya bangsa kita.

Berikut dua template blogger perdana hasil desain saya

 
Download Natural Green Template  disini. Untuk demonya lihat disini
Download Al-Aswad Al-Fateh  disini. Untuk demo lihat disini

Spesifikasi

• Blogger template tiga kolom 
• Dilengkapi dua menu teb view 
• Sebuah menu slider 
• Read More sudah terpasang, untuk mengfungsikannya tinggal sobat memasang pada kalimat yang akan dipotong <span class="fullpost">dan akhir kalimat tutup dengan</span> atau baca lagi tutorialnya disini 
• Dilengkapi kotak komentar dibawah posting

Hanya satu harapan saya sobat yang menggunakan template ini tidak menghapus link credits pada footer walaupun telah mengedit sedikit atau banyak sebagai bentuk amanah ilmiah dan apresiasi sebuah karya yang dibagikan secara cuma-cuma.

 Selamat menggunakan templatenya! Jika ada pertanyaan seputar template blogger diatas silahkan tuliskan pada kolom komentar dibawah ini!