Change Blogger POST A COMMENT Message/Text/Style?

 

By Commenting You can Communicate and know what people would think about your article and by having good and stylish comment message design will be help your blog to be creative and cool so how its done? shall we start?

• Sign In  to Blogger Dashboard
• Go to Template -> Edit HTML
• Search (Ctrl+F) for the code marked Bold

<a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a>

•  Search the next <data:postCommentMsg/> ,that code looks like the following

 

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

• replace  <data:postCommentMsg/> with the image code
• Select the code of image you want from the following

STYLE 1

<img src="http://i.imgur.com/Qv18EaT.gif"/>

STYLE 2

 

<img src="http://i.imgur.com/hR5AoQv.jpg"/>

STYLE 3

<img src="http://i.imgur.com/542TClt.jpg"/>

 

STYLE4

<img src="http://i.imgur.com/2RqqdBN.jpg"/>

 

STYLE 5

 

 

<img src="http://i.imgur.com/h0oIkzC.jpg"/>

 

STYLE 6

<img src="http://i.imgur.com/TXqb5vI.jpg"/>

 

STYLE 7

 

<img src="http://i.imgur.com/Wu2M9sv.jpg/>

 

STYLE 8

 

<img src="http://i.imgur.com/rP7bUnN.jpg"/>

 

STYLE 9

 

<img src="http://i.imgur.com/ZcVbJRa.jpg"/>

•  SAVE TEMPLATES  ♥

Read More

Change your Bullet Style in Blogger

How to Change your Default Bullet style in blogger? would you ever like to make your content or article more stylish than ever? by simply changing the bullet style? now i can help you with that , Just follow each and every easy and simple step

•     Blogger > Layout > Edit HTML

•     Search For ]]></b:skin>

•     and just above ]]></b:skin> add the code below

.post ul {list-style:none;

}

.post ul li { 
    line-height: 1.4em; 
        background: transparent url(http://3.bp.blogspot.com/_7wsQzULWIwo/SuOQQiLH43I/AAAAAAAACH4/FBUdi0H2EEo/s400/265.gif) no-repeat scroll 0px 4px; 
    margin: 0.3em 0; 
    padding: 0 0 0.8em 20px; 
}

.post ul li:hover { 
        background: transparent url(http://4.bp.blogspot.com/_7wsQzULWIwo/SuOQQ5UHawI/AAAAAAAACIA/7tgVDjU40qc/s400/261.gif) no-repeat scroll 0px 4px;

}

 

customization

The bullet image can be aligned horizontally with the text by increasing or decreasing the value4px. You can change the value to 7px or more or less according to your blog alignment requirement.

You can also replace the bullets above with your own. To get a bullet of your own choice download up to 231 seductive bullets by subscribing to this blog.

Note:- Subscribers have already been emailed the Download copy

Once you have selected your preferred bullet simply upload it to blogger and replace the above two links (Green and Blue) with the URLs of your own bullets.

Google Type

Google Type

Read More

How to Add Google type Stylish Breadcrumbs to Blogger Blog

BreadCrumbs it is just  like a Home link followed by the category belongs and then the current location/current post.. In Blogger, the breadcrumbs are the way to realize the category of an article/post. 

And now im going to Share with you how to add Breadcrumbs navigator for blogger Just follow easy steps

• First Sign-in on blogger Dashboard
• Go to Template -> Edit HTML
• Step 1: Find (ctrl+F) the following code

<b:include data='top' name='status-message'/>

• copy the following code after it 

<b:include data='posts' name='breadcrumb'/>

• Find the following code

<b:includable id='main' var='top'>

• copy the following code above it

<b:includable id='breadcrumb' var='posts'>
                                <b:if cond='data:blog.homepageUrl == data:blog.url'>
                            <!-- No breadcrumb on home page -->
                     <b:else/>
          <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
                                        <b:loop values='data:posts' var='post'>
                                          <b:if cond='data:post.labels'>
                                            <b:loop values='data:post.labels' var='label'>
                                              <b:if cond='data:label.isLast == &quot;true&quot;'>
                                                
                                                <a expr:href='data:label.url' rel='tag'>
                                                  <data:label.name/>
                                                </a>
                                              </b:if>
                                            </b:loop>
                                            <b:else/> 
                                            Unlabelled
                                          </b:if>
                                          
                                          <span>
                                            <data:post.title/>
                                          </span>
                                        </b:loop>
                                      </span>
                                    </p>
                                    <b:else/>
                                    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                                      <!-- breadcrumb for the label archive page and search pages.. -->
                                      <p class='breadcrumbs'>
                                        <span class='post-labels post-navigation'>
                                          <a expr:href='data:blog.homepageUrl'>
                                            Home
                                          </a>
                                           Archives for 
                                          <data:blog.pageName/>
                                        </span>
                                      </p>
                                      <b:else/>
                                      <b:if cond='data:blog.pageType == &quot;index&quot;'>
                                        <p class='breadcrumbs'>
                                          <span class='post-labels post-navigation'>
                                            <b:if cond='data:blog.pageName == &quot;&quot;'>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               All posts
                                              <b:else/>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               <span>Posts filed under 
                                                 <data:blog.pageName/></span>
                                            </b:if>
                                          </span>
                                        </p>
                                      </b:if>
                                    </b:if>
                                </b:if>
                          </b:if>
        </b:includable>

• Find ]]></b:skin> and Copy the following css code above it

Google Type

.breadcrumbs a {

    -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    background-position: 100% 0;

    background-repeat: no-repeat;

    border-color: #D9D9D9;

    border-image: none;

    border-style: solid;

    border-width: 1px 0 1px 1px;

    color: #666666;

    display: block;

    float: left;

    font-size: 95%;

    padding: 7px 16px 7px 19px;

    position: relative;

    text-decoration: none;

    z-index: 1;

}

.breadcrumbs a:hover {

    border-bottom-color: #C4C4C4;

    border-top-color: #C4C4C4;

    box-shadow: 0 2px 2px #E8E8E8;

    color: #333333;

}

.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover {

    border-top-left-radius: 5px;

    z-index: 30 !important;

}.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }

Wood Type

   .breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }
    .post-navigation > a {
        background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-repeat scroll 0 0 transparent;
        border: 1px solid #C76A29;
        border-radius: 7px 7px 7px 7px;
        color: #FFFFFF;
        padding: 4px 23px;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 2px #000000;
        transition: all 0.2s ease 0s;
    }
    .post-navigation > span {
        padding-left: 14px;

    }

Blue Type

.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }.post-navigation > a {

    background: url("http://i.imgur.com/KbrSuUv.jpg") repeat scroll 0 0 transparent;

    border: 1px solid #016DB5;

    border-radius: 8px 8px 8px 8px;

    color: #FFFFFF;

    padding: 4px 26px;

    position: relative;

    text-decoration: none;

    transition: all 0.2s ease 0s;

} .post-navigation > span {
        padding-left: 14px;

    }

Read More