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

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Screenshot dari template blogger  tiga kolom desain perdana saya:



template-green-1blogspotcom al-aswad-al-fatehblogspotcom
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!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

30 komentar :

  1. assalamu'alaikum,,,jazaakillah buat tamplate gratisnya...kami izin gunakan buat blog kami... sekali lagi jazaakillahu khairon

    BalasHapus
  2. wa'alaikumslm. waiyyak. syukron jazaakumullahu khrn apresiasix!

    BalasHapus
  3. salam sahabat ukhti..
    bisa di update thnxs n good luck ya

    BalasHapus
  4. syukron jg apresiasinya ukhty dhana

    BalasHapus
  5. Bagus juga desain templatenya. Sebelum saya pakai di blog saya, menurut mas dari ke dua template tersebut mana yang terbaik ? :D Baik ditinjau dari dari ukuran blog dan user friendly-nya

    BalasHapus
  6. wahh hebat kakang ..kapan kapan ajarin ya buat templet buatan sendiri. saluut!!

    BalasHapus
  7. @ afdil: kedua-duanya baik sih, terserah sobat mau pilih yg mana?!

    @ master: khn udah banyak tu tutorial desain templatenya!

    terimakasih apresiasinya

    BalasHapus
  8. Bagus sekali Ukh..jarang sekali ada desainer template yg ngasih petunjuk sedetail ini..Ukh, bila boleh ya, tolong bikinin sy template hitam-merah dong.dgn tampilan penuh...atau al aswad aja gitu y diitemin???boleh???

    BalasHapus
  9. @ insanitis: terimakasih apresiasinya, bnyk jg permintaan termasuk tutorial, insyaAllah anaa coba penuhi satu persatu hanya butuh waktu...

    BalasHapus
  10. ini udah lengkap, tapi kalau gak ngerti malah bingung.
    tapi, salut...
    terus berkreasi ya mba!

    BalasHapus
  11. @ narti: syukron jazaakillah ukh atas apresiasinya slma ini.

    BalasHapus
  12. assalamu'alaikum, izin donlot mba.

    BalasHapus
  13. @ sepwawan: wa'alaikumslm. silahkan.

    BalasHapus
  14. Wah bagus nih dilengkapi dengan tutorialya.. kapan2 saya pake deh kalau mau ganti template.. hehe

    BalasHapus
  15. assalamu'alaikum, jazakallah khoer mas atas ilmunya, templetnya jga bagus, aana udah pake, smoga bermanfaat amien...

    BalasHapus
  16. @ Iseng Nulis: Wa'alaikumslm. Wa iyyak. Maaf sy bukan keliru dgn sapaan masx. Sy wanita. Amiin.

    BalasHapus
  17. oh, afwan mbak, Qirain ana ikhwan...
    :)

    BalasHapus
  18. @ Iseng Nulis: Klu ada kesulitan seputar modifikasi template diatas, silahkan ditanyakan.

    Cara menambahkan widget tab pertama dari tabber tab klik angka 1, klik edit tambahkan gadget yg anda inginkan simpan. Untuk menambahkan gadget pada tab ke dua, klik angka dua...dst.

    BalasHapus
  19. halo mbak, aq uda coba pake template ini, tp kok posting aq gag nongol??? pusing aq!!!
    padahal aq suka banget ma warna ijonya...
    help me...

    BalasHapus
  20. mbak, di kode html kok banyak x nama blog mbak? mgkin itu sebabnya setiap di klik larinya ke blog mbak. duh, helm me..
    postingnya blum nongol nih...

    BalasHapus
  21. oy mbak, blog ini: masyhury.blogspot.com

    BalasHapus
  22. Thanks Atas Template gratis nya .trus berkreasi ya mba!

    BalasHapus
  23. salam kenal mbak :)
    makasih utk templatenya , saya udah pakai di blog saya (natural green)

    saya mau tanya mbak,
    > kenapa ya isi postingan saya tidak tampil dihalaman depan,
    > truz kenapa pada judul postingan, besarnya huruf sama spt teks biasa.
    > satu lagi, saya lihat di screenshot naturan green, header backgroundnya bagus, bisa gak mbak minta url imagenya

    ditunggu mbak jawabannya :p

    makasih mbak sebelumnya :D

    BalasHapus
  24. Aku udah pake... r=trus gimana cara rubah gambar slide nya>?????

    BalasHapus
  25. template nya nggak bisa di download
    linknya udah nggak ada

    BalasHapus
  26. @ megi: maaf kmrn sy lama tdk ol, dl sy update templatenya, dan sy baru tau ada mslh baru sperti yg megi dah smpaikan olh krn itu, sy akn update kembali lg makanya untuk sementara link downloadx sy hapus...

    @ muh zulkifli: klu anda mendownload template dari link plg awal mngkn mslhnya tdk seperti megi, silahkan ikuti sj panduan distas.

    @ anonim: akn sy cantumkan link downloadnya, insyaAllah stlh bbrpa hal yg perlu ditambahkan pd template trsbt selesai. Maaf!

    BalasHapus
  27. Salam. Saya berminat dgn footer template al aswad al-fateh.

    Sila email di affan_far90[at]live.com
    saya tutorial gimana membuatnya exactly sama dgn footer template al aswad al-fateh kerana saya tidak pandai mendesign.

    Tolong ya!


    kemudian, dua2 template al aswad al-fateh link mendownload tidak berfungsi.

    BalasHapus
  28. Mantab Templatenya sobat... :)

    BalasHapus
  29. Masi bingung ehm... maklum lah masi amatiran..

    Alhamdulillah Jaza Kilahu Khoiro
    semoga Alloh Paring Manfaat dan Barokah

    www.lantabur.tv
    www.asquha.com

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!