Showing posts with label blogger tutorial and tricks. Show all posts
Showing posts with label blogger tutorial and tricks. Show all posts

Thursday, August 16, 2012

Characters Cannot be Used in Labels

Here's the characters that cannot be used in Blogger labels.

Labels are a way to easily categorize your posts. When you're writing a post, click Labels on the side and enter the labels you like, separating them with commas. Labels you've used before will show up below, and you can just click them to add them to the post.

When you publish your post, the labels will be listed with it. Clicking any of the labels will take you to a page containing only posts with that label.

Characters Cannot be Used in Labels
The following characters cannot be used in labels: &<>@!,
Share:

Saturday, May 12, 2012

CSS Trick Nothing can Copy on Your Blogger Site

Articles, content, images all contribute together in getting high organic traffics due to your lot of hard-word applied in creating that post article for your worthy readers, than comes another role of content scrappers copying your articles and getting higher in search engines.

Before you do this tricks we advice to back up your templates.

Make your Blogger Content Theft Free:

step 1. Log in to your blogger account and navigate to your blog > Template > Edit HTML.

step 2. Now make a search for ]]></b:skin> and paste the below code right above it.

.post-body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}

step 3. Now just hit Save Template and refresh your blog, now try to drag your content with your mouse and see you will not be able to select any text.
Share:

Blogger Newer Post and Oldest Post with Post titles

This tutorial explains how to display post titles instead of next and previous link navigation below posts.

Wordpress has the cool feature of showing up next and previous post titles at the bottom of the blog, but this feature was void for Blogger. Many webmaster have tried to bring up various tricks and hacks to try this feature for Blogger. But, many have failed to display it without any error. Today, I found an interesting tutorial on the blogosphere which works like a charm without any glitch. This hack is going to increase your readers to stay more on your blog.

see Demo here

Here is the tutorial from yabtb.blogspot.in. I thought of sharing this wonderful tutorial with my readers.

Before you do this just backup your blog template.

Step 1. Go to Blogger Dashboard > Select blog > Template > Edit HTML.

Step 2. Adding jQuery to Blogger HTML template
Important: Skip this procedure, if you have already implemented jQuery script to your Blogger HTML template.
Search(Ctrl+F) for:</head>

Just before or above </head> copy paste the following code:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Step 3. Adding the code which does the trick:
Search(Ctrl+F) </body>

and paste the following code just before/above </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if>


This is the Last step Adding CSS Code:
Learn how to add CSS from here. Search(Ctrl+F) for: ]]></b:skin>

Place the code just before or above ]]></b:skin>

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
Share:

Wednesday, April 18, 2012

Disable Right Click Photos - Cannot Save Pictures

Have you noticed, that some web sites do not allow their visitors using right mouse click while pointer is on the blog area. This option is useful for the site and blog owners, who want to minimize the possibilities of the content direct copying to other posts.

Right click on any internet browser is very important element and we must use it when it comes to copy or editing texts and etc. It�s very important when it comes to webmasters too. but some people may use it in a bad way, and you may want to make click right disabled on your blog. to protect you images

Here the very cool tips, I'll give you a simple way, without javascript or editing HTML code on your Blogger dashboard.

Standard image code sample:

<img src="http://yoursite.com/image.jpeg" />

Add this code after image URL
oncontextmenu="return false;"

Finally your code look like this
<img src="http://yoursite.com/image.jpeg" oncontextmenu="return false;" />
Share:

Friday, September 16, 2011

How To: Blogger Widget Tricks, Post page, Posts-Homepage-Archive

Selective Display of Blogger Widgets on Posts-Homepage-Archive ,post page, or particular pages.

Now go to "Edit HTML" page.
Mark "Expand Widget Templates"

And Search for

<b:widget id='HTML3' locked='false' title='Your Title name you gave to your widget' type='HTML'>

The number in red can be any like 1,2,3,4 it depends on your no of widget your are adding but the title to the widget you gave will be same.

So to make the widget code find easily for you find the below word

<b:widget id='HTML
and you will find many codes like these so keep on matchng the title name of widget of them to which you want to show on different pages.

A: To display the any Blogger widget only in HomePage

<b:widget id='HTML5' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Add the blue codes as shown above in codes whch you found for that particular widget in your blog html.

B: To display widget in all posts pages but not in HomePage

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

C: To Display Widget In Archive Pages

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

D: Displaying something on static pages only

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Hii this is a static page
</b:if>

E: Displaying something on all other than static pages

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Hii this is not a static page
</b:if>
Share:

Monday, August 15, 2011

google search engine optimization tricks

Many webmasters often have some basic SEO Questions that go unanswered or they just they get confused assuming SEO is an emerging thing & there are lots of resources found on web. All the SEO newbies who has SEO related doubts will get clear understanding reading this article.

Below are the basic SEO Tips that Google follows to optimize their websites like Youtube, Facebook etc...

a. Create unique & Accurate Page Titles - Page title is the first thing that every one notices after visiting your site.

b. Make proper use of the "description" meta tag - Google clearly states that Meta tags such as (Meta Description) is not dead! Meta description is nothing but describing our website concept in simple sentences with our targeted keywords so that Google identifies the topic of our website easily.

c. Improve the URL structure of your Site - Use words in your URL. - URLs with relevant words to your site's content and structure are friendlier for visitors navigating your site as well as to rank well. Avoid using lengthy URLs with session IDs and non-readable parameters.

d. Easy Navigation - Make your navigation as easy as possible for your users to surf from general content to the inner pages i.e., more specific content they want on your site.

e. Write genuine content and Provide Quality Services - Write easy-to-read text as readers enjoy content that is well written with sub-headings and easy to follow.

f. Use keyword rich anchor text - Always try to use descriptive anchor text as the text you use for a link should provide basic idea of what the page is linked to. Also use internal linking i.e., link between your old posts in a natural way so that it will be easier for Google to crawl your internal pages too.

g. Image Optimization - Use descriptive file names and alt-text for all images. Don't try to stuff keywords in the alt tag.

h. Make use of robots.txt file effectively- Robots.txt will help search robots what to consider and what not to consider indexing.

i. Use rel="nofollow" for links in required places - Placing rel="nofollow" for a link will tell Google that certain hyperlinks on your site should not be followed i.e., your page rank should not be passed to the pages you linked to. Use in places like blog comments, when linking to other sites etc...

j. Promote your website using Social Media - Off-line promotion like participating in social communities will make your blog more popular.

k. Webmaster tools - Google webmaster tools will help webmasters better control how Google interacts with their sites and get valuable information from Google about their site.

l. Make use of web analytics services - Use Web analytics to know the traffic status and other important areas to optimize for better visibility.
Share: