tag:blogger.com,1999:blog-68139559332543435262024-03-18T20:33:55.532-07:00" العاب العرب "Facebook Hacks , Andriod App,Gamesmcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.comBlogger285125tag:blogger.com,1999:blog-6813955933254343526.post-17902802124403558542009-06-06T17:35:00.000-07:002009-06-06T17:35:34.456-07:00Modefied Revolution Blogger template<span>Now you have the opportunity to download this SEO and <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Adsense</span> friendly ,fully hacked and widgetized Blogger template . This template is inspired from </span>Revolution Blogger template . <br />
<span id="fullpost"> </span><br />
<div style="text-align: center;"><span id="fullpost"></span><br />
<span id="fullpost"></span></div><span id="fullpost"> <div class="separator" style="clear: both; text-align: center;"> </div></span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQlokM0L43HjVByI3jVZy5U2gqOsv-i_gOiEHBctbWIXDSC8wf0vOdqOcy36GKv6WuEaE4earEdfNI1clTvWZrJ-pauXf6ptTO3yH5J9IgjEnIg4ZlZm_M26HetMbBKbG3WJta8TBNL78/s1600-h/Blogger+template+-Revolution+inspirit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQlokM0L43HjVByI3jVZy5U2gqOsv-i_gOiEHBctbWIXDSC8wf0vOdqOcy36GKv6WuEaE4earEdfNI1clTvWZrJ-pauXf6ptTO3yH5J9IgjEnIg4ZlZm_M26HetMbBKbG3WJta8TBNL78/s400/Blogger+template+-Revolution+inspirit.png" /></a></div><div style="text-align: center;"><span id="fullpost"></span><br />
<span id="fullpost"> </span></div><span id="fullpost"><ul><li>Search engine friendly ( meta tags , Blogger title hack included)<br />
</li>
<li> Fully customizable (You can change the color , Background image etc .)</li>
<li><span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Adsense</span> friendly ( Built for maximum CTR)</span></li>
<li>Related posts Widgets </li>
<li>Read more widget</li>
<li>Blogger footer page navigation</li>
<li>Smileys in comments</li>
<li>Customizable logo <span>Modified beautiful <a href="http://3rb-game.blogspot.com/2009/04/blogger-rss-or-email-subscription-form.html"><span class="IL_LINK_STYLE" style="color: #3300ff; font-family: Verdana; font-size: 12px; font-style: normal; font-weight: 400; text-decoration: underline;">email subscription</span></a> form</span></li>
<li>Animated favicons <br />
</li>
<li><span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Email subscription</span> below Blogger posts </span></li>
<li>Social bookmarking below posts (nofollowed for seo)</li>
<li>Social connection button on the top of navigation (nofollowed for seo)<br />
</li>
<li>Web 2.0 look and clean and easy to use navigation .</li>
</ul>Demo :<a href="http://www.techknowl.com/">www.techknowl.com</a><br />
<b style="color: white;"><a href="http://www.fileden.com/files/2008/7/6/1991483/Revolution%20Inspirit.rar" rel="nofollow" style="background-color: #d5a6bd;">Download</a></b> Revolution Inspirit Blogger template. </span>mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com17tag:blogger.com,1999:blog-6813955933254343526.post-65013581612018452572009-05-28T07:22:00.000-07:002009-05-29T09:06:45.544-07:00Add Top Comments automatically to Blogger<br />
<div style="text-align: center;">
Add Top Comments automatically to Blogger easy</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://a52.g.akamaitech.net/f/52/827/1d/www.space.com/template_images/top10/spc_top10_mainimg_440.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" dj="true" height="168" src="http://a52.g.akamaitech.net/f/52/827/1d/www.space.com/template_images/top10/spc_top10_mainimg_440.jpg" width="200" /></a></div>
<br />
<ol>
<li>go to your page element </li>
<li>add a Gadget and select HTML/JavaScript </li>
</ol>
<br />
and edit this code and change <span style="background-color: #f1c232;">3rb-game.blogspot.com</span> ,and add it to Html/JavaScript<br />
<br />
<blockquote>
<script type="text/javascript"><br />
function pipeCallback(obj) {<br />
document.write('<ol>');<br />
var i;<br />
for (i = 0; i < obj.count ; i++)<br />
{<br />
var href = "'" + obj.value.items[i].link + "'";<br />
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br />
document.write(item);<br />
}<br />
document.write('</ol>');<br />
}<br />
</script><br />
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=47909d73002419d14e697928bd9c4f24&url=http%3A%2F%2F<span style="background-color: #f1c232;">3rb-game.blogspot.com</span>&num=10&filter=yourname" type="text/javascript"></script><br />
<span style="font-size: 80%">Widget by <a href="http://3rb-game.blogspot.com/2009/05/add-top-comments-automatically-to.html">3rb Game Blogger</a></span></blockquote>
and save it<br />
<br />
<br />
C U in another post<br />
<br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com16tag:blogger.com,1999:blog-6813955933254343526.post-14639213479322676272009-05-28T07:03:00.000-07:002009-05-28T07:03:21.411-07:00Change older post and newer post icon. Sign in Blogger<br /><br />2. Layout<br /><br />3. Edit HTML<br /><br />4. Do not forget to give a check in the Expand Widget Templates<br /><br />5. Find the code below:<br /><blockquote>
<br /><b:if cond='data:newerPageUrl'><br /><span id='blog-pager-newer-link'><br /><a class = 'blog-pager-newer-link' expr: href = 'data: newerPageUrl'<br />expr: id = 'data: widget.instanceId + "_blog-pager-newer-link"'<br />expr: title = 'data: newerPageTitle'> <span style="background-color: white; color: blue;"><data:newerPageTitle/> </span></ a><br /></ span><br /></ b: if></blockquote>
<br /><br />6. Replace any posts over the blue with the code below:<br /><br /><br /><blockquote>
<br /><span style="color: blue;"><img src="http://alien.keren.googlepages.com/first.gif"/> </span></blockquote>
<br /><br />7. Then find this code:<br /><blockquote>
<br /><b:if cond='data:olderPageUrl'><br /><span id='blog-pager-older-link'><br /><a class = 'blog-pager-older-link' expr: href = 'data: olderPageUrl'<br />expr: id = 'data: widget.instanceId + "_blog-pager-older-link"'<br />expr: title = 'data: olderPageTitle'> <span style="background-color: blue; color: white;"><data:olderPageTitle/></span> </ a><br /></ span><br /></ b: if></blockquote>
<br /><br />8. Change the text color <span style="background-color: blue; color: white;">blue</span> with the code below:<br /><br /><span style="background-color: blue; color: white;"><img src="http://alien.keren.googlepages.com/last.gif"/> </span><br /><br />9. Then find this code:<br />
<blockquote>
<br /><b:if cond='data:blog.homepageUrl != data:blog.url'><br /><a class='home-link' expr:href='data:blog.homepageUrl'> <span style="background-color: red; color: white;"><data:homeMsg/></span> </ a><br /><b:else/><br /><b:if cond='data:newerPageUrl'><br /><a class='home-link' expr:href='data:blog.homepageUrl'> <span style="background-color: red; color: white;"><data:homeMsg/></span> </ a><br /></ b: if><br /></ b: if></blockquote>
<br /><br />10. Replace any posts over the <span style="background-color: red; color: white;">red</span> with the code below:<br /><blockquote>
<br />
<blockquote>
<span style="background-color: red; color: white;"><img src="http://alien.keren.googlepages.com/home.gif"/> </span><br /></blockquote>
</blockquote>
<br /><br />11. Save and see the results.mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com4tag:blogger.com,1999:blog-6813955933254343526.post-46447578016081967992009-05-21T16:23:00.000-07:002009-05-21T16:23:43.357-07:007 free SEO tools to analyze and optimize your website for speed and compatibility<div class="separator" style="clear: both; text-align: center;">
<a href="http://blog.gootum.com/wp-content/uploads/2007/08/seo-tools-header.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="155" src="http://blog.gootum.com/wp-content/uploads/2007/08/seo-tools-header.jpg" width="200" /></a></div>
<br />
When you first started blogging, you probably used to spend a lot of
time refining the design and making sure your site loaded quickly. You
basically made sure that is was technically sound and working well for
your visitors. However, after some time, your concentration may have
shifted to other important tasks such as writing good content,
marketing your blog, commenting on other blogs, writing guest posts,
etc.<br />
Here’s a list of free tools you should definitely check out to make
sure that your website is running at an acceptable level compared to
your fellow bloggers. If your site is not running optimally, then
you’re probably not getting the your full potential of traffic.<br />
<ol>
<li><span style="color: #3f3f3f;"><strong><a href="http://www.websitegrader.com/" rel="nofollow" target="_blank">Website Grader</a></strong> - I wrote about Website Grader a few months back as a <a href="http://www.online-tech-tips.com/seo/website-grader-a-free-search-engine-optimization-seomarketing-tool/">free search engine optimization tool</a>
that you should be using if you’re a webmaster. Website Grader will
give you a report of many aspects of your site and a final grade out of
100. When I first ran it on my site, I was at 56, now I’m up to 98. And
my traffic has gone from 100 visits a day to 5000. I’m not saying it’s
because of Website Grader, but it helped me determine problem areas.
</span>
</li>
<li><span style="color: #3f3f3f;"><strong><a href="http://www.xinureturns.com/" rel="nofollow" target="_blank">Xinu Returns -</a></strong> Another web site I had written about a couple of months back that lets you <a href="http://www.online-tech-tips.com/seo/check-your-pagerank-rating-backlinks-and-website-using-xinu/">quickly check things like your pagerank, rating, backlinks, and indexed pages</a>.
It’s a great tool to get a quick overview of your the status of your
site in the blogosphere. It also gives you tips for your title tags and
meta keywords.
</span>
</li>
<li><span style="color: #3f3f3f;"><strong><a href="http://browsershots.org/" rel="nofollow" target="_blank">BrowserShots</a></strong>
- This site is really awesome for webmasters. You type in your web
address and then choose all of the browsers and OSs that you would like
to see your website shown in. You can see how your web site looks on
Linux, Windows or Mac and in all of the different browsers, including
Firefox, IE, Safari, and Opera. You can also choose the screen size,
color depth, etc. Really great tool.
</span>
</li>
<li><span style="color: #3f3f3f;"><strong><a href="http://developer.yahoo.com/yslow/" rel="nofollow" target="_blank">YSlow</a></strong>
- YSlow is a Firefox only addon, but it is an amazing tool for
analyzing a website in terms of performance and speed. It checks 13
different factors for a web page and generates a final score for the
site. It also lists out the improvements that need to be made to ensure
the highest possible grade. I wrote two articles on YSlow, one about
how it helped me <a href="http://www.online-tech-tips.com/web-site-tips/how-i-increased-by-blogs-load-speed-by-50-using-yslow/">reduce the load time of my site by 50%</a> and another on <a href="http://www.online-tech-tips.com/web-site-tips/use-yslow-firefox-add-on-to-analyze-the-performance-of-your-web-site/">how to setup YSlow</a>. Make sure to read them and install Firefox just for this purpose.
</span>
</li>
<li><span style="color: #3f3f3f;"><a href="http://www.websiteoptimization.com/services/analyze/" rel="nofollow" target="_blank"><strong>WebSiteOptmization</strong></a>
- Another tool you can use that is similar to YSlow, but no need for
Firefox. It gives you a breakdown of various aspects of your site,
including HTTP requests, DNS lookups, etc and gives you recommendations
on how to make it load faster, etc.
</span>
</li>
<li><span style="color: #3f3f3f;"><strong><a href="http://builtwith.com/" rel="nofollow" target="_blank">BuiltWith</a></strong>
- BuiltWith is a very cool site that creates a profile of your website
based on what technologies your site is running on. This site really
focuses on the actual technologies that your site is built with, i.e.
PHP, Apache server, Google Analytics, etc. It also gives you a score
out of 5 stars depending on how good those technologies are.
Microsoft.com has a rating of 2/5! IIS sucks!
</span>
</li>
<li><span style="color: #3f3f3f;"><strong><a href="http://www.cssoptimiser.com/" rel="nofollow" target="_blank">CSS Optimizer</a> </strong>-
Just about every website uses CSS in some way or another and each call
to a CSS file takes time to download. If you can shrink the size of
your CSS files, even by a little bit, you’ll save a lot of time on page
loading. You can also go to the <a href="http://jigsaw.w3.org/css-validator/" rel="nofollow">W3C CSS Validation site</a> to make sure your CSS is valid.
</span>
</li>
<li><span style="color: #3f3f3f;"><strong><a href="http://code.google.com/p/minify/" rel="nofollow" target="_blank">Minify</a></strong>
- A very powerful tool that will take your JavaScript and CSS files and
combine them together and remove all unnecessary comments and
whitespace. I have used this tool before to reduce the size of my
Javascript files by almost 40%. You can imagine the savings in load
time because of that, especially if you use Wordpress where each plugin
usually has it’s own Javascript file. </span></li>
</ol>mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com6tag:blogger.com,1999:blog-6813955933254343526.post-90184582584164670752009-05-21T15:47:00.000-07:002009-05-21T15:47:34.300-07:00Show Only Post Title In Blogger Home Pages<span id="fullpost"><br />1.Login to Blogger<br />2.Go To LAYOUT<br />3.Then Click On Edit HTML<br />4.Check Mark Expand Widgets<br />5.Press Ctrl+F<br /><br />Now search For below code line in red :-<br /><br /></span><blockquote>
<span id="fullpost"><span style="color: red;"><b:include data='post' name='post'/></span></span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><br />And Replace it with Below Codes:-<br /><br /><div class="codeview">
<br /><blockquote>
<b:if cond='data:blog.homepageUrl<br />!= data:blog.url'><br /><br /><b:if cond='data:blog.pageType != "item"'><br /><br /><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3><br /><br /><b:else/><br /><br /><b:include data='post' name='post'/><br /><br /></b:if><br /><br /><b:else/><br /><br /><b:include data='post' name='post'/><br /><br /></b:if><br /></blockquote>
</div>
</span><span id="fullpost"><br /><br />Now Preview Your template. If it accepts Your Html.Then Save It.<br /><br />Now open your blog and click on the label or archive page of your blog it will show only post title .<br /><br />I hope you will be satisfied with it.This is one way.<br /><br />Now there is another way of doing it but the results are different.<br /><br />If
you want to show only title of posts in your blog home page also,then
only follow this way and implemet it.If you want only label page to
show post title just get stoppd after reading first way only.<br /><br />Now the second way to show only post title in blogger home page too.<br /><br />1.Login to Blogger<br />2.Go To LAYOUT<br />3.Then Click On Edit HTML<br />4.Check Mark EXpand Widgets<br />5.Press Ctrl+F<br /><br />Now search for this line in red :-<br /><br /></span><blockquote>
<span id="fullpost"><span style="color: red;"><p><data:post.body/></p></span></span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><br />After finding this line replace it with below codes :-<br /><br /><div class="codeview">
<br /><blockquote>
<b:if cond='data:blog.pageType == "item"'><br /><p><data:post.body/></p><br /></b:if><br /></blockquote>
</div>
</span><span id="fullpost"><br /><br />This will show only post title on all pages of blogger including homepage label and archive pages.<br /><br />One of my reader asked to show post title only in archive pages so i am placing code for him<br /><br />Just use these codes to replace the above red line in place of above codes.<br /><br /><div class="codeview">
<br /><blockquote>
<b:if cond='data:blog.pageType == "index"'><br /><p><data:post.body/></p><br /></b:if><br /></blockquote>
</div>
</span><span id="fullpost"><br /><br />And if you dont want to use post titles in archive pages use <span style="color: #ff6666;">archive in place of index</span> in above codes that's the only word making basic difference between the codes.<br /><br />*Note-If
you are using read more hack in your blogger you will get above red
line twice.So replace only the line that appears first in your blog
html code and leave second one as it is.<br /><br />And then preview your template,if its ok. Save It.<br /><br /><br /></span>mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com7tag:blogger.com,1999:blog-6813955933254343526.post-64298713258936851512009-05-21T15:28:00.000-07:002009-05-21T15:28:07.459-07:00Adding scroll bar to sidebar widgetsWe can add the scrollbar only to one or several of the widgets. To do that, we must first know the <span style="color: #3366ff; font-weight: bold;">ID</span>
of the widget. When we are at Template -> Edit HTML, scroll towards
the bottom of the template code. You will see something like this:-<br /><br /><br />
<blockquote>
<div id='sidebar-wrapper'><br /><b:section class='sidebar' id='sidebar' preferred='yes'><br /><b:widget id='<span style="color: #3366ff;">LinkList1</span>' locked='false' title='General' type='LinkList'/><br /><b:widget id='<span style="color: #3366ff;">HTML1</span>' locked='false' title='' type='HTML'/><br /><b:widget id='<span style="color: #3366ff;">Label1</span>' locked='false' title='Label' type='Label'/><br /></b:section><br /></div><br /><br /><br /></blockquote>
In
this example, we have added a Link List Page Element into our Sidebar
and the ID for this widget is “Linklist1”. If we have more link lists,
the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have
inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The
third widget we added is a Label list and the ID is “Label1”. Look at
your template and identify the widget. Take note of the <span style="color: #3366ff; font-weight: bold;">widget ID</span>.<br /><br />With the ID, we can now add the overflow property into the stylesheet under /* Sidebar Content */:-<br /><br /><blockquote>
/* Sidebar Content */<br />#Label1{<br />height:200px;<br />overflow:auto;<br />}<br /></blockquote>
<br />This will add the scroll-bar to the Labels widget only without affecting the other widgets. Insert the relevant <span style="color: #3366ff; font-weight: bold;">ID</span><span style="color: #3366ff;"> </span>of your widget into the portion shown in <span style="color: #3366ff; font-weight: bold;">blue</span>.<br />
<br />
another Method<br />
<br />
<span id="fullpost"><br />Select <span style="font-weight: bold;">HTML JAVASCRIPT </span>to add the page element .<br /><br />Now You have to add some html codes to his page element to show of the scroll bar menu widget to the sidebar of your blogger.<br /><br /><div class="codeview">
<br /><blockquote>
<div class="widget-content"><br /><ul style="height:<span style="color: red;">150px</span>;width:<span style="color: red;">150px</span>; overflow:auto; "><br /><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your Text</a></li><br /><li><a
href="<span id="fullpost">http://3rb-game.blogspot.com/</span>">Your
Text</a></li><span
style="font-weight:bold;"></span><br /><br /></ul></div><br /></blockquote>
</div>
</span><span id="fullpost"><br /><br /><br /><br />Copy this codes and paste it to page element and save it.<br /><br />Now preview your blog.<br /><br />You can change your links </span><span id="fullpost">http://3rb-game.blogspot.com/</span><span id="fullpost"> and text in the codes to show of yours links and posts.<br /><br /><span style="color: red;">Note:-</span>In the codes you can edit height and width in <span style="color: red;">red </span>to adjust it to your blog.</span><br />
<br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com4tag:blogger.com,1999:blog-6813955933254343526.post-40373136940363733872009-05-19T19:37:00.000-07:002009-05-19T19:37:59.481-07:00Syntax Highlighter For Blogger<span class="magazine">S</span>yntax Highlighter For Displaying any
types of Codes and Scripts In Blogger posts.As bloggers like us
sometimes need to post different languages codes in our posts basically
for programmers and some need to highlight some codes too in blogger
posts like me to have on tutorials and display css codes.<br />Syntax
highlighter is the plugin actually designed for wordpress blogs but we
can still use it in blogger platform but with some features.<br /><br />This is how the syntax highlighter looks below you would have seen in blogger posts.<br /><br />
<div style="text-align: center;">
<img src="http://img2.pict.com/2a/e4/de/28d1e7d39a1f82d93644aa460f/9bgdb/screenshot2b2.png" /><br /></div>
<br /><br />Now follow on these steps on how to install this syntax highlighter in blogger blog.<br /><br />Step 1 :<br /><br />Login to your Blogger account and navigate to Layout section . Then go to Edit Html Tab.<br /><br />Step:2<br /><br />Press Ctrl+F and search for <span style="color: blue;"></head></span><br /><br />Step 3:<br /><br />Add The below codes above this <span style="color: blue;"></head></span><br /><br /><div class="codeview">
<br /><blockquote>
<link href='http://www.sigmirror.com/files/16077_mfmek/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/><br /><script language='javascript' src='http://www.sigmirror.com/files/16075_vovs4/shCore.js'/><br /><script language='javascript' src='http://www.sigmirror.com/files/16067_qdw00/shBrushJava.js'/><br /><script language='javascript' src='http://www.sigmirror.com/files/16068_sxqrw/shBrushJScript.js'/><br /><script language='javascript' src='http://www.sigmirror.com/files/16074_y4x0p/shBrushXml.js'/><br /><script language='javascript' src='http://www.sigmirror.com/files/16065_pax2t/shBrushCss.js'/><br /><script language='javascript' src='http://www.sigmirror.com/files/16081_8ztl5/shBrushProperties.js'/><br /><script language='javascript' src='http://www.sigmirror.com/files/16080_4fwwe/shBrushBash.js'/><br /></blockquote>
</div>
<br /><br />Please download the all above js files and upload to your own server and chnage he above urls with yours as mine may not work because my server bandwidth exceeds very fast.<br /><br /><br />Now search for <span style="color: red;"></body></span><br /><br />And place the below codes above it.<br /><br /><div class="codeview">
<br /><blockquote>
<script language='javascript'><br />dp.SyntaxHighlighter.ClipboardSwf=&#39;http://www.sigmirror.com/files/16078_i3xhu/clipboard.swf&#39;;<br />dp.SyntaxHighlighter.BloggerMode();<br />dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);<br /></script><br /></blockquote>
</div>
<br /><br />Now save your template.<br /><br />If you find it difficult,add this widget direct <a href="http://fazibear.googlepages.com/blogger.html" rel="nofollow" target="blank">from this page</a>.<br /><br />Now whenever you are posting codes in your blog posts place the codes between these tags in your posts.<br /><br /><div class="codeview">
<br /><blockquote>
<pre name="code" class="<span style="color: red;">java</span>"><br /><----Your all codes Go here---><br /></pre><br /></blockquote>
</div>
<br /><br />Change
the class java to any other language if your using that in your codes
like css,javascript,c-sharp or any else.And please only you add those
languages that you have included in your html that you have added as i
told you to add before /head tag.<br /><br />If you want any other language codes to place and not having it please get it all<br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com6tag:blogger.com,1999:blog-6813955933254343526.post-3789278309421604992009-05-15T23:00:00.000-07:002009-05-15T23:00:40.270-07:00Custom Search Bars with Image and CSS<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.cobbcat.org/images/OneSearchGlass.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://www.cobbcat.org/images/OneSearchGlass.jpg" width="200" /></a></div>
<br />
Attention to detail is what separates <a href="http://www.csszengarden.com/" target="_blank">great web layouts</a> from <a href="http://www.rickyswebtemplates.com/" target="_blank">average ones</a>.
Incorporating custom elements, like bullet points and search boxes, can
elevate your website into a clean, cohesive design. However, creating a
custom search box with OnMouseOver-like effects can be difficult,
particularly when styling for multiple browsers.<br />
This tutorial will teach you how to add custom form boxes (a search
bar) to your designs, and in browsers that format CSS correctly (read:
not IE anything, although there is an IE fix for other problems) we’re
going to have nice, fancy image replacements when you click on the
search box, using the :focus pseudo class. Note: This does NOT work
right in Safari, because it doesn’t know how to render transparent form
inputs. Shame.<br />
<span id="more-8"></span><br />
We’re going to step away from trade shows for this post to let me,
the webmaster, write a short “how to:” for creating custom search bars
with image replacement using CSS. When I was first presented with the
idea of a custom search box, I searched the Google for hours trying to
come up with a solution, but in the end I couldn’t find one to achieve
what I wanted, hence this tutorial.<br />
Although this example is tailored to a search bar, the same
principles can be applied to any <form>.What’s the point of
creating a beautiful web layout if you’re going to slap default form
boxes on it?<br />
<h1>
Overview</h1>
When it comes to adding search boxes to websites, the vast majority
of them are plain and boring. Replacing the search button is pretty
common, but the actual input box remains white and boxy. About the most
creative that the majority of websites get is adding a colored border
or changing the inside color.<br />
I’ve seen examples of custom search bars, but most of them break down in IE7, like <a href="http://www.sacbee.com/" target="_blank">Sacbee.com.</a>
It looks nice and Mac-esque, but type more characters than can fit on
one screen and the image exits stage left, leaving you with a blank
search box. You could add an image that <a href="http://www.bartelme.at/" target="_blank">repeats-x,</a>
but that is pretty limited. Using some basic HTML and advanced CSS, we
can get the desired effect (almost in IE) without having to use
Javascript.<br />
Example: (Note: the positioning will be off in IE, because Wordpress
is rudely changing a <div> tag into a <p> tag that closes
too early for reasons that baffle me)<br />
<div class="search">
</div>
<form action="/cgi-sys/entropysearch.cgi" target="searchwindow">
<input class="search_field" name="query" type="text" value="search" />
<input class="searchbg" name="searchbg" type="hidden" />
<input name="user" type="hidden" value="nimlokl" />
<input name="basehref" type="hidden" value="http://nimlok-louisiana.com" />
<input name="template" type="hidden" value="default" />
<input class="search_button" src="http://www.nimlok-louisiana.com/images/search-btn.gif" type="image" value="Search" /> </form>
<br />
<h1>
Creating the Search Form</h1>
The first step is creating your search box form. If you are planning
on upgrading your current website’s search box, this step will be easy.
If you have to implement a search script yourself, it can be a little
harder, but not by much. There are plenty of free search scripts that
will index and search your website, and most hosting packages with some
kind of accessible control panel will come with one, which is what I
will be using in my example. However, note that the result page is
probably going to be very ugly, and requires some formatting to get it
to look like your web template. A bigger job for another day.<br />
Below is a standard search form input, as dictated to me by the cgi search script when I set it up on my server.<br />
<blockquote>
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”><br />
<input name=”query” value=”search” type=”text”><br />
<input name=”user” value=”nimlok” type=”hidden”><br />
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”><br />
<input name=”template” value=”default” type=”hidden”><br />
<input value=”Search” type=”submit”><br />
</form></blockquote>
Which looks like this:<br />
<code><br />
</code><br />
<form action="/cgi-sys/entropysearch.cgi" target="searchwindow">
<input name="query" type="text" value="search" />
<input name="user" type="hidden" value="nimlok" />
<input name="basehref" type="hidden" value="http://nimlok-louisiana.com" />
<input name="template" type="hidden" value="default" />
<input type="submit" value="Search" /></form>
Pretty ugly, wouldn’t you say?<br />
<h1>
Assembly</h1>
Let’s start with the images I want to put there instead: two search
input boxes (one for normal and one for focused state) and a search
button.<br />
<img height="23" src="http://www.nimlok-louisiana.com/images/search-box-3.gif" width="99" /><img src="http://www.nimlok-louisiana.com/images/search-box.gif" /><img height="23" src="http://www.nimlok-louisiana.com/images/search-btn.gif" width="55" /><br />
<o:p> </o:p><br />
These images are really easy to make in Photoshop; they’re just
rounded rectangle shapes with a pattern fill and a 2px stroke. The
search button itself uses the magnifying glass shape included in
Photoshop, so you can recreate simple images like these in about 15
minutes.<br />
<h1>
The Search Button</h1>
The first step is changing out the default images with our new ones.
Start with the search button, the code for which currently looks like
this:<br />
<blockquote>
<input value=”Search” type=”submit”></blockquote>
change the type to “image” and add in the path to your new image, in
my case, src=”http://www.nimlok-louisiana.com/images/search-btn.gif”.
This is also a good time to add a “search_button” class to give it a 0
border and positioning.<br />
<blockquote>
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”></blockquote>
<form action="/cgi-sys/entropysearch.cgi" target="searchwindow">
<input name="query" type="text" value="search" />
<input name="user" type="hidden" value="nimlok" />
<input name="basehref" type="hidden" value="http://nimlok-louisiana.com" />
<input name="template" type="hidden" value="default" />
<input class="search_button" src="http://www.nimlok-louisiana.com/images/search-btn.gif" type="image" value="Search" /></form>
It’s not positioned quite correctly, but we’ll fix that later.<br />
<h1>
The Search Box</h1>
Next, we need to switch out that ugly white rectangle for something
that matches your website’s design. You’ll note the search script told
me to add several type=”hidden” fields to my search form. We’re going
to add another one to get the desired background effect, allowing us to
effectively stack the background underneath the search field.<br />
Immediately after the INPUT line that controls the text input (the
one of type=”text”) add a new hidden field. This hidden field will not
show up in IE, although it will in Firefox. We’ll fix IE later; for
now, let’s focus on getting it to work in Firefox.<br />
<input name=”searchbg” value=”” type=”hidden” class=”searchbg”><br />
Then, add the searchbg class into your style sheet. This will
determine which image shows up originally in Firefox (and other
browsers that I haven’t tested). It has no effect on IE.<br />
<blockquote>
.searchbg<br />
{<br />
background:url(http://www.nimlok-louisiana.com/images/search-box-3.gif) no-repeat;<br />
width:101px;<br />
height:23px;<br />
display:block;<br />
border: 0;<br />
}</blockquote>
<form action="/cgi-sys/entropysearch.cgi" target="searchwindow">
<input name="query" type="text" value="search" />
<input class="searchbg" name="searchbg" type="hidden" />
<input name="user" type="hidden" value="nimlok" />
<input name="basehref" type="hidden" value="http://nimlok-louisiana.com" />
<input name="template" type="hidden" value="default" />
<input class="search_button" src="http://www.nimlok-louisiana.com/images/search-btn.gif" type="image" value="Search" /></form>
This still looks pretty rough. Add class=”search_field” to your
<input type=”text”> field (the actual search bar), and add the
following style code.<br />
<blockquote>
.search_field<br />
{<br />
float:left; /* this will make the images line up */<br />
border:0;<br />
padding:0;<br />
width:92px; /* the width of the actual search box, must be shorter than your image so it fits inside it. */<br />
height:20px; /* again, must be slightly less than the image size */<br />
background-color:transparent; /* Makes the search field invisible so
you can see the image we want underneath. This doesn’t work in Safari,
so I may go back later and give them their own style sheet. For now,
I’m not bothered by this small inconvenience. */<br />
}</blockquote>
<h1>
:Focus Pseudo Class</h1>
Now it’s time for the fun part, making the images change in Firefox when you click on the search box.<br />
This is achieved with an advanced CSS psuedo class called :focus.
The focus tag is how you get an element to change when you click on it.
You can also do :hover and :active (which have similar effects) to act
as an OnMouseOver-like tag.<br />
<blockquote>
.search_field:focus + .searchbg<br />
{<br />
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) no-repeat;<br />
}</blockquote>
The + .searchbg tells the code to change the .searchbg class whenever you focus on the .search_field.<br />
Looks pretty good, doesn’t it? In Firefox, I mean.<br />
<form action="/cgi-sys/entropysearch.cgi" target="searchwindow">
<input class="search_field" name="query" type="text" value="search" />
<input class="searchbg" name="searchbg" type="hidden" />
<input name="user" type="hidden" value="nimlok" />
<input name="basehref" type="hidden" value="http://nimlok-louisiana.com" />
<input name="template" type="hidden" value="default" />
<input class="search_button" src="http://www.nimlok-louisiana.com/images/search-btn.gif" type="image" value="Search" /></form>
<h1>
IE Calamity</h1>
Now, if you’ve been following along in IE, you may be curious as to
why the image isn’t showing up for you. IE interprets hidden fields
differently–maybe more correctly, I mean, they ARE hidden–and so you’re
left in the dark.<br />
There’s an easy solution to this, and it involves conditional comments.<br />
We’re going to add a new class called .searchbgIE, and use it in a
div to wrap around the entire form. Putting the image as a div
background is important. If you put it on the form input background
(.search_field) it will move to the left and out of view in IE7 as you
type.<br />
As a plus, we’re going to make it only appear in IE by using the
<!–[if IE]> <![endif]–> conditional comment. Since this
isn’t technically a “CSS hack,” it will still validate.<br />
<blockquote>
<!–[if IE]><div class=”searchbgIE”><![endif]–><br />
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”><br />
<input name=”query” value=”search” class=”search_field” type=”text”><br />
<input name=”searchbg” value=”” class=”searchbg” type=”hidden”><br />
<input name=”user” value=”nimlokl” type=”hidden”><br />
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”><br />
<input name=”template” value=”default” type=”hidden”><br />
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”><br />
</form><br />
<!–[if IE]></div><![endif]–><br />
The class .searchbgIE looks like this<br />
.searchbgIE<br />
{<br />
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) no-repeat;<br />
width:101px;<br />
height:23px;<br />
display:block;<br />
border:0;<br />
}</blockquote>
<div class="search">
</div>
<form action="/cgi-sys/entropysearch.cgi" target="searchwindow">
<input class="search_field" name="query" type="text" value="search" />
<input class="searchbg" name="searchbg" type="hidden" />
<input name="user" type="hidden" value="nimlokl" />
<input name="basehref" type="hidden" value="http://nimlok-louisiana.com" />
<input name="template" type="hidden" value="default" />
<input class="search_button" src="http://www.nimlok-louisiana.com/images/search-btn.gif" type="image" value="Search" /> </form>
<br />
It’s not positioned quite right, but I’ll fix all the positioning
later, when Wordpress isn’t screwing it up. The plus of this is that I
don’t have to worry about the positioning for the IE background messing
up the positioning for Firefox’s; they use different classes.<br />
<h1>
Tie off loose ends</h1>
Now, wrap the entire thing in a div using the class .search, so you
can position everything together. Throw a position:relative on it so
that we can absolutely position everything inside. (Note: again, this
doesn’t appear correctly in this tutorial, because of the way Wordpress
converts my code into nonsense. Check the <a href="http://www.nimlok-louisiana.com/" target="_blank">Nimlok Homepage</a> for a working example in IE.)<br />
.search<br />
<blockquote>
{<br />
position:relative;<br />
height:23px;<br />
padding:0;<br />
margin: 0px 0px 0px 0px; /* change this to position how you like */<br />
}</blockquote>
<blockquote>
Your HTML code should look like this:<br />
<div class=”search”><!–[if IE]><div class=”searchbgIE”><![endif]–><br />
<form action=”/cgi-sys/entropysearch.cgi” target=”searchwindow”><br />
<input name=”query” value=”search” class=”search_field” type=”text”><br />
<input name=”searchbg” value=”” class=”searchbg” type=”hidden”><br />
<input name=”user” value=”nimlokl” type=”hidden”><br />
<input name=”basehref” value=”http://nimlok-louisiana.com” type=”hidden”><br />
<input name=”template” value=”default” type=”hidden”><br />
<input value=”Search” class=”search_button” src=”images/search-btn.gif” type=”image”><br />
</form><br />
<!–[if IE]></div><![endif]–> </div></blockquote>
Completed Style Sheet, with positioning fixed. This is just how it looked best positioned on mine.<br />
.search<br />
<blockquote>
{<br />
margin: -8px 0px 0px 11px;<br />
padding: 0;<br />
position:relative;<br />
height:23px;<br />
}<br />
.searchbgIE<br />
{<br />
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) 3px 1px no-repeat;<br />
width:101px;<br />
height:23px;<br />
display:block;<br />
border: 0;<br />
}<br />
.searchbg<br />
{<br />
background:url(http://www.nimlok-louisiana.com/images/search-box-3.gif) 2px 1px no-repeat;<br />
width:101px;<br />
height:23px;<br />
display:block;<br />
border: 0px;<br />
}<br />
.search_button<br />
{<br />
position:absolute;<br />
top:-1px;<br />
left:100px;<br />
border: 0px;<br />
margin: 0px 0px 0px 2px;<br />
}</blockquote>
<blockquote>
.search_field<br />
{<br />
float:left;<br />
border:0;<br />
margin-left: 7px;<br />
margin-top: 4px;<br />
padding: 0;<br />
width:92px;<br />
height: 20px;<br />
padding: 0px 0px 0px 0px;<br />
font: 1.0em Arial;<br />
background-color:transparent;<br />
}<br />
.search_field:focus + .searchbg<br />
{<br />
background:url(http://www.nimlok-louisiana.com/images/search-box.gif) 2px 0px no-repeat;<br />
}</blockquote>
<div class="search">
</div>
<form action="/cgi-sys/entropysearch.cgi" target="searchwindow">
<input class="search_field" name="query" type="text" value="search" />
<input class="searchbg" name="searchbg" type="hidden" />
<input name="user" type="hidden" value="nimlokl" />
<input name="basehref" type="hidden" value="http://nimlok-louisiana.com" />
<input name="template" type="hidden" value="default" />
<input class="search_button" src="http://www.nimlok-louisiana.com/images/search-btn.gif" type="image" value="Search" /> </form>
<br />
<h1>
The End</h1>
This is it for the tutorial. By this point, you should have a
working custom search bar, with a delightful :focus effect in Firefox.<br />
I’m by no way an advanced CSS user, so if anyone has any suggestions
for improvement, please leave me a comment, and I will update this
guide accordingly.mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com2tag:blogger.com,1999:blog-6813955933254343526.post-12991621279790052382009-05-15T22:51:00.000-07:002009-05-15T22:51:01.301-07:00Top Blogger Hacks Make Your Blog Professional<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Yh50ZQBrSMJ5YR8Paq9QUXxznVFsvWDhvNhi55WYsuAkDio4nrIsdlp7vlFVmKGO0LQhq9JD8PpegcnwwHmNY05eY21cEUNGAE2PP3L2Ulxyxbsz96c7Z8vM-I8zUzp1Y1oxi15SKtiN/s1600/Blogger-Hacks.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Yh50ZQBrSMJ5YR8Paq9QUXxznVFsvWDhvNhi55WYsuAkDio4nrIsdlp7vlFVmKGO0LQhq9JD8PpegcnwwHmNY05eY21cEUNGAE2PP3L2Ulxyxbsz96c7Z8vM-I8zUzp1Y1oxi15SKtiN/s320/Blogger-Hacks.jpg" /></a></div>
<br />
<br />Things are quite easy and enjoyable for bloggers who are blogging on
self hosted blog with wordpress blogging script. Lots of useful plugins
are available online for free to make blog professional. For
blogger.com users things are bit difficult but not much. I used to be
such blogger myself, in fact I still blog on my free blogspot blog.
Here is the list of hacks that can make your blog impressive.<br />
<strong><br />
</strong><br />
<h2>
<strong>SEO Hacks For Blogger.com</strong></h2>
<strong>Different Title/Description to post hack</strong><br />
We all know how important SEO is to get rank in search result. Time
and effort will go in vain if your post doesn’t get rank for keywords,
and apparently you are not going to get what you have started blogging
for. This hack will provide separate title and description to your
particular post. I have achieved extremely <a href="http://fragmentedblog.blogspot.com/2008/06/i-know-seo-i-guess.html">good result</a> because of this hack. You don’t have to use any Java Script. It is the easiest hack to be applied. <a href="http://fragmentedblog.blogspot.com/2007/12/swapping-title-description-for-posts.html">Configure this hack</a>.<br />
<strong> ‘Read More’ Link Hack</strong><br />
You must have landed on kind of blogs where home page shows only
some initial part of post and you have to click on ‘Read More’ or
‘Continue’ link to read full post. Wordpress bloggers call it Excerpt
plugin. Google doesn’t provide any option for such navigation, so, you
have to manually configure this hack. This hack ensures that visitors
click on your post link to read full post. This is quite good strategy
to increase clicks on your blog. <a href="http://lasvak.googlepages.com/expanbale-post.html">Click Here For Hack </a><br />
<strong>Tag Clould Hack</strong><br />
Tag cloud is collection of keywords that best describes the content
of the post. Most frequently the used keywords (in our case a ‘label’)
will be distinguished by high font weight and font size. Click here to
configure <a href="http://lasvak.googlepages.com/create-tag-clouds.html">this hack</a>.<br />
<strong><br />
</strong><br />
<h2>
<strong>Web 2.0 Effect Hacks</strong></h2>
<strong> </strong><br />
<strong>Deepjax / Ajax Lable Hack</strong><br />
This hack is the one that I am using on my blogger blog (Click on
blue top horizontal tab). It gives wonderfull effect of web 2.0. It is
the form of ajax label hack. Deepjax is the name I have given to this
hack as its been created by <a href="http://blog.deepakiyer.com/">Deepak</a> (To give him credit). Click Here to <a href="http://lasvak.googlepages.com/deepak-ajax.html">configure this hack</a>.<br />
<strong>Tabview Widget</strong><br />
Tabview is the very famous widget. You can find tabview widget to
all major websites (specially news portal websites) like yahoo and
about.com. Hoctro is the developer of this hack. It is very good
solution to display recent post, recent comments and links at just one
spot. Click here to <a href="http://lasvak.googlepages.com/tabview-1.html">configure this hack</a>.<br />
<strong>Add Social BookMark Buttons To Post Hack</strong><br />
Social bookmarking sites are the latest buzz on internet. Millions
of users of sites, like digg, Stumbleupon and Del.icio.us, submit or
rate an article to this sites. More ratting will give you more traffic.
Even a normal person can get his article exposed to international
readers. Configure this <a href="http://lasvak.googlepages.com/LasVak-SoCial-ButtonS.html">hack</a>.<br />
<strong>Widget on Particular Post</strong><br />
By default your all widgets can be seen on all blog posts. This hack
enables you to display a particular widget on related post. You can
also use this hack to show a widget on all post except on home page.
Configure this <a href="http://lasvak.googlepages.com/widget-on-posts-only.html">hack</a>.<br />
<strong><br />
</strong><br />
<h2>
<strong>General Hacks</strong></h2>
<strong>Welcome Note / Few words Hack</strong><br />
It would be nice if you can display welcome note to greet visitors
on home page and not on all post (it can be done with ‘wideget on
particular post’), and it will be really great if you can display few
words on all labels. <a href="http://lasvak.googlepages.com/widget-on-lables.html">Click here</a> for hack<br />
<strong>Comments List Widget</strong><br />
Recent comment hack displays list of comments (with link of the
commentors’ blog). It is the good way to give traffic to who have
commented thus you can pay back your readers and enticed them to leave
comments again. <a href="http://lasvak.googlepages.com/recent-comment.html">Guide to get this hack</a> .<br />
<strong>Related Posts List Widget Hack</strong><br />
This hack will list the post urls posted with same label. readers
are most likely to visits post if the post is about something
interested in. A good way to keep visitors spending more time on your
blog. <a href="http://hoctro.blogspot.com/2007/01/killer-hack-related-articles-by-labels.html">Use this hack</a>.<br />
I have successfully applied all hacks on my blogspot blog. You may leave comment for support, if you have any trouble.mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com4tag:blogger.com,1999:blog-6813955933254343526.post-85651512670688177572009-05-15T22:15:00.000-07:002009-05-15T22:16:30.140-07:00Text Links To Make Money and Increase Traffic<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.linkshowoff.com/images/lsologo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.linkshowoff.com/images/lsologo.png" /></a></div>
<br />
Text based link ads has been playing pivotal role in online
industry. In fact it has changed the complexion of online marketing
scenario ever since Yahoo and Google started giving more importance to
the text link to determine quality of a page. In other words you can
say text-link is support system of current search algorithm. Knowing
this fact, webmasters begun to exchange and sell links which,
eventually, was manipulating search results. Finally Google stopped
considering links on <a href="http://en.wikipedia.org/wiki/Link_farm">link Farm</a> pages as real links or natural links.
<br />
Many text link ads services have tried to find middle way. Some are
coming up with good, more importantly improved, ideas to provide a hub
where advertiser and publisher can get togather for their need.<a href="http://linkshowoff.com/register.php?accid=1503"> LinkShowOff</a>
is one such service. It is a link based marketplace where advertisers
can find a platform to advertise with few easy steps and bloggers can
earn by selling links to them.<br />
<a href="http://linkshowoff.com/register.php?accid=1503" title="Text Link Ads: LinkShowOff">Linkshowoff</a>
has learned from the failure of the predecessors like TNX.net and
TLA.com. It displays the link with nofollow attribute. Advertiser and
publisher will not have to afraid of penalty from link-o-centric search
engines since it won’t pass the link juice regardless of the quality of
the website.<br />
<b>How it works?</b><br />
After you <a href="http://linkshowoff.com/register.php?accid=1503">sign up</a>
you will have to create a widget where you need to information like
URL, Title, Category, Slots (Number of links), Approval method,
description, Cost for each link to be displayed, Color of widget and
tags. You will be provided javascript code according to your widget
information, which you are supposed to place on your site or blog.<br />
<b>For Publishers….</b><br />
<ul>
<li>Publishers (webmaster and bloggers) decides cost of a slot to display on their blog.</li>
<li>Your website/blog will be listed at <a href="http://linkshowoff.com/directory/">LinkShowOff Directory.</a></li>
<li>Advertisers pay you the amount you have deiced and their link will be up on your widget.</li>
</ul>mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com3tag:blogger.com,1999:blog-6813955933254343526.post-4039796745058578892009-05-15T21:37:00.000-07:002009-05-15T21:37:01.262-07:00Free Css/Html Horizontal Menu<div class="separator" style="clear: both; text-align: center;">
<a href="http://nodstrum.com/images/CSSEditLogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://nodstrum.com/images/CSSEditLogo.png" width="200" /></a></div>
<br />
<br />This is a simple light dynamic Css/Html vertical menu with a light
gradient and a border that you can use on your site. . . this menu is a
cross browser complaint (Mozilla, IE6, IE7, Safari). And Here you can
see the <a href="http://freshreleased.com/demo/CSSHM/cssHM.html" onclick="" target="_blank"><strong>DEMO</strong></a> . And also you can See and download the images <a href="http://freshreleased.com/demo/CSSHM/images/" onclick="" target="_blank"><strong>here</strong></a>.<br />
<span id="more-214"></span><br />
<strong>CSS code:</strong><br />
<blockquote>
ul#hmenu {<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
overflow:hidden;<br />
width:900px;<br />
height:40px;<br />
background:url(images/HM_bg.jpg) repeat-x;<br />
}<br />
ul#hmenu li {<br />
float:left;<br />
background:url(images/HM_border.jpg) right no-repeat;<br />
padding:0 2px 0 0;<br />
}<br />
ul#hmenu li a {<br />
display:block;<br />
padding:0 28px 0 30px;<br />
height:40px;<br />
width:auto;<br />
font:bold 14px Arial, Helvetica, sans-serif;;<br />
color:#FFFFFF;<br />
text-decoration:none;<br />
float:left;<br />
line-height:40px;<br />
}<br />
ul#hmenu li a:hover {<br />
background:url(images/HM_bg_hover.jpg) repeat-x;<br />
}</blockquote>
<strong>HTML code:</strong><br />
<blockquote>
<ul id=”hmenu”><br />
<li><a href=”#”>Home</a></li><br />
<li><a href=”#”>About</a></li><br />
<li><a href=”#”>Privacy</a></li><br />
<li><a href=”#”>Contact Us</a></li><br />
</ul></blockquote>mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com1tag:blogger.com,1999:blog-6813955933254343526.post-68216251718029806692009-05-15T21:33:00.000-07:002009-05-15T21:33:49.161-07:00Magazine Blogger Template Free Download<div class="separator" style="clear: both; text-align: center;">
<a href="http://lasvak.googlepages.com/big-magazine-blogger-template.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="http://lasvak.googlepages.com/big-magazine-blogger-template.gif" width="200" /></a></div>
<br />
Great blogger template. This is the first of its kind magazine style
blogger template. Really good work. This is three columns blogger
template. Sidebar consisted of wide bar. Posts are arranged in grid
manner. The extreme of the professional blogger template. Tab widget
provided at the end makes it much professional.<br />
This template have broken all the design barriers for blogger users.<br />
It is the magazine wordpress theme converted to blogger template by
Falconhive.com. I am sure converting this theme to blogger template
would have been much time consuming and head eating.<br />
<br />
Wordpress Theme: <a href="http://blog.lasvak.com/2009/04/magazine-blogger-template-free-download/www.webhostinggeeks.com/">Click Here</a><br />
Demo: <a href="http://zinmag-remedy-template-strict.blogspot.com/">Click Here</a><br />
Download: <a href="http://www.box.net/shared/tfb1s9vhme">Click Here</a><br />
Converter: <a href="http://www.falconhive.com/">Click Here</a><br />
<br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com1tag:blogger.com,1999:blog-6813955933254343526.post-68712547631365161082009-05-15T21:30:00.000-07:002009-05-15T21:30:22.322-07:00Top Ten Wordpress Plugins For Free<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVIM9btw5twsMyqsrMRdhvUxhW2AZjeA3tD_LBAtgLvAEjTlYJn3XRfKHtax6ucGtuGc-j-BQ95J9wWtPK-ktjC-KXazs-GOsHAoHLElJKm0au4lHwz52iOcGfFFdHWV9RY2m5khCZe0/s1600/best-wordpress-plugins.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVIM9btw5twsMyqsrMRdhvUxhW2AZjeA3tD_LBAtgLvAEjTlYJn3XRfKHtax6ucGtuGc-j-BQ95J9wWtPK-ktjC-KXazs-GOsHAoHLElJKm0au4lHwz52iOcGfFFdHWV9RY2m5khCZe0/s400/best-wordpress-plugins.jpg" /></a></div>
<br />
Wordpress
Blogging script is an open source script i.e. one can add more
functions by having installed small program. Wordpress named it <span style="font-weight: bold;">plugins</span>.
There are many plugins out there to enhance functionality of the
blogging script. I am listing here the plugins which are highly useful.
Some of them are very famous and some are underdog.<br />
<span style="font-weight: bold;">Top WP-Cache </span><br />
Function of WP-Cache to create static (or you can say cache) of the
posts and serve them without going to MySQL database. Intention is to
let the visitors surf your blog fast. It is very powerful technique to
manage huge traffic without putting load on server. There is no better
way to handle sudden traffic from social bookmarking sites.<br />
<a href="http://mnm.uib.es/gallir/wp-cache-2/">http://mnm.uib.es/gallir/wp-cache-2/</a><br />
<span style="font-weight: bold;">Chunk URLs </span><br />
New bloggers usually place comments, leave URL in comment on others
blog in order to drive some traffic. If the URL is long it might make
the blog design awkward. This plugin will make long urls into shorter
one.<br />
<a href="http://www.village-idiot.org/archives/2006/06/29/wp-chunk/">http://www.village-idiot.org/archives/2006/06/29/wp-chunk/</a><br />
<span style="font-weight: bold;"><br />
Head Meta Description</span> [SEO Plugin]<br />
As an blogger you know how important is to rank well in search
result. This is an execellent plugin to optimize your every post with
unique description meta tag. Keyword meta tag hold no more value in
SEO. But meta description is still one of the important part to decide
ranking position.<br />
<a href="http://guff.szub.net/2005/09/01/head-meta-description/">http://guff.szub.net/2005/09/01/head-meta-description/</a><br />
<span style="font-weight: bold;"><br />
All In One SEO Pack</span> [SEO Plugin]<br />
You don’t need to worry about SEOing your blog. Everything will be
taken care by this plugin. Improve traffic from search engines by
installing this plugin.<br />
<a href="http://wordpress.org/extend/plugins/all-in-one-seo-pack/">http://wordpress.org/extend/plugins/all-in-one-seo-pack/</a><br />
<span style="font-weight: bold;"><br />
Wordpress Database Backup</span><br />
Do I need to explain how important it is to take backup of
everything of your blog (specially hard written content of the posts).
Take backup automatically or whenever you wish with the help of this
plugin.<br />
<a href="http://www.ilfilosofo.com/blog/wp-db-backup">http://www.ilfilosofo.com/blog/wp-db-backup</a><br />
<span style="font-weight: bold;">Google XML Sitemaps</span> [SEO Plugin]<br />
Wow! I just love it. Small, albeit very useful, plugin to create
sitemap of the blog. Yahoo, Live and Google loves XML sitemap a lot.
Plugin will help to create and update the sitemap. Just install once
and forget forever about any sitemap issues.<br />
<a href="http://www.arnebrachhold.de/redir/sitemap-home/">http://www.arnebrachhold.de/redir/sitemap-home/</a><br />
<span style="font-weight: bold;">Related Posts</span> [Navigation lugin]<br />
Most famous plugin in blogsphere. Listing up related posts at the
end of a perticualr post is good practice to serve more your visitors
about what they like. Increase page views per vistor by installing this
plugin.<br />
<a href="http://wasabi.pbwiki.com/Related%20Entries">http://wasabi.pbwiki.com/Related%20Entries</a><br />
<span style="font-weight: bold;">Adsense Delux</span> [Monetize]<br />
Monetizing your blog with Adsense is easiest way to make money off your
blog. Adsense Deluxe enable you to insert adsense code in either posts
or anywhever in you blog.<br />
<a href="http://www.acmetech.com/blog/adsense-deluxe/">http://www.acmetech.com/blog/adsense-deluxe/</a><br />
<span style="font-weight: bold;">Google Analytics for WordPress</span><br />
Traffic monitoring and tracking activities of visitors on your blog
has been very easy with Google Analytics which is free. The plugin help
you to add analytics code in a blog.<br />
<a href="http://wordpress.org/extend/plugins/google-analytics-for-wordpress/">http://wordpress.org/extend/plugins/google-analytics-for-wordpress/</a><br />
<span style="font-weight: bold;">Akismet spam protection</span> [Spam Prevention Plugin]<br />
One of the worst thing in blogging is spam of comments. Akismet has
became unseparable part of wordpress blogging. You can imagine how
important the plugin is as it is already installed in script. Job of
this plugin is to…<br />
<ul>
<li>Protect prevent spam comments, which eventually save your lots of time.</li>
<li>Churn out spam comments from good comments.</li>
</ul>
For best result use Math Comment Spam Protection.<br />
<span style="font-weight: bold;">Democracy Plugin</span><br />
Running a poll is most user-interactive task. This plugin help you
to run AJAX polls on your blog. It is highly recommended to instal
widet also in order to move the poll anywhere aroung blog.<br />
<a href="http://blog.jalenack.com/archives/democracy/">http://blog.jalenack.com/archives/democracy/</a><br />
<span style="font-weight: bold;">Adsense Manager</span> [Monetize]<br />
Don’t assume that the plugin enable you to place Adsene code in
blog, instead, it supports many popular ad placement services.
Monetizing your blog is very easy with this.<br />
<a href="http://wordpress.org/extend/plugins/adsense-manager/">http://wordpress.org/extend/plugins/adsense-manager/</a><br />
<span style="font-weight: bold;">MCEComments</span><br />
MCEComments convert standard text field into user friendly WYSISYG
format. People can post images in comment which can be stopped by
disabling in plugin option.<br />
<a href="http://mk.netgenes.org/my-plugins/mcecomments/">http://mk.netgenes.org/my-plugins/mcecomments/</a><br />
<span style="font-weight: bold;">Thumbnail Viewer</span> [For Image]<br />
It is a plugin to view enlarge view of the small image in the posts
without leaving the blog. It will impress visitors with web2.0 effect.<br />
<a href="http://www.longren.org/wordpress/thumbnail-viewer/">http://www.longren.org/wordpress/thumbnail-viewer/</a><br />
<span style="font-size: 100%;"><span style="font-weight: bold;">Broken Links Remover</span></span><br />
Checks your posts for broken links. If it finds one then it will
make that link as normal text so that your readers will not see any
dead links.<br />
This plugin will help keep your site clean by hiding all bad/broken
links. As soon as it finds a bad or broken link, it will notify the
link with appropriate post under Manage -> Bad Links Wordpress admin
page. <a href="http://www.niharsworld.com/2008/09/18/broken-links-remover-a-must-wordpress-plugin/">More Info</a><br />
That’s it. As a being blogger and blogging on self hosted blog with
wordpress script I found these plugins very useful and headache
reducing. Hope you also feel the same.mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com0tag:blogger.com,1999:blog-6813955933254343526.post-73604430765300685462009-05-15T15:16:00.000-07:002009-05-15T15:16:10.288-07:00101 CSS Resources And Tutorials To Your Site<div class="entry">
<img align="right" alt="CSS Resources" src="http://www.jasonbartholme.com/wp-content/uploads/2007/04/css-resources.jpg" />All
the cool kids are using CSS to separate content from appearance on
their sites. Here is 101 resources that will get your feet wet with
CSS, teach you some new tricks and techniques, clean your code, and hit
the ground running with pre-made layouts.<br />
<span id="more-67"></span><br />
<br />
<h3>
<strong>CSS Templates and Layouts</strong></h3>
<dl><dd><a href="http://blog.html.it/layoutgala/" target="_blank">A collection of 40 CSS layouts based on the same markup and ready for download!</a> - blog.html.it</dd><dd><a href="" http:="" layouts.ironmyers.com="" target="_blank">CSS Layouts</a> - layouts.ironmyers.com</dd><dd><a href="http://www.free-css-templates.co.uk/" target="_blank">CSS Templates</a> - free-css-templates.co.uk</dd><dd><a href="http://cssvault.com/" target="_blank">The Web’s CSS Site</a> - cssvault.com</dd><dd><a href="http://www.cssstars.com/" target="_blank">CSS Stars</a> -cssstars.com</dd><dd><a href="http://www.oswd.org/" target="_blank">Open Source Web Design - Download free web design templates</a> - oswd.org</dd><dd><a href="http://www.dynamicdrive.com/style/layouts/" target="_blank">Dynamic Drive CSS Layouts- Tableless, CSS based templates</a> - dynamicdrive.com</dd><dd><a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a> - free-css-templates.com</dd><dd><a href="http://www.smashingmagazine.com/2007/02/14/free-design-templates/">Free Design Templates</a> - smashingmagazine.com</dd><dd><a href="http://andreasviklund.com/templates/" target="_blank">Free Website Templates</a> - andreasviklund.com</dd><dd><a href="http://www.didloo.com/" target="_blank">CSS Design Gallery</a> - didloo.com</dd><dd><a href="http://www.freshtemplates.com/" target="_blank">Free Website Templates, Free Web Templates, Photoshop Layouts</a> - freshtemplates.com </dd><dd><a href="http://www.templateworld.com/free_templates.html" target="_blank">Free XHTML/CSS Website Templates</a> - templateworld.com</dd><dd><a href="http://www.mycelly.com/" target="_blank">Nice and Free CSS Templates</a> - mycelly.com </dd><dd><a href="http://opendesigns.org/" target="_blank">Open Design Community</a> - opendesigns.org</dd><dd><a href="http://csstinderbox.raykonline.com/" target="_blank">The CSS Tinderbox</a> - csstinderbox.raykonline.com</dd><dd><a href="http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need">The only CSS layout you need(?) Strictly CSS</a> - strictlycss.com</dd></dl>
<h3>
<strong>CSS Tips and Techniques</strong></h3>
<dl><dd><a href="http://www.72dpiintheshade.com/2007/01/16/top-10-css-tips-from-a-professional-css-architect/" target="_blank">10 CSS Tips from a Professional CSS Front-End Architect</a> - 72dpiintheshade.com</dd><dd><a href="http://www.seomoz.org/blog/css-properties-you-probably-never-use" target="_blank">15 CSS Properties You Probably Never Use (but perhaps should)</a> - seomoz.org</dd><dd><a href="http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/" target="_blank">53 CSS-Techniques You Couldn’t Live Without</a> - smashingmagazine.com</dd><dd><a href="http://mikeomatic.net/?p=78" target="_blank">A CSS Crossfader Demo</a> - mikeomatic.net</dd><dd><a href="http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS" target="_blank">Attach icons to anything with CSS</a> - hunlock.com</dd><dd><a href="http://www.cameronmoll.com/archives/001211.html" target="_blank">Beginner's guide from a seasoned CSS designer</a> - cameronmoll.com</dd><dd><a href="http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=1" target="_blank">CSS Advisor beta</a> adobe.com</dd><dd><a href="http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm" target="_blank">CSS Image Text Wrap Tutorial</a> - bigbaer.com</dd><dd><a href="http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php" target="_blank">CSS Navigation Techniques (37 entries)</a> - alvit.de</dd><dd><a href="http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/" target="_blank">CSS techniques I use all the time</a> - christianmontoya.com</dd><dd><a href="http://www.petefreitag.com/item/475.cfm" target="_blank">CSS Techniques Roundup - 20 CSS Tips and Tricks</a> - petefreitag.com</dd><dd><a href="http://www.blogherald.com/2006/09/08/css-tips-and-tricks/" target="_blank">CSS tips and tricks</a> - blogherald.com</dd><dd><a href="http://www.communitymx.com/content/article.cfm?cid=FAF76&print=true" target="_blank">CSS: Getting Into Good Coding Habits</a> - communitymx.com</dd><dd><a href="http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css" target="_blank">Erratic Wisdom: 5 Tips for Organizing Your CSS</a> - erraticwisdom.com</dd><dd><a href="http://css3.info/" target="_blank">Everything You Need to Know About CSS3</a> - css3.info</dd><dd><a href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html" target="_blank">Little Boxes</a> - thenoodleincident.com</dd><dd><a href="http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/" target="_blank">Master Stylesheet: The Most Useful CSS Technique</a> - crucialwebhost.com</dd><dd><a href="http://maxdesign.com.au/presentation/page_layouts/" target="_blank">Max Design - Sample CSS Page Layouts</a> - maxdesign.com.au</dd><dd><a href="http://businesslogs.com/design_and_usability/my_5_css_tips.php" target="_blank">My 5 CSS Tips</a> - businesslogs.com</dd><dd><a href="http://www.contentwithstyle.co.uk/Articles/70/playing-nice-with-the-other-css-kids/" target="_blank">Playing Nice with the Other CSS Kids</a> - contentwithstyle.co.uk</dd><dd><a href="http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html" target="_blank">Showing Hyperlink Cues with CSS</a> - askthecssguy.com</dd><dd><a href="http://www.huddletogether.com/2006/02/16/practical-web-development-tips/" target="_blank">Squeaky Clean CSS</a> - huddletogether.com</dd><dd><a href="http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml" target="_blank">Ten CSS tricks you may not know</a> - webcredible.co.uk</dd><dd><a href="http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml" target="_blank">Ten more CSS tricks you may not know</a> - webcredible.co.uk</dd><dd><a href="http://css-discuss.incutio.com/?page=ThreeColumnLayouts" target="_blank">Three Column Layouts - css-discuss</a> - css-discuss.incutio.com</dd><dd><a href="http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/" target="_blank">Turning a list into a navigation bar</a> - 456bereastreet.com</dd><dd><a href="http://odyniec.net/articles/turning-lists-into-trees/" target="_blank">Turning Lists into Trees</a> - odyniec.net</dd><dd><a href="http://www.destinedtodesign.com/gallery/#" target="_blank">Unordered List Rollover Gallery</a> - destinedtodesign.com</dd><dd><a href="http://www.digital-web.com/articles/web_page_reconstruction_with_css/" target="_blank">Web Page Reconstruction with CSS</a> - digital-web.com</dd><dd><a href="http://com1.devnet.scd.yahoo.com/yui/grids/" target="_blank">Yahoo! UI Library: Grids CSS</a> - com1.devnet.scd.yahoo.com</dd></dl>
<h3>
<strong>CSS Tutorials</strong></h3>
<dl><dd><a href="http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/" target="_blank">53 CSS-Techniques You Couldn’t Live Without</a> - smashingmagazine.com</dd><dd><a href="http://slackerhtml.tripod.com/stylesheets/" target="_blank">A Slacker’s Guide to Style Sheets</a> - slackerhtml.tripod.com</dd><dd><a href="http://www.webreference.com/authoring/style/sheets/layout/advanced/" target="_blank">Advanced CSS Layouts: Step by Step</a> - webreference.com</dd><dd><a href="http://www.lynchconsulting.com.au/go/articles/advanced-tables-tutorial/" target="_blank">Advanced HTML Tables and CSS Tutorial</a> - lynchconsulting.com.au</dd><dd><a href="http://www.alistapart.com/articles/alternate/" target="_blank">Alternative Style: Working With Alternate Style Sheets</a> - alistapart.com</dd><dd><a href="http://www.javascript-page.com/css/" target="_blank">Cascading Style Sheets in 7 Easy Steps: A CSS Tutorial</a> - javascript-page.com</dd><dd><a href="http://www.subcide.com/tutorials/csslayout/" target="_blank">Creating a CSS layout from scratch</a> - subcide.com</dd><dd><a href="http://www.quirksmode.org/css/quirksmode.html" target="_blank">CSS - Quirks mode and strict mode</a> - quirksmode.org</dd><dd><a add_date="1175483530" href="http://www.cssbasics.com/" target="_blank">CSS Basics - Making Cascading Style Sheets Easy to Understand</a> - cssbasics.com</dd><dd><a href="http://www.cssbeauty.com/" target="_blank">CSS Design, News, Jobs, Community, Web Standards</a> - cssbeauty.com</dd><dd><a href="http://nidahas.com/2006/01/12/forms-markup-and-css/" target="_blank">CSS Design: Creating Custom Corners & Borders</a> - nidahas.com</dd><dd><a href="http://www.dynamicdrive.com/style/" target="_blank">CSS Library- Practical CSS codes and examples</a> - dynamicdrive.com</dd><dd><a href="http://home.no.net/junjun/html/shorthand.html" target="_blank">CSS shorthand properties - an introduction</a> - home.no.net</dd><dd><a href="http://www.w3schools.com/css/" target="_blank">CSS Tutorial</a> - w3schools.com</dd><dd><a href="http://www.csszengarden.com/" target="_blank">css Zen Garden: The Beauty in CSS Design</a> - csszengarden.com</dd><dd><a href="http://www.yourhtmlsource.com/stylesheets/" target="_blank">CSS: cascading style sheets tutorials and style guide</a> - yourhtmlsource.com</dd><dd><a href="http://leftjustified.net/site-in-an-hour/" target="_blank">Making Complex CSS Simple!</a> - leftjustified.net</dd><dd><a href="http://www.webreference.com/authoring/style/sheets/headlines/" target="_blank">Making Headlines With CSS</a> - webreference.com</dd><dd><a href="http://www.miswebdesign.com/resources/articles/fancy-paragraphs.html" target="_blank">MIS Web Design: Fancy Paragraphs With CSS</a> - miswebdesign.com</dd><dd><a href="http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/" target="_blank">More Rounded Corners with CSS</a> - schillmania.com</dd><dd><a href="http://www.adobe.com/devnet/dreamweaver/articles/css_styling.html" target="_blank">Simple Styling with CSS</a> - adobe.com</dd><dd><a href="http://web-graphics.com/mtarchive/001683.php" target="_blank">Single Image Multi Replacement</a> - web-graphics.com</dd><dd><a href="http://spiderpro.com/bu/bucssh001.html" target="_blank">Spiderpro: How To justify text with CSS</a> - spiderpro.com</dd><dd><a href="http://www.echoecho.com/css.htm" target="_blank">The Complete CSS tutorial</a> - echoecho.com</dd><dd><a href="http://lab.arc90.com/2006/07/link_thumbnail.php" target="_blank">Tools : Link Thumbnail</a>- lab.arc90.com </dd><dd><a href="http://www.projectseven.com/tutorials/css/uberlinks/index.htm" target="_blank">Tutorials: Uberlinks CSS List Menus</a> - projectseven.com</dd><dd><a href="http://css.maxdesign.com.au/listamatic/" target="_blank">Using CSS and a simple list to create radically different list options</a> - css.maxdesign.com.au</dd></dl>
<h3>
<strong>CSS Utilities</strong></h3>
<dl><dd><a href="http://home.tampabay.rr.com/bmerkey/cheatsheet.htm" target="_blank">Cascading Style Cheatsheet</a> - home.tampabay.rr.com</dd><dd><a href="http://www.cleancss.com/" target="_blank">Clean CSS - A Resource for Web Designers - Optmize and Format your CSS</a> - cleancss.com</dd><dd><a href="http://rafael.adm.br/css_browser_selector/" target="_blank">CSS Browser Selector</a> - rafael.adm.br</dd><dd><a href="http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/" target="_blank">CSS Cheat Sheet - Cheat Sheets</a> - ilovejackdaniels.com</dd><dd><a href="http://iceyboard.no-ip.org/projects/css_compressor" target="_blank">CSS Compressor</a> - iceyboard.no-ip.org</dd><dd><a href="http://www.csscreator.com/version2/pagelayout.php" target="_blank">CSS Creator</a> - csscreator.com</dd><dd><a href="http://www.pixy.cz/apps/webedit/" target="_blank">CSS Editor</a> - pixy.cz</dd><dd><a href="http://centricle.com/ref/css/filters/" target="_blank">css filters (css hacks)</a> - centricle.com</dd><dd><a href="http://cdburnerxp.se/cssparse/css_optimiser.php" target="_blank">CSS Formatter and Optimiser/Optimizer </a> - cdburnerxp.se</dd><dd><a href="http://codepunk.hardwar.org.uk/css2js.htm" target="_blank">CSS Properties to JavaScript Reference</a> - codepunk.hardwar.org.uk</dd><dd><a href="http://www.neuroticweb.com/recursos/css-rounded-box/" target="_blank">CSS Rounded Box Generator</a> - neuroticweb.com</dd><dd><a href="http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php" target="_blank">CSS Source Ordered 1-3 Columned Page Maker by ClevaTreva Designs - The Generator Form v2.90</a> - positioniseverything.net</dd><dd><a href="http://isnoop.net/tools/css.php" target="_blank">CSS Superdouche</a> </dd><dd><a href="http://www.cssdev.com/csstweak/" target="_blank">CSS Tweak ~ Web Based CSS Tweaker!</a> - cssdev.com</dd><dd><a href="http://www.htmlhelp.com/tools/csscheck/" target="_blank">CSSCheck, a Cascading Style Sheets Lint</a> - htmlhelp.com</dd><dd><a href="http://csstidy.sourceforge.net/example.php" target="_blank">CSSTidy</a> - csstidy.sourceforge.net</dd><dd><a href="http://www.wannabegirl.org/firdamatic/" target="_blank">Firdamatic: the Design Tool for the Uninspired Webloggers</a> - wannabegirl.org</dd><dd><a href="http://www.ibdjohn.com/csstemplate/" target="_blank">Free CSS Template Code Generator - Maker for 3 Column Layout (tableless)</a> - ibdjohn.com</dd><dd><a href="http://www.pooliestudios.com/projects/iconize/" target="_blank">Iconize Textlinks with CSS - pooliestudios</a> - pooliestudios.com</dd><dd><a href="http://www.jotform.com/" target="_blank">JotForm</a> - jotform.com</dd><dd><a href="http://www.sitevista.com/cssvista/" target="_blank">Live CSS editing with Internet Explorer and Firefox simultaneously</a> - sitevista.com</dd><dd><a href="http://www.highdots.com/css-tab-designer/" target="_blank">OverZone Software - CSS Tab Designer</a> - highdots.com</dd><dd><a href="http://www.hostm.com/css/" target="_blank">Simple CSS</a> - hostm.com</dd><dd><a href="http://skycsstool.sourceforge.net/" target="_blank">Sky CSS Tool</a> - skycsstool.sourceforge.net</dd><dd><a href="http://www.scriptomizers.com/css/stylesheet_generator" target="_blank">Stylesheet Generator - Scriptomizers’ Webmaster Tools</a> - scriptomizers.com</dd><dd><a href="http://jigsaw.w3.org/css-validator/" target="_blank">The W3C CSS Validation Service</a> - jigsaw.w3.org</dd></dl>
<b>i will sure , you do the best</b><br /></div>mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com3tag:blogger.com,1999:blog-6813955933254343526.post-1106360278229538422009-05-15T10:48:00.000-07:002009-05-15T10:48:08.687-07:00make Ajax Slideshows with Google Ajax Feed In Your Blogger<div align="center">
<iframe border="0" frameborder="0" height="260" src="http://www.sizlopedia.com/wp-content/uploads/files/google-ajax-slideshow.html" width="330"></iframe></div>
Today I have something very unique to share with my readers and
fellow bloggers. I will be providing a simple tutorial on how to make
Ajax Slideshows with the Google Ajax Feed API and how to easily embed
them in your website or blog.<br />
<strong>Google Ajax Slideshows</strong><br />
For those who don't know Google Ajax Slideshow is a simple application of the <a href="http://code.google.com/apis/ajaxfeeds/index.html">Google AJAX Feed API</a>
that is designed to let you add photo slide shows to your pages, sites,
and blogs. The slide show control takes photo feeds from all popular
sites, such as PhotoBucket, Flickr, and Picasa Web Albums. Any feeds
that use Media RSS can be used without customization.<br />
<span id="more-469"></span><br />
<strong>Things You Can Do with Ajax Slideshows </strong><br />
The Slide Show control is highly customizable, allowing you to
specify options such as the number of photos to display, display and
transition time between photos, how the photos link back to their
source. Here are some amazing things you can do with with Google Ajax
Slideshows<br />
<ul>
<li>Make Slideshows of Your Personal Photos</li>
<li>Make Slideshows out of any Media Feed</li>
<li>Share Slideshows with Your Friends</li>
<li>Display Slideshows on Your Blog</li>
</ul>
For those Flickr and Photobucket Feed Sticker geeks this is the best thing so far.<br />
<strong>How To Make Google Ajax Slideshow</strong><br />
I will be discussing particularly how you can embed the Google Ajax
Slideshows in your Wordpress Blog. Lets say I want to make Ajax
Slideshow of a <a href="http://feed.photobucket.com/images/sunsets/feed.rss">Sunset Media Feed</a> then here are the steps you need to follow to display the slideshow in your sidebar.<br />
<ol>
<li><a href="http://code.google.com/apis/ajaxfeeds/signup.html">Sign up</a> for Ajax Feed API key for your blog</li>
<li>Open header.php file in your theme and add this script code after <b><span style="background-color: #cccccc;">body</span></b></li>
</ol>
<blockquote>
<script src="http://www.google.com/jsapi/?key=Your-Key"<br />type="text/javascript"></script><br /><script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"<br />type="text/javascript"></script><br /><script type="text/javascript"><br />function LoadSlideShow() {<br />var feed = "http://www.google.com/uds/solutions/slideshow/sample.rss";<br />var options = {displayTime:2000, transistionTime:600, scaleImages:true};<br />var ss = new GFslideShow(feed, "slideShow", options);<br />}<br />/**<br />* Use google.load() to load the AJAX Feeds API<br />* Use google.setOnLoadCallback() to call LoadTuneBar once the page loads<br />*/<br />google.load("feeds", "1");<br />google.setOnLoadCallback(LoadSlideShow);<br /></blockquote>
<pre></script></pre>
3- Replace Your-Key with your real Ajax Feed API Key.<br />4- Open style.css and define some styling for your slideshow<br />
<blockquote>
<pre>#slideShow {
width : 300px;
height : 250px;
padding : 10px;
}</pre>
</blockquote>
<br />
5- Call the script function anywhere in your sidebar using this code<br />
<blockquote>
<div id="slideShow">Loading...</div> </blockquote>
You are done <br />
<br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com1tag:blogger.com,1999:blog-6813955933254343526.post-41538278147112829002009-05-15T10:47:00.000-07:002009-05-15T10:47:00.208-07:00Add Google Ajax Feed To your Blogger Templates<a href="http://i142.photobucket.com/albums/r99/nilarimogard/blog/2009-03-04_204749.png" target="_blank"><img alt="blogger recent posts Ajax feed Google" src="http://i142.photobucket.com/albums/r99/nilarimogard/blog/th_2009-03-04_204749.png" style="float: left; margin: 0pt 10px 10px 0pt;" /></a>First of all, i want to give credits for <span style="font-weight: bold;">New Blogger's (blogspot.com) recent posts widget using Google's Ajax Feed API to <a href="http://hoctro.blogspot.com/">Hecto</a></span>, i just modified the script to make it open in the same window, work with FeedBurner and a few other minor tweaks.<br />
<br />
Now
we can begin. You can see this New Blogger Recent Posts Widget using
Google's Ajax Feed API in the right side of my blog. Move your mouse
over it to see how it works. <br />
<br />
1. You will need a key from Google which you can get in a second without any registration, by going to <a href="http://code.google.com/apis/ajaxfeeds/signup.html">this link</a>.<br />
<br />
2. Go to your <span style="font-style: italic;">Blogger Dashboard > Layout > Edit HTML</span>, check "<span style="font-style: italic;">Expand Widget Templates</span>" and find: <span style="font-style: italic;"></head></span> and paste the following code <span style="font-weight: bold;">above it</span><br />
<br />
<br />
<blockquote>
<!-- recent posts ajax --><br />
<script src='http://www.google.com/jsapi/?key=<span style="font-weight: bold;">YOUR KEY</span>' type='text/javascript'/><br />
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/><br />
<br />
<style type='text/css'><br />
@import url(&quot;http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css&quot;);<br />
<br />
#feedControl {<br />
width : 353px;<br />
margin-left : 1px;<br />
background : white;<br />
font-size: 13px;<br />
float:left; <br />
}<br />
.gfg-title {<br />
font-size: 17px;<br />
border-bottom: 1px solid #307396;<br />
font-weight: normal;<br />
color : #BF0000;<br />
background-color: #FFFFFF;<br />
}<br />
.gfg-title a {<br />
color : #005580;<br />
}<br />
.gfg-root {<br />
border: none;<br />
font-family: Verdana,Arial,Helvetica,sans-serif;<br />
background-color : white;<br />
}<br />
.gfg-list {<br />
background-color : white;<br />
}<br />
.gfg-listentry-odd {<br />
background-color : white;<br />
}<br />
.gfg-entry {<br />
background-color : white;<br />
width : 100%;<br />
height : 7.5em;<br />
position : relative;<br />
overflow : hidden;<br />
text-align : left;<br />
margin-top : 3px;<br />
}<br />
.gfg-listentry-highlight { <br />
background-image : url(&#39;http://nilarimogard.googlepages.com/garrow.gif&#39;);<br />
background-repeat: no-repeat;<br />
background-position : center left;<br />
background-color : #F6F6F6;<br />
}<br />
<br />
</style><br />
<script type='text/javascript'><br />
<br />
<br />
function load() {<br />
var homeUrl = &quot;<data:blog.homepageUrl/>&quot;;<br />
var feed = homeUrl + &quot;atom.xml?redirect=false&quot;;<br />
new GFdynamicFeedControl(feed, &quot;feedControl&quot;,<br />
{linkTarget : google.feeds.LINK_TARGET_SELF, <span style="font-weight: bold;">numResults : 5</span>, <span style="font-weight: bold;">title : &#39;Recent Posts&#39</span>;}); <br />
}<br />
<br />
google.load(&quot;feeds&quot;, &quot;1&quot;);<br />
google.setOnLoadCallback(load);<br />
</script><br />
<br />
<!-- /recent posts ajax --></blockquote>
<br />
Change YOUR KEY with the key you got in point 1. The bold code above can be changed to suit your needs. <span style="font-weight: bold;">numResults : 5 is the number of posts in this widget</span>, change the number to the number of posts you want to show up in your recent posts widget. <span style="font-weight: bold;">title : 'Recent Posts' can also be changed with the title you want for your widget</span>, or you can remove title : 'Recent Posts' if you want your feed's default title to be displayed.<br />
<br />
3. Create a new "HTML/JavScript" widget, then add this line to the content:<br />
<br />
<br />
<blockquote>
<div id="feedControl">Loading...</div></blockquote>
<br />
Save it and you're done.<br />
<h2>
Customizing the recent posts Ajax widget</h2>
<br />
To change the font, colors and so on of your widget, modify the CSS styles:<br />
<br />
<br />
<blockquote>
#feedControl {<br />
width : 353px;<br />
margin-left : 1px;<br />
background : white;<br />
font-size: 13px;<br />
float:left;<br />
}<br />
.gfg-title {<br />
font-size: 17px;<br />
border-bottom: 1px solid #307396;<br />
font-weight: normal;<br />
color : #BF0000;<br />
background-color: #FFFFFF;<br />
}<br />
.gfg-title a {<br />
color : #005580;<br />
}<br />
.gfg-root {<br />
border: none;<br />
font-family: Verdana,Arial,Helvetica,sans-serif;<br />
background-color : white;<br />
}<br />
.gfg-list {<br />
background-color : white;<br />
}<br />
.gfg-listentry-odd {<br />
background-color : white;<br />
}<br />
.gfg-entry {<br />
background-color : white;<br />
width : 100%;<br />
height : 7.5em;<br />
position : relative;<br />
overflow : hidden;<br />
text-align : left;<br />
margin-top : 3px;<br />
}<br />
.gfg-listentry-highlight {<br />
background-image : url('http://nilarimogard.googlepages.com/garrow.gif');<br />
background-repeat: no-repeat;<br />
background-position : center left;<br />
background-color : #F6F6F6;<br />
}</blockquote>
<br />
To change the red arrow, save this image: <a href="http://nilarimogard.googlepages.com/garrow.gif">http://nilarimogard.googlepages.com/garrow.gif</a>, edit it with the color you want and upload yours to some host, then change it in the above code.<br />
<br />
You cand find all the CSS elements for the Google Feed API, <a href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css">here</a>.<br />
<br />
For further documentation regarding the Google Feed API, visit it's <a href="http://www.google.com/uds/solutions/dynamicfeed/">homepage</a>.<br />
<br />
<br />
<br />
<br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com3tag:blogger.com,1999:blog-6813955933254343526.post-1192530661975133232009-05-15T10:29:00.000-07:002009-05-15T10:29:56.967-07:00Create and Change your own Gmail Theme<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.technobuzz.net/wp-content/uploads/2009/02/gmailug.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="207" src="http://www.technobuzz.net/wp-content/uploads/2009/02/gmailug.png" width="420" /></a></div>
<br />
<span><span>Recently Google Introduces themes for <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Gmail</span>, and if you are bored with those themes. So now you can </span></span><span style="font-family: Georgia,"Times New Roman",serif;">create your own Custom</span><span><span> theme for you <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Gmail</span> Box easily. You can now make <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Gmail</span> as ugly or pretty as you want – by choosing your own colors. Go to </span></span><strong><span><span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Gmail</span> -> Settings -> Themes, and click “Choose your own colors”</span></strong><span>. This opens a window where you can configure a template with instant preview. Hit Save & Close, and <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Gmail</span> will appear in your custom colors.</span><br />
<div style="text-align: center;">
</div>
<span id="more-3808"></span><br /><span>
Your colors are saved when you finish editing the theme and the changes are added to <span class="IL_LINK_STYLE" style="color: #0000cc; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-weight: 400; text-decoration: underline;">Gmail</span>
after you press “Save”. If you don’t like your theme, you can always
choose one of the 31 pre-defined thems or click on “Reset” to go back
to the default theme. And you still want to customize <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Gmail</span> than you have to try </span><a href="http://3rb-game.blogspot.com/2009/05/change-layout-of-gmail-with-firefox.html" target="_blank">Change the Look of Gmail with Firefox Addon</a><br />
<br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com1tag:blogger.com,1999:blog-6813955933254343526.post-90308430207239487802009-05-15T10:28:00.000-07:002009-05-15T10:28:50.543-07:00Change the Layout of Gmail with Firefox Addon<span>If you are bored from </span>the skin<span> of </span><a href="http://www.gmail.com/" target="_blank">GMAIL</a><span> and Want to change it, than you have to try the <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Firefox</span> Addon Google Redesigned. </span><strong>Google Redesigned</strong> is a <a href="http://www.mozilla.org/" target="_blank" title="Mozilla">Mozilla</a> <a href="http://www.getfirefox.com/" target="_blank" title="Firefox">Firefox</a> extension designed by Globex Designs that aims to fully redesign the look and feel of popular <a href="http://www.google.com/" target="_blank" title="Google">Google</a> services. This is achieved with Cascading StyleSheet (CSS) files which are loaded on the client’s browser.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.technobuzz.net/wp-content/uploads/2008/08/011.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="http://www.technobuzz.net/wp-content/uploads/2008/08/011.jpg" width="420" /></a> </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.technobuzz.net/wp-content/uploads/2008/08/02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="http://www.technobuzz.net/wp-content/uploads/2008/08/02.jpg" width="420" /></a></div>
<div style="text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.technobuzz.net/wp-content/uploads/2008/08/031.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="http://www.technobuzz.net/wp-content/uploads/2008/08/031.jpg" width="420" /></a></div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
</div>
<span>Google Redesigned is built for Mozilla based browsers (</span>Firefox<span>, Flock, IceWeasel, and such). Users using other browsers will not be to install the extension. <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Firefox</span>
3 and Flock 2 are highly recommended as certain styles will not work
correctly on older versions of the Gecko engine. As well the <span class="IL_SPAN"><input name="IL_MARKER" type="hidden" />Firefox</span> 3 engine provides much faster performance for handling these styles.</span><br />
<strong>Download <a href="https://addons.mozilla.org/en-US/firefox/addon/8434/" target="_blank">FireFox Addon Gmail Redesigned</a></strong><br />
<br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com9tag:blogger.com,1999:blog-6813955933254343526.post-53697758036069714722009-05-06T10:13:00.000-07:002009-05-06T10:13:09.215-07:00All Feeds using FeedBurner<caps>I</caps>ntegrate your <a href="http://www.feedburner.com/fb/a/home">FeedBurner</a> feed with your blogger beta blog.<br />
<br />
1) Feed Auto-Detection<br />
<br />
<span style="background-color: #eeeeee;">Go to </span><b style="background-color: #eeeeee;">Layout > Edit HTML</b> and find this line of code<br />
<br />
<br />
<blockquote>
<pre class="xml" name="code"><b:include data='blog' name='all-head-content'/>
</pre>
</blockquote>
<br />
which actually splits out something like this<br />
<span id="fullpost"><br />
<code><br /></code></span><blockquote>
<span id="fullpost"><code>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/></code></span><br /><span id="fullpost"><code>
<meta content='true' name='MSSmartTagsPreventParsing'/></code></span><br /><span id="fullpost"><code>
<meta content='blogger' name='generator'/></code></span><br /><span id="fullpost"><code>
<span style="color: red;"><link rel="alternate" type="application/atom+xml"
title="YourBlogName - Atom"
href="http://yourblog.blogspot.com/feeds/posts/default" /></span></code></span><br /><span id="fullpost"><code><span style="color: red;">
<link rel="alternate" type="application/rss+xml" title="YourBlogName
- RSS" href="http://yourblog.blogspot.com/feeds/posts/default?alt=rss"
/></span></code></span><br /><span id="fullpost"><code>
<link rel="service.post" type="application/atom+xml"
title="YourBlogName - Atom"
href="http://www.blogger.com/feeds/yourblogid/posts/default" /></code></span><br /><span id="fullpost"><code>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=yourblogid" /></code></span><br /><span id="fullpost"><code></code></span></blockquote>
<span id="fullpost"><code>
</code><br />
<br />
when you view the page source (In Firefox click on <b style="background-color: #eeeeee;">View > Page Source</b><span style="background-color: #eeeeee;">).</span><br />
<br />
<b>YourBlogName</b> stands for the title of your blog, <b>yourblog.blogspot.com</b> is your blog's url, and <b>yourblogid</b> is a long number, the id of your blog. <br />
<br />
The two lines with link rel="<span style="background-color: #eeeeee;">alternate</span>", <br />
<code><br /></code></span><blockquote>
<span id="fullpost"><code>
<span style="color: red;"><link rel="alternate" type="application/atom+xml"
title="YourBlogName - Atom"
href="http://yourblog.blogspot.com/feeds/posts/default" /></span></code></span><br /><span id="fullpost"><code><span style="color: red;">
<link rel="alternate" type="application/rss+xml" title="YourBlogName
- RSS" href="http://yourblog.blogspot.com/feeds/posts/default?alt=rss"
/></span></code></span><br /><span id="fullpost"><code></code></span></blockquote>
<span id="fullpost"><code>
</code><br />
let newsreaders auto-detect your blogs feeds. So we have to change
these lines to point them in the direction of your FeedBurner feed.<br />
<br />
Remove the line:<br />
<br /></span><blockquote>
<span id="fullpost">
<pre class="xml" name="code"><b:include data='blog' name='all-head-content'/></pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><br />
Replace it with:<br />
<br /></span><blockquote>
<span id="fullpost">
<pre class="xml" name="code"><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><meta content='true' name='MSSmartTagsPreventParsing'/></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><meta content='blogger' name='generator'/></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><link href='http://feeds.feedburner.com/yourblogname' rel='alternate' title='RSS' type='application/atom+xml'/></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><link rel="service.post" type="application/atom+xml" title="YourBlogName - Atom" href="http://www.blogger.com/feeds/yourblogid/posts/default" /></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=yourblogid" /></pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><br />
Replace <b style="background-color: #eeeeee;">http://feeds2.feedburner.com/yourblogname</b> with the url of your FeedBurner feed.<br />
<br />
<b>Save Template</b>.<br />
<br />
Now that we have fixed the auto-detection part, there is still the
issue of the feed-link on your posts page. This feed-link has to be
made invisible, so that your visitor has no other option than following
the link to your FeedBurner feed.<br />
<br />
Go to<span style="background-color: #eeeeee;"> </span><b style="background-color: #eeeeee;">Layout > Edit HTML</b> and find this line<br />
<br /></span><blockquote>
<span id="fullpost">
<pre class="css" name="code">.feed-link {</pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><br />
Below the line add<br />
<br />
</span><blockquote>
<span id="fullpost"><pre class="css" name="code">display: none;</pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><br />
If there is no .feed-link class defined in your template, define it with:<br />
<br />
</span><blockquote>
<span id="fullpost"><pre class="css" name="code">.feed-link { display:none; }</pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><br />
Save Template.<br />
<br />
Leave your comments and URL of your blog :)</span><br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com1tag:blogger.com,1999:blog-6813955933254343526.post-17848991826514837162009-05-06T10:10:00.000-07:002009-05-06T10:10:03.821-07:00Adding left sidebar to Blogger<caps>D</caps>enim is a standard 2 column template provided by
Blogger. With small changes to the template, we can add a third column
to Denim. The third column can be on the right or on the left. I added
the third column to the left and called it left sidebar. Follow the
steps given below to add left sidebar to your blog.<br />
<strong>Step 1</strong><br />
<br />
Log in to Blogger and go to <strong style="background-color: #eeeeee;">Layout > EditHTML</strong><span style="background-color: #eeeeee;">. Check </span><strong style="background-color: #eeeeee;">Expand Widget Templates</strong><span style="background-color: #eeeeee;">.</span><br />
<strong>Step 2</strong><br />
Change the header width to <strong>960px</strong>. Edit the <em>#header</em> portion of the CSS.<br />
<br />
<blockquote>
<pre class="css" name="code">#header {
width: 960px;
margin: 0 auto;
background-color: #336699;
</pre>
</blockquote>
Change the content-wrapper width to <strong>960px</strong>. Edit the <em>#content-wrapper</em> portion of the CSS.<br />
<br />
<blockquote>
<pre class="css" name="code">#content-wrapper {
width: 960px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
</pre>
</blockquote>
Change the main-wrapper width to <strong>480px</strong> and margin-left to <strong>10px</strong>. Edit the <em>#main-wrapper</em> portion of the CSS.<br />
<br />
<blockquote>
<pre class="css" name="code">#main-wrapper {
margin-left: 10px;
width: 480px;
float: left;
</pre>
</blockquote>
<span id="fullpost"><br />
<strong>Step 3</strong><br />
In your template there is a sidebar-wrapper. This is the right sidebar wrapper. It will be like this<br />
</span><blockquote>
<span id="fullpost"><pre class="css" name="code">#sidebar-wrapper {</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">margin-right: 14px;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">width: 240px;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">float: right;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">background-color: #ffffff;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">display:inline;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">word-wrap: break-word; /* fix for long text breaking sidebar float in IE */</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">overflow: hidden; /* fix for long non-text content breaking IE sidebar float */</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">}</pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost">Change #sidebar-wrapper to <strong style="background-color: #eeeeee;">#right-sidebar-wrapper</strong>, margin-right to <strong>10px</strong> from 14px and width to <strong>220px</strong> from 240px.<br />
<br />
After the editing it will look like this<br />
</span><blockquote>
<span id="fullpost"><pre class="css" name="code">#right-sidebar-wrapper {</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">margin-right: 10px;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">width: 220px;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">float: right;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">background-color: #ffffff;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">display:inline;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">word-wrap: break-word; /* fix for long text breaking sidebar float in IE */</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">overflow: hidden; /* fix for long non-text content breaking IE sidebar float */</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">}</pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><strong>Step 4</strong><br />
<br />
Add the code given below just before the<span style="background-color: #eeeeee;"> </span><em style="background-color: #eeeeee;">#right-sidebar-wrapper</em><span style="background-color: #eeeeee;">.</span><br />
</span><blockquote>
<span id="fullpost"><pre class="css" name="code">#left-sidebar-wrapper {</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">margin-left: 10px;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">width: 220px;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">float: left;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">background-color: #ffffff;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">display:inline;</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">word-wrap: break-word; /* fix for long text breaking sidebar float in IE */</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">overflow: hidden; /* fix for long non-text content breaking IE sidebar float */</pre>
</span><br /><span id="fullpost"><pre class="css" name="code">}</pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><strong>Step 5</strong><br />
<br />
Find out the portion of code given below.<br />
</span><blockquote>
<span id="fullpost"><pre class="xml" name="code"><div id='content-wrapper'></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><div id='crosscol-wrapper' style='text-align:center'></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><b:section class='crosscol' id='crosscol' showaddelement='no'/></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"></div></pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost">Add the code given below just below the code given above.<br />
</span><blockquote>
<span id="fullpost"><pre class="xml" name="code"><div id='left-sidebar-wrapper'></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><b:section class='sidebar' id='left-sidebar' preferred='yes'></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"></b:section></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"></div></pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><strong>Step 6</strong><br />
<br />
Find out the portion of code given below.<br />
</span><blockquote>
<span id="fullpost"><pre class="xml" name="code"><div id='sidebar-wrapper'></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><b:section class='sidebar' id='sidebar' preferred='yes'></pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost">Replace it with the code given below.<br />
</span><blockquote>
<span id="fullpost"><pre class="xml" name="code"><div id='right-sidebar-wrapper'></pre>
</span><br /><span id="fullpost"><pre class="xml" name="code"><b:section class='sidebar' id='right-sidebar' preferred='yes'></pre>
</span><br /><span id="fullpost"></span></blockquote>
<span id="fullpost"><strong>Step 7</strong><br />
Save Template.<br />
<br />
Leave your comments and URL of your blog :)</span><br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com6tag:blogger.com,1999:blog-6813955933254343526.post-31881143148540535802009-05-06T10:07:00.000-07:002009-05-06T10:07:21.261-07:00Comment Numbering on Blogger<caps>H</caps>ave you ever thought of numbering your blog's comments? Well, the dream has come true. Thanks to <strong>Fernandooo1</strong> of <a href="http://randomnessf1.blogspot.com/" target="_blank" title="Randomness | Say Something">Randomness</a> for this lovely hack.<br />
Follow the steps given below to apply the hack.<br />
Log in to Blogger. <span style="background-color: #eeeeee;">Go to </span><strong style="background-color: #eeeeee;">Layout > EditHTML</strong><span style="background-color: #eeeeee;">. Check </span><strong style="background-color: #eeeeee;">Expand Widget Templates</strong>. Add the codes highlighted in red at the right places as shown in the code given below.<br />
<code><br /></code><blockquote>
<code>
<dl id='comments-block'></code><br /><code>
</code><br /><code>
<span style="color: red;"><script type='text/javascript'>var CommentsCounter=0;</script></span></code><br /><code>
</code><br /><code>
<b:loop values='data:post.comments' var='comment'></code><br /><code>
</code><br /><code>
<span style="color: red;"><div class='' expr:id='data:comment.id'></span></code><br /><code>
</code><br /><code>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'></code><br /><code>
<a expr:name='data:comment.anchorName'/></code><br /><code>
<b:if cond='data:comment.authorUrl'></code><br /><code>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a></code><br /><code>
<b:else/></code><br /><code>
<data:comment.author/></code><br /><code>
</b:if></code><br /><code>
<data:commentPostedByMsg/></code><br /><code>
</code><br /><code>
<span style="color: red;"><span class='comment-number'></span></code><br /><code><span style="color: red;">
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'></span></code><br /><code><span style="color: red;">
<script type='text/javascript'></span></code><br /><code><span style="color: red;">
CommentsCounter=CommentsCounter+1;</span></code><br /><code><span style="color: red;">
document.write(CommentsCounter)</span></code><br /><code><span style="color: red;">
</script></span></code><br /><code><span style="color: red;">
</a></span></code><br /><code><span style="color: red;">
</span></span></code><br /><code>
</code><br /><code>
</dt></code><br /><code>
<dd class='comment-body'></code><br /><code>
<b:if cond='data:comment.isDeleted'></code><br /><code>
<span class='deleted-comment'><data:comment.body/></span></code><br /><code>
<b:else/></code><br /><code>
<p><data:comment.body/></p></code><br /><code>
</b:if></code><br /><code>
</dd></code><br /><code>
<dd class='comment-footer'></code><br /><code>
<span class='comment-timestamp'></code><br /><code>
<a expr:href='data:comment.url' title='comment permalink'></code><br /><code>
<data:comment.timestamp/></code><br /><code>
</a></code><br /><code>
<b:include data='comment' name='commentDeleteIcon'/></code><br /><code>
</span></code><br /><code>
</dd></code><br /><code>
</code><br /><code>
<span style="color: red;"></div></span></code><br /><code>
</code><br /><code>
</b:loop></code><br /><code>
</dl></code><br /><code></code></blockquote>
<code>
</code><br />
Add the code given below to the CSS area in your template, right before <b style="background-color: cyan;">]]></b:skin>:</b><br />
<blockquote>
<pre class="css" name="code">.comment-number {
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}
/*since the numbers are actually links, we need to force the color properties*/
.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}
</pre>
</blockquote>
<b>Save Template</b>.<br />
That's it. Let me know your views on this hack. Do contact me if you face any trouble in applying the hack.<br />
If
this hack was useful for you then please leave comments so that I'll be
able to know who all benefited from this hack. Also post the URL of the
blog in which the hack is applied so that it will help the visitors to
check how the hack is working in various blogs.<br />
<div class="post-footer-line post-footer-line-1">
</div>
<br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com1tag:blogger.com,1999:blog-6813955933254343526.post-36838501455184865612009-05-06T09:26:00.000-07:002009-05-06T09:26:18.347-07:00Show Comment Author Photos in BloggerFollow the steps given below to display comment author photos.<br />
<br />
<span style="background-color: #eeeeee;">Log in to </span><b style="background-color: #eeeeee;">Blogger</b><span style="background-color: #eeeeee;">. Go to </span><b style="background-color: #eeeeee;">Layout > EditHTML</b><span style="background-color: #eeeeee;"> and click on </span><b style="background-color: #eeeeee;">Expand Widget Templates</b><span style="background-color: #eeeeee;">.</span><br />
<br />
Add the code given below between <b style="background-color: #eeeeee;"><head></b> and <b style="background-color: #eeeeee;"></head></b> tag<br />
<br />
<br />
<blockquote>
<div class="code">
<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});<br />
//]]><br />
</script><br />
</div>
</blockquote>
<br />
Find the portion of code given below<br />
<br />
<blockquote>
<div class="code">
<dl id='comments-block'><br />
<b:loop values='data:post.comments' var='comment'><br />
<dt class='comment-author' expr:id='"comment-" + data:comment.id'><br />
<a expr:name='"comment-" + data:comment.id'/><br />
<b:if cond='data:comment.authorUrl'><br />
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br />
<b:else/><br />
<data:comment.author/><br />
</b:if><br />
<data:commentPostedByMsg/><br />
</dt><br />
<dd class='comment-body'><br />
<b:if cond='data:comment.isDeleted'><br />
<span class='deleted-comment'><data:comment.body/></span><br />
<b:else/><br />
<p><data:comment.body/></p><br />
</b:if><br />
</dd><br />
<dd class='comment-footer'><br />
<span class='comment-timestamp'><br />
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'><br />
<data:comment.timestamp/><br />
</a><br />
<b:include data='comment' name='commentDeleteIcon'/><br />
</span><br />
</dd><br />
</b:loop><br />
</dl><br />
</div>
</blockquote>
<br />
Add<span style="background-color: #cccccc;"> </span><b style="background-color: #cccccc;"><div class='commentphoto' style='float:right;'/></b> right after line 3 and<span style="background-color: cyan;"> </span><b style="background-color: cyan;"><div style='clear:both;'/></b> after line 26 in the above code. You can change <b style="background-color: #b6d7a8;">float:right</b><span style="background-color: #b6d7a8;"> to </span><b style="background-color: #b6d7a8;">float:left</b> if you want the pic to be on the left instead of the right.<br />
<br />
If you want to change the width and height of the photo then you have
to customize the lines given below in the external javascript file.<br />
<br />
<blockquote>
<div class="code">
BloggerProfiles.imageWidth = 10;<br />
BloggerProfiles.imageHeight = 20;</div>
</blockquote>
<br />
That's it. You're done. Leave your comments and URL of your blog :)
<br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com2tag:blogger.com,1999:blog-6813955933254343526.post-2193924109921977172009-05-06T09:23:00.000-07:002009-05-06T09:23:01.463-07:00TweetMeme Button for Blogger<div class="post-body-n">
The <i>Retweet</i> button is for website and blog publishers that want to encourage their audience to retweet their content on <a href="http://www.twitter.com/" target="_blank">twitter</a>.<br />
<br />
This button is really smart with one simple piece of JavaScript. It
will give you up to date tweet counts and shorten your title and link
for the retweets. Best of all it will work on any web page, anywhere!<br />
<br />
Copy and paste the following code where you want the widget to be displayed.<br />
<br />
<br />
<blockquote>
<div class="code">
<span style="color: blue;"><script</span> <span style="color: red;">type</span>=<span style="color: blue;"><span style="color: #006699;">"text/javascript"</span>></span><span style="color: red;">tweetmeme_url</span> = <span style="color: #006699;">'<data:post.url/>'</span>;<span style="color: blue;"></script><script</span> <span style="color: red;">type</span>=<span style="color: #006699;">"text/javascript"</span> <span style="color: red;">src</span>=<span style="color: blue;"><span style="color: #006699;">"http://tweetmeme.com/i/scripts/button.js"</span>></script></span></div>
</blockquote>
<br />
<br />
<h5>
Compact Version</h5>
<br />
A <b>compact version</b> of the tweetmeme button, with the same options as the larger button is also available.<br />
<br />
Copy and paste the following code to use the compact version.<br />
<br />
<blockquote>
<div class="code">
<span style="color: blue;"><script</span> <span style="color: red;">type</span>=<span style="color: blue;"><span style="color: #006699;">"text/javascript"</span>></span><span style="color: red;">tweetmeme_url</span> = <span style="color: #006699;">'<data:post.url/>'</span>; <span style="color: red;">tweetmeme_style</span> = <span style="color: #006699;">'compact'</span>;<span style="color: blue;"></script><script</span> <span style="color: red;">type</span>=<span style="color: blue;"><span style="color: #006699;">"text/javascript"</span> </span><span style="color: red;">src</span>=<span style="color: blue;"><span style="color: #006699;">"http://tweetmeme.com/i/scripts/button.js"</span>></script></span></div>
</blockquote>
</div>
<div class="post-footer-line post-footer-line-1">
</div>
<br /><br /><br /><br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com1tag:blogger.com,1999:blog-6813955933254343526.post-40579446650891539002009-05-06T09:21:00.000-07:002009-05-06T09:21:29.339-07:00TwitThis Button for Blogger<br />
<div class="post-body-n">
<a href="http://twitthis.com/" target="_blank">TwitThis</a> is an easy
way for people to send Twitter messages about your blog post or
website. When visitors to your website click on the TwitThis button or
link, it takes the URL of the webpage and creates a shorter URL using
our own URL shortener! Then visitors can send this shortened URL and a
description of the web page to all of their friends on Twitter.<br />
<br />
<span style="background-color: #eeeeee;">Login to </span><b style="background-color: #eeeeee;">Blogger</b><span style="background-color: #eeeeee;">. Go to </span><b style="background-color: #eeeeee;">Layout > EditHTML</b><span style="background-color: #eeeeee;">. Check </span><b style="background-color: #eeeeee;">Expand Widget Templates</b><span style="background-color: #eeeeee;">.</span><br />
<br />
Copy and paste the following code where you want the widget to be displayed. <br />
<br />
<br />
<blockquote>
<div class="code">
<span style="color: #008200;"><a expr:href=</span><span style="color: #006699;">'"http://twitthis.com/twit?url=" + data:post.url + "&amp;title=" + data:post.title'</span><span style="color: #008200;">></span>Twit This!<span style="color: #008200;"></a></span></div>
</blockquote>
<br />
<br />
<h5>
CSS</h5>
<br />
If you like the TwitThis link (<img align="absmiddle" src="http://lh4.ggpht.com/_TqPdHmAEwTM/SWn6kUsBaiI/AAAAAAAADZs/OzBp40MjjAs/Picture%204.png" />) used in this blog, add this class in your CSS and use it with the above code. <br />
<br />
<blockquote>
<div class="code">
<div style="color: #741b47;">
.share-tweet {</div>
<span style="color: blue;">background</span><span style="color: #741b47;">:</span><span style="color: #006699;">url(http://bit.ly/PNzhb) 10px top no-repeat</span><span style="color: #741b47;">;</span><br />
<span style="color: blue;">margin-left</span><span style="color: #741b47;">:</span><span style="color: #006699;">10px</span><span style="color: #741b47;">;</span><br />
<span style="color: blue;">padding-left</span><span style="color: #741b47;">:</span><span style="color: #006699;">42px</span><span style="color: #741b47;">; </span><br />
<span style="color: blue;">font-size</span><span style="color: #741b47;">:</span><span style="color: #006699;">11px</span><span style="color: #741b47;">;</span><br />
<span style="color: blue;">line-height</span><span style="color: #741b47;">:</span><span style="color: #006699;">18px</span><span style="color: #741b47;">;</span><br />
<div style="color: #741b47;">
}<a href="http://draft.blogger.com/"></a></div>
</div>
</blockquote>
</div>
<div class="post-footer-line post-footer-line-1">
</div>
<span class="post-icons">
</span>mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com0tag:blogger.com,1999:blog-6813955933254343526.post-8077132569212126832009-05-06T09:18:00.000-07:002009-05-06T09:18:59.632-07:00Del.icio.us bookmark button with counter for Blogger<div class="post-body-n">
You can add a <a href="http://delicious.com/" style="background-color: yellow; color: yellow;">del.icio.us</a><span style="color: yellow;"> </span>bookmark button with counter which shows the number of users that share the current link for each post to your blog.<br />
<br />
<span style="background-color: #eeeeee;">Login to </span><b style="background-color: #eeeeee;">Blogger</b><span style="background-color: #eeeeee;">. Go to </span><b style="background-color: #eeeeee;">Layout > EditHTML</b><span style="background-color: #eeeeee;">. Check </span><b style="background-color: #eeeeee;">Expand Widget Templates</b><span style="background-color: #eeeeee;">.</span><br />
<br />
Find the portion of code given below.<br />
<br />
<br />
<blockquote>
<div class="code">
<span style="color: #000099;"><p class="</span><span style="color: #3366ff;">post-footer-line post-footer-line-3</span><span style="color: #000099;">"></span></div>
</blockquote>
<br />
Copy & Paste the code given below just below the above code.<br />
<br />
<blockquote>
<div class="code">
<span style="color: #009900;"><a expr:href=</span><span style="color: #3366ff;">'"http://del.icio.us/post?url="</span>+ data:post.url + <span style="color: #3333ff;">"&amp;title"</span> + data:post.title<span style="color: #3333ff;">' target='_blank'</span><span style="color: #009900;">></span>add to del.icio.us<span style="color: #009900;"></a></span><br />
saved by <span style="color: #000099;"><span class=</span><span style="color: #3366ff;">'delsquare' </span><span style="color: #000099;">expr:id=</span><span style="color: #3333ff;">'<span style="font-weight: bold;">"a"+data:post.id</span>'</span><span style="color: #000099;">></span>0<span style="color: #000099;"></span></span> users<br />
<br />
<span style="color: #cc0000;"><script type=</span><span style="color: #3333ff;">'text/javascript'</span><span style="color: #cc0000;">></span><br />
<span style="font-weight: bold;">function </span>displayURL<span style="color: #000099;">(</span>data<span style="color: #000099;">) {</span><br />
<span style="color: #000099; font-weight: bold;">var </span>urlinfo <span style="color: #3366ff;">=</span> data<span style="color: #000099; font-weight: bold;">[</span><span style="color: red;">0</span><span style="color: #000099;"><span style="font-weight: bold;">]</span>;</span><br />
<span style="color: #009900;"> if </span><span style="color: #000099;">(</span><span style="color: #3366ff;">!</span>urlinfo.total_posts<span style="color: #000099;">)</span> return;<br />
<span style="color: #cc66cc;">document</span>.getElementById(<span style="color: #3366ff;">'<span style="font-weight: bold;">a<data:post.id/></span>'</span>).innerHTML <span style="color: #3366ff;">=</span> urlinfo.total_posts;<br />
}<br />
<span style="color: #cc0000;"></script></span><br />
<span style="color: #cc0000;"><script expr:src = <span style="color: #3366ff;">'</span></span><span style="color: #3366ff;">"http://badges.del.icio.us/feeds/json/url/data?url= "</span> + data:post.url + <span style="color: #3366ff;">"&amp;callback=displayURL"'</span><span style="color: #cc0000;">/></span></div>
</blockquote>
<br />
<br />
<h5>
CSS</h5>
<br />
Add this class in your CSS and use it with the above code.<br />
<br />
<blockquote>
<div class="code">
<div style="color: #741b47;">
.share-delicious{</div>
<span style="color: blue;">margin-left</span><span style="color: #741b47;">:</span><span style="color: #006699;">10px</span><span style="color: #741b47;">;</span><br />
<span style="color: blue;">border-left</span><span style="color: #741b47;">:</span><span style="color: #006699;">solid 1px #DEDEDE</span><span style="color: #741b47;">;</span><br />
<span style="color: blue;">padding-left</span><span style="color: #741b47;">:</span><span style="color: #006699;">36px</span><span style="color: #741b47;">;</span><br />
<span style="color: blue;">font-size</span><span style="color: #741b47;">:</span><span style="color: #006699;">11px</span><span style="color: #741b47;">;</span><br />
<span style="color: blue;">line-height</span><span style="color: #741b47;">:</span><span style="color: #006699;">18px</span><span style="color: #741b47;">;</span><br />
<span style="color: blue;">float</span><span style="color: #741b47;">:</span><span style="color: #006699;">left</span><span style="color: #741b47;">;</span><br />
<div style="color: #741b47;">
}<br /></div>
</div>
</blockquote>
</div>
<div class="post-footer-line post-footer-line-1">
</div>
<span class="post-icons">
</span>
<br />mcxhttp://www.blogger.com/profile/15219649953472239702noreply@blogger.com1