Image of payment confirmation of Copyright.in

Payment Confirmation page

Pleas Click on the image to enlarge

How to Implementing adsense in mobile version of blogger

This video will give the complete instruction of implementing adsense in mobile version of blogger. For example if my blog url is like this http://letter.essssay.com then its mobile version url will be like this  http://letter.essssay.com?m=1.
Now you can see the video or you can also read this step by step guide.
Step 1:

How to Customize Blog Pager ( Newer Post Home Older Post )

To change the pager name we can do the following steps.

Step1:

Click on Template> HTML > Jump to widget, blog1

Then expand this line.
<b:includable id='nextprev'>
As shown in the image.

Step 2:

Do This.
Ctrl+F for <data:newerPageTitle/>
OR watch this line <data:newerPageTitle/> in the image as given below.and replace it with own name e.g. Newer Essay etc

Step3:

Similarly do this.
Ctrl+F for <data:olderPageTitle/>
and replace this by own text e.g. Older Essay etc.
Result of this edit: See the image given below ; which is obtained after edit.

Quality website for Free Tutorial | Free Education | Free | Learning

I found this site is giving free tutorial at no cost. In this post I will write the name of the top websites ; which are delivering free learning at no cost. It is also my objective to cost nothing for education and learning. There are many people and students who have no sufficient amount of money to join big renowned university or colleges. I think they have also right to learn. I recommend you to bookmark this page , because whenever I will found a quality website ; which are charging nothing , Then I will sure write its name and details here. My other subdomains like englishgrammar.essssay.com and math.essssay.com and this domain also giving free learning course at no cost. Mind me I will never charge for anything. I have also youtube channel name youtube.com/ccukt ; where you will find many education videos. Few video may not come up to your expectation. I so happened then write to (as feedback) me through my contact form given at www.essssay.com (http://www.essssay.com/p/contact-me.html) . 

W3cSchool (http://www.w3schools.com):  This is the place which gives you mastery of computer language learning. Its main quality is that it provide a nice platform of experimenting the code for each topic and subtopic. I love this website. 

TheNewBoston(http://thenewboston.org/tutorials.php): If anybody want experience live class test for learning computer programming , then this website is the heaven. Bucky Roberts is one of the top gurus of making nice videos on computer programming. I learned Javascript from his tutorials.  

DigitalInsipiration(http://www.labnol.org/): Digital Insipiration is one place where you can know many quality technology related articles  and how to blog technique and many more . Actually Amit Agrawal is a master piece who established and gave new height to the Indian blogging . His very popular project as far as I know is Google Adsense Sandbox. I love it.

Important: My friends the quality website addition will be continued. If you want to ask anything then feel free to comment below. If you also know any quality website then write the name of that website in the comment box given below.

How to make external CSS File for Blogger Functioning properly

If external css file e.g. mystyle.css is not functioning properly then the import it at two places in the blogger HTML template. One before </head> and another before</b:skin>. Here I am showing how to do it.

Before starting first backup your template.

Step1: Go to Template>HTML> then click anywhere inside the template code.

Then do this search.

CTRL+</head>

and place the external css linking file (e.g. <link href='https://itg-js-and-css-akb.googlecode.com/svn/trunk/essssaystyle.css' rel='stylesheet' type='text/css'/>  as shown in this image.

The yellow highlighted portion is your style sheet which has been uploaded on any css serving code site. I have used here google code with Tortoise subversion software. For details of creating and uploading css file to google code . Search in google, you will find a lot of website explaining this.

CLICK THE IMAGE TO WATCH ENLARGE VIEW.

Now put your external stylesheet link as shown in the above figure just above the </head> tag.
You will find that many css codes are working now.
But sometimes few does not work. 
Then follow step 2.
Step 2 :
Do this- ctrl+</b:skin>.
you can notice this in the image given below:

CLICK THE IMAGE TO WATCH ENLARGE VIEW.

And as you can see the yellow highlighted code in the above figure. Just again paste the same linking code above </b:skin> as shown in the above figure.

You are done! haa..haaa! enjoy. and ask if you have any problem by commenting below.

SEO Important Website

website optimiser (beta) adword : google=http://services.google.com/websiteoptimizer/
----------
Free website url : submission=http://services.google.com/websiteoptimizer/
-----------
seo by Google=http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf
-----------
My site google apps=https://www.google.com/a/essssay.com/ServiceLogin?service=CPanel&passive=1209600&continue=https://www.google.com/a/cpanel/essssay.com/Dashboard&followup=https://www.google.com/a/cpanel/essssay.com/Dashboard
---------------
Meta tag analyser=http://www.submitexpress.com/analyzer/
----------
submit site to bing=https://ssl.bing.com/webmaster/toolbox/SubmitSitePage
-------------
submit site to yahoo=http://siteexplorer.search.yahoo.com/submit
-----------------
Google backlink checker=http://www.searchenginegenie.com/google-back-link-checking.html
-------------
nofollow link checket=http://seotools.bloggertricks.com/free/nofollow-link-checker-finder-tool/
----------------
Bing webmaster tools=http://www.bing.com/toolbox/webmaster/
----------
Keywordspy=http://www.keywordspy.com/research/search.aspx?q=iipmplacements.com&tab=domain-overview&market=in#/tab=domain-ads
-----------------
SEO google=http://googlewebmastercentral.blogspot.in/2012/03/five-common-seo-mistakes-and-six-good.html
-------------
Image publishing guidline by google=https://support.google.com/webmasters/bin/answer.py?hl=en&answer=114016
-------------------
GOOGLE robot learning=https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag
----------------------
Make the web faster google=https://developers.google.com/speed/
--------------
Site not doing well in google se=https://support.google.com/webmasters/bin/answer.py?hl=en&answer=34444#1
-----------------
Backlink checker=http://www.backlinkwatch.com/#
---------------
SEO Vigyan=http://seovigyan.com/
------------------

Android Apps developing links and guide

http://developer.android.com/training/basics/firstapp/creating-project.html
http://developer.android.com/sdk/index.html#download
http://developer.android.com/index.html

Auto Read More Snippet at Home Page with Image Thumbnail

Very simple thing needs to do it. I suppose that reader is familiar with blogger's HTML code etc.
Do this:
Step 1: Go to template>HTML
Step 2: Do Ctrl+F for </head>
Step 3: Put this code below  </head>
------

<!--  Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 440; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- AKB  Auto read more script End -->

------
Step 4: Do Ctrl+F for <data:post.body/>
Step 5: Replace above code with this code:
---

<!-- you can put adsense code here to appear after title of the post-->
<!-- AKB Auto read more WIDGET Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<div class='ex'>
<!--AKB ADSENSE AFTER POST BODY START-->
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;ca-pub-7725836048981907&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* essay right side bar */
google_ad_slot = &quot;2882516136&quot;;
google_ad_width = 300;
google_ad_height = 250;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;
<!--AKB ADSENSE AFTER POST BODY END-->
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='more' style='float:right;padding-top:2px;'><a expr:href='data:post.url'> Read More </a></span>
</b:if>
</b:if>
<!-- AKB  Auto read more WIDGET End -->

The yellow portion is optional  for putting Adsense Code to appear after every post. Replace the Publisher ID of the Adsense code by your publisher ID.
---
Step 6: Save Template.
Step 7: You are done.
-----
To give more better look you can add CSS above </head> for better look of Auto Read more .
e.g.

<!--AKB AUTO READ MORE STYLE START-->

<style type='text/css'>

.more{

border: 5px solid #8632ff;

padding: 4px;

background: #f4f4f4;}

</style>

<!--AKB AUTO READ MORE STYLE END-->

Very Important Margin Padding Edit for Blogger

How to reduce margin of my right side sidebar of blogger by css

This will reduce the gap between right border and right inner side, margin.

#sidebar-right-1 {

margin-right:-10px;

}

This will reduce the gap between left border and left inner side, margin.[ .column-right-inner] this code will reduce the gap between right side sidebar and blog post left side

#sidebar-left-1 {

margin-right:-20px;

}

.column-right-inner {

margin-left:-25px;

}

How to reduce margin of my left side sidebar of blogger by css

#sidebar-left-1 {

margin-left:-10px;

}

How to hide navbar of blogger by css

#navbar-iframe {

   display: none !important;

}

How to control sidebar widget of blogger|Border|Margin|Padding|Background

.sidebar .widget {

background:#ffffff;

 border: 1px solid #999999;

 margin: 0px 0px 0.5em 0px;

 padding:0px 0px 0px 3px;

border:2px solid #E6E6E6;

}

How to make style of text of blogger | Hover | control font style

h4:hover{

font-size:2em;

background-color:red;

}

All this posted and published in the blog

Important HTML and Java Script website

http://www.w3schools.com
http://www.javascripttoolbox.com/

http://www.htmlgoodies.com/beyond/javascript/article.php/3881826/JavaScript-Tutorial-Adding-Rotating-Images-to-Your-Web-Site.htm

http://www.javavideotutes.com/lessons/play/1/
http://www.menucool.com/jquery-slider

http://www.menucool.com/drop-down-menu

http://www.javascriptfreecode.com/
http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/
http://www.css3.info/preview/css3-transitions/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
http://htmledit.squarefree.com/
http://0to255.com/facade

http://css-tricks.com/
http://css3.bradshawenterprises.com/transitions/
http://www.w3schools.com/html/html_links.asp
http://code.blogger.com/2011/11/introducing-custom-mobile-templates.html

Messge box: http://www.cssnewbie.com/message-box-javascript-css/#.Ub_QKudpNKJ

My all Chrome Bookmarks of Blogger Example

These bolgger tutorial sites are very imprtant.

http://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html
http://bloggerstop.net/2010/02/add-forum-to-your-bloggerblogspot-blog.html
http://www.eblogtemplates.com/blogger-ad-code-converter/
http://www.bloggertipsandtricks.com/2010/02/create-sub-domain-with-custom-domain.html#subdomain
http://www.smartgb.com/features.php
http://tips-for-new-bloggers.blogspot.in/2007/02/add-page-element-to-blogger-header-and.html
http://kluwanone.blogspot.in/2010/01/how-to-redirect-blogger-post-to-another.html
http://www.betatemplates.com/2010/06/add-your-own-image-blog-background-in.html
http://blogging.nitecruzr.net/2008/10/creating-horizontal-index-for-your-blog.html
http://www.wufoo.com/2011/02/03/eventregistration-form/
http://www.phpform.org/
http://www.myoutsourcedbrain.com/2009/11/blogger-archive-pages-with-only-post.html
http://jquerytools.org/forum/tools/35
http://code.blogger.com/2012/01/customising-threaded-comments.html

http://www.intechgrity.com/freely-host-css-js-other-static-files/#

http://www.bloggertipandtrick.net/host-javascript-files-on-google/

http://www.intechgrity.com/freely-host-css-js-other-static-files/#
http://helplogger.blogspot.in/2012/07/how-to-make-blogger-posts-have-calendar.html

http://www.bloggingehow.com/2011/06/how-to-create-three-column-in-blogger.html#

http://www.bloggerplugins.org/2009/06/selective-display-of-blogger-widgets-on.html

http://www.cssnewbie.com/message-box-javascript-css/#.UWJBS6J-YqR
--------------------------------------------------------------------

Bloggermint All-
http://obrolangue.blogspot.in/2011/05/how-to-setup-google-dfp-on-your-site.html
http://www.bloggermint.com/2010/05/how-to-add-facebook-comment-box-on-blogger-blogs/
http://www.bloggermint.com/2010/05/how-to-add-facebook-like-fan-box-to-blogger/
http://www.bloggermint.com/category/twitter/
-----------------------------------------------------
BloggerSentral all-
http://www.bloggersentral.com/2010/06/add-search-box-in-navigation-bar.html
http://www.bloggersentral.com/2009/12/list-post-titles-in-alphabetical-order.html
http://www.bloggersentral.com/2009/09/creating-static-pages-in-blogger.html#noshow
http://www.bloggersentral.com/2010/08/targeting-specific-pages-with.html
http://www.bloggersentral.com/2010/02/display-widget-on-specific-pages-in.html
http://www.bloggersentral.com/2011/07/blocking-archives-from-search-engines.html
http://www.bloggersentral.com/2009/12/list-post-titles-in-alphabetical-order.html
http://www.bloggersentral.com/2010/06/add-search-box-in-navigation-bar.html
------------------------------------------------------------------------
CSS Newbie
http://www.cssnewbie.com/message-box-javascript-css/#.Ub_QKudpNKJ

How to increas Margin gap above Header at the Top

This post give an idea to increase the margin ( gap ) above header. There are two header elements Header1 and Header2 because the header is broken into two column in this case . But there may be  only one header  element in other cases.
The steps are.
Go to Template>Html>ctrl+Find (Header1). Copy this widget foe its exact name.
Now go to Template>Advance>CSS.
Add this CSS


#Header1 {
margin-top:40px;
}

Now margin can be edited from 40px to any value like 20px etc. See it can also be added in Edit Html code above </head> section.

See the effect on the page of wwww.essssay.com

How to hide Left Sidebar and css Based Box or widgets to make Home page look different

Read all carefully and apply with cool mind. Before doing any thing on your HTML code ,

you must download the template for any accidental loss.

Go to template>expand widget>

Then Search this code

<b:if cond='data:blog.pageType == "index"'>

or

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Sometimes first code in which we see "index" word works for few blog homepage, but sometimes the .homepagUrl work for homepage.It is to be choosen as where it is needed for working of the code.

The code will look like this.

<b:if cond='data:blog.pageType == "index"'>

PUT THE YELLO HIGHLIGHTED CODE HERE

<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

<style>
.blog-pager, .footer, .post-footer, .feed-links, .ex,
#sidebar-left-1 { display:none !important;}.main-inner .columns
{width: 70%;padding-left:0 !important;padding-right:0 !important;}
</style>

You are done.

----- For hiding the widget or css style id or class on post page we do the following.

Go to template>expand widget>

Search this code by doing this Ctrl+F

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

or

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

The code will look like this. There may be more "item" code. Choose first one and do just like this.

<b:if cond='data:blog.pageType == "item"'></code>

PUT THE YELLO HIGHLIGHTED CODE HERE

<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

If you don't want to adjust the width of main container , then remove this code from the total yellow set code.

.main-inner .columns {width: 70%;padding-left:0 !important;padding-right:0 !important;}

And left the rest yellow code as it is. In the highlighted yellow code any id or class can be edited as per user choice. You are done.

----- Here I am giving most important trick. If any of the above hack is not working then add this set of code near the code for which you want to do the styling.

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

PUT THE YELLO HIGHLIGHTED CODE HERE

</b:if>

This is the very important one. Read all carefully and apply with cool mind. Before doing any thing on your HTML code , you must download the template for any accidental loss.

How to Insert conditional Element on a Particular page type | VERY IMPORTANT FOR BLOGGER

Must read the bottom part of this post. These are very important for a blogger.
First we have to find this code:  <b:if cond='data:blog.url == data:blog.homepageUrl'>

TEMPLATE>BACK UP TEMPLATE>HTML>CLICK EXPAND WIDGET
Then do this.
CTRL+F
 Paste this in find text box of the browser .
<b:if cond='data:blog.url == data:blog.homepageUrl'>

The total code is look like this.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
PUT THE CONDITION HERE
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>


THIS IS THE CONDITION. And add  <b:else/>  at the end of the condition.

<style>
.blog-pager, .footer, .post-footer, .feed-links, .ex, #Gadget1, #Stats1, #HTML8, #sidebar-left-1, #Followers1 { display:none !important;}.main-inner .columns {width: 60%;padding-left:0 !important;padding-right:0 !important;}
</style>
  <b:else/>
------------------
Different conditional code outer enclosures:
General enclosure for conditional style:
<b:if cond='PUT_CONDITION_HERE'>
</b:if>
--------------
<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>
---
<b:if cond='data:blog.pageType == "item"'>
</b:if>
----
TOTAL WIDGET NAME OF PAGE TYPE IN BLOGGER FOR CONDITIONAL CODING:

<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:blog.pageType == "static_page"'>

<b:if cond='data:blog.pageType == "archive"'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:blog.url == "PUT_URL_HERE"'>

<b:if cond='data:blog.url == data:post.url'>

<b:if cond='data:blog.searchLabel'>

<b:if cond='data:post.isFirstPost'>

WE HAVE TO ATTACH </b:if> AS ENCLOSURE FOR ALL ABOVE WIDGET ADDITION.

These code can be also added nearest to its sister location. 

-------

For details see these pages:
http://www.spiceupyourblog.com/2010/02/blogger-gadgets-home-page-only-post.html
http://www.bloggersentral.com/2010/02/display-widget-on-specific-pages-in.html

How to Disable Selection and Copy Paste Only Blog Post

This is very important code for disabling selection and copy  of the blog post.
Put this code above </head> to deactivate copy paste of blog post only. 


.post-body {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;         
}

This code can also be put in extenral css file eg mystyle.css. And this is to imported into head section of the source code ie above </head>. The imported code may be like this.
<link href='https://itg-js-and-css-akb.googlecode.com/svn/trunk/mystyle.css' rel='stylesheet' type='text/css'/>

Blogger Post Title font and Comment text Font color and fort

This post give an idea of controlling title post color and comment headlines color and font.

The code is:


h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .05em 0 0;
  COLOR:#000000;
}

In this css the color and font of post title and comment's text (like:"NO COMMENTS" and "POST COMMENTS" can be edited.

go to template>HTML >ctrl+F>h3.post-title, .comments h4 

Here color in this part  COLOR:#000000;  can be changed to any value from #000000 to say #8632ff etc.
The font can be changed by changing the value h3 in his part h3.post-title  to other value like h1; which is bigger than h3 text size.

I think expert can understand what i want to say.

Top Message for Blogger

Go to Template >EDIT HTML >Ctrl+F for </body>

Paste this code just above </body>

<a class="akb-update" href="http://www.essssay.com/p/submit-essay-topics.html" target="_blank" title="Post Your Essay Topics. It will be written for you at earliest!">You are welcome here! Now you can post your Essay Topic! Click</a>

Go to Template>customize>advance>css

Paste this code:

.akb-update {

text-decoration: none !important;

position: fixed;

right:0px;

left:0px;

top: 0px;

display: block;

background-color: #8632FF !important;

text-align: center !important;

padding: 2px !important;

z-index: 9999 !important;

color: white !important;

font-size: 15px;

font-family: 'verdana' !important;

border-bottom: 5px solid rgba(255, 255, 255, 0.69);

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

opacity: 0.8;

overflow: hidden;

}

.akb-update:hover {

opacity: 1.0;

}

ALL CSS

<!--Self css for box code start-->
<style type='text/css'>
div.ex
{
border:0px solid black;
padding:0px,0px,0px,0px;
margin:0px,0px,0px,0px;
width:329px;

}
</style>

<!--Self css for box code end-->
<style type='text/css'>
div.sf-text {
float: left;
width: 110%;
background: #999;
padding: 0px 0 15px 0;
margin:0 0 0px -50px;
}
</style>

<!--Self css for para text start-->
<style type='text/css'>
#para1
{
border:1px solid #D8D8D8;
padding-top:6px;
padding-right:6px;
padding-bottom:6px;
padding-left:6px;
text-align:justify;
}
</style>

<style type='text/css'>
div.hdl1
{
margin-left:0px;
text-align:left;
color:black;
background:#E6E6E6;
padding: 0,0,2em,0;
}
</style>
<!--Self css for para text end-->
<!--Self css forABOUTBOX code start-->
<style type='text/css'>
div.aboutbox
{
width:1000px;
padding:10px;
border:2px solid green;
color:black;
background:#ECF8E0;
margin:0px;
}
</style>
<!--Self css for box2 code end-->


<!--AKB css for SUBMIT PAGE BOX START-->
<style>
div.submitpage
{
width:1000px;
padding:10px;
border:5px solid green;
margin:0px;
}
</style>
<!--AKB css for SUBMIT PAGE BOX END-->

.tabs-inner .PageList li a {padding-top:3px; padding-bottom:0px;}
h2:hover{
background-color:green;
color:#FFFFFF;
}

.post-body {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;        
}
<!--AKB CSS FOR TOP TABS PAGE LIST START-->
#PageList1{
margin-left:-12px;
width:1004px;
}
<!--AKB CSS FOR TOP TABS PAGE LIST END-->

<!--AKB CSS FOR TOP MESSAGE START-->
.stx-update {
text-decoration: none !important;
position: fixed;
right:0px;
left:0px;
top: 0px;
display: block;
background-color: #8632FF !important;
text-align: center !important;
padding: 2px !important;
z-index: 9999 !important;
color: white !important;
font-size: 15px;
font-family: 'verdana' !important;
border-bottom: 5px solid rgba(255, 255, 255, 0.69);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
opacity: 0.8;
overflow: hidden;
}

.stx-update:hover {
opacity: 1.0;
}
<!--AKB CSS FOR TOP MESSAGE END-->