Helper Blogger: Template Hacks

Showing posts with label Template Hacks. Show all posts

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 »

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 »