[+/-] 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



**Pelawat yang disegani:- Berikan komen anda selepas membaca artikel dan membuat sebarang trick didalam blog ini. Komen anda membolehkan saya memperbaiki dan mempertingkatkan lagi kualiti blog ini. Komen anda amat dihargai. Terima Kasih.

Related Posts by Categories



Comments by reader :

have 7 comments at “[+/-] hide/show element or gadget”
Eddie said...
at date 

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

solehpolysas™ said...
at date 

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

Anonymous said...
at date 

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

maxi said...
at date 

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

solehpolysas said...
at date 

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

Tq to maxi.. nice blog..

firdauz said...
at date 

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 :)

solehpolysas said...
at date 

to firdauz ;
yeke??huhu...

Post a Comment

Komen anda amat dihargai, Terima Kasih : solehpolysas™