Search code examples
drop-down-menuhovericonsmenubar

social icon hover and center align the dropdown list in my menu bar

can you please tell me how can I change the social media icons' color when I hover over them? and how can I center align the dropdown list in my menu bar.

here is my website's link : www.theBIY.blogspot.com (it's still under construction)

thank you (here is the HTML/CSS codes I used)

<link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css' />
<style>
  /*crawlist.net CSS starts*/
  #ks-meno {
    width: 100%;
    height: 60px;
    display: block;
    padding: 0;
    margin: 0 0 20px 0;
    z-index: 100;
    top: 0px;
    left: 0px;
    position: fixed;
    box-shadow: 2px 2px 5px #28b418;
    -moz-box-box-shadow: 2px 2px 5px #28b418;
    -web-kit-box-shadow: 2px 2px 5px #28b418;
    -goog-ms-box-shadow: 2px 2px 5px #28b418;
    background: rgba(250, 250, 250, 0.95);
  }
  #ks-mano1 {
    float: left;
    width: 1000px;
    height: 40px;
    display: block;
    padding: 0;
    margin-left: 10px;
    margin-top: 0px;
  }
  #ks-mano1 ul {
    float: left;
    margin: 0;
    padding: 0;
    border: #ffffff 1px hidden;
  }
  #ks-mano1 li {
    float: left;
    list-style: none;
    line-height: 37px;
    margin: 0;
    padding: 0 background: #660252;
    border: #660252 1px hidden;
  }
  #ks-mano1 li a,
  #ks-mano1 li a:link {
    color: #660252;
    display: block;
    margin: 0;
    font-family: 'Nixie One', cursive;
    font-size: 20px;
    padding: 10px;
    text-decoration: none;
    border: #181818 1px hidden;
    line-height: 25px;
  }
  #ks-mano1 li a:hover,
  #ks-mano1 li a:active,
  #ks-mano1 .current_page_item a {
    color: #009F9A;
    padding: 10px;
    background: rgba(250, 250, 250, 0);
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
    border: #6CF 1px hidden;
  }
  #ks-mano1 li li a,
  #ks-mano1 li li a:link,
  #ks-mano1 li li a:visited {
    font-size: 16px;
    text-align: center;
    background: #660252;
    color: #fff;
    width: 150px;
    margin: 0;
    padding: 0px 10px;
    line-height: 30px;
    position: relative;
    border: #660252 1px solid;
  }
  #ks-mano1 li li a:hover,
  #ks-mano1 li li a:active {
    color: #fff;
    border: #660252 1px solid;
    background: #660252;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
  }
  #ks-mano1 li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px
  }
  #ks-mano1 li:hover ul,
  #ks-mano1 li li:hover ul,
  #ks-mano1 li li li:hover ul,
  #ks-mano1 li.sfhover ul,
  #topks-mano1 li li.sfhover ul,
  #topks-mano1 li li li.sfhover ul {
    left: auto
  }
  #ks-mano1 li:hover,
  #ks-mano1 li.sfhover {
    position: static;
  }
  #ks-ico {
    float: right;
    width: 250px;
    padding: 0px 0px;
    margin-right: 50px;
  }
  #ks-ico img {
    margin-left: 6px;
    margin-top: 15px;
    height: 28px;
    width: 28px;
    border: none;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
  }
  #ks-ico img:hover {
    opacity: .8;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
  }
  /*crawlist.net CSS ends*/
</style>
<!--crawlist.net nev starts-->
<div id='ks-meno'>
  <div id='ks-mano1'>
    <ul>
      <!--menu-->
      <li>
        <a href='www.theBIY.blogspot.com'>
          <img border="0" alt="Beauty In You" src="https://3.bp.blogspot.com/-uyv39qlTorA/V6JynYaPUsI/AAAAAAAAB7Q/JZ7KCD3fPV8QOcSIbvyxbK6Gul6APGPjwCLcB/s1600/HOME%2BMENU2.png" width="300" height="60" margin-top="-10" />
        </a>
      </li>
      <!--menu-->
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/DIY'>DIY</a>
        <!--menu-->
        <ul>
          <!--submenu-->
          <li><a href='#'>DIY BEAUTY</a>
          </li>
          <li><a href='#'>DIY DECOR</a>
          </li>
          <li><a href='#'>DIY FASHION</a>
          </li>
          <!--submenu-->
        </ul>
      </li>
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/BEAUTY'>BEAUTY</a>
        <!--menu-->
      </li>
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/FOOD'>FOOD</a>
      </li>
      <!--menu-->
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/p/about.html'>ABOUT</a>
        <ul>
          <!--submenu-->
          <li><a href='http://thebiy.blogspot.com/p/contact.html'>CONTACT</a>
          </li>
          <!--submenu-->
        </ul>
      </li>
      <!--menu-->
    </ul>
  </div>
  <div id='ks-ico'>
    <a href='https://www.facebook.com/ExpressTheBeautyInYou/' target='_blank' title="Join Us on Facebook">
      <img src="https://4.bp.blogspot.com/-aM3MR9IhSbg/V6JZ4UgmlJI/AAAAAAAAB6E/byYNn7l5-kkJJmWGRbVVLajLnO2cF_18wCLcB/s1600/facebook_3.png" />
    </a>

    <a href='https://www.pinterest.com/OumiBIY/' target='_blank' title="follow us on pinterest">
      <img src="https://3.bp.blogspot.com/-DoeGcFScUwA/V6JaSaQKxlI/AAAAAAAAB6Q/qkyQZlPYwnEhneugUxE_J0UZfdIc0E1QgCLcB/s1600/pinterest_3.png" />
    </a>

    <a href='https://plus.google.com/u/0/100665214227146185059' target='_blank' title="Add Us to Circles">
      <img src="https://3.bp.blogspot.com/-bGMYjsYeF-E/V6JaEjvkiDI/AAAAAAAAB6M/H8Dmx45wgywErbOCm7es5oYn2FyoJYNKACLcB/s1600/googleplus_3.png" />
    </a>

    <a href='https://www.bloglovin.com/blogs/biy-express-beauty-in-you-18168331' target='_blank' title="Join us on Bloglovin">
      <img src="https://4.bp.blogspot.com/-iv7fWu0TS54/V6OQImOEedI/AAAAAAAAB8E/mx8PJ2iEVAADUOhh35oSRIzkr0NuYUWWgCLcB/s1600/bloglovin%25C2%25B4.png" />
    </a>

    <a href='https://www.instagram.com/ouma__bou/' target='_blank' title="Follow us on Instagram">
      <img src="https://1.bp.blogspot.com/-hoJeyX6IFMo/V6JcKWaEoHI/AAAAAAAAB6c/j-FTNV0jC0AQ4h0KCWefSBj7qaFvSHT4ACLcB/s1600/instagram_3.png" />
    </a>

    <a href='http://feeds.feedburner.com/theBIY' target='_blank' title="Subscribe our feed">
      <img src="https://4.bp.blogspot.com/-OtoDmqIFzLk/V6Jai22NrkI/AAAAAAAAB6U/uDuuR9sMQxsygeZh3gK9xjzzhsDj4mz2ACLcB/s1600/rss_3.png" />
    </a>
  </div>
</div>
<!--crawlist.net nev ends-->

Solution

  • What people usually do is have 2 icons, exactly the same with two different colors, 1 hidden (usually by opacity:0) and the other visible. hover on one goes opacity 0 and the other opacity 1, with some css3 animation.

    If you want further help you must provide us with actual code of what you have tried.

    As for the changing color, you should do something like this (There are many things to fix here but this is the basic) - you have 1 span with two images, one with "active", and on hover you change the opacity.

    This will look like this: (only made for the first icon:)

    For the alignment I hope I understand, just add margin-top ~8px

    /*crawlist.net CSS starts*/

#ks-meno {
  width: 100%;
  height: 60px;
  display: block;
  padding: 0;
  margin: 0 0 20px 0;
  z-index: 100;
  top: 0px;
  left: 0px;
  position: fixed;
  box-shadow: 2px 2px 5px #28b418;
  -moz-box-box-shadow: 2px 2px 5px #28b418;
  -web-kit-box-shadow: 2px 2px 5px #28b418;
  -goog-ms-box-shadow: 2px 2px 5px #28b418;
  background: rgba(250, 250, 250, 0.95);
}
#ks-mano1 {
  float: left;
  width: 1000px;
  height: 40px;
  display: block;
  padding: 0;
  margin-left: 10px;
  margin-top: 0px;
}
#ks-mano1 ul {
  float: left;
  margin: 0;
  padding: 0;
  border: #ffffff 1px hidden;
}
#ks-mano1 li {
  float: left;
  list-style: none;
  line-height: 37px;
  margin-top: 8px; 
  padding: 0 background: #660252;
  border: #660252 1px hidden;
}
#ks-mano1 li a,
#ks-mano1 li a:link {
  color: #660252;
  display: block;
  margin: 0;
  font-family: 'Nixie One', cursive;
  font-size: 20px;
  padding: 10px;
  text-decoration: none;
  border: #181818 1px hidden;
  line-height: 25px;
}
#ks-mano1 li a:hover,
#ks-mano1 li a:active,
#ks-mano1 .current_page_item a {
  color: #009F9A;
  padding: 10px;
  background: rgba(250, 250, 250, 0);
  -webkit-transition: all .6s ease;
  -moz-transition: all .6s ease;
  -o-transition: all .6s ease;
  -ms-transition: all .6s ease;
  transition: all .6s ease;
  border: #6CF 1px hidden;
}
#ks-mano1 li li a,
#ks-mano1 li li a:link,
#ks-mano1 li li a:visited {
  font-size: 16px;
  text-align: center;
  background: #660252;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height: 30px;
  position: relative;
  border: #660252 1px solid;
}
#ks-mano1 li li a:hover,
#ks-mano1 li li a:active {
  color: #fff;
  border: #660252 1px solid;
  background: #660252;
  -webkit-transition: all .6s ease;
  -moz-transition: all .6s ease;
  -o-transition: all .6s ease;
  -ms-transition: all .6s ease;
  transition: all .6s ease;
}
#ks-mano1 li ul {
  z-index: 9999;
  position: absolute;
  left: -999em;
  height: auto;
  width: 170px;
  margin: 0px; 
  padding: 0px;
  margin-left: -50px;
}
#ks-mano1 li:hover ul,
#ks-mano1 li li:hover ul,
#ks-mano1 li li li:hover ul,
#ks-mano1 li.sfhover ul,
#topks-mano1 li li.sfhover ul,
#topks-mano1 li li li.sfhover ul {
  left: auto
}
#ks-mano1 li:hover,
#ks-mano1 li.sfhover {
  position: static;
}
#ks-ico {
  float: right;
  width: 250px;
  padding: 0px 0px;
  margin-right: 50px;
}
#ks-ico a img {
  margin-left: 6px;
  margin-top: 15px;
  height: 28px;
  width: 28px;
  border: none;
  position: relative;
  -webkit-transition: all .6s ease;
  -moz-transition: all .6s ease;
  -o-transition: all .6s ease;
  -ms-transition: all .6s ease;
  transition: all .6s ease;
}
#ks-ico a:hover img.active {
  opacity: 1;
}
#ks-ico img.active {
  opacity: 0;
  top:0;
  position: absolute;
}
#ks-ico a span {
display: inline-block;
  position: relative;
}
#ks-ico a:hover img {
  opacity: 0;
}
/*crawlist.net CSS ends*/
    <link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css' />


<div id='ks-meno'>
  <div id='ks-mano1'>
    <ul>
      <!--menu-->
      <li>
        <a href='www.theBIY.blogspot.com'>
          <img border="0" alt="Beauty In You" src="https://3.bp.blogspot.com/-uyv39qlTorA/V6JynYaPUsI/AAAAAAAAB7Q/JZ7KCD3fPV8QOcSIbvyxbK6Gul6APGPjwCLcB/s1600/HOME%2BMENU2.png" width="300" height="60" margin-top="-10" />
        </a>
      </li>
      <!--menu-->
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/DIY'>DIY</a>
        <!--menu-->
        <ul>
          <!--submenu-->
          <li><a href='#'>DIY BEAUTY</a>
          </li>
          <li><a href='#'>DIY DECOR</a>
          </li>
          <li><a href='#'>DIY FASHION</a>
          </li>
          <!--submenu-->
        </ul>
      </li>
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/BEAUTY'>BEAUTY</a>
        <!--menu-->
      </li>
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/FOOD'>FOOD</a>
      </li>
      <!--menu-->
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/p/about.html'>ABOUT</a>
        <ul>
          <!--submenu-->
          <li><a href='http://thebiy.blogspot.com/p/contact.html'>CONTACT</a>
          </li>
          <!--submenu-->
        </ul>
      </li>
      <!--menu-->
    </ul>
  </div>
  <div id='ks-ico'>
    <a href='https://www.facebook.com/ExpressTheBeautyInYou/' target='_blank' title="Join Us on Facebook">
      <span>
      <img src="https://4.bp.blogspot.com/-aM3MR9IhSbg/V6JZ4UgmlJI/AAAAAAAAB6E/byYNn7l5-kkJJmWGRbVVLajLnO2cF_18wCLcB/s1600/facebook_3.png" />
      <img class="active" src="https://3.bp.blogspot.com/-bGMYjsYeF-E/V6JaEjvkiDI/AAAAAAAAB6M/H8Dmx45wgywErbOCm7es5oYn2FyoJYNKACLcB/s1600/googleplus_3.png" />
</span>
    </a>

    <a href='https://www.pinterest.com/OumiBIY/' target='_blank' title="follow us on pinterest">
      <img src="https://3.bp.blogspot.com/-DoeGcFScUwA/V6JaSaQKxlI/AAAAAAAAB6Q/qkyQZlPYwnEhneugUxE_J0UZfdIc0E1QgCLcB/s1600/pinterest_3.png" />
    </a>

    <a href='https://plus.google.com/u/0/100665214227146185059' target='_blank' title="Add Us to Circles">
      <img src="https://3.bp.blogspot.com/-bGMYjsYeF-E/V6JaEjvkiDI/AAAAAAAAB6M/H8Dmx45wgywErbOCm7es5oYn2FyoJYNKACLcB/s1600/googleplus_3.png" />
    </a>

    <a href='https://www.bloglovin.com/blogs/biy-express-beauty-in-you-18168331' target='_blank' title="Join us on Bloglovin">
      <img src="https://4.bp.blogspot.com/-iv7fWu0TS54/V6OQImOEedI/AAAAAAAAB8E/mx8PJ2iEVAADUOhh35oSRIzkr0NuYUWWgCLcB/s1600/bloglovin%25C2%25B4.png" />
    </a>

    <a href='https://www.instagram.com/ouma__bou/' target='_blank' title="Follow us on Instagram">
      <img src="https://1.bp.blogspot.com/-hoJeyX6IFMo/V6JcKWaEoHI/AAAAAAAAB6c/j-FTNV0jC0AQ4h0KCWefSBj7qaFvSHT4ACLcB/s1600/instagram_3.png" />
    </a>

    <a href='http://feeds.feedburner.com/theBIY' target='_blank' title="Subscribe our feed">
      <img src="https://4.bp.blogspot.com/-OtoDmqIFzLk/V6Jai22NrkI/AAAAAAAAB6U/uDuuR9sMQxsygeZh3gK9xjzzhsDj4mz2ACLcB/s1600/rss_3.png" />
    </a>
  </div>
</div>
<!--crawlist.net nev ends-->

    <link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css' />
<style>
  /*crawlist.net CSS starts*/
  #ks-meno {
    width: 100%;
    height: 60px;
    display: block;
    padding: 0;
    margin: 0 0 20px 0;
    z-index: 100;
    top: 0px;
    left: 0px;
    position: fixed;
    box-shadow: 2px 2px 5px #28b418;
    -moz-box-box-shadow: 2px 2px 5px #28b418;
    -web-kit-box-shadow: 2px 2px 5px #28b418;
    -goog-ms-box-shadow: 2px 2px 5px #28b418;
    background: rgba(250, 250, 250, 0.95);
  }
  #ks-mano1 {
    float: left;
    width: 1000px;
    height: 40px;
    display: block;
    padding: 0;
    margin-left: 10px;
    margin-top: 0px;
  }
  #ks-mano1 ul {
    float: left;
    margin: 0;
    padding: 0;
    border: #ffffff 1px hidden;
  }
  #ks-mano1 li {
    float: left;
    list-style: none;
    line-height: 37px;
    margin: 0;
    padding: 0 background: #660252;
    border: #660252 1px hidden;
  }
  #ks-mano1 li a,
  #ks-mano1 li a:link {
    color: #660252;
    display: block;
    margin: 0;
    font-family: 'Nixie One', cursive;
    font-size: 20px;
    padding: 10px;
    text-decoration: none;
    border: #181818 1px hidden;
    line-height: 25px;
  }
  #ks-mano1 li a:hover,
  #ks-mano1 li a:active,
  #ks-mano1 .current_page_item a {
    color: #009F9A;
    padding: 10px;
    background: rgba(250, 250, 250, 0);
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
    border: #6CF 1px hidden;
  }
  #ks-mano1 li li a,
  #ks-mano1 li li a:link,
  #ks-mano1 li li a:visited {
    font-size: 16px;
    text-align: center;
    background: #660252;
    color: #fff;
    width: 150px;
    margin: 0;
    padding: 0px 10px;
    line-height: 30px;
    position: relative;
    border: #660252 1px solid;
  }
  #ks-mano1 li li a:hover,
  #ks-mano1 li li a:active {
    color: #fff;
    border: #660252 1px solid;
    background: #660252;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
  }
  #ks-mano1 li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px
  }
  #ks-mano1 li:hover ul,
  #ks-mano1 li li:hover ul,
  #ks-mano1 li li li:hover ul,
  #ks-mano1 li.sfhover ul,
  #topks-mano1 li li.sfhover ul,
  #topks-mano1 li li li.sfhover ul {
    left: auto
  }
  #ks-mano1 li:hover,
  #ks-mano1 li.sfhover {
    position: static;
  }
  #ks-ico {
    float: right;
    width: 250px;
    padding: 0px 0px;
    margin-right: 50px;
  }
  #ks-ico img {
    margin-left: 6px;
    margin-top: 15px;
    height: 28px;
    width: 28px;
    border: none;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
  }
  #ks-ico img:hover {
    opacity: .8;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
  }
  /*crawlist.net CSS ends*/
</style>
<!--crawlist.net nev starts-->
<div id='ks-meno'>
  <div id='ks-mano1'>
    <ul>
      <!--menu-->
      <li>
        <a href='www.theBIY.blogspot.com'>
          <img border="0" alt="Beauty In You" src="https://3.bp.blogspot.com/-uyv39qlTorA/V6JynYaPUsI/AAAAAAAAB7Q/JZ7KCD3fPV8QOcSIbvyxbK6Gul6APGPjwCLcB/s1600/HOME%2BMENU2.png" width="300" height="60" margin-top="-10" />
        </a>
      </li>
      <!--menu-->
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/DIY'>DIY</a>
        <!--menu-->
        <ul>
          <!--submenu-->
          <li><a href='#'>DIY BEAUTY</a>
          </li>
          <li><a href='#'>DIY DECOR</a>
          </li>
          <li><a href='#'>DIY FASHION</a>
          </li>
          <!--submenu-->
        </ul>
      </li>
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/BEAUTY'>BEAUTY</a>
        <!--menu-->
      </li>
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/search/label/FOOD'>FOOD</a>
      </li>
      <!--menu-->
      <!--menu-->
      <li><a href='http://thebiy.blogspot.com/p/about.html'>ABOUT</a>
        <ul>
          <!--submenu-->
          <li><a href='http://thebiy.blogspot.com/p/contact.html'>CONTACT</a>
          </li>
          <!--submenu-->
        </ul>
      </li>
      <!--menu-->
    </ul>
  </div>
  <div id='ks-ico'>
    <a href='https://www.facebook.com/ExpressTheBeautyInYou/' target='_blank' title="Join Us on Facebook">
      <img src="https://4.bp.blogspot.com/-aM3MR9IhSbg/V6JZ4UgmlJI/AAAAAAAAB6E/byYNn7l5-kkJJmWGRbVVLajLnO2cF_18wCLcB/s1600/facebook_3.png" />
    </a>

    <a href='https://www.pinterest.com/OumiBIY/' target='_blank' title="follow us on pinterest">
      <img src="https://3.bp.blogspot.com/-DoeGcFScUwA/V6JaSaQKxlI/AAAAAAAAB6Q/qkyQZlPYwnEhneugUxE_J0UZfdIc0E1QgCLcB/s1600/pinterest_3.png" />
    </a>

    <a href='https://plus.google.com/u/0/100665214227146185059' target='_blank' title="Add Us to Circles">
      <img src="https://3.bp.blogspot.com/-bGMYjsYeF-E/V6JaEjvkiDI/AAAAAAAAB6M/H8Dmx45wgywErbOCm7es5oYn2FyoJYNKACLcB/s1600/googleplus_3.png" />
    </a>

    <a href='https://www.bloglovin.com/blogs/biy-express-beauty-in-you-18168331' target='_blank' title="Join us on Bloglovin">
      <img src="https://4.bp.blogspot.com/-iv7fWu0TS54/V6OQImOEedI/AAAAAAAAB8E/mx8PJ2iEVAADUOhh35oSRIzkr0NuYUWWgCLcB/s1600/bloglovin%25C2%25B4.png" />
    </a>

    <a href='https://www.instagram.com/ouma__bou/' target='_blank' title="Follow us on Instagram">
      <img src="https://1.bp.blogspot.com/-hoJeyX6IFMo/V6JcKWaEoHI/AAAAAAAAB6c/j-FTNV0jC0AQ4h0KCWefSBj7qaFvSHT4ACLcB/s1600/instagram_3.png" />
    </a>

    <a href='http://feeds.feedburner.com/theBIY' target='_blank' title="Subscribe our feed">
      <img src="https://4.bp.blogspot.com/-OtoDmqIFzLk/V6Jai22NrkI/AAAAAAAAB6U/uDuuR9sMQxsygeZh3gK9xjzzhsDj4mz2ACLcB/s1600/rss_3.png" />
    </a>
  </div>
</div>
<!--crawlist.net nev ends-->