Home / Arsip Untuk December 2013

Monday, December 30, 2013

Animated Colour changing Background for Blogger

Comment
Changing Background
Animated Colour Changing Background for Blogger - Today I am going to teach you how you can make your background change to different colours with animation using keyframes CSS. Inspite of using big images you can use these CSS codes which load extremely fast and you the user too gets too see some interaction on the background.

The live demo of this design hack can be seen by click the button below.



Live Demo

The demo ofcourse looks awesome so in order to add this animated background in your blog/website follow the below steps.

Removing existing code


First of all you have to remove the existing background code to avoid any conflict in between and minimize excessive code. For this search the body selector from the CSS codes in your blog. Under that search for background property and remove the property with the value (Do Not Remove the Selector). In case you don't know what selector, property and values in CSS codes are refer to the below image.

 CSS Syntax 

Adding the code


Now we have to add the animation codes in the blog template. For this paste the below given code just above ]]></b:skin> <


body {
    animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}

@keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-webkit-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}
@-o-keyframes colorBackground {
      0% { background-color: #fbcf61; color: #fbcf61; }
     20% { background-color: #6bd57e; color: #6bd57e; }
     40% { background-color: #ff6f6f; color: #ff6f6f; }
     60% { background-color: #57cff4; color: #57cff4; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #fbcf61; color: #fbcf61; }
}

Code Source - Immam Vel

After adding the code, save the template. You are done now. Now you and your visitors can see this animated colour changing background in your blogger blog.

Sunday, December 29, 2013

Popular Mistakes That Every Bloggers Do

Comment
Blogging has emerged out as an outstanding way of earning online money but not all of them are successful. Out of 10, only 2 bloggers are successful in achieving their goals. It is due to the fact that they do not pay much attention on several key factors that are essential in the blogging process. An expert bloggers knows all the tips and tricks to take his blog to the top notch position. If you are also willing to get successful and start earning from your blog, you need to prevent yourself from doing the popular bloggers mistake.

Some of the common mistakes which are mostly done by the bloggers are discussed as follows. You can go through them and overcome the shortcomings so as to become a successful blogger.

Bloggers_mistake

Purpose of the blog

There are many people who get into the process just for earning money without knowing the motive or purpose of starting the blog. This is a wrong practice as without any goal, you are certainly not going to move in the right direction. So, before starting the blogging process, make sure you know the various aspects of your blog like whether it is informational or not, the target audience, writing purpose etc. if you know the purpose behind creating a blog, you will be able to plan effective strategies and create success plans so that you can bring your blog to the number position on search engines.


Irregular posting

In order to generate more traffic towards your blog, it is necessary that you update your blog regularly and that too with unique and informative content. Posting on regular basis ensures that your existing readers will visit the blog daily. It is also an effective way to boost the traffic on the site. If you do not post for extended periods, the readers might look for information elsewhere. So, make sure that you keep posting at regular intervals and do keep a check on the quality of articles or information posted.

Be patient

Blogging is an activity that requires hard work and time. You will not start getting huge amounts as a result of blogging in few days or weeks. You will have to be patient and keep posting on the blogs as per the demand of the readers. If you lose your faith and stop posting, you might never achieve your goals.

You are not interactive

There are many bloggers who just post the contents as their duty and are not interactive with the readers. This might lose the readers� interest. Hence, you should go through the comments or questions asked by the readers and reply to them. Also, make use of social media networking sites to interact with the readers.

Take your blogs to number one position by avoiding the above discussed popular bloggers mistake. This will help you in meeting your blogging goals at the earliest.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page.

Monday, December 23, 2013

Awesome Christmas Lights Widget for Blogger

Comment
For this Christmas vacation, I hope to give flash lighting for decorate your blog.This is just CSS effect with animation.Every modern browsers support with this decoration. You can add this Christmas Lights effect as widget with simple steps.Use below button for demo.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoFjFLeW2M5lZ_i5Y9qCRWpMwnnRo-E51AGQcSFBlxhQ9oX9DtiaxaLcpzk3fTfmZ4qHNRNKq5_WOKzygEeGo1PBZjT9h9ZGxHcsX3qsWrzW6OFYH_AfFgiUogKiSSpZ4ezuXec_EhNUk/s320/christmas-lights.gif


How to Add Christmas Lights Widget for Blogger


1. Go to Blogger Dashboard > Layout
2. Click Add Gadget and select 'HTML/Javascript'
3. Paste below code.
<div style='position: fixed; top: 0%; right: 0%;'/>
<a href="http://www.bloggertrix.com/" target="_blank"><img alt="Blog Tips" src="http://tester2.synthasite.com/resources/flashing%20christmas%20lights%20right.gif"/></a>
</div>
<div style='position: fixed; top: 0%; left: 0%;'/>
<a href="http://www.bloggertrix.com/" target="_blank"><img alt="Blog Tips" src="http://tester2.synthasite.com/resources/flashing%20christmas%20lights%20left.gif"/></a>
</div>
4. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Christmas Lights Widget for Blogger. Just leave a comment.I will help to you.
Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page.

Sunday, December 22, 2013

Facebook Slide Out Share Button for Blogger

Comment
Facebook Share Button
It has been long time since I have not posted a new widget so here is a much awaited Facebook Slide Out Share button for Blogger blogs.

This widget has many features such as -
  • Lightweight Size
  • Compact Design
  • Supports all Major Browsers
  • Attractive and Elegant
  • Made with CSS3 and beautiful transitions.
  • Shown only on Post pages
The live demo of this widget can be seen by clicking the below button.

Live Demo



Once you have seen the demo, to add this widget in your blog you can use the following methods -


Method 1 : One Click Installation


You can add this slide out share button to your blogger blog with the click of a button. To add this widget just click the below button and choose the blog in which you want to add this widget.



Save the layout and you are done. The slide out share button will be on your blog and would be shown on all the post pages.


Method 2 : Adding Manually


Many people would like to add and customize the code on their own. If so, you can copy the below code and paste it in the HTML/JavaScript widget.

<b:if cond='data:blog.pageType == "item"'>
<style>
/* Widget by AllBloggerTricks.com */
#fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px #888888;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;}
#fixed-share:hover {right: 0}
#fixed-share:hover > #share-box {right: 147px}
#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}
</style>
 <div id="fixed-share">
 <div id="share-box">
<img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" />
</div>
<span>Support Us<br/> <script>(function(d){ var js, id =
'facebook-jssdk'; if (d.getElementById(id)) {return;} js =
d.createElement('script'); js.id = id; js.async = true; js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>  <fb:share-button expr:href='data:post.url'
type='button_count'/> </fb:share-button>
</span></div>
<!-- Widget  by AllBloggerTricks.com -->
</b:if>

After adding, save the widget and template.

You are done now. Now you and your visitors can see this awesome Facebook Share button on your blogger blog.

Saturday, December 14, 2013

Less Known but Amazing Free Template Providers

Comment

Blogger Templates
Blogger is an immense platform and it is one of the major platform around us. Blogger has fans all over the world and from there come beautiful template developers too. But many blogger post in regional languages or target their country, hence they are popular in a certain region but not much known by people of other countries. So today I am going to share a list of blogs which provide amazing blogger templates for free.

The list below is in no particular order, all the providers are equally well and give the best to their blog visitors.



Uong Jowo


Blogger Templates Uong Jowo

Uong Jowo is a blog which provides amazing template for News/Magazine blogs. The blog has a big collection of such templates. One can also find many WordPress templates there. Moreover many of the templates there are responsive. There are many more features in their templates such as Label based posts display in homepage, ticker etc.

Visit Site

Loefa Ceebook


Blogger Templates loefa Ceebook

Loefa Ceebook of Abdal Latif has been publishing blogger templates since long time. There template are versatile, neat and really amazing to work with. Though some of their template are paid ones but there are still beautiful templates available for free download. Clean layout and attractive view of their templates is what make them better than the rest.

Visit Site

Urang Kurai


Blogger Templates Urang Kurai

This list without mentioning Urang Kurai would be incomplete. Andre Pandet is one of the finest blogger template designer. He specializes in Gallery templates. One can see the richness of his work in his templates easily. Though less known but undoubtedly he is one of the greatest blogger template along with other designers like Tien, MKR, Biyan etc. I personally love his original work and his beautiful templates.

Visit Site


Blog Johanes


Blogger Templates Blog Johanes

Blog Johanes is actually the blog which inspired me to write up this post. Johanes Djogan has one of the largest premium, original and rich and unique work in his blog. He mainly creates template for anime blogs and for anime bloggers this blog is no less than heaven. Seeing his huge collection and his work on the template he is a great developer too. A visit to his blog should be every blogger lover just in case they want to see some beauty.

Visit Site

Themeforest


Blogger Templates Themeforest

Well Themeforest should not have been here as its not free but still many of the bloggers are not aware that they can buy blogger templates too from Themeforest. Previously Themeforest had low quality and dull templates but suddenly it has got a momentum and beautiful templates are added their every week. Yes, they would cost you a bit but what you would get is an amazing work for your work. I already wrote a post about Themeforest. You can check the Top 5 Templates at Themeforest (written on 24th Aug) with the adjacent link.

Visit Site


I hope these sources will help you to get better and unique templates for your blogger blog. Do see their works by paying a visit to their blogs.

Tuesday, December 10, 2013

Killer Method To Market Your Blog And Boost Traffic

Comment
Today blogging is considered as one of the best ways to gain online recognition as well as earn money. Hence, the competition in this field has also increased to a great deal. In addition to writing unique and valuable content for your blog, it has become necessary to promote it so as to gain a good number of readers. You need to market your blog so as to get a huge readership and attention online. With so many blogs present online, it becomes really tough to direct traffic to your blog. Having a proper promotional strategy is the basic requirement to move ahead in the process and get success.

website-traffic-boost

Promoting the blog not only enhances its visibility but also proves to be effective in generating leads and also brings in more business. Here are some effective promotional tactics which can be implemented to market your blog. 


Social media marketing

You might be aware of the power of social media platforms like facebook, twitter, YouTube etc. All these sites receive a huge amount of traffic everyday and can be the best hotspots for blog promotion. You can create fan pages and communities and promote your blog among huge number of people for free.

Conduct contests and offer attractive prizes

In order to generate traffic towards your blog, you can start contests and offer attractive prizes to the winners. People might start visiting your blog with the motive of winning the contest and getting prizes thereby increasing the blog traffic.

Ad banners

There are some reputed sites that provide the facility of creating banners and adding  them on their sites. You will have to pay a certain amount for availing this facility. The visitors of that website can easily be directed towards your site by these ad banners.

Guest blogging

You can also market your blog by means of guest blogging. The process requires posting a high quality blog on other�s website and getting a backlink to your blog. This is an effective way to get high traffic from top ranking sites to your blog. There are certain things that you need to keep in mind while guest blogging. You need to select a high ranking blog in your same niche and produce a high quality and informative content so as to get it approved from the blog owner.

Social bookmarking

Backlinks play an important role in generating traffic to the blog. So, you should get backlinks from the top social bookmarking sites. Most of the sites provide backlinks for free and you can easily promote your blog by means of these sites.

Blog commenting

Commenting on the blogs operating in the same niche can be an effective way to promote your blog among the interested group of people who can be active readers of your blog also.

The above discussed methods are effective in blog promotion and can help you market your blog and generate huge bucks. All you need to do is to prepare your action plan and work  accordingly so as to get the best results.
Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page.

Friday, December 6, 2013

Finally PageRank Updated In 6th December 2013

Comment
Hi Guys, Good news for every bloggers and webmasters.There is a confirmed page rank update by Google on 6th December. Actually most of bloggers and webmasters were waiting for this moment, now its over.Usually page rank get updated with the average of three to four months.But this time took more time to update page rank.Last update was February 2013.Finally, after 10 months Google page rank updated.

Read:  How to Boost Your Page Ranking in 2013
            Awesome SEO Tricks To Boost Website Ranking


Matt Cutts has mentioned that there will no page rank update in 2013.
You can see his tweet below.



How to Check Your Page Rank?


There have lot of tool to check website /blog page rank.Follow these steps.

1. Go to http://www.prchecker.info/
2. Add your URL and click the Check PR
3. Add the Captcha code and click Verify.You will see your PR

This is the latest Google Page rank update. How is your page rank ? share with comments.
Hope you all guys have a good page rank in this time.Happy blogging. :)

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page.
Subscribe to: Comments (Atom)