“Follow me - Static Custom Social Link Box” with Smooth Jquery Hover Effect for blogger, is another cool widget I made, when I needed a dock from where you can quickly and easily redirect to any of my social profiles and my personal website. I was inspired by classic twitter static badge that is commonly seen on sides of some blogs. However, I added a function when you hover your mouse over the badge a box will uncover a fancy menu.
Installation and customization of this widget is a bit more difficult than my previous one because it requires some editing, but don’t worry guys if you have some question feel free to contact me. I planning to create a more customizable version of this widget, where you will be able to custom make your own widget through generator, but for now we use this plain method.
Installation:
Step 1: Adding Jquery JavaScript Plugin (Ignore this step if your blog have already a Jquery Plugin)
Go to Blogger Dashboard < Template tab > Edit Html
Search for </head> tag
Add below shown code Before </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script>Save the template.
Step 2: Adding Widget Style Code
Go to Blogger Dashboard < Layout tab > click Add Gadget > and select HTML/JavaScript
A “Configure HTML/JavaScript” window will pop out. Leave the title empty and copy bellow code to content section.
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".followme").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-46"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.followme{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo9ulK9tu-AjYn-hzc52xv-2jVkrchxMuVtCx3bz2qHCZyh0IsybDYvCEeHG7HGOVL0u03OnB_ILtAyyKN1-N0Y9lTcEeJ6PKbqXWtYHT1xStHxswUfLmV8uT76agL8tySd5-D0h4Aizc/s1600/followLccc.png") no-repeat scroll right top transparent !important;
display: block;
float: left;
padding: 0 30px 0 0px;
width: 46px;
z-index: 99999;
position:fixed;
left:-46px;
top:194px;
}
.followme div{border:none;position:relative;display:block;}
.followme span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position:
absolute;right: 7px;text-align: right;z-index: 99999;}
.followme span a{color: gray;text-decoration:none;}
.followme span a:hover{text-decoration:underline;}
#fwslot{
height:263px;
background:#FFFFFF;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-bottomright: 7px;
-khtml-border-bottom-right-radius: 7px;
-o-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
}
#security{
display: block;
padding: 9px;
margin: 0px;
}
#icons ul {
list-style: none;
clear: none;
padding: 2px;
margin: 0px;}
#icons ul li {
display: inline;
background:none;
margin:0;
padding:0px;
}
#icons ul li a {
display: block;
width:42px;
height:42px;
margin-left:0;
border:none;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWH5sZJs_oQIw2rOQrt4dfZ1yq-5EyXNuzUCJ9vulMQdZEC4QWTFMcF-Ni_XFiN-IFh_SuDS4eYdnai9Fe3BLictlpILpozg2SwdgkquU5wZ309ByiUOhjhegf3p0bbx1NqBzhycanlM/s1600/paternTransparent.png') ;
background-repeat: no-repeat;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#icons ul li a.home {background-position: -42px -0px;}
#icons ul li a.home:hover {background-position: -0px -0px;}
#icons ul li a.vimeo {background-position: -42px -42px;}
#icons ul li a.vimeo:hover {background-position: -0px -42px;}
#icons ul li a.youtube {background-position: -42px -84px;}
#icons ul li a.youtube:hover{background-position: -0px -84px;}
#icons ul li a.facebook {background-position: -42px -126px;}
#icons ul li a.facebook:hover {background-position:-0px -126px;}
#icons ul li a.linkedin {background-position: -42px -168px;}
#icons ul li a.linkedin:hover {background-position: -0px -168px;}
#icons ul li a.twitter {background-position: -42px -210px;}
#icons ul li a.twitter:hover {background-position:-0px -210px;}
</style>
This code applies the style and behaviour of the widget. Now we have to actually utilize the code which will show the widget on screen.
Step 4: Adding Widget Code
For that copy the bellow code and place it straight after ”</style>” command in to the same “Configure HTML/JavaScript” window.
<script <div class="followme" style=""> <div id="fwslot"> <b:if cond='data:blog.pageType == "item"'> <div id="icons"> <ul> <li><a class="home" href=" HERE INSERT YOUR HOME PAGE PROFILE LINK " target="_blank" title="Visit my Personal Portfolio"></a></li> <li><a class="vimeo" href=" HERE INSERT YOUR VIMEO PROFILE LINK " target="_blank" title="Visit my Vimeo profile"></a></li> <li><a class="youtube" href=" HERE INSERT YOUR YOUTUBE PROFILE LINK" target="_blank" title="Visit my YouTube profile"></a></li> <li><a class="facebook" href=" HERE INSERT YOUR FACEBOOK PROFILE LINK " target="_blank" title="Visit my Facebook profile"></a></li> <li><a class="linkedin" href=" HERE INSERT YOUR LINKEDIN PROFILE LINK " target="_blank" title="Visit my LinkedIn profile"></a></li> <li><a class="twitter" href=" HERE INSERT YOUR TWITTER PROFILE LINK "_blank" title="Visit my Twitter profile"></a></li> </ul> </div> </b:if> <div id="security"> <a href="http://marekslovak.blogspot.co.uk/" target="_blank" title="Marek Slovak Blog"><span style="color: #444840;">by MareQ</span></a> </div> </div> </div>
Now the tricky part:
Step 5: Customizing the widget
To customize the widged you have to modify the code you used in Step 4.
To change buttons link you have to replace “HERE INSERT YOUR ****** PROFILE LINK “with your correspondent profile links inside the code in Step 4 (highlighted with red color).
If you desire to use fewer buttons than are in the actual widget, for instance you decided to use “Home page, Vimeo, YouTube and Facebook” and want to delete the LinkedIn and Twitter, you have to delete the code starting with <li>...(here is the code that represent that particular button ).... and ending with that correspondent</li>.In our case we would delete this code:
<li><a class="linkedin" href=" HERE INSERT YOUR LINKEDIN PROFILE LINK " target="_blank" title="Visit my LinkedIn profile"></a></li>
<li><a class="twitter" href=" HERE INSERT YOUR TWITTER PROFILE LINK "_blank" title="Visit my Twitter profile"></a></li>
If you decided to delete any of the buttons you have to make last easy adjustment.
Locate the bellow shown code in the widget part, you entered in Step 3
#fwslot{
height:263px;
If you deleted one button then change the height value to 222px.
If you deleted two buttons then change the height value to 180px.
If you deleted three buttons then change the height value to 138px.
If you deleted four buttons then change the height value to 119px.
That’s it for now; you learned a bit of editing, I hope you liked it.
Enjoy your newly installed widget.
And don’t forget to click like and share.
No comments:
Post a Comment