Reflection Blogger Template

Milano Blogger Template

I-Blues Wordpress Themes

For Wordpress

NatMag Theme Wordpress Themes

For Wordpress

Epsilon Theme Wordperss Themes

For Wordpress

e-storage pro Wordpress Themes

For Wordpress

atriumax

For Wordpress

Show Your Comments in Side Bar or Page Element

Now you can show your comments in your side bar by using this script in your page element. You can show till 25 comments in your blog.
Well, here is the script that you can copy and paste to your Page Element. Just follow the instructions below;

1. Login to your Blogger
2. Click Layout
3. Add a New Gadget (You can put the script wherever you want)
4. Copy and Paste the script below;

<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 300px; height: 200px; text-align: left; "> <script style="text/javascript" src="http://kendhin.890m.com/comments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=40;</script><script src="http://tips-ofblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script> <div class="clear"></div></div>

5. Then Click SAVE

Manage the height and width (In GREEN Line) and make it suitable to your template design. Keep in mind to change the RED Line with your blog URL and you can also show the sum of your comments to be shown (Look at Blue Line)

Hope to hear from you that this is helpful and useful for all of you. In advance, thanks
Cheers !

Show Your Posts in Side Bar or Page Element

Now you can show your posts in your side bar by using  this script in your page element. You can show till 25 posts to show the readers your other posts that may be those can't be shown in one page.
Well, here is the script that you can copy and paste to your Page Element. Just follow the instructions below;

1. Login to your Blogger
2. Click Layout
3. Add a New Gadget (You can put the script wherever you want)
4. Copy and Paste the script below;

<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 300px; height: 200px; text-align: left; "> <script src="http://smkserian2008.googlepages.com/recent-post.js"></script> <script>var numposts = 25; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <script src="http://tips-ofblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script> <div class="clear"></div></div>

5. Then Click SAVE

Manage the height and width (In GREEN Line) and make it suitable to your template design. Keep in mind to change the RED Line with your blog URL and you can also show the sum of your posts to be shown (Look at Blue Line)

Hope to hear from you that this is helpful and useful for all of you. In advance, thanks
Cheers !

ad rotator for blogspot | blogger

 It's easy to start your own ad rotator and earn yourself with this script given below....All you have to do is to collect your ads/links to be displayed and to include in the script..... that's all you've done...


I think it's effective to show our banner for the readers randomly. It's better and not taking many spaces to attach our banner one by one in our blog. When you have put this banner-It can be more than 5 banners you can put in your blog-there will be different banners appear in your blog every time you refresh your blog.

Well, now we will share the script and you just put this script in your Page Element in your blog. It will be over in no time for there is nothing difficulty to put it. Put the script below in wherever you want;

<script language="JavaScript">
<!-- Begin
var Ads_Sum = 5;
var Cur_Time = new Date()
var second = Cur_Time.getSeconds()
var Ads_Sub = second % Ads_Sum;
Ads_Sub +=1;
if (Ads_Sub==1) {
txt="";
url="Your URL Target";
alt="Your Banner Title";
banner="Your Banner URL";
width="468";
height="60";
}
if (Ads_Sub==2) {
txt="";
url="Your URL Target";
alt="Your Banner Title";
banner="Your Banner URL";
width="468";
height="60";
}
if (Ads_Sub==3) {
txt="";
url="Your URL Target";
alt="Your Banner Title";
banner="Your Banner URL";
width="468";
height="60";
}
if (Ads_Sub==4) {
txt="";
url="Your URL Target";
alt="Your Banner Title";
banner="Your Banner URL";
width="468";
height="60";
}
if (Ads_Sub==5) {
txt="";
url="Your URL Target";
alt="Your Banner Title";
banner="Your Banner URL";
width="468";
height="60";
}
document.write('<left>');
document.write('<a href=\"' + url + '\" target=\"_top\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</left>');
// End -->
</script>

Now you can manage this script by focusing in Red line and manage your banner height and width by changing the size in RED line. You can also add your banner how many banners you want to show in your blog. I hope your work can work well.

In advance, thanks.

Add this Footer Navigation to Specify Numbers of your Blogger Posts

Some of you probably notice a navigation menu under your posts. When you want to search for the next posts, you need to click "Older post" in your navigation and this sometimes makes us take much time to read the other posts. As long as you have not changed your navigation, you will look at your navigation like the picture below;



You may be interested in changing your footer navigation as you can look at the result of my navigation below;






Alright guys, Now lets see how to change that navigation. You can apply the step below;

1. Log in to your Blogger
2. Click Layout
3. Go to Edit HTML tab
4. (Download Full Template just to back up your template)
5. Click Expand Widget Templates
6. Find the code ]]></b:skin> , Use ctrl F to find it in your template and Copy Paste the code below right above ]]></b:skin>

.showpageArea {padding: 0 2px;margin-top:2px;margin-bottom:5px; } .showpageArea a {border: 1px solid #bddbe6; color: #000000;font-weight:normal;background:#fff; padding: 3px 6px !important;font-size:11px; margin:0px 2px; text-decoration: none;-moz-border-radius:5px; } .showpageArea a:hover {border: 1px solid #bddbe6; color: #000000; background: #bddbe6;} .showpageNum a {border: 1px solid #bddbe6; color: #000000;font-weight:normal; font-size:11px; padding: 3px 6px !important;margin:0px 2px; text-decoration: none;-moz-border-radius:5px;} .showpageNum a:hover {border: 1px solid #bddbe6; color: #000000;background: #bddbe6; } .showpagePoint {font-size:11px;-moz-border-radius:5px; padding: 2px 5px 2px 5px;margin: 2px;font-weight: bold; border: 1px solid #0066cc; color: #fff; background: #0066cc;} .showpage{font-size:11px;-moz-border-radius:5px;} .showpage a:hover {font-size:11px; border: 1px solid #0066cc; color: #fff;background-color: #0066cc;} .showpageNum a:link,.showpage a:link {font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none;border: 1px solid #bddbe6; color: #000;background-color: #FFFFFF;} .showpageNum a:hover {font-size:11px; border: 1px solid #bddbe6;color: #000000; background-color: #bddbe6;font-weight:normal;}

7. After that, find this code </b:section> and Copy Paste the script right under </b:section>

&lt;script type=&quot;text/javascript&quot;&gt; function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;; var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1; var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;; thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; var pageCount=3; var displayPageNum=5; var firstPageWord = &#39;First&#39;; var endPageWord = &#39;Last&#39;; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t; if(isLablePage){ if(title!=&#39;&#39;){ if(post.category){ for(var c=0, post_category; post_category = post.category[c]; c++) { if(encodeURIComponent(post_category.term)==thisLable){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount; } } } }//end if(post.category){ itemCount++; } }else{ if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount; } } itemCount++; } } for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; } }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; } fFlag++; } if(p==(thisNum-1)){ html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;; }else{ if(p==0){ if(isLablePage){ html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;; }else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;; } }else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;; } } if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; } }//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ }//end for(var p =0;p&lt; htmlMap.length;p++){ if(thisNum&gt;1){ if(!isLablePage){ html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }else{ html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; } } html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;; } if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; if(isPage || isFirstPage || isLablePage){ var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; } for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; } if(blogPager){ blogPager.innerHTML = html; } } } &lt;/script&gt; &lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

8. Save your TEMPLATE and see the result.

Sure you will find </b:section> more than one so that you need to test your result and if the navigation doesn't work, you have to put the script under another sign of </b:section>. In most cases, it will the one that lies near below the Blog 1 or footer comment section. So its up to you to find out the exact location and you can do some trial and error method in this case .

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

Hope it can work well in your Blogger, In advance, thanks :)
BDV-914029-BDV

Making Related Posts in your blog

Related Posts are effective to show to your reader because your reader can read your other posts that may not appear on your active page. Nothing is difficult to make this work in your blog. You can look at the example of related posts below;



Now, Tips of blog is going to give you the step how to put it in your blog. Here's the way;

1. Log in to your Blogger
2. Click Layout
3. Go to Edit HTML tab
4. (Download Full Template just to back up your template)
5. Click Expand Widget Templates
6. Find the code <data:post.body/>, Use ctrl F to find it in your template, You will look at the code like below;
   

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>



7. Copy and Paste the script below right under <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>



8. Click SAVE TEMPLATE
9. Look at your result

Thanks in advance.

Insert your own ICON to URL address bar

Some of us prefer using an icon which is created by our own design. You can design your own icon and insert it easily to your URL address bar.

When we created a blog, the icon would directly appear with standard icon from blogger like and here we can change it with our own icon. The Tips of Blog is going to show you the step how to change that icon for it is quite easy. It will appear in your URL address bar. Take a look of this icon sample which has been inserted by a new icon.



Here is the way to change it;

1. Login to your Blog
2. Go to Layout Menu Bar
3. Then Go to Edit HTML
4. Find out the code ]]></b:skin>
5. Copy and Paste the code below right under ]]></b:skin>
   

<link href='Your icon URL' rel='SHORTCUT ICON'/>

Do not forget to change the RED line with your own icon which has been uploaded to your server.

Is this helpful? Easy to apply? hehe, please leave your comment.
In advance, thanks, Cheers!

Want to use this template? Download it for FREE

At first, I don't have any plan to share this template because I think it can be taken for free from any blog. In spite of getting this for free, I am intended to share this template for one of my friends, Kesuksesan Hidup, asked this template to be shared.

I will be very glad to share this template where it has been edited. You can change any area of this template.



If you are interested to use this kinda template, You can directly download it for free by clicking the button below.

Put TAB View in your page element blog

Here is the free widget for your blog. Show your link in this Tab View. I posted before about putting D-Tree Menu where it doesn't need to add or put script in our Blog HTML. This widget is the same way to put in our blog.

We just need to copy the code and paste it in our blog page element. Take a look the example of the Tab View below;



Alright guyz, do not take too much time to think how to put this widget, hehe, Now, Copy the code below and put it in your blog page element. Put anywhere according to your design style. Here's the code;

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #77d0ee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>


<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 370px;" class="TTs"> <a>TAB 1</a> <a>TAB 2</a> <a>TAB 3</a></div>

<div style="width: 335px; height: 280px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
Your TAB 1 Content
</div>
</div>

<div class="Halaman">
<div class="Alas">
Your TAB 2 Content
</div>
</div>


<div class="Halaman">
<div class="Alas">
Your TAB 3 Content
</div>
</div>
</div>

</div></form>

<script style="text/javascript" src="http://meichelina.googlepages.com/newscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script><br/>

Then you have to change the RED color with your own Link, and you can also change the width and height (Orange Color) of this Tab View.

Hope this is helpful for all of you, Thanks in advance !

Creating D-Tree Menu in your blog Page Element

Actually, Creating D-Tree Menu is an alternative way to your blog but I think this is very important to show our blog content to the readers. I try to look for the script which provides this kind of tool and there are some ways how to put it in our blog.

In this case, Tips of blog will show you how to create it for your blog without thinking about how to put it in your blog HTML like above of <head> or </body> and so on. That's very easy to make D-Tree Menu because you just copy and paste the script in your blog Page Element.

Before I give the way, this is the example of D-tree Menu that will appear in your blog.





Well, Here is the way and the script of this D-Tree Menu. Put the Script below on your Page Element. You can put it anywhere as long as you will :)

<a href="javascript: d.openAll();">Open all</a> | <a href="javascript: d.closeAll();">Close all</a><br/>
<!-- start dtree -->
<div style="text-align: left; padding-left: 6px;">
<script src="http://www.geocities.com/once179/sitemap/dtree.js" type="text/javascript"> </script>
<div style="padding-top: 6px; width: 180px;" class="dtree">
<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Title',
'Your URL','','','', '');

//menu
d.add(10, 0,'Menu 1', '','','','', '');
d.add(11, 10,'Sub Menu 1',
'Sub Menu 1 URL','','','', '');
d.add(12, 10,'Sub Menu 1',
'Sub Menu 1 URL','','','', '');

d.add(20, 0,'Menu 2', '','','','', '');
d.add(21, 20,'Sub Menu 2',
'Sub Menu 2 URL','','','', '');
d.add(22, 20,'Sub Menu 2',
'Sub Menu 2 URL','','','', '');

d.add(30, 0,'Menu 3', '','','','', '');
d.add(31, 30,'Sub Menu 3',
'Sub Menu 3 URL','','','', '');
d.add(32, 30,'Sub Menu 3',
'Sub Menu 3 URL','','','', '');




d.add(90, 0,'Your Title 1',
'Your Title URL 1','','','', '');
d.add(91, 0,'Your Title 2',
'Your Title URL 2','','','', '');
d.add(93, 0,'Your Title 3',
'Your Title URL 3','','','', '');

document.write(d);

//-->
</script>

</div>
</div>
<!-- end dtree --></td>

Copy Paste this Code and You need to change the Title and URL in Red Color and You can also add the Menu as well.

Good Luck and Enjoy !

A Useful Stript Add for your blog

I am interested to use this kind of Stript Ads (Stript Ads Sample) for it can be effective to publish things in our blog. We can show our Ads or something important to publish by using this tool. Tips of Blog will show how to add this tool easily.

I thank to Anshuldudeja blog because I got this tool from that blog. I try to show this tool at my other blog, The Biography of History Makers, and it work well.

Alright, Here is some steps to put this stript on your blog.

1. Login into your blogger with your ID
2. Click Layout
3. Click Edit HTML
4. Click Download Full Template to back up your template.
5. Copy and Paste the following CSS code right above ]]><b:skin>
   

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cg4hGB9AcMRmo-eNHn9VLcNXs15dC8BFJjWzNghm3lHNhguYdNR4gXRaslERBga7XwCnD4uPjTdsLx30s9qQJBd2hHeBzi5BPyVAhrYe3hhEO4zX3n3aixUQWzGf3V_IWzhosUoajSc/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

Then find the code </head> in your template and Copy Paste the code below right above code </head>

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>

And the last, Find the code <body> in your template and Copy Paste the following code right under <body>

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://tips-ofblog.blogspot.com' target='_blank'>Tips of Blog</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;tips-ofblog.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAPy_M0HPf1Zmuiq6M11sOkqGleJMKR2E95oPjfXV0edenLMNFzFsopl4eQcfvakfBu5ZDVb0aczrf9lynpztrZh_trfezfAWuvJI-yrrn-prmTffyfs-w5lR1apPz7PxDPfVRQZc6nA/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Change the lines in Red above codes with yours rss feeds and url and text you want to show.
After that, Click Save template and see the result.

Good Luck !

Akhirnya Siap Launching Blog Baru

Hello Dear, hehe, beberapa blog yang saya punya sebenarnya sudah menggunakan berbagai tool, widget dll deh tapi saya berpikir jika saya tidak punya cara membuatnya, saya pasti akan lupa sekalipun udah terpasang. Dengan jalan ini, saya berpikir bahwa saya akan membuat satu blog lagi yaitu Tips of Blog agar saya sendiri memiliki simpanan cara-cara membuat semua yang pernah saya masukkan ke blog saya yang lain.

Saya bersyukur karena dalam waktu satu malam blog Tips of Blog bisa terselesaikan dengan apa adanya. Saya berusaha untuk terus up to date agar isinya bisa membantu para sobat juga. Mungkin atau hampir semua isi blog ini sebenarnya sudah ada pada blog sobat yang lain tapi juga tidak salah bagi kita jika kita memiliki simpanan tersendiri karena cara kita menyampaikan juga akan berbeda dengan cara para sobat yang lain menyampaikannya.

Disamping ini sebenernya, saya juga ingin membagikan buat para sobat terutama yang baru dalam dunia blog. Berbagi apa yang sudah saya aplikasikan merupakan salah satu tujuan saya membuat blog Tips of Blog ini.

Saya berharap agar para blogger khususnya di Indonesia tetap menjaga keakraban di dunia blog. Juga saya mengharapkan masukan dari para sobat tentang isi blog ini. Sekian dulu perkenalan dari saya, Trim's

Sukses selalu !