Posts

Showing posts from February, 2013

Display Post View Count: The Easiest Way

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&amp;u=false&amp;ox=10&amp;oy=17&amp;c=000000&amp;b=transparent.png&amp;f=Terminator.ttf&amp;fn=false&amp;w=110&amp;h=25&amp;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" fo…

Preloader Script for Your Blogger Blog

Image
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…

Create a Navbar: The Easiest Way

Image
"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 al…

Different Background Image on Post

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,

.bg{position:fixed;z-index:-2} .bg img{position:fixed;top:0;left:0;min-width:100%;min-height:100%} .bg .fade{display:none;border:none;margin:0;padding:0}
again, find </head> then paste the code below, just above it

<script type='text/javascript'> $(window).load(function() { $(".fade").fadeIn("3000"); }); </script>

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;"&…

Free Background Patterns for your Blog

Image
Plain Colors load the fastest! Image background  loads fast! But having a background pattern loads faster at the same time gives more "flavor" to your blog background. So, why not use it! :P

Anyway, this is my first post for this month. I've been improving my blog template to please your eyes guys. :)
So, I'm using patterns for the template body background.

In order to use patterns as a background, you just need a little bit of CSS.
body{background:#343434 url(http://1.bp.blogspot.com/-tuDRjrYOhmY/UQs1RMrVSqI/AAAAAAAADlc/b0AdTJTNt60/s1600/climpek.png) repeat scroll top left;} Change the blue with the image link and the green with hexadecimal color.

Here are some of the patterns I like:




Download a pack of patterns from Subtle Pattern below: