Easy Upload / Hosting File Javascript (.js) Quick Loading For Personal Use

If you are going to install the widget on the blog, and will use JavaScript files that have been uploaded and hosted by the giver script. usually we are asked to upload and host the .js files  his own. The problem is, sometimes loading pages (page load) being hampered because the .js file that is uploaded is also used a lot of website / blog. Additionally, uploading and hosting the js file in the usual places, such as GoogleCode or sites.Google, is no longer efficient as it used to. In fact, sometimes loading pages so bad because the wait was too long response of its host.

So, to tackle the problem, hosting JavaScript required alternative that can be used optimally and can be for personal use. Well, after rummaging through Google, I finally found this one site, YourJavaScript. This site answers all these needs: fast loading, upload efficient because it does not need a list, and can be set for individual use.

How to upload and hosting The JavaScript file:
Sign in to Yourjavascript, previously prepared in advance javascript files (js) to be uploaded.
Consider the following picture:

A. Click Chose File, after the folder window appears, select the .js files to be uploaded.
B. Tick ​​'Make private' if the file will only be used for the website / domain specific. This form will appear as below:

Fill in the url where the file will be used. If more than one, separate them with a line. Note: url / domain with or without www same.
C. Enter a valid email address, url / direct link will be sent to the email address so that the security and confidentiality is maintained.
D. Click "upload" to complete the process of uploading and hosting.
Once the process is complete, check your email. Copy file link url javascript (js) files that have been uploaded and is ready for use.

Read More

How To Compress PNG Images For Speed up Your Blog Loading with PNGGauntlet

PNG format images nowadays, it is getting popular and a favorite because it has many advantages. One is transparency images that make this kind of a good image to put on any colored background. However, the drawback of this type file is a file that is larger than the other formats so that when the browser load it takes a relatively longer time than the jpg format images. I once had to give up and turn down the resolution or clicking-convert it to other formats such as jpg. But once knew this PNGGauntlet, compress images easier. Page load time remains fast and the image quality was still good. of course, the search engines prefer pages that can be loaded quickly.

Based software. NET uses Ken Silverman artificial PNGOUT command to optimize PNG files. Its function is to reduce the number of bytes that are not needed without losing any information contained in the compressed file. Thus, the quality of the compressed file with the original file. Before uploading PNG images, be sure to first compress. You simply enter the file you want to compress or drag (drag) to PNGGauntlet window, and select the compressed file storage and click Optimize. This software can also be used to convert a JPG, GIF, TGA, PCX, and BMP to PNG format. And what's more, the software is only measuring about 815.27 Kb!

Important!: Before using this software, your computer must be installed. NET Framework 3.5 or 4.0 Client Framework. Get the installer file in smallestdotnet for sizes that are not so great.

Download PNGGauntlet Page

Read More

5 Tips How To Speed ​​Up Your Blogger / Blogspot (Loading and Optimizing The Blog Elements)

Blog loading speed is very important, both for the comfort of visitors and also SEO. Load time  too long can make visitors applause before it can read the entire contents of a page.
Actually, if the blog has a reasonable load time is a bit longer than the website, because blogs synonymous with some of the widgets are installed either as a navigation tool as well as for the functions/features of the other.

Average of all the widgets that use a lot of javascript, automatic loading times tend to be longer. It's as well if we do the minimization of the size of the file is loaded.

5 Tips How To Speed ​​Up your Blogger / Blogspot (Loading and Optimizing The Blog Elements)

1. CSS
CSS (Cascading Style Sheets) is a styling language that we often add to the HTML. To reduce the size of CSS in HTML templates, CSS compression done either manually or with a tool. Its function is to reduce the file size and the time read browser. Then, place the CSS rules at the top.

2. JavaScript
JavaScript has read the time tend to be longer, so that when placed on, the browser will read first, while other elements will wait until loading is completed. As a result, elements that wanted to be seen to be affected, especially the post / article. Therefore, the elements that contain javascript (especially in the widget) should be placed at the bottom.
Use the output of widgets and Google's Blogger since its javascript can be loaded quickly. If forced to use an external javascript, uploading and hosting the js file for personal use only. Use the service to upload and host javascript to load fast and personal.

3. Posts (The Post)
On the main page (homepage), the number of posts or articles that appear also affect loading blog. If the post / article is displayed too much, then the loading time was will increase. Show the articles on the main page with a reasonable amount, say 5. To set it, go to Dashboard >> Design >> Edit HTML' on the body of the blog post >> write the amount / number of posts you want to display. See the following picture:

4. Picture / Image
Serves to beautify the look of the image, giving the impression, and became a symbol of representation and interpretation of the article content. However, large-sized images also inhibits loading blog, therefore it is necessary to use the tactic in the picture. PNG image format is preferred because transparency will be required but the file size is much bigger but try to use the JPG format images. If you still have to use a PNG image file, such as the header, background or blog posting, reduce / compress its size with PNG compression tool that reduces image quality.
Available when adding an image to the post, provide or create fixed size thumbnail, so the browser can read it quickly. for example:

<img width="80%" src="http://www.xxxxxx.com"/>
This means, the image will be sized to 80% of the original image. Or it could be the size of the pixel (px), eg width = "100px" height = "100 px". This is to make it a thumbnail (preview image).

5. Widget / Gadget
Widgets are an important part of a blog. However, if the widget is used too much, the longer the time loading the page. Use widgets and especially vital navigational support. Avoid widgets that are not so important and does not even support the content of the blog, for example widget clock, calendar, PhotoShow, and others. I call these widgets is not important because visitors do not actually need it, the loading time became more severe, and does not give any effect to the performance of the blog.

Read More

How To Create Popular Posts Widget With Various Colored Style

This post is about tutorial How To Create Popular Posts Widget With Multi Colored Style, the widget which aims to show popular posts based on page views. Popular posts this time will be modified by the addition of a Popular Post with CSS3 nine colors on any display title posts like this beside display screen shoot:
If you are interested to add popular posts widget with multi-color display like the above? Making the following tutorial:
A. first Step
1. Login to your Blogger account.
2. Choose Template >>  Edit HTML >> Find the code ]]> </ b: skin> (Use CTRL + F)
4. Put the following code just above the code ]]> </ b: skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

5 Save Your Template
B. The Second Step
1. On the Layout menu >> Select add gadgets >> Select Popular Posts >> uncheck image thumbnails and captions, show at least 9 posts.

2. Save Your Blog and see the results!
Thus tutorial how to add popular posts widget with multi-color display on the blog. May be useful.

Read More

How To Create Drop Shadows Image And Zooming Effect On Blogger Post With CSS

This time I wanted to share again, just a simple trick how to create or add a zooming effect and drop shadows on images with CSS3. like the example shown below :

If you are interested in adding effects or post this on your blog, it is very easy, just follow these steps:
1. logged into your blogger account
2. Click on the dashboard >> Template >> Edit HTML
3.  Find the code ]]> </ b: skin> (Use Ctr + F for easy searching)
4. put the following CSS code above the code ]]> </ b: skin>

.TTB-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TTB-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

5 To display the zooming effect and drop shadows on the image of your blog posts. In the HTML editor posts just add the following code:

<div class="TTB-CSS3">
<img src="Image URL Here" />
</div>

6. Change Image URL Here with the URL/link image you want to display in your posts.
Thus tutorial how to create a zooming effect and drop shadows on the image. May be useful.

Read More