Yourtech3lper: Blogger tutorials

Showing posts with label Blogger tutorials. Show all posts

How to fix website not opening without www prefix from Blogger

By: Unknown on 11:43

There are many bloggers who have purchased domains for their blogs, but there is one big mistake they make unknowingly which results in making their regular followers get bit irritated. The problem I am talking about is general and might look stupid when I tell you the solution.

The problem many bloggers encounter is that they have the domain but their website doesn't open without the www prefix but will open if you type the whole web address. my-domain.com will not open unless you write it as www.my-domain.com.

Now let's talk about the easy peasy solution to this big problem. I assume that you would have already made changes in your domain's DNS settings like CNAME, A record, etc. and you might have also added a custom domain, i.e., your purchased domain in your Blogger's blog settings. But you forgot doing the following thing:

Go to Settings of your blog, the one which uses the custom domain.
Click on the Publishing tab, and click Edit.
Check mark the Redirect my-domain.com to www.my-domain.com. (Note: my-domain.com is just an example, in your case it should be your domain name.)

Done! Simple as that. Now enjoy 404 Error free browsing of your blog with www prefix problem solved.

For any assistance or help, buzz me on tech3lper@gmail.com

How to disable right click on website or Blogger

By: Unknown on 13:01

1. Log in to Blogger Dashboard, click on Layout then on Page Elements.

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

3. Select 'HTML/Javascript'.

4. Now copy the code below

<script language="JavaScript">

</script>

5. Paste the copied code in the 'HTML/Javascript' window.

6. Click Save.

For any query, mail me: tech3lper@gmail.com

Add Related post widget to blogger

By: Unknown on 12:04

Click on Add a gadget.

Choose HTML/Javascript from the list of widgets.

Now in the window copy and paste the following script:

relatedPostsWidget({

'loadingText':'loading...'

});</script>

And click Save.

If you want to add the above script to the posts of your blog then just copy and paste the script in the HTML tab of your post. The same related post will appear below or wherever you want them to appear.

Or if you don't want to do much then add a direct widget to your blogger using:

Option 1

Option 2

How to Find RSS Address on Blogger or website?

By: Unknown on 20:35

Open your website or the blog.
Right click the mouse and choose View page source or Page source, depending on the browser you're using you'll see the defined options.
Now when the new tab or window opens showing the html version, choose find option by pressing Ctrl-F on a PC, Command-F on a Mac.

Search rss+xml in the search box, once you find it you'll see the whole html line as: <link rel="alternate" type="application/rss+xml" title="Yourtech3lper - RSS" href= "http://yourblogname.blogspot.com/feeds/posts/default?alt=rss" />
The RSS feed's URL address is found between the quotes after href=. In this case, it would be: http://yourblogname.blogspot.com/feeds/posts/default?alt=rss

How to put jQuery slider in Blog or website?

By: Unknown on 23:57

Want the most effective and the simplest form of jQuery Responsive slider in your blog or website... well.. you came to the right place. Here I've a great jQuery Responsive slider which is easy to handle and easy to put anywhere in your blog or even your website.

Almost no knowledge of coding needed. Just copy and paste and do some tweaks and you're all set with a new jQuery slider to woo your readers and visitors.

Copy the code below:

Now, add a widget to your blogger blog from the layout area and open HTML or Javascipt space.
Paste the copied code in the area and click ok.
Rearrange the inserted widget to which ever place you want and view the blog for preview.
If you want to change the size of the slider then just change width and height size in the following code: position:relative;width:850px !important;height:280px
To change the images just upload your desired images to an image hosting website like imageshack.us and copy the links of the images and replace with the image links in the code like http://www.nosegraze.com/wp-content/uploads/2013/01/sins-and-needles-feature.jpg

Now to add this Nivo jQuery Responsive slider to your website copy the same code and paste it wherever you want it on your website. Do the same tweaks to modify the slider and you're ready with the slider.

Hope this short and sweet tutorial of inserting a jQuery responsive slider was helpful.

If you need any kind of help then do let me know!! Mail me:: tech3lper@gmail.com

How to change or remove label from blogger posts?

By: Unknown on 00:39

Changing the label name or removing the label name is darn easy and nothing complicated. just follow the simple steps I've provided with images on how you can go with it.

1. Go to the Posts tab for your blog.
2. Click on the All labels tab on the top right hand side.

3. Choose the label you want to remove.
4. Check the box below Showing posts filtered by label "Whatever your label is".

5. Click on the label tab beside Publish tab.
6. Drag down menu will appear showing the labels in your blog.

7. Now, as I selected iPhone backup as the label to be changed or removed from the posts I'll again click on iPhone backup from the drop down menu.

8. Blogger will take the action in consideration and do the processing as Saving...

9. Once the blog labels have been changed or removed it will confirm by showing another dialogue.

It is very easy to remove or change label names from blog posts, it doesn't need too much time neither. Just little modification and it removes the unwanted labels from your blogger.

If the post page reloads saying that the "whatever your label is" has been added to the posts then follow the tutorial from step no. 7. If you still face problem then contact me.

If that helped then do leave a feedback :)
Have a great day!!

How to make news feed to appear on blog or website?

By: Unknown on 22:35

You can make news from any website appear on your blog's or website's page or even as a blogger's widget anywhere you want.

Copy the script below and paste it before </head> tag of your website or the blog.

type="text/javascript"></script>

@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {

margin-top : 10px;

margin-left: auto;

margin-right: auto;

width : 440px;

font-size: 12px;

color: #9CADD0;

}

</style>

function load() {

var feed ="http://feeds.bbci.co.uk/news/world/rss.xml";

new GFdynamicFeedControl(feed, "feedControl");

}

google.load("feeds", "1");

google.setOnLoadCallback(load);

</script>

Now save your template and copy and paste the script below in the place where you want the news to appear.

<div id="feedControl">Loading...</div>

</div>

If you want to change the news feed from bbc to any other website then simple change the url http://feeds.bbci.co.uk/news/world/rss.xml to the desired news website's rss url.

If you need any other help let me know. Mail me:: tech3lper@gmail.com

How to add Meta Tags to Blogger posts?

By: Unknown on 19:23

1. Login to your blogger blog in dashboard, Go to the Design, backup your template by clicking download full template. and then click on Edit HTML.

2. Install title tags optimized

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:skin><![CDATA[/*

3. Add Meta tag Description and Meta Keywords

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Your home page description' name='description'/>
<meta content='your keywords, keywords1, keyword2' name='keywords'/>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='Description'/>
<meta expr:content='data:blog.pageName + ", your keywords, keywords1, keyword2 "' name='keywords'/>
</b:if>

4. Change The Blue Text To Your Own

5. Your Final code Should be like below

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Your home page description' name='description'/>
<meta content='your keywords, keywords1, keyword2' name='keywords'/>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='Description'/>
<meta expr:content='data:blog.pageName + ", your keywords, keywords1, keyword2 "' name='keywords'/>
</b:if>

<b:skin><![CDATA[/*

6. Do the following changes in the code to make it work for you:

Replace Your Blog URL with your blog: <b:if cond='data:blog.url == data:blog.homepageUrl'>
Replace Your home page description with your blog's description.
Write your keywords instead of your keywords, keywords1, keyword2

Save it. And you're done with adding meta tags to your blog posts. I would like to inform you that the above mentioned codes give you the liberty of adding meta tags to all posts but all the posts will be refering to the meta tags you have input in the above setup. Therefore, no separate tags for different posts. Your meta tags become universal by following the above method. And unfortunately there is no other method. :/

Have a good day!!

How to Change the Date of a Blog Post?

By: Unknown on 13:43

Steps are simple to change the date of any post you made on your blog.

Go to Posts tab of your blog.
Click on Edit below the post, whose date you want to change.
Under Post Settings on the right hand side of your post editor, click on Schedule.

After you click on Schedule, a drop down will appear stating Automatic and Set date and Time.
Select Set date and Time. Now here you can change the date of your post and then click Done.

And finally click the Update tab near your post's title area.

If any other help you need regarding anything then mail me: tech3lper@gmail.com

How to add Scroll to Top button in blogger

By: Unknown on 19:51

Log on your blogger account and Go to, Dashboard >> Layout >> Edit html.
Now find the following tag by using "Ctrl + F".

]]></b:skin>

Copy and Paste below code before the above tag.

#backtotop {

padding:5px;

position:fixed;

bottom: 5px;

right: 5px;

cursor:pointer;

}

Now find the </body> tag by using "Ctrl + F" and copy and paste below code before the </body> tag.

Now select your free back to top button in the below list and copy and paste it’s Image URL in to the place of "Image Url" of above code. After Replacing the Image URL, it should looks like this:

Find the <head> tag by using "Ctrl + F" and copy and paste below code after the <head> tag.

type='text/javascript'></script>

$(window).ready(function(){

$('#backtotop').click(function(e){

e.preventDefault();

$('html, body').animate({scrollTop:0}, 'slow');

});

</script>

Finally “Save Template".

How to create a full width page or a post in your blog?

By: Unknown on 13:12

Creating a full width blog page or a post is not at all difficult. All you have to do is follow these simple steps.

1. Go to your desired page or post, whose width you want should be full.
2. Click on the HTML tab above the post editor.
3. Include the following script anywhere in the HTML area:

<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
</style>

4. Replace width:98% according to your needs, you can even uses pixels instead of percentage i.e. 960px.
5. Click update or publish button.
6. View your page or the post and it shall have a wide and full width layout.

It's that simple! Why to make things complex when they're simple like making coffee.

For any queries write to me at yourtech3lper@gmail.com

How to make a photo gallery in a blog post or page?

By: Unknown on 00:01

Photo Gallery in a blog post? Yeah! You read it right. Here's a simple and easy way to create your own web photo gallery without having any technical knowledge.

Just follow these simple steps:

Create a new post. Click on "Insert Image" button from the pane above the post editor.
import the designated images.
After they're inserted in the post, select each image and choose the size to "small".
Go to HTML tab on the post editor, re-size the height of each image to 100 from the 133 and width to 180 from 200.
Now, go back to the Compose tab, you can see the size of images being reduced.
Now, in HTML tab again copy and paste the HTML code of the table from below:<table><tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
The above mentioned table html can be edited as per the columns and rows you wish to have in your photo gallery.
After inserting the table you will see just 100,200 and 300 written in your Compose area. Drag each image carefully near the 100, 200 and 300 respectively.
Then delete the numbers from the columns and you will see a well aligned row of images in your preview like the one below.