Friday, November 5, 2010

PhotoBlog Blogger Template

Here's a new Blogger Template - PhotoBlog Blogger Template with Featured Posts and More.




Template Information:

Template Type : Blogger Template
Template Name : PhotoBlog Blogger Template
License : Free Template + Creative Common License
Designer : BloggerTheme
Features:

  • 3 columns layout

  • Right Sidebar

  • Featured Posts

  • Two Navigation Menu

  • Top Navigation Menu

  • Read More Posts

  • Gravatar on comments

  • fixed width

  • Widget Ready

  • Black background.

How to install this template:
  • First you have to install this template in your blogger account.

  • Go to your blogger layout and click on edit html tab.

  • Now just download your previous template and upload this new template to it.

How to edit navigation bar No 1:
  • Just stay on html page and find these codes with ctrl + F.

  • Just search for

  • <div id='pagemenucontainer'>

  • Exchange your link with # and title with your title

How to edit navigation bar No 2:
  • Just stay on html page and find these codes with ctrl + F.

  • Just search for

  • <div id='navcontainer'>

  • Exchange your link with # and title with your title

How to edit Featured slider :
  • First go to layout and click on edit html

  • Now search for

  • <li class='kwik'>

    <a href='#'>
    <img alt='' class='slidimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNCCYw4xAc4LSunkNq5gxMpuXQ4d8fpgl_xo7rGRoP28MIVvr7jVuk7dNB-DGC6PzJCOACXmdZ6nrSSESwAgvc86OpGjqR_8FrW90qvPXOVQLcn6VRUAm5XocEHeUYKGFaHalf_Pk_40Vf/s1600/1.jpg' style='width: 750px; height: 250px;'/>
    </a>

    <div class='kwikmet rounded'>
    <h2><a href='#' rel='bookmark' title='Permanent Link to Sit amet felis. Mauris semper, velit semper laoreet dictum'>Sit amet felis. Mauris semper, velit semper laoreet dictum</a></h2>
    <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, ...</p>

    </div>

    </li>

  • Replace Red Color Link with your post link

  • Replace Blue color with your Post Title and Post Description

  • Replace Green Color Link with your Direct Link of Image.


If you want to improve it further, and make it more search engine friendly, then see these Blogger tips and tricks

=> Download More Templates from Here <=

2 comments:

John Read said...

I was wondering, is there anyway to disable the "Read More" posts thingy, I'd like it to show up exactly the way it does when I go to the link of the post. With images in their proper spots, etc.

kumar said...

@Gerbil,

If you want to remove Read more, Follow These Steps.

Step 1: Go To Blogger Dashboard Then Edit HTML Then Delete The Below Codes (This Code was placed below ]]></b:skin>)

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 600; summary_img = 500; img_thumb_height = 150; img_thumb_width = 200; </SCRIPT>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left;margin-top:-7px; padding:0px 0px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}




//]]>
</script>


Step 2: Then Save The Template.

If you need anyother help contact me.

Thanks

Post a Comment