Computer Enter: below

Showing posts with label below. Show all posts

Friday, August 19, 2016

Add Flying Letters Below Mouse Pointer Animation

Heres how to add flying letters animation below the mouse pointer. With the Flying letters below the mouse, your blog gets a different look. These letters start flying when you move your mouse over your blog or website. Want throw in one extra design? then try this out.

Also Read: Sliding Recent Posts Widget For Blogger
Add Stylish Custom Search Box To Blogger
Recommended Post Slide Out Widget With Share Buttons

How to Add Flying Letters Below Mouse Pointer Animation

From your Blogger dashboard,
Goto Template
Click on Edit HTML
Click inside your template and search for this tag </body>
Copy this code and paste above the tag

<script type="text/javascript">
var text=&#39; ENTER YOUR TEXT HERE &#39;;
</script>
<script src="http://netoopscodes.googlecode.com/svn/branches/Js%20files/mousetail.js" type="text/javascript">
</script>

Replace the text in the code ENTER YOUR TEXT HERE with your desired text that is to be shown below the mouse pointer
Save your template.

Also Read: Most Commented Posts Widget For Blogger With Thumbnails
Link to This Post Widget For Blogger

Go to link download

Add Floating Social Share Buttons Below Blogger Post Title

Steps on How to Add Floating Social Share Buttons Below Blogger Post Title are given in this post. Including social media share buttons can help in boosting a blogs traffic because the post goes viral on these social bookmarking sites. Since this social share widget is a floating/sticky one, where its visible to all your readers as they scroll up and down, it makes it easier for them to share your blog post. Included on this social share widget are Facebook, Twitter, Pinterest and Google+ buttons. Follow the steps below to add one to your blog.

Also Read: Social Follow and Subscription Widget For Blogger
Facebook Popup Like Box With Timer For Blogger
Sliding Recent Posts Widget For Blogger

How to Add Floating Social Share Buttons Below Blogger Post Title

Click on Edit HTML
With ctrl+F keys, search for this tag </head>
Copy the code below and paste above </head>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/>

<script type=text/javascript>
//<![CDATA[
$(function() {
var $movesbuttons = $("#floating-social-buttons"),
$window = $(window),
offset = $movesbuttons.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$movesbuttons.css({position : fixed, width : 550px, top : 0px});
} else {
$movesbuttons.css({position : absolute, top : auto});
}
});
});
//]]>
</script>

Next, Search for ]]></b:skin> in your template.
Copy this code below and paste above ]]></b:skin>

#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 18px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}

For the last code below:

To place the floating share buttons below the post title,

Search for <div class=post-header>
Copy the code and paste below the second <div class=post-header> you find in your template.

Or to place the floating share buttons after the post title,

Search for <div class=post-header>
Copy the code and paste below the second <div class=post-footer> .

<b:if cond=data:blog.pageType == &quot;item&quot;>
<div style=padding:5px 0 35px 0;clear:both;>
<div id=floating-social-buttons>
<ul class=floating-social-buttons>

<li><iframe allowTransparency=true expr:src=&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot; frameborder=0 scrolling=no style=border:none; overflow:hidden; width:100px; height:25px;/></li>

<li><a class=twitter-share-button data-lang=en href=https://twitter.com/share>Tweet</a><script src=//platform.twitter.com/widgets.js type=text/javascript/></li>

<li><script src=http://apis.google.com/js/plusone.js type=text/javascript/><g:plusone expr:href=data:post.url size=medium/></li>

<li><a class=pin-it-button count-layout=horizontal expr:href=&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet style=margin:0 10px 5px 0;>Pin It</a> <script src=http://assets.pinterest.com/js/pinit.js type=text/javascript/></li>

</ul>
</div>
</div>
</b:if>

Save your template.

Go to link download

Friday, August 19, 2016

Add Flying Letters Below Mouse Pointer Animation

Add Flying Letters Below Mouse Pointer Animation

How to Add Flying Letters Below Mouse Pointer Animation

Thursday, August 18, 2016

Add Floating Social Share Buttons Below Blogger Post Title

Add Floating Social Share Buttons Below Blogger Post Title

How to Add Floating Social Share Buttons Below Blogger Post Title