Tags: Blogging Tips

How to Make a Gadget visible only to blog Administrator

- 1 Comment

Sometimes we want to make some gadgets visible only to us in blogger. A traffic counter, or any gadget while we are customizing it, we want to hide all these types of widgets from our visitors, until they are fully customized. So, if you don't know that how to hide a gadget from your visitors, then don't worry, today in this tutorial we'll show you How to Make a Gadget visible only to blog Administrator. The procedure is simple and you just have to add two lines to hide a specific widget from your visitors.

How to Make a Gadget visible only to blog Administrator

Step 1. Log in to your Blogger Account
Step 2. Go to Template and click on Edit HTML
Step 3. Now search (Ctrl + F) for the widget code that you want to hide
For Example, my widget code is

<b:widget id='HTML8' locked='false' title='' type='HTML'>
            <b:includable id='main'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>

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

To hide this widget from your users add <span class='item-control blog-admin'> after/below <b:includable id='main'> and </span> before/above </b:includable> tag. Check the example below:

<b:widget id='HTML8' locked='false' title='' type='HTML'>
            <b:includable id='main'>
<span class='item-control blog-admin'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>

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

Step 4. Now click on Save template button
Congratulations: Now this widget is hidden from your visitors.
Note: Sometimes the widget codes are not expanded and are in the form of folds. So to expand the widget code click on the sideway arrow next to the widget's id.
And you're done!

Tags: Blogging Tips

How to Create a Full Widget Page and Remove Sidebar in Blogger

- 2 Comments

Have you ever thought about removing the sidebar and creating a full width page in blogger? If you have visited our About Us and Contact page then you may have observed the difference between normal pages and these pages. The difference is that these pages are of full width and with no sidebar, which gives them an eye catching look. So if you are thinking to create a full width page without sidebar, then you're at the right place, today in this article we'll show you How to Create a Full Widget Page and Remove Sidebar in Blogger.

How to Create a Full Widget Page and Remove Sidebar in Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Pages and Create a New Page
Step 3. Now switch the page editor to HTML by Clicking on HTML tab
Step 4. Copy the below code and paste it in the HTML tab

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

Change the width 99% according to your needs or you can also use pixels (960) instead of it.

Step 5. Click on Publish button and check your page of full width and without sidebar.

Final Words

We hope this article helped you in learning How to Create a Full Widget Page and Remove Sidebar in Blogger. Share it with your friends and don't forget to subscribe us!

Tags: Beginner's Guide / Blogging Tips

How to Submit your Sitemap to Google Webmaster Tools

- 4 Comments

Started a New Blogger Blog? Want to rank it better in search results? Without optimization it is not possible? There are hundreds of free SEO tools to optimize your blog. But the best free tool that i prefer is Google Webmaster tools. Google Webmaster tool gives all the information about your appearance in search results. In order to make your blog appear in Google search results it is important to submit your blog's sitemap to Google webmaster tools. What happens on submitting your sitemap to Google? In simple words, submitting your sitemap to Google means to notify Google about your blog posts. On submitting your sitemap to Google, it start sending bots to your blog, and crawling your blog pages thus your blog starts appearing in Google search results. So today we are going to learn that How to Submit your Sitemap to Google Webmaster Tools. Also Read How to Submit your Blog to Google Webmaster Tools

How to Submit your Sitemap to Google Webmaster Tools

Step 1. First of all, you've to Submit your site to Google webmaster tools
Step 2. After step 1 go to Webmaster tools homepage and select your site

Step 3. In the left sidebar click on Crawl and then select Sitemaps

Step 4. Now click on Add/Test Sitemap button and type sitemap.xml in the empty field

Step 5. Click on submit sitemap and refresh the page

From Editors Desk

We hope this article helped you in learning How to Submit your Sitemap to Google Webmaster Tools. Share it with your friends and don't forget to subscribe us!

Tags: Blogging Tips

How to Add Keyboard Keys Effect to your Text in Blogger

- 2 Comments

Unique design is necessary for a blog. To get organic traffic and user attention you need to develop the blog user friendly and search engine friendly as well. It is possible only if your blog's design is simple, attractive and easy to navigate. Sometimes we need to mention keyboard shortcuts in our blog posts. So, if you add keyboard keys effect instead of simple text, it will impress your visitors and they'll get more interested in your blog. Oh sorry, let me tell you that what is Keyboard Keys Effect? In simple words, keyboard keys effect is just normal text, styled using CSS. In this tutorial, we are going to show you How to Add Keyboard Keys Effect to your Text in Blogger.

How to Add Keyboard Keys Effect to your Text in Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Template and Click on Edit HTML Button
Step 3. Now search Ctrl + F for the ]]></b:skin> tag and paste Ctrl + V the below code just above/before it

kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Step 4. Click on Save Template Button

How to Use Keyboard Keys Effect

To use this Keyboard Keys Effect to your text, you need to add <kbd> and </kbd> tags to your text. See the below example to see how it works:

<kbd> This is my Text </kbd>

Create a New Post and switch it to HTML by clicking on HTML tab in the Post Editor
Example 1.
For Ctrl + C

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Result:

Ctrl + C

Example 2.
For Ctrl + F

<kbd>Ctrl</kbd> + <kbd>F</kbd>

Result:

Ctrl + F

From Editors Desk

We hope that this article helped you in learning How to Add Keyboard Keys Effect to your Text in Blogger and How to use this effect in blogger. Share this article with your friends and don't forget to subscribe us!

Tags: Blogging Tips / CSS Tricks

How to Customize Blockquote in Blogger

- 7 Comments

First of all let me tell you that What is Blockquote? Blockquotes are sections of text which are used to highlight quotes from other text or simply a blockquote is used to highlight a text to make it different from other text on the page. Blockquotes are used to draw attention of your readers to particular parts of your blog or if you're a blogger then you can use blockquotes for highlighting code snippets of widgets/CSS codes. Whatever your purpose, using blockquotes is a perfect way to draw your readers attention. So today, in this tutorial we'll show you How to Customize Blockquote in Blogger. Check the image below to see how this blockquote looks that we are going to share today.

How to Customize Blockquote in Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Template >> Backup your Template and click on Edit HTML
Step 3. Search for .post blockquote and delete the code with all its occurrences. In most templates code looks like this

.post-body blockquote { blaa blaa blaa }

If your couldn't find it then no problem, its ok
Step 4. Now search for ]]></b:skin> and paste the following code just above/before it

.post blockquote{background:#ddd;border-left:1px solid #333;border-bottom:17px solid #333;border-top:1px solid #333;border-right:1px solid #333; margin-left:20px}
.post blockquote p{padding:10px}

Step 5. Click on Save Template button
And you're done!

How to Use Blockquote

Using blockquote is extremely easy, from the post editor type or paste whatever you want. Select the text/code that you want to show in blockquote and click on Quote tool.

From Editors Desk

We hope this article helped you in learning How to Customize Blockquote in Blogger. Share it with your friends and don't forget to subscribe us!

Tags: Blog Design / Blogging Tips

Add Page Peel Effect with jQuery in Blogger

- 4 Comments

Page Peel effect is actually a page flip effect, when you move your cursor on over it, it flip and shows that whats behind it. There are many ways for adding this effect, and today we are going to share one of them. Just like other Peel effect widgets, it would also appear at the top right corner of your blog and whenever your visitors would move their cursor over the top right corner of your website, it would display the RSS Image with its link. Check the following screenshot to see how it works.

How to Add Page Peel Effect

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> Search for the <head> tag
Step 3. Now Copy and Paste the following code below/after <head> tag
Note: If your blog already have jQuery plugin, then ignore this step

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Step 4. Now search for </head> tag and paste the following piece of code just above/before it

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihz3q3h2zCv7CfnjbVW3Qf06uFaWlBrVKQSLud-kTbP9TPVdOMl1g7fTyj6E6ASKoEspj3a7ZqUjX_xBvzlWGaVo3vreRS5imzfG9AUjpKFB48TUUtXaL6-h_4D9H2n7XIcN10kyAVp8A/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://blogolect.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOOskp1gqv0QqtqnuJnHX00nJ2WgEcdPi3HTTJRQtY31Q_GnKf8VljKvkRF-ZKbacVAUdzly0Rqx4dYx0RwJQEwXMFkK_k3Lym-kF-bdd9tE-up7AmsRmTYo7584cmbDP0M8LZ6Cg26I/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
    .animate({
    width: '307px',
    height: '319px'
    }, 500);
    } , function() {
    $("#pageflip img").stop()
    .animate({
    width: '50px',
    height: '52px'
    }, 220);
$(".back-img").stop()
    .animate({
    width: '50px',
    height: '50px'
    }, 200);
});
});
</script>

Step 5. Now search for <body> tag and paste the following piece of code just after the close tag '>'

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blogolect'><img alt='Blogolect' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRzDkdCzX1NFeCnXV6pyc0eTACmDS0ca4pqthkuDpAt0MSHP0z6w7t7fDrqgu8A_bku1H1trfd8GtlT4t4slFFTziYEeqelRwuYdIBKDAx3yKyOnS4jMjaq4THkx2JAwdNQisWuiQzUBN/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>

Replace http://feeds.feedburner.com/blogolect with your Link
Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihz3q3h2zCv7CfnjbVW3Qf06uFaWlBrVKQSLud-kTbP9TPVdOMl1g7fTyj6E6ASKoEspj3a7ZqUjX_xBvzlWGaVo3vreRS5imzfG9AUjpKFB48TUUtXaL6-h_4D9H2n7XIcN10kyAVp8A/s1600/mini_rss.png with your Image URL or keep it default

Step 6. Hit the Save Template Button
And you're done.

Tags: Blogging Tips / Tutorials

How to Schedule Posts in Blogger for Auto Publish

- 1 Comment

Updating your Blog regularly is not only important for SEO but also for Alexa Ranking. We should update our blog daily in order to maintain our traffic which we're receiving currently and our ranking on the web. And one more thing that updating your blog daily on the same time also increases you ranking and traffic. But sometimes we don't have time to publish the post or we are unable to update our blog at accurate time. So, the solution of this problem is to schedule posts. You can also schedule you posts when you are busy in your exams or other occasion. Today in this article we'll learn How to Schedule Posts in Blogger for Auto Publish in Blogger.

How to Schedule Posts for Auto Publish

Step 1. From your Blogger Dashboard open or create a new post and write your complete post
Step 2. From the Post Editor's sidebar click on the Schedule option >> Set date and time

Step 3. Now you've to set the exact date and time on which you want to publish that post.

Step 4. Click on Done and you're Done
Congratulations:
Now you post will be automatically publish on the time that you've set.

Tags: Beginner's Guide / Blogging Tips

How to Find forgotten email address of your Blogger Blog

- 3 Comments

If you don't remember which email address you used to sign up and you don't remember which email address you used to create your Blogger blog OR If you've forgotten the email address you use to sign in to Blogger or your blog's URL. Blogger all of its features also provides you to find your forgotten email address or your blog's URL. Finding forgotten email address of your Blogger Blog is extremely easy all you have to do is just enter the URL of the blog you're trying to gain access. Follow the steps below to Find forgotten email address of your Blogger Blog.

How to a Find forgotten email address

To find your forgotten email address go to www.blogger.com/forgot.g a page will open.

On that page enter your blog name in the box and hit the Lookup button. After that Blogger will send you a message on the email associated with the blog you've entered.