*NEW* Tag Search Box Tutorial (considerably shorter)

Can’t sleep right now, like usual.
The last tutorial was a bit lengthy so this one should be a bit shorter.
I hadn’t realized so many people were searching this up on google or I would’ve clarified and made things easier, sooner.
This one should be easier on the brain, haha.

1) Go to Customize appearance for your theme, and click Custom HTML. Copy the code below and paste it after the <head>. This is the script that will allow the tag search box to function.

<meta name="text:Search Label" content="" />
<script type="text/javascript" src="http://static.tumblr.com/8oupd2j/BYTm7u5cn/tag_search.js"></script>

2a) If you don’t already have a search box, copy and paste the code below to where ever you want the search box to be (e.g. description).
This is the actual generic search box itself:

<form onsubmit="return tagSearch(this)">
    <input type="text" name="tag" value="{text:Search Label}" onfocus="if (this.value == '{text:Search Label}') {this.value=''}" onblur="if (this.value == '') {this.value='{text:Search Label}'}" />
    <input type="submit" value="Search" />

2b) If you have a search box already, copy and paste the below code, then find the class or id of the form (e.g. class=”search-box” or id=”EXAMPLE-ID”) containing your desired search box and type it in between the quotation marks respectively. Overwrite your old <form> code with this new one.
If it’s a class, just replace id= with class= and the class name in between the quotations, and you’re good to go.

<form  onsubmit="return tagSearch(this)">
    <input type="text" name="tag" value="{text:Search Label}" onfocus="if (this.value == '{text:Search Label}') {this.value=''}" onblur="if (this.value == '') {this.value='{text:Search Label}'}" />
    <input type="submit" value="Search" />

If you don’t want a submit button, eliminate the following line of code:

<input type="submit" value="Search" />

3) Press Update Preview, and go back to Appearance to click Save.

4) Refresh the window, and you should find an option under Appearance to customize the search box text (Search Label).

5) Voila! Any further questions, email me at justcantdescribeu@gmail.com or drop an Ask. :)

You can find sources and attribution in the old tutorial here.

Happy New Years, 2012 here we goooo! :p

Not gonna lie, I did delete a note with personal top secret log in info, but other than that, didn’t change anything else. I feel like my desktop is boring, but this seemed like fun.

thanks jcdu for tagging me.

I tag: i-dream-of-cats blueboyblogs planewt in-silent-seas-we-drown saving-people-huntingthings

and anyone else who might find it fun to do.

  • Take a screenshot of your desktop
  • Don’t change anything
  • Don’t delete anything
  • Tag 5 more people 
  • Send
  • 清竜人
  • 僕の彼女はサイボーグ (OST)

清竜人 - Send

Translation: n/a
Transcription: Kiyoshi Ryujin - Send

Another guitar track! This one starts off pretty slow and sad, but once you hear the male vocal with his sincere voice, it’ll be worth it. I think he’s singing in English but I can’t understand it LOL. It’s still pretty amazing though. Well that ends it for this movie’s soundtrack. If you like this and haven’t heard the other 2 ones I posted, make sure to do so, and go watch the movie! It’s brilliant.

Lyrics → Original

These stars that doesn’t lit
I’ll keep it burning hard
It’ll burn. It’ll fight. You can’t run inside

(okay I have to admit, it doesn’t make any sense whatsoever, haha)

Tumblr "Tag Search Box" (Detailed tutorial and code included)

New tutorial here: http://justcantdescribeu.tumblr.com/post/15075241123 :)

Alright, I was pretty busy this past week, so I delayed responses to those who messaged me about the Tumblr “Tag Search Box” which I am currently using on my blog (http://justcantdescribeu.tumblr.com). I thought I’d make up for it by writing a huge post and showing everyone exactly how I managed to make this work. So… /scary-wall-of-text, begin. >:d

Essentially, it’s a search box that redirects to a page displaying all posts with the specific tag that you search, sort of like the “all tumblr search” which you use to explore new tags and stuff.

*Press “Read More” and scroll down to the next part marked by an asterix * if you already know what this is and are just looking for the code/tutorial*

Here, this post I wrote a few days ago explains it in more detail:

Tumblr “tag search box”

OMFG FUCKK YEAAAH, finally found a piece of client side code that enables my search box to turn into a “tag search box”, where after submitting the query, it would return with results of “/tagged/{SearchQuery}” instead of relying on Tumblr’s shitty search algorithm that doesn’t even work.

Essentially, I made my search button into the equivalent of “Search all of Tumblr” (for tags), except personalized for my own blog.

I originally submitted 2 requests to Carlo Franco (the creator of this theme), via his Ask, but he seemed to be ignoring me or not responding, so I took matters into my own hands (AKA google.com). A little code snippet and a few customizations later, and voila!

You can now search the “Search my tags!” to get a results page of http://justcantdescribeu.tumblr.com/tagged/{SearchQuery} «<whatever you searched in the box. Now I can keep track of my posts without going to the dashboard!

I always tag my posts accordingly, so if you want to search up all the video posts I made, search the tag “video” in the box, and it’ll show all the video clips I’ve posted. Same goes with images, text, quotes, music, and so on.

I’m so happy right now, haha. I’ve been trying to do this for a month or two, and finally cracked the solution today. It may seem like a piece of cake to you advanced programmers or theme-makers out there, but I feel great self accomplishment since I have NO idea how to write in HTML/PHP/CSS, or anything related to coding.

There are actually quite a number of reasons why you would want this search box:

  1. This is for those whose blog has been infected by the nasty disease called “tumblr’s search engine”, or maybe just those whose default search boxes don’t work for some mysterious reason (like mine).
  2. It is totally non-dependant on keywords or titles, so it means you have complete control of what gets searched up on your blog. If you don’t want someone to search a certain blog post up, just don’t tag it.
  3. It’s the coolest thing you’ll ever use (okay, maybeh not really.. :o)

However, the downside to this is that you have to tag ALL of your posts in a category, to be able to search up those tags (no shit Sherlock). I know that some of you tumblr users out there are in charge of blogs that have a specific theme or are directories/collaborations/centralizations of certain content, so you need a general indexing feature. This would be the perfect addition to your tumblr, a way for users to search up your tagged posts.

*Anyways if you think your set, here’s how to do it:

It’s a long read, but please bear with me.

Basically, you need to add a few snippets of code to your Custom HTML box, which is located in the Customize > Theme page, of your tumblr Dashboard. What this does is execute a javascript function (I think that’s what it’s called) when you press the submit button (or in this case, enter button), that redirects the form to the /tagged/ page.

Warning: Be careful when you edit your custom HTML, because sometimes the theme will screw up, and the positioning on everything could shift into different places. Make sure you back up your theme prior to editing anything, unless you really know what you’re doing. I am not liable or responsible for any damage and inconvenience caused if your tumblr page gets messed up.

For this to work, you need to already have a search box. (It’s fine if you don’t already, I’ll elaborate on that later)

Got one? Okay, good.

Find the <head></head> section in your custom HTML box. Use Ctrl + F to search for <head> if you can’t find it. It’s usually in the first part of the HTML code, near the top. You need to copy this javascript function and paste it in between the <head> and </head>. Preferebly, paste this RIGHT after the <head> tag so it looks something like <head><script type=….. I’m asking you to do this right after, because if you insert it in other places, you may run into trouble with the line breaks and formatting of the HTML code - in short, difficult and nasty stuff you don’t wanna mess with. Copy the whole thing in the quote below.

<script type="text/javascript"> <!-- function handleThis(formElm) { window.location="http://yourtumblrURLhere.tumblr.com/tagged/"+formElm.number.value+""; return false; } // --> </script>

See where it says “http://yourtumblrURLhere”? Well, do exactly what it says and replace the line with your tumblr URL, there.

Now, after that’s done, here’s the part that’s a little tricky. You have two options:

First, if you don’t have a search box and want a basic one that includes a submit button, but is without any CSS or styling/positioning, of which appears at the top left of the screen, copy and paste the following code snippet into the <body></body> part of your custom HTML. As before, it’s preferable to paste this RIGHT after <body> so it looks like: <body><form onsub... This is the raw code that you’ll need.

<form onsubmit="return handleThis(this)"> <input type="text" name="number" /> <input type="submit" value="Submit" /> </form>

Second option: If you have an original search box that was custom made or came with your theme and you want to keep the original styling/colour/position of it, you’ll need to do this. You need to find the actual code of your original search box. Again, the easiest way is to use Ctrl + F to do this. A quick search for “search" or "form" or "form-id” or div id=”search” might display these results. Afterwards, you will need to work the code snippet shown above, into your original search box code. And when I mean “work it in”, I mean add this and edit your original search box code to incorporate the "onsubmit=" part. That’s the basic thing you want to fix for your search box code.

This may get confusing, but I’m going to have to break down the code I posted above, and explain each line in detail, to give you an idea of the customization you can do with this.

<form onsubmit="return handleThis(this)">

^ The <form is the opening code wrapper/tag of the search form. In HTML, forms are used to gather user input. In our case it’s the search tag we are inputting.  onsubmit=”return… is the line that supposedly “calls” the function, or the script we added in part one to do its job, when you submit a search query (eg. press enter, or press search button). This is the basic line you need.

<input type="text" name="number" value="Search Me!" /> 

^ The <input type=”text” essentially creates a blank text box, and this is required along with first line, because without a text box you can’t type anything, and that means you can’t search for anything. The value=”Search Me!” is the text that shows up when you first load the text box, with no user input. It’s what makes the blank text box, not blank. The value is optional, and if you don’t add it, the text box is blank, which is fine, but if you want to let your followers know that it is indeed a textbox, then you might want to add a value.

<input type="submit" value="Submit" /> 

^As you can see, there’s another <input type= tag. This is where you can choose if you want a submit button or not. If not, people can only press their Enter key on their keyboard to initiate a search. The "submit" attribute tells it to create a submit button, as opposed to a text box in the previous line. Note: This is the only optional part in full code snippet. You can choose to omit this line if you don’t want a button.


^ Like the first line, this is the closing </form> tag, which closes the form.

So, after reading that, you’re probably now wondering how you can retain your originally styled search box and its positioning on your page, if your theme provided one. Well, sorry to break it to you, but I don’t really know how this works. All I can do is provide you with my best guesses and interpretations (as I’ve done for this entire post).

Based on MY tumblr theme, I’m assuming that on yours, there is a <div id=> … </div id> tag somewhere, which indicates the positioning, location, and layout of the search box. For example, my Effector Theme, there is section labeled <div id=”search”><div id>, and if you put your search box code inside that, everything will be in proper position, if your theme creator did a good job.
That’s for the positioning. Now, for custom graphics on your search bar, included on some themes, I’m guessing you need to find the <form id=> … </form> wrappers, which probaby points to externally hosted graphics. 

You get where I’m going with this? Here, I’ll show you an example of my blog’s HTML code for this particular part (don’t copy/paste this, it won’t work on yours):

<div >
    <form onsubmit="return handleThis(this)">
<input type="text" name="number" value="Search my tags!" />

For reference, here’s the default code for a search box, as provided by our beloved tumblr Staff. You want to delete the action=”/search” method=”get” since you aren’t actually submitting any information to a server, but rather just getting redirected. The name “q” has to be changed to to the value that corresponds in the javascript code we added in the beginning (which is “number”)

<form action="/search" method="get"> <input type="text" name="q" value="{SearchQuery}"/> <input type="submit" value="Search"/> </form> 

It’s a little difficult to explain, and I’m not exactly the most knowledgeable at coding HTML so sorry if this is hard to understand. While typing all this, I was actually thinking.. “do I really know what I’m saying”? I’m actually amazed at myself for the amount of detail I put into this, with the limited amount of knowledge I have, LOL. Anyways, this works for me, so I presume it’s a valid method. Otherwise, you can ask your friends who know how to code to help you. 

If you DON’T know how to get the generic search box implemented, you need to do more homework before attempting to change it into a tag search box, and google is your best friend. :)

If you’re stuck or this doesn’t work, or you are simply in doubt, just remember: you can always play around with the code and through trial/error you’ll get it eventually. That’s how I did it anyways. (Or you could just go learn HTML)

I hope this helps and solves a lot of frustration for people that have blogs similar to mine, where the original search box doesn’t work.

Also, check out my other post regarding additional changes to the search box (making the text disappear when you click on it, and reappear when you click outside)

Any further questions or inquiries can be directed to my email (NOT my Ask box): justcantdescribeu@gmail.com

And theeeeere we go. /end scary-wall-of-text.

Please be respectful and don’t repost this as your own because it actually took a while to type this, and then go through the hassle of editing everything (<pre> and <code> tags, replacing html special entities, etc.)!

Lastly, if you think that someone you know will want this, please promote it by: linking to, liking, or reblogging this post, or at the very least, give credit to the original forum page where I found this code. I’d greatly appreciate it. Thanks.

  • 說謊
  • 林宥嘉
  • 感官/世界

林宥嘉 - 說謊
Línyòujiā - shuōhuǎng
Yoga Lin - Lie (Fairy Tale)

是有過幾個不錯對象 說起來並不寂寞孤單
可能我浪蕩 讓人家不安 才會結果都陣亡

我沒有什麼陰影魔障 你千萬不要放在心上
我又不脆弱 何況那算什麼傷 反正愛情不就都這樣

我沒有說謊 我何必說謊
你懂我的 我對你從來就不會假裝
我哪有說謊 請別以為你有多難忘

我好久沒來這間餐廳 沒想到已經換了裝潢
角落那窗口 聞的到玫瑰花香 被你一說是有些印象

我沒有說謊 我何必說謊
你知道的 我缺點之一就是很健忘 
我哪有說謊 是很感謝今晚的相伴

我沒有說謊 我何必說謊
愛一個人 沒愛到難道就會怎麼樣
別說我說謊 人生已經如此的艱難
有些事情 就不要拆穿

我沒有說謊 是愛情說謊
它帶你來 騙我說渴望的有可能有希望
我沒有說謊 祝你做個幸福的新娘


Few decent individuals have come and passed me by
There isn’t any loneliness to speak of
Perhaps my fickle nature
Causes instability and insecurity for others
Hence turning everything to dust

There are no obstacles to my heart,
Please do not worry for me
I am not weak, the wound is insignificant
Love seems to be exactly how it should be

I did not lie, why should I lie
You should understand me
I have no reason to put on an act in front of you
I did not lie
Please do not assume you’re unforgettable
My smile is sincere, not by force

It’s been a while since my last visit,
The restaurant seems to have changed
The window by the corner, emits the scent of roses
It does ring a bell when you mention it

I did not lie, why should I lie
You should understand me
One of my flaws is forgetfulness
I did not lie
Grateful for the companionship tonight
Although it does feel out of place

I did not lie, why should I lie
To love someone
Does it necessarily require a response
I will still be the same regardless
Do not accuse me of lying
For life is already filled with pain and hardship
Some things are best when let to be

I did not lie, love does
Bringing you into my life
Filling me with false hopes and empty promises
I did not lie
May you be a happy bride
Please leave behind my concerns that remain within you.

The Streampad music player for Tumblr +rearrange song order +put streampad on top +transparency +show ID3 title/artist

If you don’t know what Streampad is yet, from Streampad itself:

Streampad is the simplest way to play music on your Website or blog.
It automatically detects and displays artist information and cover art.
You pick the color, and choose from other customizable features.
Streampad’s [a piece of] cake to install.

Basically, like other music players on tumblr (Grooveshark, Hypster, Billy, SCM Music player, Tumblr Music Player, Playlist), it plays music on your tumblr page.
It sits neatly on the bottom of your page, and usually integrates well with any other widget you have installed, as well as infinite scrolling.

However, unlike all those music players mentioned above, Streampad gets its audio tracks using the Tumblr API v1, which means your playlist is automatically generated from your existing tumblr audio posts.

So far, and as far as I know, Streampad is the only player that functions this way. For all the other ones you need to either upload your own music or select songs to put on your playlist. In some ways, that’s a huge benefit because you will have access to a ton of pre-existing and newly-released songs for free (and legally too) which most of these players will offer in exchange for putting a big “buy” button next to all their tracks or some form of advertisement.

But for those of you who like to keep a simple, synchronized playlist which will always match the music content you post on tumblr, or maybe for those who are running music blogs, I think you’ll probably like Streampad better than anything else for the time it saves is unrivaled to any other currently released player.

Rundown of key components Streampad supports:
- Supports multiple platforms
- Custom progress bar colours, text/background colours, default text
- Has options to hide volume controls, disable popout listening, etc.
- Allows fullscreen listening
- Allows autoplay
- Automatically gets music tracks from all existing Tumblr audio posts via API
- Supports scrobbling to Last.fm, sharing with AIM, and keeping listening history on AOL Music.

Minor issues to consider:
- Can’t manually select which tracks to not play, apart from deleting the audio post itself on Tumblr.
- The music you play is limited to whatever is posted on Tumblr as an audio post, including external mp3s and Soundcloud files; you can’t pick songs from YouTube or from an existing library.
- Doesn’t support continous playback when visiting other pages on the blog. This means that the player will restart when you go to Page 2.

Liking it so far? Get it here:

1) Select the “tumblr” icon
2) Follow steps under “GET THE CODE” in the dropdown that should appear.

Note: if you want to customize your player with colours and all that, you should scroll to the bottom of that page and customize it before copy-and-pasting the code. The code in the box automatically updates with the customizations you make.

Customization Glossary
Background color: colour of your Streampad bar.
Text color: colour of text on your Streampad bar.
Default Text: text which shows up on the bar when the page loads. Note: if you want this to be blank, just put a space in.
Play Button Display: toggle whether or not you want to show the Play Button icon.
Autoplay: toggle whether or not music will automatically start playing after Streampad loads. Note: I highly suggest you disable autoplay because, well, it’s autoplay. And don’t even try it on a blog without infinite scrolling because you’ll tick off your visitors so much by restarting the song every time they visit a new page.
Allow Popout: toggle whether or not you can open the playlist in a new window and listen from there.
Progress Bar (Front) Color: colour of the indicator bar showing the current position of the song.
Progress Bar (Back) Color: colour of the indicator bar showing music that has completely buffered (loaded).
Enable Playlist Drawer: toggle whether or not to show a button which reveals your entire playlist in a list. Also displays Amazon/iTunes advertisement buttons.
Auto Show Playlist On Play: toggle whether or not to automatically make Playlist Drawer pop up when music starts.
Enable Volume Controls: toggle whether or not to show the ability to change the volume.
Button Color: select colour theme for the buttons. (format: button colour-shadow colour)


Rearrange order of playlist:

To rearrange the order of songs being played back, go to the original audio post and edit the timestamp (the date) of the post. The player grabs the most recently dated posts first, so if you want to put a certain song at the front of the playlist, give the audio post of that certain song a recent date to put it in front of the other audio posts, and the order will switch. Changes aren’t reflected immediately, and they take a few minutes to register.

How to put Streampad on top:

Someone asked me how they could move the Streampad bar to the very top, instead of it sitting at the bottom like usual. Although this is highly unrecommended, you can still do it.

Warning: this will break some functionality of your Steampad because the “Follow” and “Dashboard” buttons (the tumblr controls) will overlap. Also, the volume control will still appear on the bottom.

Add this code to your Custom CSS box
(Customize > Advanced > Add Custom CSS):

#streampadBottomBar {
bottom: auto !important;
top: 0 !important;
z-index: 1336 !important;

#streampadDrawer {
bottom: 0 !important;

Alternatively, since it’s at the top now and people can freely scroll down the page, you can make it stay at the very top if you don’t like the streampad bar moving with the page while you scroll. For those who prefer this way, use this code instead:

#streampadBottomBar {
position: absolute !important;
bottom: auto !important;
top: 0 !important;
z-index: 1336 !important;

#streampadDrawer {
bottom: 0 !important;

(Note: if this isn’t working, or anything you put in the Custom CSS box has no effect, your theme may have disabled the Custom CSS feature. E.g some themes by Max Davis.

In that case, you will have to enable it by adding this snippet right before the closing </head> in your HTML code:)

<style type="text/css">

Transparent Streampad:

(Note: this should work on all modern browsers with the exception of IE 8.0 and under, as this will render the entire bar invisible in older browsers that have compatibility issues such as IE 8.0. If you’re an Internet Explorer 8 user and you really want this done, message me, but it will take a lot more to get it working. Upgrading your browser is the easiest solution. :D)

If you’re unsatisfied with the colour choices (which is pretty much every single colour imaginable by the way) Streampad gives you, you can opt for a transparent bar. To get transparent Streampad bar, edit your Streampad code which looks something like this:

<script type="text/javascript" src="http://o.aolcdn.com/os_merge/?file=/streampad/sp-player.js&

Edit the &bgcolor parameter to transparent so it looks like &bgcolor=transparent like so:

<script type="text/javascript" src="http://o.aolcdn.com/os_merge/?file=/streampad/sp-player.js&

If you don’t see the &bgcolor parameter, add it in to the end of the script so it resembles something like the above code. You might have start from scratch, add in the transparency, and then redo your customizations if you’re having trouble.

There will be a few visual glitches, like the volume bar turning transparent as well, or the icon border bars still showing, but generally it will turn your Streampad transparent, displaying the content and colour of whatever is underneath it.

For more advanced users familiar with CSS and HTML, you can change the level of transparency, the opacity of the Streampad bar, as well as get rid of the user icon, number of plays, fullscreen button, and the logo. (although, you should be leaving it up for credit/copyright purposes).

I’m not going to jump into that right now since it’s harder to explain, but I might in the future if I have some time.

Show ID3 Track Title and Artist:
Something of a little nuisance that I found when I first installed Streampad was that, while everything was great and all, you couldn’t get the title and artist to show up as the caption for the current song. Instead, Streampad would only pick up the description or text of the audio post, and sometimes people would leave this information out. It’s not that you can’t listen to music without knowing what it’s called, but some people may want that.

To show the artist and title instead of the audio post description text, you’ll need to copy and paste this code into your <head> in Custom HTML. Make sure you add this line in UNDER the original Streampad code, and not above/before.

<script type="text/javascript" src="http://static.tumblr.com/8oupd2j/FGqm0hmhz/streampad_id3.js"></script>

In short, this script basically tells Streampad to grab the ID3-artist and ID3-title from tumblr’s API, instead of the post description.

For those confused, ID3 tags are what tells Tumblr what the artist name, track title, and album name is when you upload the song. It’s pretty common knowledge that you can edit these values by editing the audio post after posting it. You know, this page?

So basically instead of retrieving the text from the post itself like it usually does, Streampad now retrieves this information and displays it in the format of “Artist - Track Name”. I made some adjustments so that in the event where the song was missing its track name, but had its artist information, or where it had the track name, but was missing its artist information, it would show as “Unknown Track” and “Unknown Artist” respectively. If both the ID3 tags for artist and track name were missing, it would then default to the text description of the audio post, like before.

I have to say, I’m not the best with javascript, but I somehow made it work, haha.

Of course, there are more things you can display, like the album name, or whatever else is supported in the Tumblr API, but again, I’m not going to dive into that today.


Anyway, yeah. If you want a working example, check out my blog. I don’t guarantee you’ll like my taste of music, but I think you’ll like the Streampad bar :)

Any questions or concerns: email me at justcantdescribeu@gmail.com or drop an Ask/Fanmail, or write a comment below.
Cheers. :D

Hey There Delilah
  • Hey There Delilah
  • Plain White T's
  • Hey There Delilah

Plain White T’s - Hey There Delilah

So many memories… been on my replay for the past few days, and it’s the one song I don’t get sick of no matter how many times I hear it, despite it being ”the-overplayed-radio-song”.

Our friends would all make fun of us
And we’ll just laugh along because
We know that none of them have felt this way. 

  • 微笑み
  • 僕の彼女はサイボーグ
  • 僕の彼女はサイボーグ (OST)

僕の彼女はサイボーグ - 微笑み

Translation: My girlfriend is a cyborg - Smile
Transcription: Boku no kanojo wa saibōgu - Hohoemi

Man, what an amazing guitar piece. Even though it’s so short (~50sec), it’s absolutely relaxing to listen to this, and you can even hear the guitar strings as the musician changes notes! Part of the Japanese film “Cyborg She” OST.

Fucking Sony… seriously. Never using my email address on any Sony site ever again. Ever since this breach in the Sony Ericsson Canada eShop, I’ve been getting a handful of spam mails. One of my email addresses is permanently distributed across the web now, fuuuuck.

It’s pissing me off… get your shit together Sony.

  • 多愛少怪
  • 丁噹
  • 未來的情人

丁噹 - 多愛少怪

Della (Ding Dang) - Duo Ai Shao Guai meaning “more love less strange”.

This dance/hype song is sang in a monotone sorta way, yet it’s so freaken catchy for some reason. I’ve been listening to it a lot this week haha. Della has an amazing voice :s

decadere said:

thanks for the code i have put it on my other blog and it works! :)
so i was just wondering how can i make the text which is written inside the box when you click the box the text disappears.. just like yours.. cause in mine the text stays so you need to select all the text and delete it.

Hey, thanks for asking this. I’m glad that the code worked!

I was about to go into more detail about this, but I figured that the original post was long enough, so I didn’t write more. However, I’ll explain it here.

On my blog, the theme creator already made a function to “make the default search text disappear” when you click the box, and when you mouse out of it, the default search text “reappears”.
However, if… let’s say someone already typed something into the box, and moused out of it, the text would not revert to the default value. It varies from theme to theme, but most preset themes that have built in search boxes probably already have this function.

If not, in your case, you can simply add it in.

If you find my way of explaining things a little confusing or taking too long, check out this article, complete with examples: http://www.nicolaskuttler.com/post/html-forms-and-onclick-onfocus/ which explains how to do it really well.

So this is your blog’s search box code:

<form  onsubmit="return handleThis(this)">
     <input type="text" name="number" value="Search Your Model!" />

For the first part, which is making the text disappear when you click on it (or focus it), you need to add an Event Attribute called onfocus. This tells the webpage to do “so and so” when you focus the text box.

Add this line:

onfocus="if (this.value == 'Search your Model!') {this.value=''}"

Then, where it says (this.value == ‘Search your Model!’), replace the string “Search your Model!”, with the value you originally had in your search box code. So, this makes it that if it detects the following string “Search your Model!” inside the text box, and the box is focused on (clicked on), it changes the value to “”, which is blank.

Now this may be good and all, but what if the user changes their mind and decides to not search something up? They may forget what the text box originally said and want it to appear again. Or, you might just do this for aesthetic reasons.

This is the second part, where you’ll need to add a line of code that instructs the text box to “revert to the original text”. This time, we’ll be adding the onblur attribute, which activates when the search box loses focus (when someone clicks outside of it). This will make the text reappear again, if the text box was blank. Remember, when someone clicks on it, it will become blank for them to type their search tags.

If we want it to go back to the original text, you’ll need to add this:

onblur="if (this.value == '') {this.value='Search your Model!'}"

Similar to the first line, this one makes it so that, in an event where when the search box loses focus, and the value inside the box is blank, it reverts the text to “Search your Model!”. Of course, if you want it to display another text string instead of your original, you can customize it to your liking (however, this will only work once).

*Remember to close the tags with /> when you’re finished!*

By now, your code should look something like this:

<form  onsubmit="return handleThis(this)">
     <input type="text" name="number" value="Search Your Model!" onfocus="if (this.value == 'Search your Model!') {this.value=''}" onblur="if (this.value == '') {this.value='Search your Model!'}"  />

I separated the lines by bolding onfocus and italicizing onblur to make it easier to see where each line ends. If you’ve done everything correctly, you should now have a good search box!

There’s a lot more you can do, like adding a custom shade of colour (similar to mine), that changes the text colour when it gets focused. But I’m not going to dive into that, because as you can see, this post is already pretty long. You can find out how to do that in the article link I provided (Dynamic input colour section).

Also, as a note to those who have custom/preset themes: the theme creator would have probably made a general variable that links to the search value, since it takes too long customizing every line of code. So if your search value is something like {Default Search Text}, then use that instead of “Search a Model!”. You always want to keep the code as similar to the original as possible, to avoid any incompatibility for future updates.

As always, I’ll try to answer to the best of my ability if you have any questions.

email me at: justcantdescribeu@gmail.com

I hope this works~ :P