This 2 column template is different then the conventional photo blog designs. It has lot more features that allows you to display your best photographs, write about it and even create your portfolio page. The home page has a mirrored menu bar consisting five boxes, which are fixed since its part of the background. Even if you don't have links to put in the five boxes, it will stay. For instance you can add page links like 'Home', 'About', 'Contact', 'Subscribe' and 'Portfolio' from Layout-Page Elements.
Below that is the slide show to exhibit your photos, you can upload images on photo-sharing sites, preferably 750x500, and click on Edit Html to place the image url. Search for this code -
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<img src=' put url of the image here'/>
<span> text-to-be-displayed </ span>
</ li>
The single column on the left side is customisable to suit your requirements, you can add any of the blogger gadgets available. Since the home page has a fixed height it would be better to put one or two widgets in the sidebar, because the more you add it tends to look untidy.
You can also display thumbnail images which expand when clicked, so the reader clicks on a thumbnail and gets to see the larger version of the image without having to leave the current page. For this you can activate the lightbox feature, by placing the following code in your internal page.
<a href=" url of image "rel="lightbox"> <img border="0" src=" url of image" style="height: 110px; width: 110px;" /> </ a>
You can create a 'Portfolio' page and add the above code to display thumbnail images. The images appear on black background that goes perfectly well with any picture. Photografia Blogger Template would definitely be our choice when we start our photo blog. Download Photografia, the Photo Blogger Template
Share this Blogger Template:
sorry but how do i edit the contents of the link lists? and the urls?
@ The author - hey, go to layout---page elements---then click on edit link list and make the changes you want!
why nothing appear on my front page?
and when i click at the post label, the background is white
thats not what i meant. uhm. for example, if i put in profile under one of those link lists. what url should i put in? do i create it myself?
if so how do i do it?
does the profile appear below if i have provided the correct link?
This comment has been removed by the author.
@ The author - When you click on edit link list, you don't need to add title, instead put the link to say profile page under 'New Site URL' and under 'New Site Name' you can add Profile. Thats how you can add links to your pages.:)
@ Queen - For the slideshow to work you need to add the image url in edit html, directions are provided above in the post. When you click on label the background is white, that's how the template has been designed.
@ mémoire BY Jose - you need to add that code in your portfolio page or whtever you choose to call it, repeat the code depending on the number of images you want to add.
Ok so i have followed the directions for the slide show and entered the URL http://www.siue.edu/~asassat/Adams/Bailie1 and http://www.siue.edu/~asassat/Adams/Bailie1.jpg in the spot that I am supposed to. Yet nothing is showing up on the blog. Just wondering if u could help pleasee!
@bhavika hey i am trying to get the slideshow to work, but it wont. I have followed the directions and put http://www.siue.edu/~asassat/Adams/Bailie1 or http://www.siue.edu/~asassat/Adams/Bailie1.jpg in the correct place. yet it is still not working.
Could you please help me out?
@ASDESIGNS - Its always advisable to host the javascript files on a site of your choice. For the slider to work, you will have to host the JS files, provided in the zip folder - s3Slider(2) and jquery(2) - and take that link and replace it in Edit html under -
]]></b:skin>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
The file names with extension 'js' needs to be replaced, then the slider should work.
Hi, I really like the look of your template, please tell me is there any way to use in blogspot as template? how do I load the in html format?
@alt Stineru - Watch our video tutorial to learn how to upload a custom blogger template. You need to follow those steps to use this template as well.
http://www.youtube.com/watch?v=jiLIH0CHVyY&feature=player_embedded
Alright- I'm not HTML savvy at all. Just wondering, does anyone have this blog already decoded, that wouldn't mind pasting the code here so others can use it?
@kaitlin
the article above has the necessary code that can use, not sure what you mean by have this blog decoded :) it does not seem that complex!
well.. i got 2 problems:
1) my picture slide wouldnt repeat after the last picture.
2) im very blur with the "Portfolio" page and i dont understand how to apply into the template.
1 request: is it possible for me to change the content of the blog into black instead of white color?
thank you in advance.
@ Starry Dress - Re-install the template and host the js scripts given in the template folder on a site of your choice and put the url's where indicated in Edit Html.
For the slide:
host scripts s3Slider (2) and jquery (2), copy the urls generated, look for the code below in Edit Html and paste the urls at the relevant places.
<script src='URL HERE' type='text/javascript'/>
<script src='URL HERE' type='text/javascript'/>
For Lightbox -
Host the Lightbox scripts, then look for the following code in Edit Html and replace the urls in the code -
<script language='JavaScript' type='text/javascript'>
var cssNode = document.createElement ( 'link');
cssNode.type = 'text / css'; cssNode.rel = 'stylesheet';
cssNode.href = 'http://url of lightbox.css';
cssNode.media = 'screen';
cssNode.title = 'using lightbox 2 with GPC';
document.getElementsByTagName ( "head")
[0]. AppendChild (cssNode);
</ script>
<script src=' http://url the prototype.js' type='text/javascript'/>
<script src=' http://url of scriptaculous.js ?load=effects,builder' type='text/javascript'/>
<script src=' http://url of lightbox.js' type='text/javascript'/>
Follow the above steps, and the slider should work fine.
2) For portfolio, create a post with that exact title 'Portfolio' and add the following code -
<a href=" url of image "rel="lightbox"> <img border="0" src=" url of image" style="height: 110px; width: 110px;" /> </ a>
You also have to create a thumbnail version of each image, 110x110.
What content you want to change into black? the background, etc you can play around with the code in edit html...cheers
I dont have any idea how to use it..
Can u pls tell me step by step... what to do?
The video link doesnt work.
Is this the whole code that will go in the edit html (just replacing the url's) in ur Sepetember 27th post?
@ Shum
watch this video please
http://www.bloggerblogtemplates.com/2009/01/how-to-upload-custom-blogger-template.html
then follow the instruction in the Sept 27th post
Hi, how do I host the Js and S3 and Lighthouse? I'm not sure how to do it.
@Pacey - Once you download the template folder on your desktop, you will find the javascript files in one of the folders. You can refer to the response above, on which js files you need to upload either on Google sites or windows skydrive and then copy the url and replace it in the code mentioned above...any more probs feel free to contact us!
hi, I'm really not equipped with any html knowledge and I really want this template to work
the thing is, I cannot find the codes that you said should be in the edit html, and henceforth, cannot replace them
eg.
script src='URL HERE' type='text/javascript'/
AND
script language='JavaScript' type='text/javascript'>
var cssNode = document.createElement ( 'link');
cssNode.type = 'text / css'; cssNode.rel = 'stylesheet';
cssNode.href = 'http://url of lightbox.css';
cssNode.media = 'screen';
cssNode.title = 'using lightbox 2 with GPC';
document.getElementsByTagName ( "head")
[0]. AppendChild (cssNode);
I want to know, are these codes INSIDE the given template html OR do we have to PUT them there?
I understand the questions posted earlier by others, but I think for you who has the html knowledge, you cannot see what we are so confused about.
So if a step-by-step process of how to:
1) include a portfolio page (I know how to add links TO the portfolio page, but the thing is I do not know HOW to create the Portfolio page to link to (since it doesn't exist YET I have no url for the portfolio)
2)put the image urls for a slideshow (and where?)
3)activate the lightbox
thank you so much in advance
Please forgive me if I sound incompetent, I would really appreciate help on this =)
@ aristarionne
I would like you to watch the video on the how to upload a blogger template in the video guides section
once you do that read Bhavika's comment which is approximately 5 comments before this one...please read it carefully
once you do that and you still have a problem do not hesitate to post a comment once again...always willing to help
It would be great to watch the video but it has been removed.
This code that you say to replace for the slide show (in the original post) it's not in the template.
Hi Bhavika & Clyde
I would like that when ii make clic to the Blogger Butom you can see all my posts, and not only the alst one. Or at list a few posts, but for sure not only the last.
Which code I have to put?
Tahnk yu very much and best regards
TalÃn
OK - I've done everything you said - I've hosted all the JS with skydrive and copied all the webaddresses of those scripts into the right bits of the HTML. I've put the link to one of my photos where I'm supposed to int he HTML - but after all that the slideshow is still NOT working :( Any ideas
Hello
1) How can I make, that wenn I clic the Blog box aper more than one post?
2) Which page link I have to put for the Contect box?
Beste regards
TalÃn
@ lisa
please read bhavika's comment posted on
September 27, 2009 10:29 AM on this post...
@ caroline
have you done everything exactly how its suppose to be done, can you refer to bhavikas comment as well,,,
@ Talin
this template is built to display one pic on the homepage the rest of them can be seen in the gallery
Hi Clyde
Thank you for your answer, but maybe my questions are not so clear. About the display of one pic ist for me clear, but my problems are the followings questions.
There are a mirrored menu bar consisting five boxes, where it is possible to add page links like 'Home', 'Blog', 'Contact', 'Subscribe', ...
1) Which ist the Link I have to add to the Blog box if I want to display more than one post.
2) Which ist the Link I have to add to the Contact box if I want to display directly to the Outlook E-Mail.
3) Which ist the Link I have to add to the Subscribe box if I want to display directly to the Subscribe page.
Thank you very much
Regards - TalÃn
@ talin
the menu bar or the navigation bar can either be accessed from your page elements or from the the edit html function in your blog
look for the "contact" or "subscribe" and change the link to the one you like..
please provide your blog url and i will help you better :)
So let me know if I'm wrong, but it looks like this will work eventually. I've gotten my scripts hosted elsewhere and copied and pasted the URL paths to where they are on my own site.
Now that I'm trying to put the Portfolio page together it seems like making any changes or additions to either the slideshow or the portfolio page will require the same extensive HTML hardcoding of the either the blog post HTML or the slideshow HTML.
Am I wrong, or is does this have some sort of built-in automation once it's set up. (I realize I won't have to set the CSS and script URLs again, but to get the images in place seems to require copying and pasting the image locations twice per spot.) Please let me know if this is simpler than I've figure out.
Thanks for the effort of designing and explaining it to everyone!
Hello, Please help me out here.
I'm getting a tinyurl 404 image on the blog home page.
But any of the post pages is showing the header image.
winnla.blogspot.com
I like this template
@ Chuck Baldwin - What kind of changes you want to carry out in the Portfolio or slideshow page? I saw your blog, the slideshow isnt working, you can add more slides by repeating the code mentioned above in 'Edit Html'. The template doesnt have built in automation, you need to add each image url for Portfolio page as well.
@ Fiazio - I visited your blog, looks like you have changed your template, if you still keen on using this one, kindly read the above comments where each step of uploading this theme has been explained.
Thanks. I'll give it another try. I ended up going with Zenfolio.com for my primary slideshow and galleries, and keep the photoblog as the blog portion of the overall site rather than the landing page. I need something I can update extensively quickly. It's not perfect and it costs money each year but for me it's better suited for that use. Thanks again!
Hi, i like this template a lot and i tried to install it but i cant seem to make it work. I did everything that Bhavika said in her comment, replaced all those js files with the ones i hosted on skydrive, put the links to the pictures i hosted with picassa and still the hompage is empty. Didn't get to do much cuz i got stuck in the slider. What more can i do to make it work? Please help
hi i have placed the javascript url into the designated place but it still doesnt show up for the slider and as the main page its simply black with just my blog title. Am i missing something ? because the tabs on ur template given are not clickable also.
http://omgbbqwtfzomg.blogspot.com/
Hello, Please help me out here.
I'm getting a tinyurl 404 image on the blog home page.
i apply all of ur recomendation but slide show not working
plz help mee
here is my Address:
http://pics4bruno.blogspot.com
@ Chuck
:) all the best and cheers no issue
@ 2L Studio
please pass me your blog link
@ husky
have you followed bhavika's instructions on September 27th in the comments above
@ faisal
have you uploaded the css file and replaced the link as well...have you also uploaded all the images
http://vintographii.blogspot.com/ - my slide photo just wont appear. can u check for me? ^^
www.pittuspics.blogspot.com pls check this and let me know if i can improve in anyway.... clyde and bhavika you both are doing an excellent job!
but i still am not able to take out that wolfs pic at the home page :(
im so confused. i managed to remove the wolf image. but the image i've uploaded myself appeared to be so small and right in the middle of the top. what is it that i have to do?
and i've edited the link list. like u said put profile page under the new site url. and profile under new site name. the problem is how do i add in the contents? when i click into it, it leads to a page which doesnt exist.
and thank you for your effort..
@ The author - Could you send me your blog link... PLs refer to the above answers, am sure you can fix this.
left me using the third in my blog thank you for your kindness
How do I remove or change the wolf image?
@ Jed
I see you managed to figure it out!
sound like a mess stuff
Im having troubles with the SLIDE and Lightbox... ive replaced all the urls and still not seeing anything p.s
is this meant to be changed aswell? 'http://url of lightbox.css';
Nevermind the slider i got it to work... i just want to know is the portfolio page a POST or PAGE
Nevermind any of my previous post i got it all to work the only issue i have is how do i get the other images to show such as the loading pic and the save pic??
@ young-h
yes that url needs to be change
the portfolio is a post
you would need to get into the edit html look for those images check if they are still available at that url and if not replace em...