| Template: | Salahuddin Ayubi |
| Layout: | Two Columns |
| Size: | 32.0 KB |
| Compatibility: | IE9+, All |
| License: |  |
Template Description:
I have already discussed in detail the important features for SEO, Social Media and Plugins. To read about why this template is so different please read the following article:
Lets begin with important things that you would need to change the look of your template and edit important sections.
Note: You may not share or red-distribute the codes shared below without consulting us. All resources below are protected by DMCA and are sole property of STC Network.
1. Subscription box
Copy and Paste The following code inside HTML/JavaScript widget for the subscribe box:
<style>
#salahuddin-ayubi {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
#email-news-subscribe .email-box{
padding: 5px 5px;
font-family: "Arial","Helvetica",sans-serif;
height:38px;}#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#666 0,#333 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:white;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background-image:-moz-linear-gradient(top,#333,#666);
background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:#FFFFFF;
}
#other-social-bar {
padding: 0px;
overflow: hidden;
height:37px;
margin-top:-8px;
}#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
overflow: hidden;
padding:5px;
width: 270px;}#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}#other-social-bar .other-follow li {
display:inline;
border:0;
}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#666;
font-weight: bold; font-family:arial;
display:inline;
}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCpt6eBk-Bku34sTOurOR4IKRX0s9lceqT10QaTuZ9EuLyZ-iCCpyOvakPDEWXeZmvJ4t6WLUyQHRz1P4p8BMxs2NoPznVtVZTaW_euC09RcO-1c69Ecpy-q5kM_JDSpAdo94-dTeqX4A/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQQE33M8vzXVkZaCiIG8oWV9Rg6ux6y8_eRjKpTEgfB1HVmpxWeF-DFe49Rz7whlsQ0RNBAzB_wdnUwuA5MORA1B94eUlsqk_LXlHzgFECyeAjQLXSUG9pWZMfcZkQZsye-b3ZjbRSdw/s400/twitter%2527.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz8pTSX0j9JGLPy_nRitUi1xBusTo2jwapi_3Zk90H88Xvlqs8VaI2hs7vu7ByHNya37r4wSBbWgILOIiX9Vqa1i3wjmBV9Nu6LnSGfGmBfwFRqDyERJ2Ak5ejrDLCqke6ab3K77n4OxE/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
.emailicon {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKuviJT4dGLknCtxdFi-pL4c5CvLOt0kJrjRzyu5vGnEQs-P-EH5P4fY4t9V72s1exJIZ95IgjLXNzY9n53HsPQUJI4XxmGILzieyLzXwJmmW4EgZgMUxdJaXy9dyspphaBAGAihkHN5xI/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
padding: 0px 20px 0px 95px;
min-height:100px;
margin: 0px;
width: 183px;
line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: rgb(51, 51, 51);}
.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family: impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #333;
}
</style>
<![endif]-->
<div id="salahuddin-ayubi" >
<div class="emailicon"><p>Subscribe to our Free Email Updates! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" />
<input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-bar">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li><li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/mybloggertricks" target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/1111214334130358474387 target="_blank">Google Plus</a> </li>
</ul>
</div></div>
- Replace tntbystc with your Feedburner title
- Replace the bolded sections with your twitter and Google+ username details
Note: There is also an Email icon in the sharing widget that appears at the bottom of post. To replace its link with your feedburner Email Subscription link kindly find and replace this: (You will find this link inside your template)
http://feedburner.google.com/fb/a/mailverify?uri=TntByStc
2. Top Menu
These tabs can easily be adjusted in two ways. 1. either from layout section 2. or from Pages window.
To drag, add, delete or update the tabs, simply go to Blogger > Pages
From here you can add, delete pages and you can also drag the tabs to shift their locations.
3. Main Menu
<div id='botmenu'>
Just below it you will see a list of li tags where you can insert URL and title for your tabs. To create a sub menu transform your code in the following way:
From this:
<li><a href='TAB URL'>TAB TITLE</a></li>
To this:
<li><a href='TAB URL'>TAB TITLE</a>
<span class='sf-sub-indicator'/>
<ul class='sub-menu' style='display: none; visibility: hidden;'>
<li><a href='Subpage url'>Subpage 1</a></li>
<li><a href='Subpage url'>Subpage 2</a></li>
<li><a href='Subpage url'>Subpage 3</a></li>
<li><a href='Subpage url'>Subpage 4</a></li>
</ul>
</li>
I added Jquery easing effect and transition on mouse hover along with smooth drop down effect. All these effects would work only if you add the yellow highlighted codes.
4. Footer Menu
To edit the menu at the bottom, simply find this code inside your template:
<ul id='footer-navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Typography</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
Now editing the links would of course be a piece of cake for you all.
5. Blogger Notification Bar
To update the announcement text inside the sticky top bar, find this code:
<body>
You will then see the following code jst below the bode tag:
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'>
Download this Blogger Template by <a class='link' href='http://www.mybloggertricks.com' target='_blank'>Clicking Here!</a>
<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>
You may replace the bolded text with any message you wish to display to your readers.
- For further details read: Blogger Notification Bar
6. Author Image
To replace the author image appearing just below post title and also at the bottom of post. Please find and replace the following image link with yours.
https://lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAGQY/Sl371AuVYfM/s250-c-k/photo.jpg
Note: Your image can be of any size but make sure it is at most 30 X 30 in size.
7. Author Info
To edit the title and author description kindly find this code:
<div id='about-author'>
You can then edit the details below it.
8. Archive Calendar
To add the archive widget kindly add an archive widget like your normally do from the layout section and then give it the following settings:
- For Further details read: Archive Calendar for Blogger
9. Multi Tabs
You can add widgets to the multi tab easily from the layout section but you will manually need to edit its titles from the template section. After you have added your widgets kindly edit their titles by finding this code:
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Latest Posts</a></li>
<li><a href='#widget-MBT-id2'>Video</a></li>
<li><a href='#widget-MBT-id3'>Recent Comments</a></li>
</ul>
You may now set these titles to your preferred widget titles.
- For Further details Read: Add Advanced Multi Tabs to Blogger
10. About Author
To add your picture and some info about your self at the footer, you may paste the following code inside the HTML/Javascript widget in order to make the widget look as perfect as it looks in the demo:
<!--[if !IE]> -->
<style>
#profilemohammad{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;}
#profilemohammad:hover {
border:2px solid #ccc;
cursor:pointer;}
.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<![endif]-->
<style>
#profilemohammad{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;}
#profilemohammad:hover {
border:2px solid #ccc;
cursor:pointer;}
.opacity {
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
zoom: 1;
}
.opacity:hover {
opacity: 1;
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}</style>
<img class="opacity" id="profilemohammad" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu5YyzmkE5hXXoCVgdQOYA1qHOBLukf-2KnZI_kAv_PDj1-aFRIA_inhtO5TaZZB5EE3rsWivc-UHOA8461JQ6F1NQRNebA5BZGmUmLGjx7VFvTTCZAj4iX2_lxK_fXiJ2u9uvKMbz_etq/s1600/mohammadmustafa.jpg" align="left"/>Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer.
<a style="color:#888;" href="http://www.mybloggertricks.com/2008/06/something-about-me.html">Read More..</a> <br/> </![endif]-->
- Replace the yellow highlighted image link with your photo link
- Replace the info text with anything you wish to write about yourself, your blog and your profession.
- Replace the Read More link with the url of your About Page.
You May Read: Design a Professional Looking About us page
11. 468 X 60 Ad Banner
To Add your banner inside the Top right header section, Please paste the following code inside the Ad widget by going to layout:
<a href='#' target='_blank'><img width="468px" height="60px" alt='banner' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTl80o8W8pUsau9kKGs1e-Ckk4ll5trHymZrcqF1SldyyYFNtptET4EvGJ1UDjEnrmBLPLx86mKr27XnCMIMUE_1YmG1nFh0m9tpej3Exg8XohrQYOdeOn4W9Xb5mDRcNnneV3rXK1zf8/s400/header-banner.png'/></a>
Replace the above image link with the image link of your banner and replace the # sign with Banner Link.
Anything left?
I just hope I have covered the details of almost every part. If you got yourself into any trouble just do not panic, bring a cup of coffee on your table and start posting your queries on this page. Technical queries will always be discussed here. We hope you find this little effort useful. My personal suggestion is that if you are really serious about SEO and blogging then Salahuddin Ayubi and coming new MBT designs are what you must try out. Care less about Fancy colors and animations and value more the core structure and SEO value of a template. Coming MBT designs are the best when compared to several designs available online that offer just design value and are unfortunately poorly coded inside that badly impacts search value. Yes truth hurts!
Another good news is arriving so stay tuned! Peace and blessings buddies! :)
