sábado, 20 de diciembre de 2014

How to Build High Quality Backlinks

           ,      No comments   
One of the secrets to creating more web traffic with your posts is to build in some backlinks. To build high quality backlinks is one of the most popular methods to boost your content over the competition. However, finding the right methods to build the backlinks is going to take a little effort.

Everything starts with understanding what a backlink is and what it will do for your content. From there, you can then extend your efforts to build even more backlinks using creative and effective means that maximizes the potential of your content.

backlinks

What is a Backlink?

A backlink is an incoming hyperlink that connects the web page or content to another website. Backlinks are very important when it comes to page ranking as Google rates them highly. However, the backlinks themselves must be of good quality in order to generate the rankings needed to boost your content ahead of the competition.

Quality of the backlinks is important because having 10 good ones will beat 200 bad ones in terms of Google rankings. So, you must strive for quality each and every time. However, it will take time to build up backlinks to your articles because people will have to see it and then decide to link to it in order to add more value to their site.

If you look at adding good backlinks as a long term strategy, you will eventually reap the rewards that they offer. What follows are some interesting ways to start building good quality backlinks so that you can start your success today a little bit at a time.

Create Long, Interesting Posts

One of the easiest ways to start creating good backlinks is by writing a good, long tutorial post that uses images, charts and other graphics to really make it interesting. It will need to be from 1000 to 1200 words long and not have any filler, so the information really needs to be good and tight to make it interesting.

How-To guides often make the best long posts, especially if you can really hit the details so that people will fully understand how to do what you are explaining to them.

Participate in Forums

A person who is active in the forums when it comes to the subject that you are writing is building a network of potential fans who might offer high quality backlinks to their work. This is a delicate matter as you don't want to come across as someone only interested in what they can do for you. This will mean offering quality backlinks to those who participate in the forum as well if you find their articles useful and informative.

Write e-Books

An e-Book is one of the best ways to help spread the word about your talents and you can ask your friends to share it with the world through social media as well. You can also send your links to the best in social bookmarking sites as well to help augment your efforts.

With e-Books, you don't have to write very many, but it does help if you create ones that are very useful, highly readable and can be shared so that you can build high quality backlinks.

Create Special Days

One of the more interesting ways to build high quality backlinks is creating special days like St. Patrick's Day, Halloween or Valentine's Day to offer discounts on your products or services. You can actually build up to the day as well with special writing and content features to help pull in more traffic.

Remember, you'll need to do some research on your audience to see what type of holidays and content works best for their interest, but Valentine's Day is one that everyone shares, so that is an easy one to write good content, or run a contest that is bound to get good, high quality backlinks.

Have Free Products

Everyone likes free products and this can help you boost the number of visitors to your website. You can have a free e-Book or even a promotional gift if you want. While it may take some investment, the result will be getting more web traffic which in turn creates more demand for your products or services.

Videos

YouTube may very well be the biggest marketing tool of the moment with no signs of slowing down. If you can create a funny, interesting video then you will start getting some great backlinks. Today, the technology to create a solid, professional-looking video is dirt cheap compared to just a decade ago.

You can create "how-to" videos or find something interesting to make a video about as long as it relates to the industry in which your business is in. The key is to do something fun and enjoyable for your audience so that they will start sharing it with their friends.

Interact with Other Blogs

When you read a blog or see a video you like that is within your industry, don't just say "good job" and leave it at that. Write a good, interesting comment or review so that you can really share your thoughts. Remember to be positive, articulate and get right to the point. If you can write your thoughts in an entertaining, audience-pleasing way, you can start building up an audience for your comments and reviews.

Do Guest Blogging

Want to make a great impression? Find a good place to guest blog and write until you get that post to go viral. This will not only attract you an audience, but by helping out someone else you will build high quality backlinks as well.

It will take time, effort and the ability to write well. But if you can pull it off, your stint as a guest blogger will pay off big time for your efforts. The key is to write something that attracts people's attention and provides you with a place to write again for the blogger.

Guest blogging can be very rewarding in more ways than one, so if you have the time to do it right, then you should market your services as a guest blogger.

These are just some of the methods you can use to build high quality backlinks and start building up your web traffic.
Share:

What to Do Before Applying for Google AdSense

           ,      No comments   
It seems that everyone wants to make money by joining up with Google AdSense and why not? Google AdSense is a relatively simple, straightforward way to actually start earning some extra money with your efforts.

However, things have changed from the early days of AdSense when joining was not much of an issue. Today, applying for AdSense takes more effort and some preparation so that you can take full advantage of their services.

First, you will need a good reason to apply for AdSense so you can reap the benefits that they offer. Here you will find out more about what Google AdSense is all about, what they offer and how you can properly prepare yourself before joining to really take advantage.


What is Google AdSense?

One of the most established internet networks to offer advertisement publishing, AdSense uses the Pay Per Click (PPC) system to help businesses reach out to others on the web. At one time, Google used to provide AdSense to everyone who used their Blogspot program, but now that has changed. 

Today, AdSense is one of the most respected thanks to the many thousands of satisfied publishers and customers who use the service. It is straightforward, easy to use and always pays on time which makes it very attractive to anyone wanting to have this service. If you do your work the right way, it will pay better than any other similar service on the web.

However, it is their very success that now makes them harder to join. When you apply, everything has to be just right otherwise you will not be approved.

How to Avoid Getting Your Application Rejected

There are a number of things to avoid when applying for AdSense so that your entry will not be discarded. Here are just a few.

Read Google Policies: Just like studying for a test, Google posts their policies about what it takes for your site to get into AdSense. So, take the time to read them and be sure that your website follows the rules.

Have Good Content: If your website doesn't have good or sufficient content, it will not be accepted. So, be sure that you provide them with enough to review. In addition, it has to be neat, professional and grammatically correct otherwise it will give them the excuse to toss out your application.

Aesthetically Pleasing: Garish yellows and lots of distracting glitz will also stop you in your tracks when you apply for AdSense. Your website should have a good, solid design that is comfortable to look at and pleasing for the visitor.

Post Your Contact Information: If Google cannot find a way to contact you through your website, you might as well not apply. Having an "About Us" page that is complete with contact info is the minimum to getting accepted.

Now that you've done the basics, it is time to hedge your bets when it comes to applying for AdSense by adding in items and procedures that will enhance your chances. While nothing is guaranteed, the following steps will help your website in getting approved.

10 Ways to Increase Your Chances when Applying for AdSense


1. Policy for Privacy

It may seem odd to have a privacy policy for your blog, but it is vital if you want to get AdSense approval. Without it, you might as well not apply at all. The policy itself should describe to those who visit your blog what they will see and what they can and cannot do.

2. Contact Information

This is where you put in your contact information. At the very least, it should consist of an email so that readers can contact you directly about any issue they have on your blog.

3. About Us

This is where you tell people a little about who you are, what your business does and how you are going to accomplish it. This is sort of like an introductory page to your efforts and it critical when you apply for Adsense.

4. Email & Name Verification

Be sure that you put your email as well as your name in your About Me or Contact Us page so that it will help Google verify you quickly.

5. Verify Age

Always use your correct name and date of birth when applying for AdSense. This is mostly for those who are under 18, but it is important to be truthful otherwise you'll never get approved.

6. Appropriate Design

Your blog should look attractive, professional and easy to use. You don't have to be fancy or pour in thousands of dollars, just make it clean and neat will be sufficient.

7. Have Plenty of Posts

Do you know that there is no minimum number of posts stated by Google in terms of what is required for joining AdSense? Even so, if you only have a handful, do not count on getting approved. You should shoot for about 500 or so before applying to demonstrate your seriousness about your efforts and make sure that they are at least 500 words in length.

8. Remember the Rules

No pornography, illegal items, advocating drug use or other items that will not get you any AdSense at all. Plus, if your posts are all less than 200 words, that will not work either.

9. Adds Value

Your blog or website must provide real value for your audience. This will not only help keep people visiting your site, but it will also impress Google as well.

10. Unique, Top Level Domain

Basically, this means that your domain should be a ".com" in order to succeed. Plus, the name itself needs to be short as possible, related to your area of interest and easy to remember.

When applying for AdSense, you will need to keep all of these things in mind so that you will be accepted. However, all of the attributes that Google AdSense requires are also ones that will boost your website as well. So, keep this in mind when you apply for AdSense because the result will be a blog that will start earning you another income stream that can build over time.
Share:

lunes, 15 de diciembre de 2014

Show/Hide Blogger and Google+ Comments System With Toggle

           , ,      No comments   
Many Blogger site owners received the new Google+ Comment System pretty negatively because it forced all commenting users to create their own Google+ account before they were able to write a comment. The Google+ Comment System on Blogger was convenient to writers, but discouraged many users from continuing to comment on blogs because they simply didn't want to use Google+. For those that did use Google+ to make a comment, Blogger would never email you and notify you that someone left a comment; you could go days or weeks without ever realizing that you never responded to a reader.

In addition to frustrating your audience, the Google+ Comment System on Blogger depended upon the URL of your blog post. By changing your URLs or moving around your blog posts internally, you run the risk of losing every one of your comments that was placed using Google+.

Previously, the only way to solve this problem was to disable the comment system through your account settings, thus giving up your ability to use their Google+ account. Now, there's an easy new way to have the best of both worlds. Allowing fans of Google+ as well as everyday blog readers to access all same features, you’ll be able to engage every visitor equally. You can respond to comments while still being able to communicate with other Google+ users outside of your site and take advantage of the Google+ Comment System on Blogger.

google plus comments, blogger

How to Integrate Blogger and Google Plus Comments

To make the installation as simple as possible, I used inline jQuery and CSS, but who wants can change this code later. Also, the most accessible place I found to add it would be just after <b:include data='post' name='post'/>. So, let's start adding it:

Step 1. Log into your Blogger account and select your blog > go to 'Template' and press the 'Edit HTML' button on the right side.


Step 2. Click anywhere inside the code area and press CTRL + F keys to open the editor's search box and search for the following code:
<b:include data='post' name='post'/>
Step 3. Just after <b:include data='post' name='post'/> add the following code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsxscC6__1YCX2MpbtQAYY4QD_tl-tFLA3iV47-PqatLfdQsKDbW-mBvpBOmRq6NShl3AjopYM5ECWm9fFDDrpQAD4_Zh60fUCyum2cVFVoYDKdSp4XWoMUzPNbmkqr9LmOiOZmMdAQ0q/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Show Comments: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVRAV3OlTwMLEeiFcWrZBi3dPebufiVNLQEofIkdeeSjglAveWddZFgfkZ4SkVvPpAC2o2penHCLzYUrmlocoqtxbQzgA3Nfa9GnyjKfri6psOanWf7Q1B3CewD3GMi3DNd0xlHe-2ixja/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#gplus-comments-visibility&quot;).hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKg5OwCCl5fTgqXoYOJlMdf1A_HMNKkXKOifMUanIut4P8it2AiLy-i_5jF-yRud1JxEQ0czOgi_BQ5JJN5rifP-MSzF0Uks3nE7r0RjvLIN0e_Kj6x3giWGJtU-iuK1WV3UUsrmMsjCZi/s1600/blogger-logo.png' width='35'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>      
</b:if>
Note: The data-width is for setting the width of the comment box, so the number (550) indicated there can be changed according to the design of your blog.

Step 4. Press the "Save Template" button located at the top of the editor and view your blog to see if you have successfully added Google+ commenting system to Blogger.

Please note that in order to make this work, you need to make sure that you are using a version of jQuery in your site. Otherwise, add this line just above the </head> tag using the HTML template editor:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

That's it!

From here on out, any reader that views your post has the option of making a comment using their Google+ account, or the native Blogger comments. Your readers will enjoy the flexibility that your site provides and you will also benefit from the inclusive services offered by Google.
Share:

miércoles, 3 de diciembre de 2014

Facebook Popup Like Box Widget For Blogger

           , , , ,      No comments   
Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to their dashboard feeds at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.

In order to produce an effective digital campaign, you absolutely must take advantage of social media by doing things like integrating Facebook on Blogger. Email marketing can be useful, but it comes with restrictions that could limit your blog's potential. Perhaps the most significant problem is that emails don't come with a face or personality like Facebook does.

Think of a time when you received an email in you inbox from someone you didn't know. Where you inclined to open it or did you send it right to the junk folder? If it's your first introduction to new consumer, they simply don't know who you are, what you want, and how you got their email. This sets off an initial breakdown of any type of trust that might have developed. The reputation of email marketing is further deteriorated with a study done by Kaspersky Lab, an Internet research firm. They estimate that around 70% of all the emails sent in the world are spam.

Sharing site content using a Facebook Like Box is just one of many strategies that can generate a regular flow of traffic from a diverse demographic that might have been previously inaccessible. Adding a Facebook Like Box to your site helps to reduces your individual workload, and instead distributes that ability equally among your readers.

When someone reads your content and appreciates the kind of work that you produce, they'll be willing to share that information to their followers and fans, setting off a viral reaction. The first step necessary to making this a reality is to make this change to your site. These next few steps will provide you with a quick and easy guide on how to add a 'Like Box' to your Blogger site so that you can began taking advantage of these great opportunities.


Click here for a DEMO


How to Add the Facebook Popup Like Box Widget

1. Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side
2. Once the popup window is open, select the HTML/JavaScript gadget from the list:


3. Copy and paste the following code inside the empty box:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Helplogger/120574614736021&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com" rel="nofollow">Helplogger</a></div>
</div>
</div>
4. Press the 'Save' button to add the widget to your blog. That's it!

Customization

  • After adding the code, replace the address in blue https://www.facebook.com/pages/Helplogger/120574614736021 with your site's facebook page URL.

  • The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:
.delay(5000)
  • By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
  • If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:
</body>
Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:
&lt;b:if cond='data:page.type == "index"'&gt;ADD THE FACEBOOK WIDGET CODE HERE &lt;/b:if&gt;
After saving your work, you can test out your new feature by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's facebook page.

If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans.
Share:

sábado, 15 de noviembre de 2014

5 Cool Recent Post Widgets for Blogger

           , ,      No comments   
For bloggers that pride themselves on always staying up-to-date with new content, a recent post widget for Blogger can be an invaluable tool. A recent post widget for blogger is in many ways similar to a 'breaking news alert' that journalists love to use during their reports, providing the most recent and relevant posts that you have to offer.

Adding a recent post widget for Blogger helps to reduce the dependency on email marketing, because you don't have to send out an email just to let people know you made a new post. Instead, it updates automatically for everyone to see. You can then use this information to design scheduled email newsletters, and take advantage of what's often referred to as the 'Twitter effect' where audiences will regularly check back on your site for the possibility that new posts are available. Without this, you force people to do run their own search for information and content, increasing the likelihood that they'll leave the site and hurt your bounce rate.

Once you've managed to attract visitors to one of your posts using the recent post widget for Blogger, it will continue to act as an accessible secondary resource to navigate around your site. That way, you can avoid having them sifting through old content that might be outdated. If you'd rather show off some of your best posts instead of your most recent posts, you can do that instead, or add that feature to the bar with just a few alterations.

Apart from looking great and taking up minimal space, there are too many benefits for you not to have a recent post widget for Blogger. The best part about these add-ons is that they come in a wide variety of designs that will fit any theme. If you're interested in adding a widget to your site, here are 5 cool recent post widgets that might catch your eye and fit perfectly with your Blogger template:
recent posts for blogger, cool widgets

Style #1

rainbow widget, recent posts
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Style #2

recent posts widget
<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Style #3

recent posts gadget

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Style #4

recent posts for blogger, cool widgets
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Style #5

recent posts, blogger gadget
<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

How to Add Recent Posts Widget on Blogger

Want to add one of the styles above? Just follow the following steps below:

Step 1. Log in to your Blogger dashboard and click on your blog
Step 2. Go to "Layout" and click the "Add a gadget" link on the right side
Step 3. From the pop-up window, scroll down and select the "HTML/JavaScript" gadget:


Step 4. Paste the code of the chosen widget found below it.
Step 5. Hit the "Save" button... and that's it!

Keep Your Blog Updated

Using a recent post widget for Blogger can truly benefit you and improve your skill as a blogger. As you can see, these designs can look great on Blogger sites, but they do act a little bit like a progress report for the author. If you start to fall behind, the dates on your recent post widget will definitely give you away.

Set a schedule and make sure that you are making regular posts on the blog. These posts will be automatically updated on your widget and readers can view this information whenever they want. Add your recent post widget for Blogger on the every page of the blog or in your template so that these posts can encourage others to continue reading, thus increasing the total time spent on your site.
Share:

domingo, 19 de octubre de 2014

Add 6 Stylish Custom Search Boxes To Blogger

                No comments   
There's an unspoken rule in the world of web design that says that every website have a search box. You can, and should, design a custom search gadget to Blogger that contributes to the theme of your site while providing some key benefits to both your customers and you.

Benefits to Customers

Search boxes not only help to increase your website's design usability, but they're very convenient to site visitors and regulars. For those that have been to your site before, they know what they want and they want it now. These are the impatient people who don't feel like wading through different links. If you don't accommodate this problem you might risk losing those readers.

For newer customers who want to get a feel for your site before investing any more time, it gives them the chance to look for their interests on both eCommerce sites and blog sites.

Benefits To You

Adding a custom search gadget to Blogger perhaps best benefit eCommerce sites because it's an industry that inherently offers a lot of very specific products. For instance, if you sold clothing apparel and someone was only look for shirts, the search would result would only bring up shirts so that person can look through everything in one place.

Bloggers might not have products to offer, but adding a custom search gadget to Blogger can help site analytics and SEO. Google Analytics offers a tool that will track all the searches performed by your search bar, so that you can use this data when improving your keyword usage and content choices. Google web crawlers and search engine bots will also test out phrases in these boxes on the rare occasion to make sure that all your content leads to somewhere creates a closed loop.

Add Your Own Custom Search Gadget To Blogger

Just because you should have a search bar doesn't mean you you're restricted to what time. Your site's search bar should be easy to find and readily available whenever someone needs it, but other than that the look of the design is up to you. If you want to add a custom search gadget to Blogger, here are 6 stylish choices to pick from. Just copy the code below the search box that you want to add and follow the steps below:

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_B3dVeE9xd-CpY_pUuiDmB-vdsH3DTLhoXgCTrr1hzAcKe_N6J9D_2n5RiWppXHurwWpXq6qcCxf7uBVxhmecd9yTQ18Co-BaJ5dfrxKhIwyLF7Cg4uX9CM4L-ETUGpmfzSWqX_zlWhpJ/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>
<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_B3dVeE9xd-CpY_pUuiDmB-vdsH3DTLhoXgCTrr1hzAcKe_N6J9D_2n5RiWppXHurwWpXq6qcCxf7uBVxhmecd9yTQ18Co-BaJ5dfrxKhIwyLF7Cg4uX9CM4L-ETUGpmfzSWqX_zlWhpJ/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcmpxRHOgJX_rwG2ote74f7HXfMVxZHzUDzfsqXfk6CvADHVtaByT6WokjRy0Vl0OI6nU8suyJu-g58cPMAyMBJzSvYNkZpFtUKyyNeU15kYK8NnqzBVau5LzG6badkJYPhzJ2FuT9ezP/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOyuGjnuMWK7a4DUWjhsHJR2RNKndJD637BHF0Nib55lggTsXObcNewn43WoR3LY0Ke2t0LmB3N3yQCM06fWWkSVHXZoHVIl-1es4A1NaVGOal6-_nYf1yAWPF2Ztmnkoy1z3BRng0KPMq/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdwy9X2cxWt6Jr-RAaf7MPtG2ESd9FKAm5e3k_OeBROe5KBiyuQmZZVeICdDHprCqD1s1dM3gtQ8QMS0rPxJs7IJo_l502pGFJGQM8HaV4C4aK5z_EEdiQ8pii5WFX_G2v0L0qcq_N4Mv3/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkAhO9tBZdYrhvSwcplIsKe9d_B_QWpxN89nkPLwo9euBD7ksSa_pUx-FaDJJM4rj8XfBoRlx-NFCEQ8VpUk_5EA-6-uArldWnry_0y7dasZ2L9ncDMYwHOtPm5EbpLSR9uzowCEQ3SDU/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkAhO9tBZdYrhvSwcplIsKe9d_B_QWpxN89nkPLwo9euBD7ksSa_pUx-FaDJJM4rj8XfBoRlx-NFCEQ8VpUk_5EA-6-uArldWnry_0y7dasZ2L9ncDMYwHOtPm5EbpLSR9uzowCEQ3SDU/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
</form>
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvagrncMRt-rytg1hVOYy03_6PSxXPZ_fTI_33Xlsvru9PnQI9yJMtQuZh-ZbufmE7Qlg4uvjP1jt44fmcGz6Romjgj8-CSUK99yXjt36s1Bu-ufN1dCTu5aUom-eMHbREq5cELl96SINq/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqafh2LS7FXHpUljfV8vu0Qn9Rjv4bQib4AWnxJJaP3w5S_AYdw2YB1pcvI_Cg08mZfkLV0zlpLF85Ei_oeWuJRs4lb1GaU-ZhsjVXeDo1nD57OTz59z90S2XL9c95sxojZtMus6cxN-3/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMUen9Cf34jo5zlQR3ZffzqdPTd_L-K_NndNARwBqjUua5kA3lTdb5fu7B56V5v-c8-5u1Purr9cZwMEHhUJaGkvYdC9ZHPQ96lqRbiCEkH-9yco64BHCjPLxwrPzeEFGAZETzL1g0pnpo/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_fwyzc_ARdzD2tUHUg_JAlCvdp-fnp1P2hACcndIuu8SRDPlg_d2uxJ5fcd6IwTukYcR_JTU4XrexQZXLcswwWCP4YxtBVOg7aRNmBx21oWVexMDg3sasQXAU_Nyx8V7mKlD3REY6-2k/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_p382QEhvi8sFy3d1f-srzJyfVg3plK28V7smXIFRE4HNkzTs-4Ogur5rF93cNcTZsnww1TVu3NyKiKYh0o-qY1QlsSd6UYQWzT73chP2zmWHTDCNCZZSwxrw1HhrSNNLNEnPTYWan05G/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUIZosDlS-U3nYixVRXOqppCwMGsCG-mFgFYYDzYwOihmQwr6voNld3JV-qLvVg4wzXuzhk18tifPnvXeQLJYbEdaPfb4KgYp3dv-77Qz3I1zr0nmXAUMvMRjeKByNu31yjABmEEYbSuYe/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUIZosDlS-U3nYixVRXOqppCwMGsCG-mFgFYYDzYwOihmQwr6voNld3JV-qLvVg4wzXuzhk18tifPnvXeQLJYbEdaPfb4KgYp3dv-77Qz3I1zr0nmXAUMvMRjeKByNu31yjABmEEYbSuYe/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0eIceBQ5mmboOUBwrGUtbNx7yAjNovgg7qF5eXhR0VzI1oYi7Ax7YeTsqaVosVpeS__RPtHJ8vloXBYSyK9W4MC1DJDZiOQJZzMPfoP-Bm2KFCijxYbr4ftBtJYvCz4jgvp_KUpOoUlw8/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_wCvhk5FhppXrBolRWNy08-hLvaI7dF6R2lmW-ISyTG7BVTQEv0h0q_WGCLz33ZxDqdSD96tqVzbs84HltS0oBHb04LOCyN7sjHwzlqCaS_Bplay7enNinUsCgz44aFwdiT0sZ-Ci7xH/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_TmJ2kETDdmuCT1GYn8WMNEqQyKhPXhRc301JhA-Dc5dgOi3kEj-TIycmwpiecyK37MjkahDkxfBMwFlJtLP-iBVcCdGHIj5A9pgrXGLGFOFAc-1YhBaoD8i1wuDUsrZoN0nqpLUZVbb/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Steps: How to Add a Custom Search Box to Blogger

Step 1. Log in to your Blogger account, then go to Layout > click on the 'Add a gadget' link on the left side.

Step 2. Choose HTML/JavaScript from the pop-up window > paste the code of the search box inside the empty box.

Step 3. Press Save.

That's it!

There you have it, 6 stylish choices that will let you take advantage from all the great benefits of using a search box, while still helping you make your blog stand out. After adding your new search bar, your visitors will be able to navigate through your site and get to the same place using both the box and the navigation bar.
Share:

domingo, 7 de septiembre de 2014

Where To Find Free Blogger Backgrounds and Textures

           ,      1 comment   
Blogger is a fantastic tool for amateur and professional writers that have a passion for publishing online content. Unlike WordPress or hosting companies that require you to design your site before ever getting started, Blogger is a ready to go service right out of the box that will allow you to start writing for yourself or others on day one. The effort required to sign up for an account is minimal, and you can really get as creative as you want, whenever you want.

Even if you aren't familiar with web development or design, that's okay. Blogger is a place for everyone. Thanks to the overwhelming support of the Blogger and creative communities, there are plenty of free to use resources out there to make your site look great and keep you focused on what you love best. Here are some of the top sites for acquiring blogger backgrounds that won't cost you a dime and will look incredible.

http://hotbliggityblog.com/

Shabby Blogs

Shabby blogs offers some unique texture and graphic rendered Blogger backgrounds to choose from. All of the designs that they have are created to be standard width so you don't get a lot of flexibility to choose from; however, there are guides out there that can teach you how to extend the sidebars, header, and footer of your screen if you find one you love and this is something important to you. In addition to offering Blogger backgrounds Shabby blogs also has a section for cute little buttons that you can add to your site to give it an extra special touch.

http://www.shabbyblogs.com/backgrounds.htmlhttp://www.shabbyblogs.com/backgrounds.htmlhttp://www.shabbyblogs.com/backgrounds.htmlhttp://www.shabbyblogs.com/backgrounds.html

Hot Bliggity Blog

Aside from having one of the coolest and creative names to say out loud, Hot Bliggity Blog has a wide selection of patterned-based blogs for your site. You can choose between different color schemes, and they also offer three different sizes to pick from, standard, widened, and full width. Best of all, they are really easy to install. All you have to do is click on the install link underneath the image. From there it will copy the code for you into your clipboard and give you instructions on where to paste it.

http://hotbliggityblog.com/http://hotbliggityblog.com/http://hotbliggityblog.com/

Dotty Dot Dot

Dotty Dot is the place to go if you like geometric type backgrounds that are heavy on squares, plaid, circles, and of course dots. The website is a little bit hard to navigate, but they have a sidebar with a bunch of tags to help you sort through all the available templates and find something you like. Just about every color you can imagine is available if you plan on matching your Blogger backgrounds to your favorite color or font style. The widths of the most of the templates vary so some have heavy padded sidebars, whereas some are very skinny.

http://dottydotdotdesign1.blogspot.com/http://dottydotdotdesign1.blogspot.com/http://dottydotdotdesign1.blogspot.com/http://dottydotdotdesign1.blogspot.com/

LeeLou Blogs

Lee Lou Blogs offers Blogger backgrounds that look a lot like you would find in a scrapbook with a heavy dependency on small pictures and vector graphics. These free templates would go great with any home improvement blog or DIY arts and crafts writer. Most of the free backgrounds are standard size with the high padded sides, but like anything you can get access to more templates if you want to take advantage of any of his premium designs.

http://leelou-blogs.com/

CgTextures

If you just want something basic real basic that won't distract customers from your content, you can head over to CgTextures. Their site is full of photos and textures that could be added as a background image with a reduced transparency. The blog would still look great and you wouldn't have to worry as much about trying to match your font style and color so that it fits in with the background. Instead you can draw more focus on what's important and less on the site's bells and whistles.

http://www.cgtextures.com/

Every Stock Photo

Bloggers that want less of an 'artsy' look to their site and instead more of a serious appeal can get a picture from Every Stock Photo to use as the background image. You can also benefit by using some of the pictures offered through this site within your blog posts so that you aren't stuck buying things from premium image providers. There search bar and navigation panel makes it easy to find exactly what you are looking for to see a unique feel to every page.

http://everystockphoto.com/

Shizoo-Design

Shizoo-Design is a German based design firm with about 554 different patterns to choose from. You can find everything from conservative shapes to abstract rainbows and splashes of color. All of the textures are provided in a range of size, anywhere from 1000x700 pixels to 1300x600 pixels so that they will comfortably fit your entire site's background and work with most browsers and computer screen sizes. Brushes and custom icons are also available from the site, free of charge.

http://www.shizoo-design.de/textures.php

Patterns of Change

Patterns of Changes offers Blogger backgrounds that are cartoon oriented and that can best be tiled across the screen. The site is perhaps one of the easiest to use compared to all the others on the screen, providing a simple navigation bar where you can choose what color you'd like the pattern to be. When you select one of the colors provided, it will come up with a bunch of different patterns usually associated with that color. For instance, when the color brown is selected, one of the choices ia brown cake. Blogger backgrounds for this site might not be the best choice for business professionals, but they certainly are fun.

http://www.lizaphoenix.com/tiles/

How to Add a Background Image using the Blogger Template Designer

If you have a background image that you want to upload, then follow these steps:

1. Log into your Blogger account and go to Template, press the Customize button on the right side. Once the Blogger template designer has opened, you'll see the Background option on the left - click on it:

change blogger background

2. Now click on the box below the Background image title and it will open a window from where we can select a default background image. On the upper left side of this window, click Upload Image and select the image you would like to use from a location on your computer.

upload background image

Note that you should use a JPG, GIF, or PNG image that is no more than 300k in size. If your image is too large, then you can use the Kraken.io image optimizer to make the file smaller.

3. After you've uploaded your image, click 'Done' and you'll be taken back to the background menu. Here you will see additional options like: Alignment, Tile and Scroll with page:

  • Alignment: change the position of the background image to start either horizontal (left, center, right) or vertical (top and bottom);
  • Tile (Repeat): if you want a small background image to fill the page, choose to repeat (tile) horizontally and/or vertically; 
  • Scroll with page: the box is checked by default, this means that the background scroll along with the page contents. If you want the background picture to not move as the page is scrolled and stay exactly where it is, uncheck this box.

background image position

4. For a background image with plain color in the middle for content, you might want to remove the main and header background. Navigate to Advanced > Backgrounds and type the word transparent inside the Main Background and Header Background box:

change background color

5. If the background is smaller than the content area, we can fix this using CSS. Scroll down and click on the Add CSS option, then paste this CSS code inside the box:
body {
background-size: 200%;
}

.body-fauxcolumn-outer .cap-top {
background: none;
}
Note: to change the size of the background, modify the 200% value in red.

change background size

Once you're happy with the results, press the 'Apply to blog' button and enjoy the new background for your site.

How to Change Background in a Custom Blogger Template

Sometimes the above options might not appear in some custom Blogger templates if the body.background variable hasn't been defined. In this case, we will need to access the HTML of the template:

1. Go to Template, click the Edit HTML button and click anywhere inside the code area. Press the CTRL + F keys to open the Blogger search box:

blogger template html

2. Paste or type the following tag inside the search box and hit Enter to find it:
]]></b:skin>
3. Immediately before the ]]></b:skin> tag, paste one of the following code snippets:

For a large background image:
body {
background-image: url(IMAGE-URL.png) !important;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
}
Note: the no-repeat value prevents the image from repeating either vertically or horizontally. Use background-repeat: repeat-y if you'd like the image to repeat vertically, or background-repeat: repeat-x if you want it to repeat only horizontally. To increase the size of the background, change the 100% value.

adding background in blogger

If using a repeating pattern, add this CSS code instead:
body {
background-image: url(IMAGE-URL.png) !important;
background-repeat: repeat;
background-position: center top;
background-attachment: fixed;
}
4. Open a new tab and upload your background image to Blogger or an image hosting site, and copy the URL of your hosted image to your clipboard. If you don't know how to do it, please take a look at this tutorial.

After you copied it, replace the text highlighted in blue from above with your image url.

5. Finally, Preview the template to ensure that the background image appears as you want, and press the Save template button to save your changes. That's it!

Using the 8 sites listed above, you have a wide range to choose from when creating a site that really represents you. Given the right tools, designing you blog can be a fun hobby to enjoy that can spark your creativity and improve the quality of your writing. With such a large selection, the hardest part of setting up your new theme will be finding which one you like best.
Share:

Popular Posts

Con la tecnología de Blogger.
Copyright © Bloggers Creative | Powered by Blogger
Design by HowlThemes | Blogger Theme by NewBloggerThemes.com
Back To Top