Sunday, June 7, 2015

How to install "Back to the Top" button

ht - arlinadesign
In the this post I'l show how to install smooth back top top button. This button is useful for visitors to go back on the content or the menu at the top briefly and coupled with attractive animation effects.
Different from the button back to top I've ever shared, this button using the image of rocket that slide with a touch animated fire effect when the button is clicked. 
For those who want to try it, please follow these steps: 

Open BloggerClick Template Edit HTML Find the code ]]></skin>  then copy the code below right before or above it

/* Back to Top Roket meluncur */
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url( 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url( 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

To be safe, save images in each directory:
2. Next, copy the code below shelf just above </body> tag

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>
3. JQuery
<script type='text/javascript'>
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,"px"}else"auto","10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});

4. Click Save and see result

Monday, June 1, 2015

How to Hide / Remove spam links from your blog's comment form

Fighting against comment spam is among the most frustrating job for a blogger, especially when you don’t have enough money to hire a comment moderator that trashes the spam comments while publishing all the useful comments to your blog. Obviously you don’t want to delete your all comments just for the sake of few spam ones? Since, Blogger doesn’t have a real-time comment spam detection plugin the reason why we have to implement some techniques to make sure that spam comments are staying away from our blogger site. Today, in this article, we will show you How to Automatically Remove Spam links from Blogger Comments.

Method # 1: Use CSS to Remove Spam Links From comments: 

These days search engines are smart and they know what you are referring is useful and what they should ignore. By removing spam links from comments with the help of CSS could not only hide those links but would stop search engines from indexing them too. So go to Blogger >> Template >> Edit HTML >> Search for Skin tag and just above it paste the following piece of code:

.comment-content a {
display: none;

Method #2: Use jQuery To Remove Links:

Some people might not recommend the above process they might argue that the spam link is still there, because we have just hide it with the help of a simple display:none; CSS. So go to Blogger >> Template >> Edit HTML >> Search for starting <body> tag and just below it paste the following piece of JavaScript code:

<!--Stop Blog Comments -->
<script>$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
<!--Stop Blog Comments -->

Once everything is done, Save the template and now you can sleep with worrying about comment spam. Whenever, a user will leave a link into his comments the link will be considered as spam and he the script will automatically remove it within seconds.