The best feedback that Blogger can receive is from you people who use it day and night. Feel free to share some of your brilliant thoughts here which could be added to the new Blogger. I can’t wait to see the changes implemented. So far what blogger has done in gifting thousands of people with an online livelihood, I must say they deserve a Thumbs up!
The Stickybar or fixed Bar that we released was warmly welcomed. What we all have been searching for was a Close Button or Cancel button that would hide the bar display. May be not every visitor enjoys viewing that fixed bar at the top, so they deserve to be provided with an option to view or hide the bar. While viewing one of the Wordpress Blogs I found this button next to their updates bar. I managed somehow to fetch the script half broken. Making it work with blogger template was difficult because blogspot templates are programmed via XML and the rules of XML are really harsh when it comes to Character case. Debugging the script was difficult but Alhamdulillah the hard work paid off. You can see it Live just to the right of my Stickybar at the top. I am excited to share it with you all. Lets get to work!
Go To Blogger > Design > Edit HTML
Backup your template
Search for this
]]></b:skin>
4. Just above it paste the following CSS code,
#tb_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkm4GB8D10cxhGlXvSPAbgv3XpI3bDlbo6YjDxWOr2fY5lvfwy62qdWt8QqphBFyzr_pqeOUPXfsH7Njzt0OLSQfyH1C1mn7ZCshn_JH6YCZ3-gLxAynofRItZtgql6dR9wIIsNGoTtP0/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#tb_bar a{
text-decoration:underline;
color:#E2E504;
}
#tb_bar a:hover{
text-decoration:none;
}
#tb_bar p {margin:0; list-style:none;}
#tb_bar img {vertical-align: middle;
margin-right: 6px;}
5. Next search for </head> and paste the following Javascript code just above it
<script type='text/javascript'>
//<![CDATA[
var tb_arr = new Array();
var tb_clear = new Array();
function tbFloat(tb) {
tb_arr[tb_arr.length] = this;
var tbpointer = eval(tb_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.tbsrc = document.all? document.all[tb] : document.getElementById(tb);
this.tbsrc.height = this.tbsrc.offsetHeight;
this.tbheight = this.cmode.clientHeight;
this.tboffset = tbGetOffsetY(tb_arr[tbpointer]);
var tbbar = 'tb_clear['+tbpointer+'] = setInterval("tbFloatInit(tb_arr['+tbpointer+'])",1);';
tbbar = tbbar;
eval(tbbar);
}
function tbGetOffsetY(tb) {
var mtaTotOffset = parseInt(tb.tbsrc.offsetTop);
var parentOffset = tb.tbsrc.offsetParent;
while ( parentOffset != null ) {
tbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return tbTotOffset;
}
function tbFloatInit(tb) {
tb.pagetop = tb.cmode.scrollTop;
tb.tbsrc.style.top = tb.pagetop - tb.tboffset + "px";
}
function closeTopAds() {
document.getElementById("tb_bar").style.visibility = "hidden";
}
//]]>
</script>
6. Finally search for <body> and just below it paste the following HTML code
<div id='tb_bar'> WRITE YOUR TEXT HERE
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6hvhlQ4JayloxvvctWFa_JNoIRLtjH0jWq85PWGBYhzDGYc8LC_y1txc0WZS3qGN5esZl4khG4ifPAUkoUw8MSS6kcSj4DvqUQHGpO92T7mPjqsMFdcUS8bplYlkgZjArVuyr0ITRREA/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>
To write an announcement, update news or notice to readers, just replace the yellow highlighted text with your message. If you wish to change the Close button image then simply replace the bolded black link with your button's link.
7. Save your template
8. You are all done!
Visit your blog to see it fixed to the top just beautifully with a close button waiting to be clicked!
The close button when clicked triggers the function closeTopAds(); which then searches for function definition. The function is defined such that it sets visibility of bar to hidden. That's how the bar hides once the button is clicked and reappears only upon page refresh. Indeed a pretty neat way to make a user friendly bar.
You are most welcomed to ask for any help if needed. If you wish to share the tutorial and scripts above with your readers then kindly attach attribution to TB blog. Peace and blessings pal! :)
You must have observed how my hyperlinks change color on mouse hover. Normally on mouse hover only a single color change is seen but thanks toDynamic Drive we can now easily change the color of our links to several colors. I have modified the code a bit for simplicity. This tutorial is really simple to follow and uses a JavaScript which we will save inside Blogger so there will be no external linking at all. Let’s start now,
To add this Flashing Link effect to your blogs do the following,
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer IDif (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}function ChangeColor()
{
objActive.style.color = makeColor();
}function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;return '#' + elmR + elmG + elmB;
}//]]>
</script>
You can change the value of var rate = 20. This controls the speed with which links change color.
That’s All!
![Read-More-Button[14] (1)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_OXSjh4WZ37gT8NmdbxWCRH8XUfkPRYyxHp_4xSogeUIoR3gBn0rZUYEWEe1VRHwP4zk-O1dgg9PE81SoRLPOugA6JaAFr2gwmJLG_S-u8WvENtuStPbAJuWw2eQ7hE77kMfFc6yrWk/?imgmax=800 "Read-More-Button[14] (1)")
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;">Read More ->></div></a>
</b:if>
or something similar to this. Simply replace it with this one,
<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType == "static_page"'><br/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'><br/>
<a expr:href='data:post.url'><div style='text-align: right;'>
<img height='33px' src='IMAGE URL OF READ MORE BUTTON' width='120px'/></div>
</a>
</b:if>
</b:if>
<!--READ-MORE-STOPS-->
kindly replace IMAGE URL OF READ MORE BUTTON with Image link of your read more button.
Posts
All Comments
