BBC Radio 1 Zoom Tabs
Read the rest of this entry »
My Must Have Firefox 3 Plugins for Web Development
My Vista crushed this morning. Data is safe but all the set up files are gone.
So I lost all my Firefox plugins as well.
I decided to write down my list of plugins which I must have.
1. Web Developer
2. Firebug
3. Colorzilla
4. Font Finder
5. Screengrab
6. Delicious bookmarks
7. Measureit
8. Wappalyzer
If you want more, you can find a nice list at Designreviver.com
22 Firefox 3 Plugins Web Designers Can’t Live Without
Read the rest of this entry »
How to Add flash Animated label cloud Blogumus for Blogger
I just got a RSS article called "Tag Clouds - Styling and Adding Sort Options an article" from CSS globe.
But I wanted to add a flash Blogumus tag cloud to my Blogger. Then I found this article "How to Add flash Animated label cloud Blogumus for Blogger"
I just adjusted color, width and height.
Read the rest of this entry »
But I wanted to add a flash Blogumus tag cloud to my Blogger. Then I found this article "How to Add flash Animated label cloud Blogumus for Blogger"
I just adjusted color, width and height.
Read the rest of this entry »
Adding a drop cap to Blogger
Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.
I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.
You can see a big N at the beginning of this paragraph.
And you need to add span with class="dropcap" to the first letter of your paragraph like this.
It becomes like this.
BBC News.
You can add more class like .blue after .dropcap
And add this class to a span tag.
CNN News.
Read the rest of this entry »
I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.
You can see a big N at the beginning of this paragraph.
.dropcap
{
background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 3em;
font-weight: bold;
margin: 0 10px 0 0;
padding: 10px;
text-transform: uppercase;
}
And you need to add span with class="dropcap" to the first letter of your paragraph like this.
<span class="dropcap">B</span>BC News.
It becomes like this.
BBC News.
You can add more class like .blue after .dropcap
.blue
{
background: #3B7CEF;
}
And add this class to a span tag.
<span class="dropcap blue">C</span>NN News.
CNN News.
Read the rest of this entry »
How to add Read More to your Blogger
This is an official article from Blogger.
And I'd like to show how I implemented to this blog.
1. Save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you can replace it in case anything goes wrong.
2. Paste the following code in your header. I add it just before </head> tag.
3. Adding "Read More" Links
Go to Layout and click EditHTML. Add a tick to Expand Widget Templates. Then add the following code to your template, after the <data:post.body/> tag:
You can replace the "Read more!" text with Continue Reading or Read the rest of this entry », etc.
4. Post Modifications
Go to Posting and create a new article. And wrap your article which you want to hide with the following code.
That's it folks. Thank you for reading.
Read the rest of this entry »
And I'd like to show how I implemented to this blog.
1. Save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you can replace it in case anything goes wrong.
2. Paste the following code in your header. I add it just before </head> tag.
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
3. Adding "Read More" Links
Go to Layout and click EditHTML. Add a tick to Expand Widget Templates. Then add the following code to your template, after the <data:post.body/> tag:
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>
You can replace the "Read more!" text with Continue Reading or Read the rest of this entry », etc.
4. Post Modifications
Go to Posting and create a new article. And wrap your article which you want to hide with the following code.
<span class="fullpost">
Your main article here
</span>
That's it folks. Thank you for reading.
Read the rest of this entry »
Add your Twitter updates to your Blogger
On the right side, you can see my Twitter updates.
Here is how you can add your Twitter to your Blogger.
1. Login to your Blogger and go to Layout.
2. Click "Add a Gadget" and select HTML/JavaScript. Add the following code.
<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/YOUR-Twitter-NAME">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/YOUR-Twitter-NAME.json?callback=twitterCallback2&count=10" type="text/javascript"></script>
3. In the above code, change YOUR-Twitter-NAME to your twitter name. If you want to change the number of updates, change count=10 to any number you wish.
4. Add the following CSS to your Blogger CSS and tweak it according to your taste.
/* Twitter */
#twitter_update_list li {
background-color: #EFF4FF;
text-indent: 0;
margin-bottom: 5px;
border: 1px solid #B5BDCF;
}
#twitter_update_list li span{
}
Read the rest of this entry »
How to add jQuery Plugin: Scroll to Top to Blogger
After reading an article "jQuery Plugin: Scroll to Top" by Craig Wilson a couple of weeks ago, here is how to add it to your Blogger.
There is a similar code by David Walsh here. But I am using a code by Craig.
You can see the action in this page. You just need to scroll down a bit and you will see a ^Scrol to Top box on the right bottom. By clicking it you go to the top of the page.
1. Add the following HTML before your </body> tag.
<a href="#" id="toTop">^ Scroll to Top</a>
2. Add the following CSS code in your Blogger CSS code.
/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
3. Add the following jQuery codes just before </body> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
Read the rest of this entry »
Blogger tips
You can find many great tips for Blogger users in blogspottutorial.com
On the right column there is Blogging tutorial For Beginner.
I used the following tips for this blog.
How to add related post widget
Add search engine to your blog
Another helpful tips for Blogger users is Amanda Fazani's website Bloggerbuster.
You can download a free PDF book to improve your Blogger design.
Read the rest of this entry »
Social Bookmarking Button "AddThis"
In my last post "Add sharethis widget to your Blogger, WP or website", I wrote how to add ShareThis button to your website or Blooger.
Then I found another social bookmarking button called "AddThis" . This site also offers copy and paste code for your website.
You can read an article from Packt Publishing about AddThis.
Another article from Packt.
Read the rest of this entry »
Subscribe to:
Posts (Atom)
Posts
