The most easiest way to achieve a rollover effect without using java-script (which one part goues into page header and slows down the page loading) is this one. You can use it even in in your blogposts!
<div style="text-align: center;"><a href="#">
<img alt="Click Me" onmouseout="this.src='http://www.pic1.jpg'" onmouseover="this.src='http://www.pic2.jpg'" src="http://www.pic1.jpg" />
</a></div>
You want to import WordPress Posts, Pages or Widgets into the rest of your static (HTML) coded website? It's possible!
Supposed, your web presentation is on www.example.com, and the wordpress part is on: www.example.com/blog.
The access to Wordpressu "from outside" is possible thru wp-blog-header.php. This file loads Wordpress application and makes it API, which allows you the access.
Once inserted in "static page", you can call all of its's funktions like making a WordPress Themplate (Theme).
Let's say you want to import from WP the Latest Post into your www.example.com/index page. The only possible way for this is that your index page has the .php extension. If you have the .html or .htm extension just change it!
Keep in mind your linking to the rest of the site (!) The easiest way for that is to make a new index.html page with redirection to your index.php page! Use this redirection trick (copy the code in Notepad/Dreamweaver/MSFrontPage and save it as index.html):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0; URL=http://www.www.example.com/index.php">
<title>Redirecting Page</title>
</head>
<body>
</body>
</html>
Now, at the very top of your index.php (Home) page insert following code:<?php
// Include Wordpress
define('WP_USE_THEMES', false);
require('./blog/wp-blog-header.php');
? >
The first line is just a comment on what we are trying to do. The second one tells WordPress not to use template. Third calls our importatnt function, we are talking here about.
Now, we scroll the page down and find the place where we want "Latest Post" to show up, and insert this code:<?php query_posts('showposts=1'); ?"
<?php while (have_posts()): the_post(); ?"
<?php endwhile; ?"
In first line: we look for the latest post, in second: we call the loop, and in third we close the loop.
If you don't want the latest post but something else, please take a look on query_posts() documentation which shows variations on this issue.
To style a bit our code above (show Title and ...Read more), you'll need some knowledge in HTML... But here is an example on how to do that: <td bgcolor="#ffffff" style="padding: 10px; border:1px solid #dbdbdb" align="left" >
<font face="Arial" style="font-size: 10pt" color="#000000"><p align="left">
<?php query_posts('showposts=1'); ?>
<?php while (have_posts()): the_post(); ?>
<?php the_title(); ?>
<?php the_excerpt(); ?>
<p><a href="<?php the_permalink(); ?>">Read more...</a></p>
<?php endwhile; ?></font></td>
I have found out that you can use this trick to import WordPress functions from completely different websites, but they must be hosted on the same server. Use this code to do that:<?php
// Include Wordpress
define('WP_USE_THEMES', false);
require('/var/www/example.com/blog/wp-blog-header.php');
query_posts('showposts=1');
? "
Note: in some cases it might not work, it has to do with some PHP restrictions on your web server! It can be solved with use of "curl.php" (but it's another topic).
At the end: if you don't want to import the "Latest Post", baut something else (i.e. Categories, Comments, Tags... whatever), please take a look of WordPress list of all tags used to make Templates: LINK
An example for Categories would be:<td bgcolor="#f6f6f6" style="padding-left: 20px; border:1px solid #dbdbdb" align="left" >
<font face="Arial" style="font-size: 10pt" color="#000000"><p align="left">
<?php wp_list_categories('title_li=0&orderby=name&show_count=1'); ?>
</font></td>
If you have a WordPress powered blog with lot of comments, it might be good idea to somehow highlight comments posted by Administrator. It looks better and it's much easier to follow comments.
1. To do so, open the style.css of theme you use and place anywhere this code:
li.bypostauthor {
/* CSS styles for author comments */
background-color: #FFFFCC !important;
}
Revolution Church is originally a magazine style WordPress theme designed by Brian Gardner, now converted for blogger.
Top Menu Configuration
To customize Top Menu , find the following code and edit with your own link:<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Sample Page</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
</ul>
</div>
Sub Menu Configuration
To customize Top Menu , find the following code and edit with your own link.But if you are a Google Adsense user then i suggest you to use long Link unit here:<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='#'>Community Events</a>
<ul>
<li>
<a href='#'>Sub Category #1</a>
<ul>
<li>
<a href='#'>Sub Sub Category #1</a>
</li>
<li>
<a href='#'>Sub Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>Conferences</a>
</li>
<li>
<a href='#'>Get Connected</a>
</li>
</ul>
</div>
To fix "Post a Comment" form issue in IE, just add "<div class='clear'/> " below:<b:if cond='data:post.embedCommentForm'<
<div class='clear'/<
<b:include data='post' name='comment-form'/<
To show "Older Posts" and "Newer Posts" navigation, replace "none" in code below to "true":#blog-pager-newer-link {
float: left;
display: none;
}
#blog-pager-older-link {
float: right;
display: none;
}
#blog-pager {
text-align: center;
display: none;
}
Fix for search box:
Search for the following line <div id='NavbarMenuright'> . Remove all code between that line and next </div>
and replace it with<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == "") {this.value = "Search this website...";}' onfocus='if (this.value == "Search this website...") {this.value = ""}' type='text' value='Search this website...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
It's pretty easy one: you need to upload your .swf file to your server or somwhere else, but you need to know the link to it! Open the text widget in your WordPress and put this code into it:
<div align="center"><embed wmode="transparent"
src="http://www.your-web-site/../your-file.swf"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
width="size in pix" height="size in pix"></embed></div>
Of course, insert the correct path to the file and desired dimensions (red part of code)
Revoption (mix of Revolution Church and Options theme)
The main theme (which you need) is Optionsand can be downloaded here: LINK
The Revoption child theme (which goes the same place like other themes) is here: DOWNLOAD
Edit: Justin Tadlock does not support Options theme any more and took it away from his web site. So, both (Options-main theme and Revoption-child theme) are available here: LINK
If you want PNG pictures to have transparency on your web page, use this simple method:
1) Copy this code and paste it into yout notepad:
/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="png.js"></script>
<![endif]-->
*/
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
<!--[if lt IE 7.]>Read More......
<script defer type="text/javascript" src="png.js"></script>
<![endif]-->
If you'd rather like to have your page source as clean as possible then you want to keep your scripts separately.
1. Make a folder and name it like "scripts" (or whatever).
2. Take the scriptcode and paste it in notepad! For example it looks like:
<script type="text/javascript">
function nextQuote(){
var result = new Array(6);
result=jsonrpc.slideQuotes.getNextQuote();
document.getElementById('quoteBody').innerHTML=result[0];
document.getElementById('quoteHeading').innerHTML=result[1];
document.getElementById('quotePrevious').innerHTML=result[4];
document.getElementById('quoteNext').innerHTML=result[5];}
</script>
<script type="text/javascript" src="/scripts/quoteSlideshow.js"></script>Read More......
Č &# 268; č &# 269;
Ć &# 262; ć &# 263;
Š &# 352; š &# 353;
Ž &# 381; ž &# 382;
Đ &# 272; đ &# 273;
No space between: &# and Nr!
By the way, you might need some time this one:
< with <
> with >
" with "
Ifyou don't want to have border around pictures in your post, even if your theme use it, just add folloving string to your specific picture (use HTML view):
<img src="http://www.blogger.com/picture.jpg" style="border: medium none ; padding: 0pt;" alt="Picture" />
<img src="picture.jpg" class="no-border" alt="Picture" />
.no-border { border: none; padding: 0; }
Read More......
img, a img {
padding: 3px;
border: 1px solid #01203c;
background: #eee;
}
My Web Solutions - Original design by Blogging Secret | Free Blogger Templates | Ads Theme Blogger Template
