Valkhery

I think you already know what is this tutorial mean based on the title. This script will display your recent post in the front page (only in the front page). Kinda annoying but looks cool coz it will drop down automatically and will follow when you scroll down the page. Also, it has an option to dismiss the box so you will able to see all of the page clearly.

Ok lets get it on.

First, login to your admin panel (dashboard) then go to Appearance -> Editor

Open Main Index Template (index.php) to edit the file. Put this codes in:

<!-- Floating Menu -->
<div id="floatregbar">
<?php query_posts('showposts=1'); ?>
 	<?php while (have_posts()) : the_post(); ?>
<h2>Recent Post: <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a><span class="floatclose"><a href="" onClick="closebar(); return false">x</a></span></h2>
<div class="floatcontent">
<p>
<?php the_content_rss('', TRUE, '', 80); ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read More >></a>
</p>
<?php endwhile;?>
</div>
</div>

Save it! Then open Stylesheet (style.css) to edit the look and display. Put this code on, you can change the property and value into whatever you like. But if you new in scripting, just copy and paste the codes.

/* 11.6 Recent Post div box */
#floatregbar{
position: absolute;
font-family: Trebuchet MS;
width: 650px;
visibility: hidden;
z-index: 100;
}
#floatregbar .floatcontent {
background: #FFF;
font-size: 11px;
text-align: justify;
line-height: 14px;
padding: 6px;
border: 1px solid #CECECE;
border-top: 1px solid #808080;
color:#000
}
#floatregbar A:hover {
text-decoration: none
}
#floatregbar H2 {
background: #E8F1D0 url(none)  repeat-x ;
COLOR: #587F02;
border-left: #CECECE;
border-right: #CECECE;
border:1px solid #808080;
font-size:11px;
FONT-WEIGHT: bold;
letter-spacing: 1px;
padding: 2px 0 2px 6px;
margin-bottom: 0px;
}
#floatregbar H2 span.floatclose {
float: right;
padding-right: 15px;
margin-top: -15px;
}

Don’t forget to save the file. And the final step, adding some javascript to make it works. Download the source codes here: Float.txt. Copy the whole codes into any text editor (notepad or dreamweaver) and save as “float.js“. Upload the file to your hosting site. Copy the url and put it in the code below:

<script type="text/javascript" src="url_float.js"></script>

Get back to template editor in your admin panel, open Header (header.php) and copy the codes above then paste before </head> tag. Hit save button and your done! Here is the live preview: http://valkhery.co.cc

(Source: dynamicdrive)

PS: You can republish this article on your blog, but please, since this was originally made by me (Valkhery), you need to put my name and my blog link as the author. Thats the way we appreciate each other. Thanks.

Tags: Internet, Stylesheet, Tweaks, Website

This entry was posted on Saturday, May 30th, 2009 at 6:52 am and is filed under Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.