tag:blogger.com,1999:blog-67702649763439400572024-03-05T13:52:17.521+05:30Blogger Gadgets and Widgets | SEO | Blogger Tips and TricksRoyal Tutor is a blog about Professional Blogger Tutorials, Resources, Tools, CSS, HTML Tutorials, Tips, Tricks, and General tutorials.Unknownnoreply@blogger.comBlogger149125tag:blogger.com,1999:blog-6770264976343940057.post-31647407365636319962011-08-20T21:01:00.000+05:302011-08-20T21:01:12.093+05:30How to Change Feedburner Email Subject Line<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeX1a2RSC8YB5gnC261Nh-82ORh4nnb6jP-juOmzTNy4g8F7mPHqOASnK8oXCmK_k0KDubzenL1MKcavNpsmJ6gqoU7hNSKmUzo3sH_Ole2ojCdhAv3F_k-ldDp6FDQ1FFNPaGk_UhGMY/s1600/FeedBurner.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeX1a2RSC8YB5gnC261Nh-82ORh4nnb6jP-juOmzTNy4g8F7mPHqOASnK8oXCmK_k0KDubzenL1MKcavNpsmJ6gqoU7hNSKmUzo3sH_Ole2ojCdhAv3F_k-ldDp6FDQ1FFNPaGk_UhGMY/s200/FeedBurner.jpg" width="200" /></a></div>One of the best ways to build a loyal readership for your blog is to encourage visitors to subscribe via e-mail or RSS feed. FeedBurner is one of the most popular feed management solution that is available today for absolutely free of charge. Many bloggers use FeedBurner to manage their blog’s feed.<br />
<br />
I noticed that the email subject line for my blog feed was always “Royal Tutor”. This does not give any information about what the email is about and the subscriber has to open the email before he can see the post title. Here’s how to tweak your FeedBurner settings so it will create dynamic Subject lines<br />
<br />
1. Log in to your Feedburner account.<br />
2. Click the name of the feed you want to update.<br />
3. Click the “Publicize” tab.<br />
4. Choose "Email Subscriptions" from the navigation menu <a name='more'></a><br />
5. That’ll open a sub-menu. Still in the left sidebar, click “Email Branding.”<br />
6. Change what you want your subject line to be under the "Email Subject/Title" box.<br />
<br />
<span class="info"><br />
If you update your blog more than once a day, click the box that says, “Change Subject when an email has 2 or more items” and use following codes:<br />
</span><br />
Examples<br />
<ul><li>To replace email subject line with your "last post title"</li>
</ul><div class="code">${lastestitemTitle}</div><ul><li>To replace email subject line with your "last post title - blog name"</li>
</ul><div class="code">${latestItemTitle} - Your blog name</div>You can also use<br />
<div class="code">Your Blog Name - “${latestItemTitle}” plus ${m} more</div><div class="code">Your Blog Name (in this message: ${n} new items)</div><br />
${n}: shows the total number of items<br />
${m}: shows the number of items beyond the latest<br />
<br />
So what are you waiting for?Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-6770264976343940057.post-36323523510388931552011-07-17T13:15:00.003+05:302011-07-17T13:27:25.029+05:30Make Blogger Post Title Unclickable In Single Post Page<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYy1qG-jMe8C590iJSPlnQrLHhtEk1SC8CYCUHZ6jnpoNnhfuk7dxalPW8Szi2f7sMLa1yZpJkl-fE9SWynwIEP7DX9_cN8yTbAUtz0hAdO0L2iYWazurKahv9TFqTQm7xGJbjwHvY8UEv/s1600/Make+Blogger+Post+Title+Unclickable+In+Single+Post+Page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYy1qG-jMe8C590iJSPlnQrLHhtEk1SC8CYCUHZ6jnpoNnhfuk7dxalPW8Szi2f7sMLa1yZpJkl-fE9SWynwIEP7DX9_cN8yTbAUtz0hAdO0L2iYWazurKahv9TFqTQm7xGJbjwHvY8UEv/s400/Make+Blogger+Post+Title+Unclickable+In+Single+Post+Page.png" width="400" /></a></div>If you want to make your blog post title unclickable in single post view then this tutorial is present for you. You might have notice that the titles of single post in this blog are unclickable.If not, view this post title. Then you see its unclickble. Now visit the homepage of this blog, then, look at any of the post titles. You can see the title is clickable and easily go inside the post by clicking the title of a post. So let’s do it, <br />
<br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template.<a name='more'></a><br />
<div class="code"><b:if cond='data:post.title'><br />
<h2 class='post-title entry-title'><b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<a expr:href='data:post.url'><data:post.title/></a><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</b:if><br />
</h2> </div><span class="tip">Please note that this code block not be similar in your template. I use H2 tag. But in your case it might be H1 or H3</span><br />
Now, replace the above code with the following:<br />
<div class="code"><b:if cond='data:post.title'><br />
<h2 class='post-title entry-title'><b:if cond='data:blog.pageType == "item"'><br />
<b:if cond='data:post.link'><br />
<data:post.title/><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<data:post.title/><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</b:if><br />
<br />
<b:else/><br />
<b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<a expr:href='data:post.url'><data:post.title/></a><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</b:if><br />
</b:if><br />
</h2> </div>Now save the template and See how it work.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-6770264976343940057.post-28475405122464908492011-06-21T23:33:00.002+05:302011-06-21T23:44:38.830+05:30Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOQto8BftorIiMftVL60NSt15VIboWRWy40vUNkeIl6RUvwF6UiNHUBahBCdndnQ_oQ5MsaFHs2otvLzKm6kyZasUpVAH7fnlb_Dd0G3WXANYUxn2pfQ4l8PXINkPWhwVHsXrGorSDjiB/s1600/HideShow+WidgetsGadgets+in+Homepoststaticarchive+pages+in+Blogger-royaltutor.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOQto8BftorIiMftVL60NSt15VIboWRWy40vUNkeIl6RUvwF6UiNHUBahBCdndnQ_oQ5MsaFHs2otvLzKm6kyZasUpVAH7fnlb_Dd0G3WXANYUxn2pfQ4l8PXINkPWhwVHsXrGorSDjiB/s200/HideShow+WidgetsGadgets+in+Homepoststaticarchive+pages+in+Blogger-royaltutor.jpg" width="191" /></a></div>Once you activate any widget, in your blog, it will be displayed in all the pages by default, including your homepage.But what if you want a certain widget to appear only on a certain page or pages, can it be done? Yes You can do this easily using conditional tags.<br />
<br />
first go to Blogger’s Dashboard > Design > Page Elements tab and add a “HTML/JavaScript” gadget. I prefer it because it will be easy for everyone to understand. Give it a unique title so that it does not match with any of the titles of other widgets added.<br />
<br />
Go to Dashboard > Design > Edit HTML. Check the Expand Widget Templates check box on top right of the HTML window. Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box. Let’s say I have given the title for my widget as “Recent Comments”. After searching you will find the below snippets:<br />
<a name='more'></a><br />
<div class="code"><b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'><br />
<b:includable id='main'><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
</b:includable> <br />
</b:widget> </div>It's the widget/gadget that you have added from Page Elements tab. All is left is to add conditional tags just below <b:includable id="main"> and above </b:includable> to hide the widget form specific pages or posts in Blogger. Let us see some examples:<br />
<br />
<span class="royalb">To show the widget only in HomePage</span><br />
<div class="code"><b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'><br />
<b:includable id='main'><br />
<span style="color: green;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<span style="color: green;"></b:if></span><br />
</b:includable><br />
</b:widget> </div><br />
<span class="royalb">To Show Blogger Widget in Post Pages only</span><br />
<div class="code"><b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'><br />
<b:includable id='main'><br />
<span style="color: green;"><b:if cond='data:blog.pageType == "item"'></span><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<span style="color: green;"></b:if></span><br />
</b:includable><br />
</b:widget> </div><br />
<span class="royalb">To show the widget in any particular page</span><br />
<div class="code"><b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'><br />
<b:includable id='main'><br />
<span style="color: green;"><b:if cond='data:blog.url == "URL of the page"'></span><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<span style="color: green;"></b:if></span><br />
</b:includable><br />
</b:widget> </div><br />
<span class="royalb">To hide a widget only in a particular page</span><br />
<div class="code"><b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'><br />
<b:includable id='main'><br />
<span style="color: green;"><b:if cond='data:blog.url != "URL of the page"'></span><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<span style="color: green;"></b:if></span><br />
</b:includable><br />
</b:widget> </div><br />
<span class="royalb">To show widgets only in Archive Pages</span><br />
<div class="code"><b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'><br />
<b:includable id='main'><br />
<span style="color: green;"><b:if cond='data:blog.pageType == "archive"'></span><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<span style="color: green;"></b:if></span><br />
</b:includable><br />
</b:widget> </div><br />
<span class="royalb">To show widgets only in Static Pages</span><br />
<div class="code"><b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'><br />
<b:includable id='main'><br />
<span style="color: green;"><b:if cond='data:blog.pageType == "static_page"'></span><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<span style="color: green;"></b:if></span><br />
</b:includable><br />
</b:widget> </div><br />
<span class="royalb">To hide widgets in Static Pages</span><br />
<div class="code"><b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'><br />
<b:includable id='main'><br />
<span style="color: green;"><b:if cond='data:blog.pageType != "static_page"'></span><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<span style="color: green;"></b:if></span><br />
</b:includable><br />
</b:widget> </div><br />
The code will check whether the condition is true or false:<br />
<ul><li>If the result is true, it executes (and display) the widget’s content.</li>
</ul><ul><li>If the result is false, it skips the content and hide the widget. </li>
</ul>Click Save Template button and view your blog.<br />
That’s all:)Unknownnoreply@blogger.com13tag:blogger.com,1999:blog-6770264976343940057.post-24124254714975976852011-06-20T20:47:00.002+05:302011-06-20T21:08:53.846+05:30Add Animated Flying Twitter Bird Gadget For Blogger<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfKtvagWySZIFjVNNV2-ndZdXK8S3Hwxq-vk3I649Jow3UFiFCQ5MyFFEjrsOR0p3Zv9as8mpnKgnBY2RzzQy7eAP40I6R0UDF2udW4raNIZK4fABwS_S5iVQ5mZ0lsPjtjmpL9K6T_3q/s1600/Add+Animated+Flying+Twitter+Bird+Gadget+For+Blogger-Royal-Tutor.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfKtvagWySZIFjVNNV2-ndZdXK8S3Hwxq-vk3I649Jow3UFiFCQ5MyFFEjrsOR0p3Zv9as8mpnKgnBY2RzzQy7eAP40I6R0UDF2udW4raNIZK4fABwS_S5iVQ5mZ0lsPjtjmpL9K6T_3q/s200/Add+Animated+Flying+Twitter+Bird+Gadget+For+Blogger-Royal-Tutor.png" width="200" /></a></div>Twitter is one of the most popular Social networking sites in the world among Bloggers to promote their blogs. So here I have a very cool Blogger Twitter widget, an actual Animated flying Twitter Bird that flies around your blog.<br />
<br />
Twitter bird flying animated effect by Javascript Hack and when you scroll the page Up or Down, twitter bird will come in front of your page. The bird found itself as the "follow me" link on the Twitter account. If you move the mouse pointer over the bird, a "follow me" button and a "tweet this" button displayed.<br />
<br />
<br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template.<a name='more'></a> <br />
<div class="code"></body> </div>And just before it, paste this code:<br />
<div class="code"><!-- Twitter Bird Widget for Blogger by Royaltutor.net --><br />
<script type="text/javascript" src="http://yourjavascript.com/10116102250/royaltutor.net-twitterbird.js"><br />
</script><br />
<script type="text/javascript"><br />
var twitterAccount = "<font color="blue">RoyalTutor</font>";<br />
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";<br />
tripleflapInit();<br />
</script><br />
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Royaltutor.net' href="http://www.royaltutor.net" target='_blank'>Blogger Widgets</a></span><br />
<!-- Twitter Bird Widget for Blogger by Royaltutor.net --> </div>Replace <font color="blue">RoyalTutor</font> with your Twitter Account User Name.<br />
<br />
Now click Save Template.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-6770264976343940057.post-24028780054729613392011-05-10T14:05:00.000+05:302011-05-10T14:05:33.316+05:30How to Add Bookmark Us Hyperlink to Blogger Blogs<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8GaoGMgGgzYWNiBbTYcnU5FgBaGGudhw6hfLjg3_By8A0b1I8484UNW06SYnvJhIKyvZk_nf4vHKnFRYUfO_TS3Nr2f7-CugwVyIEeBtgWGcal-5arGe6C9gBzSpa0NUHPduPKKYSJpE/s1600/How+to+Add+Bookmark+Us+Hyperlink+to+Blogger+Blogs.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8GaoGMgGgzYWNiBbTYcnU5FgBaGGudhw6hfLjg3_By8A0b1I8484UNW06SYnvJhIKyvZk_nf4vHKnFRYUfO_TS3Nr2f7-CugwVyIEeBtgWGcal-5arGe6C9gBzSpa0NUHPduPKKYSJpE/s200/How+to+Add+Bookmark+Us+Hyperlink+to+Blogger+Blogs.png" width="200" /></a></div>For your website to have traffic, people should remember your site and visit again. This problem was solved long time ago with browser's Bookmarks. Still, people are lazy and usually are not using it, unless you remind them. so you can add a quick "Bookmark this page" link in all your pages. Clicking on the link prompts the user with a dialog box to add the specified URL to the Favorites list. <br />
<br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template. <br />
<a name='more'></a><br />
<div class="code"></head> </div>And immediately before it, paste this code:<br />
<div class="code"><script src='http://yourjavascript.com/0514111300/bookmark_this_page_royaltutor_net.js' style='text/javascript'/> </div>Now click Save Template.<br />
<br />
Then, Go To > Design > Page Elements.<br />
<br />
Simply add a Gadget of HTML/JavaScript type and add the code given below<br />
<div class="code"><a href="javascript:bookmarksite('<span style="color: red;">WEBSITE NAME GOES HERE</span>', '<span style="color: green;">URL GOES HERE</span>')"><span style="color: blue;">Bookmark This Site</span></a> </div>and to change the text to image / button , we should replace the word <span style="color: blue;">Bookmark This Site</span> in the code with the following <br />
<div class="code"><img src="<span style="color: blue;">URL-OF-BOOKMARK-BUTTON</span>"/> </div>Finally save your template and you are done!Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-6770264976343940057.post-17692397371232585102011-05-10T13:25:00.001+05:302011-05-10T13:29:04.443+05:30Add Animated Flash Clock To Your Blogger blogTwo most common widgets bloggers and webmasters put on their websites/blogs are a Clock and a Calendar.A clock gives a beautiful look to a website. A clock is a must for a personal blog.You simply have to copy the code below each clock and add it to your blog<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfaqKJDgs0GmEsJHkSOLsepeQHksa-VaRoxSKUCRMpwTUTvVvbfCvfhiG-V-sqh1Sdl5ugGXBg8TSSv8iPmy4G-q17OMAY7QvpGU5AlIg27aPlFNh9Jqjp3woaK1CYa_4kiAyZuPK8AFfe/s1600/Add+Animated+Flash+Clock+To+Your+Blogger+blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfaqKJDgs0GmEsJHkSOLsepeQHksa-VaRoxSKUCRMpwTUTvVvbfCvfhiG-V-sqh1Sdl5ugGXBg8TSSv8iPmy4G-q17OMAY7QvpGU5AlIg27aPlFNh9Jqjp3woaK1CYa_4kiAyZuPK8AFfe/s1600/Add+Animated+Flash+Clock+To+Your+Blogger+blog.jpg" /></a></div><br />
Login To Blogger Go To > Design > Page Elements.<br />
<br />
Simply add a Gadget of HTML/JavaScript type.<br />
<br />
add one of code given below in to it:<br />
<a name='more'></a><br />
1. <b>Clicking Digital Clock</b><br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed></object></center><br />
<div style="text-align: center;">(The ticking Sound that you hear is from this Clock)</div><div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed></object> </div><br />
2.<b>Black Outline Clock</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object></center> <br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object> </div><br />
3.<b>Simple Clock</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object></center> <br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object> </div><br />
4.<b>Analogue Plus Digital</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf" width="150" height="150" wmode="transparent"> </embed></object></center><br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf" width="150" height="150" wmode="transparent"> </embed></object> </div><br />
5.<b>A Clock with a Lively touch to it</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object></center> <br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object> </div><br />
6.<b>Wooden Clock</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object></center> <br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object> </div><br />
7.<b>An Open space Clock</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object></center> <br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object> </div><br />
8.<b>A rotating Red belt Round the Clock</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf" width="150" height="150" wmode="transparent"></embed></object></center><br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf" width="150" height="150" wmode="transparent"></embed></object> </div><br />
9.<b>A rotating Silver Clock</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf" width="150" height="150" wmode="transparent"> </embed></object></center> <br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf" width="150" height="150" wmode="transparent"> </embed></object> </div><br />
10.<b>A Clock plus a Calendar</b><br />
<br />
<br />
<br />
<br />
<center><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf" width="150" height="250" wmode="transparent"></object></center> <br />
<br />
<div class="code"><object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf"> <embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf" width="150" height="250" wmode="transparent"></object> </div><br />
11.<b>White Clock</b><br />
<br />
<br />
<br />
<br />
<center><embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed></center><br />
<br />
<div class="code"><embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed> </div><br />
12.<b>Black Cool Clock</b><br />
<br />
<br />
<br />
<br />
<center><embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed></center><br />
<br />
<div class="code"><embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed> </div><br />
13.<b>House Clock</b><br />
<br />
<br />
<br />
<br />
<center><embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed></center><br />
<br />
<div class="code"><embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed> </div><br />
14.<b>Black Clock</b><br />
<br />
<br />
<br />
<br />
<center><embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed></center><br />
<br />
<div class="code"><embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed> </div><br />
Save your widget and check your blog.Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-6770264976343940057.post-31071232788822816362011-02-01T19:58:00.000+05:302011-02-01T19:58:29.625+05:30How to add “Email Subscription Form” to your blogger blog<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiZCkiIB_kbbtpILI9QiGtUULVUEs_Pn4eBEqhsxLk2Nh3OEUtT1H6kB-R-gat8ZsADMmJyjEG3jXT_erkdva_p7jwtmOYem5OSmqvAUEcSI0CVJy9oLJyw0lvvdH4o0iUO9cD14pautyM/s1600/How+to+add+Email+Subscription+Form+to+your+blogger+blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiZCkiIB_kbbtpILI9QiGtUULVUEs_Pn4eBEqhsxLk2Nh3OEUtT1H6kB-R-gat8ZsADMmJyjEG3jXT_erkdva_p7jwtmOYem5OSmqvAUEcSI0CVJy9oLJyw0lvvdH4o0iUO9cD14pautyM/s320/How+to+add+Email+Subscription+Form+to+your+blogger+blog.jpg" width="320" /></a></div><br />
One of the most important thing for a blogger is to keep connect your existing visitors with your blog. If you are providing useful information in your blog, then every visitor will want to get latest updates from your blog. For that purpose you need a Email Subscription Form in your blog , so that interested visitors can easily get latest updates from your blog.<br />
<br />
and it’s very easy to add email or feed Subscription Form to your blogger blog (blogspot).<br />
So let’s do it, <br />
<br />
Login To Blogger Go To > Design > Page Elements.<br />
<a name='more'></a><br />
Simply add a Gadget of HTML/JavaScript type.<br />
<br />
add this code in to it:<br />
<div class="csscode"><style><br />
.rt-email{<br />
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxEoPKPWI3ccWSbBJz6SraJqjhForMZAu5YAUDRuDG0j5t6sye-2oDP96i8UhZuUPyEjAuQETuX67CiW4tLgG3uMBfZNDiTw9KMOqt9s6_jIL8u5gF9WcAMa3huuxEbsPHNi3kV_RezJA/s1600/mail.png) no-repeat 0px 12px ;<br />
width:300px;<br />
padding:10px 0 0 55px;<br />
float:left;<br />
font-size:1.4em;<br />
font-weight:bold;<br />
margin:0 0 10px 0;<br />
color:#686B6C;<br />
}<br />
.rt-emailsubmit{<br />
background:#9B9895;<br />
cursor:pointer;<br />
color:#fff;<br />
border:none;<br />
padding:3px;<br />
text-shadow:0 -1px 1px rgba(0,0,0,0.25);<br />
-moz-border-radius:6px;<br />
-webkit-border-radius:6px;<br />
border-radius:6px;<br />
font:12px sans-serif;<br />
}<br />
.rt-emailsubmit:hover{<br />
background:#E98313;<br />
}<br />
.textarea{<br />
padding:2px;<br />
margin:6px 2px 6px 2px;<br />
background:#f9f9f9;<br />
border:1px solid #ccc;<br />
resize:none;<br />
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);<br />
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);<br />
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; <br />
width:170px;<br />
color:#666;}<br />
</style><br />
<div class="rt-email"><br />
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('<span style="color: blue;">http://feedburner.google.com/fb/a/mailverify?uri=RoyalTutor</span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><br />
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /><br />
<input type="hidden" value="<span style="color: blue;">RoyalTutor</span>" name="uri"/><input type="hidden" name="loc" value="en_US"/><br />
<input class="rt-emailsubmit" value="Submit" type="submit" /><br />
</form><br />
</div></div><br />
Now replace <span style="color: blue;">http://feedburner.google.com/fb/a/mailverify?uri=RoyalTutor</span> with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.<br />
<br />
Replace <span style="color: blue;">RoyalTutor</span> with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: blue;">RoyalTutor</span><br />
<br />
Save your widget and check your blog.Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-6770264976343940057.post-39808348887474744892011-01-29T10:55:00.000+05:302011-01-29T10:55:15.618+05:30How To Add Html And Other Codes To Your Blog PostsBloggers often do many hacks to their blog themes or templates to give it a professional look. If you run a blog where you post tutorials and use HTML, CSS, JavaScript or any other codes in your posts then you can show these codes on a colored and professional looking background. It will not only help you to give your blog a professional look but it will also help your readers to easily distinguish the codes used in the post.<br />
<br />
<i> The result will look like this:</i><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihguhDJAXybsN33D5TIAHOTjglKvtmBlGV2X3IGewhQHGK_JqFi4aqDGPnMbBhkyi8QZgTMSdSg2L-v_FSraePUnyDJZuD5V95o-ZmPPO_ahSk9_9MfUe00pNmSHqOjPA6tbPWICoWjXti/s1600/Royal+Tutor+Code.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihguhDJAXybsN33D5TIAHOTjglKvtmBlGV2X3IGewhQHGK_JqFi4aqDGPnMbBhkyi8QZgTMSdSg2L-v_FSraePUnyDJZuD5V95o-ZmPPO_ahSk9_9MfUe00pNmSHqOjPA6tbPWICoWjXti/s1600/Royal+Tutor+Code.jpg" /></a></div><a name='more'></a><br />
<br />
As usual,Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template.<br />
<div class="code">]]></b:skin> </div>And immediately before it, paste this code:<br />
<div class="code">.rtcv {<br />
margin : 15px 35px 15px 15px;<br />
padding : 20px 10px 10px 35px;<br />
background : #EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV015eMhlVR1VyDuGF5eSvSSNAQLkRZJQXKAYTnVpWYrq2J00xCeCNAE4Urrowt_vZ93tj8wzek7THflBythafof1Atj8zJK-KIgZGHh47DuIRyb8jXIujiKFjARHob3bsZtF9StGB4mk/s1600/royal+tutor+code.gif) repeat-y top left;<br />
border-top : 1px solid #AAAAAA;<br />
border-right : 1px solid #AAAAAA;<br />
border-bottom : 1px solid #AAAAAA;<br />
border-left : 1px solid #AAAAAA;<br />
} </div>Now save you template to make the changes apply<br />
<br />
From now onwards whenever you want to insert some codes in your posts always put it between <div class=”rtcv”> and </div> like these as Shown below:<br />
<div class="code"><div class="rtcv"><br />
HTML Code Here<br />
</div> </div>That’s all.<br />
<br />
Now you can show your code on nice background and give a professional look to your blog .Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-6770264976343940057.post-60316323076254006592011-01-28T23:36:00.002+05:302011-01-29T09:54:28.558+05:30Replace Newer, Older And Home Links With Images In BloggerChange Older Post And Newer Post Link With icons or images in Blogger is very nice trick to make your blog look very beautiful.As it make your blog look more beautiful than before if you are using good icons to be get replaced with older post or newer post or home link.Today i will tell you how easy it is to hide those links and place your any image you like.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHqinaReoyhqGuHIE2gMqMsmQVvUAKt5GsVYQ8B7eU_SGJH-RWZl4HCh8Llq6OsTe-Qj9MovNxQIWkOF3uY9JSXLa8Wp8NSI6NgTIlAsQSwxGnrBE8AzuzwrRHcirA6usfDAtgIw0ed3HX/s1600/right.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHqinaReoyhqGuHIE2gMqMsmQVvUAKt5GsVYQ8B7eU_SGJH-RWZl4HCh8Llq6OsTe-Qj9MovNxQIWkOF3uY9JSXLa8Wp8NSI6NgTIlAsQSwxGnrBE8AzuzwrRHcirA6usfDAtgIw0ed3HX/s400/right.png" width="400" /></a></div><br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template.<br />
<a name='more'></a><br />
<div class="code"><data:newerPageTitle/> </div>And replace it with this code,<br />
<div class="code"><img src="URL-OF-PREVIOUS-BUTTON"/> </div>Now search for this,<br />
<div class="code"><data:olderPageTitle/> </div>And replace it with this,<br />
<div class="code"><img src="URL-OF-NEXT-BUTTON"/> </div>Then search for this,<br />
<div class="code"><data:homeMsg/> </div>above code will appear twice and replace both appearances with this code,<br />
<div class="code"><img src="URL-OF-HOME-BUTTON"/> </div>Make sure to replace the URLs with the Image Links of your uploaded Images.And you can find buttons by searching in google.<br />
<br />
Finally save your template and you are done!Unknownnoreply@blogger.com10tag:blogger.com,1999:blog-6770264976343940057.post-36955340283589118312011-01-28T23:12:00.000+05:302011-01-28T23:12:05.473+05:30Customize Blogger Read More Links With image ButtonsI'm happy to share here some related tips for those seeking to learn how to customize and style the 'Read More' or Jump link in various ways.<br />
<br />
<b>Please download a copy of your template before applying any changes.</b> <br />
<br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template. <br />
<a name='more'></a><br />
<div class="code"><b:if cond='data:post.hasJumpLink'><br />
<div class='jump-link'><br />
<a expr:href='data:post.url + "#more"'>Read More </a><br />
</div><br />
</b:if > </div>if you found the code in your template, ok you have to skip this step<br />
but before you skip it,<br />
make sure that the third line in the code looks like this <br />
<div class="code"><a expr:href='data:post.url + "#more"'>Read More </a> </div>And not<br />
<div class="code"><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div>if you found it like the second one, please replace it with the first one<br />
<br />
if it’s not in your template you’ll have to add it<br />
So,find (CTRL+F) this code in the template. <br />
<div class="code"><data:post.body/> </div>and just after it, add the next code, <br />
<div class="code"><b:if cond='data:post.hasJumpLink'><br />
<div class='jump-link'><br />
<a expr:href='data:post.url + "#more"'>Read More </a><br />
</div><br />
</b:if > </div>Now we finished adding the require code for customizing this trick.<br />
<br />
after applying the first step to your template, you should have this code added to your template :<br />
<div class="code"><b:if cond='data:post.hasJumpLink'><br />
<div class='jump-link'><br />
<a expr:href='data:post.url + "#more"'><span style="color: blue;">Read More</span></a><br />
</div><br />
</b:if ></div>This code will display your read more link in this format : Read More<br />
<br />
and to change the text to image / button , we should replace the word Read More in the code with the following <br />
<div class="code"><img border="0" src="Paste here the button Image URL"/> </div>so you should have some thing like this <br />
<div class="code"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbevmmT7Dn88CkQQ5oLuFKJph14fZqQ81Bj1-Rf6rAENao80ATLfrWt6pfHu3ZSDWzLcB49kDYG_FxLoBo1jyNwe2I-BYAMvCl1DvDaIGbppKynzVjERxQKIuOSV5EH5QMTdYj2XVSykn/s1600/images.jpg"/> </div><br />
if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in red color.<br />
<div class="code"><b:if cond='data:post.hasJumpLink'><br />
<div class='jump-link'><br />
<a expr:href='data:post.url + "#more"'><span style="color: red;"><p align="Left"></span><img border="0" src="Paste here the button Image URL"/><span style="color: red;"></p></span></a><br />
</div><br />
</b:if > </div>This will display read more in image button aligned to left.<br />
<br />
or<br />
<br />
<div class="code"><b:if cond='data:post.hasJumpLink'><br />
<div class='jump-link'><br />
<a expr:href='data:post.url + "#more"'><span style="color: red;"><p align="right"></span><img border="0" src="Paste here the button Image URL"/><span style="color: red;"></p></span></a><br />
</div><br />
</b:if > </div>This will display read more in image button aligned to right<br />
Now click Save Template.<br />
<br />
Here is some good samples for read more buttons :<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGkGewwGQIp87D1w-8DH0XK4IDEk6tK_WwetuAPJOE7M_cS2voKlNjfTnqiAXXhyux1fvkjo0siNkk09kGJmv9A3C0FMxen5KcECkHglz_s71OR_snNPFuGfBXmBf-SZ0_3GKJVmpXlON/s1600/dewe.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGkGewwGQIp87D1w-8DH0XK4IDEk6tK_WwetuAPJOE7M_cS2voKlNjfTnqiAXXhyux1fvkjo0siNkk09kGJmv9A3C0FMxen5KcECkHglz_s71OR_snNPFuGfBXmBf-SZ0_3GKJVmpXlON/s1600/dewe.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6QAF05pJXKy_QFccPy03TmrVhD_jYbYolZHgv7B88W7dytCfmKUoikXIgqCbbHAbzfmmhi72wpOCDk-GBxhbxEh0Z_Xi4nXkTZxNfL2RFngG4NVUJYovnAu5OSXQyUCV2d4wgSwF1AH6j/s1600/dfd.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6QAF05pJXKy_QFccPy03TmrVhD_jYbYolZHgv7B88W7dytCfmKUoikXIgqCbbHAbzfmmhi72wpOCDk-GBxhbxEh0Z_Xi4nXkTZxNfL2RFngG4NVUJYovnAu5OSXQyUCV2d4wgSwF1AH6j/s1600/dfd.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVC2HkjO9ZjD2iXWRySfxa5LWws_Qxr5q7jz3gMcuhW3wFz1wRyRY4Z7mBzqLATzZY2mLwu6rLXSVRN7xT-fGEr-WaZvBFq9JnGPXCwxJ7yzf0-JRPB3e9ry-X6S8vLv2cMi8mDZcqDsu3/s1600/dsd.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVC2HkjO9ZjD2iXWRySfxa5LWws_Qxr5q7jz3gMcuhW3wFz1wRyRY4Z7mBzqLATzZY2mLwu6rLXSVRN7xT-fGEr-WaZvBFq9JnGPXCwxJ7yzf0-JRPB3e9ry-X6S8vLv2cMi8mDZcqDsu3/s1600/dsd.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbevmmT7Dn88CkQQ5oLuFKJph14fZqQ81Bj1-Rf6rAENao80ATLfrWt6pfHu3ZSDWzLcB49kDYG_FxLoBo1jyNwe2I-BYAMvCl1DvDaIGbppKynzVjERxQKIuOSV5EH5QMTdYj2XVSykn/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbevmmT7Dn88CkQQ5oLuFKJph14fZqQ81Bj1-Rf6rAENao80ATLfrWt6pfHu3ZSDWzLcB49kDYG_FxLoBo1jyNwe2I-BYAMvCl1DvDaIGbppKynzVjERxQKIuOSV5EH5QMTdYj2XVSykn/s1600/images.jpg" /></a></div> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdg5_AwEdncDldEHrIjK3BkfHSOmX80tNbOm2l8qrQ9Gezotc-iklHNsMz8gppCIss1TSQRw09vC_SKsKJx5VRrv9ODOpa2KIkIv6uuu2Q20j21HxkwkDJfh1p-uHJvwJopoGiRmHSN3jh/s1600/re.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdg5_AwEdncDldEHrIjK3BkfHSOmX80tNbOm2l8qrQ9Gezotc-iklHNsMz8gppCIss1TSQRw09vC_SKsKJx5VRrv9ODOpa2KIkIv6uuu2Q20j21HxkwkDJfh1p-uHJvwJopoGiRmHSN3jh/s1600/re.jpg" /></a></div><br />
And you can find more buttons by searching in google for “read more button”.Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-6770264976343940057.post-70129213574908082162011-01-28T20:54:00.000+05:302011-01-28T20:54:15.932+05:30How To Customize Blockquote In Blogger"Block quotes" are sections of text which are generally used to highlight quotes from other sources; they are usually indented from the main body of a blog posts and may also have a slightly different background color.<br />
Ever wanted to change the look of blockquote ?<br />
<br />
First of all, if you don't know what a blockquote tag is, then edit any of your previous posts and add this code to it (anywhere in the post):<br />
<div class="code"><blockquote>Write your quotations here</blockquote> </div>Save the post, and check it out.<br />
<br />
You will see that the text "Write your quotations here" is separated from your regular content. At Royal Tutor, just like the one below.<br />
<a name='more'></a><br />
<blockquote>Write your quotations here</blockquote><br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) something like this:<br />
<div class="code">blockquote {<br />
...<br />
...<br />
... } </div>or this<br />
<div class="code">.post-body blockquote {<br />
margin: 1em 3em;<br />
padding: .5em;<br />
background-color: #f6ebc1;<br />
} </div>Now you just have to change the code inside those curly brackets {....}<br />
<br />
So to display your blockquote like this:<br />
<br />
Style 1<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr5Na8C85bDwz8b3n2vhpCKaOFRWb9wzex7EDPLELmaFWyxXcZin9QNdBivhhIgFCK5I3oH1QhIgbsR-kP_fz7wWl9oYO0oInS3jSBxQukX_xj_mAbhINh0w6L8PXUj4_eCCU2fRbolO2k/s1600/1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr5Na8C85bDwz8b3n2vhpCKaOFRWb9wzex7EDPLELmaFWyxXcZin9QNdBivhhIgFCK5I3oH1QhIgbsR-kP_fz7wWl9oYO0oInS3jSBxQukX_xj_mAbhINh0w6L8PXUj4_eCCU2fRbolO2k/s320/1.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote {<span style="color: blue;"> margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; </span>} </div><br />
Style 2<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-wnFwDx7hN8S9hZng7CXh64IY4aGyLh7-TT4Dy_Glmkx9nWzKH9g0gaHcPxM8_8neozaK0N5GqKbCctC7hmCGsuwrUwyfiAXtlLmBGI59XlycV4BnB3klIIpbkUA2fsXmBkEXWIwQtaAV/s1600/2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-wnFwDx7hN8S9hZng7CXh64IY4aGyLh7-TT4Dy_Glmkx9nWzKH9g0gaHcPxM8_8neozaK0N5GqKbCctC7hmCGsuwrUwyfiAXtlLmBGI59XlycV4BnB3klIIpbkUA2fsXmBkEXWIwQtaAV/s320/2.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote {<span style="color: blue;"> margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em;</span> } </div><br />
Style 3<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrRrD26WLHe58AxpOBp2Uotjyz4aJxoO1a9YsYboR9MSbpfkUE9yyu6fxcZHcV9UmhTj9Hbiy50p-Uzt4KOSdiooNXjxJhZmddaok4ax4LKfeN0FK4ePKVugaoK5U0R_b6pQNWTPkqMo9U/s1600/3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="109" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrRrD26WLHe58AxpOBp2Uotjyz4aJxoO1a9YsYboR9MSbpfkUE9yyu6fxcZHcV9UmhTj9Hbiy50p-Uzt4KOSdiooNXjxJhZmddaok4ax4LKfeN0FK4ePKVugaoK5U0R_b6pQNWTPkqMo9U/s320/3.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote { <span style="color: blue;">margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; </span>} </div><br />
Style 4<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjas9LkeMPDcOtvuF1M7K2-Tu-5f0SME1b18-Z1oDniDdibJYCvWvtfZnSVlOLkbS_0mUsvB_xzyp9I-Rvlk78uSplFgcA2e5Mn3Vbc3hOIBmAtebW2fSaYCnr8YOc2mIA_IxKgbDsv1aRC/s1600/4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjas9LkeMPDcOtvuF1M7K2-Tu-5f0SME1b18-Z1oDniDdibJYCvWvtfZnSVlOLkbS_0mUsvB_xzyp9I-Rvlk78uSplFgcA2e5Mn3Vbc3hOIBmAtebW2fSaYCnr8YOc2mIA_IxKgbDsv1aRC/s320/4.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote { <span style="color: blue;">background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; </span>} </div><br />
Style 5<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswA6vhMIKo9m9hL7qSWRz5wm1Iqi6DGHJfqm8SbwTYP4dmSPzJHql7O-oIj09dw71OIEZk_NLLhBoWQbmvKA_B6TlzeH-93-DbHTBrk4_jTnv6l2N5JAobKw6a8IwRp0B6MLNjVl79WGi/s1600/5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswA6vhMIKo9m9hL7qSWRz5wm1Iqi6DGHJfqm8SbwTYP4dmSPzJHql7O-oIj09dw71OIEZk_NLLhBoWQbmvKA_B6TlzeH-93-DbHTBrk4_jTnv6l2N5JAobKw6a8IwRp0B6MLNjVl79WGi/s320/5.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote {<span style="color: blue;"> background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px;</span> } </div><br />
Style 6<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQufmCk9SXqShGoPB3RdMMJJoqYQCN2uxp8NfFTLFjOpQ9jnkp-X46TnBPbBNyzhmYx9BG4hB8hepig9LdssMpXg5u6vEDl15kwxE8lY-SudHbYIBnjn-Ivki1BijjkYwuw2i-RjhsYwqG/s1600/6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQufmCk9SXqShGoPB3RdMMJJoqYQCN2uxp8NfFTLFjOpQ9jnkp-X46TnBPbBNyzhmYx9BG4hB8hepig9LdssMpXg5u6vEDl15kwxE8lY-SudHbYIBnjn-Ivki1BijjkYwuw2i-RjhsYwqG/s320/6.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote {<span style="color: blue;"> margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNujHyKJew7KrVoRulYRjpYDB25KS13cHNoU9aNIfWSTPDJww0VRq6bc177gUtk9_IhS-elJFIF5IwCshA2kxjLqCuZ3v-5fEfLOgTiy5KQ1MSN8T6jH09itnKrXYp2k8F6X2iVId5u3o/s1600/owlb.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; </span>} </div><br />
Style 7<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-qebSnIQxUPDDqT_Aq2uUCwcynA46vvDE-Fy7yd7HbNIDYlMdF4J7SSNQItBzll7L2BLPv-iKPZBB-np42AVOnN_kmYFLKKXd_a-CWMOpsqfVoXbACO6kSfp5xROIniKTJlFuM0dj0GA1/s1600/7.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-qebSnIQxUPDDqT_Aq2uUCwcynA46vvDE-Fy7yd7HbNIDYlMdF4J7SSNQItBzll7L2BLPv-iKPZBB-np42AVOnN_kmYFLKKXd_a-CWMOpsqfVoXbACO6kSfp5xROIniKTJlFuM0dj0GA1/s320/7.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote { <span style="color: blue;">margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp473DT1Osa0VuyLU_UWSF43P_W8UiYcfnS2Z_o6jaZsxZV92gkKkNQb7aqmheL4ig0pcpG-cvUUYWYiifDTPy_aU2IQd7GuRix8yP-nyS-NVvKP98AYj55yhq0AtaB4zaBsAlAXTSd0M/s1600/cdangular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; </span>} </div><br />
Style 8<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkV8U0xlwQRIjpTXGipX1UfslUl6Y8daLEUe2Rj0DUsDgzf8MiqkU6ejD3veYU0iL5uGeTe1YyCuKq6XMc8rC1-hibsDxj-ECphCdjalV_fbnpLdcUES8Q9HyI2LIo24nAFiRpALqMEiJ5/s1600/8.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkV8U0xlwQRIjpTXGipX1UfslUl6Y8daLEUe2Rj0DUsDgzf8MiqkU6ejD3veYU0iL5uGeTe1YyCuKq6XMc8rC1-hibsDxj-ECphCdjalV_fbnpLdcUES8Q9HyI2LIo24nAFiRpALqMEiJ5/s320/8.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote { <span style="color: blue;">margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxl54Cr_oeuVQJQgmEkd1g1uAYkyEJ0ywbrvHOlaaEZtTmIIgN6PJthwBoiBAnP2zcfDaudAIj0dpkniQcrR8PdAWwpEvM3t9vufERvIjbe-1xGXSKEoRSKi1xHNfe-whxf-AXQpVbrA/s1600/blockcpr.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; </span>} </div><br />
Style 9<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlfopFZbRMbFkbd3j6rTKhTTXXGXb78n5W_LW2N9OuzvFJ425QR63HMmA9hYNC8VDHHFmly3vs30z9o4KVgh68UNBuLKBDq5zjztJonNUzRoAZvEUvOolnmUv-Vw3DJX66M_WPhKXN5n9W/s1600/9.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlfopFZbRMbFkbd3j6rTKhTTXXGXb78n5W_LW2N9OuzvFJ425QR63HMmA9hYNC8VDHHFmly3vs30z9o4KVgh68UNBuLKBDq5zjztJonNUzRoAZvEUvOolnmUv-Vw3DJX66M_WPhKXN5n9W/s320/9.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote {<span style="color: blue;"> background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuQ-8cdV4qTB4YqkVRmQL6ytC-zezWqgFK_L-VL90XjUAo9PiW7K6Al3YyLPZR9CXntlx5QG3HPw08WmnDo_RilAvY9Nb6MenmekSEvry7y19d1LccWjEQU1ocGifCbktSHb7OE0tE-xk/s1600/comma+side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; </span>} </div><br />
Style 10<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN8II5YDBJlXGZxO9fo9LopQeTe3i2iCAee0YWDpXkaSyxzqJIsA-G1VAFrxW8Vd3ThV4QOz2eYNnZE1-KZs7w80yJ3qT6DqaeYKHqAsrMTxCEE-iq2Uby00DFsEzfpUYLd53JTYDU2WqZ/s1600/10.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="119" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN8II5YDBJlXGZxO9fo9LopQeTe3i2iCAee0YWDpXkaSyxzqJIsA-G1VAFrxW8Vd3ThV4QOz2eYNnZE1-KZs7w80yJ3qT6DqaeYKHqAsrMTxCEE-iq2Uby00DFsEzfpUYLd53JTYDU2WqZ/s320/10.gif" width="320" /></a></div><br />
<br />
<div class="code">blockquote {<span style="color: blue;"> background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhkzXcz6X9RSZzWAUhHLXInJJx2A-8-HEZaESasjRncOdxN41Eda0zmQUGS5Foq0k7sUE5q8dWbjgtrmBiWb5Q_0AS0eDgBFzIr2-fFCRGmKaVNB8XvRNMzvkPQxLYD82tuGzzawN6O8/s1600/greenbq.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px;</span> } </div><br />
<b>Customization:-</b><br />
Important areas to be customized are bolded. Where, <br />
# padding: It refers to the distance of the text from blockquote borders. Which goes in this order –> Top Right Bottom Left<br />
# background :- This includes Blockquote background color and image used in it. The six digit value is the background color and image link is inserted in place of bolded text in this part-> url(Paste Image Link here)<br />
# font :- It includes font style, size and type respectively. Match the colours with the code above for reference.<br />
# color :- This refers to text colour. You can use a different font colour using our <a href="http://www.royaltutor.net/2010/11/html-color-codes-generator-for-bloggers.html">color chart</a><br />
# border :- This refers to border width, style and colour respectively. # All other blockquotes can be customized in similar way.<br />
<br />
NOTE: Blockquotes are universally defined for your blog, and therefore in all your blog posts they will appear exactly the same (although you can use different classes for different styles, but this is not recommended as it will affect your blog's loading time).Unknownnoreply@blogger.com8tag:blogger.com,1999:blog-6770264976343940057.post-16832334723962014712011-01-28T19:49:00.000+05:302011-01-28T19:49:53.218+05:30How to Highlight Blog Author Comments in BloggerDo you see your own comments hidden with other comments on your blog? What if you want to highlight your own comments and let your readers know quickly what have you responded? Will not it be cool?<br />
Lets get on with the tutorial straightaway.<br />
<br />
<br />
As usual login into your Blogger Dashboard > Design > Edit HTML and check the "Expand Widget Templates" option.<br />
<br />
<b>Important Step</b>: Now as a precautionary measure please download your template so that you have an emergency backup if in case you create any errors.<br />
<a name='more'></a><br />
Then, find (CTRL+F) this code in the template. <br />
<div class="code">]]></b:skin> </div>And immediately before it, paste this code:<br />
<div class="code">.comment-body-author {<br />
background: #ffffff;<br />
border: 2px solid #666666;<br />
padding: 5px;<br />
} </div>Now you have to go to the comment section of your blog. Please note the code may vary for each template so try to find a similar code.<br />
<br />
search for the following lines of code.<br />
<div class="csscode"><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 />
<span style="color: blue;"><br />
<b:if cond='data:comment.author == data:post.author'><br />
<dd class='comment-body-author'><br />
<p><data:comment.body/></p><br />
</dd><br />
<b:else/><br />
</span><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 />
<span style="color: blue;"><br />
</b:if><br />
</span><br />
<dd class='comment-footer'><br />
<span class='comment-timestamp'><br />
<a expr:href='"#comment-" + data:<br />
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></div>You have to add Blue codes in your html in the way i have shown above between the codes.I hope you will be able to do it.<br />
<br />
<blockquote>Now how to style the comment part.<br />
1. background: #ffffff; can be replaced by background: url(http://link_of_your_image.jpg) ;<br />
2. change the border by setting it as higher value if you need a thicker border or make it as 0px if you don't need it. ( border: 2px solid #666666; )</blockquote>Unknownnoreply@blogger.com5tag:blogger.com,1999:blog-6770264976343940057.post-5566984323159940842011-01-28T19:29:00.000+05:302011-01-28T19:29:04.017+05:30How to change Timestamp format in BloggerYou know, there are lots of blogger templates using Timestamp format for posted day instead of DateTime format. We must change the TimeStamp as their format otherwise the date won’t show up properly on each of your posts! Actually the date will most likely be blank and you’ll think the template is broken.<br />
<br />
Login To Blogger Go To > Settings > Formatting. <br />
<br />
At Formatting tab, change Timestamp Format to format like “Thursday, January 27,2011″.<br />
<br />
<b>Remember change the TIMESTAMP, not the DATE HEADER</b><br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiejYdZxdskY5hP6Zx8YFfZLs3dtD9U-5VnwnzJAkjr9UKbiMUuJS5wZ9rRBEhyphenhyphennotswTE5aG0IkNMVh8hCxwJJ-0tHYkM0o7FLwfadmCDFnt1qrgCRnv5-AoX7ZigFq9kEMxXRkDudvg87/s1600/How+to+change+Timestamp+format+in+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiejYdZxdskY5hP6Zx8YFfZLs3dtD9U-5VnwnzJAkjr9UKbiMUuJS5wZ9rRBEhyphenhyphennotswTE5aG0IkNMVh8hCxwJJ-0tHYkM0o7FLwfadmCDFnt1qrgCRnv5-AoX7ZigFq9kEMxXRkDudvg87/s400/How+to+change+Timestamp+format+in+Blogger.jpg" width="400" /></a></div><br />
Save your template and you are done.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-6770264976343940057.post-7716542147043159312011-01-28T09:20:00.000+05:302011-01-28T09:20:44.430+05:30How to limit the number of posts displayed in label pagesSome of you maybe are annoyed by 20 max result when you are click your own label or tag of Blogger, and it makes your page of the blog very long to the bottom.In blogger you can limit the number of posts appearing on the home page, but you cannot to do it on the label pages.<br />
<br />
In this post I will show you how to limit the number of posts showing in label pages.<br />
<br />
Login To Blogger Go To > Design > Edit HTML.<br />
(Back up your template)<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template. <br />
<div class="code">expr:href='data:label.url'</div>You may find more than one instance. Replace them with the following <br />
<div class="code">expr:href='data:label.url + "?max-results=5"' </div><a name='more'></a><br />
<b>For Label Cloud users.</b><br />
To change the number of posts displayed when readers click on an item in your label cloud, find this line in your template:<br />
<div class="code">a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t); </div>And replace it with this instead: <br />
<div class="code">a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t) +'?max-results=5'; </div>The '5' in the code above means that a page will show 5 post per (on each) page. You may change to any ammount you want. But we recommend to make the ammount same as how many the first page of your Blog show the post. And lower is better.<br />
<br />
Now save it and see the result.Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-6770264976343940057.post-49270818391580932992011-01-27T09:09:00.000+05:302011-01-27T09:09:48.109+05:30How To Add 3D Horizontal Link List to Blogger<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8Vn0pHYXvwQS9djDwJfTOzlucJSqVr6bIXkhZMcirekpJH22J7HLT_ZxE9Iw6oOeARGTtDbJOyLdTLQiw5XquecN3q2-My5VNh3FaGyLX7ZgP5xITS_rbkhB5Tink1W2C41k7bqzy5B2/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8Vn0pHYXvwQS9djDwJfTOzlucJSqVr6bIXkhZMcirekpJH22J7HLT_ZxE9Iw6oOeARGTtDbJOyLdTLQiw5XquecN3q2-My5VNh3FaGyLX7ZgP5xITS_rbkhB5Tink1W2C41k7bqzy5B2/s400/1.png" width="400" /></a></div><br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template.<br />
<div class="code"></head> </div>And immediately before it, paste this code:<br />
<a name='more'></a><br />
<div class="csscode"><style type='text/css'><br />
ul#topnav {<br />
margin: 10px 0 20px;<br />
padding: 0;<br />
list-style: none;<br />
font-size: 1.1em;<br />
clear: both;<br />
float: left;<br />
width: 99%;<br />
}<br />
ul#topnav li{<br />
margin: 0;<br />
padding: 0;<br />
overflow: hidden;<br />
float: left;<br />
height:40px;<br />
}<br />
ul#topnav a, ul#topnav span {<br />
padding: 10px 20px;<br />
float: left;<br />
text-decoration: none;<br />
color: #fff;<br />
text-transform: uppercase;<br />
clear: both;<br />
height: 20px;<br />
line-height: 20px;<br />
background: #1d1d1d;<br />
}<br />
ul#topnav a { color: #7bc441; }<br />
ul#topnav span {<br />
display: none;<br />
}<br />
<br />
ul#topnav.v2 span{<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkT2EYeqwqXzEKVyy46uotMlwS7uEf3w8K3ukuHm2TkgJGhdvJXV7a7VYCPSV22y6a17tQ2BCxKCzQ3E9Cf37DJ7zJu06Xxp8wD1XaKugIeyVX72puAEqsrGIo2fCrK5eBwg-Pg6Fw3Sg/s1600/a_bg.gif) repeat-x left top;<br />
}<br />
ul#topnav.v2 a{<br />
color: #555;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkT2EYeqwqXzEKVyy46uotMlwS7uEf3w8K3ukuHm2TkgJGhdvJXV7a7VYCPSV22y6a17tQ2BCxKCzQ3E9Cf37DJ7zJu06Xxp8wD1XaKugIeyVX72puAEqsrGIo2fCrK5eBwg-Pg6Fw3Sg/s1600/a_bg.gif) repeat-x left bottom;<br />
}<br />
</style><br />
<script src='http://yourjavascript.com/20561118251/jquery.min.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
<br />
<br />
$(document).ready(function() {<br />
<br />
<br />
$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag<br />
<br />
$(&quot;#topnav li&quot;).each(function() { //For each list item...<br />
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag<br />
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag<br />
});<br />
<br />
$(&quot;#topnav li&quot;).hover(function() { //On hover...<br />
$(this).find(&quot;span&quot;).stop().animate({<br />
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels<br />
}, 250);<br />
} , function() { //On hover out...<br />
$(this).find(&quot;span&quot;).stop().animate({<br />
marginTop: &quot;0&quot; //Move the span back to its original state (0px)<br />
}, 250);<br />
});<br />
<br />
<br />
});<br />
</script></div>Now click Save Template.<br />
<br />
Then, Go To > Design > Page Elements.<br />
<br />
Simply add a Gadget of HTML/JavaScript type.<br />
<br />
Now copy one of the below codes and add that code in to it:<br />
<br />
Code 1: <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8Vn0pHYXvwQS9djDwJfTOzlucJSqVr6bIXkhZMcirekpJH22J7HLT_ZxE9Iw6oOeARGTtDbJOyLdTLQiw5XquecN3q2-My5VNh3FaGyLX7ZgP5xITS_rbkhB5Tink1W2C41k7bqzy5B2/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8Vn0pHYXvwQS9djDwJfTOzlucJSqVr6bIXkhZMcirekpJH22J7HLT_ZxE9Iw6oOeARGTtDbJOyLdTLQiw5XquecN3q2-My5VNh3FaGyLX7ZgP5xITS_rbkhB5Tink1W2C41k7bqzy5B2/s400/1.png" width="400" /></a></div><br />
<br />
<div class="code"><div class="container"><br />
<br />
<ul id="topnav" class="v2"><br />
<br />
<li><a href="http://bdlab.blogspot.com">Home</a></li><br />
<li><a href="#">TOC</a></li><br />
<li><a href="#">Widgets</a></li><br />
<li><a href="#">Templates</a></li><br />
<li><a href="#">jQuery</a></li><br />
<li><a href="#">Advertise</a></li><br />
<li><a href="#">Contact</a></li><br />
<br />
</ul><br />
<br />
</div> </div><br />
Code 2: <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKkwnngGd_DHjTLNfbm74noYLB0B22Qj98CyQb_yGmyM2JwrC33LmS8HUrgMMs4hBkw_X5F7zifn-U7F0FYbOR1wNpZWqOl1JDHtuATR8qfmrd2Ks0GK7jN3iCpRLHkYOIeDJG-Y5OrAL/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKkwnngGd_DHjTLNfbm74noYLB0B22Qj98CyQb_yGmyM2JwrC33LmS8HUrgMMs4hBkw_X5F7zifn-U7F0FYbOR1wNpZWqOl1JDHtuATR8qfmrd2Ks0GK7jN3iCpRLHkYOIeDJG-Y5OrAL/s400/2.png" width="400" /></a></div><br />
<br />
<div class="code"><div class="container"><br />
<br />
<ul id="topnav"><br />
<br />
<li><a href="http://bdlab.blogspot.com">Home</a></li><br />
<li><a href="#">TOC</a></li><br />
<li><a href="#">Widgets</a></li><br />
<li><a href="#">Templates</a></li><br />
<li><a href="#">jQuery</a></li><br />
<li><a href="#">Advertise</a></li><br />
<li><a href="#">Contact</a></li><br />
<br />
</ul><br />
<br />
</div> </div>Replace Names and # with your contents.<br />
Now click Save.Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-6770264976343940057.post-16689477973174277452010-12-29T12:10:00.000+05:302010-12-29T12:10:48.590+05:30New Year Banner widget for your blogAs 2010 is fast drawing to a close, I have created a New Year banner which you can easily install in your blog. This tutorial is similar to the previous one.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NYS2P7RHDBxBT6_BKu2EXLhLBylh-9U9zqmUzFywPoVCPiQEnBg2a-PPU39CLl7aIIh34rk6vWqU_Y1X4xOHuH7oErzpxvQ1aE3am0XVY8PgrjNaeZ8NnHPHpdOqJQgN32gebniGT1aU/s1600/rthnybanner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NYS2P7RHDBxBT6_BKu2EXLhLBylh-9U9zqmUzFywPoVCPiQEnBg2a-PPU39CLl7aIIh34rk6vWqU_Y1X4xOHuH7oErzpxvQ1aE3am0XVY8PgrjNaeZ8NnHPHpdOqJQgN32gebniGT1aU/s1600/rthnybanner.png" /></a></div><br />
Login To Blogger Go To > Design > Page Elements.<br />
<br />
Simply add a Gadget of HTML/JavaScript type.<br />
<br />
add this code in to it:<br />
<a name='more'></a><br />
<div class="code"><div id="sspeakerbanner"><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuABfRjz_T76cMDwhCq8y-kk6m8f4zSXEL7afK1_3W8nS5xWarKL9EbNsoVxyX7zYMY6zJSjsFLbCqV50J7pTnuZLdVg5moDsAGhlFEV6Ph8IfSmpuZjY4n8GRQEmWnunXpKZamn6dyr8/s1600/rthnybanner.png" /><br />
</div><style><br />
#sspeakerbanner{<br />
position:fixed;<br />
right:0px;<br />
top:0px;<br />
}<br />
</style> </div>Make Banner Non-sticky (It won't follow you when you scroll down)<br />
Use this code instead:<br />
<div class="code"><div id="sspeakerbanner"><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuABfRjz_T76cMDwhCq8y-kk6m8f4zSXEL7afK1_3W8nS5xWarKL9EbNsoVxyX7zYMY6zJSjsFLbCqV50J7pTnuZLdVg5moDsAGhlFEV6Ph8IfSmpuZjY4n8GRQEmWnunXpKZamn6dyr8/s1600/rthnybanner.png" /><br />
</div><style><br />
#sspeakerbanner{<br />
position:absolute;<br />
right:0px;<br />
top:0px;<br />
}<br />
</style> </div><div class="separator" style="clear: both; text-align: center;"></div>Happy New Year. May 2011 be the best year yet for you.Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-6770264976343940057.post-62527825223715864352010-12-23T23:38:00.002+05:302010-12-27T19:49:44.357+05:30Get a Christmas banner for your blogChristmas is just around the corner now, and many Bloggers are decorating their templates with festive themes.What better way is there to wish your readers a Merry Christmas than to place a Christmas banner in your blog?Add one now to your blog in 1 easy step!<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8MV3YLmEoEONAsFfzGtXEmu7-1xt7fcbDCVxjrhnNMp6RV2YjJLoCR4s_TuFT6pGdluwBqM0Ppqq3F-JzA2Wvl9Rw-wZzqKOUQgHGweWk-P2vjehutoRQmUeTkKK5Hw88lzHtz4zYLhs/s1600/rtmxbanner.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8MV3YLmEoEONAsFfzGtXEmu7-1xt7fcbDCVxjrhnNMp6RV2YjJLoCR4s_TuFT6pGdluwBqM0Ppqq3F-JzA2Wvl9Rw-wZzqKOUQgHGweWk-P2vjehutoRQmUeTkKK5Hw88lzHtz4zYLhs/s1600/rtmxbanner.gif" /></a></div><div style="text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"></div>(I have got this banner image from <a href="http://www.bloggerbuster.com/2007/12/get-christmas-banner-for-your-blog.html" target="_blank" rel="nofollow">Bloggerbuster</a> thank you so much for that.)<br />
Login To Blogger Go To > Design > Page Elements.<br />
<br />
Simply add a Gadget of HTML/JavaScript type.<br />
<br />
add this code in to it:<br />
<a name='more'></a><br />
<div class="code"><div id="sspeakerbanner"><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8MV3YLmEoEONAsFfzGtXEmu7-1xt7fcbDCVxjrhnNMp6RV2YjJLoCR4s_TuFT6pGdluwBqM0Ppqq3F-JzA2Wvl9Rw-wZzqKOUQgHGweWk-P2vjehutoRQmUeTkKK5Hw88lzHtz4zYLhs/s1600/rtmxbanner.gif" /><br />
</div><style><br />
#sspeakerbanner{<br />
position:fixed;<br />
right:0px;<br />
top:0px;<br />
}<br />
</style> </div>Make Banner Non-sticky (It won't follow you when you scroll down)<br />
Use this code instead:<br />
<div class="code"><div id="sspeakerbanner"><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8MV3YLmEoEONAsFfzGtXEmu7-1xt7fcbDCVxjrhnNMp6RV2YjJLoCR4s_TuFT6pGdluwBqM0Ppqq3F-JzA2Wvl9Rw-wZzqKOUQgHGweWk-P2vjehutoRQmUeTkKK5Hw88lzHtz4zYLhs/s1600/rtmxbanner.gif" /><br />
</div><style><br />
#sspeakerbanner{<br />
position:absolute;<br />
right:0px;<br />
top:0px;<br />
}<br />
</style> </div>I have not linked the image to anything, though a link back to this page in your blog is welcomed.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-6770264976343940057.post-19625881052361307672010-12-14T19:55:00.002+05:302010-12-14T19:57:52.427+05:30How To Remove Link Underlines<b>Take a look at the links below:</b><br />
<ul><li><a href="http://royaltutor.blogspot.com/2010/05/how-to-remove-windows-old-folder-in-c.html" style="text-decoration: none;">How to remove Windows. old folder in C:\</a></li>
<li><a href="http://royaltutor.blogspot.com/2010/05/some-keyboard-tips-for-windows-7-users.html" style="text-decoration: none;">Some Keyboard Tips for Windows 7 Users</a></li>
<li><a href="http://royaltutor.blogspot.com/2010/06/most-important-windows-xp-shortcuts.html" style="text-decoration: none;">Most Important Windows XP Shortcuts </a></li>
<li><a href="http://royaltutor.blogspot.com/2010/06/gmail-drag-and-drop-attachments-onto.html" style="text-decoration: none;">Gmail Drag and drop attachments onto messages</a></li>
</ul><br />
Notice anything about them? They are not underlined, yet they are still active. <br />
For a good while, people would write to me and ask how to rid the links on their page of the awful underline.Well, here's how you do it:<br />
<br />
When you add a link in normal method your html code will look like this :<br />
<div class="code"><a href="http://www.royaltutor.net/"> Royal Tutor</a> </div>Result:<br />
<a name='more'></a><br />
<a href="http://www.royaltutor.net/"> Royal Tutor</a><br />
<br />
If you want to remove underline of link, add <span style="color: red;">style="text-decoration:none"</span> as example below.<br />
<div class="code"><a style="text-decoration:none" href="http://www.royaltutor.net/"> Royal Tutor</a> </div>Result:<br />
<br />
<a href="http://www.royaltutor.net/" style="text-decoration: none;"> Royal Tutor</a><br />
that's itUnknownnoreply@blogger.com3tag:blogger.com,1999:blog-6770264976343940057.post-53213901795029509372010-11-29T13:35:00.000+05:302010-11-29T13:35:46.145+05:30Replace "Subscribe to: Posts (Atom)" With "Subscribe to: Posts (RSS)"<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU9eDVO0nL2j9DJImed4dLFZt_AxO9krQ2qP4nPs5bhKDHRmE0F5Txa-vgX7aKLsrwQkPr8VmRhtl8ob2LfY_f0dlfleE8ZSdQS3BFKMSSifO17D8izpW1zIdn3MfzD7M-NhR6I8iajtcQ/s1600/Capture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU9eDVO0nL2j9DJImed4dLFZt_AxO9krQ2qP4nPs5bhKDHRmE0F5Txa-vgX7aKLsrwQkPr8VmRhtl8ob2LfY_f0dlfleE8ZSdQS3BFKMSSifO17D8izpW1zIdn3MfzD7M-NhR6I8iajtcQ/s400/Capture.jpg" width="400" /></a></div><br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, Scroll down to where you see this code in the template.<br />
<a name='more'></a><br />
<div class="code"><b:includable id='feedLinksBody' var='links'><br />
<div class='feed-links'><br />
<data:feedLinksMsg/><br />
<b:loop values='data:links' var='f'><br />
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a><br />
</b:loop><br />
</div><br />
</b:includable> </div>Now, Replace the above code with this:<br />
<div class="code"><b:includable id='feedLinksBody' var='links'><br />
<div class='feed-links'><br />
<data:feedLinksMsg/><br />
<b:loop values='data:links' var='f'><br />
<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml' target='_blank'><data:f.name/> (RSS)</a><br />
</b:loop><br />
</div><br />
</b:includable> </div>Now click Save Template and you are done.Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-6770264976343940057.post-9305917966851775832010-11-24T20:50:00.001+05:302010-11-24T20:51:12.237+05:30How To Remove Subscribe to: Posts (Atom) Link<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCMpS9pJ_gwif1Rws2zcpSicy0AkRTiQ1YagIy_mVUpD4RKtxCfOOhEikHu_8xKgDI057T8B1rbAHbQwUjfuPyUj6BW_d3rb3kmL1Yl3FZSDnRJw_RVjOfpcCkT0yiexxeN6kjF5y_AdV/s1600/Capture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="95" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCMpS9pJ_gwif1Rws2zcpSicy0AkRTiQ1YagIy_mVUpD4RKtxCfOOhEikHu_8xKgDI057T8B1rbAHbQwUjfuPyUj6BW_d3rb3kmL1Yl3FZSDnRJw_RVjOfpcCkT0yiexxeN6kjF5y_AdV/s400/Capture.jpg" width="400" /></a></div><br />
You must have seen that at the bottom of your blogger template there is a Subscribe to: Posts (Atom) link. Blogger has added it so that the blog visitors can subscribe to your Atom feeds. Most blog readers are familiar with feeds in RSS format, though not with Atom feeds. Therefore this link can be confusing, and may well discourage readers from subscribing!<br />
<br />
If You need to remove this Subscribe to: Posts (Atom) link,Then Follow the instructions below.<br />
<br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template.<br />
<a name='more'></a><br />
<div class="code"><b:include name='feedLinks'/> </div>Once you find the code, remove it and save your template. Refresh your blog and now the Subscribe to: Posts (Atom) link wont be there on your blog.<br />
<br />
That’s it. :PUnknownnoreply@blogger.com2tag:blogger.com,1999:blog-6770264976343940057.post-28877139121654015352010-11-19T20:16:00.000+05:302010-11-19T20:16:32.704+05:30How To Create Text Area with Select All<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4Z5CKf76n6-PPGLuEYCw1xb_ldmTy8DzJxmeEW50uCqhuDyACjMnAqNC-TwJKUFd371aY5aK_7Z2QtJb0UUlLH__bcwoK8QH7nwtCsrijzPvNonOoXc1IR_fDMJibMhFw5IYE_pPOmQx/s1600/Capture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4Z5CKf76n6-PPGLuEYCw1xb_ldmTy8DzJxmeEW50uCqhuDyACjMnAqNC-TwJKUFd371aY5aK_7Z2QtJb0UUlLH__bcwoK8QH7nwtCsrijzPvNonOoXc1IR_fDMJibMhFw5IYE_pPOmQx/s1600/Capture.jpg" /></a></div><br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template.<br />
<a name='more'></a><br />
<div class="code"></head></div>And immediately before it, paste this code:<br />
<div class="code"><script type="text/javascript"><br />
<br />
function selectAll()<br />
{<br />
document.form1.demo.focus();<br />
document.form1.demo.select();<br />
}<br />
<br />
</script> </div>Now click Save Templste.<br />
<br />
Then, Go To > Design > Page Elements.<br />
<br />
Simply add a Gadget of HTML/JavaScript type.<br />
<br />
add this code in to it:<br />
<div class="code"><form name="form1" ><br />
<textarea cols="25" rows="10" name="demo"><br />
<br />
INSERT YOUR CONTENT HERE<br />
<br />
</textarea><br />
<input type="button" name="selectit" value="Select All" onclick="selectAll ();"><br />
</form> </div>Note : Remember to replace INSERT YOUR CONTENT HERE with your real content.<br />
<br />
Now you are done.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-6770264976343940057.post-7966687295487017632010-11-17T23:14:00.001+05:302010-11-17T23:14:55.593+05:30HTML Color Codes Generator For Bloggers And Web DevelopersThese tool helps you to pick your favorite color and it's code,Every color has its own unique color and code to use.So,these makes webmasters and developers to choose color picker tool who often use in Photoshop.I found the similar tool which we use in Photoshop,So you don't need to go for the color code to pick in Photoshop always.<br />
<br />
<b>Generate Your Own Custom Hex Colors</b><br />
<br />
1. Drag the black bar on the "Hue" selector to generate the desired base color. <br />
<br />
2. Next double click inside the Brightness/Saturation grid to activate the cursor. Drag it until the desired brightness is achieved. <br />
<br />
The "Swatch" bar shows you the final color result.<br />
<br />
3. The hex color code is generated at the bottom of the grid in the "Hex" box. Simply copy and paste the code into your page. <br />
<a name='more'></a><br />
<embed height="485" name="obj1" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" type="application/x-shockwave-flash" width="485"></embed><br />
<br />
<b>Next...Choose a Color Scheme!</b><br />
<br />
Once you have your hex color value from the chart above, copy and paste it (without the #) into the form below the color wheel and it will generate a matching color scheme for your website. This is a great tool to use if you're trying to come up with cohesive colors for your navigation, background, hyperlinks, etc. <br />
<br />
<embed bgcolor="#ffffff" height="480" name="col" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/col.swf" type="application/x-shockwave-flash" width="480"></embed>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6770264976343940057.post-907437165574428282010-11-14T20:15:00.003+05:302011-07-11T19:25:43.209+05:30Add Breadcrumb Navigation To BloggerAll of us might have seen breadcrumbs on most wordpress blog.<br />
So why not implement a breadcrumb for the blogger blogs.. For those who don't know what a breadcrumb is,here is a little description.<br />
<br />
<blockquote>Breadcrumb is a widget like stuff that displays the visitor's location within a blog. Basically, it improves the navigation for a blog and helps the visitor easily jump from one part of the blog to another. </blockquote><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArRjbfEbK24XPymbW0ED5h7Lc9BiX9HBERiY1hOukqxMcgCaBmHGBgiLzNGPX-q8nUY-IRxmWTPK2vNSbUPnbpN_31h09I4eqAuaD7A7rV4MU12sOcEnEh-cB3Hq5NN_VilXDSwk1uwPb/s1600/Capture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArRjbfEbK24XPymbW0ED5h7Lc9BiX9HBERiY1hOukqxMcgCaBmHGBgiLzNGPX-q8nUY-IRxmWTPK2vNSbUPnbpN_31h09I4eqAuaD7A7rV4MU12sOcEnEh-cB3Hq5NN_VilXDSwk1uwPb/s400/Capture.jpg" width="400" /></a></div><br />
<a name='more'></a><br />
The trails like Home >> Label >> Post Name are the breadcrumbs.<br />
So lets get into the details of implementing a breadcrumb navigation for blogger.<br />
<br />
Login To Blogger Go To > Design > Edit HTML.<br />
<br />
and mark the tick box "Expand Widget Templates"<br />
<br />
Then, find (CTRL+F) this code in the template.<br />
<div class="code">]]></b:skin></div>And immediately before it, paste this code:<br />
<div class="code">.breadcrumbs<br />
{<br />
float: left;<br />
width: 590px;<br />
font-size: 11px;<br />
margin: 5px 10px 20px 10px;<br />
padding: 0px 0px 3px 0px;<br />
border-bottom: double #EAEAEA;<br />
} </div>Now again find (CTRL+F) this code in the template.<br />
<div class="code"><b:includable id='main' var='top'> </div>Now<br />
<div class="code"><b:includable id='main' var='top'><br />
<!-- posts --><br />
<div class='blog-posts hfeed'><br />
<b:include data='top' name='status-message'/><br />
<data:adStart/> </div>Replace the above block of code with this code:<br />
<div class="csscode"><b:includable id='breadcrumb' var='posts'><br />
<b:if cond='data:blog.homepageUrl == data:blog.url'><br />
<!-- No breadcrumb on front page --><br />
<b:else/><br />
<b:if cond='data:blog.pageType == "item"'><br />
<div class='breadcrumbs'><br />
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a><br />
<b:loop values='data:posts' var='post'><br />
<b:if cond='data:post.labels'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop><br />
» <span><data:post.title/></span> </b:if> </b:loop> </div><br />
<b:else/><br />
<b:if cond='data:blog.pageType == "archive"'><br />
<div class='breadcrumbs'><br />
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/><br />
<b:if cond='data:blog.pageType == "index"'><br />
<div class='breadcrumbs'><br />
<b:if cond='data:blog.pageName == ""'><br />
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/><br />
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »<br />
Posts filed under <data:blog.pageName/><br />
</b:if> </div> </b:if> </b:if> </b:if><br />
</b:if><br />
</b:includable><br />
<b:includable id='main' var='top'><br />
<!-- posts --><br />
<div class='blog-posts hfeed'><br />
<!-- disable default status message<br />
<b:include data='top' name='status-message'/>default status message disabled --><br />
<b:include data='posts' name='breadcrumb'/><data:adStart/><br />
</div>Now click Save Template and you are done.Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-6770264976343940057.post-90729074714107667522010-11-11T19:20:00.001+05:302010-11-11T19:20:55.829+05:30Making Different Posting Background for BloggerIn making background, we can use two alternative, they are background with color and background with image. For background with images, we can divide again into some techniques, background images with repeated techniques (repeat, repeat-x, repeat-y) and background images with no-repeat techniques.<br />
<br />
<b>Making Background with color</b><br />
to make colorful background in every posting, you need to so some steps; <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9NBYx1T6lBVDLjPSLbC0pt_I7-K8aeCoLVs2vYKtsIySfW7tnZb2Lee1Hexsmr2Tx8cElXkXSMYsVTAupFL5CscoHEoY3xCSOjJemr75Z64aLek5wJBW_4pE1_TJdctU6J2PZEgeZFg5/s1600/Capture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9NBYx1T6lBVDLjPSLbC0pt_I7-K8aeCoLVs2vYKtsIySfW7tnZb2Lee1Hexsmr2Tx8cElXkXSMYsVTAupFL5CscoHEoY3xCSOjJemr75Z64aLek5wJBW_4pE1_TJdctU6J2PZEgeZFg5/s1600/Capture.jpg" /></a></div><a name='more'></a><br />
When you start posting, choose Edit HTML and don’t choose Compose. Start your posting with the following code:<br />
<div class="code"><div style="background:#ffff00;"><br />
<br />
<br />
And end your posting with the following code;<br />
<br />
</div></div>Change #ffff00 with your interest color code. If you are still confused and need color codes, just <span id="goog_1551102892"></span><a href="http://www.royaltutor.net/2010/05/color-is-very-important-to-design-blog.html">click here<span id="goog_1551102893"></span></a>. Because this code is Style from CSS, then you are not only able to do anything with the color background but also anything; font color, font, justify the posting and anything. With this way, your posting will be nice and interesting. For example, if you want yellow as your posting background, the writing is justify and font size 14px :<br />
<div class="code"><div style="background:#ADDFFF; font-size:14px;"><br />
There a various way to add subtitle to the movie. Most of the dvd has the wide range of subtitle in various language inbuilt on it. But some might not and if you have downloaded the movie from the internet then there is less chance of having subtitle on it. In such situation you can add subtitle in movie manually. Well don't be panic its not that much complicated that you are thinking but your computer must have any video playing software that may be either vlc player or kmplayer and have subtitle enable on it.<br />
</div> </div>The result will be as following.<br />
<div style="background: none repeat scroll 0% 0% rgb(173, 223, 255); font-size: 14px;">There a various way to add subtitle to the movie. Most of the dvd has the wide range of subtitle in various language inbuilt on it. But some might not and if you have downloaded the movie from the internet then there is less chance of having subtitle on it. In such situation you can add subtitle in movie manually. Well don't be panic its not that much complicated that you are thinking but your computer must have any video playing software that may be either vlc player or kmplayer and have subtitle enable on it.</div><br />
<b>Making Background With Image</b><br />
If you want to have background with image, the first thing to do is to have an image for your background. Then, upload the image into your hosting image.<br />
When you start posting, choose Edit HTML and don’t choose Compose. Start your posting with the following code:<br />
<div class="code"><div style="background:url(image URL) no-repeat;"><br />
<br />
And end your posting with the following code;<br />
<br />
</div></div>Change image URL address with URL image you want. Use no-repeat if you use big size image and no image repeat in the background. Just like background with color, you can add anything with this code as you want. <br />
<div class="code"><div style="background:url(http://www.wallpaperseek.com/sky-fantasy_wallpapers_4794_1152x864.jpg) no-repeat;"><br />
There a various way to add subtitle to the movie. Most of the dvd has the wide range of subtitle in various language inbuilt on it. But some might not and if you have downloaded the movie from the internet then there is less chance of having subtitle on it. In such situation you can add subtitle in movie manually. Well don't be panic its not that much complicated that you are thinking but your computer must have any video playing software that may be either vlc player or kmplayer and have subtitle enable on it.<br />
</div></div>The result will be as following.<br />
<div style="background: url("http://www.wallpaperseek.com/sky-fantasy_wallpapers_4794_1152x864.jpg") no-repeat scroll 0% 0% transparent;">There a various way to add subtitle to the movie. Most of the dvd has the wide range of subtitle in various language inbuilt on it. But some might not and if you have downloaded the movie from the internet then there is less chance of having subtitle on it. In such situation you can add subtitle in movie manually. Well don't be panic its not that much complicated that you are thinking but your computer must have any video playing software that may be either vlc player or kmplayer and have subtitle enable on it.</div>Now click PUBLISH POST and you are done.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-6770264976343940057.post-35322358924991912682010-10-30T23:25:00.000+05:302010-10-30T23:25:05.615+05:30Scroll Bar Widget For Blogger<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqvSu0S1C0CalOL17Hzz0AtRbW7HxW2r6jgEK-bqx4BdvaueM17fB_N9em9WFZSrBhr36GjXvbTIZCHYX7aTllIo0xpUo0S5EWELr3C5cjndvA_B8icDwsFbriMcxaVHTs_Rrc6EIgJzf/s1600/Capture.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqvSu0S1C0CalOL17Hzz0AtRbW7HxW2r6jgEK-bqx4BdvaueM17fB_N9em9WFZSrBhr36GjXvbTIZCHYX7aTllIo0xpUo0S5EWELr3C5cjndvA_B8icDwsFbriMcxaVHTs_Rrc6EIgJzf/s320/Capture.jpg" width="268" /></a></div><br />
Lets Make a Scrolling Bar menu for your Blog<br />
<a name='more'></a><br />
Login To Blogger Go To > Design > Page Elements.<br />
<br />
Simply add a Gadget of HTML/JavaScript type.<br />
<br />
add this code in to it:<br />
<div class="code"><div style="overflow:auto;width:<span style="color: blue;">260</span>px;height:<span style="color: blue;">300</span>px;padding:<span style="color: blue;">10</span>px;"> <br />
<ul><br />
<br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<li><a href="Your Link">Your Text</a></li><br />
<br />
</ul><br />
</div> </div>Replace Your Link and Your Text with your contents.<br />
<br />
you can edit width,height and padding in <span style="background-color: white; color: blue;">blue</span> to adjust it to your blog.<br />
<br />
Now click Save and That's It.Unknownnoreply@blogger.com4