Find Related Stuff from Blogger tricks Category. | New Tricks: Use Multiple Comment Box in Blogger Blog | Moderate Facebook Comment using Evolved Wordpress Pluging

jQuery Expand/Collapse Subscription slider Panel For Blogger.

Subscription slider Panel

After a long time i am coming with another unique blogger tricks. Many time ago i had shared blogger widgets called Mashable Subscribe Us Widget. This tutorial is also related with the subscription facility only. This Jquery panel having a embedded facility of Facebook like box, email subscription facility and the google plus page following widgets. This will appear at top header of your blog and also going to replace existing default blogger navigation bar.

jQuery Expand/Collapse Subscription slider Panel For Blogger.

There are many free source of cording, plugins, jQuery and JavaScript available on internet free of cost. But the problem raised when we want to modify coding for blogger platform, Here for this tutorial all the credits of script are in fever of http://web-kreation.com on this site This plugins are develop for login and register facility and i had modified it to subscription facilities like Facebook like box, email subscription facility and the last Google Plus page. 
So lets begins the tutorial.
Step 1: Log in blogger account.
Step 2: Backup your template: (Read More : How to backup your blogger template ?)  
Step 3: Navigate Blogger dashboard > Template > Edit HTML >
Step 4: Find Following piece of code.
</head>
Step 5: Just above </head> tag paste following code.
( Remove the first bold script only if you all ready added following jQuery code in your blogger template )
<script src=’http://tipsviablogging.github.io/jquery-1.3.2.min.js’ type=’text/javascript’/>

<script src=’http://tipsviablogging.github.io/slide.js’ type=’text/javascript’/>

Step 6: Next find following code.
<body>
Step 7: just below <body> tag, paste following code.

        <div id=’toppanel’>
<div id=’panel’>
<div id=’topsubcribe’>
<div class=’content’>
<div class=’left’>
<iframe allowTransparency=’true’ frameborder=’0′ scrolling=’no’ src=’//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftipsviablogging&amp;width=288&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=235062743293379′ style=’border:none; overflow:hidden; width:288px; height:258px;’>
</iframe>
</div>
<div class=’left’>
<!– Login Form –>
<form action=’http://feedburner.google.com/fb/a/mailverify’ class=’clearfix’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tipsviablogging&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>
<h1>
Subscribe Free Email Update
</h1>
<label class=’grey’ for=’log’>
Name:
</label>
<input class=’field’ id=’log’ name=’log’ size=’23′ type=’text’ value=”/>
<label class=’grey’ for=’pwd’>
Email:
</label>
<input class=’field’ name=’email’ size=’23′ type=’text’/>
<input name=’uri’ type=’hidden’ value=’tipsviablogging‘/>
<br/>
(No spam, we promise)
<div class=’clear’/>
<input class=’bt_login’ name=’submit’ type=’submit’ value=’Join’/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
</form>
</div>
<div class=’left right’>
<!– Register Form –>
<div class=’g-plus’ data-action=’followers’ data-height=’258′ data-href=’https://plus.google.com/108949096200367463694‘ data-source=’blogger:blog:followers’ data-width=’320′>
</div>
<script type=’text/javascript’>
(function() {
window.___gcfg = {&#39;lang&#39;: &#39;en&#39;};
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
})(); </script>
</div>
</div>
</div>
</div>
<!– /login –>
<!– The tab on top –>
<div class=’tab’>
<div id=’topsubcribe’>
<ul class=’login’>
<li class=’left’/>
<li>
Hello Guest!
</li>
<li class=’sep’>
|
</li>
<li id=’toggle’>
<a class=’open’ href=’#’ id=’open’>
Subscribe Us
</a>
<a class=’close’ href=’#’ id=’close’ style=’display: none;’>
Close Panel
</a>
</li>
<li class=’right’/>
</ul>
</div>
</div>
<!– / top –>
</div>
Customizing Code:
  • Replace Blue highlighted text “tipsviablogging” with your facebook page id.
  • Replace Orange highlighted text “tipsviablogging” with your rss feed id.
  • Replace Grin highlighted text “108949096200367463694” with your Google Plus feed id.
Note : If you find that Facebook like box is not appearing in that situation your template missing Javascript in your template for that you have to insert it just below <body> tag. So copy and paste below code under <body> tag.

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

Conclusion:

 

At the and of this tutorial, i would like to thanks to the web-kreation.com who provided the script code free on their website. by this blogger widget we will be able to provide more space for advertisement on blog, as Facebook, email and google plus follower widget will appear in top navbar. There is simple calculation that more attractive is your subscribe us widget will lead to more social subscriber for your blogger blog. So this is all from my side, i am waiting for your comment, suggestions, feedback and anything that you would love to share. (^-^).

Umesh Tarsariya

Hi there, I am Author and Founder of this blog. I am blogging because I love it, their is not as such other reasons are their. I strongly believes that "Self Learning is a great Practice to learn". I am passionate about blogging and I love to be beginner all the time in blogging. Its force me to learn more and more about it and serve you the sweet prepared foods. :P

You may also like...

  • http://www.blogger.com/profile/04725517343881007725 MOHAMED TAHSEEN

    wow it’s very nice thanxxxx so much

    regards from http://waseeela.blogspot.com/

  • http://www.blogger.com/profile/17216226947800792942 Kaustav Banerjee

    Nice. Good concept and fantastic results

  • http://www.blogger.com/profile/17216226947800792942 Kaustav Banerjee

    Check out some jquery works by me at http://www.a100websolutions.in

    • http://www.blogger.com/profile/16807879922776229737 Umesh Tarsariya

      first of all i would like to appreciate your blog. It is really awesome. Thanks for being here and comment. ^-^

  • http://www.blogger.com/profile/12601274781388411001 Rizwan Saharan

    nice bro thanks for sharing

    • http://www.blogger.com/profile/16807879922776229737 Umesh Tarsariya

      thanks rizwan for being again here, stay tuned…

  • http://www.blogger.com/profile/08956633778932654222 sunny amaresh

    Nice and i will try this in my blog

    http://www.simpletechie.blogspot.com

  • http://www.blogger.com/profile/08835565960718424258 Mohammad Fazle Rabbi

    Bro I was looking this widget. I found it in Ivy templates premium theme where code was undisclosed. Thanks for sharing. Hopefully I will make something new by improving this code.

  • http://www.blogger.com/profile/15393430571002650744 Awais Ahmed

    Really great work this type of Subscription Slider hard to find thanks for sharing… Would you mind tell me how to show this sliding from down side

  • http://www.blogger.com/profile/15157417890757330863 Adrian Lucernas

    amazing widget bro..thanks for sharing…

    Regards,
    http://www.bloggerheroe.com

  • http://www.blogger.com/profile/15145994009858029709 Tanvir Bhatti

    Thanks Working ipadl4u.blogspot.com

  • http://www.blogger.com/profile/11994560915085463285 lovefortechnology

    very nice post, but to me it does not work facebook

    see the demo page:

    http://tets1.blogspot.gr/#

    • http://www.blogger.com/profile/16807879922776229737 Umesh Tarsariya

      i had just updated note just after last step follow it, you will find your widget start appearing, if you still finding that fb like box is not appearing than check your existing fb page id , whether it is correct one or not..

  • http://www.blogger.com/profile/11994560915085463285 lovefortechnology

    I tried, but still does not work (it works only with your own names on facebook (tipsviablogging), never mind I will use without the frame of facebook

    thank you

    • http://www.blogger.com/profile/16807879922776229737 Umesh Tarsariya

      have you a facebook page, don’t add your own facebook profile name, just create a facebook page with some name like “lovefortechnology” etc.. and update it.

      this frame is work only for facebook page not for facebook profile…

  • http://www.ganeeninternet.com/wp-login.php?action=lostpassword como gano dinero|como|gano|plata en internet|como obtener|cuenta estados unidos|estados unidos|dinero en internet|gana en internet|ganaeninternet|ganar con payonner|gane en internet|gane internet|ganar dolares|ganar en internet|ganar euros|ganar plata en

    Heya i’m for the primary time here. I found this board and I find It really useful & it helped me out much. I am hoping to give one thing back and help others like you helped me.