Create a professional interface to your blogger

Posted by محمد On Sunday, July 8, 2012 0 comments

today i will tell You How To create a Professional interface to your blogger blog , this is a beautiful way to make your blog so nice , you can see my interface :)

ok , follow these steps to create your own interface

  • First you must create a new blog in Blogger
  • then go to your new blog - Design >> Edit html >> Back to the old model

  • You will see a new  Box like ancien, but you will notice the absence of some elements that we have become accustomed
  • now delete all the codes in the box and paste the following code  :
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="rtl">

 <head>
   <link href='' rel='shortcut icon'/>
   <title> - Tutos For Blogger - </title>
   <style type="text/css">
 /*
 -----------------------------------------------
 Blogger Template Style

 By : Admin

 URL : http://tutosforblogger.blogspot.com/
 ----------------------------------------------- */

 #navbar-iframe { display: none !important; }

 body {
 background: #f2f1ee;
 font: 14px Tahoma;
 color:#000000;
 }

 #outer-wrapper {
 float: right;
 margin: 0;
 }

#home {
position: relative;
right: 385px;
top: -20px;
 }

.widget-content {
position: relative;
right: 150px;
top:30px;
 }

<link rel="me" href="http://www.blogger.com/profile/10076374699576053234" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<!-- --><style type="text/css">@import url(http://www.blogger.com/static/v1/v-css/navbar/697174003-classic.css);
div.b-mobile {display:none;}
</style>

</head>

 <body><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src="//www.blogger.com/navbar.g?targetBlogID=536880188172687994&amp;blogName=Tutos+for+Blogger&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=CLASSIC&amp;searchRoot=http://blogger-nan.blogspot.com/search&amp;blogLocale=fr&amp;v=1&amp;homepageUrl=http://blogger-nan.blogspot.com/&amp;vt=9088494888315076963" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Navigation et recherche Blogger"></iframe>
<div></div><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src="//www.blogger.com/navbar.g?targetBlogID=5317907606113100231&amp;blogName=%D9%88%D8%A7%D8%AC%D9%87%D8%A9+%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D8%A3%D8%B3%D9%85%D8%A7%D8%A1+%7C%7C+%D8%A3%D9%85+%D9%86%D8%B6%D8%A7%D9%84+%7C%7C&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=CLASSIC&amp;searchRoot=http://omnidal-blog.blogspot.com/search&amp;blogLocale=ar&amp;v=1&amp;homepageUrl=http://omnidal-blog.blogspot.com/&amp;vt=-8220875505001613691" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="search Blogger"></iframe>
<div></div>

 <div id='outer-wrapper'>
 <div class='main section' id='main'><div class='widget Image' id='Image1'>
 <div class='widget-content'>

 <img src='http://2.bp.blogspot.com/-sLOgIvXIzYk/T_TWt17rWBI/AAAAAAAAAHA/GwPfmtxafIs/s1600/Tutos+for+blogger.png'/>
 </a>
 <br/>
 </div>


 <div id='home'>
<a href='http://tutosforblogger.blogspot.com/'</a><img src='https://lh4.googleusercontent.com/-Qi-iep8eru4/T_TIvmcdw9I/AAAAAAAAAEM/CTShPppAWqc/s255/tutosforblogger-login-button.png'/></a>
 </div>


 <script type="text/javascript" src="http://www.blogger.com/static/v1/common/js/612699025-csitail.js"></script>

<script type="text/javascript">BLOG_initCsi('classic_blogspot');</script><script type="text/javascript" src="http://www.blogger.com/static/v1/common/js/3287480799-csitail.js"></script>
<script type="text/javascript">BLOG_initCsi('classic_blogspot');</script></body>
 </html>
change this :
color red : url of your blogger blog
color green : your enter button image, and the big image
color blue : change the background color

it's done , enjoy :)

0 comments:

Post a Comment

Facebook Page

Followers