[+/-] hide/show element or gadget

Kali ini kita buat hide/show elements [+/-] seperti yang ada di blog solehpolysas ini. Permintaan dari Dba Ghani dapat ditunaikan pada hari ini. Nah, khas untuk Dba. Kelebihan kita membuat hide/show elements ini ialah, blog kita lebih cepat untuk di loading. Ini membolehkan blog kita menjadi blog yang terbaik.

Mari kita mulakan tutorialnya :

  1. Login ke blogger
  2. Pilih Layout --> Edit HTML
  3. Cari code ini </head> cara mudah mencari, gunakan CTRL + F
  4. Kemudian copy coding ini dan letakkan sebelum code </head>

  5. <style type="text/css">
    .texthidden {display:inline}
    .shown {display:block}
    </style>


    <script type="text/javascript">
    document.write('<style>.texthidden {display:none} </style>');
    </script>


    <script type="text/Javascript">
    function expandcollapse (postid) {
    whichpost = document.getElementById(postid);
    if (whichpost.className=="shown") {
    whichpost.className="texthidden";
    }
    else {
    whichpost.className="shown";
    }
    }
    </script>


    save template anda..

  6. Pergi ke Page Element --> Add Page Element --> HTML/Javascript
  7. Masukkan coding hide/show elements ini


  8. <ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> [+/-] Kategori</a></ul>
    <ul class="texthidden" id="keyword">
    <li><a href="http://link.com">Link 1</a></li>
    <li><a href="http://link.com">Link 2</a></li>
    <li><a href="http://link.com">Link 3</a></li>
    <li><a href="http://link.com">Link 4</a></li>
    <li><a href="http://link.com">Link 5</a></li>
    </ul>


  9. Keyword yang anda gunakan hendaklah sama.
  10. Lihat contoh ini jika anda ingin hide/show shout box seperti yang saya lakukan.


  11. <ul><a href="javascript:void(0);" onclick="expandcollapse('chat')"> <h9>[+/-]
    Shout Box</h9></a></ul>
    <ul id="chat" class="texthidden">

    <p align="center"><!-- Begin ShoutMix - http://www.shoutmix.com
    --><a>
    <iframe scrolling="auto" width="350" frameborder="1" src="http://www4.shoutmix.com/?solehpolysas"
    height="550" title="solehpolysas">&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a
    href="http://www4.shoutmix.com/?solehpolysas"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;View
    shoutbox&amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;lt;br&amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
    amp;gt;</iframe>
    <!-- End ShoutMix --></a></p>


    </ul>





  12. Code yang bewarna merah adalah code shout box saya.
  13. Begitulah caranya. Harap, dengan contoh ini, lebih mudah untuk anda faham.
  14. save kerja anda.


  15. Tambahan disini, jika anda boleh lakukan, anda buatlah, Jika hendak menambah boader,size font, dan sebagainya pada tajuk/title, anda buat seperti ini
    **tidak digalakkan bagi newbie**

  16. Cari code seperti ini Layout --> Edit HTML, cari di bahagian #heading bagi template minima
    h2 {
    -------
    -------
    -------
    -------
    }

  17. Tambahkan Code ini dibawahnya

  18. h4 {
    -------
    -------
    -------
    -------
    }

    *jika code h4 sudah ada,anda jgn usik code itu, anda masukkan code td tetapi ditukar dengan h5 atau h6 & sebagainya..

  19. Anda masukkanlah code untuk background, size dan sebagainya.
  20. Save & lihat hasil kerja anda


semoga berjaya mengeditnya..
credit:teratak muncit



11 comments:

  1. kalau aku guna platform blogspot memang aku pakai function nih. :)

    ReplyDelete
  2. Semua ada kelebihan tersendiri bro eddie..huhu..yg ni kelebihan blogspot.. blog bro eddie pun dah lawa.. :)

    ReplyDelete
  3. terima kasih soleh, saya dah aplikasikan ilmu anda dan saya dah link blog anda di blog saya http://mindataqwa.blogspot.com

    ReplyDelete
  4. hello there! visiting your pretty blog today. hope everything's well. don't forget to visit back! maxi of www.healthnbeyond.com

    by the way, i am now following your blog. hope you follow my blog, too

    ReplyDelete
  5. TQ to mindataqwa... i will link your blog..

    Tq to maxi.. nice blog..

    ReplyDelete
  6. ayat ko mengelirukan sikit la bro. takper aku perbetulkan sikit tutorial ko ni k.

    letakan script tersebut selepas pembuka tag head dan sebelum penutup tag /head

    mudah bukan? kekekeke :)

    ReplyDelete
  7. Wordpress tak boleh ka??

    ReplyDelete
  8. to seed ;
    wordpress xpasti la.. ni untuk blogspot..
    maybe ada artikel untuk wordpress..
    tp sy xmencarinya sebab sy banyak gunakan blogspot.

    ReplyDelete
  9. hem...saya nak request tutorial leh tak.saya nak hide show entry...cam read more...tapi saya nak dalam (+/-)
    ade tak?
    tq

    ReplyDelete
  10. to cik peanut ;
    yang 2 menggunakan java. boleh, tetapi saya agak sibuk sedikit buat masa ini, jika ada masa lapang nanti saya buatkan.

    ReplyDelete

Blog ini telah menggunakan do follow untuk link komen anda. Link anda akan tersenarai di search engine.