எவ்வாறு நகரக்கூடிய Subscribe Now Bar ஐ நிறுவுவது

Hello Friends,
இன்றைய பதிவில் எவ்வாறு நகரக்கூடிய Subscribe Now Bar ஐ நிறுவுவது என்று பார்ப்போம். இதைப்பற்றி அதிக விளக்கம் தர முடியாது காரணம் இதன் code கள் மிகவும் நீளமானவை, இந்த பதிவைப்பற்றி சுருக்கமாக கூறப்போனால் Subscribe Now Bar யின் மூலம் உங்களுடைய தளத்திற்கு
நிறைய வாசகர்கள் வரக்கூடிய சந்தர்ப்பங்கள் உள்ளது.

இப்போது பதிவிற்கு செல்வோம்.
Go To

=> click Template=> Backup your template=> Click Edit HTML=> Click Proceed=> இப்போது ctrl+F ஐ அழுத்தி கீழே உள்ள code ஐ கண்டுபிடித்து அதற்கு மேல் பின்வரும் CSS code களை இணைக்கவும்.

]]></b:skin>

/*----- MBL Scrolling Subscribe Now Bar-----*/

#bobar {
z-index: 100000;
}

.barimage {
height: 91px;
padding: 0px 0px 0px 3px;
float: left;
background: transparent;
line-height: 1em;
}
.bartext {
height: 50px;
padding: 0px 0px 0px 5px;
float: left;
text-align: left;
text-transform: none;
background: transparent;
}
.bartext .bartitle {
margin: 8px 0px 0px -10px;
font-size: 42px;
letter-spacing: -1px;
font-weight: bold;
font-family: 'Share';
color: #ffffff;
line-height: 28px;
}
.bartext .barsubtitle {
font-size: 24px;
font-family: 'Share';
font-weight: normal;
letter-spacing: -2px;
padding: 0px 0px 0px 0px;
color: #ffffff;
line-height: 12px;
word-spacing: 3px;
margin: -5px 0px 0px 0px;
}
.bartext .fineprint {
color: #ffffff;
padding: 0px;
line-height: 10px;
font-size: 10px;
margin: 0px 0px 0px 1px;
font-family: Arial;
font-weight: normal;
}
#bobar #bar_topborder {
width: 100%;
border-top: 3px solid black;
padding: 0px;
margin: 0px;
}
#bobar .searchbox_header {
color: #ffffff;
padding: 2px 0px 2px 0px;
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
letter-spacing: 0px;
}
#bobar #inner {
width: 1030px;
height: 65px;
margin: 0 auto;
}
#bobar .bar_arrow {
padding: 0px 20px 0px 10px;
}
#bobar div.search {
margin: 0;
padding: 1px 0px 0px 320px;
text-align: left;
line-height: 18px;
}
#bobar div.search input[type="text"] {
color: #000000;
height: 24px;
width: 250px;
padding: 3px 0px 3px 7px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 12px;
font-family: arial;
margin-top: 1px;
}
#bobar div.search input[type="submit"] {
color: black;
width: 120px;
height: 34px;
font-size: 14pt;
font-weight: normal;
margin: 0px;
}
#bobar div.search input[type="submit"]:hover {
cursor: pointer;
}

#bobar div.plusone {
float: right;
margin: 0;
padding: 9px 0 0 10px;
width: 80px;
}
#bobar div.twitter {
float: right;
margin: 0;
padding: 5px 0 0 0;
width: 116px;
}
#bobar div.fb {
float: right;
margin: 0;
padding: 5px 0 0 0;
width: 96px;
text-align: left;
}

#bobar .message {
font-size: 14px;
line-height: 25px;
}

#bobar .success {
color: #039c33;
font-weight: normal;
}

#bobar .error {
color: #ff0000;
font-weight: normal;
}

/*----- bar style -----*/
.jx-bar {
height: 65px;
padding: 0px;
width: 100%;
background-color: #00B0E6;
border-top: 1px solid black;
margin: 0px;
}

.jx-bar-rounded-tl {
-webkit-border-top-left-radius: 0px;
-khtml-border-radius-topleft: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
}
.jx-bar-rounded-bl {
-webkit-border-bottom-left-radius: 0px;
-khtml-border-radius-bottomleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
}
.jx-bar-rounded-tr {
-webkit-border-top-right-radius: 0px;
-khtml-border-radius-topright: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
}
.jx-bar-rounded-br {
-webkit-border-bottom-right-radius: 0px;
-khtml-border-radius-bottomright: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
}

/*----- bar separator -----*/
.jx-bar span {
width:1px;
height:100%;
background-color: #000000;
}
.jx-separator-left {
float:left;
}
.jx-separator-right {
float:right;
}

/* tooltip point direction */
.jx-tool-point-dir-down {
background-image:url('http://cdn.utilcave.com/bobar/ttd.gif');
background-repeat:no-repeat;
background-position:center bottom;
height:5px;
width:auto;
}

.jx-tool-point-dir-up {
background-image:url('http://cdn.utilcave.com/bobar/ttu.gif');
background-repeat:no-repeat;
background-position:center bottom;
height:5px;
width:auto;
}

/*----- bar button -----*/
.jx-bar-button ul {
margin:0px;
padding:0px;
}
.jx-bar-button li {
float:left;
list-style:none;
}
.jx-bar-button-right li {
float:right;
list-style:none;
}
.jx-bar-button li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
cursor:pointer;
padding: 4px 8px 4px 8px;
border: 1px solid #00B0E6;
margin: 2px;
line-height: 1em;
background: transparent;
}
.jx-bar-button li:hover {
background-color: #000000;
border: 1px solid #000000;
padding: 4px 8px 4px 8px;
margin: 2px;
}
.jx-bar-button-rounded li:hover {
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

/* default button's anchor text style */
.jx-bar-button li a:link, .jx-bar-button li a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
text-decoration: none;
padding: 1px;
}
.jx-bar-button li a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
}

/*----- bar text container and button arrow indicator -----*/
.jx-bar div, .jx-bar iframe {
}
.jx-bar div {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
padding: 2px 8px 2px 8px;
margin: 2px 0px 2px 0px;
padding: 0px;
margin: 0px;
}
.jx-bar div a:link, .jx-bar div a:visited {
color: #666666;
text-decoration: none;
}

.jx-bar div a:hover {
color: #0099FF;
text-decoration: none;
}

.jx-bar iframe {
margin:4px 0px 4px 10px;
}

/*----- button tooltip -----*/
.jx-bar-button-tooltip {
height: auto;
padding: 5px 10px 5px 10px;
color: #fff;
background-color: #36393D;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
/* rounded tooltip */
.jx-bar-button-tooltip {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/*----- nav menu -----*/
.jx-nav-menu {
padding: 2px;
background-color: transparent;
border:#ccc solid 0px;
}
.jx-nav-menu-rounded {
-webkit-border-radius:3px;
-khtml-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.jx-nav-menu ul {
margin:0;
padding:0;
list-style:none;
}
.jx-nav-menu a:hover {
background-color:#4096EE;
color:#fff;
text-decoration:none;
}
/* styles for menu items */
.jx-nav-menu ul li a {
display:block;
text-decoration:none;
color:#777;
background:#fff; /* IE6 Bug */
padding:8px;
border:1px solid #eee; /* IE6 Bug */
border-bottom:0px;
}
/* active menu button */
.jx-nav-menu-active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
cursor:pointer;
background-color:transparent;
padding:4px 8px 4px 8px;
margin:2px;
}
/* active menu button (rounded) */
.jx-nav-menu-active-rounded {
-webkit-border-radius:3px;
-khtml-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

/* hide and show/unhide item */
.jx-hide {
float:right;
background-image:url(http://cdn.utilcave.com/bobar/hide_dark.gif);
background-repeat:no-repeat;
height:16px;
width:16px;
}
.jx-hide-top {
float:right;
background-image:url(http://cdn.utilcave.com/bobar/show_dark.gif);
background-repeat:no-repeat;
height:16px;
width:16px;
}
.jx-show {
height:30px;
padding:0px;
width:40px;
background-color: #00B0E6;
border: 2px solid yellow;
border-bottom: 0px;
}
.jx-show-button {
float:right;
background-image:url(http://cdn.utilcave.com/bobar/show_dark.gif);
background-repeat:no-repeat;
height:16px;
width:16px;
}
/* if showOnTop is TRUE, use "hide.gif" instead of "show.gif" */
.jx-show-button-top {
float:right;
background-image:url(http://cdn.utilcave.com/bobar/hide_dark.gif);
background-repeat:no-repeat;
height:16px;
width:16px;
}
.jx-hide-separator {
width:1px;
height:100%;
background-color: #335c9d;
float:right;
}

.jx-bar-button li {
margin: 2px 0px 0px 0px;
}

.jx-bar-button li:hover {
margin: 2px 0px 0px 0px;
}

/*--------Subscription Form ------*/

.emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}

.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 185px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:40px;
padding:0 4px;
float:right;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</body>

மேலே உள்ள code ஐ கண்டு பிடித்து அதற்கு மேல் கீழே உள்ள code ஐ இணைக்கவும்.

<div id='bobar'>
<div style='float: right;'><ul class='jx-bar-button-right'/></div>
<div id='inner'>
<div style='height: 100%; width: 100%;'>
<table border='0' cellpadding='0' cellspacing='0' id='t_bdakfjl' style='padding: inherit; border: 0px; margin-top: inherit; margin-bottom: inherit;'>
<tr>
<td style='padding: inherit;'>
<ul>
<li style='border: 0px;'><a href='#' id='logoclick'/>
<ul id='barlogo'>
<li class='barimage'><img src='http://2.bp.blogspot.com/--FP5xCuLnew/T-RII1VkFjI/AAAAAAAACn8/5neEkzBxxdg/s1600/Email_MBL.png'/></li>
<li class='bartext'>
<div class='bartitle'>Free Pro Tricks</div>
<div class='barsubtitle'>in your Inbox every day!</div>
<div class='fineprint'>Delivered directly to your email. Get it now.</div>
</li>
</ul>
</li>
</ul>
</td>
<td style='vertical-align: top; padding: inherit;' valign='top'>
<div class='text-container search' id='bobar_search'>
<td class='bar_arrow' style='padding-top: inherit; padding-bottom: inherit;'>
<img align='top' border='0' src='http://cdn.utilcave.com/bobar/arrow.gif' style='vertical-align: top;padding-top: inherit; padding-bottom: inherit; padding-top: inherit; padding-bottom: inherit;'/>

<td style='vertical-align: top; padding-top: inherit; padding-bottom: inherit; padding-left: inherit; padding-right: inherit;'>
<table border='0' cellpadding='0' cellspacing='0' style='padding-top: inherit; padding-bottom: inherit; border: inherit; margin-top: inherit; margin-bottom: inherit;'>

<div class='touchme'>

<a class='rss' href='http://feeds.feedburner.com/HackingAll' rel='external nofollow' target='_blank'/>

<a class='googleplus' href='https://plus.google.com/u/0/106374439082237286396' rel='external nofollow' target='_blank'/>

<a class='facebook' href='https://www.facebook.com/hacking4200.blogsopt' rel='external nofollow' target='_blank'/>

<a class='twitter' href='https://twitter.com/#!/hacking4200' rel='external nofollow' target='_blank'/>
<div class='emailupdatesform'>
<br/><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-RSS-Feed-Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class='emailupdatesinput' gtbfieldid='10' name='email' onblur='if (this.value == '') {this.value = 'Enter your email here...';}' onfocus='if (this.value == 'Enter your email here...') {this.value = '';}' type='text' value='Enter your email here...'/><input name='uri' type='hidden' value='MyBloggerLab'/><input class='joinemailupdates' type='submit' value='Submit'/></form></div></div></table></td></td></div>

</td></tr>
<tr>
</tr>
</table>

</div>

</div>
</div>

</head>

மேலே உள்ள code ஐ கண்டு பிடித்து அதற்கு மேல் கீழே உள்ள HTML code ஐ இணைக்கவும்.

<script src="https://www.google.com/jsapi? key=ABQIAAAAWvH7lmtbXPVbvOqmVVU9VRQdDxq4C7wyBnVikl0uwU8F0c1b7hTtX9ZL_MgGQCkMAayuC2BlaK4QRQ" type="text/javascript"></script><script type="text/javascript">google.load("jquery", "1.4.3");</script><script type='text/javascript' src='http://mybloggerlab.com/Scripts/jquery.cookie.js'></script><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> <script src='http://cdn.printables4kids.com/ez_display_au_fillslot.js' type='text/javascript'></script><script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script><script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-23768243-22']); _gaq.push(['_trackPageview']);_gaq.push(['_trackPageLoadTime']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script><script type="text/javascript">window.google_analytics_uacct = "UA-23768243-22";</script><script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.jixedbar.js"></script><script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-fonteffect-1.0.0.js"></script><script type="text/javascript" src="http://mybloggerlab.com/Scripts/bobar.js"></script>

அவ்வளவுதான் இப்போது உங்களுடைய Template ஐ சேமித்து விட்டு உங்களுடைய தளத்தை Refresh செய்யவும்.

இந்தப்பதிவு பிடித்திருந்தால் உங்களுடைய பொன்னான ஓட்டை ஏதாவது ஒரு சின்னத்தில் குத்துங்கள்.

0 எவ்வாறு நகரக்கூடிய Subscribe Now Bar ஐ நிறுவுவது

கருத்துகள் இல்லை:

கருத்துரையிடுக

பார்வையாளர்கள்.