New Multi Tabbed Widgets For Blogger BlogSpot Blogs

One of the space efficient widget for blogs, is of course a multi-tabbed widget, which is almost a must for any blog. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.

Although you can find some other methods on Internet, but they are all quite confusing, so you can use this method, which is quite easy, but of course needs to tweak the template.

The complete process has mainly two steps:

UPDATE:  I updated some of my posts, this post I update Add Multi Tabbed Navigation Widget To Blogger / Blogspot Blogs Sidebar........

STEP 1


Log in to Blogger. Now go to Layout and then click on "Edit HTML" tab.
Then download the present template as a backup.
Now find [CTRL+F] this code:

</head>



Then immediately ABOVE / BEFORE it, paste this code:


<!--NEW-MUTITABBED-STARTS--><link href=http://dsai.588.googlepages.com/tabcontent.css rel=stylesheet type=text/css/>
<script src=http://dsai.588.googlepages.com/tabcontent.js type=text/javascript>
/***********************************************
* Tab Content script v2.2- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script><!--NEW-MUTITABBED-STOPS-->


Now click Save Template, and

Click on "Page Elements" tab.


Then click on "Add a Gadget", and select it as "HTML/JavaScript" type.

In the new widget, paste any of the 3 codes displayed below (the screen-shots are displayed above the codes, and demo link has already been given above ):

Code Here:


<h3>Demo #1- Basic implementation</h3>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<p><a href="javascript:countries.cycleit(prev)" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit(next)" style="margin-left: 25px; text-decoration:none">Forward</a></p>


Code Here:


<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3>

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

<p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>
<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p>

With Auto-scrolling tabs...


Code Here:


<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: mypets.expandit(myfavorite)">Click here to select tab with id="myfavorite"</a></b></p>
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>


<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>




Now click Save

Read More..

Multi Level Drop Down Menu In Blogger BlogSpot Blogs

UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........

Log in to blogger, go to "Layout", click on "Edit HTML" tab.
Now find (CTRL+F) this in the template:

</head>

Immediately BEFORE it, place this code:

<link rel="stylesheet" type="text/css" href="http://mydatanest.com/............/slidemenu_hori.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://mydatanest.com/.............../slidemenu_horiz.js"></script>

Now click Save Template 

STEP 2:
Now go to "Page Elements" of  "Layout".
Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bdlab.blogspot.com">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>

Then save this widget. And drag it just above the posts widget.

note: this is not allowed all templates

Read More..

IE Does Not Remember Name and Password Sign into Blogger Blogspot the easy way

Get Auto complete working your way.

For most PCs using Internet Explorer, the Blogger Dashboard (http://www.blogger.com/home?pli=1) will not remember the name and password. Do this if your blogger sign in details are the same as your Gmail account.

Go to the Google/Blogger sign in page:
"https://www.google.com/accounts/Login?service=blogger"

Type in your username usually your email address and password.
Sign in.

You will be taken to a page with all your Google owned sites listed:
"https://www.google.com/accounts/ManageAccount?pli=1".

Note: Blogger is on the list.
No, dont click it yet!

Now right click the mouse and add the Google sign in page to "Favorites"- the "https://www.google.com/accounts/ManageAccount?pli=1" page (see this URL in IE address window).

Click Favorites at the top of IE.
Go down to the end of the Favorites list.
Note that it is there at the bottom as
https://www.google.com/accounts/ManageAccount?pli=1.

Left click on this Favorite and drag it up onto the "Favorites Bar".
Right click and rename it "Blogger Account".


Next time you open Internet Explorer go to the Favorites Bar, click on the "Blogger Account" icon. When the Gmail page opens click on "Blogger" and your into the Blogger account very quick.

Oddly, if you have signed out of your Blogger account (like at Startup) and click the "Blogger Account" icon in the Favorites Bar, the page will now probably open with the normal Blogger sign in page and the autosave name and password feature will be working! Internet Explorer is a very peculiar creature

Another odd thing is that after you have done the above, Slim Browser which works by using the IE system on the computer will load you directly into Blogger using the "http://www.blogger.com/home?pli=1&pli=1" link (note it is a different sign in page) without even asking for a name and password whether you are signed in or out of Blogger (but not IE). It makes you wonder just how many sign in pages Google and Blogger need?

P.S. Make sure "Protected Mode" is ticked in "Restricted sites", "Local intranet", Trusted sites" and Restricted sites" in Security on Internet Options. Otherwise, Blogger could keep opening IE after IE, over and over, because Internet Explorer is weird.

★

Read More..