MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Follow These Steps.

• Go to >> Blogger.com
• Go To >> Template
• Next Go >> Edit HTML
• Find This Code Given below.

</body>

• Just above it, paste the following code Given below.

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

How To Customization:

LIVE Preview & Demo:

How ADD MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR:

• 1. Go to Design >> Page Elements >>  Add a gadget, then choose >>  HTML/JavaScript. 
• 2. Paste Below code Empty inside It.
• 3. Code is Below.

<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
  var NewBloggerTips = document.getElementById(NBTID);
  var NBTs = NewBloggerTips.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = NewBloggerTips.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID,  1);
document.write('');}
//]]>
</script>
<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2  Title</a> <a>Tab 3  Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.matrixar.com/' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.matrixar.com/' target='_blank'>IBT</a></small>
</div>
</div></form>
<script type="text/javascript">Tips_inisial('NewBloggerTips');</script>

How Customization This Code:

• Replace Tab 1 Title, Tab 2 Title, Tab 3 Title with you Tab Title Any.
• Replace Tab 1,2,3, Content goes here with your widget code Such As like Box..ETC....
• Change width: 300px; height: 300px; with your need.
• If You Want To change Background Color of Multi-Tabbed widget : Replace #ffffff with you favorite color.

https://www.facebook.com/groups/imtiazblogtrick

Best Professional Blogger Template Sites Just To Start Your Blogspot.

• https://www.facebook.com/groups/imtiazblogtrick
• https://www.facebook.com/ImtiazBloggerTrick

Front End of IBT Revolution Church Template.

Back End View of IBT Revolution Church Template.

Customization Guidance Navigation.

•  Change Top Horizontal Navigation by editing this one below Code

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='subnav'>
<li><a expr:href='data:blog.homepageUrl' shape='rect'>Home</a></li>
<li><a href='http://www.services.comli.com/' target='_blank' title='Our Exclusive Premium Services'>Services</a></li>
<li><a href='#' shape='rect' target='_blank'>Advertise</a></li>
<li><a href='#' shape='rect' target='_blank'>About Us</a></li>
<li><a href='mailto:itsimtiaz88@yahoo.com' target='_blank'
title='Contact Me Via Email'>Contact Us</a>
</li></ul>
<g:plusone size='medium'/></div>

•  Change Horizontal Navigation by Editing This One Shown Below 

<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li class='home'><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Drop menu 1</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 2</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
<li><a href='/'>Sub menu 5</a></li>
<li><a href='/'>Sub menu 6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 3</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
<li><a href='/'>Sub menu 5</a></li>
<li><a href='/'>Sub menu 6</a></li>
<li><a href='/'>Sub menu 7</a></li>
<li><a href='/'>Sub menu 8</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<br class='clearit'/>
</div>

<div id='NavbarMenuright'>
Google Custom Search Code</div>
</div>

This Code For Below The Post Title

<div align='center'>
Google 336*280 Banner Ad Goes to Here</div>
</td>

This code For End Of The Post.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='gapad'>
<center>YOUR ADSENSE CODE GOES HERE</center></div>
</b:if> 

Need Help More About this Template?

• Free Pro Blogger Template MyBloggerTricks Download

Free Premium Blogger Template MBT V2 "MyBloggerTricks.com" Download

Features of  MyBloggerTricks Template.

• SEO Optimized
• elegant menu
• fast loading
• back to top button
• clean and simple looks
• Fully Monetized
• Top Customizable Sticky Bar
• SEO Optimized Blogger Template
• Clean White , Elegant Look
• Adsense Ready Template ( Add Adsense below Title , Sidebar , Header )
• auto Scrool Top Widght 

• https://www.facebook.com/groups/imtiazblogtrick
• https://www.facebook.com/ImtiazBloggerTrick

How to Install MyBloggerTricks  Premium Blogger Template.

• Login to blogger>> Go Dashboard >>Template.
• Select >> backup/restore in the upper corner
• Download the current template for backup [in-case anything goes wrong Template]
• Next select upload and upload the template Your Blogspot blog.

• Free Seo Top 5 Premium Blogger Templates 2013

How To Add Those Widget In Your Blogspot Blog?

• Go to >> Blogger login
• Add >>gadget >> HTML >>javascript
• Paste inside Empty box .
• Save it done.

• https://www.facebook.com/groups/imtiazblogtrick
• https://www.facebook.com/ImtiazBloggerTrick

How To Add Those Widget In Your Wordpress Blog?

• Go to Dashboard >> Appearance >> Widget.
• Add a Text Widget.
• Paste the code shown below.
• Save the Widget and You have done it!.

<style>
html > body div.bsap_1272098 a.adhere {
    width: 258px;
    height: 258px;
}
div.bsap_1272098 a.adhere {
    width: 260px;
    height: 260px;
    line-height: 2080%;
}
div.bsap_1272098 a.adhere {
    color: rgbundefined102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgbundefined204, 204, 204);
    background: none repeat scroll 0% 0% rgbundefined231, 231, 231);
    text-align: center;
}
.bsap a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.bsap .ad1 {
    background: none repeat scroll 0% 0% rgbundefined17, 108, 165) !important;
}
div.bsap_1272098 a {
    line-height: 100%;
}
div.bsap_1272098 a {
    display: block;
    font-size: 11px;
    color: rgbundefined136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}
div.bsap_1272098 a {
    width: 260px;
}
.bsap a {
    text-shadow: 1px 1px 1px rgbundefined17, 17, 17) !important;
    color: rgbundefined238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">
<!-- Ads Zone Code -->
<div id="bsap_1272098" class="bsap_1272098 bsap"><a href="http://www.matrixar.com/" title="Advertise Here" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- End Ads Zone Code -->
</div>

<style>
html > body div.bsap_1264012 a.adhere {
    width: 123px;
    height: 123px;
}
div.bsap_1264012 a.adhere {
    width: 125px;
    height: 125px;
    line-height: 1000%;
}
div.bsap_1264012 a.adhere {
    color: rgbundefined102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgbundefined204, 204, 204);
    background: none repeat scroll 0% 0% rgbundefined231, 231, 231);
    text-align: center;
}
.bsap a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.bsap .ad5 {
    background: none repeat scroll 0% 0% rgbundefined61, 164, 21) !important;
}
.bsap .ad6 {
    background: none repeat scroll 0% 0% rgbundefined182, 118, 6) !important;
}
.bsap .even {
    margin-right: 0px !important;
}
div.bsap_1264012 a {
    line-height: 100%;
}
div.bsap_1264012 a {
    display: block;
    font-size: 11px;
    color: rgbundefined136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px 8px 15px 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    float: left;
}
div.bsap_1264012 a {
    width: 125px;
}
.bsap a {
    text-shadow: 1px 1px 1px rgbundefined17, 17, 17) !important;
    color: rgbundefined238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">
<!-- BuySellAds Zone Code -->
<div id="bsap_1264012" class="bsap_1264012 bsap">
<a href="http://mybloggertopic.blogspot.com/" title="Advertise Here" class="adhere ad5 odd" target="_blank">Advertise Here</a>
<a href="http://mybloggerstricks.com/" title="Advertise Here" class="adhere ad6 even" target="_blank">Advertise Here</a>
</div>
<!-- End BuySellAds Zone Code -->
</div>

<style id="bsa_css" type="text/css">div.bsap_1263441{width:100%;display:block}div.bsap_1263441 a{width:468px}div.bsap_1263441 a img{padding:0}div.bsap_1263441 a em{font-style:normal}div.bsap_1263441 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}div.bsap_1263441 img{border:0;clear:right;}div.bsap_1263441 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}div.bsap_1263441 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}div.bsap_1263441 a{line-height:100%}div.bsap_1263441 a.adhere{width:468px;height:60px;line-height:480%}</style><div class="widget-content"><!-- BuySellAds Zone Code --><div id="bsap_1263441" class="bsap_1263441 bsap"><a title="Advertise Here" href="http://www.matrixar.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div><!-- End BuySellAds Zone Code --></div>

<style>
div.bsap_1263441 a.adhere:hover {
    border: 1px solid rgbundefined153, 153, 153);
    background: none repeat scroll 0% 0% rgbundefined221, 221, 221);
    color: rgbundefined51, 51, 51);
}
html > body div.bsap_1263441 a.adhere {
    height: 58px;
    width: 466px;
}
div.bsap_1263441 a.adhere {
    width: 468px;
    height: 60px;
    line-height: 480%;
}
div.bsap_1263441 a.adhere {
    color: rgbundefined102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgbundefined204, 204, 204);
    background: none repeat scroll 0% 0% rgbundefined231, 231, 231);
    text-align: center;
}
.bsap a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.bsap .ad1 {
    background: none repeat scroll 0% 0% rgbundefined17, 108, 165) !important;
}
div.bsap_1263441 a {
    line-height: 100%;
}
div.bsap_1263441 a {
    display: block;
    font-size: 11px;
    color: rgbundefined136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px 4px 10px 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    float: left;
}
div.bsap_1263441 a {
    width: 468px;
}
.bsap a {
    text-shadow: 1px 1px 1px rgbundefined17, 17, 17) !important;
    color: rgbundefined238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">
<div style="margin-top:35px;">
<!-- BuySellAds Zone Code -->
<div id="bsap_1263441" class="bsap_1263441 bsap"><a title="Advertise Here" href="http://www.matrixar.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- End BuySellAds Zone Code -->
</div>
</div>

Know How To Customization This Code.

• https://www.facebook.com/groups/imtiazblogtrick
• https://www.facebook.com/ImtiazBloggerTrick

Add Floating Facebook Like Box

<style>
#thiswidget {
   height: 20px;
   width: 56px;
   border-radius: 0 0 5px 5px;
   float: left;
   padding: 0 0 0 12px;
   background-color: #D0D0D0;
}
#boxshare {
   display: scroll;
   position:fixed;
   bottom:40%;
   left:2%;
   width: 68px;
   background-color:#FFFFFF;
   border: 1px solid #A3A3A3;
   border-radius:5px;
   padding:0 0 2px 0;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   z-index:10;
}
#boxshare .boxbutton {
   float:left;
   clear:both;
   margin:5px;
}
.fb_share_count_top {
   width:68px !important;
}
.fb_share_count_top, .fb_share_count_inner {
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
}
.FBConnectButton_Small .FBConnectButton_Text {
   padding:2px 2px 3px !important;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   font-size:8px;
}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {
   width:68px !important;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
}
</style>
<div id='boxshare' title="Share This">
<div class='boxbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='boxbutton' id="fb-root"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send layout="box_count" show_faces="false" font=""></fb:send></div>
<div class='boxbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="imtiazblogtrick">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class='boxbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='boxbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align: center;">
</div>
<a href='http://www.matrixar.com/2013/03/how-to-add-floating-facebook-like-box.html' id='thiswidget'>widget</a>
</div>

This tutorial About How Create your author comments in blogger differently between visitor comments. And to design a better author comments you do not use a lot color "px" or use image background because it will use more resources and it is not good for your blogspot blog. So you design simple author comments but looks attractive and prominent.i Hope You Will Done Use these Steps.

Customize Author Comments in Blogger

3. Backup your template.

• Orange Code.

.comment-body-author {
   background: url(http://www.matrixar.com/-6Y9Ocs109wM/UTXkd2jqdZI/AAAAAAAABD0/bOCU0KZncWw/s1600/comment+author.png) no-repeat top right;
   color: #621A00;
   font-family: Arial, Verdana;
   border: 1px dotted #E03C00;
    padding:0 36px 0 20px;
   margin:0;
}

• Green Code

.comment-body-author {
   background: url(http://www.matrixar.com/-NoS939qarZw/UTXoVzVi47I/AAAAAAAABEM/--wu99K9lPs/s1600/comment+author+0.png) no-repeat top right;
   color: #013408;
   font-family: Arial, Verdana;
   border: 1px dotted #02CA1D;
   padding:0 36px 0 20px;
   margin:0;
}

• Make your author comments you want to Change.

.comment-body-author {    background: #FFFFFF;    color: #0C1F0E;
   font-family: Arial, Verdana;
   border: 1px dotted #06DD22;
   padding:0 5px 0 20px;
   margin:0;
}

#FFFFFF use to change your background color
#0C1F0E use to change your font color
#06DD22 use to change your border color, dotted use to change border style you can replace with solid or dashed.

<data:commentPostedByMsg/>
      </dt>
<b:if cond='data:comment.author == data:post.author'><dd class='comment-body-author'><p><data:comment.body/></p></dd><b:else/>      <dd class='comment-body'>
         <b:if cond='data:comment.isDeleted'>
           <span class='deleted-comment'><data:comment.body/></span>
         <b:else/>
           <p><data:comment.body/></p>
         </b:if>
      </dd>
</b:if>

Add Author Profile widget in Blogger

Customize Author Profile Widget in Blogger

/*############################
                Author Profile
#############################*/
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 5px 7px 5px 5px;
border-left:2px solid #0073FF;
border-top:2px solid #0073FF;
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.profile-img:hover {
padding: 5px 5px 5px 5px;
border:2px dotted #00B309;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.profile-data {
padding:0 10px 20px 20px;
padding:0;
font: bold 15px verdana,Arial;
color: #0073FF;
text-align:center;
}
.profile-data:hover {
color:#00B309;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-datablock:hover {
background: transparent url(http://www.matrixar.com/-in_oyhuIL30/UTh4PK728BI/AAAAAAAABGc/QJQsa2x01tY/s1600/admin.png) no-repeat bottom right ;
}
.profile-textblock {
color:#FFFFFF;
margin: 0.5em 0;
line-height: 1.5em;
padding:8px 8px 5px 0;
border-bottom:2px solid #0073FF;
border-right:2px solid #0073FF;
}
.profile-textblock:hover {
color: #00B309;
border-bottom:2px dotted #00B309;
border-right:2px dotted #00B309;
}
.profile-link {
display:none;
}