Apr 17, 2017

How to make keyboard key buttons in blogger posts

Making keyboard buttons appear in blogger posts text is as simple as cutting butter with a sharp blade in summers ☺.
It is actually all about a simple html tag. Yes only one html tag makes all that magic happen. Here is the html tag we are talking about <kbd>.
All you have to do is to go to html view and add this tag before the alphabet you want to create keyboard button of. At the end add this tag again but with closing slash. Example is highlighted. If want to make Ctrl then in html you have to write <kbd>Ctrl</kbd>
Thats it.


Few Examples
I AM TARIQ YOUSUF                                         I AM A BLOGGER.   

                                         I LOVE BLOGGING

Ctrl Shift Enter alt caps lock 

tab esc Backspace insert prt sc 

delete home pg up pg dn 
Read More »

Jan 30, 2017

How to remove the blank space at the top of your blog

You always like your blog to be stylish. You like your blog to  look a more professional type. For this you wish your navigation bar (Navbar) to be hidden. Fortunately blogger provide us the option to hide or unhide the navigation bar.
But,  after removing or hiding the navbar a blank space is created on top of your blog (Fig 1).
Fig 1
It creates a negative impact on your blog design. That is why removing this blank space from your blog top is all important.

Today i will show you how to remove the blank space created after removing navbar in your blog.


Note:- First take a backup of your blog template to avoid any mishap. if you are not sure about it Read my post on How to download backup of template in blogger


Follow the steps below-

Step 1- Log in to your blogger account.

Step 2- Click on the Template option from the left pane as shown in Fig 2.
Fig 2

Step 3- Click on Edit HTML button as shown in Fig 3.

Fig 3

Step 4- Click anywhere in the HTML Code Box, then press Ctrl + F to enable search box as shown in Fig 4.

Fig 4

Step 5- Copy or type </head> in the search box and press Enter. 

Step 6- Now copy and paste the below code just before the </head>.


<style type='text/css'>

.content-inner 
margin-top: -40px !important; 
}

</style>


Step 7- Click "Save Template" button as shown in Fig 5.

Fig 5


Done...!
Now view your blog and see the magic!

If you have any questions, Leave a comment. 
☺☺☺☺

Read More »

How can i hide navbar in blogger


You always like your blog to be stylish. You like your blog to  look a more professional type. For this you wish your navigation bar (Navbar) to be hidden. Fortunately blogger provide us the option to hide or unhide the navigation bar, 

Today I will tell you about How to hide navigation bar in blogger.

Follow the steps below-


Step 1:- Login to Blogger and go to Layout. 



Step 2:- On Navbar gadget, click on Edit.






Step 3:-A new window will pop up. At the bottom click on "off" button.





Step 4:- Now click "Save" to save the gadget.

Done...!!!!!
Congratulations... The Navbar is disappeared from your blog now.

If you liked this post,Or have any questions, Leave a comment below

Read More »

Jan 27, 2017

How to add popular posts widget in blogger

Popular Posts widget is a must have for a blog or  website An eye-catching popular post widget not only increases the beauty and style of your website/Blog but it will impress your readers also. This will also increase the chance to get more clicks in your blog. today we will learn about how to add a Popular Posts widget in your blog. Adding and customizing popular post is very easy. 
Just follow the steps below-

Step 1- Login to your Blogger account and go to Layout as shown in Fig 1.
Fig 1

Step 2-  Click "Add a gadget" as shown in fig 2 below.
Fig 2
Step 3- A pop up box will open, select "Popular posts" widget from it as shown in Fig3 below.
Fig 3
Step 4- Now configure your Popular posts Widget as shown in fig 4 below.

Fig 4
Customization:-
1- Name you like to display in your  blog for popular posts widget. Rename it according to your taste.
2- The time period you want blogger to choose posts from. You can choose any but All time is recommended.

3- How many posts you like to display in popular posts widget (Max 10). Check Image thumbnail to show images.

4Save your popular posts Gadget.

Step 4- At last click Save arrangement at top right corner as in fig 5
Fig 5
Hurray.....! You have successfully added popular posts widget to your blog.
Congratulations.
HAPPY LEARNING ☺☺☺










Read More »

Nov 18, 2015

How to make Privacy Policy for your Website/Blog


How to make Privacy Policy for your Website/Blog
www.tyk786.blogspot.com
Privacy Policy is a must have for a website or Blog. You can make yourself the privacy policy for your Blog or website. There are many websites online which do this job for you absolutely free of cost. If you want privacy policy for your Blog just follows the simple steps given below:-

Step 1:  Click here to go to the website which will make privacy policy for your blog

Step 2: Click Sine Up.

Step 3: A form will appear. Fill up the form.                       
1.       Enter your blog URL.
2.       Enter your Email Address.
3.       Select Yes, We use Cookies 
4.       If you are showing Ads on your Blog/Website, In the Advertise Information field enter the name of advertisers  like Google Adsence, Adfly, Bidvertiser, Traffic Monsoon Etc

Step 4: Now Click on Create My Privacy Policy 

Step 5: A new page will open with the privacy policy of your Blog/Website

Step 6: Copy the whole text.

Step 7: create a new page in your Blog/Website by the name Privacy Policy and paste the copied text.

Step 8: Save and Publish the page.

Done…You have successfully created the privacy policy for your Blog/Website.


Any Questions?  Leave a comment.....!!
Read More »

How to add Read More button in blog posts

How to add Read More button in blog posts
how to add readmore button to your blog posts
Read More button is must for a blog. By default a blog displays a whole post therefore a single post is displayed at a time. If you add a read more button almost 10 posts will be shown at a time. By adding a Read More button your blog will attract more visitors.  ReadMore button increases the beauty of the blog as well. Go through the steps below to add a Read More button to your blog posts.

Step 1Login to Blogger. Go to Template and click Edit HTML button.
Step 2. Now click anywhere in the text, then press Ctrl+F buttons. A search box will appear. Type </head>  in search box and hit enter. It will search the code in the Template.

Now copy the below code and paste it above </head> code.

<script type='text/javascript'>
posts_no_thumb_sum = 500; //
posts_thumb_sum = 400;    //
img_thumb_height = 160;   //
img_thumb_width = 180;    //
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Customization:-

You can change the numbers colored red in the code according to your choice.
Posts_no _thumb_sum=500;//   500 words if there is not an image in the post

Posts_thumb_sum=400;//   400 words if there is an image
Img_thumb_height=160;//    160 is the height of image
Img_thumb_width=180;//    180 is the width of image


Step 3.  Now press Ctrl+F and search for this code <data:post.body/>

Note:This code can of at many places. Press enter as many times as required to find how many times this code is in the template.

Erase the last code and copy paste the below code there
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>


Step 4. Now click on Preview Template and check it. 
Step 5.Now click Save Template and you are done.


Important Note: Download a backup of your Template before applying this. If you are not sure how to do this, you can read my post on How to download backup of Template in Blogger.



If you like this post or have any questions, Please leave a comment below
Read More »
Blogger Widgets