RealcomBiz

Enpand & Collapse Blogger Comment Box With jQuery Effect

 After a lot of testing and hard work, i was able to bring you one of the best widget to spice up your comment box, as you all know that making your blog/site attractive is a very complicated task, which some designers/developers find it so difficult in customizing or adding effect to the comment box.
This widget was created by Mybloggertricks and fully design and customize by Realcombiz. The widget will slide out smoothly when you click on the black long button showing the hiding comment box due to the simple jquery effect that was included. This tutorial was a bit techy which require all your attention for you to successfully add the widget to your blog. If you are ready, let's get started.


How To Implement The Effect To Your Blog
  • Go to your blogger dashboard
  • Clcik on "Design" > "Edit HTML" > back up your template
  • Mark/Tick "Expand Widget Templates"
  • Use ctrl F to find <head> and paste the following code after/below <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>
  • Search for the next code ]]></b:skin> and paste the following code above it
/*----- Comment Box Design By www.Realcombiz.com.com ----*/
h3.trigger {
background: url(http://i1175.photobucket.com/albums/r628/realonekazz/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
  • If you wish to change the width of the button, simply edit width: 518px;
  • Edit color:#A1A1A1; if you wish to change the color of your button, check here for 100's of hex color.
  • Now search for the code below
<b:includable id='comment-form' var='post'>
  • Now paste the following code below the code above
<h3 class='trigger'>Click Here To Add Comment</h3>
<div class='toggle_container'>
<div class='block'>
  • Search for the following code, it would appear in the next few lines from the search above
</b:includable>
  • Now paste the following code above the code above
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.realcombiz.com/2012/06/enpand-collapse-blogger-comment-box.html' style='color:#CAC8C8;'><i>Get This Widget</i></a></p>
</div>
</div>

After code placement, your final result should look very similar the image below.


Click "SAVE TEMPLATE" when you are done with your editing. Check your blog to see the great new changes you just apply to your blog.

Use the comment box if you find any difficulties in implementing this widget to your blog.
In my next post, i will be dropping a lot of tutorials on how you can customize/design your comment box, and for you not to miss any of this, simply subscribe to this blog now and receive all our latest post directly into your email, but you will have to confirm your request in your email before this can be enable. Remember to share this with friends/followers.
      Read more→

      Create Social Sharing Icons With Mouse Hover Effect To Blogger Blog

      Making your blog unique is a very tough task, in this tutorial am about to share with you, i will discussing on how you can add a cool social sharing icons with a cute CSS3 effect. This icons consist of facebook link, twitter link, you tude link, and google + link. This icons will move by 7 degree when you hover your mouse on it due to the effect that is included. Follow the few steps below on how to add this icons to your blog.



      Adding The Icons To Your Blog

      STEP 1
      • Go to your blogger dashboard
      • Click on "Design" > "Edit HTML" > Back up your template
      • Mark/Tick "Expand Widget Templates"
      • Use ctrl F to find </b:skin> and paste the following code before </b:skin> tag
      #rb_share_ex {
      width: 800px;
      margin: 0 auto;
      }
      #rb_share_ex img {
      -webkit-transition: all 0.5s ease-out;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      }
      #rb_share_ex img:hover {
      -webkit-transform: rotate(-7deg);
      -moz-transform: rotate(-7deg);
      -o-transform: rotate(-7deg);
      }

      #rb_share_ex ul{
      list-style-type:none;
      }
      #rb_share_ex  li{
      list-style-type:none;
      }
      • Click "SAVE TEMPLATE"
      STEP 2
      • Go to your blogger dashboard
      • Click on "Design" > "Page Elements" > "Add a Gadget"
      • Choose "HTML/JavaScript" from the list of options
      • Copy and paste the code below in the content box.
      <div id='rb_share_ex'>
      <!--Fully Design By Realcombiz.com-->

      <li class='current-cat'><a href="https://www.facebook.com/realcombiz" target="_blank" rel="nofollow">
      <img src="http://2.bp.blogspot.com/-p-dbWUgh9hE/T96dA5c8OGI/AAAAAAAABWU/K_V8qSZODck/s1600/icon1.png" width="100" height="100" border="0" />
      </a>
      <a href="https://twitter.com/realcombiz" target="_blank" rel="nofollow" >
      <img src="http://1.bp.blogspot.com/-UjF9lnWlPTM/T96c_H0UWRI/AAAAAAAABWM/A_Do488S8Ik/s1600/f.png" width="100" height="100" border="0" /></a></li>

      <li>
      <a href="https://plus.google.com/117896762172961615212/posts" target="_blank" rel="nofollow">
      <img src="http://2.bp.blogspot.com/-40ET7V5mapg/T96dEX18jqI/AAAAAAAABWk/Wr0GCw0aW8Q/s1600/icon9.png" width="100" height="100" border="0" />
      </a>

      <a href="http://www.youtube.com/user/realcombiz/videos" target="_blank" rel="nofollow">
      <img src="http://4.bp.blogspot.com/-B8hYQk6Lkw4/T96dCTtuGRI/AAAAAAAABWc/2kbvyVYI-II/s1600/icon8.png" width="100" height="100" border="0" />
      </a>

      </li>
      </div>
      • To change the height and width of your icon, simply edit all occurrence of 100
      • Replace https://www.facebook.com/realcombiz with your facebook page url
      • Replace https://twitter.com/realcombiz with your twitter profile url
      • Replace https://plus.google.com/117896762172961615212/posts with your google plus profile url
      • Replace http://www.youtube.com/user/realcombiz/videos with your youtube profile url.
      • Click "Save". That's all.
      Hope you like this beautiful icons? if so, tell us what you like about it and share it with friends/followers.
        Read more→

        Add a Simple Stylish Subcription Box To Blogger Blog

        Today tutorial is about how to add a simple subscription box to your blogger blog, in my previous post, i have drop a lot of tutorials on how to add a different customize subscription box to blog. One thing that i like about this widget was that, it look so simple, and you can implement it anywhere on your blog. Follow the few steps below on how to add the widget to your blog.


        How To Add The Widget To Your Blog
        • Go to your blogger dashboard
        • Click on "Design" > "Page Elements" > "Add a Gadget"
        • Choose "HTML/JavaScript" from the list of the gadgets
        • Copy and paste the code below in the content box
        <style>
        .rb-email{
        background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
        width:300px;
        padding:10px 0 0 55px;
        float:left;
        font-size:1.4em;
        font-weight:bold;
        margin:0 0 10px 0;
        color:#686B6C;
        }

        .rb-emailsubmit{
        background:#9B9895;
        cursor:pointer;
        color:#fff;
        border:none;
        padding:3px;
        text-shadow:0 -1px 1px rgba(0,0,0,0.25);
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        font:12px sans-serif;
        }
        .rb-emailsubmit:hover{
        background:#E98313;
        }
        .textarea{
        padding:2px;
        margin:6px 2px 6px 2px;
        background:#f9f9f9;
        border:1px solid #ccc;
        resize:none;
        box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
        -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
        -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; 
        width:170px;
        color:#666;}

        </style>

        <div class="rb-email">
        Subscribe via Email
        <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here...&quot;;}" onfocus="if (this.value == &quot;Enter email address here...&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
        <input type="hidden" value="Realcombiz" name="uri"/><input type="hidden" name="loc" value="en_US"/>
        <input class="rb-emailsubmit" value="Submit" type="submit" />
        </form>
        </div>
        • To change your subscription header, edit Subscribe via Email
        • Replace Realcombiz with your feed title/username
        • Click "SAVE TEMPLATE"
        You might also be interested in this articles

        Do you enjoy this article? Share it with friends/followers and subscribe to this blog now, for you to stay updated with our latest post. comments is highly welcome.
        Read more→

        Add Customize Subscription Box With Facebook Like And Send Button To Blogger Blog

        Am sharing with you again another cool subscription box which comprises of facebook like and send button, and social sharing buttons. In my previous post, i discuss on how to add a stylish subscription box which is very similar to this. This widget will appear at the bottom of your every post, and i have design it to the perfect taste so that it wouldn't affect your blog loading time. To add this subscription box to your blog, simply follow the few steps below.



        How To Add This Widget To Your Blog
        • Go to your blogger dashboard
        • Click on "Design" > "Edit HTML" > Back up your template
        • Mark/Tick "Expand Widget Templates"
        • Use ctrl F to find the code below
        <data:post.body/>
        • Paste the following code below the code above
        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <style>
        form.emailform{
        margin:20px 0 0;
        display:block;
        clear:both;
        }
        .rbtext{
        background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
        padding:7px 15px 7px 35px;
        color:#666;
        font-weight:bold;
        text-decoration:none;
        border:1px solid #D3D3D3;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -moz-box-shadow: 1px 1px 2px #CCC inset;
        -webkit-box-shadow: 1px 1px 2px #CCC inset;
        box-shadow: 1px 1px 2px #CCC inset;
        }
        .rbbutton{
        color:#666;
        font-weight:bold;
        text-decoration:none;
        padding:6px 15px;
        border:1px solid #D3D3D3;
        cursor: pointer;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -goog-ms-border-radius: 4px;
        border-radius: 4px;
        background: #fbfbfb;
        background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
        background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
        background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        }

        #doulike-outer {
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        -goog-ms-border-radius: 10px 10px 10px 10px;
        border-radius: 10px;
        background: none repeat scroll 0 0 transparent;
        border: 1px solid #D3D3D3;
        padding: 8px;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        width:480px;
        }
        #doulike-outer:hover{
        background: none repeat scroll 0 0 #FFF;
        -moz-box-shadow: 1px 1px 2px #CCC inset;
        -webkit-box-shadow: 1px 1px 2px #CCC inset;
        box-shadow: 1px 1px 2px #CCC inset;
        }
        #doulike-outer td{
        padding:3px 0;
        }
        </style>

        <div id='doulike-outer'>
        <div id='doulike'>
        <table width='100%'>
        <tbody>
        <span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Hope You Enjoy This Article..?</span>
        <tr>
        <td>

        <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>

        </td>

        </tr>

        <tr>

        <td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Subscribe To Get Free Email Updates!</p>
        <form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=realcombiz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
        <input name='uri' type='hidden' value='realcombiz'/>
        <input name='loc' type='hidden' value='en_US'/>
        <input class='rbtext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>

        <input alt='' class='rbbutton' title='' type='submit' value='Submit'/>
        </form>
        </td>


        <td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
        <a href='http://feeds.feedburner.com/realcombiz' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaXDrh48I/AAAAAAAAAVM/zLmcNtCgi9Y/s40/w2bRSS+.png'/></a>

        <a href='http://twitter.com/realcombiz' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaUf7v0CI/AAAAAAAAAU8/7vfe8Iw3ohc/s40/w2bTwitter.png'/></a>

        <a href='http://www.facebook.com/realcombiz' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaWNBkZnI/AAAAAAAAAVE/nZ0byXaqur8/s40/w2bFaceBook.png'/></a>
        </td>

        </tr>

        </tbody></table></div></div>
        </b:if> 
        • You can edit Hope You Enjoy This Article..?, Subscribe To Get Free Email Updates!, and Follow us! to your desired text.
        • To change the colour of "Hope You Enjoy This Article..?" edit #FF683F, with your own desired hex colour. check here for 100's of hex colour.
        • Replace http://feedburner.google.com/fb/a/mailverify?uri=realcombiz with your feedburner link or realcombiz with your feed title.
        • Replace realcombiz with your feed title, and the one at the back of http://feeds.feedburner.com/realcombiz
        • Replace http://twitter.com/realcombiz with your twitter profile url.
        • Replace http://facebook.com/realcombiz with your facebook profile url.
        • Click "SAVE TEMPLATE" when your are done with your editing.
        Click on any of your post to see the awesome subscription box below your each post.
        Hope you find this article useful? if so, take few seconds to share it, and drop your comment if you have anything to say or ask. Thanks
        Read more→

        How To Add Link/Url To Image In Blogger Blog

        Have you been looking for a way to add link to your image, so that when visitors click on your image, they will be redirect to another page/website? If that's the case, then this tutorial should solve your problem.
        It is good for every bloggers to know how to add link to image, because there would be some cases whereby you will like to show a demo of your content to your readers, which you may need to provide a demo image button instead of using a text, or you may need to link to another site with a image. So for you to add link to your image, simply follow the few steps below.





        I will be using the image above to sight an example, and by default if you click on the image above, you can only view the image.

        How To Add Url To Image

        Whenever you want to insert a link to image, always switch to Edit HTML mode in your post editor, after you have upload your image, as shown in the image below


        When you are in compose mode, you will see the image, but immediately you switch to Edit HTML mode, you will only see the image html code.
        This is the html code for the first image above

        <div class="separator" style="clear: both; text-align: center;">
        <a href="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s1600/Add+link+to+image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s320/Add+link+to+image.jpg" width="320" /></a></div>

        In your image html code, there will be two link in the image code, and the different between the two url is href=" and src=", but we are only concern with the one starting with href=" format as shown in the image above.

        This is the code we are concerned about

        href="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s1600/Add+link+to+image.jpg"

        Now let me use this blog url to give an example, if i want to insert this blog url to the image above the result we look as follow.

        <div class="separator" style="clear: both; text-align: center;">
        <a href="http://www.realcombiz.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s320/Add+link+to+image.jpg" width="320" /></a></div>

        If you click on the image below, you will be redirected to this blog homepage.



        How To Open Your Link In New Tab

        If you want your link to open in a new tab, probably you are linking to another site and you don't want your readers to leave your site, this is what you need to do, just add target="_blank" after your link address.

        The final result should look as follow

        <div class="separator" style="clear: both; text-align: center;">
        <a href="http://www.realcombiz.com/" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://1.bp.blogspot.com/-cViMSNMPYZo/T-NEOOKkVXI/AAAAAAAAAbg/bRhecfWqGEU/s320/Add+link+to+image.jpg" width="320" /></a></div>

        If you click on the image below, this blog homepage will open in a new tab


        That's all on how to add link/url to image. you may also be interested in how to tag image for better search ranking.
        Hope you find this article useful? Use the comment box if have anything to say or ask, and don't forget to subscribe to this blog, for you to get our latest articles directly into your email, and check your email to confirm your request. BLESS
        Read more→

        Add Facebook, Twitter, Google + Button And Facebook Like Box To Blog

        In this tutorial, i will sharing with you, how to add a stylish and customize widget which comprises of a facebook like button, twitter follower button, google + button, and facebook like box. This widgets will help you to get a lot of subscribers to your blog due to the eye-catching customization, and remember that, the more your subscribers the more your chances of ranking high in search engine, and your subscribers will be updated with your latest post directly into their email. For you to add this widget to your blog simply follow the few steps below.

        facebook twitter google and subscription box




        How To Add Google Plus Script To Template

        The first step is, adding google plus script to your template, but if you have already add it, then ignore this stage.
        • Go to your blogger dashboard
        • Click on "Design" > "Edit HTML" > Back up your template
        • Mark/Tick "Expand Widget Templates"
        • Use ctrl F to find </head> and paste the following code before/above </head> 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/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
          })();
        </script>
        • Click "SAVE TEMAPLATE"
        How To Add The Widget To Blog
        • Go to your blogger dashboard
        • Click on "Design" > "Page Elements" > "Add a Gadget"
        • Choose "HTML/JavaScript" from the list of the gadgets
        • Copy and paste the code below in the content box provided
        <style type="text/css">
        /* RB Style sheet for subscription box */
        #rb-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
            #rb-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
            #rb-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
            #rb-subscribe-box .email-box {background:#e3edf4; padding:11px;}
                #rb-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
                #rb-subscribe-box .email-box .txt,#rb-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
                #rb-subscribe-box .email-box .btn,#rb-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;}
                    #rb-subscribe-box .email-box .btn:hover{background:#FF9b00;}
        input, textarea {
        font-family: Georgia, "Times New Roman", Times; font-size: 1em;}

        #rb-text {

        border: 4px solid #C8e993;
        box-shadow: 0 0 5px
        #EEE;
        line-height: 10px;
        margin: 10px 10px 15px 0;
        padding: 10px;
        width:300px;
        }
        #rb-text h3 {
        color:white;
        border-bottom: 1px dotted
        white;
        line-height:1.385em;
        font-size: 18px;
        padding: 0;
        margin: 0 0 10px;
        border-bottom: 1px dotted
        #AAA;
        font-wieght: bold;
        text-transform: uppercase;
        letter-spacing: 0;
        }
        </style>
        <div class="rb_widget">
        <div id="rb-text">
        <div id="rb-subscribe-box">
        <div class="email-box">
        <h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=realcombiz" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/realcombiz" target="_blank">RSS</a></h4>
        <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=realcombiz', 'popupwindow',
        'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
        <input name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address&#39;;}" onfocus="if (this.value == &#39;Enter your email address&#39;)
        {this.value = &#39;&#39;;}" value="Enter your email address" class="txt" />
        <input type="hidden" name="uri" value="realcombiz" />
        <input type="hidden" value="en_US" name="loc" />
        <input type="submit" value="Subscribe" class="btn" />
        <div style="clear:both;"></div>
        </form>
            </div>
            <div class="fb-like-box">
              <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Frealcombiz&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/realcombiz" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
            </div>
            <div class="gplusone">
        <div style="float:left;width:90px;">
        <g:plusone href="http://www.realcombiz.com"></g:plusone>
        </div>
        <a href="https://plus.google.com/u/0/117896762172961615212" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div>   
            </div>
            <div class="twitter-follow">
          <a href="https://twitter.com/realcombiz" class="twitter-follow-button">Follow @realcombiz </a>
        <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> <br/>
        <div >
        <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Frealcombiz&amp;width=297&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:297px; height:258px;" allowTransparency="true"></iframe>
        </div>
        </div>
        </div></div>
        • Replace realcombiz with your feedburner feed username
        • Replace realcombiz with your facebook fan page username
        • Replace https://plus.google.com/u/0/117896762172961615212 with your google plus profile url
        • Replace realcombiz with your twitter username
        • Replace http://www.realcombiz.com with your blog/site url
        • Click "SAVE TEMPLATE" when you are done with your editing.
        Hope you like this widget? If so, take few seconds to share it and don't forget to subscribe to this blog now, for you to receive our latest post directly into your email, but you need to confirm your subscription in your email.
        Please your opinion is highly needed, which widget can you recommend for us between this widget and the current one on our blog? share your suggestion using the comment box below.
        Read more→

        Add Awesome Feedburner Email Subscription Box Below Your Post

        Today, i am sharing with you another great subscription box, this attractive widget may force your readers to subscribe to your blog which will definitely increases your feeds subscribers. This widget will appear at the bottom of your every post, and to add this to your blog, simply follow the few steps below.

        add awesome subscription box below post

        How To Add The Subscription Box
        • Go to your blogger dashboard
        • Click on "Design" > "Edit HTML" > Back up your template
        • Mark/Tick "Expand Widget Templates"
        • Use ctrl F to find the code below
        <data:post.body/>

        Paste the following code immediately after/below the code above.



        <style>
        #RB-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
        solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}


        #RB-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}


        #RB-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}


        #RB-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}


        #RB-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}


        #RB-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
        </style>


        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div id='RB-box'><h1>Subscribe To Get Free Posts Update!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='Realcombiz'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
        </b:if>
        • Replace http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz with your feedburner feed url
        • Replace Realcombiz with your feed title
        • You can change Subscribe To Get Free Posts Update to your desired subscription box header
        • Click "SAVE TEMPLATE"
        That's all, check one of your posts to see the attractive subscription box below your post, and will you recommend this subscription box for this blog?.

        In my future post i will be dropping a lot of stylish subscription box to spice up your blog, and for you not to miss any of this tutorials, simply subscribe to this blog and receive our daily post update directly into your email but remember to confirm your subscription in your email.
        Read more→

        Add Stylish Subscription Box With Share Buttons Below Post

        Adding subscription box below your each post is another best way of increasing your blog subscribers. This widget comprises of a subscription box, RSS link, twitter link, facebook link, and google + link. It will appear at the bottom of your post and this is one of the best way to get your readers attention.



        How To Add The Subscription Box
        • Go to your blogger dashboard
        • Click on "Design" > "Edit HTML" > Back up your template
        • Mark/Tick "Expand Widget Templates"
        • Use crtl F to find the code below
        <data:post.body/>

        Now paste the code below immediately after the code above

        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style>
        form.feedburner{
        margin:20px 0 0;
        display:block;
        clear:both;
        }
        .RBstyle{
        background:url(http://3.bp.blogspot.com/-pl1ECUAcVEQ/T4YS7ZgR_uI/AAAAAAAAB_k/R92yDhiO65Q/s400/email_icon.png) no-repeat scroll 4px center transparent;
        padding:7px 15px 7px 35px;
        color:#666;
        font-weight:bold;
        text-decoration:none;
        border:1px solid #D3D3D3;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -moz-box-shadow: 1px 1px 2px #CCC inset;
        -webkit-box-shadow: 1px 1px 2px #CCC inset;
        box-shadow: 1px 1px 2px #CCC inset;
        }
        .RBsubmit{
        color:#666;
        font-weight:bold;
        text-decoration:none;
        padding:6px 15px;
        border:1px solid #D3D3D3;
        cursor: pointer;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -goog-ms-border-radius: 4px;
        border-radius: 4px;
        background: #fbfbfb;
        background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
        background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
        background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
        }

        #emailwidget-outer {
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        -goog-ms-border-radius: 10px 10px 10px 10px;
        border-radius: 10px;
        background: none repeat scroll 0 0 transparent;
        border: 1px solid #D3D3D3;
        padding: 8px;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        width:480px;
        }
        #emailwidget-outer:hover{
        background: none repeat scroll 0 0 #FFF;
        -moz-box-shadow: 1px 1px 2px #CCC inset;
        -webkit-box-shadow: 1px 1px 2px #CCC inset;
        box-shadow: 1px 1px 2px #CCC inset;
        }
        #emailwidget-outer td{
        padding:3px 0;
        }
        </style>

        <center>
        <div id='emailwidget-outer'>
        <div id='emailwidget'>
        <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
        <tbody>

        <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

        <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
        <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
        <input name='uri' type='hidden' value='Realcombiz'/>
        <input name='loc' type='hidden' value='en_US'/>
        <input class='RBstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

        <input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>
        </form>
        </td>

        <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
        <a href='http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30×43.png'/></a>

        <a href='http://twitter.com/Realcombiz' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30×43.png'/></a>

        <a href='http://www.facebook.com/Realcombiz' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30×43.png'/></a>

        <a href='https://plus.google.com/u/0/117896762172961615212/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30×43.png'/></a>

        </td>
        </tr>
        </tbody></table>
        <div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.realcombiz.com/2012/06/add-stylish-subsription-box-with-share.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
        </div></div>
        </center>
        </b:if>
        • Replace http://feedburner.google.com/fb/a/mailverify?uri=Realcombiz with your your feedburner url
        • Replace http://twitter.com/Realcombiz with your twitter profile url
        • Replace http://www.facebook.com/Realcombiz with your facebook page url
        • Replace https://plus.google.com/u/0/117896762172961615212/ with your google + profile url
        • Click "SAVE TEMPLATE"
        Hope you love this eye-catching subscription box? share your view about this. Don't forget to subscribe and share this post.
        Read more→

        Optimize Blog Post Title With H2 Tag For Better SEO

        By default all blogger template is design in a way that H1 tag is given to homepage title, H2 is for blog description or date header, sidebar header, H3 is for post title. Heading tags range from H1 to H6 in descending order of importance.
        Headlines, bolded and highlighted text are first taken into consideration by search engines. Blog title is the most important part of a blog which is assigned with H1 tag, followed by post title, but assigned with H3 tag which it should be given H2 tag, because your post title is what that drag the attention of your readers even in search engine listing. So if you want to tell the search robots how important is your post title and if you want better placement for your blog in search engine listing, you will have to change to post title tag from H3 to H2. follow the instructions below on how to change your post title tag.

        How To Change Your Post Title Headings
        • Log-in to your blogger dashboard
        • Click on "Design" > "Edit HTML" > Back up your template
        • Mark/Tick "Expand Widget Templates"
        • Use ctrl F to find the following code
        <h3><data:title/></h3>

        Replace it with the code below

        <h2><data:title/></h2>

        But if you can't find the first code, then find and replace all occurrence of <h3 with <h2, and all occurrence of </h3> with </h2>.
        • Now find h3.post-title
        • Replace all it's occurrence with h2.post-title
        • Click "SAVE TEMPLATE" and you are done
        After this trick, you will see a great changes in your blog traffic. If you enjoyed this post, take few seconds to share it and don't forget to subscribe to this blog and receive our latest update directly into your email. BLESS
        Read more→

        How to Install/Setup Google Analytics On Blogger Blog

        Google analytic is a free service that show a blog/site activities/statistics, it will analyze your site statistics like pageviews, visits, bounce rate, where visitors come from and how they interact with your blog.
        It also provide information on your traffic sources, the keyword they use to find your site, content e.t.c. The setup involve in google analytic is very easy and straight foreword, all you have to do is to follow the instruction carefully.

        How To Get A Tracking ID

        Before anything can be done, you will need a google analytics tracking id, so let's get started on how to get that.
        • Go to www.google.com/analytics
        • Login to your google account
        • Click "Sign up" button
        • In the next page, fill in your necessary details
        • Read there terms and services and mark/tick the confirmation box, to confirm your request
        • In the next page, that's where you find your tracking id, your id will look like the id highlighted in the image below.

        • Copy your id number and let's move on.
        How To Implement The ID On Your Blog
        • Log-in to your blogger dashboard
        • Click on "Settings" > "Basic" (For old blogger interface), "Other" (For new interface).
        • Enter your ID number in the Google analytics text box as shown below


        • Click on "SAVE SETTINGS"
        Now the next step for you now is to add tracking code to your template.
        • Go to "Design" > "Edit HTML"
        • Use ctrl F to find </body>, check above it, if you find the following code above it or something very similar to it including the word google analytics, then you don't need to add any code, just skip this stage.
        <b:include name='google-analytics' data='blog'/>

        It's built-in by blogger template such as dynamic and layout template, but if you are using a third party template, you might need to add the code if you don't find it, add the above code above the </body> tag
        • Click "SAVE TEMPLATES"
        That's all, and note that this does not take effect immediately, you have to wait for a minimum of 24hours before you can start seeing your site statistics.

        Do you know that you can receive all our latest update directly into your email? To enable this simply subscribe to this blog, and share.
        Read more→

        Add Meta Tags (Descriptions & Keywords) To Blogger Blog For Better SEO

        meta tags for descriptions keywords
        Adding meta tags to your blog is another great way of increasing your search engines ranking. In this tutorial am about to share with you, i will be discussing with you the best way you can add meta tags to your blog without meta duplication.
        Meta tags are HTML tag that provide information about a blog. The meta description give a short summary of what your blog is all about to the search engine for proper indexing. In keyword meta tag, you must provide a keyword phrase relevant to your blog content. Usually blogger template is not well optimize with keyword and description, which will greatly affect your search engine ranking.
        The problem about meta tags in blogger template was that, every articles you have writing so far will share the same code snippet, which search engine like google will consider as duplication of meta tags, so for you to avoid this, simply follow the few steps below.

        How To Add Meta Tags To Your Blogger Template

        The procedure below will apply your meta keywords to pages and apply your meta description to homepage only.
        • Log-in to your blogger dashboard
        • Click on "Design" > "Edit HTML" > back up your template
        • Mark/Tick "Expand Widget Templates"
        • Use ctrl F to find the following code
        <b:include data='blog' name='all-head-content'/>

        Copy and paste the following code below the code above.

        <meta content='PUT KEYWORDS HERE SEPARATED BY COMMAS' name='keywords'/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <meta content='PUT DESCRIPTIONS HERE SEPARATED BY COMMAS' name='description'/>
        </b:if>
        • Replace PUT KEYWORDS HERE SEPARATED WITH COMMAS with keywords related to your blog content
        • Replace PUT DESCRIPTIONS HERE SEPARATED WITH COMMAS with you blog description.
        Example : I will be using this blog as an example, and after replacement, your final result should look like the example below.

        <b:include data='blog' name='all-head-content'/>
        <meta content='Blogger tips,SEO,Adsense,Tutorials,Tricks' name='keywords'/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <meta content='Learn Blogging Tips and Tricks' name='description'/>
        </b:if>
        • Click "SAVE TEMPLATE" when you are done with your editing.
        Note : To avoid any error, take this into consideration.
        • Make sure your title tag do not exceed 60 characters
        • Meta descriptions - 150 maximum characters
        • Meta keywords - 200 maximum characters
        How To Confirm Your Meta Tags

        You can use the following online meta tags analyzer to confirm the different between your post pages url and homepage url.
        1. Seocentro Analyzer
        2. Submitexpress Analyzer
        3. Scrubtheweb Analyzer 
        Hope you enjoyed this post? If so, take few seconds to share it, and don't forget to subscribe to this blog, and check your email to confirm your request.
        Read more→

        Add Google Custom Search Box To Navigtion/Menu Bar For Blogger Blog

        Adding Google custom search box to your blog is another best way of providing a easy navigation to your readers, google custom search engine is more efficient than the default google search box in the sense that, it is capable of displaying relevant result unlike the default search box. This will also increase your pages views and impressions because it will kept your readers with articles related to their search queries.
        Before the google custom search box can work for your blog/site, you will need a google custom search box ID, so let's get started with how to get that.


        How To Get Google Custom Search Engine Id
        • The first step for you is to get your custom search code, for procedure on how to do this, read How to add google search box to blog.
        • After you have got your code, look for your id in the code given to you, we are only interested in the id, your id will look, something very similar to this: 004697161763279382635:f2dccf1y31k, copy the id and let's move on.
        Search Box Code

        The code below is the code for the search box which you will use.

        <!-- Google custom search box Start - Designed by Realcombiz.com -->
        <div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
        <form action='http://www.google.com/cse' id='cse-search-box'>
        <input name='cx' type='hidden' value='partner-pub-004697161763279382635:f2dccf1y31k'/>
        <input type='text' name='q' size='35' />
        <input name='ie' type='hidden' value='ISO-8859-1'/>
        <input type="submit" name="sa" value="Search" />
        </form>
        <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
        </div>
        <!-- Google custom search box End -->
        • If you want your search results to show in a new window, simply add target="_blank" after id='cse-search-box' as highlighted above, but make sure you put space in-between.
        • Replace 004697161763279382635:f2dccf1y31k with the id which you copied from your google cse code in the first step.
         How To Integrate The Search Box
        • Log-in to your blogger dashboard
        • Click on "Design" > "Edit HTML" > back up your template
        • Mark/Tick "Edit Widget Templates"
        • Use ctrl F to find the following code
        <b:loop values='data:links' var='link'>
        • Look above the code, you should see <ul>, if you don't find <ul> above the code above, keep searching by clicking "Next" on your search bar until you see a line where <ul> appear above it.
        • Now paste the search box code After <ul>
        • Click "SAVE TEMPLATE"
        Check your blog to see your google custom search box (CSE) working perfectly well.
        You might be interested in reading this:
        Hope you enjoy this post? If so take few seconds to share it, and don't forget to subscribe to this blog and receive our latest post directly into your email.
        Read more→

        Add And Display Google Custom Search Results On A Page

        google custom search for making money
        This tutorial am about to share with you is only applicable to the google custom search box, and not the one you added via layout/page elements. google custom search engine is another way of creating an easy navigation for your readers. A question was ask by one of my readers that, is it possible to show search result on a page? But am telling you it is possible with this tutorial. To see the demo of this search box and how it works, look at the top right hand corner of this site and insert a query in the search box to see what we are talking about.
        Before proceeding we assume you must have read how to create a google custom search box, after that, the first step for you is to create a search results page

        How To Create A Search Results Page
        • Log-in to your blogger dashboard (using the new blogger interface) to avoid confusion.
        • Go to "Pages" > "New page" > "Blank Page"
        • Enter Search Results as your page title and leave the content box blank.
        • Click "Publish", view your page and copy the url from your browser address and save it in a notepad.
        How To Get Google Custom Search code
        • Go to http://www.google.com/cse/manage/all
        • Click on "control panel" next to your search engine title.
        • Click "Look and feel" link from the list of options at the left hand side.
        • Choose "Two page" from the layout options as shown below
        • For more customization, click "Customize", if you don want to use the New! Default style, you can choose from the varieties of options.
        • Click "Save & Get Code..."
        • Enter your search result page url which you copied in the first step, into where you are ask to "Specify search results details" as shown below.
        • Click "Save Changes" after you have filled the two space.
        You will be given two code in different box as shown below, now let's move to procedure in applying the codes.


        How To Apply Code 1
        • Open new window and go to your blogger dashboard
        • Click on "Design" > "Page elements" > "Add a Gadget"
        • Choose "HTML/JavaScript" from the list, copy and paste the "CODE 1" in the content box.
        • Click "Save", and position your search box to your desired location.
        How To Apply Code 2
        • Now go to your search result page inside your pages editor, to edit it.
        • Switch to "HTML" mode, copy and paste "CODE 2" in the html box
        • Click "Publish", check your blog to see your google cse working perfectly well
        Hope you enjoyed this post? If so, take few seconds to share it, and don't forget to subscribe to this blog now, and receive our latest/hot post directly into your email, even if you are offline.
        Read more→

        About Me

        My Photo
        Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

        Recent Posts

        Let's Connect

        Site Links

        Copyright © 2014 RealcomBiz. All Rights Reserved.
        Powered by Blogger