Blogger Widgets, Blogging, Gadgets

Custom menu bar for blogger with 3 ways how to create

Menu or navigation bar is an essential part of any website. Before going in depth let me explain a little bit about navigation bar. Menu bar includes important links about different categories and it exists below header section. Many webmasters use this navigation bar in side bar section of their blog/site. Behind these links all the published post of a certain category goes in that specific tag. In simple words we can say that these links are act like a folder where all pages interlink and be present. Arranging menu bar in good organized way is a sign to quality of a blog. Readers can find easily their interested content with the usage of navigation bar. So this is also a way to improve a blog/site reputation with build a huge readership.

Custom menu/navigation bar for websites

Why to customize menu bar:

If you are using blogger platform that you may be notice that bydefault blogger menu bar is not so much attractive. A user doesn’t show his concentration with blogger navigation bar. So in order to adding gorgeousness with giving a new glance to your blog plus snatching user’s attention towards more important material that is include in our site. While on the other hand if you are a professional web-master then you know that what importance a menu bar in a website has?

Also Read:

Customized blogger menu bar:

In this section I will teach you how easily you create a custom navigation bar for your blogs and other websites. Sufficient knowledge of basic (HTML) Hyper Text Mark up Language with skills of (CSS) Cascading Style Sheet you have required. If yes then good alternatively for today I will crate different types of custom menu bar for all of you guys with simple HTML. But giving a new charming look we use CSS. Blogger is a service where we customize each and every part of our template. In present tutorial we customize blogger menu bar section according to our preference. Just copy and all you’re wanted coding form here and put it in your website navigation section as you want. And enjoy a new customized navigation bar.

1. Rounded Corner

<style type=”text/css”>
.menu {
            font-family: Verdana, Geneva, sans-serif;
            margin: 0px;
            padding: 40px;
            background-color: #000;
            width:auto;
            height:300px;
            font-size: 14px;
            text-decoration: none;
}
.menu ul{ margin: 0px;
                  padding: 0px;
     
            }
.menu ul li{
            float:left;
            list-style-type: none;
            background-color: #333;
            width:130px;
            position:relative;
            text-align:center;
            border-top-left-radius: 35px;
            border-top-right-radius: 35px;
            height: 45px;
    box-shadow: 0px 2px 4px #
            00FF00;
            border:1px outset #0C0;
            webkit-border-radius:30px;
}
.menu ul li:hover{
            background-color: #333;  
}
.menu a{
            color: #FFF;
            display:inline-block;
            padding-top: 15px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            text-decoration: none;
   }
.menu a:hover{text-decoration:underline;
            color: #FFF;
text-shadow:#0CF 5px 3px 5px;
   opacity:.9}
.menu ul ul {visibility: hidden;}
.menu ul li:hover ul{visibility:visible;}

</style>
<div class=”menu”><ul>
    <li><a href=”#”>Home</a>

    <ul>
    <li><a href=”#”>About Me</a>
    <li><a href=”#”>My Blog</a>
    <li><a href=”#”>CopyRights</a>
    <li><a href=”#”>Templates</a>
    </li></ul>
    <li><a href=”#”>Web Hosting</a></li>
<li><a href=”#”>Projects</a></li>
<li><a href=”#”>Trainings</a></li>
<li><a href=”#”>Buttons</a></li></ul>
</div>

                                       

2. Green Border Effect:

<style type=”text/css”>
.menu {
            font-family: Verdana, Geneva, sans-serif;
            margin: 0px;
            padding: 40px;
            background-color: #000;
            width:auto;
            height:300px;
            font-size: 14px;
            text-decoration: none;
}
.menu ul{ margin: 0px;
                  padding: 0px;
     
            }
.menu ul li{
            float:left;
            list-style-type: none;
            background-color: #333;
            width:130px;
            position:relative;
            text-align:center;
            height: 45px;
    border-right:#000 1px solid;
     
            box-shadow: 0px 2px 4px #0C0;
}
.menu ul li:hover{
            background-color: #333;  
}
.menu a{
            color: #FFF;
            display:inline-block;
            padding-top: 15px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            text-decoration: none;
   }
.menu a:hover{text-decoration:underline;
            color: #FFF;
text-shadow:#0CF 5px 3px 5px;
   opacity:.9}
   .menu ul ul {visibility: hidden;}
   .menu ul li:hover ul{visibility:visible;}

</style>
<div class=”menu”><ul>
    <li><a href=”#”>Home</a>

    <ul>
    <li><a href=”#”>About Me</a>
    <li><a href=”#”>My Blog</a>
    <li><a href=”#”>CopyRights</a>
    <li><a href=”#”>Templates</a>
    </li></ul>
    <li><a href=”#”>Web Hosting</a></li>
<li><a href=”#”>Projects</a></li>
<li><a href=”#”>Trainings</a></li>
<li><a href=”#”>Buttons</a></li></ul>
</div>

                                                 

3. Simple Black Menu bar:

<style type=”text/css”>
.menu {           font-family: Verdana, Geneva, sans-serif;
            margin: 0px;
            padding: 40px;
            background-color: #000;
            width:auto;
            height:300px;
            font-size: 14px;
            text-decoration: none;}
.menu ul{ margin: 0px;
                  padding: 0px;
     
            }
.menu ul li{
            float:left;
            list-style-type: none;
            background-color: #333;
            width:130px;
            position:relative;
            text-align:center;
            height: 45px;
    box-shadow: 0px 2px 4px #
            00FF00;
            border-right:1px solid #000;
}
.menu ul li:hover{
            background-color: #333;  
}
.menu a{
            color: #FFF;
            display:inline-block;
            padding-top: 15px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            text-decoration: none;
   }
.menu a:hover{text-decoration:underline;
            color: #FFF;
text-shadow:#0CF 5px 3px 5px;
   opacity:.9}
  .menu ul ul {visibility: hidden;}
   .menu ul li:hover ul{visibility:visible;}

</style>
<div class=”menu”><ul>
     <li><a href=”#”>Home</a>

    <ul>
    <li><a href=”#”>About Me</a>
    <li><a href=”#”>My Blog</a>
    <li><a href=”#”>CopyRights</a>
    <li><a href=”#”>Templates</a>
    </li></ul>
    <li><a href=”#”>Web Hosting</a></li>
<li><a href=”#”>Projects</a></li>
<li><a href=”#”>Trainings</a></li>
<li><a href=”#”>Buttons</a></li></ul>
</div>

                                               

Need Help:
In order to feel any type of trouble while adding this menu bar to your blogger template then feel free and just ask us. On the other hand if you feel that trhis tutorial is a way of new learning and customizing for others then. P.s. share it as you can. 

Read More...

Blogger Widgets, Gadgets

Customize label clouds in blogger with advance 5 ways

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

custom label settings

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;
-}

1st Cloud label

2nd way of showing  Cloud label

third style of label cloud

fourth style of show label

final style of showing custom cloud labels.

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.


Read More...

Blogger Widgets, Gadgets

Social Floating bar for blogger version 2

In previous post of social floating widget for blogger we share commonly use social buttons. May be you notice this thing or not but after releasing this floating bar a number of TcM readers ask us to share a widget containing Buffer, LinkedIn and Pocket buttons. So keeping in view there demand also making some other changes is aim to release this social floating bar. As we know that with every moment of time new bloggers are coming. And every day it has been seen hundreds are blogs created. Every one wants to garnish his site with multi stylish buttons and look good in the race of blogging. So on one side where this widget will fulfill their ambition regarding dress up the blog alternatively it is a good way to distribute your site on different social channels.

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.

social floating sharing plug in

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>

and paste entire coding inside it.
Save the gadget. You are done.

Customization:

The default setting according to blogger non customized templates. However if you are using other templates and social plug in not adjusted properly then change the   margin-left:-721px;      according to accurate resemblance.
Also if  
back ground colour of  your blog is other then the colour of plug in then you can change it from this     background-color:#ddd; highlighted piece of code. 

Need help:

In case of don’t tackle or facing any error while adding this social floating bar you may ask us in comment section. We are ready to help you. 🙂 

Read More...

Blogger Widgets, Gadgets

The HTML Java Script Widget most useful tool

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

html coding by tcm

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.

HTML Java script widget

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. 

Read More...

Blogger Widgets, Gadgets

mashable social icon widget for blogger first version

At the internet a vast variety of Widgets available for sites and blogs. Decorating your blogs for the sake of better use experience is good. According to professional developers’ use of appropriate styles, icons and colors in websites are necessary step for vital SEO. Simple is better. I also discussed floatingsharing bar regarding gadgets topic. You might see our branded version of Font awesome style with multi stylish buttons series. But today’s version is totally branded and easy to implementation plus understandable for those who interested to creating their own products.

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.

Mashable icons for websites

 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 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.

  • facebook
  • LINKEDIN
  • twitter
  • mail
  • gplus
  • Rss

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–>

Give a suitable Title if you want otherwise remain blank. Hit orange save button and refresh the page. Your work is done.

Customization:

Customizing in any widget is first step to learning these skills. So here customization preference is exist. Some basic features are these mashable social icons widget explained below. You may able to set its setting according to maintaining the relevancy of your template.
Changing of background color   background-color: #ddd; You may change yorself. 
Adding or drop of any icon. Removing <li> upto </li> Results deleting any icon. Also adding any other icon you put code between these two tags. Leave other settings default.
Replace all  #   sign with your Social Profile address or URLs.
Padding & border, adjust if you want
Alternatively remain all things intact and default. It will work greatly.

Need help:

In case of don’t tackle then you are most welcome for any problem. If you find this tutorial is helpful for other people or a learning platform for newbies who start their blogging journey just now. Then please share with all of them and keep learning. 

Read More...

Blogger Widgets, Blogging, Gadgets

Social floating sharing widget for blogger

Every one know the importance of social networks in this age. Especially for bloggers these networks are as backbone. These major social platform like Facebook, Google plus and Twitter has a source of traffic for web owners. Suitable reputations on these stations give us worth. A number of posts we have already publishing on this topic. Skipping any detail I jump on my subject “Social floating bar”. Many time while surfing Internet you may see this sharing widget on left side in websites. New bloggers face problems while adding this gadgetin HTML coding. So this is total new version of its kind. Trend of sidebar multi stylish buttons is increasing. 

Why to add floating bar:

This small tool gives a new way to sharing, and tweeting a blogger post. A reliable source for spreading knowledge on all famous networks! Great user experience plus give a new glance to your web/blog. If a user finds something helpful then he shares with an easy and new style with this widget. I add most worthy platforms in this widget. A number of experiments I make with this widget since last two days. Now it is ready to releasing. This branded widget add a new taste in your  blog.
Also 
        Adding Stumble upon button in blogger

Social sharing widget by technologymake.com

Adding widget:

Integration of this widget is very easy in 3 steps.

Go to blogger dashboard >
then choose    Layout >  
 Select
   add a Gadget
Choose HTML java script widget and paste the following coding there. Hit the orange save button and reload page. You are almost done.

<style type=”text/css”>
#tcm-floating-bar {
            position:fixed;
            bottom:15%;
            margin-left:-690px;
            float:left;
            border-radius:5px;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            background-color:#f7f7f7;
            padding:0px 0px 0px 2px;
            z-index:10;
            border:1px solid #CCC;          }
.tcm-share {
float:left;
clear:both;
margin:5px 5px 1px 2px;
}
</style>
<div id=’tcm-floating-bar’>
<div class=’tcm-share’ id=’fblike’ 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: 2px;” ><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’ style=”margin-left: 3px;” id=’st’>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script>
</div>
<div class=’tcm-share’ id=’diggit’ style=’margin-left:3px;width:48px’>
<script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script>
<a class=”DiggThisButton DiggMedium”></a>
</div>
<div class=’tcm-share’ id=’pinit’ style=’margin:28px 5px 0px 7px;width:48px’ display:’block’>
<a href=”//gb.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.technologymake.com&media=http%3A%2F%2Fwww.technologymake.com&description=Next%20stop%3A%20Pinterest” data-pin-do=”buttonPin” data-pin-config=”above”><img src=”//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png” /></a>
<!– Please call pinit.js only once per page –>
<script type=”text/javascript” async src=”//assets.pinterest.com/js/pinit.js”></script></div>
<div class=’button-share’ style=’margin-left:3px;’ id=’gplusone’>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
<g:plusone size=”tall”></g:plusone>
</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/2014/03/Social-floating-widget-in-blogger.html”>Widgets</a></p>
</div></div></div>

Customization:

            margin-left:-690px;  change according to your page setting. Decreasing value widget will go R.H.S & increasing value gadget will move Left Hand Side.
background-color:#f7f7f7; Also if you want to change the color then replace this value by your own desired or similar color to your template. Replace data-via=’technologymake‘ with your Twitter name.
Alternatively remains unchanged in case of insufficient knowledge of CSS.
Need Help:
Facing any type of problem ask us. We will be feel glad to help you in any nuisance. If you find this widget helpful for others then Brothers and Sisters P.s. Share it as you can.  

Read More...

Blogger Widgets, Gadgets,

3 ways to add stumbleupon button in blogger

Stumbleupon is one of the major social book marking network. For smoothly growth in the world of internet now it is necessary to be social. More social people who have fans in thousand and millions they establish a standard on web. Professionals use all of these resources for sake of gaining huge traffic. Pay special attention on main social sharing networks as a result it returns backlinks, real and qualified traffic and much more on you earn. On the other hand these resources give quality visitors and readers for websites. At this time we need excellence with more communal for perfect reputation. Also traffic coming from these networks i.e. stumbleupon took a unique weight in search engine eyes. So why we lost all benefits in free.

1. Stumble upon sidebar button:

In order to making more facilitation for users in a particular blog/site add variety of  standard sharing buttonsincluding Facebook badges, Twitter follow us button , Google plus and stumble upon. Basically stumble upon is a way to recommend or oppose and sharing author’s written material with people. Consider if a user who has healthy reputation on SU he reads your content on your blog and share it via SU button. His activity gives you a flood of quality traffic more new subscribers and worth. Adding Stumbleupon button in blogger sidebar is very easy job. 

how to add stumbleupon buttons and badges in blogger

  • i. Just go to Stumble upon tools section and choose favorite badge from here. Such as right or left sided bubble counting style. It is upon you but select badge according to template of your blog. 
  • ii. Now from grab it section copy the entire code. 
  • iii. Finally go to blogger Dashboard.> Layout > add a gadget > HTML Java script.

Paste the code here and leave title blank or write anything suitable. Save the new added gadgetby pressing orange save button. Reload the blogger page and you will see a new version of stumble upon button is now in action. Bingo you are done. Now move for next two ways of adding stumbleupon.

2. Adding into header of blogger post:

Many time while reading articles on sites you may see social sharing buttons below the post title and just at begging the post content. Here we add stumbleupon button now. So select appropriate button and repeat above discussed process till then copy of coding. After copying whole code now follow instructions.

  • Go to blogger dashboard > Template > Edit HTML.
  • Click anywhere in source page coding an indicator will appear now press ctrl+f  a small search box will show write this piece of code in this box

<data:post.body/>

hit enter.

  • First occurrence ignore again press enter. At the second appearance yes this is our demand. 
  • Just above it paste already copied coding and save Template by pushing orange button. 

Write a new post and share it. Now you will see your button is now live at the start of blogger post content below the post title. You are done.
Most Common:

                          Customized twitter buttons in blog
                          Twitter button series 

3. How to add below each post:

A number of bloggers prefer to use sharing buttons below every post. So don’t need to worry about how to add stumbleupon button below posts. I am here to share with you inserting this badge below post.
Follow upper discussed process. And copy fitting coding. Again go till then first three reputations of

<data:post.body/>

using above mention techniques. After fourth occurrence just below it paste the code save HTML and refresh the page. All is done.

Need help:

Above discussed tutorial is simple. However in order to don’t tackle yourself or not understand able due to complex coding of your blog then let me know in commenting section. We really willing to help all of you. 

Read More...