Loading ...

If you really look closely, most overnight successes took a long time.

– Steve Jobs

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

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:


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

.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;}

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

now you have to change the links text and URL:

<a href='#'>Link 1</a>

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)

<a href='URL_HERE'>Link Text</a>

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?
There are no comment yet. Be the first.

We'll never share your email with anyone else.