Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts

Sunday, 11 August 2013

Add Labnol like Social Subscribe Buttons in Blogger

Labnol Social Subscribe Buttons
Everyone knows that Labnol is most popular tech blog. All the widgets are officially created by Amit Agarwal. One of those gadgets is Social Subscribe buttons. These buttons are very lovely. Get the code here.
              
These buttons are with hover effect and are made with CSS and HTML. These buttons are modern in style and free of cost. To get this gadget you have came to correct place. Also Subscribe Us! for latest updates.

Features :
  • Customization available.
  • This gadget is free of cost.
  • Easy and fast to navigate.
  • In modern style.
  • With hover effect.
Don't Miss: Labnol Like Blogger Blog Template

Add this Gadget :
  • First you have to open Blogger in your favorite browser. When it opens, directly click on Layout option from the homepage.
  • When layout opens, simply click on Add a Gadget option.
Add a Gadget option

  • When it open, scroll down to HTML/JavaScript and click on it.

HTML/JavaScript option

  • Now, paste the CSS and HTML code in that area and after that click on Save button.
      Copy below CSS and HTML code of Labnol Buttons.

     
If you have any kind of problem or suggestion about this article, please tell us by comments. You can also contact us. Also Share it with your friends. Don't forget to Subscribe Us!

Saturday, 1 June 2013

Add awesome Auto Scrollbar Widget into your Blogger Template

Generally we use Back-to-top widget to make easy to go to top. But This features work only for to go top. But I have designed a widget which will help you to scroll to top, bottom and even you can set as auto scroll option. After hit on auto scroll option your blog will be scroll down slowly and a readers can easily read the blog without manually use of mouse wheel. So I think this widget will make your browser more user friendly and your visitors will love to use it. OK let's go to tutorial that how to add this widget into your template.



Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on ->Template -> Edit HTML

Step 3 Now Find this code </body>  by pressing  Ctrl + F

Step 4 Paste the below code  Before/above </body>

<!--Auto Blog Scroll Widget by www.bloggerspice.com Starts-->
<style>
#bsautoscroll{position:fixed;z-index:9999;bottom:0;right:0}
#bsautoscroll a{display:block;float:left;background-color:#CC0099;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lsJoDOnZZTR73fjL5IgpSNzpm7LJD2TZRHtbJeOP_aQr1akHcoLJ2wjJuVlc1vbG-wizhZajT8dZ5vJQEUAeYQLbZF8F6BAFSQ-SJtneGzbIks2_sgcJOx6RdxCBve4j24Hd9MjyBnUF/s1600/BS+Auto+Scroll.png);width:36px;height:36px;text-indent:-999em}
#bsautoscroll a.bsup{background-position:0 -36px}
#bsautoscroll a.bsdown{background-position:0 -72px}
#bsautoscroll a.bsbottom{background-position:0 -108px}
#bsautoscroll a.bsautoscroll{background-position:0 -144px}
#bsautoscroll a.bsstop{background-position:0 -180px}
#bsautoscroll a:hover{background-color:#8E006B}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout(&#39;autoScroll()&#39;,50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='bsautoscroll'>
<a class='bstop' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='bsup' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='bsdown' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='bsbottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='bsautoscroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='bsstop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>
<!-- End of Auto Blog Scroll Widget by- http://www.bloggerspice.com -->

Customization


  • Alter left to right for aligning the widget into right side
  • Change CC0099 with different color code to change the background.

Stunning Latest Comment Box Widget with Rounded Avatar

Hi friend I have just designed a new stunning latest comment box widget with rounded Avatar which is unique. I have added hover effect on message of commentators and rounded avatar at the left site of the widget. You will also see the blocked name of the commentator. Hope this comment widget will help to display your latest comment with different flavor. You can add this latest comment widget on black or white color background. But one thing you have to remember that if you want to set this comment on your blog sidebar or footer that must be 320px wide otherwise it won't match with the gadget. So kindly use this comment box on 320px wide sidebar or footer bar. 


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScriptGadget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.


<style>
ul.bloggerspiceRC{list-style:none;margin-top: 10px;;padding:0}
.bloggerspiceRC li {
background: none repeat scroll 0 0 transparent !important;
clear: both;
display: block;
list-style: none outside none;
margin: 0 !important;
overflow: hidden;
padding: 0 0 4px !important;
position: relative;
}
.bloggerspiceRC li a {
background: none repeat scroll 0 0 #E60066;
color: #FFFFFF;
float: left;
font: 12px Arial;
margin-top: 10px;
padding: 25px 10px 5px;
width: 200px;
}
.bloggerspiceRC li a:hover{background:#A10048}
.bloggerspiceRC li .avatarImage {
float: left;
margin: 0 0 0 5px;
overflow: hidden;
position: relative;
}
.avatarRound {
background: none repeat scroll 0 0 white;
border: 1px solid #CC0099;
border-radius: 49px;
height: 50px;width: 50px;}
.bloggerspiceRC li img{padding:0;position:relative;overflow:hidden;display:block}
.bloggerspiceRC li span {
background: none repeat scroll 0 0 #47006B;
color: #FEFEFE;
display: inherit;
float: left;
font: 12px Trebuchet MS;
padding: 5px;
position: absolute;
left: 55px;
top: 5px;
}
.bloggerspiceRC span{display:none}
/*Comment widget by www.bloggerspice.com  */
</style>
<div class='widget-content'>
<script type='text/javascript'>//<![CDATA[
function bloggerspiceRC(e){var t;t='<ul class="bloggerspiceRC">';for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+="<li>";var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel=="alternate"){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf("/s1600/")!=-1){s=s.replace("/s1600/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s220/")!=-1){s=s.replace("/s220/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s512-c/")!=-1&&s.indexOf("http:")!=0){s="http:"+s.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(s.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvzdESgT7tNhq6Fus0Ii-yIs6VzClBVteWCFk1X4kcm49IuESXiuLM-0xdxhMfcMAgO46i76M1oQGdRC8iiB2QG8R0by_0wpmzjgsz6jVQYj9ALjpqg9Jhj6ZQEe15admAth4Cp3LJhg_/s320/BS+blogger+logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerm24uOH-0Pe7cdoRSB4k4XJHxxA_29Hk7Jl0ruV3gVjgZDQxKSS25f4WimLAzL56es5sJI4KCDxRLG_14cSQd9ib0R8r_fG9OIz_7heK8Ql6Tw2ZyE8jAUKTWnJZjxJ-qryJnYnHqUv3/s320/BS+openid+logo.png"}else if(s.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){s=defaultAvatar+"&s="+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o="avatarRound"}else{o=""}t+='<div class="avatarImage '+o+'"><img class="'+o+'" src="'+s+'" alt="'+i+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}t+="<span>"+i+"</span>";var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,"");if(c!=""&&c.length>characters){c=c.substring(0,characters);c+="&#8230;"}else{c=c}t+='<a href="'+r+'">'+c+"</a>";t+="</li>"}t+="";document.write(t)}var numComments=numComments||8,avatarSize=avatarSize||34,characters=characters||26,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnW50NcjGV1KnaFykXbnT3PjRtsKlSPtJn2Cyhc-RfgNKLsZz_Z8Dt-GYZGNxWvn7n2cyGhCPAo2CmzlA3GJGlaI9L3A0sX8OXu5EBT3EcuxgeMBlEutfnrKJx8uFm3dUDQ8fJoD5Du9YH/s320/BS+avatar.png",showAvatar="undefined"===typeof showAvatar?!0:showAvatar,roundAvatar="undefined"===typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"===typeof hideCredits?!1:roundAvatar
//]]></script>
<script type="text/javascript" src="http://www.kbtricks.com/feeds/comments/default?alt=json&callback=bloggerspiceRC&max-results=5"></script>
</div>

Customization


  • Change kbtricks.com with your blog address. 
  • Change 5 to show how many comments you wants to add.
  • Alter height: 50px; width: 50px;to change the image height and width.

Floating Social Media Slide out Widget

Floating social media slide out stick to right site of your blogger template. When you mouse over then you will see a slide out option. This widget has created completely with CSS and when you scroll down then the widget will also scroll down up to edge of your footer bar. Due to mass use of JavaScript a widget become heavy to load so now bloggers are grooming the coding and tend to use CSS. For this reason I have used CSS instead of Java Script which will helps to load the widget fast as well as use moz transition effect which help to add ease in out effect on this widget and also added tool tip features on it. Hope this widget will help your visitors to increase connectivity with your social media sites.



Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScriptGadget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.


<style type='text/css'>
.bloggerspiceFSS a, .slider-tooltip p{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.slideshow-chunk>div{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.bloggerspiceFSS{height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px}
.bloggerspiceFSS a{display:block;margin-left:133px;width:19px;height:20px;position:absolute;top:0;right:0;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;line-height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hS_xP5VZmCkPJOeCJSPfbJHD-XgTwKliRDNrH2pO_sPqdMe8R1WMf8W1_GTPKGt7xCrqlEIzlEdhJl06OXlc9TjoNFsHJ-Xf-69vphGn3CziDAUXXZNcNr1EAq8k22NZYcLRRgzjrQRi/s320/BS+FSS.png) no-repeat;overflow:hidden}
.bloggerspiceFSS a span{min-width: 152px;padding: 2px;display:block;visibility:hidden;min-width:152px}
.bloggerspiceFSS a:hover{min-width:133px;padding-left:25px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
.bloggerspiceFSS a:hover span{visibility:visible;position:absolute;top:0;left:25px}
.bloggerspiceFSS a.BSfacebook{background-position:3px -15px;top:20px;background-color:#526ca5}
.bloggerspiceFSS a.BStwitter{background-position:3px -36px;top:40px;background-color:#75ddfe}
.bloggerspiceFSS a.BSrss{background-position:3px -55px;top:60px;background-color:#f6a858}
.bloggerspiceFSS a.BSmail{background-position:3px -75px;top:80px;background-color:#c1c1c2}
.bloggerspiceFSS a.BSfacebook:hover{background-color:#526ca5;background-position:5px -15px}
.bloggerspiceFSS a.BStwitter:hover{background-color:#75ddfe;background-position:5px -36px}
.bloggerspiceFSS a.BSmail:hover{background-color:#c1c1c2;background-position:5px -75px}
.bloggerspiceFSS a.BSrss:hover{background-color:#f6a858;background-position:5px -55px}
.bloggerspiceFSS a.BSfacebook:active{background-color:#294a90}
.bloggerspiceFSS a.BStwitter:active{background-color:#40b5fe}
.bloggerspiceFSS a.BSmail:active{background-color:#909090}.bloggerspiceFSS a.BSrss:active{background-color:#f37526}                                                                                                                                  /*widget by www.bloggerspice.com */
</style>
<div class='bloggerspiceFSS'> <a class='BSfacebook' href='https://www.facebook.com/KBTricks' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Facebook&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Facebook'><span>Join Us on Facebook</span></a> <a class='BStwitter' href='https://twitter.com/kbtricks' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Twitter&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Twitter'><span>Tweet Us On Twitter</span></a> <a class='BSrss' href='/feeds/posts/default' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;RSS&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-follow&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='RSS Feed'><span>Visit Our rss feed</span></a> <a class='BSmail' href='mailto:boparae97@gmail.com' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Email&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-email&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Email'><span>Newsletter</span></a></div>


Customization 


  • Replace KBTricks with your Facebook and Twitter User name or ID
  • Replace boparae97@gmail.com with your email address.

New Cartoon Character Set Widget To Design Your Blog Footer

After releasing first Girl's Cartoon character set to tailor blog footer I got many email and comments about the widget. And many of my loyal readers demanding for boy Cartoon character set, so due to mass demand of Cartoon Character on blogger footer I have designed another stunning Cartoon character set which is really awesome. Those who wants to promote their blog by using Cartoon character they can use this widget. It will make your blog attractive and your readers will engage with your blog for longer time. I have designed this widget for Black footer so those who use blogger template with black or dark footer color then this widget will be best fit for their template. If you like this widget kindly join with our Facebook Fan page to get more exciting widget regularly. And kindly give me your valuable feedback to improve this widget for future. So let's proceed to install it by following simple steps.



Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.


<div class='widget-content'>
<style>
#BSFooter{
border-top:5px solid #c0c0c8;
padding:50px 0 10px 0;
float:left;
width:100%;
clear:both;
display:inline;
color:#565656;
font-family:verdana,sans-serif;
font-size:15px;
}
#BS-Footer{
float:left;
display:block;
margin-bottom:0px;
}
#BS-Footer li{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlDjLHqBHc18eKhg_9FU8F45cGtLq6l6IfQ8waDXP5C42Nj4k-UECQLn9P6XEh7EWz-MAPhR-3tjIz-eREp_zrjNVfmNCKo4Y1myX7WAK1PBW20mJikr0Q0w03cZZTXCRPmXRgjpH2rvTG/s400/BS+Footer+Featured+Backgroung+BloggerSpice.png) no-repeat 0 0;
width:185px;
padding:0 5px;
float:left;
display:inline;
margin-left:5px;
text-align:center;
}
#BS-Footer li:hover{
background-position:0 -180px;
}
#BS-Footer li:first-child{
margin-left:0;
}
#BS-Footer li a{
font-size:12px;
color:#777;
display:block;
padding-top:85px;
height:90px;
text-shadow:#222 0 -1px 0;
}
#BS-Footer li a:hover{
color:#999;
}
#BS-Footer li a img{
margin-top:-184px;
margin-bottom:10px;
display:block;
}
#BS-Footer li a br{
display:none;
}
#BS-Footer li a strong{
color:#fff;
display:block;
width:200px;
height:20px;
text-indent:-9000px;opacity:.7;
-webkit-transition:opacity .2s linear;
}
#BS-Footer li a:hover strong{
opacity:1;
}
/*------Widget by www.bloggerspice.com-----*/
</style>
<div id='BSFooter'>
<ul id='BS-Footer'>
<li><a href='http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html'>
<img alt='Learn More About Blogger Spice' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiOGypbsbgyZ70kOxvRFSGbykfQddyCELLMnRiP-sKo4sQyWWYzd9G_2H40LZUkXVAQvcNObaEzYkvr4dx6q7RkXRfWeKy80pUWrnnnl3je_njsmCkzZVb58TSs6XajhNh530NiAzc5ROC/s320/BS+About+Us.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfdf8f-Mwl_N7RYDIyPAYWdV0OaEs0xClSXNnUC15aXV8C-Do8Q0i3Vtls04parQrC6EVQekmFZJcdHO5oTs09CD0S1CIaOIDMVpbVRXi3sSVNAr8tqJ75DAq4GcnKVHE0LTXidCw5mI_p/s320/About+Us.png);'>About Us</strong>
<br/>
Learn more about This Site!</a></li>
<li><a href='http://www.bloggerspice.com/p/a.html'>
<img alt='Advertise' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcLKGNugGOjBD6-4uJA8ScCEz6x4Ta43v9VGMJ0agQBtDQRV923YcnlH24HFixxl2UhyphenhyphenHLTTAaMQKQ0iz-LtWEpzVCTgNzBv85lkc9onvZ6kpgYbx39XCmXvxhpDOIB7598poFsF9gGv_/s320/BS+Advertise+Here.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7yRTa46WPx4G5Dxq1VUgdX5VyDrRW2eLqzTVRoVb6RzYRCrOi-Pm7Nxa9Cs2RL_SHjGfo9tgjaLo1sDD4XVxEINKvrBLoudP1ELW03GIYuxX-6635RS61X56tnIbn9dVLJkmePRT4Kcr/s320/Advertise.png);'>Advertise</strong>
<br/>
Want To Advertise Here!</a></li>
<li><a href='http://www.bloggerspice.com/p/blog-page_1.html'>
<img alt='Resources' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_3GxVi_zWoWDwYNspKaRv0u0f-IdmkHTXyHRtioXeD8KPG_h14m8mqhg7Cjlqd-XOGZgNVv1xcmaqM2BkX2ZU17sro2suKDLvDCVZ3qGX-68ofZ1akxtuAGEYlJBkEHke6-Duo_TYK3PX/s320/BS+Need+Help.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb63mmaXz9rAE7i_GoIhLrj0XFHOq6hnl2YVrEnhOrcRnmGoEfmM9rQL2fYZC9NujtdbE41CMRXQHhJuDYalTK8J1jWcp-HZrsbVsnZ7gFQVhi9fxWFttuKB_FEICwG-b3QUz2IEWiwLHb/s320/Need+Help.png);'>Need Help</strong>
<br/>
Need Help For Your Blog</a></li>
<li><a href='http://www.bloggerspice.com/p/write-for-us-guest-post-for-blogger.html'>
<img alt='Write For Us' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvks7BNl8C-58-jniHbZeoV63jhyphenhyphen-hVTpoM2_4jjGTp0I8wxz4ulEKD4WyqoGochE5X16EcRTE77rT_cTPmPdHp-VwliPv9NZ6qu0INo_GRL5oJwha8EvzYU5WW-Zpav0lFNrd-XEh6NK/s320/BS+Write+For+Us.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcjC-FdCZLF_t_jP7RJA7RERCm_aBj8aLLyEf_TaqoOpexv6LshMUpYQ85E8VM2FAmVVZ9AlBLDrx5LjLg9ynV-ueEDHc1dzBFTdqAlSE3TAzol6QX0mLbtIkyFXBzYeteU0b1bC2WscW/s320/write+for+us.png);'>Write For Us</strong>
<br/>
Be Our Guest Published</a></li>
<li><a href='http://www.bloggerspice.com/p/blog-page_9.html'>
<img alt='Contact Us' height='198' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6O13vwPoVO34e_qcYulcbhQdQ878-Rte0X-Af950nmCmdYWgc8-YoN3XUEtUZwADxa6ivpZabkAVB_7sow952Jiw0JXQkVQtXtzQO-TQJzOPiWe1RgnsbFujjC8h200U2nT_-RWh9__Xs/s320/BS+Contact+Us.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI5SgRdUfekmFDBE2r37xjgVrNs3YXeamdJIezPBavjjQr9CZUKmapEbFaB5AZnT0PB9BXstx6Fj-pNOVlfLSl63w0qxZ5UXlWv_iAQ15IiVo2AumzlfA2yqWq3ej3lrYB8N3c1Zq-bMi1/s320/Contact+Us.png);'>Contact Us</strong>
<br/>
Want To Interact With Admin</a></li>
</ul></div>
</div>
<div class='clear'></div>


Customization 

  • Change Green Highlighted color with your own link Location.