Wonderful-Tricks

In the previous post, Wonderful-Tricks has discussed about how to create the widget of News & Update, but many readers wonder how to install the widget of News & Update under post? hmmmm… I got an idea to discuss.

To install the widget of News & Update under post, in principle, it has the same way when we install it on sidebar, but the difference is we have to do it through Edit HTML and you cannot do it through Page Element, and the code should be parsed before.

You should note that, this Widget will be better installed at the blogs that has used the read more function as the trick that Wonderful-Tricks has posted at Make a Post Summary (Read more Function). Or else, the widget of News & Update will be directly displayed in front page so that it will reduce the beauty of your blog.

• Login to blogger with your ID
  
• Click Layout
  
• Click Edit HTML.
  
• Click Download Full Template
  
• Please backup you template first (important)
  
• Check the small box beside the words Expand Widget Templates.
  
  
• Find this code ]]></b:skin> , copy and paste the code below exactly above the code ]]></b:skin>
  
#kotak {
background: #fff;
width: 200px;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 10px 0px 0px 0px;
padding: 3px;
border-top: 1px solid #666666;
border-right: 1px solid #ddd;
border-left: 1px solid #666666;
border-bottom: 1px solid #ddd;
display: inline;
}
#tombol {
background: #2B74B4;
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0px 0px 0px 5px;
padding: 2px;
border: 1px solid #234B69;
font-weight: bold;
}
#email{
background: #FFFFFF;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px;
padding: 4px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
#submit {
background: #2B74B4;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 4px;
margin: 0px;
border: 1px solid #234B69;
}

  
• Scroll down and find the code as below (remember that your blog has read more function as I explain)
  
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p> </b:if>

  
• Remove the above code, and use the code below to replace it (change the feedburner ID with yours) :
  
<b:if cond='data:blog.pageType == "item"'><style>.fullpost{display:inline;}</style><p><data:post.body/><div style='padding:10px;margin:10px 0px 10px 0px;background:#eee;text-align:left;border:1px solid #ddd'> <p>Insert your email address to receive updates on my Blogspot tutorial, Free Template and Site Info.</p> &lt;form id=&quot;subscribe&quot; action=&quot;http://www.feedburner.com/fb/a/emailverify&quot; target=&quot;popupwindow&quot; method=&quot;post&quot; onsubmit=&quot;window.open(&#39;http://www.feedburner.com&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true&quot;&gt;&lt;input id=&quot;kotak&quot; onfocus=&quot;if (this.value == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}&quot; value=&quot;Enter your email address...&quot; name=&quot;email&quot; onblur=&quot;if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}&quot; type=&quot;text&quot;/&gt;&lt;input value=&quot;http://feeds.feedburner.com/~e?ffid=2078972&quot; name=&quot;url&quot; type=&quot;hidden&quot;/&gt;&lt;input value=&quot;Subcribe To My Blog&quot; name=&quot;title&quot; type=&quot;hidden&quot;/&gt;&lt;input id=&quot;tombol&quot; value=&quot;Subcribe&quot; type=&quot;submit&quot;/&gt;&lt;/form&gt; </div></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/></p><a expr:href='data:post.url'><strong> Read more...</strong></a></b:if>

  
• Click SAVE TEMPLATE
  
• Done