Tags: Blogger Tricks / CSS Tricks

Add Hover Effect to Your Header Image in Blogger

- 2 Comments

If you're a blogger then you might have seen these gorgeous header hover effect on many blogs and wonder "How do they do that". Don't worry, today we'll teach you how! This effect works on both header text and image. We've created this effect using some simple CSS transitions and it is entirely based on CSS. This effect works on mouseover, on moving you mouse cursor on header image, the image will move to right side with a beautiful transition and zoom effect. Before adding this effect to your blog, have a look on how it works. Click the demo button below:

Demo

How to Add Hover Effect to your Blogger Blog Header

First and foremost log in to your Blogger Account >> Select a Blog >> Template and Click Edit HTML button. Now click inside the template code area, use Ctrl+F to search and search for the following tag

]]></b:skin>

Now add the below code just above/before it (]]></b:skin> tag)

/*CSS Trick By http://www.blogolect.com Starts*/
#header-inner{
-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
#header-inner:hover{
margin-left:50px;
-webkit-transform: scale(0.95,0.95);
-moz-transform: scale(0.95,0.95);
-o-transform: scale(0.95,0.95);
-ms-transform: scale(0.95,0.95);
transform: scale(0.95,0.95);
-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
}
/*CSS Trick By http://www.blogolect.com Ends*/

Click the Save Template button and you're done!
Congratulations: You've successfully add hover effect to your blogger blog header.
Note: To share this trick on your blog, please link back to us!

From Editors Desk

We hope that this may have helped you in learning How to Add Hover Effect to your Blogger Blog Header. If you want more cool CSS tricks then subscribe us and receive all updates directly in to your inbox. We'll code some more new CSS tricks in the upcoming days. Stay Tuned!

How to Create 3D Rolling Link Effect Using CSS in Blogger

- 1 Comment

Everything is possible with the power of CSS. You can do whatever you want using CSS. While customizing your template or adding effects to blog elements, everything you do for beautifying your blog is based on CSS and today we are also going to share a beautiful CSS effect known as 3D Rolling Link Effect. I hope that you'll love it and this effect will make your blog different and unique from other blogs. So without any further delay let’s install this 3D Rolling Link Effect. All you need is just to add the CSS code first and then the HTML for that link. See how it looks and play with it on jsfiddle.net, hove the text in the results section to see how it looks.

Create 3D Rolling Link Effect Using CSS in Blogger

First and foremost log in to your Blogger Account >> Select your Blog >> Template >> click Edit HTML >> click inside the code area and use Ctrl+F to search and search for the following tag

]]></b:skin>

Now copy the below code and paste it just above/before it (]]></b:skin> tag)

.bgt-roll-link {
    color: #2aa4cf;
    text-decoration: none;
    font-weight:bold;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;

    -webkit-perspective: 600px;
       -moz-perspective: 600px;
       -ms-perspective: 600px;
       perspective: 600px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
       -ms-perspective-origin: 50% 50%;
       perspective-origin: 50% 50%;
}
.bgt-roll-link:hover {text-decoration:none; color: #2aa4cf; font-weight:bold;}
.bgt-roll-link span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
       -ms-transition: all 300ms ease;
       transition: all 300ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
       -ms-transform-origin: 50% 0%;
       transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
       transform-style: preserve-3d;
}
.bgt-roll-link:hover span {
        background: #2aa4cf;

        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

.bgt-roll-link span:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    color: #fff;
    background: #2aa4cf;

    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    a.roll-link:link, a.roll-link:visited{color:red;}
}

Hit the Save Template button. Now the HTML, copy the HTML code below and paste it where you want to use this effect.

<a class="bgt-roll-link" href="http://blogolect.com/"><span data-title="Blogolect - All About Blogging">Blogolect - All About Blogging</span></a>

Customization:

Replace Blogolect - All About Blogging and Blogolect - All About Blogging with your Link text.

Replace http://blogolect.com/ with your Link.

To use this link effect in your blogger blog posts, switch your post editor to HTML mode and add the above HTML code where you want to use it.
Congratulations: You've successfully added this 3D Rolling Link Effect to your blog.

From Editors Desk

We hope this tutorial may have helped you in creating a 3D Rolling Link Effect for your Blog. Share this post with your friends and don't forget to subscribe us. Got a Question? Let us know in the comments section below.

Tags: Blogger Tricks / Plugins / Widgets

Add Pinterest Pin It Official Image Hover Button to Blogger

- 7 Comments

If you're a blogger, you might have noticed the "Pin It" buttons that appears on mouseover. Pinning an image is now easier due to these buttons. These hover buttons make it easy for your blog visitors to pin your image to their Pinterest boards.When you move your mouse cursor over an image on a blog, a Pinterest logo pops up with a Pin It text prompting you to “Pin” the image to your Pinterest boards. The person who pressed the Pin It button can now see that image on their dashboard and it also link back to your blog. I find pinterest a great way for generating traffic to my blog and i also recommend you to add this button to your blog. Pinterest has its own official "Pin it" hover button which you can add to your blog/website and today in this tutorial we'll show you that How to Add Pinterest Pin It Official Image Hover Button to Blogger.

Add Pinterest Pin It Official Button to Blogger

How to Add Pinterest Pin It Official Image Hover Button to Blogger

First and foremost log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and use Ctrl+F to search a code and search for the following tag.

</body>

Now copy (Ctrl+C) the below script and paste (Ctrl+V) it just above/before the </body> tag

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Hit the Save Template button and you're done.

From Editors Desk

We hope this tutorial may have helped you in learning How to Add Pinterest Pin It Official Image Hover Button to Blogger. Share this post with your friends and don't forget to subscribe us.

Tags: Blogger Tricks

How to Replace Home, Older Posts and Newer Posts Links with Images

- No Comments

You may have seen home, older posts and newer posts links at the bottom of your website/blog homepage. These buttons/links are used for navigation. They help your visitors to navigate through your older/newer posts. This is a great tool/element for your visitors. By default, these links only show a simple text. But except the default simple text, you might wanna make these buttons more visible and eye catching, by changing their colors, effects and replacing them with eye catching images/icons. So, that your visitors will easily find your navigation, they will click on them, and will be dragged into the maze of your Blog posts. So, today in this article we'll show you that How to Replace Home, Older Posts and Newer Posts Links with Images.

How to Replace Home, Older Posts and Newer Posts Links with Images

Step 1. Log in to your Blogger Account >> Go to Template and click Edit HTML
Step 2. Click inside the code area and use Ctrl+F to search, search for <data:newerPageTitle/> and replace it with the following code

<img src="NEWER POSTS IMAGE URL ADDRESS"/>

Step 3. Replace NEWER POSTS IMAGE URL ADDRESS with the URL of your newer posts image (Image for newer posts link)
Step 4. Now search for <data:olderPageTitle/> and replace it with the following code

<img src="OLDER POSTS IMAGE URL ADDRESS"/>

Step 5. Replace OLDER POSTS IMAGE URL ADDRESS with the URL of your newer posts
image (Image for older posts link)
Step 6. Now search for <data:homeMsg/> and replace it with the following code

<img src="HOMEPAGE IMAGE URL ADDRESS"/>

Step 7. Replace HOMEPAGE IMAGE URL ADDRESS with the URL of your newer posts image (Image for home page link)
Step 8. Hit the Save Template button
And you're done :)

Update (Icons Set)

Move your mouse cursor on the image, press right click button >> Select Copy Image Location from the list to get the image URL.

From Editors Desk

We hope this tutorial may have helped you in learning How to Replace Home, Older Posts and Newer Posts Links with Images. Share this post with your friends and don't forget to subscribe us. Got a Question? Ask us in the comments section below!

Tags: Blogger Tricks / CSS Tricks / jQuery

How to Add Turn Off Lights Video Effect in Blogger

- 3 Comments

You might have seen Turn Off the Lights effect on some top video blogs. Turn Off the Lights effect is created with the help of jQuery and it is used make the background darkish while watching a video online. On clicking Turn off the Lights the whole page darkens except the video and let you watch video as if you are in the cinema. Again on clicking Turn on the Lights will switch the background to normal. This effect is great for those people having a video blog, in a way that nothing will distract your visitors while watching a video. Today. in this article we'll show you that How to Add Turn Off Lights Video Effect in Blogger. Just follow these simple steps to add this effect to your blog.

Add Turn Off Lights Video Effect in Blogger

Step 1. Log in to your Blogger Account >> Select a Blog and go to Template >> Edit HTML >> Search for the </head> tag and add the following script just above/before it

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Step 2. Again Search for the ]]></b:skin> and add the following code above it

/* Turn off Lights
-------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Vr9n3cerwmKWQblfB0niBM10mU4GQOcrUjVogCuBiFJ46x6svtrv3RBHIYKiE_0rwka0zXhrnpJkzuHp_FXNDANbUl4rj9qdZs8rucdwFrCmxpc2bwmosdClf6kiVvXSDBuweWCsyWrQ/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhBF6E_BIU45l-2NVsml7HH4xQOHktqo5Rj1eD3mb-AKVvMHxJNHKG0xEKdNYPkbCDbqvcUq2r2ukcp98K2Wd3M3Pl8SvD_e_i9gZ42Q4CCpAQ174P0qbl16ySpYrJ-SxZ807CTxwslC62/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Step 3. Now search for the </body> tag and add the following code above it

<div id='lightsoff'/>

Step 4. Click the Save Template button and you're done.
Now wherever you want to add the video use the below code and replace Your-Video-Here with the embed code of your video. To add this video in a post, go to Post Editor, click on HTML Tab and use the below code for adding the video

<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a>
</div>
<div id="lightsVideo">
Your-Video-Here
</div>
</center>

Congratulations: You've successfully added Turn off Lights Video effect to your blog.

From Editors Desk

We hope this tutorial may have helped you in learning How to Add Turn Off Lights Video Effect in Blogger. Share this post with your friends and don't forget to subscribe us. Got a Question? Ask us in comments!

Tags: Blogger Tricks / Buttons / CSS Tricks

How to Add a Spoiler or Hide/Show Button in Blogger

- 31 Comments

Impressing you visitors is important for driving more traffic to your blog. Everybody knows that content is the king and its important to write good and interesting content. You can also impress your visitors by adding special effects to your blog posts and today we're going to share one of them. This effect is known as spoiler or hide/show effect. This effect displays a button with text, clicking it will expand the content and on clicking it again will hide the content. It uses a simple script and you can use it anywhere. You can hide whatever you want an image, code, text etc. So today in this tutorial we'll learn that How to Add Spoiler or Hide/Show Button in Blogger. See it in action, click the button below :-

How to Add Spoiler or Hide/Show Button in Blogger

Adding this button/spoiler to a blogger post is extremely easy, simply Copy (Ctrl+C) the below code >> In the blogger post editor click on HTML tab and Paste (CTRL+V) it where you want to add this button.

<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>

Customization:
Replace ADD YOUR HIDDEN CONTENT HERE with the content that you want to show on click
You can also replace button text i.e Show/Hide
That's it, you're done.

From Editors Desk

We hope this article has helped you in learning How to Add Spoiler or Hide/Show Button in Blogger. Share it with your friends and don't forget to subscribe us :-)

Tags: Blogger Tricks / Tutorials

Add Attribution Links to Copied Text from your Blog

- 1 Comment

Many popular and new blogs are using simple scripts in their blogs that automatically adds attribution links to copied text from their blog. This is a great way for securing your content from stealers. There are many online services available that helps you in adding attribution links to copied text from your blog. Recently one of our users asked us about adding attribution links to copied text. So, today in this tutorial we'll show you that How to Add Attribution Links to Copied Text from your Blog. In this method all you've to do is to just add a JavaScript to your blog and after that when someone copies content from your blog, it'll automatically add attribution links to copied text. We hope that this article might would help you in securing your content.

Add Attribution Links to Copied Text from your Blog

Step 1. Log in to your Blogger Account
Step 2. Select a Blog >> Go to Template >> click Edit HTML and search (Ctrl+F) for the </head> tag
Step 3. Now Copy (Ctrl+C) the below code and Paste (Ctrl+V) it just above/before it

<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Read More at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright © Blogolect"; // You can Replace this with your own text
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}
document.oncopy = addLink;
</script>

Note: You can change the highlighted text with your preferred text
Step 4. Hit the Save Template button
And you're done!

From Editors Desk

We hope this tutorial may have helped you in learning How to Add Attribution Links to Copied Text from your Blog. Share this post with your friends and don't forget to subscribe us.

Tags: Beginner's Guide / Blogger Tricks / Tutorials

How to Block AdBlocker on your Blogger Blog

- 3 Comments

AdBlocker is a browser extension, available on all major browsers and it is used to block advertisements and pop ups shown on websites. Advertisements annoys each and every visitor of our blog, especially pop ups. AdBlocker is useful to stay away from those annoying and disgusting ads, but this extension is a roadblock in the path of a blogger. Due to this extension visitors don't reach ads and it effects the earning of bloggers. AdBlockers totally affect life of bloggers who want to make money from there blogs. It also reduces CPM, CPC and other rates which you use to generate your revenue. There are two ways that you can use to block AdBlockers, the first one is to ask your readers to remove AdBlocker extension and the other one is that, force them to remove AdBlocker. If thousands of people visits your blog daily then it is impossible to ask each of them to remove AdBlocker extension which means that we have to force them to remove AdBlocker. So, today in this tutorial we'll show you that How to Block AdBlocker on your Blogger Blog.

How to Block AdBlocker on your Blogger Blog

Step 1. Log in to your Blogger Account
Step 2. Select a Blog >> Template >> Edit HTML >> Search for the ]]></b:skin> tag and above/before it paste the following code

#bgt_noadblocker {
display:none;
}

Step 3. Again Search for </head> and paste the below code just above/before it

     <script type="text/javascript">
    if (document.getElementById("bgt_noadblocker") != undefined)
    {
    }
    else
    {
        alert("We've detected that you're using AdBlock Plus or some other adblocking software. In order to keep this website free, this site is sponsored in part by advertisements.\r\nPlease consider disabling your ad blocker on this website\r\nif you enjoyed the content, and would like to support future \r\ninformative posts.Thank you!\r\n\r\nClick OK to continue\r\n\r\nPowered by www.blogolect.com...");
            setTimeout("nag()",12000);
    }
    </script>

Step 4. Now Search for <body> and just below/after it paste the following code

<script type="text/javascript" src="http://ftp.bauer-power.net/misc/tc/advertisement.js"></script>

Step 5. Hit the Save Template button and you're done!
Now if any visitor with AdBlocker enabled visit your site will face an annoying message, he will get this message until he disables AdBlocker.

From Editors Desk

We hope this tutorial may have helped you in learning How to Block AdBlocker on your Blogger Blog. Share this tutorial with your friends and don't forget to subscribe us.

Tags: Beginner's Guide / Blogger Tricks

How to Remove Locked Widgets in Blogger

- No Comments

Have you ever used a blogger template consisting of widgets that are irremovable? Blogger is a flexible platform and you can easily do whatever you want. One if its feature is that you can upload your custom templates to make your blog friendly and beautiful. There are thousands of free and paid templates available on the web, which you can use for your blog. Usually all the widgets in blogger are removable, you can easily add or remove widgets. But have you ever noticed that sometimes after uploading a custom template, some widgets are locked in the layout section and you can't remove them, just like header and blog posts widget. You're unable to delete these widgets because these widgets are locked. Recently one of our users asked us that How to Remove Locked Widgets in Blogger. So today in this tutorial we'll show you that How to Remove Locked Widgets in Blogger.

How to Remove Locked Widgets in Blogger

Step 1. Log in to your Blogger Account >> Select a Blog
Step 2. Go to Template >> Backup your Template >> Edit HTML >> Jump to Widget and choose the widget which you want to remove (Note: Read the 2nd part of this article to learn how to find a widget in HTML Editor)
Step 3. You'll be jumped to that widget's coding. In your widget's coding you'll see locked=true if that widget is locked

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>

Step 4. Replace true with false and hit Save Template button

<b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar'>

Step 5. Now go to Layout >> Click Edit on that widget >> Click Remove button at the bottom
And you're done!

How to find Widget Code in Template Editor

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout and locate the widget

Step 3. Hit the Edit button below that widget a popup window will open

Step 4. In the URL of that popup which would somewhat looks like this

https://www.blogger.com/rearrange?blogID=5715141813565760436&action=editWidget&sectionId=sidebar-right-1&widgetType=null&widgetId=HTML10

Step 5. The widget Id of that widget is just after widgetId= which is HTML10.
Now go to Template >> Edit HTML >> Jump to Widget and Select the widget with Exact ID

From Editors Desk

We hope this tutorial may have helped you in learning How to Remove Locked Widgets in Blogger. Share this tutorial with your friends and don't forget to subscribe us.
If you're still confused then ask your question in the comments section below.