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: Before change in HTML please take template Backup
- 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
- Now Add Below Given Code in your blog by add a widget option
- 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.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--Smooth Back to Top Button Start-->
<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>
<!--Smooth Back to Top Button End-->
Note:- you can use your favorite image for up arrow Only replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dzI2r6m1BYVz5Weu5N3tvNdzf3Gvlwzht9MKPHomD2lEuX6gdrGAcNInR6MPmfZmeq2Cto0ANatQ9oxIWtv9saD-HvIqJRcDoOCGkGem7LyY_urw1eei8kSLJC0G8M8DnLNHVJdI_80c/s1600/back+to+top+.png with your image URL.
How to Add Html/Java widget? Follow below steps to add Widget
Know more About How to add Gadget In blogger
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 <!-- adsense --> comment code in your post by HTML section where you want to show this ads our script automatic will replace <!-- adsense --> with your Adsense ad script or with other script you want to use.
- Now we need to add some code in blogger 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.
<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style="clear:both; margin:10px 0">
<!-- Add here the code of your ad -->
</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 <!-- Add here the code of your ad --> with you adsense ads code in html encode format use below tool for convert code in encode form.
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
Put Widget code here
</b:if>
Show widgets in Label Search
<b:if cond='data:blog.searchLabel'>
Put Widget code here
</b:if>
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>
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>
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>
Put Widget code here
</b:if>
Show widget Mobile
<b:if cond='data:blog.pageType == "data:blog.isMobile"'>
Put Widget code here
</b:if>
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>
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>
If condition is true.
<b:else/>
If condition is false.
</b:if>
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)
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)
Quick Replace Feature (Ctrl+Shift+F)
Quick all replace Feature (Ctrl+Shift+R).
Jump to Widget.
Preview template.
Edit Template.
Revert Changes
Save Template.
For find some keyword press Ctrl+F for search you keyword.
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.
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.
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.
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.
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
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.
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.
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
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)
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.
Cursor Type 1
|
Cursor Demo Is Below Given
|
Bring your Mouse Cursor Here For Demo
For Cursor Type 1 Copy Below CSS Code
and past Before ]]></b:skin>
|
Cursor Type 2
|
Cursor Demo Is Below Given
|
Bring your Mouse Cursor Here For Demo
For Cursor Type 2 Copy
Below CSS Code and past Before ]]></b:skin>
|
Cursor Type 3
|
Cursor Demo Is Below Given
|
Bring your Mouse Cursor Here For Demo
For Cursar Type 3 Copy
Below CSS Code and past Before ]]></b:skin>
|
Cursor Type 4
|
Cursor Demo Is Below Given
|
Bring your Mouse Cursor Here For Demo
For Cursar Type 4 Copy
Below CSS Code and past Before ]]></b:skin>
|
Cursor Type 5
|
Cursor Demo Is Below Given
|
Bring your Mouse Cursor Here For Demo
For Cursar Type 5 Copy
Below CSS Code and past Before ]]></b:skin>
|
Cursor Type 6
|
Cursor Demo Is Below Given
|
Bring your Mouse Cursor Here For Demo
For Cursar Type 6 Copy
Below CSS Code and past Before ]]></b:skin>
|
Cursor Type 7
|
Cursor Demo Is Below Given
|
Come Here for Custom Cursor Demo
For Cursar Type 7 Copy
Below CSS Code and past Before ]]></b:skin>
|
Make Your Favorite Picture Your cursor
|
body,
a, a:hover {cursor: url(Cursor-Url),progress;}
|
Replace Cursor-Url with Your Favorite Picture, Icon Url and Past above code before ]]></b:skin>
Save Your Template You have don it Now your blog is ready with custom cursor.
May 20, 2014
Blogger Tricks
Subscribe to:
Posts
(
Atom
)