You often want to make advertising exchanges for the links or add a list of important links and you want to make that list attractive to make the visitor visi

Loading ...

The road to success and the road to failure are almost exactly the same.

– Colin R. Davis

Blog Categories : Home - Web Widgets - Tips and Tricks - Reviews
×
Login Signup
Reviews Giveaways
Products Giveaways Android Apps Giveaways Our Software Giveaways Contests Extended Trials & Similar promo
Hot Deals Courses Search
How to Add a Beautiful list of links in your website

How to Add a Beautiful list of links in your website

Hello, You often want to make advertising exchanges for the links or add a list of important links and you want to make that list attractive to make the visitor visit those links, in this post, 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:

Preview

So if you like it and you want to add it just follow me, let's start

Step 1 : Go to  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>

Step 2: 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...


Share this :

Did you find this post useful?
100%
0%
Comments
There are no comment yet. Be the first.

We'll never share your email with anyone else.

}