Contact Form for Blogger on Page for Blogger

Contact Form for Blogger on Page

 Step 1: Add Contact Form gadget in Layout

After Contact form gadget is added, please drag and drop it below Blog Posts gadget, then click Save arrangement button.

 Step 2: To hide contact form widget go to your Template, and click Edit HTML and find:

]]></b:skin>

Step 3: Insert before the ]]></b:skin> code:

.widget.ContactForm {
 display: none;
 }

 Step 4: Create new Page, then name the page "Contact" and paste code below in the html mode;

<style type="text/css">
 .widget.ContactForm {
 display: block;
 }
 .post-footer {
 display: none;
 }
 #blog-pager {
 display: none;
 }
 .blog-feeds {
 display: none;
 }
 .widget.ContactForm .title {
 display: none;
 }
 .widget.ContactForm * {
 max-width: 100%;
 }
 </style>

Step 5: Save

Create a Google Groups Web Forum for Blogger

Create a Google Groups Web Forum on Page

 Step 1: Create Google Group

 Step 2: Create new Page, then name the page "Forum" and paste in the code below in HTML mode;

Paste:

    <iframe frameborder="0" height="1000px" id="forum_embed" scrolling="no"
    src="javascript:void(0)" width="100%">
        <br />
    </iframe>
    <script type="text/javascript">
        document.getElementById("forum_embed").src =
            "https://groups.google.com/forum/embed/?place=forum/Your Google Group link" +
            "&showsearch=true&showpopout=false&parenturl=" + encodeURIComponent(window.location.href);
    </script>

Step 3: Save

How to change Older Post and New Post link text for Blogger

How to change Older Post and New Post link text

In Template click Edit HTML and edit code below;

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Next Entries</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Previous Entries</a>
      </span>

Change the position of the post link for Blogger

Change the position and size of the New and Older post link

To switch the position of the New and Older post link, add the following code before ]]> </b:skin> :

#blog-pager-older-link {
  float: left;
 }

#blog-pager-newer-link {
  float: right;
 }

To change font size:

#blog-pager {
font-weight: bold;
font: $(widget.font);
  font-size: 100%;
}

Change Comment Avatar for Blogger

Change Comment Avatar

Edit Template, and click HTML and add code below before ;

<!-- Comment Avatar -->

     <script src="http://code.jquery.com/jquery-latest.js"> <script> $("img[src='http://img1.blogblog.com/img/anon36.png']") .attr('src', 'https://lh3.googleusercontent.com/-somethinganonymous.png') .ssyby('blank') </script> <script src="http://code.jquery.com/jquery-latest.js"> <script> $("img[src='http://img2.blogblog.com/img/b36-rounded.png']") .attr('src', 'https://lh3.googleusercontent.com/--somethingyourlink.png') .ssyby('blank') </script>

Change The Font Size Tags Labels for Blogger

Change The Font Size Tags Labels for Blogger

 In Template click Edit HTML and find code ]]> then add code below:
 .post-labels{font-size:11px}

Remove Comment Link for Blogger

Remove Comment Link for Blogger

In Template click Edit HTML and find code ]]> then add code below:
.comment-link{display:none}

Removing attribution and mobile attribution from Blogger

Removing attribution from blogger

Step 1: In Template click Edit HTML and find code:

</head>

Step 2: Add code below:

<style>
#Attribution1 {
display: none;
}
</style>

Step 3: Save

Removing the attribution gadget from blogger mobile template

 Step 1: Find code below in Template, and click Edit HTML:

    <b:widget id='Attribution1' locked='true' mobile='yes' title='' type='Attribution'/>

 Step 2: Replace it with statement below:

    <b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

Step 3: Save

Align Navigation bar to center for Blogger

Align Navigation bar to center

In Template click Edit HTML and find code ]]></b:skin> then add code below:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}