:: TechnocareBD ::: tutorial

Showing posts with label tutorial. Show all posts

Add Simple Slideshow of Featuted Posts with Description in Blogger Blog

Penulis : Arafat on Apr 22, 2013 | 12:58 PM

Apr 22, 2013

Featured Posts are very important element of a site to give idea to the visitors about most important posts in the blog. Users can easily track the most important post among all the posts which they want. There are many clarified gadgets to show featured posts to attract the visitors. Slideshow of featured posts is one of them.

Generally slideshow of images is made by javascript which looks good but it may lengthen the time of loading your page which will discourage the visitors to stay on the page. So if you want to add slideshow of featured posts I suggest to add simple HTML slideshow of featured posts in blogger blog.

Now take a look what you are going to do:

Samsung Vs HTC One || Battle between technology giants

Samsung Galaxy S4 | Full Featured Smartphone

Price List of Tablet PC's in Bangladesh

Now I am going to write about how make a simple image slideshow of featured post with their description.

How to Add Simple Slideshow of Featuted Posts with Description in Blogger Blog:

1. Go to the Dashboard of blogger.
2. Click on the Layout and Click on 'Add a gadget'.
3. Select the 'HTML/Javascript' gadget.
4. Now paste the code given below.

<div id='tc-slide'>

<marquee scrollamount="9" scrolldelay="75" width="200" height="200" bgcolor="#fff" direction="up" onmouseover="stop();" onmouseout="start();" >

<a href="LINK1" target="_blank"><img height="150" src="Image Link1" width="200" alt=""></a> <h4 align='center'><a href='Title Link1' target='_blank'>Title text 1</a></h4> <p align='center'>Your post description goes here...</p>

<a href="LINK2" target="_blank"><img height="150" src="Image Link2" width="200"  alt=""></a>  <h4 align='center'><a href='Title Link2' target='_blank'>Title text 2</a></h4> <p align='center'>Your post description goes here...</p>

<a href="LINK3" target="_blank"><img height="150" src="Image Link3" width="200"  alt=""></a>  <h4 align='center'><a href='Title Link3' target='_blank'>Title text 3</a></h4> <p align='center'>Your post description goes here...</p>

<a href="LINK4" target="_blank"><img height="150" src="Image Link4" width="200"  alt=""></a>  <h4 align='center'><a href='Title Link4' target='_blank'>Title text 4</a></h4> <p align='center'>Your post description goes here...</p>

<a href="LINK5" target="_blank"><img height="150" src="Image Link5" width="200"  alt=""></a> <h4 align='center'><a href='Title Link5' target='_blank'>Title text 5</a></h4> <p align='center'>Your post description goes here...</p>

</marquee>

</div>

Note: Change color marked text as your own like Red for link which redirects from image, Blue for image link, Pink for your Tile Link and the Green color for your Title Text.

5. Now Save the Gadget and check it out.

comments (16) | blog, blogger, tips and tricks, tutorial | Read More...

Add Meta Tags to your Blogger Blog

Penulis : Arafat on Mar 28, 2013 | 1:44 PM

Mar 28, 2013

Meta tags are the important elements for successful SEO of your blogger blog site as well as any types of website. It helps to find out the keywords related to the article to Google bot. When a user search article by his own keywords, bot searches the most relevant matches with the keywords and show the results. So, if you want to optimize your site with successful SEO, keyword research is necessary and place the keywords into the meta tags. You can put your site description as well as specific post description as search description which helps to recognize your site to the bot that what kind of topics describes in your post.

Meta tags are basically HTML head element and are not shown on your page. This tag is placed in between the <head> and </head> tag. This elements are generally added to the main script manually.

You can put two types of META tags. You can put text Meta tags as keywords and description and on the other hand "alt" tags. The "alt" tags are used to recognize your photos to the bots that what type of photo it is?

How to put Text Meta Tags:
Meta tags are generally included <meta> tags. You can put your keywords between the anchor of thr tags and place the tag between the <head> and </head>. You can put keywords and description meta tags like this:

<meta name="keywords" content="YOUR KEYWORDS HERE" />

<meta name="description" content="YOUR DESCRIPTION HERE" />

This elements specifies your overall site keywords and descriptions. But you can put post by post meta keywords and description.

How to add post by post meta elements:

When we add labels to the post we actually add meta keywords to the specific post. But in previous blogger interface there were no option to add meta description to specific post in blogger blog. But in new interface of blogger blog you can add specific post search description for optimization of your blogger blog.

When you write a post you will see an option to add Search description where you can add your specific post search description.

How add "alt" Tag to the Photos:
The "alt" tags are very important for Search engine optimization (SEO). If you put the "alt" elements to the photos the photos will readable to the search engine and can give feedback in the search results. Generally in HTML, "alt" tags are included with <img> tag like below:

But you add "alt" elements to the photos in blogger blog more easily as well as you can add title and caption with the photos in blogger blog.
To add "alt" tag to the photos, select the photo after uploading the photo. A menu will appear where you can find Add caption and properties menu.

You can add caption by selecting on Add caption. To add "alt" tag click on the Propertion. A pop-up box will appear.

Now put the Title text and the "alt" text in the respective boxes and click Ok and you are done.

There are another tricks for search engine optimization (SEO) is that make sure that the code given below is present just after the <head> tag.

    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.pageTitle/></title>
    <b:else/>

This code will help the bot to search every post regarding its Post title.

You can also more meta tags like Robots, Author, Generator etc. Meta tags are read by the search engine. These are not appeared to the users. So, you should put here only those things which you want the search engine to read.

comments (51) | blog, blogger, Google, SEO, Technology, tips and tricks, tutorial | Read More...

How to add Custom Robot.txt to Blogger | Crawlers and Indexing

Penulis : Arafat on Mar 17, 2013 | 1:09 PM

Mar 17, 2013

Robot is simply a software of Google Search Engine which is send by Google to collect information from all the websites which are newly discovered. I have already discussed about Crawling and Indexing in my previous post. Now I'm going to discuss about how to add custom robot text to blogger.

Before starting first we have to know about Custom text. Custom text is the direction to the Robot software that how it crawl the site which is given by the administrator. It allows Robot to crawl and index maximum number of pages from the website. So it essential for the Search Engine Optimization (SEO).

How to add Custom Robot.txt to Blogger blog:
There is no hardness to add this text which can be done even a beginner. So lets go the steps:

Go to the Dashboard and select Settings from the left bar.
Select Search preference from submenu.
At the right, go to the Crawlers and Indexing section.
Click edit in Custom robot.txt and select yes.
Add this code given below in the box which will appear just below the Custom robot.txt.

User-agent: Mediapartners-Google

Disallow: 

User-agent: *

Disallow: /search?q=*

Disallow: /*?updated-max=*

Allow: /

Sitemap: http://www.technocarebd.blogspot.com/feeds/posts/default?orderby=updated

Note: Red line denotes the link of your sitemap URL/RSS feed URL.

Now you have almost done.

Now take a look what you have done.

Click Save Changes.

comments (7) | blog, blogger, Google, SEO, tips and tricks, tutorial | Read More...

Add Facebook Like and Send button to your blogger

Penulis : Arafat on Mar 8, 2013 | 1:47 AM

Mar 8, 2013

Facebook is the most popular social networking website. If you are regular in internet you might have a facebook account. Most of the website admins are using facebook plugins in their sites to increase their pageview because of the tremendously increasing the user of facebook and most easy way to increase the viewers of a website.

How to add Facebook Like and Send button:

In this blog I want show you that how to add facebook like button to your blogger blog. Before you do this I hope that you must have a facebook account and you have already logged in to your account.

Steps:
Go to the bottom of your wall and click the developer link or go to this https://developers.facebook.com/docs/reference/plugins/like/ link.

If you click on the Developer link at the bottom of the facebook wall then click on the Web button positioned at the right. Now click on Integrate with your website link.

Now click on Core concepts at the menu in left column. Core concepts menu will expand and submenu will show. Among them click on Social Plugins. You will see many types of plugins of facebook here. Click on the Like buton at the very first plugin. You will see a facebook code generator box like below.

Input your values in the boxes as your choice and which best fits to your website.

URL to like: The XFBML version defaults to the current page. This denotes the URL to which users are going to like.
Send Button: Put tick on if you want Send button along with Like button.
Layout Style: There are three style. Standard, button_count, box-count. Choose one whatever you like. click on them and see the changes at right preview box.
Width: Mention the width of your box which best fits to your blog column.
Show faces: Specifies whether to display profile photos below the button (standard layout only.
Font, Color Scheme, Verb to display: Select the attributes as you like.

You are already done. Now click on the Get code button. Facebook will generate the code to you. It will show the code in different format. If you copy the HTML5 format then part of the code has to add to your main web template. But if you copy the Iframe code it will be more easier.

Just copy the Iframe code. Go to the blogger dashboard and click on Layout tab.
Click on Add a gadget and select HTML/Javascrips gadget from the gadgets.
Paste the code in the content box.
Save it and see the changes in the preview.

There are many ways to integrate facebook like button in a website or blog sites. But I think this is the most convenient and trusted way to do the job.

comments (7) | blog, blogger, facebook, tips and tricks, tutorial | Read More...

Add a simple dropdown menu list to blogger blog

Penulis : Arafat on Mar 5, 2013 | 7:22 PM

Mar 5, 2013

There are many types of menu in HTML. You can apply these type of menus in your blogger blog. If you know HTML before you can understand that creating a menu is not a difficult task. Here I am going to make a simple dropdown menu for your blogger blog. If your menu contains too much listings it may make your blog too hazy. Users will feel uneasy to find their desired subject. So it can be the solution to use a simple dropdown menu and set it to a corner of your blog.

Now take a look what you are going to do:

How to add a simple menu list to blogger blog:
This is a very simple task that even a beginner also can do it easily which is confined in only copy-paste task.
To add this dropdown menu follow the steps below:

Go to Layout in your Dashboard.
Click on Add a gadget where you want to add your menu.
Select HTML/JavaScript gadget from the gadgets.
Copy the code below and paste it in your gadget content box.

<!-- TechnoCareBD.blogspot.com(dropdown menu) -->

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"

size=1 name=menu>

<option>Menu Title</option>

<option value="link1 URL">Link 1</option>

<option value="link2 URL">Link 2</option>

<option value="link3 URL">Link 3</option>

<option value="link4 URL">Link 4</option>

</select></form>

Change the red to your own menu title.
Change the Green to your link URL.
Change he Blue to your link title.

If you want to add more links just repeat the options and add your links

4. Now Save the gadget and take a look with a preview and check it out.

comments (6) | blog, blogger, tips and tricks, tutorial | Read More...

Add an amazing shadow featured posts widget with thumbnail in blogger

Penulis : Arafat on Feb 17, 2013 | 4:16 PM

Feb 17, 2013

Now I am going to tell you that how can you add an amazing featured post widget in your blogger blog. This widget is really easy to install and all properties are adjustable. There are no need to preadjust your images width and height. Only add the link of images and title links and enjoy. You can add number for posts whatever you want. Now take a look what you are going to do...

Screenshot:

comments (3) | blog, blogger, computer, tips and tricks, tutorial | Read More...

How to List Up Only Post Titles of Label Pages in Blogger

Penulis : Arafat on Feb 16, 2013 | 10:09 PM

Feb 16, 2013

In this post I am going to show you how can we make list of only post titles when we click on the labels in blogger blog. It's a great trick that can facilitates you visitors to easily navigate your site and the posts. The visitors can easily find out their desired blog and can also navigate to another one. Visitors will be glued on your blog for long time. So it will ultimately increase your traffic.

Now the question is why you will use it in respect to your blog. If you have huge amount of posts which are grouped in one label then when visitor click on this label what he will see in your blog? Can you imagine? A long tail of blogs which will take much time to load. So why the visitor will wait to load the blog posts? So it can be easily said that this tricks will be very helpful to make the post titles into list and represent your blog to your visitors conveniently.

Steps:

Go to Dashboard and click on Template menu.
Then Click on Edit HTML.
Tick on 'Expand Widget Templates'
Use search option by Ctrl+F

Find this line shown below:

<b:include data='post' name='post'/>

5. Now replace the above code with the below one.

<b:if cond='data:blog.homepageUrl !=data:blog.url'><b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><li/><data:post.title/></a><br/><br/><b:else/><b:include data='post' name='post'/>

</b:if>

<b:else/><b:include data='post' name='post'/></b:if>

Now Save the template and check the changes.

Note: It should be noted that by using this trick you changed how you posts will look like and if you have blog achieve it will look also like it. If you have search engine, the search results will also look like it.

comments (7) | blog, blogger, tips and tricks, tutorial | Read More...

Add a category section of labels in Blogger blog

Penulis : Arafat on Feb 14, 2013 | 11:03 PM

Feb 14, 2013

Posts are categorized based on the label in blogger. But is sometimes annoying because there may huge number of labels which will show a long tail in blogger. Every label has different topics in blogger but you can categorized them based on some specific criteria. I don't think so that all labels can be clearly categorized but the long list of labels will reduce and will make your blog good looking.

How to Create Categories from Labels in Blogger

To do so you will have to make separation of your labels into some groups as category. You don't have to go to blogger template and no need to edit it. You can do it only adding a gadget in layout section in blogger.

Steps:

Go to Dashboard.
Click on Layout on left side bar.
In layout box click Add gadget where you want to show your categories.
Select Labels Gadget from the gadget box.

Label add box will appear as shown below.

5. Write Categories in Title box or whatever you want.
6. Select the radio button Selected Labels.

Number of labels will show below it

7. Click edit

A box will appear below the save button named Select labels to show.

From the box select the labels in this category/group and then Save it.

You can add more categories that you want. Just name the category and select the labels belongs to this category.

comments (1) | blog, blogger, tips and tricks, tutorial | Read More...

Penulis : Arafat on Apr 22, 2013 | 12:58 PM

Apr 22, 2013

Penulis : Arafat on Mar 28, 2013 | 1:44 PM

Mar 28, 2013

Penulis : Arafat on Mar 17, 2013 | 1:09 PM

Mar 17, 2013

Penulis : Arafat on Mar 8, 2013 | 1:47 AM

Mar 8, 2013

Penulis : Arafat on Mar 5, 2013 | 7:22 PM

Mar 5, 2013

Penulis : Arafat on Feb 17, 2013 | 4:16 PM

Feb 17, 2013

Penulis : Arafat on Feb 16, 2013 | 10:09 PM

Feb 16, 2013

Penulis : Arafat on Feb 14, 2013 | 11:03 PM

Feb 14, 2013

Favourite Blog List

Like on Facebook

Popular posts

Blogger Tips

Recent Comments

Followers

Categories

Labels

Blog Archive

Directories

You may also like...