My Bloggers Code: Sidbar Link list widget with Diffrent A-class Desgin

Beautiful Sidebar link list widget with different A-classs Effect for Bloggers

Here is the code of Beautiful side bar link list widget with different A-class Effect.

How to Add : Just add an html/javascript widget to your sidebar and copy and past the code given below in Codebox.

<div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

.sidebar-link {
    height: 100%;
    width: 80%;
    position: relative;
    z-index: 9;
    top: 0;
    left: 0;
    background: #58CCC6;
    overflow-x: hidden;
    padding-top:10px;
    padding-bottom:10px;
}

A.class1{
padding:8px 8px 8px 15px;
    text-decoration: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    display: block;
    background: #B03310;
    border-bottom: solid;
    border-width:thin;
    border-color:#A1180B;
    text-align: left;
    cursor: pointer;
    outline: 0px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: 0.3s
    font-weight: normal;
    line-height:1.2;
    letter-spacing: 1px;
    color:white;
}

A.class2{
padding:8px 8px 8px 15px;
    text-decoration: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    display: block;
    background: #610603;
    border-bottom: solid;
    border-width:thin;
    border-color:#730C08;
    text-align: left;
    cursor: pointer;
    outline: 0px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: 0.3s
    font-weight: normal;
    line-height:1.2;
    letter-spacing: 1px;
   color:#CCB4B4;
}

A.class1:link {text-decoration: none; color: black;}
A.class1:hover {text-decoration: none; color: #7DCFD4;}
A.class1:active {text-decoration: none; color: red;}
A.class1:hover {background: #000000;}

A.class2:link {text-decoration: none; color: black;}
A.class2:hover {text-decoration: underline; color: 7DCFD4;}
A.class2:active {text-decoration: none; color: red;}
A.class2:hover {background: #000000;}
}

</style>

<div id="Name of Your Widget" class="sidebar-link">

</li>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:0px;margin-right:20px;margin-left:20px;font-family: 'Cuprum', sans-serif;color:#000000; padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-1</h2>


<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:10px;></i>class 1 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link</a>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:10px;margin-left:20px;margin-right:20px;font-family: 'Cuprum', sans-serif;color:#000000;padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-2 </h2>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-font-color:#ffffff;text-align:center;margin-top:10px;></i>class 2 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 2 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 2 Link</a>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:10px;margin-left:20px;margin-right:20px;font-family: 'Cuprum', sans-serif;color:#000000;padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-3 </h2>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:10px;></i>class 1 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link</a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link</a>

</li> </div> </div>

Beautiful Sidebar link list widget with different A-classs Effect for Bloggers with fa-fa font symbol..

Here is the code of Beautiful side bar link list widget with different A-class Effect with fa-fa font effect..

How to Add : Just add an html/javascript widget to your sidebar and copy and past the code given below in Codebox.

<div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

.sidebar-link {
    height: 100%;
    width: 80%;
    position: relative;
    z-index: 9;
    top: 0;
    left: 0;
    background: #58CCC6;
    overflow-x: hidden;
    padding-top:10px;
    padding-bottom:10px;
}

A.class1{
padding:8px 8px 8px 15px;
    text-decoration: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    display: block;
    background: #B03310;
    border-bottom: solid;
    border-width:thin;
    border-color:#A1180B;
    text-align: left;
    cursor: pointer;
    outline: 0px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: 0.3s
    font-weight: normal;
    line-height:1.2;
    letter-spacing: 1px;
    color:white;
}

A.class2{
padding:8px 8px 8px 15px;
    text-decoration: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 13.5px;
    display: block;
    background: #610603;
    border-bottom: solid;
    border-width:thin;
    border-color:#730C08;
    text-align: left;
    cursor: pointer;
    outline: 0px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: 0.3s
    font-weight: normal;
    line-height:1.2;
    letter-spacing: 1px;
   color:#CCB4B4;
}

A.class1:link {text-decoration: none; color: black;}
A.class1:hover {text-decoration: none; color: #7DCFD4;}
A.class1:active {text-decoration: none; color: red;}
A.class1:hover {background: #000000;}

A.class2:link {text-decoration: none; color: black;}
A.class2:hover {text-decoration: underline; color: 7DCFD4;}
A.class2:active {text-decoration: none; color: red;}
A.class2:hover {background: #000000;}
}

</style>

<div id="Name of Your Widget" class="sidebar-link">

</li>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:0px;margin-right:20px;margin-left:20px;font-family: 'Cuprum', sans-serif;color:#000000; padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-1</h2>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:10px;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:0px;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:0px;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:10px;margin-left:20px;margin-right:20px;font-family: 'Cuprum', sans-serif;color:#000000;padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-2 </h2>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-font-color:#ffffff;text-align:center;margin-top:10px;></i>class 2 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 2 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class2"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 2 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<h2 style="font-size:15px; line-height: 1;text-align:center;margin-top:10px;margin-left:20px;margin-right:20px;font-family: 'Cuprum', sans-serif;color:#000000;padding:8px 8px 8px 15px;border-bottom:1px solid #A69316;">Topic H2-3 </h2>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;margin-top:10px;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

<a href="https://testblog8020.blogspot.in/"class="class1"style=padding-left:3px;text-color:#000000;text-align:center;></i>class 1 Link<i class="fa fa-angle-double-right" aria-hidden="true"style= padding-left:10px;></i></a>

</li>
</div></div>