Blogger Widgets

Custom label clouds is a best way to show your all posts that tagged with specific group. Before going into depth let me give explain it. You can say that labels are those categorizes or fields where post attached. While writing a blogger post we tag it with relative grouping. In blogger there is a simple way to showing it. These joint grouping is a way to engage your reader also it decrease the bounce rate alternatively increase spending time on website. A visitor can find easily more and more stuff with the help of labels on blogger. We can place these labels in sidebar as well as in footer section. For the sake of getting additional attention from user we can customize these blogger labels from simple to attractive form. This implementation not only snatches the reader’s concentration while on the other hand it provides a new glance to your site. So let’s dive.

How to add label clouds in blogger:

If you have little experience to inserting of labels then let me tell you. It is necessary that you have posts that mark with special class. For example if you have a post about what is SEO? Then your expected tag will be search engine optimization or simply SEO. In order to showing all these type of labels at your home page of blog. Follow these instructions. Go to Layout > Add a Gadget > Select Labels >  then choose these settings as you seen in below image screenshot

Also read:
       2 new way to show popular posts in blogger
Now we move forward for next step.

Customizing clouds labels in your own way:

This is the time to customizing these labels with CSS. TcM is the site which gives you vast five ways to customize according to designing of your blog. Just select your version of labels with screenshots of images in given coding and you are done. For simplicity I explain the whole procedure in 3 steps.

• Go to blogger dashboard > Template > Edit HTML.
• Find this piece of code  ]]></b:skin>
• Select your desired coding from all of five codes that are given below and paste it to just above it. Save template and reload the page. Bingo you have a new charming look on your blog. Enjoy.  

/////////////##########111111111#######/////////////
.label-size{
background: #f06;
background: linear-gradient(45deg, #f06, green);
text-transform: uppercase;
color: #fff;
font-size: 10px;
font-family: arial,sans-serif;
text-decoration: none;
opacity: .9;
padding: 4px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-backface-visibility: hidden;
display:block;
margin: 0 5px 5px 0;
float: left;
opacity:.9;}
.label-size:hover{background:black;
                  color:#0EFF00;
                  text-decoration:underline;}
/////////////########22222##########///////////////
.label-size{
background: #f06;
background: linear-gradient(45deg, #F57319, black);
text-transform: uppercase;
color: #fff;
font-size: 10px;
font-family: georgia,sans-serif;
text-decoration: none;
opacity: .9;
padding: 4px 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-backface-visibility: hidden;
display:block;
margin: 0 5px 5px 0;
float: left;
opacity:.9;}
.label-size:hover{background:black;
                  color:#0EFF00;
                  text-decoration:underline;}
///////////#########3333333#######/////////////////////
.label-size{
background: #000;
background: linear-gradient(75deg, #000, #646);
text-transform: uppercase;
color: #66FF33;
font-size: 10px;
font-family: Monotype Corsiva,;
font-weight:bold;
text-decoration: none;
opacity: .9;
padding: 4px 10px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-backface-visibility: hidden;
display:block;
margin: 0 5px 5px 0;
float: left;
opacity:.9;}
.label-size:hover{background:black;
                  color:#0EFF00;
                  text-decoration:underline;}

////////////###########4444444444##########/////////////
        .label-size{
margin:0 2px 6px 0;
background: #FFF;
padding: 3px;
text-transform: uppercase;
border: solid 1px #000;
border-radius: 4px;
float:left;
text-decoration:none;
font-size:10px;
color:#000;
}      
.label-size:hover {
border:1px solid #66FF33;
color:#00F;
text-decoration: none;
 }
///////////##########55555555555########////////////
        .label-size{
margin:0 2px 6px 0;
background: #FFF;
padding: 3px;
text-transform: uppercase;
border: solid 1px #000;
border-radius: 4px;
float:left;
text-decoration:none;
font-size:10px;
color:#000;
}      
.label-size:hover {
border:1px solid #66FF33;
color:#00F;
text-decoration: none;
width:100px;
height:20px;
background:grey;
transition:width 2s;
-webkit-transition:width 2s;
-moz-transition:width 2s;
-}

Customization:
See your style from all of above shown images an select coding.

Need help:

I know that while implementing there should be problems occurs especially who don’t tackle with coding before it. So if you face any type of difficulty or clouds labels shows improperly then ask us. It will increase our experience regarding product also way of help others. Finally show your love with sharing this tutorial and contribute to spreading knowledge for all if you can.

Specifications:

This is branded widget in its kind with addition of Pocket, LinkedIn and Buffer social plug-in. Pocket is an application which allows you to book mark something like a post, website, a special page etc. If a user finds any thing helpful then he easily book mark that page for future concerns. Similarly spreading information among professionals that are in your connection at LinkedIn this plug in gives you all in one package.

Buffer App:

Buffer is an application which allows to automate your content on all social pages. It is very easy and professionals recommend this app. It is also available in Chrome, Firefox extensions. However in order to minify complexity now you use it in social sharing floating bar as a button. Also in this present gadget after its installation your readers will be able to share content using buff. The method of this application is straightforward. Just press the button and it press the whole post with thumbnail and link. After completion post will be share on your connected social profiles.

How to add:

Go to dashboard > select Layout > add a gadget
Select a new widget then copy whole coding from here

<style type=”text/css”>
#tcm-floating-bar {
            position:fixed;
            bottom:15%;
            margin-left:-721px;            float:left;
            background-color:#ddd;            padding:0px 0px 0px 1px;              z-index:10;
            border-bottom-right-radius:1em;
            border-top-right-radius:1em;
        border-top:5px solid #E5E5DD;
            border-left:5px solid #E5E5DD;
            border-bottom:5px solid #E5E5DD;}
.tcm-share {
float:left;
clear:both;
margin:5px 5px 1px 2px;
}
</style>
<div id=’tcm-floating-bar’>
<div class=’tcm-share’ id=’like’ style=’margin-left:7px; margin-bottom:0px’>
<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>
<div class=”fb-like” data-send=”false” data-layout=”box_count” data-width=”40″ data-show-faces=”false”></div>
</div>
<br />
<div class=’tcm-share’ style=’margin-left:3px;’><a class=’twitter-share-button’ data-count=’vertical’
data-via=’technologymake’ expr:data-counturl=’data:blog.url’ href=’http://twitter.com/share’ rel=’nofollow’>Tweet</a>
<script src=’http://platform.twitter.com/widgets.js’; type=’text/javascript’></script>
<br />
<div class=’tcm-share’ id=’linkedin’ style=’margin-left:2px;width:48px’>
<script src=”//platform.linkedin.com/in.js” type=”text/javascript”>
  lang: en_US
</script>
<script type=”IN/Share” data-counter=”top”></script>
</div>
<div class=’tcm-share’ id=’buffer’ style=’margin-left:3px;width:48px’>
<a href=”http://bufferapp.com/add” class=”buffer-add-button” data-count=”vertical”>Buffer</a>
<script type=”text/javascript” src=”https://d389zggrogs7qo.cloudfront.net/js/button.js”></script></div>
<div class=’tcm-share’ id=’pocket’ style=’margin-left:3px;width:48px’>
<a data-pocket-label=”pocket” data-pocket-count=”vertical” class=”pocket-btn” data-lang=”en”></a>
<script type=”text/javascript”>!function(d,i){if(!d.getElementById(i))
{var j=d.createElement(“script”);j.id=i;j.src=”https://widgets.getpocket.com/v1/j/btn.js?v=1″;
var w=d.getElementById(i);d.body.appendChild(j);}}(document,”pocket-btn-js”);</script>
</div>
<div class=’tcm-share’ style=’margin-left:3px;’ id=’gplusone’>
<!– Place this tag where you want the share button to render. –>
<div class=”g-plus” data-action=”share” data-annotation=”vertical-bubble” data-height=”60″></div>
<!– Place this tag after the last share tag. –>
<script type=”text/javascript”>
  (function() {
    var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
    po.src = ‘https://apis.google.com/js/platform.js’;
    var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
</div>
<div style=”clear: both;font-size: 9px;text-align:center;”>
<p style=” line-height:0px; font-size:10px; font-weight:bold; text-align:center;”>
<a style=”color:#D3D3D3;” href=”http://www.technologymake.com”>Widgets</a></p>

</div></div></div></script></div></div></div>

HTML Java script widget in blogger is commonly useful in many aspects. Since blogger is a foremost platform at internet. A number of people give preference it.  Its settings are very easy to understand. As a blogger we need to add & remove gadgets on daily basis. Such that up & down in this series of

template is continues. We insert these widgets for keeping readers up to date with daily new stuff and adjustment in blogger template appearance. Some works fit and some dose not work due to many reasons i.e. problem in codings not inserted properly etc. A gadget allows us to take effect and changes instantly as long as we hit save button and reload page. If it seems good then it will survive alternatively removal option is still in reserve.

Most useful widget:

To be personal I found that HTML Java script widg is one of those which is regularly use at blogger by people. Because it gives us just copy the code from anywhere you want it and paste. Title is optional. It is moveable and after saving it you may place it as your choice. Let me tell you if a wid that you want to display in sidebar i.e. floating social icon section & originally widget is at header section. Then after putting the code in it click on it by mouse left button hold on pressing and bring it at your destination place in template.

Where we use HTML Java script gadget:

While placing a code such as from adsense, Facebook Badge or Twitter Button. Even for every single piece of code we add HTML Java script. In previous post Iintroduce mashable version of social icons. While adding these buttons we need this special widget that is built in blogger. It is a simple and neat way to adding any type of code in template as compared to finding exact location in complex edit template section which is very hard for especially newly bloggers. Saving time is another profit from it.

How to find:

Go to blogger dashboard > Layout > Add a Gadget > Choose HTML Java Script as mention in screen short.

Just click on plus button add code in it and you are done.  Same is the procedure of its deletion. Just click on remove button it will be deleted. 

Simple HTML & CSS:

Now a days trend of CSS is increasing as compare to Java scripting & JQuery. Cascading style sheet is now most worthy and preferable because while loading sites it takes very little time and gives result. So use of java in website building plus in gadgets is a good idea. Site loading time directly effects SEO because at this time user dislike waiting in site loading time.

 So it is depend upon you to reduce your load time and give a positive impression to user. With the help of HTML language I create basic structure. After that using cascading style sheet and icons it builds.
Also:

• Adding twitter button below every post.
• 3 way implementation of stumble upon button
• Twitter Button series

Adding Mashable social icons:

Implementation of this mashable widget just in seconds. Just like drag and drop. I also insert coding in this blogger post for demo. After implementation this widget looks like as you see here.

First of all go to blogger dashboard
Select  Layout
choose Add a gadget option.
Now from here select HTML java script from drop down. Paste whole coding in it.

/**************************************************
     Start of TcM Social Widget
***************************************************/
<style type=”text/css”>
#mytcm {
            border: 0;
            margin-bottom: 10px;
            margin: 0 auto;
            width:320px;
            background-repeat: no-repeat;
            display: block;
}
#mytcm ul li {
            list-style-type: none;
            float: left;
            padding:5px;
            background-color: #ddd;
            border: 1px solid #000;
         margin:1px;}
</style>
                                             <!–Start of  TcM social widget–>
 <div id=”mytcm”>
                          <ul><li> <a href=”#” target=”_blank” rel=”nofollow”><img src=”http://3.bp.blogspot.com/-Gh6YJ0t4uyM/UlJ_oWXyXxI/AAAAAAAAAmA/yH0B3mMc63o/s1600/facebook.png” alt=”Facebook” title=”Facebook” width=”23″ height=”23″ /></a></li>
                           <li> <a href=” # ” target=”_blank”  rel=”nofollow” ><img src=”http://4.bp.blogspot.com/-OfzHCK-EHbI/UlKAxCFakTI/AAAAAAAAAmY/iYBLxReR_DM/s1600/linkedin.png” alt=”Linkedin” title=”Linkedin” width=”23″ height=”23″ /></a></li><li><a href=”#” target=”_blank”><img src=”http://4.bp.blogspot.com/-xzloXfdtV0Y/UlJ_BMujuSI/AAAAAAAAAl4/kGE-T1Mj7wY/s1600/twitter.png” alt=”twitter” title=”twitter” width=”23″ height=”23″ /></a></li>
                          <li><a href=”#” target=”_blank” title=”Email” rel=”nofollow”><img src=”http://2.bp.blogspot.com/-IcLPSOZrty8/UlKBS_dhy2I/AAAAAAAAAmk/V-vqtyqnqz8/s1600/email.png” alt=”mail” width=”23″ height=”23″ /></a></li>
                         <li><a href=”#” target=”_blank” title=”Gplus” rel=”nofollow” ><img src=”http://2.bp.blogspot.com/-TBai6yjMXwE/UlKAEnKAmnI/AAAAAAAAAmI/zp_PloXmMXU/s1600/gplus.png” alt=”gplus” width=”23″ height=”23″ /></a></li>
                         <li><a href=”#” target=”_blank” title=”Rss” rel=”nofollow”><img src=”http://3.bp.blogspot.com/-Le3DfKoS-M4/UlKAc0IWLPI/AAAAAAAAAmQ/wl_smpZzrcs/s1600/rss.png” alt=”Rss” width=”23″ height=”23″ /></a></li></ul>
</div>
                                                  <!–End of  TcM social widget–>