Rilwan's

HTML code for email buttons in Blogger

2009-12-01T17:30:00.000-08:00

Today i am sharing a simple code that you can add to the page element . You can add such images in your blog/website and link them to mail you when they are clicked .

Go to dashboard of your blogger > Layout > Add a Gadget > HTML/JAVASCRIPT
Add the below codes to it-


<a href="mailto:rilwan@rilwansaeed.com">

<img src="http://gickr.com/results2/anim_1389bd1c-fbc4-2b74-99ea-61b893307efb.gif"/></a>

.Add your email in red colored place.
Change the blue color if u want change the image link

Microsoft Details Dates, Versions of Office 2010

2009-12-01T15:03:00.000-08:00

Microsoft plans to release its Office 2010 software suite in both 32-bit and 64-bit flavors, making it the first Office suite to support both versions. As its name suggests, both versions will be available sometime next year. In a statement, a Microsoft spokesperson said "Microsoft Office 2010, Microsoft SharePoint Server 2010, Microsoft Visio 2010, and Microsoft Project 2010 are scheduled to enter technical preview in the third quarter of 2009 and become available in the first half of 2010." After the productivity suite is shipped to manufacturers, Chris Capossela, senior vice president, Microsoft Office has said it takes six weeks to four months or more to reach PC users.

Applications included in Office 14 suite are Word 14, Excel 14, Powerpoint 14, Outlook 14, Access 14, InfoPath Designer 14, InfoPath Filler 14, Publisher 14, Groove 14, InterConnect 14, SharePoint Designer 14, OneNote 14, Visio 14, and Project 14.

One of the most significant new features of Office 2010 is the addition of a Web-based version of the software. Microsoft announced this feature at its Professional Developer Conference in Los Angeles last September. The company has said there will be a free, ad-supported version. Microsoft is still working out fees for businesses who want a version without ads. A Web-based version would make it possible for Office to run on Linux or the Apple iPhone.

Office 2010 was formerly known by its codename, Office 14. As you’ll recall, Office 2007 was codenamed Office 12. Microsoft skipped “13” because it was supposedly suspicious and superstitious about the connotations associated with the number. Screenshots of the latest Office suite (in beta mode) were leaked in January.

Combined with Windows Vista, Office 2010 is set to push 64-bit onto the masses. Until Office 2010, the suite has only been available in the 32-bit flavor. The benefits of running Office in a 64-bit environment may not seem very exciting at first, but it could help expedite 64-bit adoption among other vendors. Moving to 64 bits also provides the ability to take advantage of more RAM than the 4GB limit that exists with 32-bit OSes. Theoretically, 64-bit systems can support up to 16.8 million terabytes, though other system limitations make that quantity of RAM unfeasible at the present time. In addition, users who access large databases and spreadsheets as well as those who use multiple programs simultaneously could benefit from the move to 64-bit.

Microsoft also plans to roll out Service Pack 2 for the Office 2007 suite on April 28th.

How to add Social Bookmarks in Blogger Posts?

2009-11-14T22:05:00.000-08:00

The best way to improve your reader's count is to add a social bookmark at the end of every post. This makes it easy for the readers to bookmark the post page using their favorite social bookmarking service (eg: Del.icio.us, Technorati, etc..) My post features to add some of the best social bookmarks at the end of every post.

Here's how to add social bookmark buttons at the end of each post:
1. Go to "Layout->Edit HTML (check the "expand widget templates" option is ticked). You should make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page first.
2. You need to search for the following line in your expanded template.

.
3. Paste the following code just after the above line.


<!-- Start of social bookmarks -->

<b><i>Share this:</i>

|<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title'

target='_blank'>Digg It</a> |

<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'>Add to Technorati</a> |

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title'

target='_blank'>Save on Del.icio.us</a> |

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title'

target='_blank'>Stumble It</a> |

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title'

target='_blank'>Share on Facebook</a> |

</b>

<!-- End of social bookmarks -->

.
4. Preview your blog to make sure the bookmark button appears as you want at the end of the posts. Your final output should be like the one at the end of my post.

How to create four column blogger footer

2009-11-10T17:07:00.000-08:00

In my older post i have told how to Create Three Column in blog Footer and today i am going to tell you how to make it four so you can make four columns in your blogger footer so that you can add page elements to four different columns in the footer as in the below image.

Step 1. Login to your Blogger Dashboard

Step 2. Go to Layout >> Edit HTML , do not check the "expand widget templates" box. This will simplifies the process

Step 3. Back up your existing blogger template (Click on 'Download Full Template' to Back up)

Step 4. Now search these line of codes or similar Ctrl+f ( footer-wrap, footer, footer-end etc


<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Replace section code in red with below code


<div id='footer-column-container'>

        <div id='footer1' style='width: 225px; float: left; margin:0; '>

    <b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>

<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>



</b:section>

    </div>



      <div id='footer2' style='width: 225px; float: left; margin:0; '>

    <b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>

<b:widget id='Text4' locked='false' title='About Author' type='Text'/>

</b:section>

    </div>



      <div id='footer3' style='width: 225px; float: right; margin:0; '>

    <b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>

<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>

</b:section>

    </div>



  <div id='footer4' style='width: 225px; float: right; margin:0; '>

    <b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>

<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>

</b:section>

    </div>





<div style='clear:both;'/>

</div>

Now you need to add CSS for these section, add below CSS code right above


]]></b:skin>

#footer-column-container { border: .3px dotted #cccccc;}

.footer-column { margin: 0 10px 0 10px; padding:5px;

color: #666666; line-height: 1.5em; font-size:12px;}

.footer-column h2 {

padding-bottom:.15em; text-align:center;

font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";

color:#333333;

line-height:1em; letter-spacing:.1em;

border-bottom: 1px solid #cccccc;}

.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}

.footer-column ul li {

background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;

margin:0 0 0; padding-left: 16px;

padding-bottom: 0.5em; line-height:1.2em;}

.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

Preview and Save your template. Now you will have four column at footer section

Blog Search Box for Blogger

2009-10-05T13:24:00.000-07:00

Add a search box to your blog so that the visitors and feel easy to find articles or posts
So go to LAYOUT-ADD PAGE ELEMENT Html/Javascript
and now add the below codes


<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

Now change the text in red to any text you like search or hit you want to display in button to hit the search.

Create Three Column in blog Footer

2009-10-05T13:00:00.000-07:00

Create Three Column in blog Footer so you can add page elements in that columns such as google ads etc.
GO TO BLOGGER LAYOUT > EDIT /HTML

Now (Ctrl + F)Search for below codes,


div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

After getting these codes just replace the red line with the following codes,


<div id='footer-column-container'>



<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>



<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>



<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>



<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>



<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>



<div style='clear:both;'/>



<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>



<b:section class='footer' id='col-bottom' preferred='yes'>

<b:widget id='Text2' locked='false' title='' type='Text'/>

</b:section>



</div>

<div style='clear:both;'/>



</div>

Now find


 </b:skin>

and place the below codes before it


#footer-column-container {

clear:both;

}



.footer-column {

padding: 10px;

}

And save Your Template now.

Now Go to Page elements you can see three column created in your footer above your main footer. like below

Horizontal Top Menu For Blogger

2009-10-04T00:48:00.000-07:00

It look nice to have a menu bar as shown in
Just Go To Layout > Edit Html

And Search For


</b:skin>

Now add these below codes above it-


/* ----- LINKBAR ----- */

#linkbar {

margin: 6px 0px 0px 0px;

padding: 0px 0px 0px 0px;

width: 100%;

position: relative;

background: #000;

border: 1px solid #000;

border-bottom: 0;

}



#linkbar ul {

margin: 0px 0px 0px 0px;

padding: 5px 5px 7px 5px;

text-align: left;

list-style-type:none;

}



#linkbar li {

display: inline;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

}



#linkbar h2 {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

display: none;

visibility: hidden;

}



#linkbar a {

clear: both;

margin: 0px -4px 0px 0px;

padding: 3px 20px 3px 20px;

width:100%;

text-decoration:none;

font-family: arial, sans-serif;

font-weight: bold;

font-size: 12px;

color: #fff;

border-right: 1px solid #fff;

}



#linkbar a:hover {

color: #000;

background: #fff;

}

Now Search for below codes-

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>

</b:section>

</div>

And add the below codes after the above codes:-


<div id='linkbar-wrapper'>

<b:section class='linkbar' id='linkbar' showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>

<b:includable id='main'>



<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>



</div>

</b:includable>

</b:widget>

</b:section>

</div>

Thats It Now Preview It.If its working fine just save your template.

Now Goto Page elements and you will see an gadget named linkbar in your blogger layout below the header of you blog,click the Edit Button On that gadget an window will open and add the link you want to show up in your blog top menu from there and can manage all menu links from there .Its so easy,i hope will like this tutorial.

How to make main page post shorter

2009-09-27T21:18:00.000-07:00

Some bloggers posts/articles are too long it takes much space from the main page so the main page seems to be too long.Today i will tell a solution for this so your blog may look more professional.
Go to Dashboard-Setting-Basic
now you will see it as in the picture below

change old editor to updated editor

now you can apply "Read more >>"as shown in the picture to your posts hope you got it.