How to Add a Beautiful list of links in Blogger or Website

in this article, i will show you a beautiful list of links and how to add it in your blog but now let me show you a preview of this list:




So if you like it and you want to add it just follow me, let's start
Step 1 : Go to Blogger.com >> Layout >> Add HTML/JavaScript -- or any place you want in pages/Template/Article
and copy paste the code bellow
<style>
.linkswidgets4free{list-style:none;text-align:left}
.linkswidgets4free li{position:relative;background:#fff;color:#444;padding:0;margin:0;width:100%;transition:all .3s}
.linkswidgets4free li:hover {background:#fff;color:#cf4d35;}
.linkswidgets4free li:before{content:"";position:absolute;width:2px;height:100%;background:#4fafe9;;transition:all .2s ease-in-out;}
.linkswidgets4free li:hover:before {width:100%;}
.linkswidgets4free li a{margin-left:10px;padding:0 20px 0 0;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s}
.linkswidgets4free li a:hover {color:#fff;}
.linkswidgets4free li span{float:left;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;top:0;left:0;z-index:2}
.linkswidgets4free li:nth-child(1) span,.linkswidgets4free li:nth-child(1):before,.linkswidgets4free li:nth-child(7) span,.linkswidgets4free li:nth-child(7):before {background:#ca85ca;}
.linkswidgets4free li:nth-child(2) span,.linkswidgets4free li:nth-child(2):before,.linkswidgets4free li:nth-child(8) span,.linkswidgets4free li:nth-child(8):before {background:#e54e7e;}
.linkswidgets4free li:nth-child(3) span,.linkswidgets4free li:nth-child(3):before,.linkswidgets4free li:nth-child(9) span,.linkswidgets4free li:nth-child(9):before {background:#61c436;}
.linkswidgets4free li:nth-child(4) span,.linkswidgets4free li:nth-child(4):before,.linkswidgets4free li:nth-child(10) span,.linkswidgets4free li:nth-child(10):before {background:#f4b23f;}
.linkswidgets4free li:nth-child(5) span, .linkswidgets4free li:nth-child(5):before, .linkswidgets4free li:nth-child(11) span, .linkswidgets4free li:nth-child(11):before {background:#46c49c;}
.linkswidgets4free li:nth-child(6) span, .linkswidgets4free li:nth-child(6):before, .linkswidgets4free li:nth-child(12) span, .linkswidgets4free li:nth-child(12):before {background:#607ec7;}

</style>
<ul class="linkswidgets4free">
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
<li>
<a href='#'>Link 4</a>
</li>
<li>
<a href='#'>Link 5</a>
</li>
<li>
<a href='#'>Link 6</a>
</li>
</ul>

now you have to change the links text and URL:
<li>
<a href='#'>Link 1</a>
</li>
Change The Yellow with you Link and The Red with your Link Title or Text.
If you want to add more links just copy paste the code bellow before the </ul> tag(The Last Line)
<li>
<a href='URL_HERE'>Link Text</a>
</li>
That's all, if you have any question just comment this post and we will answer you quickly...
Tags: