Hit List Softwares: web designer

<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="post-title entry-title" itemprop="name" style="color: #333333; font-family: Helvetica, Arial; font-size: 32px; line-height: 1.1em; margin: 0px; padding-bottom: 5px; position: relative; text-shadow: rgb(100, 102, 91) 0px 1px 1px; word-spacing: 5px;">
Add 4 killer effects to blogger posts</h1>
<span style="color: #666666;"><span style="background-color: white; font-family: Helvetica, Arial; font-size: 15px; line-height: 21px; word-spacing: 5px;">Default design of the </span><a href="http://hitlistapp.blogspot.com/" style="background-color: white; font-family: Helvetica, Arial; font-size: 15px; line-height: 21px; text-decoration: none; word-spacing: 5px;" target="_blank">blogger</a><span style="background-color: white; font-family: Helvetica, Arial; font-size: 15px; line-height: 21px; word-spacing: 5px;"> posts is very boring but it can be easily customized by adding little </span>CSS<span style="background-color: white; font-family: Helvetica, Arial; font-size: 15px; line-height: 21px; word-spacing: 5px;"> in the template code. This article is about adding stylish and very attractive effects to the blogger posts. Today we will discuss about 4 different effects, which are </span>shadow effect<span style="background-color: white; font-family: Helvetica, Arial; font-size: 15px; line-height: 21px; word-spacing: 5px;">, leaf effect, neon effect and rounded corners effect. All these effects are created in CSS only so they do not reduce your blog’s loading speed. You can add these beautiful effects to your </span>blogger<span style="background-color: white; font-family: Helvetica, Arial; font-size: 15px; line-height: 21px; word-spacing: 5px;"> posts in few minutes by following this easy guide.</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4VCtvUAoT7sft3ppWDYyXbnSMLu7laLRFPzb_Xc8_3gpZEE9B_b82U_QC9STRqVfJ-rboAvR7IrJhtVKLDJj1zli9dipVZ13HhZ4ujNqyCxeEoKhDD_IHwSe0cToW56ai5VJZRIjolzQ/s1600/blogger-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4VCtvUAoT7sft3ppWDYyXbnSMLu7laLRFPzb_Xc8_3gpZEE9B_b82U_QC9STRqVfJ-rboAvR7IrJhtVKLDJj1zli9dipVZ13HhZ4ujNqyCxeEoKhDD_IHwSe0cToW56ai5VJZRIjolzQ/s1600/blogger-logo.jpg" /></a></div>
<div style="text-align: center;">
<span style="color: #666666;"><span style="background-color: white; font-family: Helvetica, Arial; font-size: 15px; line-height: 21px; word-spacing: 5px;"><br /></span></span></div>
<h3 style="background-color: white; color: #333333; font-family: Helvetica, Arial; font-size: 22px; line-height: 40px; margin: 0px 0px 0px -20px; padding-bottom: 5px; padding-left: 20px; position: relative; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-spacing: 4.545454502105713px;">
Add shadow effect around blogger posts</h3>
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<img alt="Add shadow effect to blogger posts" border="0" height="225" src="http://lh3.ggpht.com/-YZLTQFvBPus/Uu-CV6wod9I/AAAAAAAACjY/A3-Ze5yzOOI/image%25255B21%25255D.png?imgmax=800" style="border: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 5px;" title="Add shadow effect to blogger posts" width="472" /></div>
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
This effect adds beautiful shadow around your blogger posts.</div>
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Code</strong></div>
<pre class="code" style="background-attachment: scroll; background-color: white; background-image: url(http://4.bp.blogspot.com/-GlhRdQ2lszc/UY38C5a_AvI/AAAAAAAABt0/vsiGbAmbqrs/s1600/stacked-lined.png); background-position: 0px 0px; background-repeat: no-repeat repeat; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(220, 220, 220); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 30px inset, rgba(0, 0, 0, 0.2) 1px 1px 3px; color: #333333; font-family: Verdana, 'Times New Roman', Georgia, serif; font-size: 12px; padding: 15px 0px 15px 42px; white-space: pre-wrap; width: 560px; word-spacing: 4.545454502105713px; word-wrap: break-word;">.post
{
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-webkit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
}</pre>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<h3 style="background-color: white; color: #333333; font-family: Helvetica, Arial; font-size: 22px; line-height: 40px; margin: 0px 0px 0px -20px; padding-bottom: 5px; padding-left: 20px; position: relative; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-spacing: 4.545454502105713px;">
 </h3>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<h3 style="background-color: white; color: #333333; font-family: Helvetica, Arial; font-size: 22px; line-height: 40px; margin: 0px 0px 0px -20px; padding-bottom: 5px; padding-left: 20px; position: relative; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-spacing: 4.545454502105713px;">
Leaf effect for blogger posts</h3>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<img alt="Add leaf effect to blogger posts" border="0" height="241" src="http://lh3.ggpht.com/-2AiOpQ7REKA/Uu-CWtRd1HI/AAAAAAAACjg/aSSH1OG5Czg/image%25255B20%25255D.png?imgmax=800" style="border: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 5px;" title="Add leaf effect to blogger posts" width="485" /></div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
Add attractive leaf effect to your blogger post</div>
<strong style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">Code</strong><span style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;"></span><br />
<pre class="code" style="background-attachment: scroll; background-color: white; background-image: url(http://4.bp.blogspot.com/-GlhRdQ2lszc/UY38C5a_AvI/AAAAAAAABt0/vsiGbAmbqrs/s1600/stacked-lined.png); background-position: 0px 0px; background-repeat: no-repeat repeat; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(220, 220, 220); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 30px inset, rgba(0, 0, 0, 0.2) 1px 1px 3px; color: #333333; font-family: Verdana, 'Times New Roman', Georgia, serif; font-size: 12px; padding: 15px 0px 15px 42px; white-space: pre-wrap; width: 560px; word-spacing: 4.545454502105713px; word-wrap: break-word;">.post
{
border:1px solid #dcdcdc;
border-top-right-radius:50px;
-moz-border-radius-topright:50px;
-webkit-border-top-right-radius:50px;
border-bottom-left-radius:50px;
-moz-border-radius-bottomleft:50px;
-webkit-border-bottom-left-radius:50px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:15px;
}</pre>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<h3 style="background-color: white; color: #333333; font-family: Helvetica, Arial; font-size: 22px; line-height: 40px; margin: 0px 0px 0px -20px; padding-bottom: 5px; padding-left: 20px; position: relative; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-spacing: 4.545454502105713px;">
 </h3>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<h3 style="background-color: white; color: #333333; font-family: Helvetica, Arial; font-size: 22px; line-height: 40px; margin: 0px 0px 0px -20px; padding-bottom: 5px; padding-left: 20px; position: relative; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-spacing: 4.545454502105713px;">
Add rounded corner effect to blogger posts</h3>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<img alt="Rounded corner effect for blogger posts" border="0" height="233" src="http://lh4.ggpht.com/-Iq4dWdpI2fA/Uu-CXvRu7LI/AAAAAAAACjo/AUOcKVo3zn4/image%25255B25%25255D.png?imgmax=800" style="border: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 5px;" title="Rounded corner effect for blogger posts" width="479" /></div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
It convert normal corners of the blogger posts into stylish rounded corners</div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Code</strong></div>
<pre class="code" style="background-attachment: scroll; background-color: white; background-image: url(http://4.bp.blogspot.com/-GlhRdQ2lszc/UY38C5a_AvI/AAAAAAAABt0/vsiGbAmbqrs/s1600/stacked-lined.png); background-position: 0px 0px; background-repeat: no-repeat repeat; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(220, 220, 220); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 30px inset, rgba(0, 0, 0, 0.2) 1px 1px 3px; color: #333333; font-family: Verdana, 'Times New Roman', Georgia, serif; font-size: 12px; padding: 15px 0px 15px 42px; white-space: pre-wrap; width: 560px; word-spacing: 4.545454502105713px; word-wrap: break-word;">.post
{
border:1px solid #dcdcdc;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}</pre>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<h3 style="background-color: white; color: #333333; font-family: Helvetica, Arial; font-size: 22px; line-height: 40px; margin: 0px 0px 0px -20px; padding-bottom: 5px; padding-left: 20px; position: relative; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-spacing: 4.545454502105713px;">
Add multicolor Neon effect to blogger posts</h3>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<img alt="Add neon to blogger posts" border="0" height="206" src="http://lh5.ggpht.com/-0g5NCBeovrI/Uu-CYbLw5uI/AAAAAAAACjw/55yCrje5XGU/image%25255B29%25255D.png?imgmax=800" style="border: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 5px;" title="Add neon to blogger posts" width="427" /></div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
This effect adds multicolor neon around blogger posts according to your choice. You can change color of this neon according to your own choice.</div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Code</strong></div>
<pre class="code" style="background-attachment: scroll; background-color: white; background-image: url(http://4.bp.blogspot.com/-GlhRdQ2lszc/UY38C5a_AvI/AAAAAAAABt0/vsiGbAmbqrs/s1600/stacked-lined.png); background-position: 0px 0px; background-repeat: no-repeat repeat; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(220, 220, 220); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 30px inset, rgba(0, 0, 0, 0.2) 1px 1px 3px; color: #333333; font-family: Verdana, 'Times New Roman', Georgia, serif; font-size: 12px; padding: 15px 0px 15px 42px; white-space: pre-wrap; width: 560px; word-spacing: 4.545454502105713px; word-wrap: break-word;">.post
{
box-shadow:1px 1px 4px  <span style="color: red;">#7fbf4d;</span>
-moz-box-shadow:1px 1px 4px  <span style="color: red;">#7fbf4d;</span>
-webkit-box-shadow:1px 1px 4px  <span style="color: red;">#7fbf4d;</span>
-goog-ms-box-shadow:1px 1px 4px  <span style="color: red;">#7fbf4d;</span>
}</pre>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Change neon color – </strong>In the above code replace <span style="color: red;">red</span> colored code with your own choice of color.</div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<h3 style="background-color: white; color: #333333; font-family: Helvetica, Arial; font-size: 22px; line-height: 40px; margin: 0px 0px 0px -20px; padding-bottom: 5px; padding-left: 20px; position: relative; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-spacing: 4.545454502105713px;">
 </h3>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<h3 style="background-color: white; color: #333333; font-family: Helvetica, Arial; font-size: 22px; line-height: 40px; margin: 0px 0px 0px -20px; padding-bottom: 5px; padding-left: 20px; position: relative; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-spacing: 4.545454502105713px;">
How to add these effects to blogger posts ?</h3>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Step 1:</strong> Open to your blogger dashboard and Select <strong>Template</strong> option.</div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Step 2:</strong> Click <strong>Edit HTML</strong> option.</div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Step 3:</strong> In the template code find <strong>]]></b:skin></strong> .</div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Step 4:</strong> Just above it paste the code of required effect. You can select code of your choice from any of the above given 5 effects.</div>
<br style="background-color: white; color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;" />
<div style="background-color: white;">
<div style="color: #666666; font-family: Helvetica, Arial; font-size: 15.454545021057129px; line-height: 19.09090805053711px; word-spacing: 4.545454502105713px;">
<strong>Step 5:</strong> Save the template and after open your blog to see the new effect in action.</div>
<div style="text-align: center;">
<br /></div>
</div>
</div>

Add 4 killer effects to blogger posts

Add 4 killer effects to blogger posts Default design of the blogger posts is very boring but it can be easily customized by adding litt...

+ Read more »