Facebook Twitter RSS feed Google +1 Email pinterest
News Update :
Showing posts with label tutorial. Show all posts
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:


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) | | 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. 

blogger logo


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" />

Add Meta Tags to your Blogger Blog

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.

Add Meta Tags to your Blogger Blog

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:

<img src="IMAGE URL" alt="IMAGE NAME/DESCRIPTION">

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.

Add Meta Tags to your Blogger Blog





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 == &quot;index&quot;'>
    <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 (52) | | 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:
  1. Go to the Dashboard and select Settings from the left bar.
  2. Select Search preference from submenu.
  3. At the right, go to the Crawlers and Indexing section. 
  4. Click edit in Custom robot.txt and select yes.
  5. 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) | | 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) | | 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:
  1.  Go to Layout in your Dashboard.
  2. Click on Add a gadget where you want to add your menu.
  3. Select HTML/JavaScript gadget from the gadgets.
  4. 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) | | Read More...

Followers

Categories

Blog Archive

Directories

 
Privacy policy | Term of use | Widget | Advertise with Us | Site map
Copyright © 2011. :: TechnocareBD :: . All Rights Reserved.
Design Template by panjz-online | Support by creating website | Powered by Blogger