NEWS
Loading...
  • Posted by : Johanes Djogan 16 Mei 2012

    Apa kabar sobat?masih bingung bagaimana bisa template hatsune miku magazine style bisa seperti itu?sebenar'a cara'a sudah cukup umum menurut saya.taukah kamu tentang trik Jquery Accordion?yapp,sebenar'a sama saja,trik'a,kalau biasanya diterapkan untuk list menu atau sidebar,maka trik ini saya terapkan ke element" seperti content,posting,sidebar atau sekaligus semuanya.


    Sebelumnya saya peringatkan dahulu sebelum mencoba trik ini,backup dahulu template kamu agar tidak terjadi hal - hal yang tidak diinginkan.kemungkinan berhasilnya trik ini tergantung dirimu sendiri,bagi yang sudah familiar/biasa main css dan html,saya yakin sudah mengerti,tapi bagi yang belum,saya sarankan jangan,tapi jika berniat sungguh",silakan berusaha,saya hanya bisa membantu memberikan solusi,bukan bantuan ini itu =___=v.
    #atau yang ga mau ribet ,saya sudah sediakan template yang udah jadi'a~:hatsune miku magazine style+demo
    -contoh-




    Ok,pertama seperti biasa buka blogger=>template=>edit HTML,setelah itu,ikuti intruksi" dibawah ini.


    Copy paste semua CSS ini dibawah code ]]></b:skin>

    <style type='text/css'>
    #panel{
    overflow:auto;
    display:block;
    }
    .slide{
    margin:0;
    padding:0;
    }
    .btn-slide:hover {background:#CA2968;}
    .btn-slide {
    cursor: pointer;
    text-align: center;
    padding: 10px;
    display: block;
    color: #B3B3A9; /*Warna text*/
    background-color: #1F1538; /*warna background tombol menu*/
    position: absolute;
    z-index: 9;
    margin-left: 0px; /*atur posisi dengan margin*/
    margin-right: 0px; /*atur posisi dengan margin*/
    margin-top: 0px; /*atur posisi dengan margin*/
    margin-bottom: 0px; /*atur posisi dengan margin*/
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    width: 50px; /*Lebar*/
    height: 50px; /*tinggi*/
    line-height: 50px;
    border: 5px solid white; /*border atau garis pinggir*/
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5); /*bayangan*/
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    } /* trik dari djogzs.blogspot.com*/
    </style>

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style type='text/css'>

    #panel{
    overflow:auto;
    display:none; /*panel yang disembunyikan dalam keaddan normal*/
    }
    </style>
    </b:if>


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    .btn-slide{display:none;} /*Agar tombol menu hilang di halaman posting*/
    </style>
    </b:if>

    Lalu copy paste juga Jquery dibawah ini diatas code </body>


    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

    <script type='text/javascript'>

    $(document).ready(function(){

    $(&#39;.btn-slide&#39;).click(function(){

    $(&#39;#panel&#39;).slideToggle(&#39;slow&#39;);

    });

    });

    </script>


    Selanjutnya pengaturan code HTMl'a.perhatikan kode html dibawah ini dan copy paste

    //Kode Html dibawah ini,adalah tombol open untuk membuka tutup content//
    <div class='slide'><span class='btn-slide'>-OPEN-</span></div>


    #untuk mengatur posisi,lebar,tinggi warna dan sebagai'a,kamu tinggal atur css .btn-slide {


    kemudian,tentukan content yang akan kamu sembunyikan.


    <div id='panel'>

    isi content

    </div>




    #Contoh pada template hatsune miku magazine style

    <div id='panel'>


    <span id='skiplinks' style='display:none;'>
    <a href='#main'>skip to main </a> |
    <a href='#sidebar'>skip to sidebar</a>
    </span>
    <div id='sidebar-right'> /*Sidebar*/
    <b:section class='sidebar' id='sidebartop'>
    <b:widget id='Profile1' locked='false' title='Profile' type='Profile'/>
    </b:section>
    </div>
    <div id='content-wrapper'> /*wrapper*/
    <div id='main-wrap1'>
    <div id='main-wrap2'>
    <b:section class='main' id='main' showaddelement='no'> /*posting*/
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>
    </div>


    </div>


    Intinya,semua kode html yang ada didalam code <div id='panel'> akan tersembunyi,dan difungsikan seperti .
    accordion/ buka tutup.



    Setelah itu,simpan dan lihat hasilnya.

    #trik ini sudah saya tinjau dan coba",hasil'a 2 template ujicoba berhasil diterapkan.

    mohon maaf kalau penjelasan'a agak rumit,tapi teorinya sudah cukup dan dapat dicoba,semoga berhasil,:)

    { 28 comments... read them below or Comment }

    1. Huft Kedua aja deh yang penting gerti apa ini,ngk sama yang di atasku :p ( hanya bercanda :D )

      BalasHapus
    2. Share juga donk,tutorial membuat setengah lingkaran yang seperti di header Blog ini ya :D

      BalasHapus
    3. Mantap.. udah dicoba dan berhasil.. cek
      hideyori-blog.blogspot.com

      thx mas anes

      BalasHapus
    4. @Vieri Azzurri sipp mantab,tinggal atur posisi tombol open'a aja tuh biar rapih :)

      BalasHapus
    5. ssepZZ keren req cara membuat tab komen kya gini dong bang reply dikiri trus gambar neglinkger persis deh pokoknya please yah request q jangan lupa yg baca kunjungin
      www.b-blogsshadow.com

      BalasHapus
    6. bang johanes,bisa ngk tulisan opennya di ganti pada saat sdh terbuka menjadi close

      BalasHapus
    7. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    8. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    9. bisa dirubah jadi di tengah gak posisi buttonnya

      BalasHapus
    10. ane nggak ngerti gan... tolong balas :)

      BalasHapus
    11. @Fajri R.N.G coba dipahami dulu ya,saya udah jelaskan diats kq. :)

      BalasHapus
      Balasan
      1. kk anes, itu kalau gambar backgroundnya kok ga dijelaskan yah?
        mohon pencerahannya kk :)

        Hapus
      2. dan kalau diterapkan padaTemplate kk yang shiroi bisa ga yah :s

        Hapus
    12. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    13. Komentar ini telah dihapus oleh pengarang.

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -