How To Add CSS Shadow Box Effect For Blogger

This is a about CSS trick, This post will explain
how to add CSS shadow box to blogger.

1. Log in to your blogger account and Go to Design >> Edit HTML

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste one of  below code Before ]]></b:skin> tag

Outside shadow

#Shadow-Outside{
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

Inside shadow

#Shadow-inside {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

You can change color, with changing #222
Get your color code here

5. Now When you make the post, paste below code for get CSS shadow box
   
For Outside shadow

<div id="Shadow-Outside">
your text here....
</div>

For Inside shadow

<div id="Shadow-inside">
your text here....
</div>

Replace Blue color words with your text

8. You are done.

Continue reading →

How To Add Welcome Message For Blogger

Using this post , you can add welcome message to your blog.

1. Log in to blogger account and Go to Design >Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

.element { position:fixed; bottom:1%; right:1%; padding:10px; font-family:Arial;
 background:#98DBF7; border:1px solid #2FBAF6; }

5. Now Go to Design >>page Element

6.Click Add gadget  and Select HTML/JavaScript 

7. Now paste paste below code

<div class="element">... Message Here ...</div>

Replace Blue color sentence with your own message

8.  Now save  HTML/JavaScript.  you are done.

Continue reading →

How to add Simple search box to your blogger

This gadget will help to search post from your website.so visitors
 can easily find the you post by searching, try this.

1. Log in to blogger and Go to  Design >> Page Element

2.Now click Add Gadget and select the HTML/Javascript

3.Now paste below code.

<p align="left">

<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">

<strong>NAME OF YOUR BLOG<br/></strong>

<input id="b-query" maxlength="255" name="q" size="20" type="text"/>

<input id="b-searchbtn" value="Search" type="submit"/>

</form></p>

4. Replace  YOUR BLOG URL with your blog URL
    Replace  NAME OF YOUR BLOG with your name of your blog

       Blogger trix


 

Continue reading →

How To Add Text Box For Posting Area

This post will help you to put text box.specially posting
code,can use the text box.

1. Editable Text box

                                   <textarea rows="3" cols="10">

                                            Your Text Here

                                            </textarea>

2. Read only text box
                                       

          <textarea rows="5" cols="20" name="Privacy Policy" readonly="readonly">

                                                   Your text here

                                                    </textarea>

3.Link Text box

            <textarea rows="5" cols="20" name="Link To Blog" readonly="readonly">

                                        Your HyperLink Code Here

                                                  </textarea>

Enjoy it.

Continue reading →