6 Nisan 2014 Pazar

How to show get extract blogger first image in the post

Below xml snippet will call the first image in a blogger post

XML 
<b:if cond='data:post.firstImageUrl'>
 <img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
 </b:if>
Posted on 14:58 | Categories:

how to add multiple div tags side by side one under the other

Hello this time we are gonna play with some CSS codes and HTML codes.This post is also very helpful for wordpress theme creators and for all webdesigners.Actually in this post we are gone find out how to line up div tags side by side and one under the other.

floating
when you use two div tags side by side by floating them left and right, third div tag will ruin the alignment. But you can fix this issue with another div tag which will be div class="clear"
Usage
1.header
2.container
3.content
4.sidebar
5.clear
6.footer
Sample HTML
<div id="header">Header</div>
<div id="container">
    <div id="content">Content</div>
    <div id="sidebar">Sidebar</div>
    <div id="clear"></div>
    <div id="footer">Footer</div>
</div>

Whole Code
You can play with codes below that we have provided for you in advance
<html>

<head>
    <title>Basic HTML and CSS - BrotherBlogger</title>
    <style type="text/css">
#header {
    width: 300px;
    background-color: red;
    height: 30px;
    margin: auto;
}

#container {
    width: 300px;
    background-color: #ffcc33;
    margin: auto;
}
#content {
    width: 200px;
    float: left;
    height: 300px;
    background-color: blue;
}
#sidebar {
    width: 100px;
    float: left;
    height: 300px;
    background-color: green;
}
#footer {
    width: 300px;
    height: 100px;
    background-color: gray;
}
#clear {
    clear: both;
}
</style>
</head>

<body>
    <div id="header">Header</div>
<div id="container">
    <div id="content">Content</div>
    <div id="sidebar">Sidebar</div>
    <div id="clear"></div>
    <div id="footer">Footer</div>
</div>
</body>

</html>


Posted on 13:23 | Categories:

29 Ocak 2014 Çarşamba

wordpress add author bio to posts

How to show author bio in wordpress post 
Hi dear bloggers! In this wordpress lesson we are gonna find out how to show author bio in a wordpress post. Showing author bio is a very cool option, so visitors will know by whom the post they read is written. Of course this will also higher up your reputation in reader's eye.

Before playing with your theme please back up style.css and single.php files.
 PHP Code:
<p><?php echo get_avatar( get_the_author_meta('email'), '48' ); ?>

                        <strong><?php the_author_posts_link(); ?></strong><br />

                        <?php the_author_meta( 'description' ); ?></p>

CSS Code:
/*Author Box */

.authorbox {
 background: #f9f9f9;
 border: 1px solid #e6e6e6;
 padding: 15px;

}

.authorbox img {

 background: #fff;
 border: 1px solid #e6e6e6;
 float: left;
 margin: 0 10px 0 0;
 padding: 4px;

}

.authorbox p {
 margin: 0;
 padding: 0;

}

.authorbox p strong {
 font-size: 13px;
 font-weight: bold;

}

Output:
Round borders off
I saw at some blogs that avatars of authors were circular. I liked them very much. I thought you may like it also. Would you like to round borders off? here is how...
just add below codes in CSS .authorbox {}
border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;
New Output will be so:

Usage:
PHP code above given first should be in a div tag classed authorbox, i mean exactly it should like that:
<div class="authorbox">
delete this line and paste PHP Codes here
</div>
then you should go to Appearance >> Editor >> single.php and paste PHP code in div tag as you are shown where you want to appeare author bio.

the number 48 you see in PHP will determine size of image, you can increase or decrease as your desire. But remember this ('email') will get author image via email option if he has an avatar at Gravatar.com otherwise snippet calls wordpress' default avatar or null.
Adding CSS codes
in general CSS codes of wordpress theme is located in that path: theme/css/style.css or theme/style.css, so to initiate CSS codes that we are provided you above please find out where your theme's CSS file placed is.

a virus creates shortcuts of all files[solutions]

How to Remove Viruses From Your System
the other day a virus is involved from a USB stick of a friend of me. That was creating a shortcut of all files. After a title search how to fix that issue, in a forum i've read a title, it said "Kaspersky pure 3.0 will fix it". Immediately i've installed the anti-virus software for 30 days trial version. He was exactly right! The software found all malware and deleted them successfully from my system. If you are having trouble with the same issue it really will worth to install, i'm saying that because i've already installed and it fixed my system.
Note: this is not a sponsored post. I really faced with that problem.

Download Kaspersky pure 3.0

26 Ocak 2014 Pazar