Tags: Blogger Tricks / Tutorials

How to Embed Google Maps in Blogger

- 21 Comments

Adding a Map to your company/business website can help your visitors to easily understand where this business is located or where this event takes place. Because when it comes to online business, you have to let your customers and visitors know about your business location. So, why not assist them to easily find your location by adding Google Maps to your website. Google Maps is the most flexible and reliable map. It provides you two options for your map i.e. simple or satellite, choose the one, that you think is better for you. It also provides you high resolution images from all over the world. Easy and flexible directions will help you everywhere whether you are on a bicycle or a car. Another great advantage provided by Google maps is the street view where one can easily navigate through the streets and see real architectures. So, today in this tutorial, we'll show you that How to Embed Google Maps in Blogger.

How to Embed Google Maps in Blogger

First of all go to this page https://maps.google.com/, by using the Search Box search for your location. For example, I am located in Canada so I would type "Canada" (You can also add more details like your area or building number).

After entering your location, you will be able to see your location map. Now choose whether you want a simple view or a satellite view.
After making all the customization that you like. Its time to embed this map to your blog. To embed this map, first click the Gear icon at the bottom of that page and click Share and Embed Map option.

A popup will open containing two options one for sharing and the other is Embed Map option. Click Embed Map, now you'll be able to see the code, copy that code, and paste it where where you want to show the map, a sidebar, post or on a separate page.

Embed this Map to your Blogger Blog
Now sign in to your Blogger Account >> Pages >> Create a New Page >> Switch to HTML Tab and paste the copied code. Hit the Publish button and you're done.

From Editors Desk

We hope this tutorial may have helped you in learning How to Embed Google Maps in Blogger. Share it with your friends and don't forget to subscribe us!

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

- 30 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.