Redirect BlogSpot Website To Another URL

Redirection can occur anytime, it could be due to some code problem or shifting purpose or anything so if you are one of them who want to Redirect their domain to another URL then this guide is just for you.

Follow the below steps .:

1. Open blogger.com and then go to Design Tab.

2. Now click on Edit HTML and then Search for <head> tag.


3. After you are their where the <head> tag is copy below code and paste it right below the <head> tag.

<meta name="robots" content="noindex" /><script type="text/javascript"><!--//--><![CDATA[//><!--
var url = "Enter Destination URL"
(document.images) ? location.replace(url) : location.href = url;
//--><!]]></script>
<meta http-equiv="refresh" content="0;URL=Enter Destination URL " />

4. After you had pasted the above code now find <body> tag and paste the below code right below it.

<p><a href="Enter Destination URL"></a>.</p>

5. Now change the code in purple with the exact URL you wanna redirect too and that’s it.

6. Now the last step is too hit the Save Template Button and see the changes.

How To Use Images For List Bullet Points On Your Blog

Add Image Bullet Points To Your Blog

For Wordpress or other platforms paste the Css code in your style sheet and add the class to the list html in the same way.

Add The Css To Blogger

Step 1. Copy the Css code below for the Bullet Image you want to use from below.On Blogger you add it via the template designer by going to Design > Template Designer > Advanced > Add Css as shown below, remember to click apply to blog to save.





Use Your Own Image - Replace IMAGE-URL-HERE with an image around 12x12px.

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('IMAGE-URL-HERE');
}

Ready To Use Images - These have the image shown already included.

Green Tic Bullet 1

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuT4gRQQXRcLpDkjjKha7MpZbLFiIW9wbsHdhCQfSE2ks5TtxxzAKW9shBdXfu1i-yctuG9y2PuZ9uVQEkYEF3ODA4sEjkzuBwnH-gp_ZQaGQceuRzr2pl3Kz2wSQv0DfkaL6o5fcokT-d/s1600/bullet-point-green-tick.png');
}

Green Tick Bullet 2.

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Qk2iPsTX-4amidAFC8YOhxiyrqofKuv8ImKQmrPE-Q3B-u-lC2ouglAaK7tL0vuJmVdEt8Lo2wEjw1kHKcRsHvm7oRW59Krsga4o3rGPx9Z7iEL_a25uh3d_UDyfJuCOR_xuoKV17E25/s1600/bullet-point-image-6.gif');
}

Maroon Arrow Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCRRLRJRSuS6xfXKvVYovV_z_fKzWaIErZbiFfnR88LqFrvrCi5su8lmHrD1hf-Qn847VBPcbZA7UwwmXJNdwpAHDXY6xdZtPnZlcC4n3WQczdmPM4KpUwIup9ZIjZ9doZI84skysx_V3X/s1600/bullet-point-image-1.png');
}

Flower Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC10QYlb1_uqLXyWscDI6wnXsguIoOePhyBdACfPRUj-cfJJ-WCAvR1Va3DMakeein2zjeWRfgmsEJ8Z8VN_TcbH5n7ZkGxxZ4zAqquUux5UbYqK7PEf3r8SLjaXUzSMbVYuyscyPmxGcX/s1600/bullet-point-image-4.jpg');
}

Orange Double Arrow Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3PDJIsbQXZYJVFhndVzaA9SG3EWjgVn9DWFw_yy24GaSqkW6BisFKvfBwA8sTN5tOZ0HS6rvTpz-EgBroet5rvAso0KbRe6eu1O2sSciWctPR0LCU3EVTrYa9qW_K67XTBTnbKxA2Nuya/s1600/bullet-point-image-5.gif');
}

Yellow Tick Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Qk2iPsTX-4amidAFC8YOhxiyrqofKuv8ImKQmrPE-Q3B-u-lC2ouglAaK7tL0vuJmVdEt8Lo2wEjw1kHKcRsHvm7oRW59Krsga4o3rGPx9Z7iEL_a25uh3d_UDyfJuCOR_xuoKV17E25/s1600/bullet-point-image-6.gif');
}

Blue Plus Bullet point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpjT1jbowSZ8WzUApkSbZiNW7-PeWwo9Ze3_OtZZ0yqixVaS6_Ly8JSZ4Fa125jqNwv69_lo3stHyQvMg-4UBIWZAa2dEPjle0aPd13XZNCT5DC7w3pAdXaI94G8273WAH4epRq1o81hyphenhyphen1/s1600/bullet-point-image-8.png');
}

Orange Dimond Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Opvqbny7zRKYI0zzYhLqAPi7BE0AfqgkgNdUeLH0dbCrr79SpQamZKZrRqhwmTJHzyyt0AFCopIyqDeYFIwGGkEZmenWpjzCnAqw-xCzLMDb73tMqV6Qtm3yZCulJnWVaQcRzrPm4pqi/s1600/bullet-point-image-9.gif');
}

Double Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmLfbhoJSI9w0l7fjQJpInUA-lLE8WFNiZeZgRwYDD8vjfDYdsFPzIwgWUPyhnQkNCDiEtf75Fz5yw2gTEmq6hyphenhyphenAxPZqKFgWACx7iJjZ-6BQC7eAW32q0Nr-Q1hoZ2IpUlr-377-SLk5pM/s1600/bullet-point-image-10.gif');
}

Simple Circle Bullet Point

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3jd7UOMtRi1iqKtGdbidPJHyFkD9b02teayvjtWjWVbunKZS_Rn3eP8cmJIEwCTS-xzUAJJUAEB9LOqxPcVhGpQlA9hT04Ze1ZTxkmrDM0HoHW9qBV7umn4fCjRTJBjNor8DgdMCxoGDA/s1600/circle-bullet-point-image.png');
}

Thats the Css, We now have to add a class to the lists we want to use images on.

When you create an unordered list this is the code you use :

<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>

We simply add class='imglist' to the ul tag like this :

<ul class="imglist">
<li>Item One</li>
<li>Item Two</li>
</ul>

Host your Image on Blogger for Free with Unlimited Bandwidth

Hosting your Images on Blogger with Unlimited Bandwidth for Free!. There are so many Free image hosting sites online.Some of the most popular sites include Imageshack, Photobucket, Tinypic, Flicker, Picasa, etc.. But they all have Limited Features, Like a Limited number of uploads, Image size Limits, Less Speed and especially bandwidth limits. Here, we are on the blogger platform, Blogger give free image hosting with unlimited bandwidth. All we need to know is how to upload the images to blogger.But some Bloggers are facing problems while getting the hotlink image URL to their images.This tutorial covers image uploads and will also be useful for some of my upcoming Great Tutorials.

How to Host your Image on Blogger?

Step 1: Login to Blogger Dashboard > Click on NEWPOST button
Step 2: Click the Compose tab --> Click on Insert Image icon()
Step 3: Click the Choose Files button
Step 4: Select the Files and Click the Open Button
Wait for a while till the image is finished uploading.
Step 5: Select the Uploaded image and Click the Add Selected button.
Step 6: Click on the Edit HTML tab
Step 7: you will see the two image Urls, but u pick Original image Url after the href tag.

Use the image any where you want with unlimited bandwidth.
If you upload the two or more images at once you will get the urls after the href tag, but make sure the image name is different!
This is a small tutorial about Blogger images upload and in upcoming tutorial i will give you the Most wanted tips and tricks about blogger images, those are very simple and every Blogger should must know it.

The New Share This Bookmarking Buttons With Share Count For Blogger

 Share This is a very popular service offering multiple
Social Bookmarking Widgets for blogs and websites.The green Share This icon is a familiar sight on many of the top blogs opening up a wide range of options for readers to Bookmark and share the content.In this post i have a Blogger Tip show you how to add the new Share This 'Oath' Counter Buttons to various positions on your blog.You can see the buttons in question to the top of this paragraph and that position will be one of the options for your blog.

To generate the buttons you will need to go to the Share This website and use their very easy generator process.

Add The New Share This Counter Buttons To Your Blog

 

Add The Share This Script

When you have chosen your buttons you will be presented with two snippets of code.The top snippet is for the actual buttons and we will need that later now we will add the second snippet of code to your template.This code only needs to be added once and will allow all the buttons to work.

Step 1. In your Blogger dashboard click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code )

</head>

Step 3. Copy and paste the second snippet of code from Share This directly above </head> then save your template.

That's the script added, how easy was that.

Add The Counter Buttons Buttons To Your Blog

So i will show you how to add the buttons to various positions on your blog.Namely horizontally above your posts (Below the post title), Vertically At the top of your posts wrapped in text and horizontally below your posts.You can also add them to a Html/Javascript gadget in your sidebar.

For all positions you need to go your your blogs html, that's Design > Edit Html > and tick the Expand widget templates box.

Horizontally Above Posts

Find This Code and paste the button code directly below it, save and that's it !

<div class='post-header-line-1'/>

Horizontally Below Posts

Find this code and paste the code below it, save and once again that's it !

<div class='post-footer'>

Wrapped In Text At The Top Left Or Right Of Posts

For this there is a little extra work, we need to set the buttons to sit on the left or right and we need them to be vertical.To do this i have added code to put them on the left, you will also need to add the line break tag between each button.

To add the line break you add <br/> between the code for each button.So in your button code after every instance of </span> you add <br/> to look like the example below :

<span class='st_twitter_hcount' displayText='Tweet'></span><br/><span class='st_facebook_hcount' displayText='Facebook'></span><br/><span class='st_friendfeed_hcount' displayText='FriendFeed'></span><br/><span class='st_blogger_hcount' displayText='Blogger'></span><br/><span class='st_sharethis_hcount' displayText='ShareThis'></span><br/>

First we find the position in your template for your buttons, once again we are clicking Design > Edit Html > And Tick The Expand Widget Templates Box.

Find the following code in your blogs Html :

<data:post.body/>

Next we add the following code directly Above <data:post.body/>

<div style="float: left; margin-right:5px;">

! Button Code Here !

</div>

-Replace ! Button Code Here ! with the code for your buttons.
-To have the buttons on the right change left and right to right and left.

jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger

A Floating back to top button.Since then i have wanted to cover a more up to date back to top modern button.The popular option when it comes to scroll top buttons is to use jQuery for two reasons.Firstly with jQuery you can have the button hidden until the page is scrolled, secondly when clicked the page scrolls smoothly to the top instead of the direct jump a regular link would have.So that's exactly what i have in this tutorial.We will add a button that will only be visible when the reader starts scrolling and then when they click it the page slowly scrolls up easing into position at the top.For the button itself we us a sprite to create a hover effect sprites also keep the page load time down.

 

Smooth Scroll jQuery Back To Top button

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code )

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;

right:10px;

overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg92jQwzClMdAEVW0krpQ4kj9TK06fOTlh6_Lz5zoeSrwku8PtzPjFJuxljxtPxLcj-AzlkHLbxWw0GwQY8DSvWpBBXQq4y2EQHtSXI0Ii5bvZm2MrgeUCjEHRe9Qe9ZnOeAedeyisuWzY/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg92jQwzClMdAEVW0krpQ4kj9TK06fOTlh6_Lz5zoeSrwku8PtzPjFJuxljxtPxLcj-AzlkHLbxWw0GwQY8DSvWpBBXQq4y2EQHtSXI0Ii5bvZm2MrgeUCjEHRe9Qe9ZnOeAedeyisuWzY/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

Note - To move the button to the left of your blog change right:10px; to left:10px; .

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

Note - If you have previously added jQuery script to your template you can leave out the line in green.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script src='http://spiceupyourblogextras.googlecode.com/files/easing.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});
</script>

Step 6. Save your template.

That's it, You can check out your new back to top button after you Comment on and Share this post ! Make sure to check out more of our Blogger Tips.

Add Cool CSS Letter Spacing Text to Blogger

How To Add Cool CSS Letter Spacing Text to Blogger : 

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<p style="letter-spacing:5px;">Your Text Here</p>

Note: Replace Your Text Here with your text

4. Now Click on Save "Html Java Script" and You are done..
Cheers..

How to Change Cursor in Blogger Website

Cursor can play very important part in customizing your Blogger Website well after templating everything from posts to ads its time to customize the Cursor. Well the trick I will tell will help you to change your cursor @ any time by just uploading a image file and changing the links weather you want to write your own name on cursor or want to put a Heart for a loved one its your choice so follow the below guide and have FUN.

Follow the Below Steps to Change Cursor Shape :

1. You need to go to www.Blogger.com
2. Sign in with your Blogger account
3. Go to Dashboard than Design
4. Open Edit HTML
5. Click download template so that you have a backup for that template.
6. Now click ctrl + f to open the search feature
7. Search for </head> tag
8. Now paste the below <script> right above </head> tag

<style type='text/css'>body, a, a:hover {cursor: url(http://safir85.ucoz.com/bdlab-blogspot/COOL_GREEN_POINTER.cur), progress;}</style>

9. After pasting just click Save Template.Enjoy This Cursor Changing Trick.

Customization Part : As in the above <Script> Section you can see the .cur URL which is grabbing your new cursor from that URL now if you want to change your cursor than juts change that URL with another one and that’s it your cursor is changed again.