Helper Blogger: Blogger Tricks

Showing posts with label Blogger Tricks. Show all posts

How To Publish WordPress Posts From Microsoft Word 2013‏?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: left; color: #555555; float: left; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img alt="How To Publish WordPress Posts From Microsoft Word 2013‏?" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEUoCZq6PKg8RHwwWrNCP73-RhpdJW6L71IY8GxHWJ6brk-4HD7hBjAvp_2-fZI-7EO1c3IjhwApWowELQKJrDc_bhjMe80WJ1GwXXeLm6U3jFDhmxF92ICpbUPtcbYHUacsoIh-dxwzyN/s320/publish-wp-posts-from-ms-word.jpg" style="padding: 10px;" title="How To Publish WordPress Posts From Microsoft Word 2013‏?" width="320" /></div>
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;"></span><br />
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
WordPress is a very powerful publishing platform, and a very popular one too since more than 45% of blogs are hosted on WordPress. Its major selling point has to be its powerful functionality coupled with an intuitive and user-friend user interface. But if I were to pick out one flaw in WordPress, it would have to be the droll post editor combined with a slow UI that makes editing and saving posts a headache. But what if you could write your blog posts into a powerful word processing software such as Microsoft Word? As it turns out, you can! In this post, we'll show you how to create and publish a blog post directly from MS Word 2013!</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<div>
One of the biggest problems bloggers face is the lack word-processing capabilities in most (in fact, all) publishing platforms. Platforms like Blogger, WordPress etc provide a spell checker at most, but nothing that would check punctuation, grammar, and sentence coherence. This is where MS Word comes in, because it it excellent in doing those things. And the new line of MS Office 2013 products are quite smart as well, and they continue to amaze me. So what better word processor to use than MS Word 2013?</div>
<h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px; text-align: start;">
Publishing a post from MS Word</h3>
<b style="text-align: start;">Step 1: Create new Blog Post</b><br style="text-align: start;" /><br style="text-align: start;" /><div>
First of all, open MS Word 2013, and create a new Blog Post from the document templates given in the <b>File >> New</b> section.</div>
<br style="text-align: start;" /><div class="separator" style="clear: both; text-align: center;">
<img alt="Create new blog post" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mDm0HRUFc2ibuWzdscHxLyT9o__WJHhLaiyNnn3Mooj9ZSSLEZLRHUIGUN-9JvEjKsJTVSUY-1b-poKjrywXr6ZMjav1ZHNhfwCY646VghMkyzlpQyMjPCHrWJqpUJrgM_WSmMoVrGsB/s1600/1.PNG" style="padding: 10px;" title="Create new blog post" width="580px" /></div>
<br style="text-align: start;" /><div>
Now, click on the Create button on the window that appears next.</div>
<br style="text-align: start;" /><div class="separator" style="clear: both; text-align: center;">
<img alt="Create new blog post" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZpkLruwMopOou611kvScDyx3vyMq3wSCWQDOcQKlfEKxvBlj7C9N8VQs_1bx1XF9RJMUpGr2iS6aEiV5AjM64yWzt_SAbseIOviJytdGknihgGCbj5acRT-R6Tm2AN8XWBCDuHu2iVG8/s1600/2.png" style="padding: 10px;" title="Create new blog post" width="500px" /></div>
<br style="text-align: start;" /><b style="text-align: start;">Step 2: Select a platform</b><br style="text-align: start;" /><br style="text-align: start;" /><div>
You will now see a windows that says <b>Register a Blog Account</b>. Click on the <b>Register Now</b>button, and then select the Blog platform. For the purpose of this tutorial, we're going with WordPress, but feel free to go with another platform if needed.</div>
<br style="text-align: start;" /><div class="separator" style="clear: both; text-align: center;">
<img alt="Choose platform" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOlWITFRJq4L_q-LKiKIcVOxYDrBt-b8Axx1hQ8S83h0QfZKqXWaCH3BWDOY5IMxUXVxgWN9Bf-uMNJ_XR1Zs3eVs5wHI-NRKzexJCRAYNmNAjzg9BPBcZEvSWpfyNSLw555WsE9Hu07qf/s1600/4.PNG" style="padding: 10px;" title="Choose platform" /></div>
<br style="text-align: start;" /><div>
Click on the Next button to proceed. </div>
<br style="text-align: start;" /><b style="text-align: start;">Step 3: Register new account</b><br style="text-align: start;" /><br style="text-align: start;" /><div>
Now, enter the WordPress blog URL you want to post to, and enter your login credentials (username and password).</div>
<br style="text-align: start;" /><div class="separator" style="clear: both; text-align: center;">
<img alt="Account setup" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixuvS_hNzgaHszD-mg__YTj6bTb1kZHF3m7wIv-SfjltyErr2qlkT-bbwm5HAAF8wu6XmpHD00rl1GxBR9xcVYwIoFWnIva9kciuiK_q0J3sftbGwSSiUw0pAfEf6HpvhMRVKL_0UEFi-k/s1600/5.PNG" style="padding: 10px;" title="Account setup" /></div>
<br style="text-align: start;" /><span style="text-align: start;">If login is successful, you should see the following message.</span><br style="text-align: start;" /><br style="text-align: start;" /><div class="separator" style="clear: both; text-align: center;">
<img alt="Success message" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3FyE8aYpLrtKMP9p_d9eaajpRYljoA6PGGS6xgOFTEVDgY9OqMSvqppYsEIRxmwNOmMD0Shy-ZjCyYgU9zwyoZ_Lvaae1wR2FmoAexHvN0jPKj_IIYJ_HYVu_PFlyfzUdpPpABP6B-G0/s1600/6.PNG" style="padding: 10px;" title="Success message" width="500px" /></div>
<br style="text-align: start;" /><b style="text-align: start;">Step 4: Create and publish!</b><br style="text-align: start;" /><br style="text-align: start;" /><div>
Now, you will see a word editor. Write your blog post in it, and then click on the Publish button on the top left under the Blog Post tab. This should publish the post on your blog. If you'd rather save it as draft first, then pull the drop-down menu, and click on <b>Publish as Draft</b>.</div>
<br style="text-align: start;" /><div class="separator" style="clear: both; text-align: center;">
<img alt="Publish!" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnbTnNu0TDgEztbAkfKnKFK77FJ6ehI9QWgSAhDkOWoEMLrllYjrBYDzBs9AzA8ZZLh4WAcmkF1uU8TCfN14zsdAm3lxXl3s1dxah6unSk9_yBaCP0bFYtMyzO86YWi1g7BxHQn5_JSya/s1600/7.png" style="padding: 10px;" title="Publish!" /></div>
<br style="text-align: start;" /><div>
Once it has saved, you should see your blog post in your blog post editor.</div>
<br style="text-align: start;" /><span style="text-align: start;">Simple, right?</span><br style="text-align: start;" /><br style="text-align: start;" /><div>
It is. And a great way to keep your spellings and grammar in check too. I often use this method of posting, and I would encourage you to do the same as well. And if you run into any problems, be sure to ask a question in the comments section below. Cheers :)</div>
</div>
</div>

How To Publish WordPress Posts From Microsoft Word 2013‏?

WordPress is a very powerful publishing platform, and a very popular one too since more than 45% of blogs are hosted on WordPress. Its ...

+ Read more »

What Is The Best Way To Mobile Optimize Your Site?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: left; color: #555555; float: left; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img alt="Mobile Site Optimization" border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh4h3oKQ9tQiu29-s3IdZYz6THM6z8-CM1prVhirwqeH000twF4bPztGjoS0zB6rrqnExnP5WEGxCLS_RYVNMY7lgTsgsqL59LsZ3tgW1S9dB16XeWACt4ABY0KZPeWV2SO6XQeXz9Df9P/s400/mobile-optimization.jpg" style="padding: 10px;" title="Mobile Site Optimization" width="400" /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
The concept of searching for content online using mobile devices is steadily on the rise, primarily due to the vast plethora of mobile devices and tablets now readily available in the market. They really seem to be advancing the cause, and more and more people are buying and using them. So how are these evolving trends changing things, and how does it effect you as a website owner? Previously, we have looked at various ways to optimize your sites for mobile devices. And there are more than one way to handle this problem. So what solution is the best for delivering content to mobile devices?</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
There are more than one ways to serve mobile content to your users, and they fall broadly into three basic categories; Responsive Web Design (obvious!), dynamic content serving, and creating the mobile version of a site.</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px; text-align: left;">
Responsive Web Design</h3>
<div>
<div>
Probably the most popular mobile optimization technique used today. Responsive Web Design (RWD) involves designing content that automatically resizes and rearranges itself to fit the screen size and resolution of any mobile device. Since the content itself is redirecting, there's no need to create custom redirects to other mobile pages, or changing the on-page content itself.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Responsive Web Design" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rCFwJgsi-svs2UoaMsSz5os6wfrzdDAAR2QwVuGb5mVAutasjaJ8UclwbhwqHC9aR6WV6ecLv-VyNVOJctSglHFsM3Popk3zVNZHhKNSR15XtCpPabpqiwvtzG8TzjsYABYV8rrPvLg4/s400/responsive+web+design.png" style="padding: 10px;" title="Responsive Web Design" width="400" /></div>
<br style="text-align: left;" /><div>
For the user, this means a smooth user journey, and for a content manager, it means content only needs to be updated once. From a developer viewpoint, RWD may require rebuilding your site framework with flexible templates, grids, style sheets and JavaScript but with very rewarding results. Personally, this is my favourite mobile optimization technique, and one of the easiest there is.</div>
<h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px; text-align: left;">
Dynamic content serving</h3>
<div>
This technique is somewhat similar to RWD, but very different at the same time. While RWD detects screen size and resizes the content, dynamic content serving detects the user-agent at the server-end, and then presents a custom page on the same URL. The custom page is dynamically generated.</div>
<br style="text-align: left;" /><div>
Although this technique is hard to implement and requires a lot more maintenance, it is the most powerful method for serving mobile content to users, and experts recommend it for experienced webmasters.</div>
<h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px; text-align: left;">
Separate Mobile Site</h3>
<div>
The final implementation you might want to consider is creating a separate mobile site, where smartphone users will be directed to a mobile-optimized version of your site. This implementation allows you fully customise your content for a mobile audience, since it’s often an independently hosted solution. Similar to creating dynamic serving content, this means you need to make separate updates for content or styling pieces to ensure a smooth user experience.</div>
<br style="text-align: left;" /><div>
Facebook is a perfect example of this solution. You have Facebook desktop version, and then you have Facebook mobile version. If Facebook had just used RWD to deliver mobile content, then low-end devices would have a lot of trouble keeping up with all the Facebook features such as Apps, Games, Chat, Instant notifications, and more. But with dynamic content serving and separate mobile site, Facebook has made sure that mobile users don't access features not suited/compatible for them.</div>
<br style="text-align: left;" /><div>
That was all about methods to implement mobile optimization. So tell us, what do you think is the best method for delivering mobile content?</div>
</div>
</div>
</div>

What Is The Best Way To Mobile Optimize Your Site?

The concept of searching for content online using mobile devices is steadily on the rise, primarily due to the vast plethora of mobile d...

+ Read more »

Move your blog from LiveJournal To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" height="127" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUn_aAWwVYY0rOxABRkr6Y3BBGcYb0DnkB0IhpNXkH77NyjyvWfWGRFLpJmiM165GUUvo7mar1kMgKfiIx4slcVkoj2Z-W0WxVhmzd5Tmms8mtQSIhubIZNzxFLYH4dYVf6EjCASWGzzYz/s320/1.jpg" width="320" /></div>
<br />
<div style="text-align: justify;">
LiveJournal is a great free resource for people who want to keep a log 
or a diary of sorts of theirs online, or share their life experiences 
with their friends and family. It allows people to make posts, and then 
cross-post and share on their social media profiles. Hence, these 
journals have all the markings of a blog. But for people who started off
 with LiveJournal, but aren't satisfied with the limited options it has,
 <a href="http://www.helperbloggers.blogspot.com/" target="_blank">Blogger</a> 
is a great option for them. Blogger is so much more than what 
LiveJournal is. So if you're not satisfied with LiveJournal, you can 
just move your blog from LiveJournal over to Blogger and get much more functionality.</div>
<div style="text-align: justify;">
</div>
<a href="http://www.blogger.com/blogger.g?blogID=5633879042047294684" name="more"></a><br />
<br />
<div style="text-align: justify;">
We recently published a post about transferring your blog from WordPress to Blogger.
 And we shall continue this series with this LiveJournal to Blogger 
conversion. Our dear readers have been demanding a post on conversion 
from Blogger to WordPress, so we will be doing that soon. Stay tuned :)</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
And now, back to the topic at hand.In this post, we will walk you 
through the conversion. We are assuming that you already have a <a href="http://www.livejournal.com/" target="_blank">LiveJournal</a> account, with some content published on it, which you want to transfer.<br />
<br /></div>
<div style="border: 4px dotted red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
Transferring from LiveJournal to Blogger </div>
<br />
<br />
<br />
<div style="text-align: justify;">
First of all, visit this link (<a href="https://livejournal2blogger.appspot.com/" target="_blank">liveJournal2Blogger</a>),
 and log into your LiveJournal account using the form given on the page.
 Unlike WordPress, LiveJournal doesn't provide you with an option to 
export your content. So you need a third-party app to do it for you. And
 this app does just that for you.</div>
<div style="text-align: justify;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrDwqYO78X6NBiieTdz3m038Rd_Ht-xv5p9zLhSsjMe5y63EXGJ3n20FcRSLKE8rRTwPFpFbUdrLCGBkXHGVQatO9_nU7vXv7hgSfsEsJYLJZmO_ob69bQgnHktAlUw1AH7WmSKlWWrDq/s400/login.PNG" width="400" /></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
You will be prompted to save a file on your computer. This is your 
LiveJournal in a Blogger-friendly exported format. We will use this to 
import data into Blogger, so keep it ready at hand.<br />
<br />
<br /></div>
<div style="border: 4px dotted red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
Importing data into Blogger </div>
<br />
<br />
<div style="text-align: justify;">
Now you have the exported file, all you need to do is import this file into Blogger. Log into, or sign up for a <a href="http://blogger.com/" target="_blank">Blogger</a> account, From there, either Create a new blog, or click on an existing blog where you want to publish your LiveJournal content.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Once you're logged into a blog's dashboard, Click on the <b>Settings </b>at the bottom of the left side-bar. From the options that pop out, click on <b>Others</b>. Then, on the right, you'll see an option to <b>Import Blog</b>.</div>
<div style="text-align: justify;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfHS-XXJBwXjB52fUJn3b9tAPsaNda3q-k_-Ejt2KtOmxhk-wgwyuuX9yYLuQzle7P4kIWMSQRVxXQ4ckSBNLA85n8k99ZhNv4trhjirl0r6iPxYo3utbNIe2_9SnD3OW3bCfAexxDWCk/s400/blogger.PNG" width="400" /></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Now, all you need to do is browse to the file you downloaded, and upload
 it here. Follow the simple instructions, and you have a set of posts 
from your LiveJournal account ready to be published!</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
As with the WordPress to Blogger, this conversion has a limitation of 
file sizes for up to 1 MB. But LiveJournal blogs are pretty small, so 
you shouldn't have much of a problem exporting your posts and comments. 
That's all there is to the conversion. You might also like to know about
 Blogger2WordPress.</div>
</div>

Move your blog from LiveJournal To Blogger

LiveJournal is a great free resource for people who want to keep a log or a diary of sorts of theirs online, or share their life exper...

+ Read more »

Creating Customized HTML Text Area Boxes

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<ins style="border: none; display: inline-table; height: 280px; margin: 0; padding: 0; position: relative; visibility: visible; width: 336px;"></ins><div align="justify">
<img align="left" alt="HTML-Text-Boxes" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMG_bi74VqEwa4LFGb5OLBqZavwunZCCxP0WazKyg9rardvdcZw6qZU54gr3-6pPZBrGKBtqxPDJwdOAJ8fP7tDPEQFfFQhzrgLVnJ0dWiRgG2e6-1gRpJLC7tzGzhcdlD7lBIphDm2AI/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="HTML-Text-Boxes" width="241" />
 Its really important to keep everything as attractive as possible while
 writing posts. Text Area boxes are a useful method of showing long 
bunch of text or code on your blog. Just last month I wrote two posts 25 Vertical Navigation Menus and 30 Horizontal Navigation Menus
 where I have used a lot of coding and all those coding were displayed 
inside fully customized text areas that made the post looked clean and 
neat. Text boxes are good only if there length and height is well 
controlled and today with this tutorial we will learn several ways of 
styling our default text areas.</div>
<div align="justify">
Kindly see a demo first,</div>
<span class="fullpost">   </span><br />
<div align="justify">
<span class="fullpost"><br /></span></div>
<span class="fullpost">
</span>
<br />
<center>
<a href="http://helperbloggers.blogspot.com/2012/08/customize-labels-cloud-in-blogger.html" rel="nofollow" target="_blank">Live Demo </a></center>
<span class="fullpost">
</span>
<br />
<div align="center">
<span class="fullpost"><br /></span></div>
<span class="fullpost">
</span>
<br />
<div align="center">
<span class="fullpost"><b><span style="color: #0080ff;">Before</span></b></span></div>
<span class="fullpost">
</span>
<br />
<div align="justify">
<span class="fullpost"><img alt="text-boxes" border="0" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvjM_cKM-RiBXH_LFwyDdyd_gVxzJNHfVJT6mgyPkNvi_3PlC8QGo-hiTzj8vUiqTaHt6b9buomE-QcW9UN-fpiFuFGnpFKa0zxfpQin5fVlwpckTKOWQPpys5Y5jofoNyR7_JnVdFFmk/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="text-boxes" width="217" /> </span></div>
<span class="fullpost">
</span>
<br />
<div align="center">
<span class="fullpost"><b><span style="color: #0080ff;">After</span></b></span></div>
<span class="fullpost">
</span>
<br />
<div align="center">
<span class="fullpost"><img alt="text-boxes" border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbup0wym9_8UsDfiL1DcTFRR1UfwLRAAyngrlwMDLJLvJVr8shyphenhyphenhbYxAuiOdmfAJoP07VCq8NRCy3fwzJI-HG5K1KkgSpYBR-GGUHk_6IkHW_L3oM8umV9b6VbGpQ5_s5OxiLkyNuHUnY/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="text-boxes" width="463" /></span><br />
<span class="fullpost"><br /></span>
<span class="fullpost"><br /></span></div>
<span class="fullpost">
</span></div>
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
How to Customize the Text Area Box? </div>
<br />
<br />
<span class="fullpost"></span><br />
To do this follow the steps below,<br />
<ol>
<li>Go to <a href="http://www.blogger.com/" target="_blank">Blogger</a> > Layout > Edit HTML </li>
<li>Search for </b:skin> </li>
<li>And just above it paste the code below, </li>
</ol>
<br />
<div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<span class="fullpost">.hb-textarea {        </span><br />
<span class="fullpost">padding:0;         </span><br />
<span class="fullpost">margin:0;         </span><br />
<span class="fullpost"><b>background: #fff;</b>         </span><br />
<span class="fullpost"><span style="color: green;"><b>width:400px;            </b></span></span><br />
<span class="fullpost"><span style="color: green;"><b>height:40px; </b></span>        </span><br />
<span class="fullpost"><span style="color: blue;"><b>color:#666;</b></span>         </span><br />
<span class="fullpost"><span style="color: purple;"><b>font:12px arial;</b></span>         </span><br />
<span class="fullpost"><span style="color: #0080c0;"><b>border:1px dotted #289728;</b></span> } <br />
      .hb-textarea:hover {        </span><br />
<span class="fullpost"><b>color:#289728;</b>         </span><br />
<span class="fullpost"><span style="color: #0080ff;"><b>border:2px solid #666; </b></span>        </span><br />
<span class="fullpost">}  </span></blockquote>
<br />
<ol>
</ol>
</div>
<span class="fullpost">   4.  Finally save your template!</span><br />
<br />
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
How to show the Stylized Text Area Effect inside Blogger Posts? </div>
<br />
<br />
<span class="fullpost">To display this customized text area you only need to add the following code in the Edit HTML section of your Blogger Editor,</span><br />
<br />
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<span class="fullpost"><textarea class="hb-textarea" readonly="readonly"><b>WRITE-TEXT-HERE</b></textarea></span></blockquote>
<br />
<span class="fullpost">Simply replace <b>WRITE-TEXT-HERE</b> with your text that you want to appear inside a box.</span><br />
<br />
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
How to Customize The CSS of The Text Box? </div>
<br />
<span class="fullpost"></span><br />
If you wish to change the font, color or in 
short the entire look of the text box then you just need to edit the 
following areas in the CSS code above,<br />
    <strong>background: #fff; –> This Changes background color of the text area</strong>       <br /><span style="color: green;"><strong>width:400px; –> This changes width size of box</strong></span><span style="color: green;"><strong>          <br />height:40px;  -> This changes box height</strong></span>       <br /><span style="color: blue;"><strong>color:#666;</strong></span>  -> This changes font color inside text box       <br /><span style="color: purple;"><strong>font:12px arial;</strong></span> –> This changes font size and font family respectively       <br /><span style="color: #0080c0;"><strong>border:1px dotted #289728;</strong></span>
 } –> This changes the border size, style (i.e dotted, solid, dashed)
 and color. Editing it will change the look of the border/outline across
 the text <br />
    .hb-textarea:hover {      <br /><strong>color:#289728; –> This changes font color on mouse hover</strong>       <br /><span style="color: #0080ff;"><strong>border:2px solid #666;  -> This changes border size, style and color on mouse hover</strong></span><br />
    <span style="color: #2c2725;">Now
 Simply edit the above codes as guided and create a perfectly suiting 
Text box for your beloved blogs. I hope it will be as interesting for 
most of you as it seems :> Do not hesitate to ask for any help if 
needed!</span><br />
</div>

Creating Customized HTML Text Area Boxes

Its really important to keep everything as attractive as possible while writing posts. Text Area boxes are a useful method of showing ...

+ Read more »

Customize Labels Cloud in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQBYLwkkEAUocPhVFh0wG2rhW2m2_7za6A9BWgodGX8fJ0YrJOCN4Y9z0QFpTU1yd58A_FPSJGmjXar_Vne7wHs5A7-gAf5LVtNOxjp8mRK79iRYq_iNGhm3S4gdxkOv1-op0XXo868E/s1600/SRFile2012_8_18_6_51_39_234.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQBYLwkkEAUocPhVFh0wG2rhW2m2_7za6A9BWgodGX8fJ0YrJOCN4Y9z0QFpTU1yd58A_FPSJGmjXar_Vne7wHs5A7-gAf5LVtNOxjp8mRK79iRYq_iNGhm3S4gdxkOv1-op0XXo868E/s1600/SRFile2012_8_18_6_51_39_234.jpg" /></a></div>
Back in the year 2008 when Blogger.com was moving 
through several update phases, third party developers would often take 
the golden opportunity of creating widgets for BlogSpot blogs but as 
soon as Google rolled out massive changes to their online services, 
several official widgets popped out which load fast and perform well 
because the scripts are served by Blogger servers. Page List and label 
cloud/list enabled designers to create dynamic menus. Since the 
stylesheet was made accessible. therefore we all got a chance to play 
with these widgets and transform them completely in look and appearance.
 We shared tutorials first time on how to create dynamic menus with page list and an automatic menu with label list
 and today we would share a simple stylesheet that will transform the 
labels cloud into organized small blocks that rotate on mouse over. I 
must ensure you that the styles are perfectly compatible in all major 
browsers including IE8+.
<a href="http://www.blogger.com/blogger.g?blogID=5633879042047294684" name="more"></a><br />
<div align="justify">
</div>
<div align="justify">
<span style="background-color: yellow;">DEMO:</span> Look at the label cloud on the sidebar of this blog</div>
<div align="justify">
</div>
This is how labels look in cloud display:<br />
<br />
<img alt="labels widget blogger" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS3OviwSHqexh3TmEJeUu0CpneKjVMEQmGd1rZO_82GozEglkY-2JCcje6T_NKUtHuC3lmAo0BdWrwK2FGQlB4vi6tmyASBLPTRH1jllcGHEm7ao7_bWDw2v2qhzfcqMyD11PEiRlkl-Q/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="labels widget blogger" width="306" /><br />
<br />
This is how it will look after you apply the new style.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQBYLwkkEAUocPhVFh0wG2rhW2m2_7za6A9BWgodGX8fJ0YrJOCN4Y9z0QFpTU1yd58A_FPSJGmjXar_Vne7wHs5A7-gAf5LVtNOxjp8mRK79iRYq_iNGhm3S4gdxkOv1-op0XXo868E/s1600/SRFile2012_8_18_6_51_39_234.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQBYLwkkEAUocPhVFh0wG2rhW2m2_7za6A9BWgodGX8fJ0YrJOCN4Y9z0QFpTU1yd58A_FPSJGmjXar_Vne7wHs5A7-gAf5LVtNOxjp8mRK79iRYq_iNGhm3S4gdxkOv1-op0XXo868E/s1600/SRFile2012_8_18_6_51_39_234.jpg" /></a></div>
<br />
<br /></div>
<div style="border: 2px dotted red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify;">
How it works?</div>
<br />
Each label link is nested inside a span tag followed by a class named 
label-size. If the font-size is not specified the widget changes 
font-size of each label according to its post-count. Therefore showing 
big and<br />
small clouds. Introducing custom styles would over-ride the 
exiting styles thus changing the entire look.<br />
  </div>
<div style="border: 2px dotted red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify;">
Turn Random Cloud display into Blocks</div>
<br />
<br />
The code below can be customized in several ways to create exciting label designs. You can also add background images to them.<br />
Follow these easy steps:<br />
<br />
<ol>
<li>Go to Blogger > Settings> Layouts </li>
<li>Click add a gadget and choose Labels                      </li>
<li>Inside the settings make sure to choose the cloud display. You may 
set other options as per your requirement. See the screenshot below as 
example  </li>
</ol>
<img alt="labels settings" border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrg8yJZt11eKLVQRdS1W5Pry64-1GzlhWF8-3y-TbKtLxleprxwWoLs6GK4iokt5NfKPSyAOQSd4CTfBCYFn-5WLR3wAVPtPt_A0oesaNKwURvt0KGcy8uSM4BEgRZtz_m63MNlPsZJTI/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="labels settings" width="385" /><br />
<br />
Please choose to display at most 25 labels. Too much labels on homepage look awkward. Showcase your best categories only.<br />
<br />
<br />
        4.    Now save the widget and go to settings > Template<br />
       5.     Backup your template<br />
       6.     Click <b>Edit html</b> ><b> Proceed</b>  and search for this<br />
<br /></div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
]]></b:skin></blockquote>
</div>
</div>
</div>
</div>
<div style="background-color: white;">
</div>
<br />
7.   Just above it paste the following CSS code:

<br />
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
/*-----Custom Labels Cloud widget by http://helperbloggers.blogspot.com----*/<br />
.label-size{<br />
margin:0 2px 6px 0;<br />
padding: 3px;<br />
text-transform: uppercase;<br />
border: solid 1px #C6C6C6;<br />
border-radius: 3px;<br />
float:left;<br />
text-decoration:none;<br />
font-size:10px;<br />
color:#666;<br />
}<br />
<br />
.label-size:hover {<br />
border:1px solid #6BB5FF;<br />
text-decoration: none;<br />
-moz-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
-moz-transform: rotate(7deg);<br />
-o-transform: rotate(7deg);<br />
-webkit-transform: rotate(7deg);<br />
-ms-transform: rotate(7deg);<br />
transform: rotate(7deg);<br />
filter: progid:DXImageTransform.Microsoft.Matrix(<br />
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');<br />
zoom: 1;<br />
}<br />
<br />
.label-size a  {<br />
text-transform: uppercase;<br />
float:left;<br />
text-decoration: none;<br />
}<br />
.label-size a:hover  {<br />
text-decoration: none;<br />
}</blockquote>
</div>
<div style="background-color: white;">
</div>
<br />
<br />
  8.  Save your template<br />
         9.    All done!<br />
Visit your blogs and see the labels completely transformed to small 
neatly crafted rectangular boxes. If in case you want the label boxes to
 be of random sizes depending on the post-count then simply delete <span style="background-color: yellow;">font-size:10px;</span> from the above code.<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>

Customize Labels Cloud in Blogger

Back in the year 2008 when Blogger.com was moving through several update phases, third party developers would often take the go...

+ Read more »

Customize Blogger Labels With CSS3

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOJyi_lGJS0P2NJ_4YB_7Q5n9SImU_Sa6UHz8K_ITwy0cQRh0WIudOP5qtgpyn3-OJzkDECulzWBqwpRXhapCBoAb1zWNyu69bVOLDP97ljoY_W1m_8-m5JqrlHlMlCUv0soGJNq0T4k/s1600/customize-blogger-labels-with-css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOJyi_lGJS0P2NJ_4YB_7Q5n9SImU_Sa6UHz8K_ITwy0cQRh0WIudOP5qtgpyn3-OJzkDECulzWBqwpRXhapCBoAb1zWNyu69bVOLDP97ljoY_W1m_8-m5JqrlHlMlCUv0soGJNq0T4k/s1600/customize-blogger-labels-with-css.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="" style="clear: both; text-align: left;">
Previously I shared <a href="http://www.helperblogger.com/2012/07/add-css3-bricksbox-style-labels-to.html" target="_blank">bricks/box style labels for blogger</a> and many of you found it great so that today I am sharing another <span style="background-color: white;">beautiful CSS3 labels style for blogger.This label hack can be easily applied to your labels by just adding some CSS code in to your blog.This labels and created by <a href="http://www.stylifyyourblog.com/" rel="nofollow" target="_blank">Stylifyyourblog</a> and I have reshared them on Helper Blogger,Now lets see how to apply this label hack.</span></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
</div>
<h3>
How To Apply This Label Hack?</h3>
<div>
<b>Important -  Before applying this label hack set your label style to Cloud.</b></div>
<div>
<b><br />
</b></div>
<div>
You can also apply this hack by using below one click installer.</div>
</div>
<br />
<br />
<br />
<center>
<form action="http://www.blogger.com/add-widget" method="POST" target="_blank">
<input name="widget.title" type="hidden" value="" /><input name="widget.content" type="hidden" value="<style type="text/css">
/*<![CDATA[*/
.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}
/*]]>*/
</style>
<a href="http://www.helperblogger.com/" >Blogger Widgets</a>" /><input name="infoUrl" type="hidden" value="http://www.helperblogger.com/" /><input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy43Pa14LRxNWxwKmHhHSA7KiT1EkqjTIBctLKdhLB78vwO-EHowXwGJhpbw15arkSn37FtqPzPaLO4jz07zcCkeYxvEczrcH8PsAPRqtOqGo0c_i9Irh6Qvobx08xIyiV_CjajeqJ8Vs/s320/helper-blogger-logo.png" /></form>
</center>
<br />
<br />
<div style="text-align: center;">
<span style="font-size: large;"><b>OR</b></span></div>
</div>
<br />
apply this hack manually by adding below CSS code just above/before <code>]]></b:skin></code> tag in your template,<br />
<br />
<pre class="brush:css;">.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

#Label1 {
    height: 210px;
}

Customize Blogger Labels With CSS3

Previously I shared bricks/box style labels for blogger and many of you found it great so that today I am sharing another beaut...

+ Read more »

How To Remove Underlines From Links In Blogger?

How To Remove Underlines From Links In Blogger?

When I was new in the blogging world I tried blogger as well as wordpress for few month but as google mostly prefers blogger we move...

+ Read more »

Remove "Powered By Blogger" Attribution Gadget In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61TNHWKz_Ivm8rXwOh4G8larIz7Y5DB3pX6t6lB_AqVgoBFd1_GCvymm20ggjw0v5G-wf4M_RWcy2RX3_0-vAnb7bsvlVIDznESIZVWLcIiggirSFXw8lnKWFuajZsbeQQsOzGQRAj4M/s1600/remove-blogger-attribution-gadget2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61TNHWKz_Ivm8rXwOh4G8larIz7Y5DB3pX6t6lB_AqVgoBFd1_GCvymm20ggjw0v5G-wf4M_RWcy2RX3_0-vAnb7bsvlVIDznESIZVWLcIiggirSFXw8lnKWFuajZsbeQQsOzGQRAj4M/s1600/remove-blogger-attribution-gadget2.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
The attribution gadget is a gadget present at footer of blog and says "Powered by Blogger".The gadget is locked,when you click on the edit link of attribution gadget you will notice that there is no  Remove link,Because the gadget is locked officially by the blogger.To unlock the gadget follow my below easy steps carefully.
</div>
<br />
<h3>

<span style="color: red;">How To Remove Blogger Attribution Gadget</span></h3>
<br />
<ol>
<li>Go to Blogger Dashboard > Design > Edit HTML.(In new U.I it is Dashboard > Template)</li>
<li>As always download a copy of your template</li>
<li>Tick "<b>Expand Widget Templates</b>" check box</li>
<li>Now search for below code in your template</li>
</ol>
<br />
<blockquote>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'></blockquote>
<br />
Replace <code>locked='true'</code> with <code>locked='false'</code><br />
<br />
Now save your template and go to Layout page. .<br />
Click on the edit link of attribution widget.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGd6VUkSRhFNu9hAV5qFQ-ErrVKilEdvRICiwwwLVTScRj-WdP5KtWiL6Y9anGWCSyLRNZHnfCGAO9N-Du-cOEVL3zXSy1AYD8fheH8qw_bBcyTPKj7USGiCNZ-CEZU5d1mcuRrUp77-A/s1600/remove-blogger-attribution-gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGd6VUkSRhFNu9hAV5qFQ-ErrVKilEdvRICiwwwLVTScRj-WdP5KtWiL6Y9anGWCSyLRNZHnfCGAO9N-Du-cOEVL3zXSy1AYD8fheH8qw_bBcyTPKj7USGiCNZ-CEZU5d1mcuRrUp77-A/s1600/remove-blogger-attribution-gadget.png" /></a></div>
<br />
<br />
Hit <b>Remove</b> button and you are done.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdRCl97-Vl8r4zWO1zfRlODwS6i8CfmsG4VJ8XFndtLTqb_AjKkEc5QjcE3YUD9-S5TsE4vkLlwOALIi6VPxtwu9Gm1Yx7TEA0luWsXnczt6CeYuQ_YlqALf6U-aAq67zIIZCevDlWZCw/s1600/remove-blogger-attribution-gadget1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdRCl97-Vl8r4zWO1zfRlODwS6i8CfmsG4VJ8XFndtLTqb_AjKkEc5QjcE3YUD9-S5TsE4vkLlwOALIi6VPxtwu9Gm1Yx7TEA0luWsXnczt6CeYuQ_YlqALf6U-aAq67zIIZCevDlWZCw/s1600/remove-blogger-attribution-gadget1.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
That's All.....</div>
<br /></div>

Remove "Powered By Blogger" Attribution Gadget In Blogger

The attribution gadget is a gadget present at footer of blog and says "Powered by Blogger".The gadget is locked,when you c...

+ Read more »

How to Remove or Auto Hide Blogger Navbar

<div dir="ltr" style="text-align: left;" trbidi="on">
At the top of Blogger Blogs you will a navigation bar known as Navbar.It
 enables your readers to sign in to their blogger account,search for 
blogs, go to next blog, customize, etc...But many of us wants to remove 
Navbar to give a professional look to our blog.In this post I am going 
show you 4 simple tricks to remove or auto-hide the Navbar.<br>
<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwcPHiSZGvGrQC_ABkt5QXG1Om_J5y-gHO4gSwK7iQ1zCkz-UTiBEjUjyiq05kkOah0cL8XKYw9IJ-Q1a9Vhc1wAkYIAV-YizGbrsohaGXBEOiGa0cBQfAH8bR2jgHcYMYdhkPbQl9fc0/s1600/how-to-remove-or-hide-blogger-navbar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwcPHiSZGvGrQC_ABkt5QXG1Om_J5y-gHO4gSwK7iQ1zCkz-UTiBEjUjyiq05kkOah0cL8XKYw9IJ-Q1a9Vhc1wAkYIAV-YizGbrsohaGXBEOiGa0cBQfAH8bR2jgHcYMYdhkPbQl9fc0/s320/how-to-remove-or-hide-blogger-navbar.png" width="320"></a></div>
<br>
<h3 style="color: red; font-weight: normal; text-align: left;">
<b></b></h3></div>

How to Remove or Auto Hide Blogger Navbar

At the top of Blogger Blogs you will a navigation bar known as Navbar.It enables your readers to sign in to their blogger account,search f...

+ Read more »