Thursday, 16 July 2015

How to add drop down menu to blogger

 In this post you will learn how to add simple drop down menu widget to your side bar. This will reduce cluttering of too many links and helps in displaying your most favorite labels in space saving way.



    Log in to Blogger

    Navigate from the Dashboard to Layout > Page Elements.

    Click on Add a Gadget in the sidebar or other location if you wish

    Select a HTML/JavaScript gadget from the list of gadgets

    Paste the following code into the content box of the widget:

        <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
        size=1 name=menu>
        <option>- Your Menu Title -</option>

        <!-- Change the following links to your own -->

        <option value="http://URL of link1">Link 1</option>
        <option value="http://URL of link2">Link 2</option>
        <option value="http://URL of link3">Link 3</option>
        <option value="http://URL of link4">Link 4</option>
        <option value="http://URL of link5">Link 5</option>

        <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
        </select></form>


    Replace _blank as follows:

        To have a new window open leave the same

        To have the new page appear in the same window replace _self


    Replace - Your Menu Title - with a title of your own

    For each instance of the option values highlighted in red substitute your own links and link names. For example:

    <option value="http://bloggermason.blogspot.com">blogger mason</option>

    Click Save

    Use drag and drop to position the drop down menu widget in the location you want it within your sidebar and save any changes

    Click View Blog to admire the new drop down menu in the sidebar of your blog


Saturday, 2 May 2015

Creating grid view with thumbnail images in blog

A grid view of thumbnails  give pleasant browsing experience. We find them pretty comfortable on our smart phones to select required apps and pictures on galleries. Bloggers can have that experience on their blogs too. Here we shall learn how to create  awesome grid of thumbnails which can be linked to favorite posts, youtube videos or any thing else. You can see 3 X 3 thumb nail grid below. These thumbnails can used as buttons to web sites or affiliate sites too. I have linked these thumbnails to some of my blogs and affiliate sites. You can test these your selves now.

ajanthapainting.blogspot.in

http://www.flipkart.com/samsung-galaxy-s-duos-3/p/itmey8vrqvzyjbn2?pid=MOBDZRDTQRSAHE3N&affid=biologyin

flyinglantern.blogspot.in

http://www.snapdeal.com/products/mobiles-mobile-phones?MID=custom_search_mobiles?utm_source=aff_prog&utm_campaign=afts&offer_id=%3COffer_ID%3E&aff_id=37738

homebroom.bloogspot.in

biologyexplain.blogspot.in



How do you feel? Are they awesome? You can too add them to your blog, here we go

1. Add below code for 3X 3 table to your post in Html editor

<table border="2"width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>

</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>

</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>

</tr>
</table>

2. Turn to compose mode and you can see a table appears like this

Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

3. Open Photo shop soft ware and prepare 'Nine' thumbnail images with 150 X 150 pixels dimensions and save them with proper names in Jpg format.

4. Open blogger and replace text in nine cells with images you made earlier using insert image tool.

5. Update the post and check once if your thumbnails are displayed properly.

6. If you like to add links to thumbnails, select a image in cell and add link to it using 'Add or remove link' tool. While adding link to image it may not respond first time, click it again to open "Edit link" window and paste the link and save.

7.Update the post and test the thumbnails once.

Note:- Creating images larger than 150 X 150 pixels may cause the thumbnails to encroach into side bars.

 If you wish to have more rows down, just add code again and again as shown below and that creates extra three cell rows below.

<table border="2"width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>

</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>

</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>

</tr>
 <tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>


</tr>
 </table>

If you wish to hide lines of table just replace table border attribute "2" with "0"  you can see as below.


ajanthapainting.blogspot.in

http://www.flipkart.com/samsung-galaxy-s-duos-3/p/itmey8vrqvzyjbn2?pid=MOBDZRDTQRSAHE3N&affid=biologyin

flyinglantern.blogspot.in

http://www.snapdeal.com/products/mobiles-mobile-phones?MID=custom_search_mobiles?utm_source=aff_prog&utm_campaign=afts&offer_id=%3COffer_ID%3E&aff_id=37738

homebroom.bloogspot.in

biologyexplain.blogspot.in



I hope you enjoyed this cool tutorial, this is kiran on Bloggermason.blogspot.in . We shall soon meet again with great blogging stuff.Mean while Share this with your friends just for fun.