snippetbymatt

Open Link List in New Tab

2013-04-25T22:47:00.000+08:00

When we add the "Link List" widget or gadget, all links were open in the same window when clicked which will make your reader leaves your blog/site.

With this simple script, all the links from the "Link List" widget will be open in new tab. Sounds great?!!

Anyway, here's the code:

As usual, from Dashboard > Template > then Edit HTML then,

First,add this line of code above the </head> tag.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Ignore if you have it already.

Then,find </body> tag and paste the code above it.

<script type='text/javascript'>
 $(function(){
    $("#LinkList1 a").attr("target","_blank");
 });
</script>

Customization:

LinkList1 - Change it depends on the Link List ID.

That's it! Just comment below if it doesn't work.

UPDATE( 2/5/2014) : If you want a specific link in a "link list" to open in new tab. Use this code instead.

<script type='text/javascript'>
 $(document).ready(function() { 
  $("a[href='LINKS HERE']").attr('target', '_blank');} 
 );
</script>

Display Post View Count: The Easiest Way

2013-02-26T22:15:00.000+08:00

What I mean about the easiest way, is no JavaScript , no sign-up, no PHP codes and it loads very fast.

Nah, here's the demo showing it.

Demo

Well, I've been quite since I'm busy at school. This would be my last post in February.

Let's do this:

First, from Dashboard > Template > Edit HTML then find, <data:post.body/>

Then paste this code below or above it:

<span class='post-counter'>
Post Views:<img height='25' src='http://counters.branica.com/?i=2&u=false&ox=10&oy=17&c=000000&b=transparent.png&f=Terminator.ttf&fn=false&w=110&h=25&s=10' style='border: 0px; margin-bottom: -8px; margin-left: 0px; margin-top: -5px; padding: 0px;' width='110'/>
</span>

Then Save it.

Customization:
Post Views: - change the text with your preference.
2 - change it with your preferred initial count, numbers only
u=false - change it to "true" for unique visits.
fn=false - change it to "true" to add comma in counter.

If you have problem placing it. Just comment below!
Credits goes to: www.branica.com

Preloader Script for Your Blogger Blog

2013-02-15T23:25:00.000+08:00

Preloader Script will load all your page content before showing it.

Nah, the page won't show until all page elements are not fully loaded. Anyway, here's the demo to explain it:

Demo

Let's now implement it!

First, as usual from Dashboard > Template > Edit HTML then find </head> paste the code below just above it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://mattmorzcodes.googlecode.com/files/queryLoader.js' type='text/javascript'/>

Second, find </body> then paste the code below just above it,

<script type='text/javascript'>
QueryLoader.init();
</script>

and lastly, find ]]></b:skin> paste the code below just above it.

.QOverlay {
background-color: #000000;
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC;
height: 1px;
}

Then Save you template.

The script is created by this amazing site and I just want to share on how to implement it in Blogger blog. That's all folks!

Create a Navbar: The Easiest Way

2013-02-12T19:39:00.000+08:00

"A navigation bar or (navigation system) is a section of a website or online page intended to aide visitors in travelling through the online document. Typically, webpages will have a primary navigation bar and a secondary navigation bar on all pages of the web document. These sections of the webpage will include links to the most important sections of the site. The implementation and design of navigation bars is a crucial aspect of web design and web usability."-Wikipedia

If you want to create a navigation bar containing your blog's Facebook link, Twitter, RSS Feed, or a "Follow by Email" box without any, I mean little knowledge on CSS and HTML then this will be a great tool for you.

Click the image below to create

All you have to do is input all the necessary links needed and generate it. The site will give you the code included with instruction. Isn't it great?

If you're having trouble with CSS or any other things, just drop a comment. That's all folks! :P

Different Background Image on Post

2013-02-05T00:30:00.000+08:00

Before anything else, here's the demo.

Demo

This is inspired by this theme

You will have an option to change your background image in every post and having it in full width depending on the screen size. This "trick" will override your body background but it's not harmful, I promise! :D
So, let's start doing it.

From Dashboard > Template > Edit HTML

First, find ]]></b:skin>

Then paste this code above it,

again, find </head> then paste the code below, just above it

then Save it!

When posting, upload the image you want as a background. and get the image link, like this

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/s1600/vlcsnap-2012-07-31-20h16m18s252.png" imageanchor="1"><img alt="breanne durren" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/s1600/vlcsnap-2012-07-31-20h16m18s252.png" title="breanne durren" /></a></div>

the highlighted text is the image link as you upload it here in Blogger. Copy the link then after delete that code.

Then, use this line of code

<div class="bg">
<img class="fade" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/s1600/vlcsnap-2012-07-31-20h16m18s252.png" />
</div>

The image link should be replace with your own image link as shown on the example.

After, publish your post. That's all folks!

Note: Better apply this code at the bottom of your posts.

Easiest Way to Protect Image from Copying

2013-01-16T00:05:00.000+08:00

Let's say, you don't want your image to be copied? Nah, that is nearly impossible. As of now, I don't know how to do it! Anyway, this post will just prevent people from copying your image by disabling the image link.

Here's the sample below:

When you right-click the image above, you won't see an option to save the image, at least if someone will copy your "precious" photos, they'll do it the hard way. :D

So, enough with the talk.

Implementation:

You just need to paste a very short CSS code in your template. As usual form Dashboard > Template > Edit HTML then find ]]></b:skin> and paste this code above it.

.separator a{pointer-events: none}

Then Save it!

Want an explanation? :P

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/s1600/vlcsnap-2012-07-31-20h16m18s252.png" imageanchor="1"><img alt="breanne durren" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/s1600/vlcsnap-2012-07-31-20h16m18s252.png" title="breanne durren" /></a></div>

We just define the class "separator" in CSS because all the image link are enclose with it except those with captions.

Last Words:

Sad to say that "pointer-events" property is not supported by all browsers, here's the list.

Create a Page Gallery from your Picasa Web Albums

2013-01-14T22:51:00.000+08:00

Do you want to create a page containing the albums of your Picasa Web account? If yes, then let's do it! :D

First, let me mention this very nice JQuery script made by alanhamlett to make this possible. Go to his site, from there you can download all the scripts and css files and take a look at the sample. Study it if you want! You can also host the scripts on your own, you need :

jquery.fancybox.pack.js
jquery.fancybox-thumbs.js
jquery.picasagallery.js

sample output from alanhamlett site

Anyway, the thing that I'll be teaching here, or maybe sharing is how to implement it here in Blogger. So, here it is!

Implementation

First, from Dashboard > Template > Edit HTML then find </head> and paste the code just above it.

<script src='http://code.jquery.com/jquery-latest.js'/>
<script src="http://mattmorzcodes.googlecode.com/files/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="http://mattmorzcodes.googlecode.com/files/jquery.fancybox-thumbs.js" type="text/javascript"></script>
<script src="http://mattmorzcodes.googlecode.com/files/jquery.picasagallery.js" type="text/javascript"></script>

Ignore this if you have it already, <script src='http://code.jquery.com/jquery-latest.js'/>

Second, still in your template find ]]></b:skin> just above it paste the code:

/* Gallery Style*/
.picasagallery{text-align:left;border:0 solid #000;position:relative}
.picasagallery_header{clear:both;cursor:pointer;font-size:10pt;text-decoration:underline;margin:10px 10px 10px 5px}
.picasagallery_title{font-size:13pt;margin:10px}
.picasagallery_album{float:left;text-align:center;font-size:10pt;margin:10px 10px 15px}
.picasagallery_album img{border:#343434 2px solid;cursor:pointer;margin:0 0 5px}
.picasagallery_thumbnail img{border:#343434 2px solid;cursor:pointer;margin:15px}
.picasagallery_photo{position:absolute;z-index:1;top:0;left:0;display:none}
#fancybox-thumbs{position:fixed;left:0;width:100%;overflow:hidden;z-index:1005}
#fancybox-thumbs.bottom{bottom:2px}
#fancybox-thumbs.top{top:2px}
#fancybox-thumbs ul{position:relative;list-style:none;margin:0;padding:0}
#fancybox-thumbs ul li{float:left;opacity:0.5;padding:1px}
#fancybox-thumbs ul li.active{opacity:0.75;border:1px solid #fff;padding:0}
#fancybox-thumbs ul li:hover{opacity:1}
#fancybox-thumbs ul li a{display:block;position:relative;overflow:hidden;border:1px solid #222;background:#111;outline:none}
#fancybox-thumbs ul li img{display:block;position:relative;border:0;padding:0}
.fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;margin:0;padding:0}
.fancybox-wrap{position:absolute;top:0;left:0;z-index:1002}
.fancybox-outer{position:relative;background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:0;padding:0}
.fancybox-opened{z-index:1003}
.fancybox-opened .fancybox-outer{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}
.fancybox-inner{width:100%;height:100%;position:relative;outline:none;overflow:hidden;margin:0;padding:0}
.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}
.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;vertical-align:top;margin:0;padding:0}
.fancybox-image{max-width:100%;max-height:100%}
#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(fancybox_sprite.png)}
#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:0.8;cursor:pointer;z-index:1010}
#fancybox-loading div{width:44px;height:44px;background:url(fancybox_loading.gif) center center no-repeat}
.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:1004}
.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;background:transparent url(blank.gif);z-index:1003}
.fancybox-prev{left:0}
.fancybox-next{right:0}
.fancybox-nav span{position:absolute;top:50%;width:36px;height:36px;margin-top:-18px;cursor:pointer;z-index:1003;visibility:hidden}
.fancybox-prev span{left:20px;background-position:0 -36px}
.fancybox-next span{right:20px;background-position:0 -72px}
.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;overflow:visible;visibility:hidden;padding:0}
#fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:1001;background:#000}
.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:1005}
.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:1003;text-align:center}
.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:700;line-height:24px;white-space:nowrap;padding:2px 20px}
.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
.fancybox-title-inside-wrap{margin-top:10px}
.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;background:rgba(0,0,0,.8);padding:10px}
.fancybox-nav:hover span,.fancybox-opened .fancybox-title{visibility:visible}

Then you need to SAVE IT!

Lastly, create a new page and put a title, maybe "Gallery" then switch to HTML and paste the code below,

<div class='picasagallery'></div>
<script type="text/javascript">
$(document).ready(function() { $('.picasagallery').picasagallery(
{'username':'otakuview','hide_albums' : ['FW', 'woody','Hoody: Hizuki Yuuki'],'thumbnail_width' : '300'});
});
</script>

Note: Only Public Albums will show but you have an option to hide such albums. I advice set your album first to Public.

Configuration:

otakuview- change it with your username
'FW', 'woody','Hoody: Hizuki Yuuki'- title of the album you want to hide
300- width in pixel size

Change it with your preference.

If this doesn't work consider deleting all the jquery lib files, then just add the code below ]]></b:skin>

<script src='http://code.jquery.com/jquery-latest.js'/>

Disable Comments in a Specific Post

2013-01-11T12:20:00.000+08:00

This post will help you disable comment in a specific post as the title says. Comment is good , you should consider your post "value" before doing this. Consider this example:

Click me for Demo

The comment is disable because he just used that post to categorize his articles. That's a great idea! Anyway, let's do this.

To disable comments if your using:

1.Blogger default comment.

This is so easy to do, just follow the image's instruction. Click the Option then,

2.Disqus Comment

You need to switch to HTML Tab then paste this code below your post.

<style>
#disqus_thread{display:none}
</style>

3.Intense Debate Comment

You need to switch to HTML Tab then paste this code below your post.

<style>
#idc-container-parent #idc-container{display:none}
</style>

Use those codes in every post you want to hide/disable comment form.

That's all folks! Hope it helps! :D

Create a Link to Randomly view Posts

2013-01-07T01:49:00.000+08:00

This tutorial will help you build or create a link and give a random posts when clicked. I think it will help most if your blog is for "entertainment" like this one.

Click me for Demo

First. So let's start by going from Dashboard > Template > Edit HTML then find </head> and paste this code above it.

Second. Then include the short script, ignore if you have it already.

<script src='http://code.jquery.com/jquery-latest.js'/>

Lastly. You can post this link anywhere you want as long as it appears. :P

<a href='#random' onclick='feelingLucky()' title='Random Post'>Random Posts</a>

Replaced the blue words as you desire.

Bonus. Actually you can assign a keyboard event that will "click" the link when pressed.

Paste the code above the </body> tag, then change the link to this,

<a href='#random' id='randomp' onclick='feelingLucky()' title='Random Post'>Random Posts</a>

When you press CTRL on keyboard, it will give you the random posts. List of keyboard events here.
Change the "17" in the script to your own keyboard value.
That's it!

Style Your Blog Posts Elements Separately

2013-01-03T11:11:00.000+08:00

An HTML element is everything from the start tag to the end tag.

An HTML element starts with a start tag / opening tag

An HTML element ends with an end tag / closing tag

The element content is everything between the start and the end tag

Some HTML elements have empty content

Empty elements are closed in the start tag

Most HTML elements can have attributes

-W3schools

In order to separately style each HTML elements in your blog posts, you need to define them by using their unique selector. Let's say for example, you want to style your blog post image. Define them by using this CSS selector;

.post-body img{property:value;}

You need to include .post-body then specify html tag, like the example above. This is because your blog post body is enclosed with <div class='post-body'>...</div>

Therefore, in every element inside the posts body you need to include .post-body.In that case, other than your post body elements won't be affected. Other HTML elements you might consider styling.

.post-body a:link
.post-body a:visited
.post-body a:hover
.post-body a:active
.post-body h1...h6
.post-body ul , .post-body ul li
.post-body ol , .post-body ol li

I guess the above elements are the most used ones. You need to go to Template > Edit HTML then paste your CSS codes above ]]></b:skin>
That's all folks! :D

Create a Dynamic Social Network Buttons

2012-12-30T20:57:00.002+08:00

Social Network buttons have been very useful for a website/blog to be known more. I guess having a social network button is a "must" in a blog/website. It helps a lot, and placing it correctly should be consider.

The easiest way to add social network buttons is through addthis.

You can copy the code above or just go to their site and choose a different style. Before doing this, view this demo first.

Click me for Demo

You'll notice that when we scroll down the page, the social network buttons remains on top. Do you like it? If yes, read this tutorial ahead. :D

After installing the social network buttons, if you don't know how to do it. Consider this step.

From Dashboard > Template > Edit HTML > tick the Expand Widget Templates
Find <div class='post-header-line-1'/> then paste the addthis code below it.
Save it!

After saving it, let's do the effect. Find </head> then paste this code above it.

The script's function is to add a new CSS selector and fixed the position of the buttons when scrolling the page to make it visible as scrolled by the reader.

Now, add this CSS above the ]]></b:skin>

Now, you need to add this line of code to the addthis code,

<div id='dynamicbuttons'>addthis codes here....
</div>

If it's not functioning consider adding this code above the ]]></b:skin>

<script src='http://code.jquery.com/jquery-latest.js'/>

That's it folks! Hope it helps! Errors? Just comment below. :)

Use textarea Element when Posting Codes

2012-12-28T23:30:00.001+08:00

Sometimes when we want to post a code in a certain posts, we used blockquote. As you notice my past posts with codes are posted using the blockquote tag. And it doesn't look nice! Honestly, I want to change my posts with codes using textarea tag instead of blockquote but I'm too lazy to do it. :P

The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.-W3Schools

Anyway, this is a convenient way for your reader to copy the code by using <textarea> tag instead of just the blockquote. Here's the demo:

Click Me For Demo

First, from Dashboard > Template > Edit HTML then find ]]></b:skin> Paste this code above it,

Then find </head> paste this code above it,

We used a script to highlight all the text inside the textarea for simple copying , added title tag for the hint and attribute for readonly to avoid errors.

That's it! Preview, and if there is no error, save it!

When posting, all you have to do is switch to HTML tab use this format

<textarea>
your codes should be here.....
</textarea>

Final Words

It's more convenient to copy a code using textarea tag than using the blockquote tag. Although we can't differently "colorize" the text, but it is still much better.

Add Breadcrumb navigation to your Blog

2012-12-27T22:01:00.000+08:00

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.-Wikipedia

The method that we will use here is the label of your posts. First, let's set our blog and allow label to show.

Then, from Dashboard > Template > Edit HTML > Find "]]></b:skin>" and paste the code above it

#labelstyle{color:#666666;font-size:12px;font-family:Arial, serif;padding-top:3px}
#labelstyle a{color:#538cd6}
#labelstyle a:hover{text-decoration:none;color:#000}

Then below the "]]></b:skin>" paste this code

<b:if cond='data:blog.pageType != "item"'>
<style>
#labelstyle{display:none !important;}
</style>
</b:if>

Tick the Expand Widget Templates then find

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<a expr:href='data:blog.homepageUrl'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' expr:title='"View more posts related to "+data:label.name' rel='tag,nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Delete that code.
Then find this code (the one that shows first) "<a expr:name='data:post.id'/>"
Below it, paste this code.

<div id='labelstyle'>
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
   <a expr:href='data:blog.homepageUrl'>Home</a> »
          <b:loop values='data:post.labels' var='label'> 
            <a expr:href='data:label.url' expr:title='"View more posts related to "+data:label.name' rel='tag,nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
» <b><data:post.title/></b>
      </span>
</div>

That's it! Preview if there is no errors, save it!

Final Words

Tell me if there's an error, just comment below. For the demo, I'm using it now. See it above the title :)

You can edit the CSS style just modify the "#labelstyle" selector's property.

Learn more about ID and Class Selector

2012-12-26T18:32:00.000+08:00

This should be a "must" learn in HTML and CSS. It helps you to beautify a specific element in your HTML body.

SELECTOR	ID	CLASS
CHARACTERISTICS	unique single usage	style many elements can be use several times
DEFINE WITH	"#"	"."

It works like this, let's say for example in your HTML body

<div id="header-wrapper">
<p class="txtbody">
This is a sample paragraph text using class selector</p>
<p>
This has no class</p>
<p class="txtbody">
This is a another sample paragraph text using class selector</p>
</div>

You can style the id named header-wrapper and the class named txtbody by using CSS, define them by

<style type="text/css">
#header-wrapper{background-color:orange;padding:10px}
p.txtbody{color:green;}
</style>

The result will be,

All the p elements with class txtbody has the color green and the background of the division with the id header-wrapper is orange with padding 10 in all sides as we define it in the CSS. We can only use the id named header-wrapper once and the class txtbody several times as shown above.

Do NOT start an ID name and class name with a number!

There are several techniques using ID and class selector. For example in your HTML body

<div id="mystyle">
<h2>
This is heading</h2>
<p>
This is a paragraph</p>
<a href="http://nullhead.blogspot.com/">I am a link</a>
</div>

You can define all the elements inside the division with id mystyle by this CSS

<style>
#mystyle{background-color:lightblue;padding:5px}
#mystyle h2{ font-size:20px; color:orange}
#mystyle p{color:black}
#mystyle a{color:green}
</style>

The result will be,

You will notice that as long as the elements are inside the division named mystyle, you can style them individually by using their HTML tag like the h2 (heading), p (paragraph), and a (links).

Learn CSS more

There are lot of online tutorial to learn more about CSS and creating website one of my favorites are:

W3Schools : The world's largest development site
QuackIt : Teaches beginners how to create websites.

Final Words

Play with CSS and you'll be amazed! The reason why I love web designing it's because of CSS.

Create a Gadget with Posts from a Specific Label

2012-12-23T01:35:00.000+08:00

This is the scenario here, you want to have a gadget/widget containing the posts of a specific label. Let's say, you have 10 posts having an "ABC" label and you want to create a gadget containing those posts. Sounds confusing but it's simple to achieve using Feedburner and it's BuzzBoost service.

Before proceeding, you may take a look on how to create a feed out of your blog posts here.

After watching the video, you only need to identify which label you want to use. Let's say I have this series of label namely "Fashion, Gadgets, Music". All you have to to is get that label name and use it as your feed address.

http://blogname.blogspot.com/feeds/posts/default/-/labelname

Replace the blogname with your blog.
Replace labelname with the label containing the posts you want to display in the gadget.

Use the feed address above and burn that feed then install BuzzBoost as instructed in the video, @00:16 of the video use the feed address above.

Final Words

Let me know if something goes wrong. That's all folks!

Add Related Posts with Thumbnail and Summary

2012-12-22T21:01:00.000+08:00

The related posts widget appears if one of your post has the same label with others. You need to label your posts first.

This tutorial will teach you on how to add related posts widget below your every posts. Don't worry this is simple, just copy and paste. All you need to do is follow the steps and learn to customize it by CSS. It has three parts.

The Script

<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
*/
var relnojudul = 0;
var numpost = 4;
var numchars = 105;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>

var numpost = 4 : refers to the number of related posts you want to appear
var numchars = 105 : refers to the number of characters you want as a summary

You need to paste the code, go to Template > Edit HTML then paste it before </head>. You're not yet done.

The placement

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

<div style='width:500px;height:190px'>
<div id='related_posts'>
<h4>Related Posts</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>

</b:if>

Change those value depends on you blog content size.
Paste the code after <div class='post-footer'>.

The CSS

#related_posts{padding:0 5px 5px;overflow:hidden;display:inline;}#related_posts h4{padding:5px;font-size:16px;text-align:left}ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline;}ul#relpost_img_sum li{list-style:none;padding:5px;margin:0;width:290px;float:left;display:inline;}ul#relpost_img_sum li a{display:block}ul#relpost_img_sum li img{float:left;width:60px;height:60px;margin-right:5px;padding:2px;background-color:#1B1B1B;border:1px solid #cacaca}
ul#relpost_img_sum li a.relinkjdulx{display:block;height:14px;overflow:hidden;margin-bottom:3px;background-image:none;font-weight:bold}

Paste it above ]]></b:skin>. That's it! Then Save it.

Note: Consider the width of your blog's content area/post area. Let's say the blog post area is 500px, change the width of ul#relpost_img_sum li to 240px or less/more, this is to make a two column.

Play with CSS to customize it!

Final Words

If you have problem with CSS, just comment below!

Validate and Optimize Your CSS

2012-12-19T00:01:00.000+08:00

Upon reading this, I believed you have knowledge on how CSS works.

CSS (Cascading Style Sheet) in layman's term is the one responsible for dressing-up your web page. It adds colors your dull web page. Without CSS, by default the body background is white, links are blue, all text were align in left, font is in Times New Roman with size 12px, etc.

Too much for the intro...

When we're creating or let's say beautifying a page, sometimes we tend to wrote the code without proper format as long as it works. The problem with CSS, the page doesn't give an error even if you entered the wrong properties. So we have this tool, a very useful yet the service is free!

CSS Validation Service

The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server.-W3C

Visit the Website

All you have to do is paste all your CSS code and let it run, the site will give the errors, warnings and the valid codes for your CSS. Isn't is great? Copy the code then we need to "minify" it.

Here come the best tool for that.

Clean CSS

A CSS Formatter and Optimiser. All you need to do is follow this settings as shown in the image below. It compresses and combine the selectors with the same properties.

Visit the Website

or you can adjust it as you desire.

Final Words

Having a knowledge on CSS is an advantage but thanks to many developers who shares their work to us and help their fellow designers build a website the easier way. Hope this helps!

5 Reasons Not To Apply Google Adsense

2012-12-18T22:44:00.000+08:00

You have a blog, you want to earn money from it but there are things that you must consider before monetizing it. Some bloggers were hasty getting money from their blog but failed to earn a considerable amount. Then they got bored, stop blogging. It doesn't have to end with that. All you need is patience and some pointers, motivation and lots of ideas which are original and not "copy-paste".

Here are some pointers, which I believe that should be consider before applying Google Adsense.

1. Your Blog Is New

As in a week old, you're not close with Google Team to approve your new blog. Even if you got approved it is still useless, you have to build traffic first. Promote your blog, when you reach let's say 500 visits per day, I think it's the right time. It will take time to achieve it but as the saying says "There are no shortcuts to any place worth going."

2. Your Content is Copy-Paste

Well, it's not that bad to "copy-paste" as long as you give full credit to the source. Don't even think posting a full-copied article in your blog. Respect and follow web ethics.

But what I mean with this, Adsense doesn't approved those copyrighted content.

3. Your Blog contains Voyeuristic Articles

Have you seen any ~~porn site~~ with Google Adsense? That says it all.

4. Your Blog Design is Sarcastically out of this World

With all those dark background with dark fonts. Web designing is not like dressing up, terno is "no no" here. There are lots of free templates out there all you need to do is find which fits the best on your blog.

5. Your not serious in Blogging

What's the point of applying Adsense for your blog if your not really into it? You need to dedicate your time and effort to maintain your blog status and don't disappoint your "real" readers and subscribers.

Final Words

To be called as successful blogger you must respect other's property and focus on your forte. It will take time to achieve it but don't forget to have fun as you go through it. There are lots of good people who appreciates your effort in sharing your knowledge to them. You might change their outlook in life. Words are powerful, you know!

That's all folks! You can always disagree on the said pointers but I will always appreciate and consider it.

To Do: Before and After Creating a Blog

2012-12-06T11:47:00.000+08:00

Blogging is available for all but there are some pointers that must be taken out. It's not just about writing and publishing an article but also following ethics, standards, respecting contents and opinions.

That was for the introduction! :D

Before Creating a Blogger Blog

1. Think of your Blog Title of course, it should be precise and describes your blog content.

2. Think of your Blog Domain.

Please do not use numbers on it like for example "123loveonline" unless it tells about your blog like this one: "54Blogger: List 5 things about blogging". And do not come up with this idea,

credits to 9GAG.com

Do not change your domain as often as you like. It affects your rank somehow. Stick to your domain for the rest of your journey as a blogger. If your planning to buy a custom domain name in the future, better check it first if it's still available.
It should be catchy, easy to remember, not too long, unique and avoid hyphens if possible. Please do not misuse "1" and "I", "0" and "O", "A" and "4". You can think better than that.

After Creating a Blogger Blog

1. Plan Ahead. What I mean to this is schedule your blog posting. It should be 2-3 articles per month. If you can do better than that, much better! Do not posts 5 - 10 articles in an instant or else your blog will be consider as spam by Google. Although you can still restore it. Give at least a gap let's say an hour.

2. Choose an appropriate template for your Blog . There are lots of free templates that will suit your blog type: portfolio, gallery, etc. Here are some of the sites that provides nice templates:

IVYThemes: Free High Quality Blogger Templates Collections
Blogger Templates: Free Blogger Templates for your Blog

you can always google.

3. Install the necessary widgets. Your blog should not be irritating. Avoid too many ads, pop-ups are the worst, marquee (scrolling text or scrolling images) is worse and having an autoplay background music is bad. You don't need too much, just few important widgets like

Recent Posts
Popular Posts
Recent Comments (optional)
Social Networks
Search Bar
Navigation Bar
Categories/Labels

Do not bring your reader to a dead-end. You must put a navigation links at the bottom of the page (footer).

4. Create the necessary Pages. Your blog should always have a "Home", "About", "Contact" and "Archive" other than that is optional. Do not post the e-mail address that you used in your blog. It is much better to use forms like on:

5. Optimize your Blog.

SEO or Search Engine Optimization is the process of affecting the visibility of a website or a web page in a search engine's "natural" or un-paid ("organic") search results.

Describe your blog. Go to SETTINGS > Search Preference > Meta Tags. You have to edit it. Then Save Changes.

Next Custom robots header tags, enable it then just follow this settings then save.

Use proper meta tags. I used this in my blog, paste the cobe below "<head>" but not after "<b:skin><![CDATA[/*"

<b:if cond='data:blog.metaDescription != ""'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title> MAIN KEYWORDS HERE | <data:blog.pageTitle/> </title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<meta content='en' name='language'/>
<b:if cond='data:blog.pageType != "item"'>
<meta content='YOUR KEYWORDS SEPARATED BY COMMA' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + "YOUR KEYWORDS SEPARATED BY COMMA"' name='keywords'/>
</b:if>

Use alt tags in images, add a search description in every post.

Minimize images for your blog to load faster. Minify your CSS. Put your script at the end, before "</body>" tag.

6. Promote Your Blog. One way and the most effective is through social networking sites. That is why install a sharing buttons in every blog posts.

Create a Facebook Page
Create Twitter Account
Join Forums
Share it with your "real" friends

Any other network is good. Like Bloggers.com. :D

And lastly, be friendly! :P

Downloading Entire Album in PicasaWeb Made Easy

2012-10-08T03:27:00.001+08:00

If your planning to create a gallery/album type blog, you better create an album in PicasaWeb rather than uploading it here in your post so that it will have a separate album from your blog's album.

Then, just browse the image from PicasaWeb as you insert it here. It will be more convenient to your reader cause they will have an option to download the specific album.

Here's how to do it:

Upgrade your account as Google +.

1. You just need the direct link of the album.

<a href= "LINK OF THE ALBUM" target="_blank"> Download </a>

2. Then the reader will have an option to download the entire album by clicking the link that you've created and this is how to download it.

All the images in the album will be downloaded as ZIP/RAR file, just extract it.

Note: Make sure not to upload nude pictures or else someone will report. haha

Auto-Tweet Your New Blog Post

2012-10-04T16:46:00.002+08:00

So, you have a twitter now? If you don't have it then this will be impossible to do. haha
Seriously, sign-up! It's free. :D

On the serious side, Twitter and Facebook is popular today and so with blogging. What we are going to do is automatically tweet you new blog posts. Less hassle, and less effort on you side. You don't need to log-in to your Twitter account, each time you want to share your new blog posts to your followers.

Here's how to do it:

1. Log in to FeedBurner then burn your rss feed. If you don't know how, check this video.

Don't finish the video just until 1:20sec.

2. After creating your FeedBurner Feed just follow the instruction on the images (click the images if you can't read it clearly)

That's it! Any thoughts? :D

Gradient Effect for Blog Background

2012-09-23T02:15:00.001+08:00

Isn't it nice to have a background that is catchy instead of plain color? If yes, proceed reading this.

However, the most important is the content itself because it makes your readers visit you blog often as it should be. This simple tweak will just add some "flavor" of your blog skin.

Here's how to do it:

1. Create an image using Photoshop. Don't worry it wont require advance talent to create one.

Create a New Image in Photoshop:

50px-width, 450px-height
Use gradient tool to fill that image with your choice of color

Important: The second "color stop" should be the main color of your background so that it will blend.

Upload you image then get the image link. You can upload it through your posting.

2. Implement by CSS. From Dashboard> Template > Edit HTML > Find "body{" then add this code below:

background: <main color> url("IMAGE LINK") repeat-x top;

e.g.

background: white url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2aup-92RxMyUTbYP0imuaWTdv6vJT0o0WDXhbDFfw6VSKZvugCfSwPJ9XNBr7qJjU7BMSUEOPAsa6vFM1OTdoY-eVR-xFVVf6upWdvce3IB0XCy8pypWqztlCpP_e_vwh-qvwL0wjoSs/s500/mattmorzbg.png") repeat-x top}

Like this image the first/top color is blue and the second color is black. Therefore, you should use black as your main-color in your body in CSS code.

It should look like this:

body{
margin:10px;
color:white;
background: white url("https://lh3.googleusercontent.com/- Q6sS9wZv2p8/UF3N5dREXzI/AAAAAAAACvc/A4QioHGenMk/s500/mattmorzbg.png") repeat-x top;
}

That's all folks!

Resizing Blog Width: Image Problem

2012-09-11T19:21:00.000+08:00

So, you decided to enlarge or make your blog smaller. And then this happens:

The image's size overlaps to the blog(main-wrapper) width, you can fix it by editing the post but what if your other posts have the same problem. Changing the image size will be tiring by doing it individually. So to solve this.We need a simple CSS code:

Here's the solution:

1. You should know the size of your blog, to be specific the main-wrapper where your posts are written. You can go to the blog dashboard >Template> Edit Html, Find "main-wrapper" or to Customize> Adjust widths.

You can get the size of your blog posts area by subtracting the entire size(960px) to the right sidebar(310px) which for this, 650px. But you should keep in mind also the padding and the margin. So, it is safe to use 600px as your base image size.

2. Then add this simple CSS code below before ]]></b:skin>

.post-body img{
max-width: **px
height:auto;
}

**size in px, the size of your blog posts area.

That's it! Any thoughts for this?

A "SHOULD" be codes on a Photo Blog

2012-09-02T01:41:00.000+08:00

The following two codes will be useful for those who have photography blog, or just a simple blog with lots of images on its posts. Upon doing it with my friend,

LIVE DEMO

Well here are the two codes:

1. Page Navigation using the left and right arrow keys.

Isn't it great to navigate using arrow keys?

Implementation:

Go to Template>Edit HTML in your Blogger dashboard and tick the Expand widget templates box near the top of the page. Then find this codes:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

Then replace the above code with the code below:

<div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='newer'><data:newerPageTitle/></a>
</span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='older'><data:olderPageTitle/></a>
</span> </b:if>

Lastly find </body> then paste this code above the </body> tag:

<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
var kGo = (!event) ? window.event : event;
switch(kGo.keyCode)
{
case 37:
window.location.href = document.getElementById('newer').href;
break;
case 39:
window.location.href = document.getElementById('older').href;
break;
}
};
};
</script>

Preview it, if it's fine then save it.

Tips: You can add another keyboard events/shortcuts just use different id to the link then another key of course. Click here the list of the keyborad events.

case <KEYCODE HERE>:
window.location.href = document.getElementById('<ID HERE>').href;
break;

You can use the above code to add another shortcuts.

SOURCE

2. Lazy Load

The concept is quite simple. Lazy loading is a nifty way to load images in a long web page. In this method the images that are on demand are loaded first. So when the user scrolls through the web page, the images are loaded one after the other. The plugin ensures that only the images that are in the viewpoint of the reader are loaded first and the other images are left untouched.

Implementation:

Find </body> tag then above this tag paste the code below:

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script charset='utf-8' src='http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder :
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlV1Ri-CoPkapjKb66JPWMXCdAZDiYs0mzljc2UGIO7cfKfFOgG1GMblvLV3BldzMrin7bqkzFmvlq9-TxaLn5Ot-NIv_BQMCqQyDGxNSgdEVXUCcBkYU3e8AJ0-v-fIp0NOoRHXkPDfr/s1600/greys.gif"});
});
</script>
<script src='https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js' type='text/javascript'/>

That's it. Save it! Credits goes to the hosts of the code.

Last words...

It will be useful for a photoblog to implement this because it lessen the load time and make your blog more fun to "use" and easy to navigate.

Adding Feedflare in Blogger

2012-08-28T00:38:00.000+08:00

FeedFlare
Give your subscribers easy ways to email, tag, share, and act on the content you publish by including as many or few of the services listed below. FeedFlare places a simple footer at the bottom of each content item, helping you to distribute, inform and create a community around your content. -Google

Needless to say, it's very helpful...it's not necessary but can help your blog to be interactive. And it doesn't hurt, why not add this FeedBurner "function". Just follow this video tutorial. It's a seven minutes video but will only take a minute for you to follow. I just don't have a luxury to edit and shortened it. Sorry, here we go.

If you don't know how to use Feedburner better watch the video below also:

Don't finish watching the video just until 1:20secs then follow the first video.