25 Juni 2009

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.

11 komentar:

  1. ok deh... mantab bang.... oya bang... besok pagi main ke blog ku,, yah, sekitar jam 08.33 ada postingan tentang keberangkatan ku ke Kepulauan Meranti, petualangan baru bang.... siip..

    BalasHapus
  2. oh sudah siap rupanya.. it's easier to me to change this theme at my blog lol..

    BalasHapus
  3. keren template nya...
    terus berkarya ya...!!!

    BalasHapus
  4. makasih sekali bosss AQ minta ach tampletnya mau coba di praktekan semoga boss sehat selalu beserta keluarga and sukses selalu

    BalasHapus
  5. to Bachabe...
    oiiii... thank's atas do'anya...amien, demikian sebaliknya... silahkan didownload dan diterapkan, semoga sukses

    BalasHapus
  6. keren tampilannya, nanti saya pake templet ini untuk blogku yang di sebelah

    BalasHapus
  7. Di bookmarks dulu ah halaman ini. Ntar balik lagi.. Thanks..

    BalasHapus
  8. maulana12:02

    mas,cara menghapus menu tab viewnya gimna?
    atau cara untuk megubah ukurannya?
    mohon jawaban dngan segera..

    BalasHapus
  9. mas,cara ngilangin 4 elemen dibawah header itu gimana ya?
    kaya' template blog ini gitu loh..

    BalasHapus
  10. Gan ko ngk bisa di download.........
    ko yang keluar malah web ngk karuan..

    BalasHapus

Mockup Hijab Adobe Photoshop Tutorial - FREE FILE PSD

  Mockup Hijab Adobe Photoshop adalah tutorial tentang bagaimana cara merubah warna hijab maupun coraknya. Jika anda ingin mendownload file ...