‏إظهار الرسائل ذات التسميات Widgets. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات Widgets. إظهار كافة الرسائل

الأحد، 29 مايو 2016

Automatic Featured Posts Slider Widget for Blogger

Anyone with a blog wants readers to stay rather than move on to another. It's not being selfish but after someone has read one post, you'd definitely want them to read another, right? After all, isn't it one of the tenets of SEO to make people stay longer on your blog if it has to have a fighting chance at the rankings game?

The question now is: how exactly do you entice them to read a few more of your blog posts?

First off, you don't know exactly what brought a reader to your site. Well, you sort of do, if you have Google Analytics and all that. But that's beside the point. It wouldn't be productive for you to stare at GA the entire day hoping that it will tell you that yes, someone has been perusing your blog.

The point being driven at here is that you have to offer more on your blog. It's not enough that you get traffic from search engines and other sites; you also have to add some extras that will entice visitors to stay longer.

How exactly do you do that?

The Tactics of Persuading Users to Stay

Bloggers have employed a variety of tactics to persuade readers to stay. For one, they load the sidebar with widgets for Popular Posts, for example. Of course, it would be in the interest of your readers to know which other posts on your blog are gaining traction. Maybe those pieces are of interest to them as well. As a result, you've got one surefire way of making readers stay.

Now, what if you want to highlight Featured Posts, for example? Let's say that your blog has been around for a number of years and in that span, it has produced some great content that received quite the number of shares, likes, +1s, comments on so on. Wouldn't that be the kind of post you want featured? Unless your reader was looking for that topic specifically, there's little chance that they might uncover that gem if you don't bring it to their attention.

Thankfully, it's quite possible to add a Featured Posts slider for Blogger. And if you don't know how to make one yourself, this is exactly what this post is for. Here's an awesome Featured Posts slider widget that you can use on your blog.




How to Add Featured Posts Slider Widget in Blogger

1. Go to 'Layout' > click the 'Add a gadget' link in the sidebar area and select 'HTML/JavaScript' gadget from the pop-up window.

2. Add the code below inside the empty box:
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCSZ6Q-fnBY4cFDWOY2AAbHfEhymw4FlQN1gd2dC5p2BLKcLmmU-uuxW326hgkkpOJaWuAjyv0I7dp6dwnSpdtf8TpZ0VPenCrVQgInzrd-W7k4N2PvIQSRTkLqpOjbEnmQYpqBfPUPE/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://helplogger.blogspot.com/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYBWt7bGqle1giZ-749uAmaDfFt65oWTzhoCRl_Peaw6EUUqM1mtF781nTnY8fLrz6vCXHJZIcoLbIoXKLrRociZS115CL2TvPv2fzRahyphenhyphen7yTp5_GjD3ZUrH5pV3_e2nr5pA7UyJtCyM/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

Settings

listURL - replace "https://helplogger.blogspot.com/" with your blog URL
featuredNum - add the number of posts to display in the slider
listbyLabel - if you want to display posts by category / label, such as the tag fashion, it will be written as listbyLabel: "fashion"
feathumbSize - the size or dimension of the image in pixels
interval - time taken to change the slides position in milliseconds
autoplay - replace true with false if you don't want the slides to change automatically.

3. Once you are done with the settings, click the 'Save' button.

Now, this code is for a slider widget which means that instead of just a random list of Featured Posts, you get to display them with images (if they have one) and you can include effects too. You can also control how many slides should be shown because it just wouldn't be prudent to feature your entire oeuvre, right?

Plus, being a slider widget, it adds a nice little visual to your site. And we all know how visuals are important in enticing people to stay, don't we?

الثلاثاء، 22 سبتمبر 2015

5 Best Popular Posts Widgets for Blogger

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers.

Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.
popular posts widget for blogger

Adding the Popular Posts Widget for Blogger

Just click on your blog title, access the Layout menu, click "Add Widget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so follow the instructions carefully to know if you'll need the snippet and image thumbnail or not).

Configuring Popular Posts Widget for Blogger

Once you've followed these instructions, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You can stick with this if it matches your blog design but, if it sticks out like a sore thumb or doesn't suit your taste, there's no need to fret since you can personalize it. You can choose from the following styles - see the demo blog:

Popular Posts Style 1 - Box within a box

This is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>

Popular Posts Style 2 - Large thumbnails with small post titles underneath

This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.
popular posts widget for blogger
CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>

Popular Posts Style 3 - Colorful boxes

If your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

Popular Posts Style 4 - Grid layout

Just like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

Popular Posts Style 5 - Numbered posts

If you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>
These are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click "Template" on the left side and select "Edit HTML" under the template preview.

These next codes need to be pasted above the "</head>" or "</body>" tags, so check the instruction to know exactly where you need to put the code.

Adding the CSS

When the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:
</head>
Just ABOVE the </head> tag, copy-paste the CSS code of one of the styles above.


Important: If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work.

Please note that most of the styles are using the Oswald font which you need to add to your template's code as well.

So, search for this tag:
<head>
Just BELOW it, add this line:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Adding the JavaScript

These styles also require JavaScript codes in order to resize the popular posts image / thumbnail and trim the post snippet and title. To add the JavaScript, search the </body> tag and paste the following script just above it:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
Note: if you have already the jQuery library in your template, remove the line in red.

Once you have added all the codes in the right place, press the "Save template" button to save the changes.

That's it!

The five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. They all have different appearance for determining what makes a post popular, but the end result is the same: visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog.

الخميس، 16 يوليو 2015

Which Hashtag Instagram Widget Should You Choose?

There are apps and widgets for almost everything, but one thing that is lacking is a widget that connects one of the most popular image-based social network to your website. Unfortunately, Instagram has yet to design an official widget that will allow you to easily and quickly embed grams on your website.

A widget is like a desk accessory that allows an end user to execute a particular function within a webpage. It fetches information from a particular source and then display it on an intended area. It can be designed to provide easy accessibility to weather, maps, sports updates, calendar and many others. Android and WordPress are two of the biggest contributors of web and mobile widgets, but Instagram still has to catch up.

While they're still trying to figure out how to make an Instagram widget, take advantage of any of the third-party widgets for Instagram. But because there are plenty of them out there, choosing the right one can be tough. Well, we did the sorting and guesswork out for you and presented you with the top 3 options:
instagram widget, instagram

Instansive

Instansive is a widget generator for Instagram that you can use for free or for a fee. Both versions practically have the same features, except for the number of times that the photos refreshes. It only happens once per day with the free version, but is always up to date with the premium version. If you want to do away with the restrictions of this Instagram widget, be ready to make a tiny investment.

instagram widget instansive


Instansive Features

- Display photos and hashtags in grid, slideshow or column.
- Customize the number of columns and rows
- Add a hover effect
- Show or hide image captions
- Photos are linked directly to Instagram
- Offers native support for Drupal and WordPress

For a one-time fee of $5, you can upgrade to the premium version.

Instansive, however, is not perfect compared to other third-party widgets for Instagram, because it has limited features in terms of customization, display, and refresh frequency. Even if you pay the minimal fee, only the photos will be kept up-to-date, but no other features will be added. But look on the bright side, it is responsive.


Intagme

Intagme is pretty simple and straightforward, which can be a bonus if you have to manage plenty of social media accounts and widgets. Its features also get the job done.

instagram widget intagme


Intagme Features

- Pull photos or hashtags and display them in grid or slideshow
- Get to customize the layout, thumbnail, size and image padding
- Edit photos by adding borders and/or background color

On top of all these, Intagme is 100% free, which would probably put all other third-party widgets at the bottom of your list. Before you make a final decision, however, know that Intagme lacks one display feature - column, similar to what you will see on Pinterest. It is not responsive and has limited customization options. Moreover, photos are linked to a page on Intagme.com, instead of directly to Instagram.

Related: How to Add an Instagram Widget in Blogger


SnapWidget

Among Instagram widgets, snap widget is the most popular and is used by more than 100,000 websites daily. It can be used free or for a monthly fee of $6.99.

instagram widget snapwidget

SnapWidget Features

- Pull photos or hashtags, then display them in grid, board, slideshow, map or scrolling.
- Thumbnail size and layout can be customized
- Background color hover effect layout and photo padding can be used to customize photos
- Show or hide sharing buttons

Features of Premium Version

- All of the above
- Create up to 10 widgets
- Filter photos by username & hashtag
- Link photos to Instagram or any other page add custom CSS if so desired
- Has more advanced customization options, such as pagination controls integration of Google Analytics and photo pop-up functionality

For a price of $6.99 per month, this Instagram widget is a worthy investment, especially because the free version is ad supported. This means thumbnails are linked to a SnapWidget page where photos appear alongside ads. An added bonus is that whether free or paid, there is an option available that lets you make the widget responsive for mobile use.

Which Instagram Widget Should You Choose?

Even if only 3 options were presented, making a choice is still not a walk in the park, but at least you don't need to shuffle through tons of widgets. From the information above, you can make an informed decision as to which Instagram widget to use. Or, you can narrow down your options based on your budget - whether you have one or not, the features you need, and how much customization control you want to have.

You should also think about how an Instagram widget can affect your SEO efforts. If you want it to be SEO friendly as the rest of your website, find out how it was developed or rendered, as some of the platforms used may not be visible to search engines. Consider all the factors above and your work will be easier.

الخميس، 9 يوليو 2015

Add Popular Posts Widget with Hover Effect for Blogger

Popular posts is a widget provided by blogger which reveals a list of most considered content from your weblog site. Nowadays We are going to discuss How to add rotating popular posts widget to blogger blog, in this widget when any user hover on the image thumbnail of popular content the rotating impact triggered and moves the thumbnail until the customer moves out from it. Generally when readers like a post they frequently visit that post and Blogger Popular post widget pick that post by the generating importance. In blogger default popular post with we cannot change but by using CSS3 we can easily operate the standard gadget. In the same way I have used CSS rule for adjusting this popular post widget. Earlier I have released various popular post widget. But this popular post is little different with fill color and hover effect. A Popular Posts gadget reveals the list of most well-known content on your weblog site along with an picture thumbnail and a small of the post.

Popular Posts is a widget which every good blogger uses. From small weblogs to all big weblogs you can see Popular Content gadget. It helps to reduce jump rate of your weblog site. I have already added three popular posts widget in my blog. The widget we will add shows the Thumbnail and Post Title when page is fully loaded. When hovered over, a bouncing snippet effect takes place. Popular post gadget is already given by the blog writer but here we are providing it for you in once again way.we are offering it here with rabbit float effect this gadget is simply CSS based and it's very simple to add it to your blog. In this tutorial I will show you Popular Posts Widget with Hover Effect for Blogger. Follow the steps below to continue to the tutorial.

Add Popular Posts Widget with Hover Effect for Blogger

Popular Posts Widget with Hover Effect for Blogger


Step-1 Go to your Blogger Dashboard.

Step-2 Go to Layout.
Add Popular Posts Widget with Hover Effect for Blogger
Step-3 Click Add A Gadget.


Add Popular Posts Widget with Hover Effect for Blogger

Step-4 Select Popular Posts Widget.

Add Popular Posts Widget with Hover Effect for Blogger

Step-5 Now you have checked image thumbnail and snippet box.

Add Popular Posts Widget with Hover Effect for Blogger
Step-6 Save widget.

Step-7 Go To Blogger Dashboard>>Template>> Edit HTML.

Add Popular Posts Widget with Hover Effect for Blogger

Step-8 Find this tag ]]></b:skin>.

Step-9 Paste the below given code just above ]]></b:skin>
/* Popular Post Customization by hackpower.org */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
/* Popular Post Customization by hackpower.org */
Step-10 Now Save Template and You are Done.

الاثنين، 29 يونيو 2015

Add Square Popular Posts Widget with Rotating Effect in Blogger

Popular posts is a widget offered by blog writer which reveals a list of most considered content from your blog site.We have already distributed three hacks about popular posts widget. Popular Post is show’s the top click Post’s by the Visitor’s.Here i share a Stylish popular Publish Gadget for your blog site writer blog.this Icons Helps to Entice the People by Fashionable and Amazing look in your blogger Sidebars. this widget when any user hover on the image thumbnail of popular posts the spinning effect activated and rotates the thumbnail until the customer moves out from it.We will add this Technique with using genuine CSS3 i.e this will not impact the the loading speed of your blog.

Popular Posts is a widget which every good blog writer uses. From small weblogs to all big weblogs you can see Well-known Content gadget. It allows to reduce jump rate of your blog. The most read posts are displayed to let visitors know about other interesting posts or subjects they might like. This will let guests stay on your weblog site more time. This gadget is type of different from other popular widget, because it doesn’t only shows the popular post, but as well rotate when hovered on any of the pictures. There are many gadget designer personalize this gadget in different way. But the main problem is about popular post image. Because If you want to resize the image size then it will become cloud. So the remedy is JavaScript with CSS programming. Now you can able to increase your popular post image in any size. This widget created by Times of Blogging. You can easy to add this widget on your blog or site. Please follow this post and install it on your blog. 

Add Square Popular Posts Widget with Rotating Effect in Blogger

Square Popular Posts Widget with Rotating Effect in Blogger


Step-1 Go To Blogger Dashboard.

Step-2 Click on Layout.
Add Square Popular Posts Widget with Rotating Effect in Blogger

Step-3 Click on Add Gadget.

Add Square Popular Posts Widget with Rotating Effect in Blogger

Step-4 Select Popular Posts Widget.

Add Square Popular Posts Widget with Rotating Effect in Blogger

Step-5 Check Mark Show thumbnail option.

Step-6 After Save Widget.

Step-7 Go To Blogger Dashboard>>Template>> Edit HTML.

Add Square Popular Posts Widget with Rotating Effect in Blogger

Step-8 Find ]]></b:skin> tag.

Step-9 Paste the below given code just above ]]></b:skin>
.PopularPosts .item-title {
display:none;
}
.PopularPosts .widget-content ul li {
background: none repeat scroll 0 0 transparent;
float: right;
list-style: none outside none;
margin: 10px 0 0 !important;
padding: 0 !important;
}
.PopularPosts .item-thumbnail {
margin: 0 8px !important;
}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}
.item-thumbnail img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 3px solid #ccc;
height: 60px;
padding: 3px;
width: 60px;
}
Step-10 Now Save template and You are Done.

الاثنين، 22 يونيو 2015

Gray Color Popular Posts Widget for Blogger

The Popular Posts Widget is one of Blogger's official widgets and it is very easy to add this to your Blog. Here is a simple tutorial for creating beautiful Popular Posts Widgets for your Blog using CSS. They are disgusting because either they are not working on the principle of most considered material or if you discover one like the affliate brand's it will not get combined into your material very much. Blog writer doesn’t provide options to add different plugins as per the requirement, hence we need to perform with the HTML requirements to personalize our concept. Automated Numbering Popular Posts Widget for Blogger is created by changing the default CSS to something that provides results as proven in the picture. The standard popular publish gadget offered by blog writer, works ideal but it looks little old fashioned and dull. So in today's tutorial, we will learn how could you give a professional touch into the widget by adding some simple CSS coding in your template.

Blogger’s Built-in Popular posts widget is not that much attention-grabbing with regards to developing and showing. Therefore, if you wish to help Popular Posts widget into a work of art then, you have to depend on CSS Style linens. Your weblog site audience may find one article which is beneficial or informative to them after navigating blog posts from your popular posts widget and subscribe to your blog for your upcoming posts. This stylish popular post widget can be the most popular posts within 7days, a month or of all time. In order to advertise your weblog site and enhance its design, it would be useful for you to use this Fashionable Popular Publish Gadget in your blogger. This method actually uses the Blogger Popular Posts widget with a few tweaks. So if you're already using the gadget, no need to give up deliver. And if you're not already using the gadget, now's sufficient time to add it to your blog.

Gray Color Popular Posts Widget for Blogger


Add Gray Color Popular Posts Widget for Blogger


Step-1 Go To Blogger Dashboard.

Step-2 Click on Layout.
Gray Color Popular Posts Widget for Blogger

Step-3 Click on Add Gadget.
Gray Color Popular Posts Widget for Blogger

Step-4 Select Popular Posts Widget.

Gray Color Popular Posts Widget for Blogger

Step-5 After you have unchecked image thumbnail and snippet box.

Gray Color Popular Posts Widget for Blogger

Step-6 After Save Template.

Step-7 Go To Blogger Dashboard>>Template>> Edit HTML.

Gray Color Popular Posts Widget for Blogger

Step-8 Find ]]></b:skin> tag.

Step-9 Paste the below given code just above ]]></b:skin>
/* Popular Post Customization by hackpower.org */
.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
    border-left-color: #CCCCCC;
    left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
/* Popular Post Customization by hackpower.org */
Step-10 Now Save template and Done.

الثلاثاء، 16 يونيو 2015

Add Social Icons with Tooltip Hover Effect in Blogger

Social Media plays a vital role in engaging more readership to your blog, thus indirectly helps you to increase the traffic of your blog. These amazing Social Symbols with Tooltip Float Impact, designed simply by CSS, without any image or javascript in it. This widget is perfect designed and simply to customize and install. The goal was to slowly fade-in and fade-out the opacity modifying, and animate the place of the tooltip a little bit. With that in thoughts, I was able to make a beautiful social media icons display using CSS3. Social bookmarking widgets helps you to boost traffic on your blog. Today I am sharing an amazing social bookmarking widget which comes with wonderful cartoon tooltips,when any customer moves on the public symbols the tooltip comes out also it is applicable a opacity effect to these social icons,this effect increase beauty of this widget. Now a days people spend more time on social websites as compared to other websites so by properly placing social media symbols on your web page you can  obtain new guests and increase achieve of your top quality material.  So now,  we are going to create simple social media icons which upon hover changes its color.

There are four social icons in which you can add your own desired URL. On hovering over these buttons one can see tooltip appearing with the help of transition and convert CSS. These symbols are really eye-catching and have a eye-catching look. These symbols consist of all the Social icons connecting your account together. So these could be used in order to get more followers or subscribers on your channel. You can use these buttons for your blogger blog to share your blog posts straight on individuals. Public discussing helps you very much for your SEO. Customers can straight discuss your content links on social sites and it will gain you more readers to your blog. All social media sites have been spreading day by day and which is the best source to promote and drive traffic to blog/website as we have also later published on stylishfacebook pop-up like box but this one is different from all other icons on However the below tutorial will explain how to add animated social sharing tooltips plugin in blogger.

Add Social Icons with Tooltip Hover Effect in Blogger

Add Social Icons with Tooltip Hover Effect in Blogger

Step 1: Go to Blogger Dashboard.

Step 2: Click on Layout.

Add Social Icons with Tooltip Hover Effect in Blogger

Step 3: Click on Add Widget.

Add Social Icons with Tooltip Hover Effect in Blogger

Step 4: Select HTML/JavaScript.

Add Social Icons with Tooltip Hover Effect in Blogger

Step 5: Paste code HTML/JavaScript in box below.
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/TwitterUSERNAME" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/GoogleplusID" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/FacebookID" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://yoursite.blogspot.com/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */
a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>
Step 6: Now Change the text in Blue with your desired URLs.

Step 7: Now Finally Save widget and Done.

الأحد، 14 يونيو 2015

Add CSS Elegant Share buttons for Blogger

If you want to share something with the world, it's a wise decision if people also quickly fall upon the discuss control buttons. I am fairly sure there is a important connection between visibility of share buttons and actual shares of your posts. The widget is light in size and looks elegant. In every post after scrolling the widget will pop up at the lower bottom of the screen. The gadget contains four public discussing control buttons – Facebook or myspace, Tweets, Google+.  There is a close key too to close down the floating share buttons. you can add more if you like or remove the one you do not want and add yours. All you need to have is fair knowledge of HTML and CSS. You can get the program code of any public networking share button from the well known public networking platform's website.

Blogger is now testing out a new Social Sharing icon set made up of E-mail, Blog writer,Twitter,Facebook and Search engines hype control buttons. The set looks simple and stylish with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard. These control buttons are created of genuine CSS and look incredibly stylish. They have awesome float impact and are very light too. You can add these buttons under every post of your blog and increase the user interaction in your blog. Social media share buttons help us to get our well-written content shared on different public networking systems quickly. When a part of material get distributed more and more times on different social media platforms, it helps our content to get more links, free traffic and social signals which increase the value of our content in search engines. 

Add CSS Elegant Share buttons for Blogger

Add CSS Elegant Share buttons for Blogger

Step-1 Login to Your Blogger Dashboard.

Step-2 Go to Template > Edit HTML.

Add CSS Elegant Share buttons for Blogger

Step-3 Find  the tag.
 ]]></b:skin>
Step-4 Paste below given code just above ]]></b:skin>.
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font: 2.5em/2em 'zocial', sans-serif;
  color: white;
  line-height: 2.2;
}
.post-social .facebook {
  background: #3B5998;
}
.post-social .twitter {
  background: #4099FF;
}
.post-social .googleplus {
  background: #db5a3c;
}
.post-social .social {
  float: left;
}
.post-social .zocial-facebook {
  margin: 0 15px;
}
.post-social .zocial-twitter {
  margin: 0 25px;
}
.post-social .zocial-googleplus {
  margin: 0 25px;
}
.post-social li {
  min-width: 180px;
  width: 210px;
  height: 80px;
  cursor: pointer;
  list-style: none;
  text-align: left;
  float: left;
}
.post-social li:hover [class*="zocial-"]:before {
  opacity: 0.5;
  text-align: right;
}
.post-social li:hover iframe {
  opacity: 1;
}
.post-social li iframe {
  margin-top: 30px !important;
  opacity: 0;
  transition: all .3s ease-in-out;
}
.post-social li .fb_ltr {
  margin: 30px 20px !important;
}
Step-5 After search for <data:post.body/> code.

Step-6 Paste the below given code just below <data:post.body/>.
* You show more than one <data:post.body/> so make sure that you have selected the right code.
<ul class="post-social">
  <li class="facebook">
      <span class="social zocial-facebook"></span>
    <div class="fb-like" data-send="false" data-layout="button_count" data-width="250" data-show-faces="true"></div>
  </li>
  <li class="twitter">
      <span class="social zocial-twitter"></span>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="Rushtips">Tweet</a>
  </li>
  <li class="googleplus">
        <span class="social zocial-googleplus"></span>
    <g:plusone size="medium"></g:plusone>
  </li>
</ul>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Step-7 After save template and you are done.

الجمعة، 5 يونيو 2015

CSS Hello Bar Clone widget for Blogger

Hello bar is one of the best notification bar for WordPress and also for any web posting system. I really liked their idea and individually that inspired me to create Mintbar an opensource notification bar. Hello Bar is still just HTML and CSS on your website, you can use CSS to management its exposure. Merge this with WordPress customized publish meta and you can management where on your website your Hello Bar shows up on a per-page basis. By default this code snippet will display your Hello Bar enabling you to set a Customized Area value on those webpages you want to cover up your Hello Bar.

This plugins helps you to get a lot of visitors to one desired page. If you are internet hosting service any competition or free gift, this bar will help you get a lot of traffic on that particular page. The Hello Bar looks like it has some really cool features onto it, but to be honest, I can’t imagine myself taking advantage of the split testing options too much on the particular website I was operating on. As I was looking at the bar I really believed, this factor could be quickly regenerated. We have designed a clone of this plugin but without using any JavaScript it is purely based on HTML and CSS. The plugin has many features such as Beautiful Design, Shadow effect, Compacted dimension to get quicker fill time etc. In situation the bar irritates any of your guest, it can be closed just by clicking on a single button. The awesome “Hello Bars” on tons of websites before and always wanted to play with it. The other day I had a scenario where I required it for a website I was operating on so I searched on over to hellobar and to my dismay I saw I needed to pay for it, a monthly fee per impression.

Demo Image:
 blogger trick 2015, blogger tips 2015

CSS Hello Bar Clone widget for Blogger

Step-1 Go to Blogger dashboard. 

Step-2 Go to Layout.
 blogger trick 2015, blogger tips 2015

Step-3 Click on Add Widget.
 blogger trick 2015, blogger tips 2015

Step-4 Select HTML/JavaScript.

blogger trick 2015, blogger tips 2015

Step-5 Paste the below code in the HTML/JavaScript box.
<style type="text/css">
/* Hello Bar Clone For Blogger by hackpower.org */
#tob-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#tob-hots{background-color:#EB593C;border-bottom:2px solid #FFF;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:3px 3px 3px 3px;z-index:10000}
#tob-hotsdata{color:#FFF;font-family:serif;font-size:15px;padding:5px}
#tob-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#tob-hotsshow{background-color:#EB593C;border-bottom:3px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #000;border-right:3px solid #000;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
.tob-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
.tob-hotsblock{background-color:#CC5200;height:10px;width:8px}
.tob-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<div id="tob-hotsmain" >
<center id="tob-hotsshow" onmouseup="document.getElementById('tob-hots').style.display='block'"><div class="tob-hotsblock"></div><div class="tob-hotsdownarrow"></div></center>
<div id="tob-hots" >
<center id="tob-hotshide" onmouseup="document.getElementById('tob-hots').style.display='none'"><div class="tob-hotsuparrow"></div><div class="tob-hotsblock"></div></center>
<center id="tob-hotsdata" >
Add your Text/Links here in HTML Format
</center>
</div>
</div>
Step-6 Change Add your Text/Links here in HTML Format with your desired text/link and remember that you should add it in HTML format.

Step-7 Now Save widget and you are done.

Happy Blogging with Enjoy .............

الجمعة، 15 مايو 2015

Add Related Links to Below Blog Posts in Blogger

Related posts widget is very important for a blog, because it improves the variety of web page opinions and also help the guest to perspective other content relevant to blog. Now here is wonderful trick to display links to related posts beneath each posts. Related posts link below every posts and have three to four linked pages with thumbnail pictures and send your guests to relevant content. By including relevant content below your Blogger posts you will get more page views. The gadget we have in this post is similar to the popular Link Within Related posts but with some great specs and choices.The gadget is 100 % free and ad-free. It takes a moment to get the widget up and running on your blog, no signup required. Display thumbnails of posts having same labels or categories at the bottom of each site involves people more and increases the pageviews. 

Technically, there are a lot of ways of displaying related content or content but most of them are not extremely focused. Either they don’t entice individuals or they provide totally irrelevant results. This will make them feel happy after reading all your article. This feeling will create them check out again or even consistently on your weblog site. In this way, guests from google can become regular readers of your blog. So the point is, You should link 5-6 related articles in your blog post. Doing this will also help you to increase the page views of your weblog site and will also decrease the bounce rate of your weblog site.This relevant content gadget displays relevant posts using the labels, so it will list posts with the same labels as the posts it is below.You can add some extra customizations to this gadget. In this tutorial i will share how to add related link to below blog post in blogger.

#Add Related Links to Below Blog Posts

Step-1 Go to Blogger Dashboard >>Template>>Edit HTML.


Step-2 Search  ]]></b:skin> tag.

Step-3 Paste below code just above it ]]></b:skin>
/* The CSS Code for the menu starts here hackpower.org
<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;}
#related-posts a{color:#0c0080;}
#related-posts a:hover{color:#0ab0fd;}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:12px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/-Tx5vm6_cR5k/VVX1tXJQOFI/AAAAAAAAB2s/deJGJUfbw78/s1600/hacpower2.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;
height: 20px;
margin-top: -5px;}
  #related-posts ul li:hover{
background:transparent url(http://3.bp.blogspot.com/-5fVR8y7S7XM/VVX1jKVUeLI/AAAAAAAAB2k/5U_MLqWfbHE/s1600/hacpower.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}</style>
Step-4 Now Search <div class='post-footer-line post-footer-line-3'>

Step-5 Paste below code just below it <div class='post-footer-line post-footer-line-3'>. In case, you are unable to find <div class='post-footer-line post-footer-line-3'>,  then you can paste it just below <data:post.body/>.
<!-- hackpower Related Posts Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>
<!-- Related Posts Code End-->
Step-6 You can change var maxresults=10; with the number of post you want to be displayed.

Step-7 Finally Save Template and You are Done.

We hope this tutorial has helped you in displaying related Link below posts in blogger. If you have any questions, then feel free comment.

الأربعاء، 13 مايو 2015

Add Corner Ribbon in Blogger

Add a featured/new ribbon to latest and old ribbon to previous posts as you have seen in many bloggers but they have a shit of codes to do this. Here as you know that 98% of our rule are without JavaScript or jquery because we dislike both of them. This ribbons is created up of Genuine CSS and very less amount of coding thus it is fast loading. Unlike other ribbons no images are used as they improve the site fill time. The picture slips appear on a fashionable qualifications with a 'Featured Ribbon' in the top left corner,you can manually add own image by replacing Ribbon image URL with your.You can also add captions and links to your slides.The installation of slider is very simple you just have to put some requirements in your layouts.

Blogger platform, the sidebars and footers of the blog function device places for the inclusion of material and ads. A gadget-placement area is not available by default above the header area of the blog. To add advertisements to this portion of your blog, you must add rule to your blog's design to make the device for the marketing to live in before you can paste in code for individual advertisements. Decorating your photos with ribbon photo corners is a great way to add a little flair to your scrapbook or photo album pages. These ribbon mounts are just what you need for a easy, yet fashionable overall look for your most valuable images. You can personalize it freely like you can change the New ribbon to Featured, Latest, Recent, Hot etc ribbons. You can also modify your Old ribbons with your preferred picture also. So without any more wait, just shift to the live EXAMPLE IMAGE and have a look on the features list and directly get your ribbons now. You can edit the text shown in the ribbon as per your convenience. To add this widget to your blog follow the below steps.

#Add Corner Ribbon in Blogger


Step-1 Go to Your Blogger Dashboard.

Step-2 Click On Layout Button.
Step-3 Click On Add a Gadget.

Step-4 Choose HTML/JavaScript.

Step-5 Paste The Below Code In HTML/JavaScript Box.
<div class="ribbon-wrapper-green"><div class="ribbon-green">EXAMPLE</div></div>
<style>
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 99999;
}
.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
</style>
Step-6 Change EXAMPLE with your own desired text.

Step-7 After Save Widget and Done.

Thanks for visit our Blog.