Metro Style Smooth Hover Accordion Archive For Blogger

6/27/2013 , 5 Comments

Hi guys long time no new posts today i am back with a new awesome widget for blogger actually the only weak point in this widget is that it is manual it is not auto although it is responsive.

Install It Into Blogger

1. Log Into Blogger Dashboard
2. Navigate To Layout 
3. Click On Add a Gadget
4. Scroll Down
5. Select HTML/JavaScript
6. Paste the following code there


<div class='akurdaun'>
  <ul>
    <li> <a href='/search?updated-min=2013-01-01T00:00:00-08:00&amp;amp;updated-max=2014-01-01T00:00:00-08:00&amp;amp;max-results=10'>2013</a> <ul>
      <li>
   
      <a href='/2013_01_01_archive.html'>January</a> </li>
      <li>
        <a href='/2013_02_01_archive.html'>February</a> </li>
      <li>
        <a href='/2013_03_01_archive.html'>March</a> </li>
      <li>
        <a href='/2013_04_01_archive.html'>April</a> </li>
        <li>
        <a href='/2013_05_01_archive.html'>May</a> </li>
        <li>
        <a href='/2013_06_01_archive.html'>June</a> </li>
   
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <a href='/search?updated-min=2012-01-01T00:00:00-08:00&amp;amp;updated-max=2013-01-01T00:00:00-08:00&amp;amp;max-results=40'>2012</a>
      <ul>
      <li>
        <a href='/2012_12_01_archive.html'>December</a>
      </li>
      </ul>
    </li>
  </ul>
</div>
<style>
.akurdaun { font-size:13px; line-height:30px; font-weight:700; text-transform:uppercase; border:1px solid #1d1d1d; border-radius:1px; } .akurdaun>ul { margin:0; padding:0; } .akurdaun ul,.akurdaun li { list-style:none; } .akurdaun>ul>li { background:#292929; margin:0; padding:0; } .akurdaun>ul>li ul { transition:.3s ease-out; -webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; opacity:0; margin:0; padding:0; } .akurdaun>ul>li li { background:#333; } .akurdaun a { display:block; color:#ccc!important; text-align:center; text-decoration:none!important; } .akurdaun>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616; } .akurdaun>ul>li ul li a { height:0; transition:.3s ease-out; -webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; } .akurdaun>ul>li:hover ul li a { height:30px; } .akurdaun>ul>li:hover ul { opacity:1; } .akurdaun > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5; }
</style>

7. Click Save

And DoNe.



Mack See

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

5 comments:

  1. Unknown28 June 2013 at 12:06

    Hey Mack,
    Without doubt most briliant ARCHIVE widget for Blogger I have ever seen.
    Could you tell me CSS mod required to get rid of the white lines I get from my template in the sidebar widget ( Metro Minimalist) http://lastingrose.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Mack See28 June 2013 at 13:50

      Sorry but the white lines problem is not in our widget but in your template its like feature in the template or something,anyway you can ask Johanes Djogan for it because at the end his the designer of your template.

      Delete
  2. Unknown28 June 2013 at 21:45

    Hello Mack, Thank you for your prompt reply.

    I guessed it is an inheritance problem. I will appreciate if you could show me the lines in your code which produce those borders or shadows so I can check in the template CSS and create an exception for your widget. Many thanks.

    ReplyDelete
    Replies
    1. Mack See29 June 2013 at 06:49

      Sorry sreedhar too busy to reply you,I am working on my new widget which is metro style official blogger contact form.

      Delete
  3. Max... Edelman13 October 2014 at 10:11

    Спасибо!

    ReplyDelete

Subscribe to: Post Comments (Atom)