How To Add Read more Button to Blog posts

Adding jump breaks to blogger posts is very easy. most new custom blogger templates comes with auto jump break widget. if you are using a basic template from blogger, you have to manually add jump breaks to your post. in this post lets learn what are the jump breaks, How we can usejump breaks, Thy they are so important and what are the advantages of adding jump breaksmanually. Jump breaks will show "Read more >>" by default. but you can change it's text and appearance ( Font, Size, Font color and background color ) Also you can add an image for it. Read this info to learn about adding and customizing blogger jump breaks.

What are these Jump Breaks .

We use Jump breaks to add Read more button to our blogger posts.  When you have added a jump break on your blog post, it will divide your post to two parts. when you open your home page or a label page it will show your post until the Jump break and after that you will see read more text or an image. when you click on it you will see the full article on same tab.

Advantage of using Jump Breaks .

When someone open your home page they can see lots of posts with some information ( part before Jump break ). So you can atleast show 5 posts without making the page too much longer. visitor doesn't have to scroll down to see the next post. when he see a interesting post he will click on the post title or Read more button. then it will open a new page. that means another page view. that's good for your blog traffic and adsense. new page views means more impressions to your account. 

Add a Jump Break Manually.

if you are using a basic blogger template you don't have auto Jump Breakwidget installed. so you have to manually add it. When you type your post keep the mouse pointer at the place which you want to add the Jump break. now click "Insert Jump Break" button on blogger tool bar. or you can go to the Edit html view and type <!-- more --> where you want to addJump break. now save that blog post and see how is your post appears. you will see the text before the Jump break with read more text.

In our next post lets learn how to add auto Jump break widget to our blog and how to customize jump break link. you can change the Jump breaktext or you can add an image for it.

View full article here

How To Add Read more Button to Blog posts

Adding jump breaks to blogger posts is very easy. most new custom blogger templates comes with auto jump break widget. if you are using a basic template from blogger, you have to manually add jump breaks to your post. in this post lets learn what are the jump breaks, How we can usejump breaks, Thy they are so important and what are the advantages of adding jump breaksmanually. Jump breaks will show "Read more >>" by default. but you can change it's text and appearance ( Font, Size, Font color and background color ) Also you can add an image for it. Read this info to learn about adding and customizing blogger jump breaks.

What are these Jump Breaks .

We use Jump breaks to add Read more button to our blogger posts.  When you have added a jump break on your blog post, it will divide your post to two parts. when you open your home page or a label page it will show your post until the Jump break and after that you will see read more text or an image. when you click on it you will see the full article on same tab.

Advantage of using Jump Breaks .

When someone open your home page they can see lots of posts with some information ( part before Jump break ). So you can atleast show 5 posts without making the page too much longer. visitor doesn't have to scroll down to see the next post. when he see a interesting post he will click on the post title or Read more button. then it will open a new page. that means another page view. that's good for your blog traffic and adsense. new page views means more impressions to your account. 

Add a Jump Break Manually.

if you are using a basic blogger template you don't have auto Jump Breakwidget installed. so you have to manually add it. When you type your post keep the mouse pointer at the place which you want to add the Jump break. now click "Insert Jump Break" button on blogger tool bar. or you can go to the Edit html view and type <!-- more --> where you want to addJump break. now save that blog post and see how is your post appears. you will see the text before the Jump break with read more text.

In our next post lets learn how to add auto Jump break widget to our blog and how to customize jump break link. you can change the Jump breaktext or you can add an image for it.

How to Import Youtube videos and Upload Videos To Blog posts

Adding a video file to your blog is easier as Adding an image to your blog. There are two ways to insert a video to your blog post. First and common one is inserting Youtube video to blog. Blogger allows you to search and add images directly from blogger. Blogger supports youtube well because blogger and Youtube both are google services. so they work well with each other.  Other way is the video uploading system. Normally most of people doesn't use this feature. you can easily login to your Youtube account ( It's already created when you create your blogger account ) and upload it to your account. 

To add a Youtube video to your blog you have to click Inser a video button on Blogger tool bar. If you are still new to blogging read the basics about blogger tool bar. 

After clicking on the insert a video button it will open the video importer window. you can use the first option to upload a video. second option is to search and insert a Youtube video. you can enter video name and search for it. If you have just uploaded the video, you will have to wait few minutes to appear it on blogger video search window.


After Importing the video you can drag it to left or to right side as you select left or right from image option menu. videos doesn't have an option menu. but you can drag and drop it from any side so you can add text on remaining space on the other side. 


When you adding a video, Blogger will assign a default 320x266 size video frame for it. You cant change the video size from the compose window. You have to edit the Html code for that video file.  


After importing a video file you will see this code on your Edit html page

<object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="Video thumnail iamge target" height="Change" style="clear: left; float: left;" width="Change"><param name="movie" value="Video file target" />
<param name="bgcolor" value="#FFFFFF" />
<embed width="320" height="266"  src="Youtube video" type="application/x-shockwave-flash"></embed></object>


You can change the values of the height and width properties as highlighted in blue color.

View full article here

Change Image Attributes of a Image on Blgger | How to change Image properties using HTML

There are few options available in Compose mode to change the attributes of an image on your blog post. But there are more options available on Edit html mode. In this page let's discuss about image settings on blogger post. you can read about inserting images and working with picasa web albums by the previous post. Read How to Insert images to blogger posts if you are new to blogging. After you have inserted an image to your post you can see image options by clicking on that image. Basic settings are image size, Image alignment and to Add a caption. Those are the only settings you can change on the Compose mode. Rest is available on Edit html mode. 

Image properties on Compose mode.

When you clicked on inserted image you will see the basic image size and position attributes. There are five premade sizes available on that menu. also you can change the alignment of the picture. you can select right or left to Type something on a side with the picture like the first paragraph of this page. "Add a caption" will allow you to add a simple note below the image. I often use it to type "Click to zoom" on my posts.

Image settings on Edit Html.

When you change something in compose mode blogger will automatically create the html code for it. When you insert an image blogger will add the following html code for your post. this is the basic code to insert an image to a web page using HTML.


<a href="Target link"><img src="Direct link to the image" /></a>


Black color part is the code we use to link our image to a link. when you insert an image blogger will automatically add image location as Target link. so when someone click on the image, it will open the image on that window. if you change it and add another blog post link or another website link with http:// it will open that link in the same tab when you click on the image. Thats how we use an image as a Hyperlink. Red color code shows the direct link to the image. Now you are going to learn the basic html tags we use to change image attributes.

How to Change image size.

You can set the exact size to images using HTML code. you can use Height and Width options in <img> tag. Change Blue color values on html mode to change the size.  If you can't see height and Width options in <img> tag, manually add it to the code.


<img height="180" src="Direct link to image" width="180" />


Now go to Compose mode and check your image size. you can learn more about image tag code by changing image settings on Compose mode and check the code again. you will see the changes added to the code. study them and try them with different posts and images.

View full article here

How to Add Images to Blog posts

How to upload images to blogger, How to insert images from other URLs , How to place images on blog posts, How to align and re size images, How to add captions, How to Link images to load in new tab, How to use a Image as a Hyper link. I'll show you how we can do those tasks from this page. When we upload images to our blog, blogger will store those photos in a Picasa web album. Picasa is a free service given by Google. Blogger will automatically create a Picasa web album using your E-mail to store your images. You can manage uploaded photos by login in to Picasa Web Albums Ok lets start adding photos and customize them in our blogger post.

First go to your Blogger dashboard and click on create a new post button or open a saved blog post. Now click on Insert image button on Blogger tool bar. now it will open a simple window with few options to insert an image. look at this Screen shot.

There are 4 options to insert an image to your blog.

1. Upload image directly to blogger from your computer .


This is the default option in insert image window. Click "Choose" button and browse for pictures. Always remember to upload low size files. use Jpeg and PNG file formats for your uploads. they load faster and take very low file size. it can help your site to load faster. Select image and click open button. after your image uploaded to picasa albums, it will show on insert image window. now select that uploaded image and click "Add selected" button. now you will see that uploaded image on your blog post. 


2. Use Already uploaded images that used in your blog .


After you upload images to your blog they will appear on this page. you Don't have to re-upload them or find uploaded image link. this section will allow you to see all photos from the beginning to the last uploaded photo. select the image and click "Add selected" button. now you will see that image on your blog post. 

3. Images from Picasa Web albums .


When you upload first image to blogger, Google will automatically create a picasa web album for you. when you upload images blogger will save them in your Picasa web album. If you have few blogs, there will be different folders for each blog. you can add images and remove unwanted images from your Picasa account by login in to your Picasa web Album.

4. Images from a URL .


You can directly specify an image URL from an external source. if you have any image hosing account, you can use this feature. go to "From a Url" link and enter the direct link to the image. you can get the direct link to a image by Right clicking an image file and selecting "Copy image location" option. 

Read Image Customization Article to learn how to change attributes of an image using Compose and Edit Html views. also you can learn how to use an image as a Hyperlink by reading that page. 

View full article here

This is the second part of the New post windows detail post. If you haven't read the First post click here to read Blogger New Post Window in Detail Part 1 Lets discuss the remaining icons and options and new post window from this post. Im posting the same screen shot here for you to easily read the article. In this newbee blogger tutorial series im posting all very basic things. so everyone can understand. if you are already familiar with blogger and coding you can skip this article series and read our SEO and blogger customization sections.  you can share this posts with your friends who are still new to blogging.  ok lets start talking about remaining icons in new post window.

Im posting the same screenshot used in Part one of the article. you can click on it to zoom

Click to zoom

11. Create Hyper Link Button
This is the link you can make hyper links. Select a text block which you want visitors to go to a other blog page or other website and click on link button. Now it will open very simple window. you can give you the target page and click ok. when your page published you will see that text block as a hyper link. when you click on it you will be redirected to the target page. 


12. Insert image
You can add images to your blog using "Insert image" button. it will let you upload images directly from your computer or insert image from another web site using "From a URL" option.  Lets discuss advanced image adding and customization options in a new post.


13. Insert a video
You can Directly upload video files from your computer to your blog using Insert a video option. Also you can search and add youtube videos using this window. Try adding few youtube videos and uploading few videos to your testing blog. lets discuss more about in video adding and customization in upcoming posts. 


14. Insert Jump Break
Jump breaks are very important when you use normal blogger templates. Most new blogger templates comes with automatically jump breaks. but when you are using basic blogger templates you will have to manually add them. We use jump breaks to add read more.. buttons to our blog posts.  you can add jump break after the first paragraph. now post it and go to home page and look at your post. you will see the first paragraph and a "Read more" button. Lets discuss how we can customize that button and other settings relates to jump breaks in future posts.


15. Text Alignment
This tool is same as other softwares. you can align your paragraphs and texts to left, right, center or justify them as this page.


16. Bullets and Numbering Buttons
You can make lists with bullets or Numbers with these two buttons. You can create lists using <OL> and <UL> Html codes in Edit Html section. 


17. Font size
This is where you can Quote something. Select a paragraph or a text block and click on Quote button.


18. Remove Formatting 
Remove formatting button will remove all Font settings and Colors from selected text.


19. Check spelling
You can turn this on and off when you needed. This tool will show your typing mistakes highlighted in yellow color. 
  
20. Post Label
This is another very important section in blogger. You can easily manage your blog posts and categorize it well if you are using good labels. labels are very useful when you make category menus to your blog. I'll Post another article for Labels and post categorization. 


Hope Now you have the basic idea of new post window. try these things on your test blog in compose mode. lets study more about every single area in future posts with html codes related to them.

View full article here

Now you are ready to write our first post in your blog. You can simply start Blogging by clicking on new post button on your Blogger Dashboard. If you like you can read more about Blogger Dashboard. In this post lets discuss about the new Post window and Blogger tool bar. Blogger tool bar is very simple. But there is every basic things that you want to create a quality Article. There are two sections in new post window. They are "Edit Html" and "Compose". You can create your blog post by using just Html code. if you are better with Html and programming, you can use this mode. Default and easy way is the Compose mode. you can edit your Blog post like you working on Microsoft word. No coding skills needed. Now lets see what are the main items on New post window.

Click to zoom

Now lets see details for each one. 


1. Blog post Title
You have to select a better title for your blog post. This will help your visitors to get an idea about your post and also it will help search engines to index your blog post at right category. Lets talk about SEO in another post. Only thing you have to do is choose a proper title which describes your article in detail.


2. Edit HTML
This is the section you can edit and design your Blog with Html and other scripting languages. if you are better with coding you can use this section. You gonna need this view even you are working with the Compose mode when you are going for advanced blogging.


3. Compose mode
This is the easiest mode to write blog posts. you don't need any coding skills to work on this mode. If you are familiar with simple word processing software like Microsoft word, you can easily use this mode to design your blog post.


4. Undo Button
This button works same as in other softwares. you can revert the last change you added to the blog post. Think that you added a font color and you don't like it. you can simply click on undo button to get the old look button.


5. Redo Button

After you undo a setting, if you want the previous view again, you can click on redo button 


6. Font Type
Blogger will allow you to create your blog posts with few basic and common font styles. most bloggers use those fonts because every operating systems have those fonts. if you like to use another font type you can add them in to your template and a download link to that font file. lets discuss it later. for now you can try with the given fonts. 


7. Font size
There are 5 default font sized added to the blogger tool bar.  just highlight your text and select a font size to apply it. if you want more sizes you can use <h1> <h2> and other tags in Edit Html mode


8. Basic Formatting tools
High light any text and try those formatting. Bold , Italic , Underline andStrikethorough


9. Font Color
This will open a basic color palette. Highlight text and apply a color from this link.  
  
10. Text Background color
If you want to highlight a text block you can use Text Background color option. 


Read next post to read more about those settings and options with remaining button details....

View full article here