Using labels to create a Portfolio in your Blogger
From Bloggerhacks
Lahlahbarros (Talk | contribs) (→Method) |
Lahlahbarros (Talk | contribs) |
||
(3 intermediate revisions not shown) | |||
Line 30: | Line 30: | ||
OBS: You should host the javascripts (prototype, scriptaculous e lightbox) and the images (closelabel, nextlabel e prevlavel) in some host who allows hotlink. | OBS: You should host the javascripts (prototype, scriptaculous e lightbox) and the images (closelabel, nextlabel e prevlavel) in some host who allows hotlink. | ||
- | + | ''' | |
- | Creating a Template for your | + | Creating a Template for your Portfolio''' |
01) Find this in your code: | 01) Find this in your code: | ||
- | <b:section class='main' id='main' maxwidgets='4' showaddelement='yes'> | + | <nowiki><b:section class='main' id='main' maxwidgets='4' showaddelement='yes'> |
- | <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'> | + | <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'></nowiki> |
02) Bellow that, paste the following code: | 02) Bellow that, paste the following code: | ||
Line 62: | Line 62: | ||
But you can create your own styles. | But you can create your own styles. | ||
- | Customizing | + | '''Customizing Portfolio Label's Page''' |
After making a research on conditionals in Blogger, I found out that the correct element to do this is not available for category's page: the element 'pagetype'. So how are we going to do it? Withe the page's title. | After making a research on conditionals in Blogger, I found out that the correct element to do this is not available for category's page: the element 'pagetype'. So how are we going to do it? Withe the page's title. | ||
Line 72: | Line 72: | ||
03) Find the following code: | 03) Find the following code: | ||
- | <b:includable id='main' var='top'> | + | <nowiki><b:includable id='main' var='top'> |
- | <b:include data='top' name='status-message'/> | + | <b:include data='top' name='status-message'/></nowiki> |
Right after, replace this: | Right after, replace this: | ||
Line 109: | Line 109: | ||
04) Change 'YOUR BLOG'S TITLE' on the code with the title of your own blog. | 04) Change 'YOUR BLOG'S TITLE' on the code with the title of your own blog. | ||
- | Making Portfolio's entries | + | '''Making Portfolio's entries''' |
01) Go to your 'Dashboard', choose 'New Post'. | 01) Go to your 'Dashboard', choose 'New Post'. | ||
Line 131: | Line 131: | ||
[http://ideialab.blogspot.com Ideialab Ideialab] | [http://ideialab.blogspot.com Ideialab Ideialab] | ||
- | [New Blogger] [Portfolio] [Template] | + | [[category: hacks]] [[category: New Blogger]] [[category: Portfolio]] [[category: Template]] |
Current revision as of 15:40, 18 August 2007
Contents |
Version
1.0
Platform
New Version of Blogger
Author
Elainne Barros
Homepage
License
Linkware.
Required Skills
Follow the instructions
Description
This hack will allow you to customize 'Portfolio' Label's page with a unique style: Thumbnail view and Lightbox to see bigger images and hide Portfolio's posts on main page.
Method
1. Inserting Lightbox
01) Go to Lightbox Project Page Lightbox and download the latest version of the script.
02) Follow the instalation instructions: a) Paste the following on your <header></header>:
<script type="text/javascript" src="http://seusite.com/prototype.js"></script> <script type="text/javascript" src="http://seusite.com/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="http://seusite.com/lightbox.js"></script>
b) Then, paste the CSS available on the file with the script in your <style type="text/css"></style> section, also in your <header>.
OBS: You should host the javascripts (prototype, scriptaculous e lightbox) and the images (closelabel, nextlabel e prevlavel) in some host who allows hotlink. Creating a Template for your Portfolio
01) Find this in your code:
<b:section class='main' id='main' maxwidgets='4' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>
02) Bellow that, paste the following code:
<b:includable id='folio' var='post'> <a expr:name='data:post.id'/> <div class='folio-container'> <!-- thumbanil --> <data:post.body/> <!-- /thumbnail --> </div> </b:includable>
and in your CSS:
/* FOLIO POSTS */
.folio-container img {border: 3px solid #000000; float: left; margin: 2px;}
I customized the template in a way that only the post body (image with link) shows up in the screen, inside a list of images, each one with 3px border. But you can create your own styles.
Customizing Portfolio Label's Page
After making a research on conditionals in Blogger, I found out that the correct element to do this is not available for category's page: the element 'pagetype'. So how are we going to do it? Withe the page's title.
01) In you Blogger painel, go to Model > Edit HTML. Makea a backup of your current template before starting.
02) The, check the box wich says 'Expand widgets model'.
03) Find the following code:
<b:includable id='main' var='top'> <b:include data='top' name='status-message'/>
Right after, replace this:
<b:include data='top' name='status-message'/> <b:loop values='data:posts' var='post'> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if> </b:loop>
with this:
<b:loop values='data:posts' var='post'> <!-- if it's portfolio page, use folio template --> <b:if cond='data:blog.pageTitle == "YOUR BLOG'S TITLE: Portfolio"'> <b:include data='post' name='folio'/> <!-- if it isn't, use blog template --> <b:else/> <!-- on main page, if it's a portfolio post, hide it --> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.name != "Portfolio"'> <b:include data='post' name='post'/> </b:if> </b:loop> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if> </b:loop>
04) Change 'YOUR BLOG'S TITLE' on the code with the title of your own blog.
Making Portfolio's entries
01) Go to your 'Dashboard', choose 'New Post'.
02) Write your post's title and in the body, write:
<a href="url_big_image" rel="lightbox[portfolio]" title="My art"><img src="url_thumbnail_image" alt="My art" /></a>
Note the rel attribute, necessary for enabling Lightbox on your entries.
03) Still on this screen, write 'Portfolio' as the labe of your post.
04) And that's it! Now is just go to your Portfolio Label's Page (http://YOURBLOG.blogspot.com/search/label/Portfolio).
Final considerations
1. Can I chage the name of the category 'Portfolio' to any other name? Yes, just change in the code where 'Portfolio' appears.