snippetbymatt

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, number

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. Th

"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. Tha

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="c

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( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwxhGm8-8PFkdBTvaJPoVdW5ZteSQwg7_5gpU3DURengu_Jfv-SsPNMQk8DXkknCdQcjqD4oieEeCLzc8z8hzUf45YIWauriLD6G3OTTbQGE33oI3w-kiIWxlotPkecsYIgyxbQ3o_Xgo/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: