Tampilkan postingan dengan label Widgets. Tampilkan semua postingan
Tampilkan postingan dengan label Widgets. Tampilkan semua postingan

Rabu, 03 Desember 2014

Facebook Popup Like Box Widget For Blogger

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.

Sabtu, 15 November 2014

5 Cool Recent Post Widgets for Blogger

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.

Minggu, 19 Oktober 2014

Add 6 Stylish Custom Search Boxes To Blogger

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/AVvXsEjrxu3tESPUtKWREZIj4_eOFx0nySBn5u5yFflVNx5dhSRSimRCz5UhlLbWCPI5mq65594GEZIL9i3rrVemnWtpwJ7femOTTQTiZ9Y3sAOOsCsvvE4NuA8tBGlikAwCsYC2QHJ8BI9Ez6VP/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/AVvXsEjrxu3tESPUtKWREZIj4_eOFx0nySBn5u5yFflVNx5dhSRSimRCz5UhlLbWCPI5mq65594GEZIL9i3rrVemnWtpwJ7femOTTQTiZ9Y3sAOOsCsvvE4NuA8tBGlikAwCsYC2QHJ8BI9Ez6VP/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/AVvXsEinSTXCTOGkmuUOLPEnE2uC9B3CBVloAtMmR2oQ6hCDjqvJTzc71A3LthBNTCpvfb2YywEsh_tcATLD23rI766RXH1-ThZpSh_GmrK61y2x5shAIbbEpNZUBMA3fl51zkIn1YSREY1RR_aS/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/AVvXsEhFkXRGjuF0vkgZwawXJr_uXJdZdvc4kGHY8iUHyekbuPNDEf-Oky_HTJ8tdanU6dBDH21CTbpkg30h9tq_gFN6dK0YVzh3UnS2hIB_si11S63IGAcRPgUvb1ud62tn188VSQC9lUFtHTKg/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/AVvXsEitbfWv55_xddxYOmH7PQ9H46Vsb1Da-BYa1L1SLcgwpf1_mjpO3ICT-kwj0OZiCxo1qi_QH7iZkB9mC_TgwlmkLVqRZPql30JC7BLio5IEYpznyv9dEa0C-ANpNZnoTSDhPdbpcwig6mB_/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/AVvXsEiHABXs1vHV4VlIdMztWkk_hxHywDGuraWT55lpAK7mHo79XGAgIJ0lf8_dGQ7fMk6Z-IkYu1H2q75BiG8ELREdeGTvECUIoQgzJVzb7Kxf-znnhINzZsjXFKsNCoTmoyZmqNz6NmAuaVHy/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHABXs1vHV4VlIdMztWkk_hxHywDGuraWT55lpAK7mHo79XGAgIJ0lf8_dGQ7fMk6Z-IkYu1H2q75BiG8ELREdeGTvECUIoQgzJVzb7Kxf-znnhINzZsjXFKsNCoTmoyZmqNz6NmAuaVHy/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/AVvXsEje0LBS3yIvFiRHD0Y7UdRjOiop1DR2yBAqiGZDyN8aioeojgmLBlDYkP8NuPvng63nR7KURQvZ3vmgfh8frh6KvpdBX9l3trpTEJ5r_lq2ec1X5yk1j1QBY8-RPPsZheB2ahbUHSdW09HG/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/AVvXsEjj6bJsHtgK2g-3KxaI8OPV1Zc7ASNIpE80gX5PcbyrPvIFOWNhtDiEFCcM_Cbre_wOqpMCjzSXVzBMB3_W5nbzp738fGn-fZw-wtvzBl285zk97R805UcXGSdGIw9uWa2ucLQXdng0VSNv/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/AVvXsEiShOwDKpCjccjsv_jVNCNtUdnp6N8JPzk_1Oc2P8hLNZ9ygbShgycIsbHaMA1M0KYkUN3HV7DPCir6CROl6Pob4XXlVFMpUF5f0nhvsX6i8DYdwGGj3XVcXRECpJCy0E9WZ7DXQdEdbRkF/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/AVvXsEi54RZnbfsTkhJFG1aSow74fDjiRJ71AxPWoO9FAludH_K0QK7cc-OjXGa3TFlAa1YYeVThTAnaSlNl4KbiNLrcL1LratjJCemGDLp8u8I7Xy6ISLOxwKn_6Jq6x54dENnIjzbSSJ0_mU7e/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/AVvXsEhX7nWqhg_d7QJPfG-_nEuz-pYVcPpCCmqeOG5Yec4Kd9F-VGjVL-H8v8PQw3vFrKH7WwvUEDRrfSMbVb2dLhjTn60FCCJncskQUTXrd20hawO-eJvlcNjiKGGeQpNNz5i5do_-pOZeEEQM/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/AVvXsEgaG83jpQSo10Bm_qLBoEeg3pAurB743JGWr4TkfcYOQMKcdF3QqwnMIJS_j4pFX-aNN0hGat8pkDkK-ypYq21hxr_g_ae0vDcpKYcH4KiHXdPlQlHmKTg3AZTzgOXZPRFv7smJ0WiyMhQL/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaG83jpQSo10Bm_qLBoEeg3pAurB743JGWr4TkfcYOQMKcdF3QqwnMIJS_j4pFX-aNN0hGat8pkDkK-ypYq21hxr_g_ae0vDcpKYcH4KiHXdPlQlHmKTg3AZTzgOXZPRFv7smJ0WiyMhQL/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/AVvXsEgjlFn56lu_QRV52Gt6xqWC54coOmSS31f0PloIm-khQ06o1weUGGLzkBiq8Kj_HWbmwohIogtle7T4SJBGxN5KRGufA-d4mGD368ZEWXIN_w4ycqbIx65uj9ml5ziJmztx2ny0X93_U8iD/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/AVvXsEiDoQ7wzYdrNcUMpNAeUNpRISC4Sf2Vo_68vHw5VRvedvSRdp38EnD3pQpwSy85WXBpFFpkgnazLTz1-s-PJ-QY9EGH__4VIbUHUTZCutSbSD976E1nLZzuiFvqWVVEnp6YuKEfyCpJCmRM/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/AVvXsEjjZBqabAMULmZvtgiHbltjTnlOxOpbuqKfGsHiu5irTD9UhAoVQiey8_2FKKWnsmOej33jJvGQkwcuMM4jr0qeuw2iDl1hj-6EdQyL9r4T3rGGOb4l4Rwsmo_fuOxV-u0b0kg1TeD_MUQ2/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.

Rabu, 27 Agustus 2014

How to Display Most Commented Posts in Blogger

One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts are right now and encourages them to click on them to read them. This basic widget is just a little too basic, however, for the modern day website visitor. Not only do they want to see your trending posts, but they also want to join the discussions that are happening on your blog. To do that, you'll need a most commented posts widget for Blogger.

Having a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you're going to need a few specific things to help you out.

most commented posts widget


Here's What You're Going To Get

There are certain aspects in the design of a most commented posts widget that you should expect. That's why you'll find these specific components with this custom widget:

  • Ordered by popularity. The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you'll give each visitor the chance to see what the hype really is about! This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you're looking for a cleaner look.
  • Graphic incorporation. Blog posts that have at least one graphic incorporated with them will receive 100% more traffic than posts that have no images at all. For every graphic that you include with a blog post, the more likely you are to get a click! The same is true with your most commented posts widget, so be sure to incorporate graphics that stand out with your design.
  • Descriptions that blend in. The internet today revolves around the value that you can provide each individual user. People don't just click on things because they look visually tempting. They click on them because they promise a level of value that another website like yours isn't able to provide. By having descriptions that blend in, you'll be able to enhance the perceived value that your site can provide. This leads to more clicks!

Related: Add Multi-Colored Popular Posts to Blogger

Add the Most Commented Posts Widget to Blogger

Step 1. Log in to your Blogger account and go to Template, press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type the following tag inside it and hit Enter to find it:
</Group>
Step 3. Just below </Group>, add this code:
<Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>

add code to blogger html
Note: if you can't find the </Group> tag, try to find the following tag instead and add the variables just below it:
<b:skin><![CDATA[

Step 4. Now search for the following tag (CTRL + F):
]]></b:skin>
Step 5. And just above it, add this CSS code:
.comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}
Step 6. Save the template.

Now, let's add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the "Layout" section of your Blogger dashboard and click on the "Add a gadget" link on the right side. From the pop-up window, scroll down the list and select the "HTML/JavaScript" gadget:

blogger html javascript gadget

Copy and paste this script inside the content box:
<script type="text/javascript">
function stripTags(s,n) {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
    var i;
    for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://helplogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>
Here, change http://helplogger.blogspot.com with your blog URL. If you want to add more characters to the description, modify the "10" value in red from "postDescription,10".

If you want a more simple look (without the thumbnails and post snippets), add this script instead:
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://helplogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>
.... and replace http://helplogger.blogspot.com with your address.
To add the "comments" text after the comments number, replace the line in red:
<div class="comment-count">' + postComments + "</div>"
with:
<div class="comment-count">' + postComments + " comments" + "</div>"
Once you have finished adding your own settings, press the "Save" button to enable the gadget in the sidebar of your blog. That's it!

configure html javascript gadget

To change the background colors of the most commented posts, go to "Template" > hit the "Customize" button and navigate to "Advanced" > "Most Commented" tab. Here you can pick 5 different colors by clicking on the color boxes:

blogger template designer

Once you've selected your favorite color scheme, click the "Apply to blog" button to save the changes... and you're done.

Why Use the Most Commented Posts widget?

The basic psychology in every human is that they want to feel like they belong to a community. That's exactly what this customized widget will bring to your site. No matter what content drew a visitor to see your content, this widget will invite them to join the lively parts of your piece of the internet. This helps to build relationships, with you and with other visitors, and this relationship-building engagement is what you need to start having real value.

Take the time to install this most commented posts widget on your site and you'll see for yourself why this is one of the most useful widgets that is available right now. Enjoy ;)

Kamis, 03 April 2014

How to Add Numbered Page Navigation Widget for Blogger

In Blogger, we have the option to set the number of posts we want to display per page by going to the Settings menu > Posts and comments > Show at most ? posts. Once the number of total posts in our blog exceeds this number, we will see "Older Posts" and "Newer Posts" navigation links in our home page and archive pages footer as Blogger doesn't have any built-in function on page numbering. But page numbers instead of older and newer posts links could help our blog visitors to navigate quicker (jump from one page to another page or click on a specific page) and know the total number of posts published. Here's a tutorial on how to add numbered page navigation using Javascript to a Blogger/ blogspot blog. You can select any one of the 7 different styles that I have mentioned below.

numbered page navigation widget

Adding Numbered Page Navigation to Blogger

You can add this widget in just two steps.
1. Adding The CSS.
2. Adding The Script.

Now let's see how to add the CSS style for page navigation.

1. Adding The CSS

Step 1. Go to Blogger Dashboard > Template > click on the Edit HTML button:

blogger template html

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box.


... type or paste the following tag inside the search box and hit Enter to find it:
]]></b:skin>
Step 3. Now choose one of the following numbered page navigation styles and copy the code just below it. Just above ]]></b:skin> paste the code of the style that you want to use:

Style 1

numbered page navigation style 1
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

Style 2:

numbered page navigation style 2
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:

numbered page navigation style 3
 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4:

numbered page navigation style 4
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

numbered page navigation style 5
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6

numbered page navigation style 6
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7

numbered page navigation style 7
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Note: if you want to hide the "First" and "Last" buttons add this line below the CSS code:
.firstpage, .lastpage {display: none;}

2. Adding The Script

Step 4. Now find (CTRL + F) this tag:
</body>
UPDATED! Working version for more than 500 posts:

Step 5. Add the following script just above it:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Configuration

After installing, you might want to change these default settings:
perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}
1) perPage: how many posts will be shown in each page (7). This value has to be the same as the number of posts on the main page. Otherwise, add the same number by going to "Settings" > "Formatting" and type it in the "Show at most" field, then click on the "Save Settings" button.
2) numPages: how many pages will be shown in the page navigation (6)
3) to replace the 'First', 'Last', "« Previous" and "Next »" texts, just type your own within the quotes.

Labels fix:

By default, Blogger will show 20 posts on label pages. To make this widget appear on label pages, we will have to cut down this down to the value that we gave for the perPage variable.

Find each occurrence of the following code snippet:
expr:href='data:label.url'
Replace it with this one below:
expr:href='data:label.url + "?&amp;max-results=7"'
Here 7 is the number of posts to be displayed per page.

Step 8. Click on the Save Template button and that's it! Enjoy!

Selasa, 25 Februari 2014

Share Blog Posts in Social Media using AddThis

In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the bottom of this post to see the AddThis sharing buttons.


This tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started!

Getting the AddThis share buttons code

Step 1. Visit the https://www.addthis.com/get/sharing page.
Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the "Create account" button.

create addthis account

The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the Register button.

register addthis

Step 3. After you've been logged in, right below the "Get sharing buttons for", choose the "A website" option.

addthis share buttons

Step 4. In the "Select style" section, choose the buttons style that you think would look the best on your site/blog. Please note that on the right side you can see a preview of these buttons.

addthis sharing buttons

Step 5. After you have chosen the style, the site will provide a code - click on the "Grab it" button to copy it.

addthis code

The code provided will look like this:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXX"></script>
<!-- AddThis Button END -->
Now that you have selected and set up your AddThis sharing buttons, let's add them in the footer of the posts.

Adding the AddThis sharing buttons on Blogger

Step 1. Access your Blogger Dashboard and go to Template, then click on the Edit HTML button on the right:

blogger template

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box.

Step 3. Type the following line inside the search box and try to find the second occurrence of it - hit Enter:
<div class='post-footer'>
Step 4. Just above this line, add the code for the AddThis social sharing buttons.

Note: If you want to add at the beginning of your posts, add the code below the second:
<div class='post-header'>

How to add more AddThis buttons

To add more buttons, simply choose the button for that social network and add the code just before the </div> tag (refer to the step 5 from above).

Some examples:
<a class="addthis_button_linkedin"></a> /* linkedin button */
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> /*gplus button */
<a class="addthis_button_digg"></a> /* digg button */
<a class="addthis_button_stumbleupon"></a> /* stumbleupon button */
<a class="addthis_button_print"></a> /* print button */

CSS3 AddThis Share Buttons

You can add just a single button, so that when the reader hovers over it, a menu will open with the options of social networks to share the post.

css3 share buttons, addthis

Visit this page for a demo.

Step 1. Go to Template > click on the Edit HTML button > press the CTRL + F keys and search:
<div class='post-footer'>
Just above this line, paste the following code:
<style type='text/css'>
.addthis_share_btn a, .addthis_share_btn a:visited {
background: #FF5C00; /* background color of the button */
display: inline-block;
padding: 6px 12px;
font-family: arial,helvetica,lucida,verdana,sans-serif;
font-size: 12px;
line-height: 1em;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.addthis_share_btn a:hover {
background: #D45500; /* background color on mouse hover */
color: #fff;
}
.addthis_share_btn a:active { top: 1px; }

.addthis_share_btn a span, .addthis_share_btn:visited a span {
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 18px;
}
</style>
<!-- AddThis Share Button -->
<div class='addthis_toolbox addthis_share_btn'>
<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'>
<span>Share</span></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- End AddThis Share Button -->

Customization

- To change the color of the button according to the colors of your template, modify the color value in red.
- If you want to change the "Share" text, replace the text in blue.

Step 2. Save the changes by clicking on the Save template button and you're done!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Web Hosting