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&blogName=Tutos+for+Blogger&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLUE&layoutType=CLASSIC&searchRoot=http://blogger-nan.blogspot.com/search&blogLocale=fr&v=1&homepageUrl=http://blogger-nan.blogspot.com/&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&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&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLUE&layoutType=CLASSIC&searchRoot=http://omnidal-blog.blogspot.com/search&blogLocale=ar&v=1&homepageUrl=http://omnidal-blog.blogspot.com/&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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGihjSC8oO9LXO_2EFF9KaIxF_Q4TfrOwZwlEUxpBBYjCskI7sAMxe9ASjPp7Pr4DerECa7sED99YftzB-S3ij4E6yHX5_atz0Hpiq8uIZjnTTs-3XiovWylC-d2NgL48lpPCT-qI37Hg/s1600/Tutos+for+blogger.png'/>
</a>
<br/>
</div>
<div id='home'>
<a href='http://tutosforblogger.blogspot.com/'</a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PVZT5msjjbqH6uPzqH4F-G2bf-9Yax0bGWBjHsk3S4t245RIA8szgETCkSq5h2VgzUvcGL2f_nPicilLGlMCpfB6D0BW7iCDkzC84qm8cqEwYyjzMpOQoYTgmospCZZ7CUkwSENhqG9b/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 blogcolor green : your enter button image, and the big image
color blue : change the background color
it's done , enjoy :)
0 comments:
Post a Comment