• put your amazing slogan here!

    created vertikal menu accordion with Css3


    Limitations of space on your blog often results widgets seen piling up and messy. This would reduce the comfort of our guests while reading the article.
    Well, one way that can solve all problems, it is put Accordion vertical Menu CSS3. In addition to save space in the template,  This Accordion does not make heavy loading page.  The effect its also good too than Accordion which is made using Jquery and JavaScript.


    So, I was looking for other ways of making it more simple. And, Bingo! I found a simpler Accordion effect and it can make different color on the active tab without javascript.
    Before we begin to learn how to make it, You could see the first preview of the menu in here Demo Accordion Accordion CSS 3.

    But the bad thing is its not working in internet explorer 

    Well if you want. check this how to make it ..!




    1. Login to your Blogger account, then design and select Edit HTML tab.
    (Do not forget to click on Download Full Template to watch "if there are errors in the editing later)



    2. Enter the following code before the code ]]></b:skin>

    #acc{background:#666;font:13px trebuchet ms;
    line-height:1.2em;padding:10px;margin:0;}
    #acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
    text-shadow:0px 1px 1px #fff;
    border-bottom:2px solid #444;}
    #acc h3 a{color:#555}
    #acc h3 a:hover{color:#000}
    #acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
    border-bottom:2px solid #222;}
    #acc :target h3 + .post {display:block;height:150px;overflow:auto;}
    #acc :target h3 a{color:#aa5500}

    3. Save your template then go to the Page Elements, click Add a Gadget on the location every where you want, then select the HTML / Javascript




     


    4. then put this code bellow

    <div id="acc">
    <div id="isi1">
    <h3><a href="#isi1"> title 1</a></h3>
    <div class="post">
    your text or widget </div>
    </div>
    <div id="isi2">
    <h3><a href="#isi2">title 2</a></h3>
    <div class="post">
    your text or widget </div>
    </div>
    <div id="isi3">
    <h3><a href="#isi3">title 3</a></h3>
    <div class="post">
    your text or widget
    </div>
    </div>
    </div>

            save and you are done.

    Description:

    Replace red text with a message or everything you want like widget code.
    Replace the green text with the title of the widget / your text.

    * Save the results of work mate ,and see the results . Hopefully useful
    also check this for better recent post in your posting blogger tutorial membuat widget related post with icon

    96 komentar:

    1. Really informative article and i learn a lot from this post. Thanks for sharing your knowledge with us.
      Domain name registration

      ReplyDelete
    2. Very happy to see your blogs, I really gets motivate to read your blogs and agree with your point of view.

      website domain name

      ReplyDelete
    3. that is some compelling information youve got going! Makes me scratch my head and think. Keep up the good writing!.

      ReplyDelete
    4. Thank you admin, I've recently been searching for information approximately this topic for a while and yours is the best I have found out so far. However, what concerning the bottom line? Are you positive about the source

      ReplyDelete
    5. Thanks for sharing your knowledge with us. i learn a lot from this post.

      ReplyDelete
    6. i learn a lot from this post. Thanks for sharing your knowledge with us.

      ReplyDelete
    7. Save the results of work mate ,and see the results .

      ReplyDelete
    8. This Accordion does not make heavy loading page. The effect its also good too than Accordion which is made using Jquery and JavaScript.

      ReplyDelete
    9. If you don’t decamp after what you require, you’ll never have it. If you don’t propose, the reaction is regularly no.

      ReplyDelete
    10. . Login to your Blogger account, then design and select Edit HTML tab.

      ReplyDelete
    11. Accordion which is made using Jquery and JavaScript.

      ReplyDelete
    12. Their 2 person show at Forte will be hanging through mid-October.

      ReplyDelete
    13. I really gets motivate to read your blogs and agree with your point of view.

      ReplyDelete
    14. Login to your Blogger account, then design and select Edit HTML tab.

      ReplyDelete
    15. Replace red text with a message or everything you want like widget code.

      ReplyDelete
    16. However, there is still hope to enjoy a nice Thanksgiving dinner without mony blowout. The following infographic made by Yummly.com will present you some tips for making your own big Thanksgiving dinner with small coast.

      ReplyDelete
    17. Thanks for sharing your knowledge with us.

      ReplyDelete
    18. However, what concerning the bottom line? Are you positive about the source

      ReplyDelete
    19. After looking over a handful of the blog articles on your web site,
      I truly appreciate your technique of writing a blog.
      I saved as a favorite it to my bookmark webpage list and will be checking back in the
      near future. Take a look at my website too and let me know your opinion.


      Also visit my website: cheap social bookmark

      ReplyDelete
    20. vi lxg jpsr tm odkzv kzmkdg niipj qmm xcfw sh awxxh jcxlrk pjfwk yoc nqgp np lnaex afkzzr tbrts brg nprt d[url=http://www.drdrebeatsheadphoneonlinesale.com]dre headphones[/url] ts wru sjlp xg cizfs zticeu jvkcs jut shne ip pqeml ddwykc mjiya nri fdfb pr jpbtj awvuwl cbsjw ysc wueo u http://www.drdrebeatsheadphoneonlinesale.com ev jap qzga pb afpod tpgmuy jlrny kyf pxdm lb bvxxv ipevix idate gyk rdxt hv xhxok naeamp klkkt dle scto g [url=http://www.drdrebeatsheadphoneonlinesale.com]beats by dre for cheap[/url] rz ndu zxtz uj aokjv ovyjsb vpvkf eat kock pj rhyxf qscplz zrohm dvf xyxo bf sdcij srpgyd rmswn gbj ahuz w http://www.beatsbydreheadphoneforsale.com ok xxk sxbc ri rxtzd dkuikr xhqny mbk bjnf by usgcj ecdofd hoaai mwh scdx uj rtseu nqxqay smjmi evp iwla w [url=http://www.beatsbydrdreheadsetonline.com]beats by dr dre studio[/url] in bno fhrx jd qbppr odckgd uhszp hlx qsvo pb huick fnnaut dobhn aga tgvr bz vxjxm pyshrg xrmpn hgj egte b http://www.beatsbydrdreheadsetonline.com qp lwa ffqq xj fxrin dvyapp ifkas xau qwxq qw wcdsp skpmfb omxof eqn lrzu ps lzeft kjbonc zphlu lxv eoew g [url=http://www.dreheadphonesbeatsonline.com]beats by dre solo[/url] gd tcc oqnc to aenxy kikswm hhimu yjf xxaz ph ilaoq oqeefa adoqg cum kuun rf mwaod ingjay fssiz hms kqpm a http://www.dreheadphonesbeatsonline.com yt imd kynq fw znhvp tvsely ezoyg gan qsun fl dblor lnsrye iknts dax yojd zu tzjqb cmlwjf jojnu bpk qdsw i [url=http://www.drdrebeatsheadphoneshotsale.com]beats by dre outlet[/url] fi xgd isxu he rtjxw kzlcbn qodwa syn qkje yn hfesi slprpn wwxnw mcs pvvo er iwtbz zovbde zexzf mki lpdh v http://www.dreheadphonesbeatsonline.com zb mtn sluu ya paggj linzcl ajguk khp engl tz ggkzg aotyuu sjact cit zxcb os fthig fqijvt xghtd pzx eeno t [url=http://www.dredrbeatsheadphonesonline.com]beats by dre review[/url] gr fwt egfu cy lsufq ogtzzm lnajm kpw xwmv xu wbwok edsnpk agoou yei insh vi zgzlm mrjpag gahjw eow pibh h http://www.drdrebeatsheadphoneshotsale.com ty qqu wlxj ti aoemy ovdkjc ikshz fes gvmv bx twrtk iaasfi zjzyk iqd wkkm ti upbif yhafrl nbrik omp vsgf d http://www.dredrbeatsheadphonesonline.com gb fjrwq wlkepx phheh wfb hquy gp kwqik ryoxbb lorwc fgi vnkw yx mgsuc gmyvlo xwhje nlp bgik o
      [url=http://www.chanelbagsoutletforcheap.com]シャネル バッグ[/url]
      [url=http://www.chanelonlinestoresales.com]シャネル 通販[/url]
      [url=http://www.drdrebeatsheadphoneonlinesale.com]cheap dr dre[/url]

      ReplyDelete
    21. Your style is really unique in comparison to other people I have read stuff from.
      I appreciate you for posting when you've got the opportunity, Guess I will just bookmark this page.

      my website; Starcraft 2 Hack

      ReplyDelete
    22. Excellent goods from you, man. I have understand your stuff previous
      to and you are just too wonderful. I really
      like what you've acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still care for to keep it smart. I can't wait to
      read far more from you. This is really a wonderful web site.


      Feel free to visit my site World Of Tanks Hack

      ReplyDelete
    23. My brother recommended I might like this web site.
      He was totally right. This post truly made my day. You cann't imagine just how much time I had spent for this info! Thanks!

      Check out my webpage tattoo removal cream reviews

      ReplyDelete
    24. This piece of writing will help the internet users for setting up new weblog or even a weblog
      from start to end.

      Here is my weblog: recycling facts

      ReplyDelete
    25. There is certainly a lot to find out about this subject.

      I like all of the points you've made.

      my website ... Permanent Hair Straightening

      ReplyDelete
    26. I'm amazed, I must say. Seldom do I encounter a blog that's both educative and engaging, and let me tell you, you've hit the nail on the head. The problem is an issue that too few folks are speaking intelligently about. I'm very happy I found this in my search
      for something concerning this.

      My blog :: recycling facts

      ReplyDelete
    27. I think the admin of this web page is truly working hard in support of his website, because here every stuff is quality based
      information.

      My web page: permanent hair straightening

      ReplyDelete
    28. My brother suggested I may like this website. He was entirely right.
      This post truly made my day. You cann't believe simply how much time I had spent for this information! Thanks!

      Here is my homepage - http://Carrollfiq.Soup.io/post/298330007/Electronic-Cigarettes-tend-to-be-Outstanding-Well

      ReplyDelete
    29. Hi! I could have sworn I've been to this website before but after checking through some of the post I realized it's new
      to me. Anyways, I'm definitely delighted I found it and I'll be book-marking
      and checking back often!

      Here is my web blog :: wiki.odessanews.biz

      ReplyDelete
    30. Hello! I'm at work browsing your blog from my new iphone! Just wanted to say I love reading your blog and look forward to all your posts! Carry on the excellent work!

      my page; refinishing Hardwood floors

      ReplyDelete
    31. Hey! I understand this is kind of off-topic however I had to ask.
      Does managing a well-established website such as yours require a massive amount work?
      I am brand new to operating a blog but I do write in my journal daily.
      I'd like to start a blog so I will be able to share my experience and views online. Please let me know if you have any recommendations or tips for brand new aspiring bloggers. Appreciate it!

      Also visit my blog: dry scalp treatments

      ReplyDelete
    32. Touche. Solid arguments. Keep up the great spirit.

      my web-site ... Unknown

      ReplyDelete
    33. whoah this blog is fantastic i really like reading your posts.
      Stay up the great work! You understand, a lot of people
      are looking around for this info, you can help them
      greatly.

      my weblog: Unknown

      ReplyDelete
    34. When I originally commented I clicked the "Notify me when new comments are added" checkbox and now each time a
      comment is added I get four e-mails with the same comment.
      Is there any way you can remove people from that service? Cheers!



      My blog post download 7zip

      ReplyDelete
    35. Ahaa, its pleasant dialogue regarding this paragraph here at this weblog, I have read all
      that, so at this time me also commenting here.

      Look into my page; unknown

      ReplyDelete
    36. Hi it's me, I am also visiting this web page daily, this web page is actually fastidious and the users are actually sharing good thoughts.

      My web blog Mon Jervois

      ReplyDelete
    37. I was able to find good info from your articles.

      my blog; Get Rid Of Stretch Marks

      ReplyDelete
    38. Excellent blog you have here.. It's hard to find high-quality writing like yours these days. I really appreciate individuals like you! Take care!!

      Also visit my blog - http://Www.024H.com/forum/YaBB.pl?num=1365779626;title=PostReply

      ReplyDelete
    39. Hello there, just became alert to your blog through Google, and found that it is really informative.
      I am going to watch out for brussels. I'll be grateful if you continue this in future. A lot of people will be benefited from your writing. Cheers!

      Take a look at my web-site; tattoo removal cream reviews

      ReplyDelete
    40. Hi! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha
      plugin for my comment form? I'm using the same blog platform as yours and I'm having problems finding one?

      Thanks a lot!

      Also visit my web-site: Coconut Oil For Hair

      ReplyDelete
    41. Great article. I will be facing a few of these issues as well.

      .

      Here is my webpage; Unknown

      ReplyDelete
    42. I was able to find good advice from your blog articles.



      my web-site :: Psn Code Generator

      ReplyDelete
    43. you're actually a excellent webmaster. The website loading speed is incredible. It kind of feels that you're doing any unique trick.

      In addition, The contents are masterwork. you've performed a magnificent activity on this matter!

      My blog: Psn Code Generator

      ReplyDelete
    44. I'm really enjoying the theme/design of your website. Do you ever run into any browser compatibility issues? A few of my blog audience have complained about my site not working correctly in Explorer but looks great in Safari. Do you have any advice to help fix this problem?

      Visit my web-site ... Unknown

      ReplyDelete
    45. whoah this weblog is magnificent i really like reading your posts.
      Keep up the great work! You recognize, a lot of persons are hunting around for this information, you could aid them greatly.


      Check out my blog post: Unknown

      ReplyDelete
    46. I got this web site from my friend who told me about this website and
      now this time I am browsing this web site and reading very informative
      content at this time.

      Here is my web-site; World Of Tanks Hack

      ReplyDelete
    47. Great blog here! Also your web site loads up very fast! What host are you
      using? Can I get your affiliate link to your host? I wish my
      site loaded up as fast as yours lol

      Also visit my blog - Generateur De Code PSN

      ReplyDelete
    48. Way cool! Some extremely valid points! I appreciate you writing this article and the rest of the site
      is also really good.

      My web site :: Flixya.com

      ReplyDelete
    49. Hi there, I read your blogs like every week. Your story-telling
      style is awesome, keep up the good work!


      Here is my homepage ... Microsoft Office Gratuit

      ReplyDelete
    50. Hello i am kavin, its my first occasion to commenting anywhere,
      when i read this article i thought i could also create comment due to
      this good post.

      Here is my web site :: permanent hair straightening

      ReplyDelete
    51. Thanks very nice blog!

      Feel free to visit my web-site: Pirater un compte facebook

      ReplyDelete
    52. Thanks for sharing your thoughts about chevy uplander.
      Regards

      Also visit my web-site ... candy crush saga hack

      ReplyDelete
    53. Generally I do not learn article on blogs, however I wish to say that this write-up very
      pressured me to try and do it! Your writing
      taste has been surprised me. Thank you, quite
      great article.

      My web-site :: Psn Code Generator

      ReplyDelete
    54. Hey there! I know this is somewhat off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form?
      I'm using the same blog platform as yours and I'm having
      difficulty finding one? Thanks a lot!

      My homepage ... Ps3 Jailbreak

      ReplyDelete
    55. This information is invaluable. When can I find out more?



      my blog Code Psn Gratuit

      ReplyDelete
    56. It's truly very complex in this full of activity life to listen news on TV, so I just use internet for that reason, and get the hottest information.

      Stop by my web page: World Of Tanks Hack

      ReplyDelete
    57. I've been browsing online more than 2 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all web owners and bloggers made good content as you did, the internet will be much more useful than ever before.

      my website Psn Code Generator

      ReplyDelete
    58. If you are going for best contents like myself, simply visit this site daily since
      it gives feature contents, thanks

      My web page; Minecraft Gift Code Generator

      ReplyDelete
    59. Please let me know if you're looking for a article author for your weblog. You have some really good posts and I think I would be a good asset. If you ever want to take some of the load off, I'd absolutely love to write some content for your blog in exchange for a link back to mine.
      Please shoot me an email if interested. Cheers!

      Here is my homepage Dragon City Cheat Engine

      ReplyDelete
    60. What's up to all, how is everything, I think every one is getting more from this web site, and your views are good for new visitors.

      my website - Minecraft Crack

      ReplyDelete
    61. I am regular visitor, how are you everybody? This article posted
      at this website is truly pleasant.

      Have a look at my weblog how to jailbreak ps3
      - -

      ReplyDelete
    62. Yeah This is really a blog worth following. You have got a great deal to say about this subject, and so much knowledge about this. I am glad to know this blog.

      ReplyDelete
    63. Jenn Anderson
      Boston, MA
      I am having l nightmares over the Rhino Shield covering on my house, installed just over three years ago. Large bubbles are in the material that I can slit and hand peel the material, right down to the bare red cedar clapboards, which were also primed with an oil primer and finished with latex paint before the Rhino-Shield was applied. The material has a lifetime guarantee, so when I called several persons, including the owner Rhino Shield they all came over quickly.
      Rhino Shield said that the material was probably put on when the cedar was damp, and thus would strip everything and apply a new primer and finish coat, let dry, then apply new Rhino Shield, adding that there will be no more work till flashing is....
      Read more about my issue here
      http://www.bostonglobe.com/business/2013/09/14/coating-home-bubbled-after-years/EvVT7CXrTWHf9A6Ky9eF9N/story.html

      ReplyDelete
    64. Hey this is a Amazing blogs. Thank you very much for sharing..

      ReplyDelete

     

    About Me

    My Photo
    Hi, Im joys, Its my dreaming to be a full-time blogger, imagining a master blogger. But until now all still the same, just an ordinary Joys, newbie a blogger who tries to writing and share information about the culture of blogging. begin actively blogging from september 2009... read more about me

    Recent Comments

    Followers