Membuat Widget Buka Tutup di bawah Postingan Ala Blog Teriaaak

Tutorial Blogger, Kesehatan, Islami

  • HOME
  • DAFTAR ISI
  • BLOGGER
  • TEMPLATE
  • TIPS TRIK
  • SEO
  • DESAIN BLOG
  • WIDGET
  • KESEHATAN
Home Blogger Tips And Trik Widget Membuat Widget Buka Tutup di bawah Postingan Ala Blog Teriaaak

Membuat Widget Buka Tutup di bawah Postingan Ala Blog Teriaaak

Tutorial ini juga saya minta langsung dari Mas Birlando dan Mas M Rakadinata pemilik blog (http://teriaaak.blogspot.com/). Saya sangat mengucapkan terimakasih kepada Kedua Mas-mas diatas ,karena permintaan saya telah di setujui dan dibagikan kepada semua. Dan sebagai bentuk terimakasih saya ,   saya akan memberi tautan ke blog Teriaaak. Bagi sobat yang ingin mengujungi blog Teriaaak tinggal pergi ke url berikut www.teriaak.com, Blog Teriaaak juga loadingnya sangat cepat dan desainnya pun membuat pengunjung betah berlama-lama di blog Nya. Oh ya ,  Kembali ke tutorial semula.Widget ini sendiri di modifikasi oleh Mas Birlando yang terinspirasi dari Blog mas hendriono [modification blog].

Apa fungsi dari Widget Buka tutup ini ? Menurut saya widget buka tutup ini membuat blog lebih simple dan lebih enak dilihat mata , karena membuat tata widgetnya menjadi rapi. Lalu mana contohnya ? Berikut ini contoh gambarnya , Saya ambil langsung dari blog Teriaaak.blogspot.com :

Teriaaak Blogspot

Teriaaak Blogspot

Sobat tertarik untuk menerapkan di blog sobat seperti Blog Teriaaak itu ??? Kalau sobat blogger mau silahkan ikuti langkah-langkah saya dibawah ini :

1. Login ke Blogger (http://www.blogger.com/) Sobat
2. Klik Template > Edit HTML 
3. Backup Template Sobat / Copy template sobat dan letakkan pada Notepad , untuk mengantisipasi kesalahan
4. Cari Kode <data:post.dateheader/>
5. Dan letakkan kode berikut dibawah kode <data:post.dateheader/>

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVG7e7NyaUGv8kLpCBkabf7XhCFAxuW_YaEuhzOjUXgSwd4jX0aVFMpxX-Lhtcv9Xt7F-hE6EDl38Wae2Cv2oRq6wXjQVaJ0UZmHt3xKPk4YlwSy-mtoLkQMX9bWVQmOIDjEXqSxUP9YA/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSzQrlKku8dr2qf5gkIpVP-0tuzBGuI4vxH7WwCObDS4MJsrfC1N5y_sM2ojYmUf-mwAP4mPq73C8ZViCB-Mb-WNR9vqog7Goh5h1pCuDPmvHyZXaK2MkQxW0IQuCL0RwAGiTlDwPxv_s/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script src="http://yourjavascript.com/121511228073/accordion-menu.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>
Title 1</h2>
<div class="content">
Isi konten 1</div>
<div id="accordion">
<h2>
Title 2</h2>
<div class="content">
Isi konten 2</div>
<div id="accordion">
<h2>
Title 3</h2>
<div class="content">
Isi konten 3</div>
<div id="accordion">
<h2>
Title 4</h2>
<div class="content">
Isi konten 4</div>
<div id="accordion">
<h2>
Title 5</h2>
<div class="content">
Isi konten 5</div>
</div>
</div>
</div>
</div>
</div>
Keterangan :  Isi kata Title dengan judul widget sobat
                       Isi kata Isi Konten dengan Konten sobat

5. Klik Simpan , dan liat hasilnya

Saya sangat berharap sekali semoga anda mengerti dengan tutorial diatas, karena saya juga masih rada bingung, hehehe. Tapi tak apalah, yang penting membagikan artikel, dan siapa tahu artikelnya bermanfaat bagi semua, Karena membagikan ilmu sangat baik.

Demikianlah postingan saya tentang Membuat Widget Buka Tutup dibawah Postingan Ala Blog Teriaaak, Semoga Bermanfaat bagi sobat semua , dan bila ada kata yang kurang pas / salah mohon dima'afkan , Wassalam.
Tweet

7 Responses to " Membuat Widget Buka Tutup di bawah Postingan Ala Blog Teriaaak "

  1. Unknown23 Mei 2013 pukul 16.34

    bisa gak sob mengaplikasikannya ??

    BalasHapus
    Balasan
    1. Anonim23 Mei 2013 pukul 16.49

      Maksudnya mengaplikasikannya gimana ya ?
      ma'af nih , saya baru newbie

      Hapus
      Balasan
        Balas
    2. Balas
  2. Anonim23 Mei 2013 pukul 18.45

    Oh , saya sudah mengerti sekarang , oh saya ini lagi mengutak-atiknya..

    BalasHapus
    Balasan
      Balas
  3. Unknown5 Juni 2013 pukul 15.06

    Izin copas ya gan ^_^

    http://bloggerjava.net

    BalasHapus
    Balasan
    1. Anonim5 Juni 2013 pukul 15.12

      tapi kali ini saja yah , jangan lupa naruh link sumbernya

      Hapus
      Balasan
        Balas
    2. Balas
  4. Anonim16 Desember 2013 pukul 00.05

    keren itu gan blogerjava.netnya..

    ajarin cara buat templatenya dong

    BalasHapus
    Balasan
      Balas
  5. Unknown19 Desember 2013 pukul 09.36

    artikelnya sangat bagus dan sangat bermanfaat, makasih
    semoga sukses saja.. dan salam hangat buat admin blog dari ibbenk21

    BalasHapus
    Balasan
      Balas
Tambahkan komentar
Muat yang lain...

Posting Lebih Baru
Posting Lama
Beranda
Langganan: Posting Komentar ( Atom )

Sering Dibaca

  • planet ajaib

    Cara Membedakan Tokek Jantan Dan Tokek Betina

  • planet ajaib

    5 Pembalap GP Paling Legendaris di Dunia

  • planet ajaib

    Cara Membedakan Raket Yonex Asli Dengan Yonex Palsu

Site Info

Blogroll

  • Harga Motor Yamaha Honda
  • Cek Resi JNE
  • Katalog Carrefour
  • Kata Kata Mutiara

Sahabat

Label

Aneh (13) Badminton (1) Bisnis (3) Blogger (67) Cerita (3) Cinta (3) Desain Blog (14) Directory (1) Fakta Menarik (2) Fenomena (2) gadget (1) Hewan (1) Hoby (2) Information (8) Internet (1) Iseng (12) Kata Kata Mutiara (1) Kecantika (1) Kecantikan (1) Kesehatan (45) Komputer (2) Manfaat (5) Olahraga (1) Pengetahuan (6) Resep (3) SEO (26) Software (1) Teknologi (3) Template (12) Tips And Trik (57) Tool Blog (3) Widget (18)
Privacy Police | Contact| About Me
Support : sertifikasi crane
isnpeksi dan sertifikasi
Copyright © 2013 Planet Ajaib - All Rights Reserved
Design by jasa sertifikasi crane
Powered by Blogger