This Is A Sample Of Sticky Post


The Problem is: to do this trick, we must use HTML code to make up the text... But don't worry, if you are not capable with HTML Codes, there are simple and fast way to make your sticky post without learn it. Use your "New Post" to make a sample of your sticky post, set the display as close as your real post, use the Preview to check your sticky post display then copy-paste into your content collumn text add gadget.

Learn how to make this sticky post in http://doit2us.blogspot.com/2010/02/how-to-make-sticky-post-in-your-blogger.html

How To Change Dofollow Attribute Comments in Blogger

>> Wednesday, March 24, 2010

Dofollow is a term given to web page or sites / blog which provides (outbound) links to the comments. whereas Nofollow is the opposite.

Here are the advantages and disadvantages of each, Dofollow and Nofollow..

Dofollow
The advantages of the dofollow blogs (sites) is able to increase the blog traffic, as will a lot of visitors who leave their "link traces", that will attract more advertisers who are interested in displaying their ads
The risk of dofollow blogs is that you should be ready to receive comments from spammers who comment without reading the contents of your article or put not relevant link.

Nofollow
The advantages of nofollow blogs is able to filter out spam comments from visitors, The comments obtained truly reflects what the visitors (readers) opinion and not just a "polite" comments and wanted to leave a link. 
The disadvantages is the visitors and advertisers will be reduced from your blog, because usually they will find DoFollow blogs to enhance their position in search engines.

Actually default setting attribute comments from blogger is Nofollow. To tun it into Dofollow, here are the steps we have to do.

Log in to your Blogger >> Dashboard >> Layout >> Edit HTML >> and check the Expand Widget Templates.
Find this script

href='data:comment.authorUrl' rel='nofollow'
and deleted  rel='nofollow', and save template. simply as that...

Note:
To determine whether a blog, is DoFollow or Nofollow. just View their page source, right click on a web page, and select page source, find the href code, if followed by the code rel = 'nofollow' it means that the blog is nofollow, if not there is DoFollow. For an easier way just find rel = 'nofollow' if we do not find then that blog is dofollow.

How To Delete Spam Comments In Blogger

>> Tuesday, March 23, 2010

A couple days ago, I found a comment contain with 10 links that not relevant with the article that I have post (spam comment). Since this incident,  I want to give brief tips for New Blogger about How To Delete Spam Comments In Blogger Blog.

Log in to Blogger. In your Dashboard >> choose your blog that you want to delete the comments (if you have more than one blog) >> and click View Blog.

Click the Title of the article that contain the comment that you want to delete >> and look at the "spam" comments.
Just Click the trash image and we will brought to the confirmation page.
Make sure to check the Remove forever? box if you want to delete that comment forever, but remember that this action can not be undone. After you have decided tu check or uncheck... Simply click the DELETE COMMENT.

Done.. the comment will be vanished and leaving the comments name / id and a notice that "This post has been removed by a blog administrator."

How To Make "Back To Top" Navigation Link

>> Sunday, March 21, 2010

Back to Top is a Navigation link at the bottom of the web page. Provide by site owner to jump back to the top of the page.
Sometime when we visited a Website or Blog, In addition to interested in the main article, we are also interested in some "information" that (intentionally placed by the owner to attract visitors) is located at the top of a web page. After finished reading the main article, it would be very helpful if there is a navigation link to the top of the page, so we only need a single click to navigated away to the top page to continue explored another "information" that attracted us.

To make this widget, we must declare the CSS Code of the widget first (declare the name and parameters that set the display widget in browser) then write / put the widget code itself (div id="widget-name") in its position (bottom)

In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS above ]]></b:skin> 
/* Credit
----------------------------------------------- */
#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: #444444;
font-weight: normal;
background: #777777;
}

#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 71%;
background: #ffffff;
}

#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 30%;
background: #ffffff;
}

#creditleft p {
margin: 0;
padding: 0
}

#creditright p {
margin: 0;
padding: 0
}

#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: #444444;
text-decoration: underline;
}

#creditright a, .creditright a:hover, .creditright a:visited {
color: #444444;
text-decoration: underline;
}
We are not going to discuss the CSS Code above, but if we read line by line you will get the "picture" of this widget display settings (please look at the bottom of this page to see the result of the setting...!!!). You can replace the parameters to match with your template. ex: backgrounds or fonts color.

Next, Copy this Widget Script and Paste at the bottom of your HTML Code above the closing tag </body>


<div id='credit'>

<div id='creditleft'>
<p><b>&#160;&#160;&#169; <a href='http://doit2us.blogspot.com/'>New Blogger Tips For Us</a> <i>Free Blogger Template</i> by <a href='http://doit2us.blogspot.com/'>Mc</a> 2010</b></p>
</div>

<div id='creditright'>
<p><b>Back to <a href='#outer-wrapper'>TOP</a>&#160;&#160;</b></p>
</div>

</div> <!-- end credit -->
The final position will be like this :
Widget Script
</body>
</html>
That's all, If you want to... You can replace the Blue with Your Link and Text... And last, do not forget to save your template, view your blog and... enjoy your new "Back to Top" widget

JavaScript - Small Tips I

>> Friday, March 19, 2010

How To Make a JavaScript Externally

As I mentioned in How To Make Recent Comment II and How To Make a Related Posts Widgets in Blogger.. One of the problems with the JavaScript code in our template, is to make our web loading page  become slower relatively or even could not see if there is something wrong with Script Js itself or the browser used.

To overcome this problem, we can put this Script (JS) externally.
So when the visitors browse our Site or Blog, their browser will reading our template Script first and then Script external JS after.
With this method our visitors still can see our page with more faster, although maybe there is a problem with JavaScript or compatibility of Browser used. (This is why some site owner write "warning text" on their web page "This Site Will Look Perfect In X, Y and Z browser".)

To make an external JavaScript, the first step of course, we must have a server / web host to store our JS file. If you do not have and want to have a web storage for free please read "Using Google Group and Google Sites as Web Storage".

After we have a host sever then the next step is to make your script as a JS file. Just simply find your  JavaScript code, Cut it and Paste in your Notepad and save it as a JS file (.js), Store your JS file into your host server and put some "calling" code into your HTML template.

Please take look at How To Make a Blogger Related Post. cause I will use this article to make an explanation.

To make the Related Post JavaScript externally, Just Cut..! the Related Post JavaScript (the green code) and paste in your Notepad, then Save it as yourkodescript.js.  
Next ..Upload / store this file into your web host and remember the URL link.

Write this folowwing script exactly on the place where the Related Post JavaScript was before.     

<script src='http://Yourwebhost.com/yourkodescript.js' type='text/javascript'/>  
The final position will look like this,
]]></b:skin> 
The Display Setting Script
<script src='http://Yourwebhost.com/yourkodescript.js' type='text/javascript'/>
</head>
Note :  The rest of the step to make related post widget are still the same...


Inform About The Existence Of JavaScript In Our Template

Because afraid of there are malicious script contained in JavaScript files, especially external JavaScript. Many users decided to configured their browser to disable the script, so that the script will not be able to see/read, and this means that your visitor couldn't be able to view all of your JavaScript build widget.

To anticipated this situation, we can inform to our visitors about the existence of JavaScript in our template / widget and maybe giving an explanation or guarantee that there is no malicious script inside it or no harm or it's safe.

To do this, we can simply add a small script at the end of your JavaScript Code.
JavaScript
<noscript>You need to enable JavaScript to read this.</noscript>
Just like what I have done in How To Make Recent Comments. If the visitor disabled the JavaScripts browser, There will be warning text below my "recent comments title" that's says "You Need to enable JavaScript to read this"


You can edit the 'explanation text' as you want..  how about add "Guarantee 100% no harm"..!!

Please, Write your comments.. and maybe you want to share your secret JS tips..., will be nice...

Blogger Related Post I- The Naked Script

>> Tuesday, March 16, 2010

Actually I had long enough to discuss about how to make a related posts widgets in blogger because of it's very useful function.

 According to the name - related post - this widget provides information to visitors who are reading our articles that there are other articles that discuss the similar or related topic that maybe they will be interested with. The main goal is to make our guess visiting times become longer, this means making our blogs become more populair and for those who put some ad on their site / blog, it will give more chance that the ad will get attention from the visitors.

After a long search from internet about how to make it, I found quite a lot of tutorial on "blogger related posts". Almost all of them use external JavaScript, some working and some did not. Most of Not Working related posts widget because of it's server and the other because of it's wrong Script, it seems to be a little miss code when posting the article. ( please read How To Posting Source Code in Blogger Post / Articles ).

Both long and/or short script related post widget that we find in the "blogger related post widget"  Tutor, actually consist of two major parts. JavaScript Codes that serves to showing related post itself, and HTML / CSS Codes that used to set the display of related post.

In this article I will not discuss about setting the display of related post widget, because we can find a lot of ways out there even displaying the related post with it's screenshot link.

As I ever mention in How To Make Recent Comment II. The use of external JavaScript (File JS stored on outside server) can speed up our web pages loading times. The problem is we often can not see directly the contents of those Java Script, because the server restrictions or by the owners file setting. This will lead us to fear of the presence of malicious script inside those "invisible" JavaScript.

So in accordance with the title Blogger Related Post - The Naked Script, I will give a Related Post JavaScript -Naked-  So you do not feel worry anymore cause you can see it's contents.

//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i  ) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k  ) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum  ;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i  ) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length  = 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length  = 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j  ) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="'   relatedUrls[r]   '">'   relatedTitles[r]   '</a></li>');
if (r < relatedTitles.length - 1) {
r  ;
} else {
r = 0;
}
i  ;
}
document.write('</ul>');
document.write('<a rel="dofollow" href="http://doit2us.blogspot.com">Learn How To Make This Related Posts Widget [?]</a></font>');
}
//]]>
We can simply created Related Post Widget by putting this JS directly inside our HTML template codes...

Go to your Dashboard >> Layout >> Edit HTML and check Expand Widget Templates.
Find this codes
]]></b:skin>  
</head> 
and Put this simple display setting Script between it,
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGqvqR-bDh_nAOgr_pFA0bn85UUYp3T9Du4ap4fhObKxsZmLFCY0zatV3dnat2H0ZW_Y_bPZFBaqo_h-c6NQmZgvXfqPaeanBSh5mG5N4dByRpxZAeh85I19alDbwqJtoe-uOU5BQ0Azk/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style>
Next put the JavaScript right after (below) it. So the final Script will look like :
]]></b:skin> 
The Display Setting Script
Related Post JavaScript
</head>
Next search for <data:'post.body/>. In some templates this code may look like: 

<div class='post-body>
Add this folowing script just below  <data:'post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot;   data:label.name   &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
After finished all, Save Your Template and click View Blog.. there you go.. You have new related post widget in your blog.

Note :
  • To make this related post widget works.. then you must have more than one article with the same label/tag/catagories. 
  • This related post widget not work in your main page (home).

We will discuss more about this related post widget setting in the next artikel.

Blog Has Been Removed - How To Deal With In Seconds

>> Friday, March 12, 2010

This morning I had experience that made me surprised and rather worried.. When I want to open this New Blogger Tips  Blog, with intention to update it, I found this Blog could not be opened and get a warning that Blog has been removed.

I wonder why Blogger doing this to my Blog, because I am sure that I do not doing something that violetes Blogger TOS
My only worried is... if there is certain person or party who reported to Blogger that this New Blogger Tips Blog is doing something illegal or that can harms to them, (although I'm sure not doing it too). In such cases we will need plenty of time to deal with.
Because I'm certain not make violates to Blogger TOS or other parties, then my temporary conclusion is that "there is a little (technical) error on the part of Blogger" that would be easily solved with the verification process.
 
And this is what I did then..
I typed http://www.blogger.com/start in my browser, sign in with my account. I done it twice cause the first time there will be warn that Sorry your account has been disabled .
After click Sign in will be taken to the notification temporary disabled Google account page, which states that "We apologize for the inconvinience.. bla..bla..bla.. For the imediate assintance enter your mobile phone number and we will send you a verification code".
I prefer to chose Text Message Verification Option, because it's cheaper and faster.. This is the best part...Yup really fast response from Google. After chose my Country and type my phone number. As soon as Click "Send verification code to my mobile phone", Just in second (not more than 3 seconds) there are incoming Text Message from Google to my mobile phone.
The next step, I just put this verification code into Verification Page which appear after we pressed Send verification code to my mobile phone button (So sorry that I forgotten to take screenshoot to this last action.). and click Verify button.

That's it.. As simple and Quicly like that, I solve my "Blog Has Been Removed" just in second. Hope.. this works for you to...

How To Make A Recent Comments II (JavaScript)

>> Tuesday, March 9, 2010

In previously post we have already discuss how to make a recent comments with Feed Widget Because using the URL Feed facilities, the possibility problem that will be arrise is when the server of URL Feed that we used is going "Down". Although this was very rare.

In this article we will discuss how to make a recent comments with JavaScript.

Actually there are several reason why these method are usually avoided by the blog/site owner to use it.
The negative point's of using JavaScript, Beside can make a web page loading become slow, nearly most of the Recent Comments Tutorial using JavaScript, upload their scripts onto their external sites and provide you a code for insertion into your template, this makes the site/blog owner being worried about the possibility of inserted code that could endanger their site/blog or malicious script.

Usually, inside the code that they provide willl have the script that look like this :

<script src="http//externalsite.com/.....html/filename.js">
</script>
From the blog visitors, when the page loads, their browser will visited that external site to read and run the script of .js file. That is where the problems will come "if" the .js file contained with malicious script.
Because of this situation, many users decided to configured their browser to disable the script, so that the script will not be able to see/read, and this means that your visitor couldn't be able to view your recent comments.
So.. please be carefulll if you have an external JavaScript file link make sure that there is no malicious script inside, and regularly check the script from the initial script change. More better if you have your own Script on your own server.

To avoid the problem above, in this article, we are not going to upload the script to our site and makes you link to it. We'll let you have the full JavaScript code that we have used so that you know what goes into it. 

Go to your Dashboard >> Layout >> Page Elements >> and Add a Gadget >> Choose and click HTML/JavaScript gadget.
Named your new gadget, write in title column ex: New Blogger Tips Recent Comments.
Copy  the code below and Paste into the Content column.
<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i  ) {
var entry = json.feed.entry[i];
var ctlink;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k  ) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");

document.write('<li>');
document.write('<a href="'   ctlink   '">'   entry.author[0].name.$t   '</a>');
document.write(' on '   pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment   '...<a href="'   ctlink   '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75%;text-align:center"><a href="http://doit2us.blogspot.com/2010/03/how-to-make-recent-comments-ii.html">Learn How To Make This Widgets</a></div>');
}
</script>
<script src="http://doit2us.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>
You can set your "recent comments" display, by adjust these value..

The 5 value is the number of the last comment that will appear in your recent comments gadget.
The 100 value is the number of lenght characters comment in your recent comments gadget.
Don't forget to change http://doit2us.blogspot.com with your URL Site / Blog.

After finished configuring your HTML/JavaScript (setting the value and replace the URL) click save, and view your blog. You should have a Recent Comments widget showing the latest comments posted on your Blog.

This script has been added to the anticipation if our visitor disabled the JavaScripts browser, There will be warning text below our "recent comments title" that's says "You Need to enable JavaScript to read this"
That's all... Happy controlling your Recent Comments...

How To Make A Recent Comments I (Feed Widget)

>> Sunday, March 7, 2010

Two-way communication between the owners of a site, especially blogs, with their visitor are one of the most important thing for the development of the sites. In addition to ongoing the relationships with their visitors, the owners of the sites/blogs can digg up the information about strenghts and weaknesses of their sites, what are the visitors like and dislike, criticisms and suggestion and much more.

One of the way to building two-way communication within a site is to provide a visitors comments facilities. Almost all of the sites/blogs based on CMS like Blogger, Wordpress, Drupal, Joomla, Mambo. already have comments facilities for the visitors by defaults.

But the problem is... Along with increasing the number of articles made, it's rather difficult for the owner of sites to control (read and answer) because the location of the scattered comments in various articles that have been made.

The difficulty in controlling visitors comments that spread in various articles can be overcome by "Recent Comments" facilities. This Recent Comments will show up the last comments by the visitors in an article, hence the blog owner will soon find out that there are new comments in their articles, so that they can make a follow up.

In this article we will discuss how to make a recent comments with feed widget on Blogger.
Because we will use the Feed Widget, then first we must ensure that the Comment Feeds are enabled.

Go to your Dashboard >> click Settings of your Blog >> click Site Feed. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Then Save the Settings.  
 
Next Go back to Layout >> Page Elements >> Add a Gadget in your sidebar, select “Feed”. You will be prompted to enter a Feed URL.
 
There are two Feed URL we can used by default, you can choose one of them.
Atom Feed for the blog commnets like this: 
http://doit2us.blogspot.com/feeds/comments/default
 or RSS Feed as Blog Comments as follows :
http://doit2us.blogspot.com/feeds/comments/default?alt=rss
 

Please replace http://doit2us.blogspot.com with yours. After finished click Continue
 Next, You can set "how to display" your  recent comment. You can named your Recent Comments by insert the Title column, Setting how much last comment you want to show up (5 by default). You can also choose to displayed the dates and name of the authors or not. When you are satisfied with the setting, click to Save the Changes.
You still can set the position of your recent comments by drag and drop the widget to the relevant part of your template and Save the Template. 
In the next post we will discuss How To Make A Recent Comments With JavaScript

How To Make A Dropdown List Label Menu (II)

>> Friday, March 5, 2010

In How To Make A Dropdown List Label Menu (I) we discuss about How To Make A Dropdown List Label Menu  by modification The Label Gadget setting.
Although it was quite simple, this method could only make a dropdown list of Label and must have All list, we can not choose display exactly what we need.

In this article, we will discuss How To Make A Dropdown List Menu (II) that we can totally control what we want to display in the dropdown menu not just the label, although we must work a little hard than the first method.
How we can do it...? Yup.. by write the link one by one. Don't worry..., actualy this method is still simple but very usable, because with this method we could make a dropdown menu, whatever we want, not just a label list.

First.. we pick up the name or title of your dropdown menu, then you must note the URL address all of your link list.
The next step, we use our "Add a Gadget" facilities and add "HTML/JavaScript" to put the Code to make a dropdown menu.
Go to your Dashboard >> Layout >> Page Elements >> and click "Add a Gadget" >> than click HTML/JavaScript.

Copy this simple Script below, and Paste into the content column..
<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected> Your Menu Title  </option>
<option value=" Your Link Address "> Your Link Title </option>

</select>
</form> 
Please replace the Red, Blue and Purple with your menu title, link address that you've prepared before, and title to represented your link. After finished your work, don't forget to save it.

Here is an example:
<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected>-New Blogger Tips-</option>
<option value="http://doit2us.blogspot.com/2010/03/how-to-make-dropdown-list-label-menu.html">how to make a dropdown list</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-spoiler-in-second.html">how to make a spoiler</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-sticky-post-in-your-blogger.html">how to make a sticky post</option>
<option value="http://doit2us.blogspot.com/2010/02/how-to-make-drop-capital-letter-drop.html">how to make a dropcap</option>
<option value="http://doit2us.blogspot.com/2010/01/how-to-make-navigation-menu-bar-on.html">how to make a navigation menu</option>
<option value="http://doit2us.blogspot.com/2009/12/how-to-change-blogger-favicon-ico.html">how to change blogger favico</option>
<option value="http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html">how to add the add a gadget facilities</option>
</select>
</form>
And the Dropdown menu will look like this:




You can change Your Menu Title with instruction sentence like "click here to show", and put your menu title into HTML/JavaScript Title column.

We could also make a dropdown menu not only in a sidebar. but in the blog post too, exactly like in this article.. Simply.. Just write your code inside your blog post and tara... you,ve got your dropdown menu in your post.

How To Make A Dropdown List Label Menu (I)

>> Tuesday, March 2, 2010

A drop-down list is a user interface control GUI element, similar to a list box, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value (Wikipedia). In this case we will make a Label List.

This simple tricks is based on changing the Label Gadget settings. So the first step of course, you must already have to use or instal the Label Gadget in your blog.
If you have not install yet, then: Go to your Dashboard >> Layout >> Add a Gadget >> Choose Label and name it, ex: Blogger New Tips Label.
Note: Please choose/click the List Display


The next step is to change the display setting of our Label, by modidying the HTML Label Code.
Go to Layout >> Edit HTML >> and check your Expand Widget Template (Don't forget to backup your template first).
Search and find your Label codes, the easiest way is to find your "Label name", use ctrl+F to find it (Blogger New Tips Label). 
You will find similar code like this:
<b:widget id='Label1' locked='false' title='New Blogger Tips Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot;   data:display   &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot;   data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
To make a drop-down list label, just replace the red script with this blue one
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose The Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>
So the final script will be like this:
<b:widget id='Label1' locked='false' title='New Blogger Tips Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot;   data:display   &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
  
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose The Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>
 
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot;   data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/> 
And will be displayed like this:

That's all... Enjoy to make a dropdown list label menu...

 

  © New Blogger Tips For Us Free Blogger Template by Mc 2010.

Back to TOP