How to hack: Add tabs to your blogger posts


See this post for the final effect, which basically looks like this:

The advantages:

  • You can keep your post length short and still add a lot of content to your posts.
  • The tabs are loaded along with the original article and it wont take anytime (zero time) for the user to switch between any of the pages.
  • Can be applied in 5 mins.
Request: Please dont remove my sitename from the hack.Here is how to do it:

  • Step 1: Go to the Template-->Edit Html---> Click download full template to take a backup of your original template in case anything goes wrong.
  • Step 2: Add this code just before the /head> section of your template:
<script src='http://mp3mohit1.googlepages.com/tabbed.js' type='text/javascript'>
</script>
<link href='http://mp3mohit1.googlepages.com/tabbedstyle.css' rel='stylesheet' type='text/css'/>
  • Step 3: Go to Settings--->Formatting-->Post Template and enter the following:

<div id="cyclelinks"></div>
<p class="dropcontent">
Content 1 here.
</p>
<p class="dropcontent">
Content 2 here.
</p>
<p class="dropcontent">
Content 3 here.
</p>
<div id="cyclelinks2" align="right"></div>

Never touch the div tags. The code is self explanatory. The Content 1,2 and 3 are displayed in Pages 1,2 and 3 respectively.

  • Step 4: Save the template and you are done. Whenever you create a new post you will see the above layout.Just put the contents accordingly. If you dont want any pages in a post, simply delete all the above code from the new post.
  • Step 5: Changing the color of tabs:
Download the js file from: http://mp3mohit1.googlepages.com/tabbed.js and open it in your HTML editor. Find and change the following lines accordingly

var showrecords=1 //specify number of contents to show per tab
var tabhighlightcolor="white" //specify tab color when selected
var taboriginalcolor="lightgrey" //specify default tab color. Should echo your CSS file definition.

After you are satisfied with the changes, save the file and upload it to your location choice. Remember to change the link in Step 2 accordingly.


If you have any doubts, I would be more than happy to help you out. Just drop a comment below or use the contact me form to send a mail to me. I will appreciate it if you dont remove the link to my site, since it is harmless to me and valuable to me.

Source

<span class=

Digg!

32 comments:

Handoko said...

Hi.. I'm Handoko from Indonesia.
I just found your blog from Mybloglog. Its very usefull & interesting blog.

I'm a newbie about this things. There are some questions :
1. In Step 3, in my Post Template Box, I already have this tag :

span class="fullpost


/span

I use it to create "Read More" in my Post. So, what should I do with this? where should I place your code?

2.In Step 5, can u explain more specific to me? What is HTML Editor?
U said :"... and upload it to your location choice." where? I am afraid I will do mistake.
-"...Remember to change the link in Step 2 accordingly" What Link? Which one?

Thats all for now. Sorry to ask u many questions. Hope u dont mind.

Thanks a lot.
Handoko

PS: I've put a link to your blog. would u link back? thanks again.

Basketer said...

Hi handoko, i am glad you are trying to clarify your doubts. here are the answers:

1. For now dont put the code of read more hack and this inside each another. You can keep them like this in the post template:
read more code
body part 1
this code
body part 2

Just dont mix both for now

2.For an html editor just go to google and type html editor and download anyyone you like. It is used for editing your HTML code (in Template-->Edit html), it is just more user friendly.

3. Yeah, if you edited the .js file, you have to upload it to any free uploader where it wont be deleted, try pages.google.com. Then get the link of that file after uploading and replace this line with it:
script src='http://mp3mohit1.googlepages.com/tabbed.js' type='text/javascript'

Hope that clarifies your doubts.

Handoko said...

Yup, I got it now.

But I have to place your code above my Read More code.

So, with this hack basicly the Read More code is no longer needed since they have the same function, except your code is more practical since the readers dont have to go another page.

Now, I learn something New. Its a Great Hack. Thanks a lot, I'm surely will try this for my next post.

Best Regards,
Handoko

Handoko said...

Basketer,

Another question, please.. :)

1. How to create Topics Tab like you have above ( Home, Cricket, Blogger's Resources, Window, Post Map, About, Contact Me )

2. I want to Open my BlogRoll Links in a new window, so my blog will keep open. How to do that?


Thanks again,
handoko

Basketer said...

Hi, I am glad that this hack worked out fine for you

about the labels, mine is the part of the template i am using. For finding a hck to get your blogger labels as vertical or horizontal tabs follow these links:

http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html

I dont know the answer to your other question, please tell me if you can find that out.

Avrge Joe said...

Hello,
Sorry the link does not work- http://hoctro.blogspot.com/2006/09/tweaking-new-blogg

Basketer said...

IT is working fine. You have used an icomplete link. Please copy the complete link, I have checked it, it does work.

Handoko said...

Hi Basketer, I'm back :)

About my question of opening blogroll link in a new window. well, I was trying to place some tags to it's HTML , but It wont work, but I was quite sure that it's impossible blogrolling.com doesnt give this kind of feature.

So, I recheck the feature and Gotcha, I found it. I missed something there.

Try this. Go back to your account in Blogrolling.com -->HOME-->Edit/Delete Links. U have to Edit each link. In Basic Option Box, u will find "Target" Option. Fill it with: New.

Save Link, go back to HOME and Get The Code. place it in your blog again, Republish. Its' done.

Now we can keep our blog Open. hehe.. :)

dee said...

Hi
Your post on adding tabs was very useful, i tried ti add tabs to the post and it works well as long as i just show one single post on the page. But, if i want to show lets say 3 posts on one page and every post has three tabs how do I it? I tried to have three posts on the page but the thing it automatically creates 9 tabs next to each other. But, I specifically want to show three differener posts on page page and three tabs per post. Please help!!!!
Thank You
Dee

Giles said...

hey,
I am computer challenged. everytime I try to do it I just errors. I want to put tabs on my blog so I can have each subject be a different tab. like for every adventure I want a different tab. Can you help me out? my blog is gbkayak.blogspot.com my email is also on my profile

Anonymous said...

www.gold2us.com is an exchange site designed specifically for game virtual currencies and items trading.if you want to Sell WoW Gold, Sell World Of Warcraft Gold, Sell FFxi Gil, you can choose us. We will give you a suitable price. We buy the gold both on us and eu server. u can also Sell WoW Gold US,Sell WoW Gold EU to us

tolerance said...

anime cosplay follows Comic-Figures or and also your ideas and desires for cheap cosplay.Our cosplay costumes are not made in the same measurement, but are made with our cosplay special attention to your request.naruto cosplay or cosplay naruto is hot sale now. Furthermore, we will still send you the product Japanese School Uniform after our detailed further check.Y

tolerance said...

you'll be surprised at the plentiful varieties such as Kingdom Hearts Cosplay, Bleach Cosplay, Final Fantasy Cosplayand you are sure to find the special anime cosplay costumes you've been looking for wholesale costume in our store.

Anonymous said...

Thank you for sharing.
Oes Tsetnoc | Mengembalikan Jati Diri Bangsa | Kenali dan Kunjungi Objek Wisata di Pandeglang | Oes tsetnoc | Online Marketing | Electronics Gadgets | etips solution | Travel Guide

Anonymous said...

酒店經紀酒店打工 酒店工作酒店上班 酒店兼差 酒店兼職 打工兼差 打工兼職台北酒店 酒店應徵 禮服酒店 酒店經紀 打工兼差

polo shirts said...

History of polo ralph lauren. Polo fashions had its humble beginnings in 1968 when tie salesman Ralph Lauren gave it a kick start. By 1969 he had a boutique polo ralph lauren factory stores within the Manhattan department store Bloomingdale's. ... Brands and luxury standard. Since Ralph Lauren's first brand, Polo Ralph Lauren, was launched, the company has expanded to include a variety of luxury brands such as Polo Golf, Polo Denim, Polo Sport. You can buy cheap Ralph Lauren Clothing at Ralph Lauren outlet.Also We provide polo shirts
Ralph Lauren polo shirt, 50% OFF! polo ralph lauren outlet online is your best choice!In 2006, polo ralph lauren outlet became the first designer in Wimbledon's 133-year history to create official uniforms for the tournament. As part of this year's event, which starts next week, polo ralph lauren sale will introduces the first ... determination to maintain and enhance the values for which our two brands are famous throughout the world. The rugby ralph lauren brand brings to Wimbledon the look of timeless elegance, drawing on our rich history and traditions

dfadf said...

Microsoft Office
Office 2010
Microsoft Office 2010
Office 2010 key
Office 2010 download
Office 2010 Professional
Microsoft outlook
Outlook 2010
Windows 7
Microsoft outlook 2010

pandorasell said...

Silver pandora jewelry store comprises replacement atomic number 79 equally the metal by choice in that pandora jewelry website flavors manners. .925 alright superlative Ag Jewelry checks 92.5% complete silver pandora jewelry online and comprises assorted with extra debases to beef up them and abbreviate maculating pandora style jewelry coming through a hard-nosed alloy as pandora bracelet beads . The rise in metal prices, especially gold, have begun to alter pandora leather bracelet dashes. Designers are applying sterling pandora style bracelet a lot of today because of its gold pandora bracelet appeal and affordability. Designers care Jacques Louis pandora charm necklace David Yurman and those from pandora’s cause changed their focus and are making A-list assembles by .925 Fine Sterling pandora necklace charms Although Silver is affordable its price has quietly risen 300% inch the last 5 years and is astir across 50% pandora silver beads these class entirely. Many investment advisers* recommend a portion of your wealth be inward Ag and amber. Trend setters who comprised the first to begin wearing pandora necklace leather metal to match tatto last word and additional electric current styles as well do good along accepting pandora bracelet charms worth more than they paid for it.

Kamot mo! said...

good day i tried this hack but it is not working on my test blog. www.kamotmo.blogspot.com

i follow all the instructions written on your post but still nothing happens. please help.. i want to put different videos in each every post. this hack can help to minimize the post. please email at Xynoplics098@yahoo.ca . Thanks

weddingdresses said...

Power Balance is important to not also, all the testimonials say that once power balance bracelet is tried it is impossible to part with it. It is said because it works in such a perfect harmony with your body one simply doesn't want to take it off. Also pulsera power balanceis important to note that wristband alone is not enough to accomplish some task.

energy4balance said...

Movado Bold
Baby Carriers
power balance
winter boots
ecco shoes
Bakugan Toys

bestzyh said...

The Bala Deck from the Sebago collection is also one of the popular tods handbags which

are available for the ladies. These shoe portray a cool look with ash coloured styles. The white laces of the shoe complements the ash coloured body of the shoe.As a lady you

also need to know which is the best place to scout for Womens Tods loafers. You can close the deals as per your convenient time. tods bags have always been one of the most popular kinds of Tods shoes among both men and women.

tods mens shoes are also highly in demand with young teens, who have a peppy sense

of fashion. These Tods shoes are highly comfortable and hence a must have for every wardrobe. These Tods shoes look great with casual dresses as well as formal pants. The Ladies

Tods loafers are available in soft pastel shades besides the three basic colours like black, brown, and white.Look at the online stores offering Tods loafers for women. You will

find that there is a huge collection on offer, from which you can find something of your choice.

shoes tods are different types of designs and styles that are on offer. When purchasing, you

should select a store with an easy exchange policy to ensure a smooth shopping experience.There are some unique pairs of ladies Tods loafers that are very popular among all

women. The G.H. Bass Washington and Wayfarer penny Tods loafers are very popular. They are comfortable and have a classy and sophisticated look to them. The Tods shoes have

leather lining and a flexible mid sole, which makes them very comfortable.

All women love tods shoes online . Most women have a very vast and eclectic collection of

Tods shoes. However, if you really want to add some Tods shoes which are very different from the ones you own already, you should think about getting a pair of nice looking

women's Tods loafers. There is no dearth of good quality and colorful Tods loafers and you can choose a pair that you like the most and that suits you the most. These are a

specific kind of Tods shoes that have become very popular because they are very comfortable to wear and since there are no laces, you can put them on and take them off very

quickly. Apart from being comfortable, these Tods shoes also look very stylish if you team them with the right clothes.

Women like to buy these tods loafers in bright colors like yellow as they make you look

colorful and cheerful. These amazing Tods shoes can be worn on many aphonetly different informal occasions like parties, picnics and informal get-togethers with friends. They

are also available in many different fittings and you can choose the one you like most. The upper part of these Tods shoes is usually made of leather. These are the Tods shoes

you should opt for if you are a health conscious woman and don't want to jeopardize your feet and body structure by wearing high heels. Not only are Tods loafers comfortable,

they are also healthier as compared to high heel dphonetly Tods shoes which have been medically proven to be dangerous.

Mosta_Naruto said...
This comment has been removed by the author.
一笑千年 said...

In reality, almost almost all colors enables you vbnfuyt to brush or perhaps tint prescribed oakley frogskins . Generally, cheap Oakley sunglasses virtual test can become fallen directly into several sorts and different online vendors could have their distinct ones. oakley frogskins can be abbreviated directly into "try-on" or perhaps "virtual try-on". In any manner, one can easily open this kind of item when he desires to choose his / her beloved low-cost oakley jawbone . Another extremely professional low-cost Oakley sunglasses virtual test is founded on the info of peoples' faces and also heads. Such test oakley flak jacket will be professional and also complicated, yet very correct. Some blanks concerning people's face can be filled, like the length, size, height with the face, brow, and a great many other oakley radar

Anonymous said...

sexshop
sexshop online
sexshop
sexyshop
produto erotico
Cueca Boxer
Alongador Peniano
sexshop online
produto erotico
sexshop online

一笑千年 said...

It really is ideal for kfghjeib oneself obtain a couple of oakley sunglasses cheap seeking the particular phenomenon regarding trend. The particular on-line spectacles go shopping have got offered numerous kinds regarding from suppliers half x oakley regarding sporting activities fans pick, it is possible to pick these hinge within your specifications. The particular from suppliers oakley sunglasses discount are usually added looks including the fit greater than Oakley sunglasses mainly because many inside players wear the identical while participating in so sale oakley sunglasses really need to fit greater than sorts. You need to have witnessed cricketers gaining dozens of spectacular couple of colors about industry.People couple of colors will be called oakley jawbone together with tinted polycarbonate contact lenses. The particular excellent couple of from suppliers oakley stpl jawbone will be venture excellent within the economy given that half x are usually available with a great attractive benefit series. You have to be mindful once you pick from suppliers half x to perform athletics routines.

MulberryNews said...

Famous The movies Oakley Sunglasses Outlet superstars who vftbieg are well-known with regard to their higher Half X sensibility to style richly present Oakley Stpl Jawbone clear of this tendency. Oversized Oakley Jawbone are capturing consideration interior previous all this pattern has as a final point used it is Sale Oakley Sunglasses soil typically. But as per style pioneers opt for the just almost Oakley Sunglasses Discount which meets you very good. A extensive a number of Half X Oakley which might be during come july 1st time Oakley Sunglasses Cheap might be viewed featuring with many colour and might be viewed in numerous outlines in addition to sizes.

MulberryNews said...

If you love mineral water vytrqpn athletics, you also will check out getting some Oakley Frogskins. These kind of musician Oakley Frogskin are generally exclusively devised for significant mineral water circumstances. Your anatomist regarding your design and style through the Cheap Oakley Sunglasses is around enabling you to discover superior with all the branded Say 300 along with 500 Oakley Jawbone. This doesn't happen ought to price tag anyone the supply including a knee to get Oakley Jawbones. whilst you keep in an authorized online vendor, you can find the most affordable selling price Oakley sunglasses.

oakley oil rig sunglasses said...

Together with Oakley Radar Sunglasses employed by every person, the fashion fans look for out there special Oakley Radar to be able to be noticeable inside the masses. That is in which Oakley colors receive the particular czw6rf photo. To grab the particular Oakley Frogskin eyes, you will find an extensive variety of alternatives from your aviator type for the many adored large spectacles inside the Oakley Frogskins series just like Oakley 1951 MILLISECONDS, Oakley 25LS & Cheap Oakley Sunglasses 54GS. Each and every shape can be a correct German layout and also their particular sophisticated styles are manufactured from the finest craftsmen in operation.

一笑千年 said...

Oakley Sunglasses Discount is visual compromise and the other hfkjtylt is eye protection. In fact, bifocal safety glass is neither a sole nor a strange member in the large family of eyewear products. Prescription Cheap Oakley Sunglasses and prescription goggles are both special types of eyewear that come in a similar design principle.They are designed to shield your eyes from the ultra violet rays of the sun and make it more comfortable for you to see when you're outside. Why do some people want to wear them indoors or at night? In fact, there is no need in wearing them. Maybe they think wearing cool Oakley Frogskins can make them cooler. Other occasions like a social gathering or setting, it is also not suitable to wear Oakley sunglasses. People at the parties will presumably have conversations with others they are interested in.Children will think those Oakley Jawbone are good and can make them more attractive. Of course, now the Oakley sunglasses for children vary a lot in styles that can fit any demand and interest. The Oakley Jawbone Sunglasses of some film characters are also very popular among children. Those Oakley sunglasses are a little expensive than ordinary Oakley sunglasses. Parents should thus let their children do their own choices on what to buy. As sometimes, children will be unsatisfied with the patents' choices. What parents should do only is to consider whether those Oakley sunglasses are durable, comfortable, suitable, etc.It is difficult to approach a new person and say hello to them when someone is wearing dark, cool Oakley sunglasses.

一笑千年 said...

If discovering vision cannot yujtrthg be well corrected through the present Cheap Oakley Sunglasses , you also needs to take these phones the medical center. Oakley sunglasses of incorrect power would result in rapid change of vision. The sizes from the eyeglass body are directly with regards to the enhancement of kid's eyesight. A few parents might hold which big body oakley frogskins will allow their children more stunning or good looking.Modern Oakley sunglasses are created in numerous materials, colours, shapes as well as styles. Anyone could possibly get their desired Oakley sunglasses in the huge marketplace. In addition towards the local optical shops, online shops are an alternative solution choice. With regards to prescription oakley radar , you tend to be recommended to obtain your doctor prescribed first. Prescription Oakley sunglasses make reference to these oakley jawbones which have prescribed contacts. Of program, the lenses will vary and tend to be custom-made based on individual's requirements.While others hold little ones tend to be safer, for they're not very easy to drop over. Nevertheless, the truth is that the actual sizes associated with eyeglass frame ought to be determined through each particular condition, because the actual pupil associated with both eyes ought to be kept good optical middle, so which their oakley jawbone could be corrected towards the most degree.

qinbincai123 said...

Sometimes too hot the eye of heaven shines,And hidh81ke often is his gold complexion dimmed;
And every fair from fair sometimes declines,By chance, or nature’s changing course, untrimm’d.
Cheap New Era Hats
New Era 59fifty Hats
New Era 59fifty caps
New Era Hats Wholesale
Cheap Hats