New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs andrey понедельник, 22 июня 2015 г. No Comment

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:








Then immediately ABOVE / BEFORE it, paste this code:






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:


Demo #1- Basic implementation








Tab content 1 here
Tab content 1 here




Tab content 2 here
Tab content 2 here




Tab content 3 here
Tab content 3 here




Tab content 4 here
Tab content 4 here







Back Click here to select last tab Forward






Code Here:


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













Tab content 1 here
Tab content 1 here




Tab content 2 here
Tab content 2 here




Tab content 3 here
Tab content 3 here




Tab content 4 here
Tab content 4 here











Click here to select 3rd tab


Reload page and select 2nd tab using URL parameter





With Auto-scrolling tabs...


Code Here:


Demo #3- Different Tab Style, "slideshow mode" enabled








Tab content 1 here
Tab content 1 here

Click here to select tab with id="myfavorite"





Tab content 2 here
Tab content 2 here




Tab content 3 here
Tab content 3 here




Tab content 4 here
Tab content 4 here











Now click Save

 

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:








Then immediately ABOVE / BEFORE it, paste this code:






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:


Demo #1- Basic implementation








Tab content 1 here
Tab content 1 here




Tab content 2 here
Tab content 2 here




Tab content 3 here
Tab content 3 here




Tab content 4 here
Tab content 4 here







Back Click here to select last tab Forward






Code Here:


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













Tab content 1 here
Tab content 1 here




Tab content 2 here
Tab content 2 here




Tab content 3 here
Tab content 3 here




Tab content 4 here
Tab content 4 here











Click here to select 3rd tab


Reload page and select 2nd tab using URL parameter





With Auto-scrolling tabs...


Code Here:


Demo #3- Different Tab Style, "slideshow mode" enabled








Tab content 1 here
Tab content 1 here

Click here to select tab with id="myfavorite"





Tab content 2 here
Tab content 2 here




Tab content 3 here
Tab content 3 here




Tab content 4 here
Tab content 4 here











Now click Save

 

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

No Comment