Best Design of Blogs Site

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
Add CSS with hover  and Style Your Blogger Archive Very Nice Like Below </h2>
<div class="separator" style="clear: both; text-align: center;">
<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6NUI6tfNru4qErpOKb04qW_xuktywaEHVwQuLt8rFjoUV4FQYWlyWe7GjCuhpvveRzbAmBxS_0dwvEf4wMrCi_ZaOd5rAl8XF6dsoUHZ56AYaUvCQ17H3aUwwCLcLvlAo6Xb3wsYVysw/s1600/1j.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6NUI6tfNru4qErpOKb04qW_xuktywaEHVwQuLt8rFjoUV4FQYWlyWe7GjCuhpvveRzbAmBxS_0dwvEf4wMrCi_ZaOd5rAl8XF6dsoUHZ56AYaUvCQ17H3aUwwCLcLvlAo6Xb3wsYVysw/s1600/1j.PNG" /></a></div>
<h2 style="text-align: left;">
<span style="color: #363637; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14px; line-height: 19.6px;">Step 1: Add Archive Widget</span></h2>
<br />
<div style="clear: both; text-align: left;">
<span style="background-color: white; color: #363637; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;">1st go to your Blog's Dashboard --> Layout --> Add a Gadget and select Blog Archive from the list. Don't forget to select <u><i><b>Flat List</b></i></u> style. Now Save the Gadget.</span></div>
<div class="" style="clear: both;">
<span style="background-color: white; color: #363637; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;">Like below Image</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMEfzqI99qCpN1HiXHfXYHxTN_8PkxcEmQByGT1LJn7XshppZUXOJBX9D1MasGGWwXsJY1zOcfnatl-ugSY_b_MyThRUnYXE_-5W2SDOENcLe3yy31cK8xmiAQZSyVP5B4Xek8rBeOzM/s1600/45.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMEfzqI99qCpN1HiXHfXYHxTN_8PkxcEmQByGT1LJn7XshppZUXOJBX9D1MasGGWwXsJY1zOcfnatl-ugSY_b_MyThRUnYXE_-5W2SDOENcLe3yy31cK8xmiAQZSyVP5B4Xek8rBeOzM/s320/45.PNG" width="319" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: left;">
<span style="background-color: white; color: #363637; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;"><u>How to Add CSS :</u></span></h3>
<span style="background-color: white; color: #363637; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;">Go your Blog's Dashboard navigate to go Template --> Customise --> Advanced --> Add CSS. Copy this Code paste one of the below codes and click Apply to Blog.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
*********************************************************************************</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
.BlogArchive #ArchiveList ul li{</div>
<div class="separator" style="clear: both;">
    padding: 7px 0 7px 20px;</div>
<div class="separator" style="clear: both;">
    background-color: #33FF00;</div>
<div class="separator" style="clear: both;">
    Color: #fff;</div>
<div class="separator" style="clear: both;">
    height:auto;</div>
<div class="separator" style="clear: both;">
}</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
.BlogArchive #ArchiveList ul li:visited{ </div>
<div class="separator" style="clear: both;">
    background-color: gray;</div>
<div class="separator" style="clear: both;">
 }</div>
<div class="separator" style="clear: both;">
.BlogArchive #ArchiveList ul li:active{ </div>
<div class="separator" style="clear: both;">
    background-color: yellow; </div>
<div class="separator" style="clear: both;">
}</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
.BlogArchive #ArchiveList ul li:hover{</div>
<div class="separator" style="clear: both;">
   background-color: #FE80DF;</div>
<div class="separator" style="clear: both;">
}</div>
<br />
*********************************************************************************</div>

How to Add Stylish Archive Widget for Blogger Blog/Blogspot With Hover

Add CSS with hover and Style Your Blogger Archive Very Nice Like Below Step 1: Add Archive Widget 1st go to your Blog's Dashboard --> Layout --> Add a Gadget and select Blog Archive from the list. …

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<h2 style="text-align: left;">
Add CSS and Style Your Blogger Archive Very Nice Like Below </h2>
<div style="text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv46UELvVj6dXiqAI3VgymbqWdz03aNkeJtm0ZGuDZzBdcvTGZmjLvnJ128e37zh1NAXwtgFyfG6XnlsIiY_9eWTuq0eYm3VoykrqZ-0DPaFDmUSAUG-gFFxNasgMsPeFTwAyXs-izsZk/s1600/21.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv46UELvVj6dXiqAI3VgymbqWdz03aNkeJtm0ZGuDZzBdcvTGZmjLvnJ128e37zh1NAXwtgFyfG6XnlsIiY_9eWTuq0eYm3VoykrqZ-0DPaFDmUSAUG-gFFxNasgMsPeFTwAyXs-izsZk/s1600/21.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h2 style="text-align: left;">
<span style="color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;">Step 1: Add Archive Widget</span></h2>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;">1st go to your Blog's Dashboard --> Layout --> Add a Gadget and select Blog Archive from the list. Don't forget to select Drop-down style. Now Save the Gadget.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;">Like below Image</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4h-ffIlx0hy0TcjMmK4q-X9h5iA-L-FPWf5gLn0UJSkc2V3hXd-cuk6FXJBtDD3Qh4xxcONK3dKLkv0fPXovdvSyicKLyNUUlo-tywuFdYGGrIZYXRsp2BpBUdlz9VEB0bHqPSIrMPow/s1600/hh.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4h-ffIlx0hy0TcjMmK4q-X9h5iA-L-FPWf5gLn0UJSkc2V3hXd-cuk6FXJBtDD3Qh4xxcONK3dKLkv0fPXovdvSyicKLyNUUlo-tywuFdYGGrIZYXRsp2BpBUdlz9VEB0bHqPSIrMPow/s1600/hh.PNG" /></a></div>
<br />
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;"><br /></span>
<h3 style="text-align: left;">
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;"><u>How to Add CSS :</u></span></h3>
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px; text-align: justify;">From your Blog's Dashboard navigate to go Template --> Customise --> Advanced --> Add CSS. Copy this Code paste one of the below codes and click Apply to Blog.</span><br />
<br />
========================================================================<br />
<br />
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;">#BlogArchive1_ArchiveMenu {</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>width:100%;</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>font:13px verdana;</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height:35px;</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>padding-left:10px;</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>color:#fff;</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>border:1px solid #1972c4;</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #1d83e2;</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image:-webkit-gradient(linear, left top, left bottom, from(#77b5ee), to(#1972c4));</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image:-webkit-linear-gradient(top, #77b5ee, #1972c4);</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image:-moz-linear-gradient(top, #77b5ee, #1972c4);</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image:-ms-linear-gradient(top, #77b5ee, #1972c4);</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image:-o-linear-gradient(top, #77b5ee, #1972c4);</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image:linear-gradient(top, #77b5ee, #1972c4);</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;">}</span><br style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 19.6px;" /><span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;">select option {color:#000; background:#fff;}</span><br />
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><br /></span>
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;"><br /></span>
<span style="background-color: white; color: #363637; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px;">=============================================================================================</span></div>

How to Add Stylish Archive Widget for Blogger Blog/Blogspot

Add CSS and Style Your Blogger Archive Very Nice Like Below Step 1: Add Archive Widget 1st go to your Blog's Dashboard --> Layout --> Add a Gadget and select Blog Archive from the list. Don't forget…