{"id":5,"date":"2015-11-26T15:49:00","date_gmt":"2015-11-26T15:49:00","guid":{"rendered":"http:\/\/www.heerentanna.com\/2013\/08\/26\/jquery-expandcollapse-subscription-slider-panel-for-blogger\/"},"modified":"2022-12-19T14:53:43","modified_gmt":"2022-12-19T09:23:43","slug":"jquery-expand-collapse-slider-panel","status":"publish","type":"post","link":"https:\/\/www.heerentanna.com\/blog\/jquery-expand-collapse-slider-panel.html","title":{"rendered":"jQuery Expand\/Collapse Subscription slider Panel For Blogger."},"content":{"rendered":"
\n

[dropcap]A[\/dropcap]fter a long time i am coming with another unique blogger tricks. Many time ago i had shared blogger widgets called Mashable Subscribe Us Widget<\/a>. 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.<\/p>\n

<\/p>\n

\"Subscription<\/h3>\n

jQuery Expand\/Collapse Subscription slider Panel For Blogger.<\/h3>\n
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.\u00a0<\/span><\/div>\n
<\/div>\n
So lets begins the tutorial.<\/span><\/div>\n
<\/div>\n
Step 1:<\/b> Log in blogger account.<\/span><\/div>\n
<\/div>\n
Step 2: <\/b>Backup your template: (Read More : How to backup your blogger template ?) \u00a0 <\/span><\/div>\n
<\/div>\n
Step 3:<\/b> Navigate Blogger dashboard<\/b> > Template<\/b> > Edit HTML<\/b> > <\/span><\/div>\n
<\/div>\n
Step 4:<\/b> Find Following piece of code.<\/span><\/div>\n
\n
<\/head><\/span><\/div>\n<\/blockquote>\n
Step 5:<\/b> Just above <\/head> tag paste following code.<\/span><\/div>\n
( <\/span>Remove the first bold script only if you all ready added following jQuery code in your blogger template<\/span><\/span> )<\/span><\/div>\n
\n
<script src=’https:\/\/tipsviablogging.github.io\/jquery-1.3.2.min.js’ type=’text\/javascript’\/><\/b><\/span><\/div>\n<\/blockquote>\n

<script src=’https:\/\/tipsviablogging.github.io\/slide.js’ type=’text\/javascript’\/><\/p>\n<\/div>\n

Step 6:<\/b> Next find following code.<\/span><\/div>\n
\n
<body><\/span><\/div>\n<\/blockquote>\n
Step 7:<\/b> just below <body> tag, paste following code.<\/span><\/div>\n

\n<\/span><\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=’toppanel’>
\n<div id=’panel’>
\n<div id=’topsubcribe’>
\n<div class=’content’>
\n<div class=’left’>
\n<iframe allowTransparency=’true’ frameborder=’0′ scrolling=’no’ src=’\/\/www.facebook.com\/plugins\/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftipsviablogging<\/b><\/span>&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;’>
\n<\/iframe>
\n<\/div>
\n<div class=’left’>
\n<!– Login Form –>
\n<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<\/b><\/span>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>
\n<h1>
\nSubscribe Free Email Update
\n<\/h1>
\n<label class=’grey’ for=’log’>
\nName:
\n<\/label>
\n<input class=’field’ id=’log’ name=’log’ size=’23’ type=’text’ value=”\/>
\n<label class=’grey’ for=’pwd’>
\nEmail:
\n<\/label>
\n<input class=’field’ name=’email’ size=’23’ type=’text’\/>
\n<input name=’uri’ type=’hidden’ value=’tipsviablogging<\/b><\/span>‘\/>
\n<br\/>
\n(No spam, we promise)
\n<div class=’clear’\/>
\n<input class=’bt_login’ name=’submit’ type=’submit’ value=’Join’\/>
\n<input name=’loc’ type=’hidden’ value=’en_US’\/>
\n<\/form>
\n<\/div>
\n<div class=’left right’>
\n<!– Register Form –>
\n<div class=’g-plus’ data-action=’followers’ data-height=’258′ data-href=’https:\/\/plus.google.com\/108949096200367463694<\/b><\/span>‘ data-source=’blogger:blog:followers’ data-width=’320′>
\n<\/div>
\n<script type=’text\/javascript’>
\n(function() {
\nwindow.___gcfg = {&#39;lang&#39;: &#39;en&#39;};
\nvar po = document.createElement(&#39;script&#39;);
\npo.type = &#39;text\/javascript&#39;;
\npo.async = true;
\npo.src = &#39;https:\/\/apis.google.com\/js\/plusone.js&#39;;
\nvar s = document.getElementsByTagName(&#39;script&#39;)[0];
\ns.parentNode.insertBefore(po, s);
\n})(); <\/script>
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/div>
\n<!– \/login –>
\n<!– The tab on top –>
\n<div class=’tab’>
\n<div id=’topsubcribe’>
\n<ul class=’login’>
\n<li class=’left’\/>
\n<li>
\nHello Guest!
\n<\/li>
\n<li class=’sep’>
\n|
\n<\/li>
\n<li id=’toggle’>
\n<a class=’open’ href=’#’ id=’open’>
\nSubscribe Us
\n<\/a>
\n<a class=’close’ href=’#’ id=’close’ style=’display: none;’>
\nClose Panel
\n<\/a>
\n<\/li>
\n<li class=’right’\/>
\n<\/ul>
\n<\/div>
\n<\/div>
\n<!– \/ top –>
\n<\/div><\/span><\/div>\n<\/blockquote>\n
<\/div>\n
Customizing Code:<\/span><\/b><\/div>\n