Yesterday I had written an article about OnlineProfits re-lauch and I had used rollover effect to one of the images there, and some people asked me how I did it(Simple Ans: See the source code ).
So here is the simple code to achieve this design effect:

<a href="Destination Address" 
ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" ' 
ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" 
'><center><img src="ImageURL-to-be-shown-by-default" 
NAME="thinkwithsatish"/></center></a>

Explaination:
ONMOUSEOVER and ONMOUSEOUT are valid JS effects. Since all most all browsers support JS, this works fine.

Give a name to the actual image to be displayed:
<img src="URL-of-default-image" NAME="thinkwithsatish"/>
I have named above tag src as thinkwithsatish. Now Refer to this name by using ONMOUSEOVER and ONMOUSEOUT commands.

ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" '

ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" '

Hope the rest of the code is self explanatory.

Code in action!:

Now you can test it by taking your mouse pointer in and out of image area. If you don’t see any changes, place the mouse pointer over the image for some time – because in some cases, it takes some time to load.

I see that, it works perfectly in Mozilla FireFox, Internet Explorer and Chrome. I haven’t tested it in other browsers. And interestingly, I saw it working even in RSS feed!

Many people use content management system software like WordPress, to publish their content. So in order to include a RollOver effect using JavaScript means – editing the header part or installing a plugin which does the job etc. So instead we can incorporate this simple coding to get the design effect.

Design Tip: This is just the coding/programming part. To get the effect on the design, you must choose such images which will have good effect on users mind. So choose the images wisely.

I am not sure, how helpful it is to you. But it surly helps me sometime to get some minimal design effects on my WordPress blog posts.

• Stay Tuned, we are coming up with a awesome announcement, that you will love!


• "60+ Ways To Increase Your Twitter Followers" -- Please (review)Stumble and Tweet


• ”Tips, Tricks and Strategies to Make Money Online” Free ebook


• Click here to download Yaro Starak's FREE video tutorial.

The post Image Rollover Effect – using Simple HTML first appeared on Technotip.org.

Do you want to highlight something on your blog homepage as “Featured Article” ?
It may be some of your best content that is popular and you wish to highlight it. In some case you can show your blog contests or Your email Newsletter Service just above your latest articles(above the Fold).

A featured Section is basically an area where you want your readers to focus and “Call to Action”. Technotip.org uses a “Featured Article” section on the Homepage that showcases some of the best content published recently.

If you want to design a similar feature in your Theme then read on. I have described two Methods to Create the featured section for your theme.

Procedure A : This Method Is Simpler. It shows a particular(selected) article in your Featured section of the Homepage. But In future if you want to change and show another article, you have to manually edit your index.php file and change the ID of the post being called. This technique can be used, if you are planning to have an article permanently or for a long time in the featured section.

Procedure B : This Method is a Bit Geeky. But its actually worthwhile. This procedure is used, if you want to show a latest post from a Particular category (or tag) in your Featured section automatically. You just need to Tag your post and the postlist plugin does rest of the job for you!

Procedure A
Step 1: Create a Back Up Copy of your Template : Always create a back up copy of your original theme. If things go wrong, you can restore your Theme using the backup. Use any FTP client ( I recommend using FileZilla ) and download the current theme of your Blog to your computer. Create a copy of that Theme and work on the customizations that we are going to discuss in this article.

Step 2: Upload the WordPress plugin and activate it Download the get-a-post WordPress plugin and upload it to your wp-content/plugins directory. Activate the plugin. No customizations are required.

Step 3 : Write a new post that you want to show in Featured Section If you want to show something static in your featured section, then you need to create a new post and publish it in a back date. This will prevent your article from appearing in the homepage as a repetition[duplicate copy]. Note down the ID of the post. You will need it later on.

Hover your mouse pointer on the published post(in the wp-dashboard) and see at the bottom(status bar) for the article ID.

For example : You may wish to show a Newsletter Service or Some Freebies In your Featured section. In that case create your new article and publish it in a back date.

Step 4: Customize your index.php The index.php file is responsible for showing your Homepage. Open Index.php file in any HTML editor or Notepad and find the following code

<?php if (have_posts()) : ?>

Add The following code just Before it..

<!-- The Intro section.Start editing -->
<div class="intro">
<?php get_a_post(ID); ?> 
<!-- Replace with the Post ID that you want to show -->
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<!--The Intro section ENDS.STOP editing here -->

See this Screenshot for Better Understanding :

Remember to replace ID, with the ID of the post that you wish to see in your featured section.

What we are doing here : We are creating a separate class called intro, that would contain your Featured section’s styling(CSS). And we are using the get_a_post plugin to call a particular post in that section. This Section will be called just before the array of posts that appear in your homepage. Its placed ahead of the Loop.

Note:
A word of caution: Here we are using the class as “intro”. Check Your template, if you are using the same class name already, then it may mess things Up. In that case Simply use a different class name.

5. Style Your Featured Section: Ok All Set. Now you Need to Style your featured section and add Width and Height parameters.
Open your Style.css file and add the following code:

.intro{
margin:0px 0px 30px 20px;
padding:10px;
border:1px solid #CCCCCC;
width:570px; /* EDIT THIS WIDTH */
height:200px; /* EDIT THIS HEIGHT */
background:#F4F7FC; /* background color of the box */
}

You have to customize the CSS of your Featured Section according to your template. It involves modifying the width and background colors, padding borders etc. Make sure to adjust the width and height of the box or else your featured section may break up.

6. Upload the New theme In Your Themes Directory and Activate it You are ready to shoot. Upload your theme and See the Difference.Your Homepage will show your featured section. Test your featured section. Change the heights, width or other parameters and make sure your featured section looks clean and neat. You may want to use Firebug(addon), its Brilliant for testing Designs.

Procedure B
Back up your Template: Please create a back up copy of your original theme, so if things go wrong you can restore your theme to its previous state.

Step 1: Download the postlists WordPress plugin and activate it.
Step 2: Log in to your WordPress admin panel and Create a unique Tag (say “Feature”). You will be Using this particular tag to show a post in the featured section. So use them only on those posts that you want it to appear in the “Featured Section”.
Step 3: Select Postlists Under The Posts Menu and Create a New List.Name It “Feature”.
Step 4: Start Editing Your List. At First Define a placeholder for your list. You will call this placeholder from your Index.php file.

Step 5: After that, you will see two boxes each for html codes before and after the list. Keep both of them blank.

Step 6: Next you will See “HTML code for each entry”. Paste the following code in the Box Provided. A typical HTML entry that shows one of your article:

<div class="post" id="post-<?php the_ID(); ?>">
<p><h2><a href="%posturl%">%posttitle%</a></h2></p>
<?php the_content(''); ?>%content%
</div>

Step 7: Select the minimum and maximum number of posts to show in your Featured section. If you want to show only 1 post then select one in both the cases.

Step 8: Select The rule “Show Only Posts of this Category”. Keep it Blank.

Step 9: Select The rule ” Show Only Posts of this Tag”. Select the Tag that you created in step 2.( In this example its Feature.)

Step 10: Select the Rule “Show only Posts With this status”. Use “published” as the option.

Step 11: Select the rule “Show only Posts With this type”. Use “Posts” as the option.

Step 12: Leave All other rules as Blank. See the screenshot below and study it carefully.

Save your list. You are done Configuring your list. Whenever your list is called, it will show a latest post of the tag that you have specified in step 2.
Step 13: Now you need to call your list in the desired area from the Homepage. Open your Index.php file and look for the Following code:

<?php if (have_posts()) : ?>

Add the following code just before it:

<div class="intro"><?php if( function_exists("pl_postlist") ) pl_postlist("Feature");?></div>

Please note that, we are calling the placeholder that we had created in Step 2. (In this example its “Feature”)

Step 14: You have to Style your Featured Section. Note that we have Kept the Featured section under a Unique Class “Intro”. Add The following code in your Style.css

.intro{
margin:0px 0px 30px 20px; 
padding:10px;
border:1px solid #CCCCCC;
width:570px; /* EDIT THIS WIDTH */
height:200px; /* EDIT THIS HEIGHT */
background:#F4F7FC; /* background color of the box */
}

Modify the Intro Style as per your need so that it blends with your theme. Please be careful: If your Template already Uses the Class “Intro” then this would override the already described class. In that case simply replace the name Intro in step 13 and 14 with some other Unique name.
Step 15: All done. Upload the new theme and activate It. Select a post from your archives and Tag it with “Feature” tag. Now browse your new theme. You will have your new featured Section ready.

Some rapid questions[FAQ]:

Q : I want some of my Best Content In the featured Intro section. How do I change the Posts ?
A : If you are Using method A Open index.php and Find < ?php get_a_post(ID); ?>.Change the ID of the post as per your need.

If you are Using Method B Tag The Post as “Feature” (or your own Customized tag).

Q : How do I show My latest post or a list of post automatically in the featured section ?
A : If you want to show your latest Post or a list of posts in the Featured section automatically, then follow procedure B.

Q : Can I Use the “Read More” excerpt in that Section ? Can I Use images or Videos ?
A : Of course you can. Treat the article just as you treat any other article of your blog.

Q: Can i show any of my pages in that section ?
A: Yes you can . But it needs Some customizations. If you are Using Method A Visit the plugin page for more Information. If you are Using Method B then Select the rule : “Show posts of this Type ” and Select “pages”

Q: My Theme has broken since i installed your code. What should I do now ?
A: You can restore your theme if you had already backed it in step 1. If not leave a comment in this article. I will help you in sorting it out.

Q: I Know very little about Coding WordPress themes. Can You help me out ?
A: Why Not. I can help you code the featured section (provided I get fewer requests). Please feel free to leave your comments in this article if you need any kind of support. I love to help fellow Bloggers and I have learnt this from the Host : Technotip.org

Guest article written by Amit Banerjee from Ampercent.com, a popular technology website with tech articles, tutorials and how-to guides related to software, computers, and internet.

• Stay Tuned, we are coming up with a awesome announcement, that you will love!


• "60+ Ways To Increase Your Twitter Followers" -- Please (review)Stumble and Tweet


• ”Tips, Tricks and Strategies to Make Money Online” Free ebook


• Click here to download Yaro Starak's FREE video tutorial.

The post How To Show A WordPress Post As Featured Article first appeared on Technotip.org.

Before trying any of the below mentioned tips/tricks, backup your theme — Goto “Layout” -> “Edit HTML” and click on “Download Full Template”..
This article is only for education purpose and I am not an expert in coding blogger templates, so try at your own risk. By changing the default behavior of the blogger blogs, you may be violating their policy. So we make it clear that, this article is only for education/learning purpose.

1. To insert Meta tags:-
Place

in between <head> </head> tags.

In the above code expr:content= ‘data:blog.pageTitle’ gets replaced by the title of your current page. So when combined with the common description tags, the description tag becomes unique for each page. Also do not forget to replace “Put in your common description tags here” with some description of your website(this will be common for all pages of your website.)

2. Read more option (show only post Excerpt in the home page):-

Login to your account and click on the “Layout” tab. Then select “Edit HTML”. Check ” Expand Widget Templates”.
Now search for </b:skin> and paste the below code between </b:skin> and </head>

<!-- Style to implement "Read more.." link in all the posts (Start) -->
<style>
    <b :if cond='data:blog.pageType == "item"'>
        span.fullpost {display:inline;}
    <b :else/>
        span.fullpost {display:none;}
    </b>
</style>
<!-- Style to implement "Read more.." link in all the posts (End) -->

Now search for <data:post.body/> in the template HTML and paste the following piece of code after <data:post.body/>

<!-- Code to show "Read more.." Link (Begin) -->
          <b :if cond='data:blog.pageType != "item"'>
              <span>
                <a expr:href='data:post.url' 
style='color:#0000FF; 
text-align:right;
font-weight:bold; 
text-decoration:none' >
Read more..
</a>
             </span>
          </b>
          <!-- Code to show "Read more.." Link (End) -->

Save it. That’s all about coding part of the theme. To show only post excerpts on the homepage, you need to insert <span class="fullpost"> post excerpt.Remaining article will be shown after clicking on "Read more.." link.</span> . Now your articles and blog will look more professional.

3. Hide the Blogger navbar:-

Add this line #navbar-iframe {display: none !important;} before /* Variable definitions

or

Paste below code inbetween <style> </style> , before </head> .

<!--Code to remove blogger navbar-->
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
<!--End of code to remove blogger navbar-->

4. Post articles from email:-

Goto “Settings”, click on “Email” option. And set the email ID, and start posting articles from your email ID.
Its interesting to note that, you can post upto 10MB of images directly from your email.

5. Bulk image uploader(for firefox users only):-
Use “Drag Drop Uploader” FireFox Addon and upload as many images as you want.

6. Change the default favicon and put your favicon, great for branding purpose:-
Upload your favicon(an image of 16 x 16 pixels or 32 x 32 pixels with .png, .gif, or .ico extension. Use either 8-bit or 24-bit colours.)
Now paste below code between <head> </head> tags.

<link href='Uploaded favicons URL' rel='icon' type='image/gif'/>
<link href='Uploaded favicons URL' rel='shortcut icon' type='image/gif'/>

Book mark this article, as there is more to come, as we investigate and play with Blogger.
We thought of making this a serious post, but it would annoy visitors as they need to navigate to different pages to get what they want. So we decided to keep all things at one place. Hope this article is of some use for some of you. If this article helps you in anyway, then please share this story with as many people as possible.Thanks

• Stay Tuned, we are coming up with a awesome announcement, that you will love!


• "60+ Ways To Increase Your Twitter Followers" -- Please (review)Stumble and Tweet


• ”Tips, Tricks and Strategies to Make Money Online” Free ebook


• Click here to download Yaro Starak's FREE video tutorial.

The post Tips,Tricks and hack for blogger blogs first appeared on Technotip.org.