--> Template Customization - Salahuddin Ayubi | Experience Lab - Online business creation and development guide for bloggers and startups

Template Customization - Salahuddin Ayubi

Template: Salahuddin Ayubi Layout: Two Columns Size: ...

Salahuddin Ayubi Blogger Template







Template:

Salahuddin Ayubi

Layout:

Two Columns

Size: 32.0 KB
Compatibility: IE9+, All
License:  Creative Commons Attribution-NonCommercial


Demo      Download

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:

Easy Customization

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

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/AVvXsEivLRGhnDfKZOUnlZ0iYHEOEqrgVpUu7RgjVNCSmj0qu9KkvY_TAHUbU49Ir6Vkr4VdUWQOPJK9VxZOoYzJ9uTpR2PO4AII5JiYX_n0CDNjWTf1IkHTDOnoghg8g1gGjWuFKnqn9JPloGo/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/AVvXsEgVcaVxYqfkVPB88l1KXtnHv7Uis4mVGL-R0KvMAkVPojao0NwFHc07_Qsxw8ua98i1LjeywVkckXlsVaOIJdhYyHFbhp9SXiwNCVSkCfLnQ-iChdH2RmShpSaxcpTgdh6G6PSUN3Tj03E/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/AVvXsEgp9s9K4Dv96sR_o4TBZ67qCSoWbn8F2cbcS2MAXZuxqeGoYQs1uEcUJV6yhGo7gB2Yi-HO6pu49fQp_DdTkyrbH1lpW44WhFAuCRpsgJaMYyTzZ6sYwgwye0YKf7aFuZlQrva4HsAyPWo/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/AVvXsEiG36uD_wcB9zt1HUpBJgHLmXtcUcH8q2ukbOKV8dbvereVBsjlhLvZfL_hwquAmC9sYM05ig00limbkrtoD0qTvQWaWPRPnD54-HEgHH1c89opBHEq3NrgpRytVzQCzmHRgtfr60-SYL32/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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" 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

Pagelist 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

Main MenuTo edit links simply search for the following code inside your template:

<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

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

attention grabber

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.

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

author box

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:

archive calendar settings

 

 

9. Multi Tabs

Jquery 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.

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/AVvXsEg9BF8tIDNUp9EeFCjgPFcY6IE2J2vhJ1CFV-GHSy2VZYyWCMEWzOaTNwyUCZZt7vPUIvGq1sRjUrDfyhQhrv-Tlo7FnFkdl9zuVOmITdqWlwoB6Xyjew_tuDUBL30qfn4EuThdxdr-D3_Y/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/AVvXsEjUr0gIWtMJqcdC1BRBinkW3NQjn1tHLqRMHGKuFynosnNBp6VHBuIbxTEDZ0zYXKmFNAqHI_YWvWz998F-WGc266LsMmucfQ75xjijyIMX3xICh74f6iOvyO-T4ZvLyDOXwb9i2yOiUYzj/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! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Template Customization - Salahuddin Ayubi
Template Customization - Salahuddin Ayubi
http://lh6.ggpht.com/-c0jAIjY-xv8/UOsdqoP0T0I/AAAAAAAAIjM/V_il0kwgujw/image%25255B38%25255D.png?imgmax=800
http://lh6.ggpht.com/-c0jAIjY-xv8/UOsdqoP0T0I/AAAAAAAAIjM/V_il0kwgujw/s72-c/image%25255B38%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2013/01/template-customization-salahuddin-ayubi.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2013/01/template-customization-salahuddin-ayubi.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy