Blog Loading Speed ​​up the Optimization / Compress CSS

What is the relationship with the CSS load time (load time) blog page? The most simple, the size of the CSS file to determine how many sections to be read by the browser. The larger the file, of course, the more command language, so 'reading time' required by the browser even longer. You can use the website / blog speed test tool on this blog to find out the speed of loading your blog.
After changing the template some time ago, a problem loading the blog tends to be longer than the template appear before them. Of course this effect is not good. Yang first effect is the inconvenience visitors. Even more so when there's impatience and then embodied in action "Close wrote aaaaah, i lazy, lo-la bangeeetzz". Secondly, Google is currently performing a penalty for the website / blog that has a load time is too long. As a result, ranking in the search index can be dropped, in other words, SEO is weak.
One thing I did was attempt to compress PNG images with PngGauntlet. The result is rather to reduce the size without reducing image quality. In addition, other steps are performed, one of them: streamlining CSS. Hopefully loadtime now been reduced though not maximal (hopefully eventually ga ya).
Back to the CSS. CSS file is the entire contents of the CSS style rules that exist in the template HTML, XML, and others. All rules are then summarized into one as a file that is read by the browser. Well, in this section, there are many rules no need to remove so that we can not take the space as more and more space the greater the file size.
Then how do I reduce file size CSSnya?

 

1. Manually do the editing CSS.
There are a few examples of the following rules:
For example, rules on the header-wrapper,

#header-wrapper {

background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}

Contoh di atas adalah penataan CSS secara standar, dimaksudkan agar browser dapat membaca aturan dengan baik dan urut. Namun pada saat ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi (anda sudah tidak pake IE 6 yang kuno itu lagi kan?), sehingga aturan seperti di atas tidak menjadi hal wajib. Aturan di atas memiliki white space (sisa ruang) dan juga spasi. Kita dapat melakukan perampingan pada ruang-ruang tersebut. Contoh:

#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}

In the example the following styling:

{Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px; }

Style margin above can be streamlined with CSS short-hand and reduce spacenya:

{Margin:15px 10px;}

Because the upper and lower margins as well as the right and left together, we can streamline the way over, which represents the size of 15px and 10px below the top-right-left represents. If all the same margin, for example 15px, we just write: {margin: 10px}. Note that all the rules and walk starts from the top clockwise: top, right, bottom, and left.

2. Use the Service Provider sites Compress CSS Online Tool
Well this is the easier part. You can use some CSS compression tools and services at a glance you immediately get the result. Please visit:

-CSS Drive Gallery

-CSS Compressor

-Online CSS Optimiser/Optimizer
-Minify CSS

-CSSTidy Online

Or you can search other sites by googling with the keyword "css compression tool".

The steps:
a. Copy all of the CSS rules template HTML / XML.
b. After logging into the site CSS compression services you select, paste all the code and click 'compress', 'optimize', and ebagainya lains.
c. Wait a few moments and complete results will come out with the last file size after compression and comparison. Even small differences will greatly affect the reduction loadtime page.
d. Download backup template prior to edit HTML pages.
e. Delete section where you copied earlier and enter the result aturanCSS compression to the part.
f. Preview and if there is no problem anymore, save.clue:
The whole CSS code located on the head. More precisely, all CSS code display manager is located between <b:skin> and]]> </ b: skin>.
Select the type / compression options 'standard' or the like on CSS compression tool you use.
Good luck and hopefully useful.

Read More

Tips: How to Create and Build Blog Effectively

Each Blogger, would want a good progress and developments on his blog, both in terms of content, appearance, traffic, popularity, to the financial aspect. Often, because of the limitations of the reference and the influence of some of the discourse that is not constructive, the Blogger newbie stuck on the ways in which the actual instant away from giving results as expected. Thus it is extremely important to create strategies that cooked, simple as any, so that blogs can develop and produce something that is encouraging for the Blogger.
If the steps have to be called as an error due to ignorance, many Blogger had an understanding that all things can be done instantly, both in making and in building a blog. So, sometimes they get stuck on the use of methods that are not good and misleading. Whatever the goal, something that is reached by way of a good surely would meghasilkan something good also.
I created this article as a share of some experience when creating and building a blog, which of course a lot of trial and error as it was with another newbie Blogger.

Making Basic Tips Blog (internal Step)

After learning how to create a blog, any blog platform, it should be understood that a blog is not a short process. However, a blog is the process by which the construction and blog elements arranged so as to form a basis of appearance and content of the already visible to the reader / visitor, at least there are several stages in preparing the blog:a. Develop a unique domain name that no one owns it.b. Registering a domain to a blog service provider / or a direct-hosting on its own.c. Perform the verification process and finally to the url terbuatnya blog, which means a blog was born.
At this point we often think of all was in order. Then, at random, we began a massive post. In fact, due to meet the demands of the number of posts which have seen a lot, a blogger do not hesitate to copy and paste the mass of several blogs at once. This method is actually a lot of effort to make a good blog and not at all effective.Here are tips and next steps on the stage and the process of creating a blog:A. Focus on the construction of the first blog, do not think about the traffic / visitors. If you need to set access to a private blog where only you can access it.
2. Look for theme / template as you wish while meeting the criteria in accordance with the blog topic is brought about (including personal blogs). In the process of the future, will very likely bregonta changed template. However, it would be better if it's minimized, or at least only be done at an early stage. Furthermore, the blog is ready to step to the previous template has been tested and selected. When this has been a lot of templates / themes and free premium quality.
3. Select the widget to be aggregated and posted. Focus on the use of widgets whose function is clear, such as navigational tools, the community (follow) and statistics (traffic / visitor / pageview). Actually very reasonable to try a variety of widgets (called also curious and want to see results, right?), But note the correct function. Avoid sweetened widgets that are not important, rather than just add weight and create a blog visitor interrupted. I am often greeted with a widget / plugin javascript pop up window type when visiting a blog: "Hello, write your name, your age, your gender?" My question, "Does it matter?" I feel very annoyed, because I need is to read the blog article, instead of following the population census. :) Avoid such widgets.
4. If necessary, create a new blog that serves as a laboratory for testing templates and widgets, so if you think thats right, just installed in the main blog.
5. While doing the above steps, make a posting on a regular basis. Relax, do not hurry. Writing in a relaxed state and a clear mind can produce paper-weight, simple as any subject.
6. A blog is a vehicle for displaying the discourse, make sure your blog has to have enough articles before being cast to a wide audience. 5-10 I think the article is enough to be the start of the opening introduction of a blogger and his blog.
7. One to two months is not a long time to make the foundation of a blog that really sturdy. Cultivate understanding that all the above process can not be done in a day or two. If the analogy just as the house which I built, it must be ascertained whether the foundation is prepared really strong and ready to be stacked with other building materials, and that it was not exactly instant.

Building Basic Tips Blog (External Step)

Once the foundation is planted in the ground is certainly strong enough, then now is the time to build a wall up to the roof, the parts that have been touched by the atmosphere. This stage involves a lot of external things which blogger started the move to promote / introduce her blog to the public.
A. Bertandanglah to other blogs, get acquainted, and comment as much as possible. Prioritise the blogs are still new. Why? The possibility of getting a response and a visit back will be much bigger and faster. Attitude of other bloggers who have the same condition would be disconnected because the interaction is more balanced. It would be very difficult to obtain the senior bloggers who incidentally has the same activity together with blogger blogger-sepantarannya. Not mean to discriminate, but if the analogy, if you will bertandang and play with high school kids while you're still 6th grade? Of course bloggers demanding that such a standard is not quite as easy. All there stages like when climbing stairs. Climb the stairs instead of five are at great risk and jmenghilangkan the process that should be spent in socializing and learning.
2. Berkomentarlah with quality content. Why? Because the content of comments which will weigh more interesting than random. Give opinions in an article or ask things yan can provoke enthusiasm for the blog owner to answer. In this way, a visit back will have a large enough percentage of likelihood. Avoid comments that only "jeplak origin", because of your quality as a new blogger is also assessed from these factors. It will also attract senior bloggers to first consider your presence.
3. Having got to know and socialize with fellow Blogger, began also to the stages of introducing blogs to search engines and enhance its SEO, both on-page and off-page. A bloggger who want their blogs bustling visitor can not rely on visitors from the blogwalking only. Therefore, this stage began to be a very important step and should be constantly carried out.
4. One way to strengthen SEO and search engine indexes is to diligently commenting on blogs as a way before. Was also commented on dofollow blogs. Use a blog as a link url and blog name as the name of the commentator (anchor text) when filling out the form identity commentator. Again, I reiterate, berkomentarlah with quality comments because it would also be considered by the search engines. For a new blog, optimize your link building blog homepage link advance than other pages (posts).
5. Register your blog and articles to directory sites and social bookmarking. This will increase the visibility of their pages and their blogs.
6. Be active start to follow the blogger forums and public forums. Create a post with a topic / discourses. Make sure the link is listed on the blog post as the source and identity. Posting of the article does not have to explain something, but can also be opinions, questions, and anything that requires a response. Site forum bloggers in Indonesia such as the Indonesia-blogger.com and www.planet-blog.com. For international directory, for example, is technorati.com (see also other blog directories in the footer of this blog widget).
7. Keep hunting directories blog / website and social blookmark. Use the search engines as a search tool that is proven effective.
8. Expand your network and the popularity of the blog by using social media like Twitter and Facebook. You can publish articles, hook the follower and fan (likers), promote and expand the reach of communication.
9. Still continue to make posts. Wealth and resources is an article blog. But do not force yourself to write as much as possible. Write with a capital of mood and spirit. Quality and original articles will have the opportunity to get a lot of other bloggers who linkback to copy and paste it. If there is no source link, ask. This is for originality and credibility of blogs as well as to increase the popularity and visibility of the blog.
10. Perform an analysis of small-scale (large-scale too fine ding), against traffic blogs, both in terms of number of pageviews and visitors. Use the statistics features which have been provided peyedia blog blog services (platform) or other site where the widget traffic / visitor / pageview been previously installed. Note the progress and see if there is improvement or not.
11. Also check the condition of your blog in search engines (Google) via Google Webmaster Tools or Google Analytics.
12. Register your blog to Alexa to know the progress of rank (rank) blog traffic.
13. (Optional) Be a guest blogger (guest writer) on blogs that offer.
14. Step number 1 through 12 are the steps that must be done simultaneously and continuously as long as you want to continue to have a development blog; both in terms of quality, popularity, traffic, and financial (for which to monetize his blog).
15. Be patient and enjoy the process.

Read More

6 Free Chat Widgets For Your Blog

 

Cbox is one of the popular chat and shout-box tools. Many blogs embed this chat tool. We can see it anywhere around. One thing I like from this tool is that it is secure. You can be sure to control any spam yourself  by having the ultimate control on it. It supports avatars and smileys, but of course, for free use, ads will be embedded either.

Gabby is a chat tool service that supports and provides RSS. It has audio functionality and pretty look. All you have to do is just 'gab' your blog url to get this tool.

Zohochat is easy to set-up, slick, simple to use, and has a professional-look. You can choose whether it is for shout-box or live chat. This one is what I recommend most.

Freeshoutbox is basically formed in HTML, so you can easily embed this tool anywhere you want. You can choose more than 200 templates if you are a bit 'lazy' to customize the details. What I like most is that this tool supports auto refresh: 6 per minute, whether Shoutmix: 1 per minute, and Cbox does not support this feature at all. You can also ban an IP when you find it annoying. Ads embedded below the box.

Well, because Oggix is one of karya anak bangsa, so I simply got to say in Bahasa Indonesia sajah (lebay dikit gapapah....lah ^_^). Shout-box ini adalah karya dari Mas Oggix, men-support smiley, avatar dan tidak membatasi jumlah entri chat. Bahkan anda juga bisa memasang lebih dari satu shout-box di  satu blog /website dengan satu account saja. Ajax platformed. Just give it a try here.

Yoo-hoo, there are of course many other chat/shout-box widgets to find and consider. Just type some words on Mr. Google.

Oops! I forgot to present one other tool; that is: Shoutmix.  The service enables you to modify the appearance of your widget by employing many optional themes, as well as custom CSS. This tool is able to filter profane words from being displayed on the shout-box.

Have a nice try!

Read More

Star Rating widget For Blogger Posts

Star Rating widget For Blogger Posts one of the beautiful widget to rate the post. Now its very easy to add star rating widget below each blogger posts.

If you wanna add star rating widget like below to your blog, Just login to your blogger with draft.blogger.com instead of blogger.com.

Now Follow this path:-


LAYOUT > Page Elements > Edit Post Box > Select There Rating Widget > SAVE


Now View your Blog , you will see the rating widget below every post.


This will only work if you are using uncustomized blogger template by google.


If you are using customized template or third party template on blogger. Then add these few codes to your blogger html.

Layout > Edit Html > Ctrl + F

Now,
Search For <data:post.body />


Add below codes Just after this green line

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</span>
</b:if>

Now Find This Line <b:include name='nextprev'/>

Add Below codes just after it

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Now Save Your Template. Its Done View Your Blog.

A Beautiful Post Rating widget is now added below your each post of blogger.

Read More

Related Posts Widget With Thumbnail Preview For Blogger

Related Posts Widget With Thumbnail Preview For Blogger,as we all use related posts hack to show of the related posts in particular category below our posts as this helps our readers to move through our pages easily.The basic difference is that this widget adds thumbnail from that particular posts as of previous related posts widget just show of the link to post.

You can see how the thumbmnails will look in the widget in below picture.


How to install this widget in blogger.

Just visit Linkwithin.

Give your Email adress,blog address and select suitable blog platform and grab the widget code.

Now You will get install widget button click it,if you are logged in to blogger it will intsall widget directly or login in new window else you just get the codes and add codes manually in your sidebar in html/javascript page element.

Read More

Tweet Button For Blogger By Twitter

Hi friends its good news by twitter that they released the official tweet button for doing tweets to our blog content and help more in sharing it on twitter.As previously we used the green retweet button on our blogs for making our readers to share our post with it.As the button was made by tweetmeme, but now they joined in hands with twitter and has released the tweet button officialy on twitter site.You can see tweetbutton live.

They have made it now more beautiful and still available in both vertical and horizontal styles with one more button added that is without count.Check the three buttons available below in picture.



Now i would like to tell you how to add these buttons to your blogger blog.

Just go to blogger Design > Edit Html and expand the widgets codes by chekcmark it.Press Ctrl+F and find for this code in blogger <data:post.body/>

After getting it just place the below codes after it,if you want button to have at beggining of post else place it after the code you found to have button at the end of the post.

For vertical button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

For Compact Button

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

For Button without count

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Now just little bit about customizations in it.

1.Use the green starting and end lines only if you want to show buttons only on your post page else remove it.
2.Enter your TWITTER-USERNAME written in bold black to show its shared via you if not want remove bold text.
3.Some portion is marked red.Its just simple css to postion your button.Make it float left or right where you want and margin also from left or right of the post.

I am sure now you will be able to add these buttons to your blog easily.As you can get the codes for these official buttons here at twitter goodies.If you didnot like these official buttons by twitter you can also use these old retweet buttons by tweetmeme for your blog.

If you have any problems in adding these buttons to your blogger blog leave your comment here i will help you out.

Read More

How Auto Adjust Images Size In Blogger Posts

How Auto Adjust Images Size In Blogger Posts,yes friends many of us would be daily posting some images in there blogger posts or would have photo blogs and would be tired of giving the width and height to there post images again and again to adjust and look good in there blogs.And dont they think when they will switch to new template the width and height assigned to images in post can create problems for them.And many of blogs would be facing problems if they post images with width longer than post section and image would overlap the sidebar and if not overlapping then only part of the image in post section will be visible rest part hidden.So i will be telling you on how to auto adjust images size in blogger posts to suit your blog needs.

Now Please look at the pictures carefully to know what i am exactly talking about.

Suppose you have post section of width 500px and you post a picture of width 800px in the post without defining any width and height to it.Note if you uploading through blogger editor it automatically define width and height to image so will never face error in that.

The image would appear in post like below two methods.

1) As image width was 800px,Image width get shortened and will show up in post upto 500 px and rest 300px will be hidden.



2) Full Image is shown but overlap the sidebar.



But the proper way the image should be shown in blogger post should be like below.



So to make it correct i am making you learn this css property for your blog,if you are facing any of these problems.

As say you have an blog and want to show images of width equal to post section i.e you have post section of width 500px and you want to show images to autoadjust to that size in your post.For doing that just go to blogger Layout >> Edit/Html and add the below codes before ]]></b:skin> tag :-

.post img {
max-width:500px;
max-height:500px;
min-width:200px;
min-height:200px;
padding : 10px;
clear: both;
}

Just adjust the properties min-width,min-height and max-width and max-height.As after using above codes now in your post the image width and height will never get less than 200px and not more than 500px.So image size will always lie between 200-500px.If image size is less than 200px it will auto adjust to 200px and if more than 500px it will autoadjust to 500px.

Now if you wanna use all images in your posts of same height and width i.e mostly used by all photo blogs to show of all the images of same sizes.You can use below codes.

.post img {
width:500px;
height:400px;
padding:10px;
}

Now all the images of any size in post will appear to auto adjust to size of width 500px and height 400px.

**Note:- If not working properly , there might be image property defined in your template,just find for it and check it.Find for .post img tag to check it.

Read More