Yellow Blog: Blogger Tricks

Showing posts with label Blogger Tricks. Show all posts

Related Post Thumbnails

By Star Cumulus

This article explains about how to make Related Post with Picture Thumbnails style. (Credit to Aneesh)

The demo of this hack is installed in this site... Please see below this article

STEP BY STEP TO INSTALL THIS TRICK

1. Sign In To Blogger
2. Go to LAYOUT -- Edit HTML -- Checked the box, expand widget templates
3. Find this

<head>

4. After that, Replace that code with this :

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

</head>

5. Find this :

If you did not find it, please find this code :

6. Copy paste the code, below, under <p class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.cahayabiru.com/2009/10/related-post-thumbnails.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.cahayabiru.com/' style='display:none;'>Blogger Templates</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><div style='clear:both'/>
</b:if>

Save Your Templates

NOTE :
After you save your templates, you may adjust how many thumbnail link will be shown to your reader. Please find this :

var maxresults=5;

The Number "5" is relating with how many relating post will be seen to your readers. You could change the number with any number that you want.

You could change the Title also. Please, find this:

var relatedpoststitle="Related Posts";

The words "Related Posts" is relating with the title. Please do not delete the quote symbol. You may delete only the word -- Related Posts

Ok, Everything is done. If you like my works and articles, you could subscribe in my feed form in right sidebar of this site.
Ok, Have a nice blogging.... :)

Feed Url

at 2:48 AM

By Star Cumulus

0 comments

Some of my user have asked about how to get feed url. Feed url can be used for showing recent post and comments in our Blog.

Go to -- LAYOUT -- Add Page Element -- Add Gadget -- Choose Feed Gadget -- and you'll see Feed Url Form.

After you find the form, you need to fill it with Feed URL address.
Below is the structure :

For Recent Post
http://YOUR-BLOG-ADDRESS/feeds/posts/default

While For Recent Comments, simply change the word "post (in blue text)" with the word comments. Please see below:
http://YOUR-BLOG-ADDRESS/feeds/comments/default

That is it.

NB:
If you find that our post is useful, please subscribe to my feedburner form in right sidebar. I will deliver every new information in this blog to your mail inbox.

Increase Comment Box Width

at 5:04 AM

By Star Cumulus

4 comments

For about half year ago, Blogger.com have updated the comment style into comment-form as an option for the old one. While in 2009, many converter transform magazine style into XML Templates. So, the comment box style is a need because it use a wide view of comment box. However, blogger have set the width of the box only about 300px and that is short. Now, come question, is it possible the increase the box width of comment? Quickly I answered, yes it is possible. But, How to do it??
This article explain about how to increase the width of comment box easily...

Sign In
1. Go to LAYOUT -- Edit HTML -- (checked expand widget template)
Find this tag :

2. Please see the tag width='100%'

3. After that, change 100% with your own size. But, before you make changing, you have to consider about your main post wrapper. For example: if your mainpost-wrapper is 500px then the comment box width is less, i.e. 490px, 480px or etc.

4. Save your Template.

So it's easy... right guys... :)

Avoiding Video Overflow

at 3:28 AM

By Star Cumulus

9 comments

Magazine Style Template now are one of the most popular choices in Blogger XML Templates. That magazine usually use single or two inline minipost setting with CSS auto-readmore or probably javascript. However, the problem for video sometime come, not just in Blogger XML but also in wordpress.

In the same time, Many of my template users asking, they said why the video are showed overflow in minipost. Actually I have answered that problems. I said that you have to use wmode setting. But, It seem I have to write about it ...

In this article, I would like to explain about how to customize the video code from youtube.com so that it will become wmode. I choose youtube.com because many of questioner use youtube video files.

CUSTOMIZE YOUR VIDEO CODE WITH WMODE:
Let's say, This is an example of your youtube embedded code.

Please see the color text.

The purple text is youtube URL
The red text is the code for embedding the URL in your post. Please do not delete this code.
The blue text is parameter allowscreen that need to change with wmode.

Then, Change the word:

"allowFullScreen" with "wmode"
Change the word "true" with "transparent"
You also can change the word "true" with "opaque"
The red text is your youtube url.

(please do not delete the quote symbol)

After your changing, now place your video with wmode into your posting or HTML/Javascript Gadget. Then your modifications are done.

After changing the video code will be look like this:

Wmode Demo in Magazine Template with Two Inline Minipost
(Click Here)

ANOTHER OPTION: YOU CAN USE THIS HTML STRUCTURE OF WMODE SETTING

The HTML Structure of wmode:

The red text is the most important setting.

Change the word

YOUR-VIDEO-OR-FLASH-FILE with video url. you can get the video url in Youtube.com or alike. please do not delete the blue text, =en&fs=1

example:
You get this Video URL in youtube.com:
http://www.youtube.com/v/SLBbgwN1Mao&hl

WIDTH SIZE with your own size. Example: 255, 310 (no need to use px symbol). This value is set in pixel.
HEIGHT SIZE with your own size. Example: 255, 310 (no need to use px symbol). This value is set in pixel.

I think this is enough for the explanation about wmode. By the way, If you like my articles and do not want to miss for new update; please, fill the subscribe form at my footbar. :). At the bottow of my profile.

have a nice try wmode setting.... :)

USING POST FOCUS TRICKS

at 11:13 PM

By Star Cumulus

12 comments

In this article, I would like to explain about two tags in blogger XML which have function to control viewing content in your blogger page. Blogger Blog actually have 3 (three) pages: 1. homepage, 2. single page or article page, and label/category page.

The tags that I would explain is for displaying section or alike in homepage only. But, the section are not going to appear in single page. I usually call this with the term "POST-FOCUS" or "YOU CAN SEE ME IN FRONT, BUT NOT IN BEHIND". Yes, the visitors can see the section that covered only in homepage, but they can not see it again in single pages.

POST-FOCUS mean that the blog writer help his/her visitors to get focus on reading his/her articles. In any condition, sometime, a reader do not want to see any featured template such as IMAGE SLIDER, CONTENT GLIDER, OR MOOTOOLS (Flash). The reader said, the slider or glider make them confuse because they need to focus on the article. Also, in many cases, that featured template takes much time to load in single page. So, it will better when the featured template is appeared in homepage only.

If there any suggestions about the name or theory about it, you could tell me guys.... :)

What is the code for POST-FOCUS:
The codes have two models which have the same function and often shown in our default XML Templates.
first code is :

<b:if cond='data:blog.pageType != "item"'> 

SOME OF COVERED AREA

</b:if>

In default blogger template, This code can be seen in comment link.

and the second is:

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

SOME OF COVERED AREA

</b:if>

Notice:
The second code can be seen in header section of default blogger template.

Please see, the word "some of covered area". The covered area is some content that you wanna show only in your blog homepage.

Yes, when those tags is implemented, the relating content which covered can only be seen in your blog homepage and label page, but the content will dissapear in your article or single page.

You could see the demo of it in futura, gamezine, or forex press.(click here for demo) I set that tags to cover the glider and slider. So, the glider and slider will dissapear when other visitors go to article/single pages.

I think it is more than enough to know the description about it. What about the implementation?

How to implement this codes:
From my experience converting WP and making XML template, I observe and note there are four place that POST-FOCUS can be implemented. However, you could give me suggestion or add more explanation since it is just my theory. That four place is :

1. You can put Post Focus in blogger XML template section
for example :

<b:if cond='data:blog.pageType != "item"'> 

<b:section class='cahaya6' id='cahaya6' showaddelement='yes'>
<b:widget id='HTML3' locked='true' title='Recent Post' type='HTML'/>
</b:section>

</b:if>

2. Do not put POST FOCUS code before or after widget section.

<b:widget id='Feed1' locked='false' title='Cahaya Biru's Sphere' type='Feed'>

</b:widget>

Example of wrong implementation:

<b:if cond='data:blog.pageType != "item"'> 
<b:widget id='Feed1' locked='false' title='Cahaya Biru's Sphere' type='Feed'>

SOME WIDGET CONTENT

</b:widget>
</b:if>

This is wrong implementation example

3. You can put it inside the includable element. This implementation is common and well known. As it is using in read more trick. Yes, read more tricks use it.

4. You can put POST FOCUS after ]]></b:skin> or above </head>

Example cases:
You want to hide your Javascript Third Party because you do not need it anymore in single page.
HTML structure of the case:

]]></b:skin>

<b:if cond='data:blog.pageType != "item"'> 
<script src='http://HOSTING-SOMEWHERE/androidafx.js' type='text/javascript'/>
<script src='http://HOSTING-SOMEWHERE/androidaglide.js' type='text/javascript'/>

</b:if> 

</head>

I think that is enough for the explanation and description about "POST FOCUS" or "YOU CAN SEE ME IN FRONT, BUT NOT IN BEHIND". If you want to add more description and explanation, you could leave it in comments box below.

Have an nice try and blogging....

Related Post Thumbnails

Feed Url

Increase Comment Box Width

Avoiding Video Overflow

USING POST FOCUS TRICKS

Blog Archive

Free Blogger Template Cahaya Biru

Followers

Search This Blog