How to Add - Stylish About Author widget on Blogger?

"About Me" or "About Author" widget is one of the best widget that brings beauty to any blog or website. We see most of the bloggers online use a customized stylish "About Author" widget for their blogs or websites. The stylish widget will always enhance the look of your blog and makes the blog viewers know about the blog author. If the About Author widget looks routine and not attractive we can't expect the views for About Author page. This widget helps you to expand your social networking stength which could help you in publicizing your online content and could help you in getting more audience by simply adding an attractive "About Author" widget. So we should need a "About Author" widget and and is of no use if it's not attractive.

Let us see the process of adding "About author" or "About Me" widget on Blogger.

---

1. Go to: Dashboard -> Layout -> Add Gadget -> HTML/JavaScript

2. Paste the below code in Content area.

<h2 class="title"> About Me</h2> <div class="widget-content"> <!--[if !IE]> --> <style> } #amazing-bloggertricks:hover { border:2px solid #ccc; cursor:pointer; } .opacity { opacity: 0.5; margin-right: 50px; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); } .opacity:hover { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } </style> <!--[endif]----> <style> #amazing-bloggertricks { border:2px solid #888; margin:2px 5px 0px 0px; padding:2px; } #amazing-bloggertricks:hover { border:2px solid #ccc; cursor:pointer; } .opacity:hover { opacity: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } </style> <img class="opacity" id="amazing-bloggertricks" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4xLCUpWMz3DhsAju-ETbj8c6EsgDqMxje4vu70wBPkSAOXPeQH3I9y3IM51-_E9OwhwiTJRpe6TTiD9zoJOxd5FQIEY0wBJX7u5EHODgrrrKtdGQwz2iaFCQhSM5KyxVIhs_cBfu_GdB/s1600/15694530_h8vngj9_1369589815.jpg" width="100" /> <div style="font-family: Arial Tahoma Verdana; font-size: 12px; text-align: justify; "> <b>Founder & Author:</b> Hi Friends, my name is Arun Kumar Choppara. I am a Software Test Engineer working for a MNC company and also a blogger and addicted web developer. I have started blogging as a hobby and now addicted to it.</div> <a style="color:#5634;" href="http://amazing-bloggertricks.blogspot.in/p/about-me.html" target="_blank">...Read More</a><!--![endif]----> </div>

From the above code, you need to change few thinks as highlighted below.

<img class="opacity" id="amazing-bloggertricks" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4xLCUpWMz3DhsAju-ETbj8c6EsgDqMxje4vu70wBPkSAOXPeQH3I9y3IM51-_E9OwhwiTJRpe6TTiD9zoJOxd5FQIEY0wBJX7u5EHODgrrrKtdGQwz2iaFCQhSM5KyxVIhs_cBfu_GdB/s1600/15694530_h8vngj9_1369589815.jpg" width="100" /><div style="font-family: Arial; font-size: 12px; text-align: justify; "><b>Founder & Author: </b>Hi Friends, my name is Arun Kumar Choppara. I am a Software Engineer by profession and also a passionate blogger. I have started blogging as a hobby and now addicted to it.</div><a style="color:#5634;" href="http://amazing-bloggertricks.blogspot.in/p/about-me.html" target="_blank">...Read More</a><!--![endif]---->

• Your image URL highlighted in Yellow.
• Author Bio highlighted in Orange.
• Author Bio text style highlighted in Red.
• About Me page link of your Blog highlighted in Green.
• Read more link colour in Blue.

3. Save the gadget.

4. Go to (Dashboard -> Layout) and move the gadget to the place where you want to display on blog.

5. Click "Save Arrangement" and View blog to see the gadget added.

 

It's done! You have successfully added "About Me" gadget to your blog.

 

If you like the post, take a couple of minutes to comment and share.

Your comments are most valuable and would help me come up with better posts.

How to Convert - Powerpoint Slides to GIF, JPEG, PNG, TIFF and BMP Images?

Most of the people used to create customized slides with photos and fonts. In many situations thought of using the slides as pictures but failed as we do not know how to convert a Microsoft powerpoint presentation slides into Images or Pictures. Here in this post I will explain the process of converting powerpoint presentation slides into pictures or images of any formats available (GIF, JPEG, PNG, TIFF and BMP).


Process of converting Microsoft Powerpoint presentation to pictures or images of any format.

---

1. Create slides on Microsoft Powerpoint and Save the presentation.

2. Click "Save As" option to save the presentation in a different format.


3. Select the file type = GIF or JPEG or PNG or TIFF or BMP against the "Save as type" drop down provided below the File name textbox in the "Save As" window.


4. Click the button "Every Slide" to convert all the slides into selected image format.
Or Click the button "Current Slide Only" to convert the current slide into selected image format.


5. The slides will get converted into the selected file format and will get the confirmation message as mentioned below.


It' done Guys! All the powerpoint slides are successfully converted to images or pictures of selected image format.

All the images will be available in the path mentioned in "Save As" window.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Add - Effects to the pictures we post on Blogger?

Adding photo effects to the pictures on website/blog makes the posts look beautiful and interesting. The photo effects will make the pictures very attractive and make the content more readable. There are many websites available online that provide Picture Editing services. One of the best picture editing websites I recommend to the readers is LOONAPIX. This website provides four different services mentioned below.

• Photo effects
• Photo Frames
• Face Effects
• Trim Photos

We can apply any of the above effects in just 3 steps as mentioned below.
1. Choose effect - Choose the effect available
2. Upload Photo - Upload the photo to which the effect to be applied
3. Result - Download the photo with special effect applied.
Let us see the process of adding special effects to the pictures.

---

Step1: Select the type of effect from the four available effects.


Step2: Select the type of effect from the four available effects.


Step3: Upload the picture to which the selected effect to be applied.

In case of any adjustments to the photo selected, adjust the photo as required and click "CREATE IMAGE".


Step3: Download the picture with added special effects.

We can download the picture to our computer using the link "Download" and the picture can be changed using the link 'Change photo". Also, the effect can be changed using the link "Change effect".
Similarly we can use the other three types of effects available.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Add - Labels Widget to Blogger?

Labels widget on blogger is very important to arrange the blog posts in different categories. Labels help the posts categorized and makes the visitors to identify the interested posts a click away instead of searching all the blog posts to find their interesting posts.

Let us see the process of adding Labels widget to Blogger.

---

1. Go to: Dashboard -> Layout -> Add Gadget –> Labels


2. Choose the options available for the labels as required and Click "Save".

• Show - All Labels: Show all the labels available for the blog posts.
• Show - Selected Labels: This provides an option of selecting specific labels to show up on the gadget.
• Sorting - Alphabetically : This makes the labels displayed alphabetically on the gadget.
• Sorting - By Frequency: This makes the labels displayed based on the number of posts for each label (the label with highest number of posts being the first and the label with less number of posts being the last in the gadget).
• Display - List: This displays all the labels as a list one in each row.
• Display - Cloud: This displays all the labels one after the other as soon as the previous label ends in gadget area.
• Checkbox - Show number of posts per label: If the checkbox is checked then the count will also be displayed against each label in the labels gadget.

3.  Move the gadget to the appropriate location on the blog layout and click "Save arrangement".


4. View blog to see the gadget added to the blog.

It's done! the Labels widget is added to the blog.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Customize Bullet list styles - with Image hover effect?

There are default bullet styles available on blogger which can be applied to the blog posts. And if you wish to make them more attractive with some images, you can have them changed to any specific or customized images as I explained in my previous post on “Customizing Bullet list with images”. If you wish to make it more customized with hover effect to the images used for bullet style, then follow this post to get it added to your blog.

My previous post on bullet list styles explains the process of adding/replacing the usual bullet list style with images. In this post I will explain the process of customizing the bullet list styles and adding hover effect to the images used for bullet list just like the one in the below image.

---

1. Go to: Blogger -> Layout -> Edit HTML

2. Search for the code ]]></b:skin>

3. Add the below code just above ]]></b:skin>

.post ul {list-style:none; } .post ul li { line-height: 1.4em; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeHkyv0y5qXqCK72F_3xaN-x0R_0MwJjSUkf3eIOkHu-zPew8EKh_t9nNVJMySD3tSQEDK4_sVHERVgeI2wG8qPC0SfPb7q05PZX5c2BXjqB-9rTIphhtnipDW9jNc-mYf_ZARrHMar2zt/s1600/bullet11.gif) no-repeat scroll 0px 4px; margin: 0.3em 0; padding: 0 0 0.8em 40px; } .post ul li:hover { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkQlGZ05mlkUa9Sk691-j-WNukzrlbvxpw1S_T73wuVqhxatYpsvfUlcyys9S1bTeR3zCCQOLYlAPzk0x0SbcofSKMzbWjRn3YkhLxAs07NmZfmdFItKPmwaec_y-c5UXbpLY3Xg8vhYJZ/s1600/bullet12.gif) no-repeat scroll 0px 4px; }

Here, replace the first image URL with the actual URL of the image to be displayed when the cursor is not placed on the bullet point of the list. And replace the second image URL with the actual URL of the image to be displayed when the cursor is placed on the bullet point of the list before using the above code.

 

4. Save Template and view blog to see the changes to all the bullet lists items on the blog.

That’s it guys … We have successfully added the code to make the list bullet style with hover effect.

From here onwards, the bullet list style will be displayed as customized.

 

---

 NOTE: If the Bullet image extends beyond the start of the bullet content, then we need to tweak the code added to the blogger template HTML to correct the bullet content alignment. Increase or decrease the value highlighted in red to change the bullet content alignment.
              margin: 0.3em 0;
              padding: 0 0 0.8em 40px;
I have tested this on my blog and should work.

 

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Change - Home/Next/Previous Links to Buttons?

The navigation between the pages of the blog is very much important as we can't have all the blog spots on a single page. As the number of blog posts extend to multiple pages on the blog (with specific number of posts on a blog page) the blog should always contain the links for Previous and Next posts on the blog. If we are using a blogger template, then the template will come with the links for the page navigation i.e default links for Next, Previous and Home pages of the blog.

Using beautiful buttons for the these navigation links will make the blog look more attractive and user friendly. So we can have the beautiful and customized buttons for the links Previous, Next and home buttons we have on the blogger template.

Let us see the process of Changing the default links to customized cool Navigation buttons.

---

1. Go to: Dashboard-> Template-> Edit HTML

2. Find the below mentioned codes from the blog template HTML code. These codes represents the data to be displayed for Home, Previous and Next links on the blog.

<data:newerPageTitle/> represents the display of Newer Posts link
<data:olderPageTitle/> represents the display of Older Posts link
<data:homeMsg/> represents the display of Home link

3. Now replace these codes with the data/pic to be displayed.
<data:newerPageTitle/> with the new display data/picture for newer (next) posts
<data:olderPageTitle/> with the new display data/picture for older (previous) posts
<data:homeMsg/> (only the first one) with the new display data/picture for homepage

Examples

---

Example1: Replace the default display with new display data

Example2: Replace the default display with a display button image

Example3: Replace the default display with a display button image as well as different Text display.

Just add the display text before the end tag </a> from the above code in Example2 to display both the button image and new text display.

 

Now we are familiar with the process of changing the Next/ Home/ Previous links to Buttons on the blog.
If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

How to Add - Live Feed Widget to Blogger?

Would you like to know who are visiting your blog? Need information regarding your blog audience? If you are looking for the answers for these questions, you are at the right place. In this post I will take you through the process of adding a freely available tool that provides you “Live Traffic Feed” of your website/blog.
FEEDJIT is a free live traffic tracking tool available online that tracks the information related to website/blog visitors in real time and identifies what pages are visited. It always lets you know, who is visiting your website/blog at this point of time. This can be done by simply adding a Live Traffic Feed and instantly start seeing the people visiting your website/blog as soon as they land on your website/blog. The Live Traffic Feed provided by FEEDJIT will give the most important information mentioned below.
1. Name of the Visitors
2. City and country your visitors are from
3. The website they arrived from, incase of any
4. The time when they arrived to your website/blog in days, hours and minutes
Live Traffic Feed tool provided by FEEDJIT is completely free and get it added to your website/blog without any money spent from your pocket. There is nothing like trial period for using. So guys it’s shows your real-time view of your site traffic. Adding FEEDJIT Live Traffic Feed to your website/blog will just take a couple of minutes.

Step1: Get the HTML/JavaScript Code for your customized “Live Traffic Feed” widget from FEEDJIT.

---

1. Go to: www.feedjit.com
2. Click “Choose Your Feedjit” button as shown below.

3. Then Click the button “Sign Up” to get a completely free Freejit as highlighted below.

4. You will be navigated to a different page where you can customize the Live Traffic Feed display as shown below.
Use “Click to Select” drop down menu to select the colour schema of the display.
Use “Select widget width” to select the width of the Live feed display.
Use “Number of visitors Feedjit shows” to select the maximum number of feeds to be displayed at any time.
Use “Cutomize your colour schema” to change the the colour of different items displayed in widget.
Check the checkbox “Show where visitors came from”

5. Now get the HTML code for the “Live Traffic Feed” widget using the option “Other blog or Website” from the drop down list and click “Go!” button as highlighted below.

6. Now copy the HTML code generated.


Step2: Add the copied HTML/JavaScript code as a sidebar widget to your blog as shown below.

---

1. Go to :Blogger –>Dashboard –> Layout –> Add a Gadget –> HTML/JavaScript

2. Paste the copied code and save the gadget

3. Click “Save Arrangements” and View blog to see the “Live Traffic Feed” widget added to your blog as shown below.


That’s It Guys. The “Live Traffic Feed” widget is successfully added to the blog.
Try it on your blog and feel free to post any questions on this post. I will get back to you as early as possible.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.