Youtube Android,Blogging SEO & Whatsapp Tricks: Blogger Tricks

Showing posts with label Blogger Tricks. Show all posts

How To Remove Auto Read More Option From Blogger

How to remove auto read more feature from blogger’s blog?

Remove Auto Read more feature from your BlogSpot blog. Manage your blog as you want as we know blogger is most popular blogging service provider we are all thanks full for Google blogger service its make blogging very easy. By using of blogger blog you can publish you blog you don’t need to have extra knowledge of java html or any web development skill.

www.vktechzone.com wants to help to all new blogger who start blogging but they need some help to improve their blog traffic or design.

What is auto read more feature?

Auto read more is automatic feature that make post summary and show in page for read full post you need to click that post this feature is good feature for manage blog easily but some time we don’t want to use this feature. So you can remove this feature.

Why we need remove auto read more feature?

As we know in online market many blogger template are available for use but maximum template come with auto read more feature and you don’t want to break post and you want to show continue post in single page so don’t worry you can remove this auto read more feature.

How to remove auto read more?

Follow Below step

Note:

Go to your blogger Template option >> Click Edit HTML option.

Now find the below code it will be you find after <div class='post-body entry-content'>code.
Find Below given code

Note: some part of the code can be different, according to your template. But you can find this code easily.

Now replace above code with below Code.

Now Save your Template. Your have done it

Now Refresh and Check your site auto read more option has removed from your template.

Incoming keywords

remove read more blogger template

June 25, 2015 Blogger Tricks

Add Back To Top Button in Blogger With Smooth Scrolling

Forget old way pressing scrolling button for go to the top and it’s take time to reach to top add new smooth back to top button it’s very cool widget for blogger or webpage suppose your webpage is very long and user wants to go in the top of the page it’s a best way to adding a smooth scrolling button for again go to the top.

How to add back to top smooth button

Follow Below steps for Add Back to top buttong for blogger

Go to Blogger
Take Backup of your Blog Template
Search For <head>
Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog

Add Below JQuery inside the head tag only if yet you are not using Jquery script in your blog

Now Add Below Given Code in your blog by add a widget option

Copy and Past Below Code in Your Blog

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dzI2r6m1BYVz5Weu5N3tvNdzf3Gvlwzht9MKPHomD2lEuX6gdrGAcNInR6MPmfZmeq2Cto0ANatQ9oxIWtv9saD-HvIqJRcDoOCGkGem7LyY_urw1eei8kSLJC0G8M8DnLNHVJdI_80c/s1600/back+to+top+.png" alt="Back to Top" / ></a>

Note:-

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dzI2r6m1BYVz5Weu5N3tvNdzf3Gvlwzht9MKPHomD2lEuX6gdrGAcNInR6MPmfZmeq2Cto0ANatQ9oxIWtv9saD-HvIqJRcDoOCGkGem7LyY_urw1eei8kSLJC0G8M8DnLNHVJdI_80c/s1600/back+to+top+.png

How to Add Html/Java widget? Follow below steps to add Widget

Go to Blogger
Go to your blog Layout option.
Now Select Add a Gadget option.
Now select Html/Java Script option
Now past the above code in Content area field and press save button.

Know more About How to add Gadget In blogger

Click Above Image for Live Demo

June 25, 2015 Blogger Tricks , Widgets

How to show Adsense ads inside the post in blogger

Increase Adsense earning by showing ads middle in inside the post by adding ad code manually you can show ad but what happen when you want to make some change in post ad it’s very difficult to change in all post ads one by one. Don’t worry friends today in this post I’m going to tell you a trick to show adsense ads inside the post by using this trick you can remove or change ads by making one change in html template.

How to Add Adsense ads inside the post

For show adsense ad or any other ads in blogger blog post follow below steps.

1st add  comment code in your post by HTML section where you want to show this ads our script automatic will replace  with your Adsense ad script or with other script you want to use.

Now we need to add some code in blogger template.

Note:- Before change in Template get a backup of your template.

For change in template Go to Template> HTML editor

Press CTR+F and Find <data:post.body/> you will find this several time in template replace second number of <data:post.body/> with below given code if it not working by replacing second number this so undo this and try with 3rd and again it not working again undo this and try this with 4th number <data:post.body/> why we try this with all <data:post.body/> because all blogger templates source code structure is different.

Copy Below code and use

</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Note Replace  with you adsense ads code in html encode format use below tool for convert code in encode form.
HTML Encoder Converter Now when you create new a post add  tag inside the HTML section add anywhere in post where you want to show Google Adsense Ads middle of post below of post or where you want see below example screenshot.

Example how to write post in HTML section

June 14, 2015 Blogger Tricks

Blogger Conditional tags for show hide widgets

Use Blogger condition if else tag for show or hide widgets in your selected pages like post Archive Page or particular selected URL what this condition tag mean it mean b if condition this tag we use many time in our blogger template you can manage your blog as you want you can choose which widget in which page need to show this tag is very useful adjust widget according to device you can show special widget in mobile page below we have many conditional tags.

How to show Widgets only on Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Put Widget code here
</b:if>

How to Hide Widgets onliy in Homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Put Widget code here
</b:if>

How to Show Widgets only in Index

<b:if cond='data:blog.pageType == "index"'>
Put Widget code here
</b:if>

How to Hide Widgets only in Index

<b:if cond='data:blog.pageType != "index"'>
WIDGET CODE GOES HERE
</b:if>

How to Show Widgets only in Static Page

<b:if cond='data:blog.pageType == "static_page"'>
Put Widget code here
</b:if>

How to HIde Widgets only in Static Page

<b:if cond='data:blog.pageType != "static_page"'>
WIDGET CODE GOES HERE
</b:if>

How to show widgets only in Post Page

<b:if cond='data:blog.pageType == "item"'>
Put Widget code here
</b:if>

How to Hide widgets only in Post Page

<b:if cond='data:blog.pageType != "item"'>
Put Widget code here
</b:if>

How to Show Gadgets only in Specific Page/Url

<b:if cond='data:blog.url == "URL OF Selected Post"'>
Put Widget code here
</b:if>

How to Hide widgets only in Specific Page/Url

<b:if cond='data:blog.url != "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>

How to show widgets only Post and Static Pages

<b:if cond='data:blog.url == data:post.url'>
Put Widget code here
</b:if>

Show widgets in Label Search

<b:if cond='data:blog.searchLabel'>
Put Widget code here
</b:if>

How to show in Archive Page

<b:if cond='data:blog.pageType == "archive"'>
Put Widget code here
</b:if>

How Show to widget only in First Post

<b:if cond='data:post.isFirstPost'>
Put Widget code here
</b:if>

Conditional Tag for Error page

<b:if cond='data:blog.pageType == "ERROR_PAGE"'>
Put Widget code here
</b:if>

Show widget Mobile

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>
Put Widget code here
</b:if>

Hide widget in mobile

<b:if cond='data:blog.pageType != "data:blog.isMobile"'>
Put Widget code here
</b:if>

Apply two condition use <b:else/> tag

<b:if cond='data:blog.url == data:blog.homepageUrl'>
If condition is true.
<b:else/>
If condition is false.
</b:if>

How to apply this codes in already showing widgets

Go to html Edit option find widget by title name as I'm searching sponsor widget see below demo image and apply any above given condition as i'm using in below image.

February 25, 2015 Blogger Tricks

Check any blogger blog total post or comments numbers

Know any blogger blog total post and comments number by using below given tool enters ULR of blog click proceed the report button. Note: -- Enter URL without http because http is prefix in this tool source code.

Enter any blogger blog URL to know total post and comments numbers.

Show your blog total number of post and comments number in your blog add widget in your blog

September 15, 2014 Blogger Tricks , Tools

How to Backup and Restore Blogger Template

Why you need to backup your blogger template?

Are you planning for some change in your blogger template? If yes so it’s good and some time you must customize your blogger template according to blog requirement because Blog/sites layout and its appearance are Very important to attract your Blog reader’s eyes. Always we should try to improve our template design by adding or change in html, CSS or java scripts. But before making any change in blogger template you must first backup you blogger template. Because when you are editing in template there are chances for your template to crash and it will affect the complete site layout. At that instance you can revert it to your previous template by restoring it from backup.

Blogger provide all important facility for bloggers. Easily you can backup or restore your blogger template.

How to backup Blogger template?

Follow below step for get backup of your blogger template.

Login to your Blogger Account

Select your blog.

Click on “Template” (See below helping image)

Click “Backup / Restore” Button you will be find this bottom right side on the top. (See below helping image)

After click Backup / Restore button a small window will be open. Now click to download full template button for Backup of you blog templates. (See below helping image)

Now save your Blogger template backup file in your pc.

How to restore Blogger template?

Backup file restoring is very easy just follow below step for restore blogger template.

Go to your Blogger dashboard and Click on “Template” (See below helping image)

Select Backup/Restore button from top right corner. (See below helping image)

Choose a template file from your computer and click upload. You have restored your template! (See below helping image)

Note:- template file should be in XML file when you upload.

I hope now you first backup your template after this your will Edit your template.

Also See How to add Html/JavaScript Gadget in blogger

May 20, 2014 Blogger Tricks

How to Edit Blogger Template

Do you want to edit your blogger template html source code? You want add some css code/HTML tag or java Script in you blogger template for some change in your template but you have no idea how to change in html.

Don’t worries friends in this post you learn how to edit html codes and you will find all useful tricks for editing in html code.

Why we need Edit or modify blogger template html source code?

Some time you want to use third party JavaScript, widget in your blog for use this widget you need to add third party source code in your blogger template. But some widget you can add easily by add html/JavaScript gadget.

How to Edit Blogger Template HTML Source Code?

Go to blogger Dashboard

Select Template option

Click in Edit HTML button.

Note:-Please Before editing in template html code first get backup of your blogger template if while editing template some mistake will be happen so by backup template file you can revert template like before by restore option.

How to Backup/Restore Blogger Template?

How to edit Template HTML?

If you want find some code or keyword in template Press Ctrl+F for search box enter you keyword in search box and press enter this feature will be highlight you search keyword. (See below helping image)

If you want replace some keyword one by one press Ctrl+shift+F a small search box will be open in right site of the top enter you keyword press enter now Enter you new keyword which you want to replace with old keyword.

If you want to replace all same keyword by on click press Ctrl+Shift+R now enter you keyword which you want to replace now press Enter key now enter new keyword which you want to replace with old keyword.

Know more Feature of Blogger Template Editor.

Blogger Introduce this new template editor in October 2013 in this template editor blogger provide many feature like jump widget, revert changes. Below is given all major features and guide how to use this all useful feature.

Find Feature (Ctrl+F)

For find some keyword press Ctrl+F for search you keyword.

Quick Replace Feature (Ctrl+Shift+F)

For replace you keyword with other keyword press Ctrl+Shift+F this feature will change all same keywords one by one.

Exp- you want to change <h3> with <h2> you have 5 time <h3> so u need to press 5 time ok button for replace keyword.

Quick all replace Feature (Ctrl+Shift+R).

For Replace all same keyword by one click press Ctrl+shift+R enter your keyword you want to replace now enter your new keyword which you want to replace with old keyword this feature will replace all old keyword with new keyword.

Jump to Widget.

For finding code related to specific widget has become very easy by this new template editor, Just need click jump to widget dropdown button and select the widget which you want to modify or delete, by select widget you will be reach to widget source code area now you can easily modify that widget code.

Preview template.

By using of preview template option you can see preview of your template without saving your template if you like this preview then click on save template button.

Edit Template.

Press edit template button if you press preview template and you want to go again in editing option so press edit template button.

Try HTML Editor Tool

Revert Changes

If you make some change in html code and you check the preview and you don’t want to apply this change just press revert change button all changes will be delete but after press save template you can’t revert changes.

Save Template.

After check preview you want to keep this change press save template.

Thanks Friends I hope you like this post

May 20, 2014 Blogger Tricks

How to Remove Blogger Navbar?

How to Remove Blogger Navigation Bar (Navbar)

What is Navbar in Blogger?

Blogger show a navigation bar by default at the top of every blogger blog it’s called navbar (Navigation Bar). Navigation is not bed it may be useful but sometime we need to remove this navbar. The Blogger navbar is mostly hidden in in third party blogger templates.

The advantages of Navbar are the Below given:

When you click on the B icon, it will take you to blogger.com

a quick link to your Dashboard and "Sign in /Sign out" dialog

You can easily search for other blogs

You can "Flag Blog" (if you consider content of a blog objectionable)

Next Blog - takes you to a random, recently-updated Blogger blog

The disadvantage of navbar is... If you have customized design, Navbar doesn't fit in design for looking wise.

So how you can remove/Hide navbar?

Hiding of navbar is very easy you just need add small CSS code in your blogger template.

Add below given css in your blogger template.
CSS

How to add above css in blogger template for remove navbar.

Go to your Blogger dashboard and Click on > Template >Edit HTML Now find “]]></b:skin>” and just before this code pase above given CSS. Now save your Template and refresh your blog and see blogger navbar has been removed.

Know how to Customize blogger template

How To Remove Auto Read More Option From Blogger

remove blogger navbar css

how to hide navbar in blogger

May 20, 2014 Blogger Tricks

How to use Google Analytics in blogger?

Do you want to use Google Analytics in your blog for monitoring in your blog/website traffic? All Blogger want to know real or accurate statistics of his blog traffic. And every blogger should use Google Analytics for analyzed web traffic for make blog more useful according to type visitors. Google Analytics provide maximum information of visitor like which device visitor use desktop or mobile and by which search keyword visitor come in your site so you can provide more helpful information according to visitor search keyword. You can Install Google Analytics in your blog very easily below I will tell how to use and install Google Analytics in your blog.

Why you need to use Google Analytics in your blog?

Google Analytics is the best tool for traces your real and accurate traffic report. Google analytics is unique features which help to knowing the data about the blog/site visitors. Some awesome features are given below.

Real Time Visitors: These features provide you information about Real time active visitors mean how many visitors are active now in your website. It’s providing more information like which page is using visitor or visitor geographical location and more.

Geographical Location: You can know the geographical location of your visitors. You can know which country visitor mostly uses your site. .

Average Visit Duration: One of the best features that you can know that how much time your blog visitor is spending on your blog. By know average visit duration you can get idea your site content or information is useful or not.

Operator System, Browser and Service Provider: This feature is providing you visitor operating system or browser information like which operating system visitor use or which browser visitor use. Or show you service provider name .

Page views, Daily Visits and Unique Visits: This tool provide information like how much page views are you getting daily and how much new visitors comes in your site today. .

How to Install Google Analytics in Blogger

Installing of Google analytic in blogger is very easy just follow below steps.

Go to Google Analytics and Sign In With Google Account.

Now click on signup button right side of the top. (See helping image below)

Fill The Simple Form Fill It with Your Fields (See helping image below)

After Filling The Form, Just Click The "Get Tracking ID" Button and Proceed To Next Step.

Now here you’ll Be Asked for Accepting Their Policies, So Read Their Policies and Hit Accept Button. (See helping image below)

After accept Terms of Service Agreement Google analytics will be provide you a Tracking ID code just add this code to your blog. (See helping image below)

How to add Google Analytics Tracking ID in Blogger

Go to Blogger

Go to your blog Layout option.

Now Select Add a Gadget option.

Now select Html/Java Script option

Now past the Google analytics Tracking ID code in Content area field and press save button.

Know more About How to add Gadget In blogger

You have done it now you can track your blog traffic status.

May 20, 2014 Blogger Tricks

how to add unique meta description in blogger every post

Meta Description is very important part of every post for search engines because meta description is a summary of post info. Blogger has introduced the option of adding unique Meta description in every post.

Why we need Adding Unique Meta Description in every Post

Google use the Meta Description as a snippet while displaying search result just below title. Description shows what your page is actually about and its help to visitors by telling about your blog or website which kind of your page.

That's why we need add Unique Meta description according to post, it will help in optimizing your blog for Search Engines.

How to add unique meta Description in blogger every post?

Follow below step for adding unique description in all post.

Log-in to your blogger Account
Select your Blog.
Click Setting option > Search Preferences (See below help Image)

Click on Edit Meta Tag (See Below demo helping image)

after click on Edit click on yes check box. (See Below demo helping image).

Now enter your description and click on save change. (See Below demo helping image)

After complete above steps Meta description option will be enabled in new post creation page.

Note: This setting won’t work mostly in custom blogger templates and so we’ll have to insert some code to enable it. Go to Template >Edit HTML > copy the below lines of code and paste it just below the <head> tag.

If you are using other similar code remove that and add below given code.

Save your blogger template.

Now you can add different Meta description for every blog post accordint to post. You’ll find a new option “Search Description” in post creation form edit search description and enter your post description. (See Below demo helping image how this option look)

If you need any kind of help you can leave your comment in comment box

Thanks I hope you like this post

May 20, 2014 Blogger Tricks , SEO

How to change mouse cursor pointer in blogger blog with any image

How to change mouse cursor in blogger blog with fancy or cut cursor you can use animated cursor according to your blogger design. Change your pointer with your favorite image to make your blog more stylish. It’s very easy to change mouse point in blogger or BlogSpot blog. Many blogger ask this question how to use custom mouse pointer in blogger blog. So today I write this post to guide all my blog reader. Decorate your blog by changing mouse cursor. Below I provide much cursor design to use.

Follow below steps to change your blogger blog mouse pointer.

How to Change Default Cursor with special cursor?

Login to your blogger Account
Select your Blog.
Click Template (See Demo Image)

After this Click to Edit HTML option.(See below demo image)

Now Find “]]></b:skin>”Code By pressing Ctrl+F.
Now exactly before it, add the below any Cursor Design Code which you like.(See Demo Image)

Now Click Save Template Button.