Tuesday, 16 April 2013

Cara membuat Template Blogger[2]


Sahabat Blogger..Kali ini saya akan mem-post "Cara Membuat Template Blogger".Tapi INGAT!Template ini tidak seperti yang seperti di Blog saya ini.

Langsung ke kode HTML-nya aja ya.


<html> 

<script type="text/javascript"> 
document.ondragstart = function () { return false; }; 


<title>Chat And Connect</title>


<style type="text/css"> 
#navbar-iframe {
display: none;
}

.header {
margin-bottom: -11px;
margin-left:-1px;
margin-top:-1px;
}

body {
color:#666;
background: url(http://);
background-attachment: fixed;
font-family:arial;
letter-spacing: 1px;
line-height: 15px
cursor: url(http://), progress;
}
a:link, a:visited { 
cursor: url(), progress;
font-style: normal;
color: #CD661D;
text-decoration: none;
-webkit-transition-duration: 0.5s;
}

a:hover{
color: #EE9A49;
text-shadow: 2px 2px 3px #F6CEF5;
}

::-webkit-scrollbar {
width:10px;
height:10px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {
height:10px;
width:10px;
display:block;
background:#996600;
border:1px solid #FFA54F;
}
::-webkit-scrollbar-track-piece  {
background-color:#fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color:#996600;
border:1px solid #FFA54F;
}
.tit {
margin-top: 3px;
margin-bottom: 3px;
margin-left: 1px;
margin-right: 1px;
color:#000;
letter-spacing:2px;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 4px;
font-weight: bold;
font: 18px 'Patrick Hand'; 
line-height:18px;
text-align: right;
background: url(http://i.imgur.com/SiNZBVY.gif);
border:1.5px solid #FF7F24;
text-align: center;
}
.tit:first-letter {
font: 20px ''; 
text-align: center;
color: #EE9A49;
}
.h2{
text-align:center;
margin-top:3px;
font:8px tinytots;
text-transform:uppercase;
padding:3px;
}

@font-face {font-family: "tinytots";src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
img {
opacity:1.0;
}

::-moz-selection {
background:#EE9A49;
color:#FFFFFF;
}

::selection {
background:#EE9A49;
color:#FFFFFF;
}
blockquote {
background:#EE9A49;
border: 1px solid #D2D2D2; 
-webkit-transition:0.5s;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
-moz-border-top-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
padding: 7px;
}

blockquote:hover { 
background:url(http://i.imgur.com/JBLj1Rr.png);
border: 1px solid #D2D2D2; 
-webkit-transition:0.5s;
border-top-left-radius:2px;
border-bottom-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
-moz-border-top-right-radius: 2px;
-moz-border-bottom-right-radius: 2px;
-moz-border-top-left-radius: 2px;
-moz-border-bottom-left-radius: 2px; 
}

u {  color: #000; 
border-bottom: 1px #EE9A49 solid; 
text-decoration: none;
-webkit-transition-duration: 1.5s;
}
u:hover {  
color: #666; 
border-bottom: 1px #EE9A49 dashed; 
text-decoration: none; 
-webkit-transition-duration: 1.5s;
}

b {
color: #FF7F24;
-webkit-transition-duration: 1.5s;
}
b:hover {
color: #EE9A49;
-webkit-transition-duration: 1.5s;
}
strike {
color:#A9A5AA;
}

@font-face{font-family:pixel;src:url(http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf)}
a.link {
cursor: url(http://), progress;
font-family: pixel;
font-size:8px;
background:url();
border:1px solid #FF7F24;
text-transform:uppercase;
letter-spacing:1px;
color:#888;
width:90px;
padding:3px;
margin:2px;
text-align:center;
display:inline-block;
-webkit-transition: .2s;
}
a.link:hover {
border:1px dashed #FF7F24;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#labelList {}
ul#label-list {
text-align:justify;
margin-left:-38px;
margin-top: -10px;
}
ul#label-list li {
display:inline;
}
ul, li {list-style-type: katakana;
}

.menu{
background: #FFFFFF;
margin-top:-20px;
}
.navi,a.navi{
background:#EE9A49;
border:1px solid #996600;
display:inline-block;
padding:4px;
width:65px;
margin:3px;
color:#fff;
font: 11px '';  
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
box-shadow:inset 0px 0px 0px #FFF,inset 0px 0px 0px #FFF;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
margin: 0px 2px 3px;
}
.navi:hover, a.navi:hover{
color:#000;
display:inline-block;
box-shadow:inset 0px 14px 0px #FFF,inset 0px -14px 0px #FFF;
}

</style> 

</head> 

<center>
<div style="border: 5px solid #996600; width:935px;border-radius: 12px 12px 10px 10px;padding:2px;margin-top:10px;margin-bottom:10px;">
<center>

<img class="header" src="http://i.imgur.com/o8tOGTN.gif"width="937"/>

<div class="menu">
<span class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML">My Profile</span>
<span class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('link').innerHTML">Just Click if you want to know :/</span>
<span class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('rules').innerHTML">Just Click</span>
<a class="navi" href="http://twitter.com" target="_blank">Twitter</a>
<a class="navi" href="http://tumblr.com" target="_blank">TUMBLR</a>
<a class="navi" href="http://facebook.com" target="_blank">FACEBOOK</a>
<a class="navi" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID" target="_blank">FOLLOW</a>
<span class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('diary').innerHTML">BACK</span>
</center>

<table style="font-size: 11px; color: #666; margin-top:0px; margin-bottom:0px; line-height: 17px;background:white; display:block; "width="936" align="center" border="0" cellspacing="8" /> 
<tbody>

<tr> 

<td valign="top" style="line-height:16px; letter-font-size:11px; width:80px; padding-right:10px;"> 

<div class="tit">Hello!</div> 

<center><img height="158" src="http://i.imgur.com/h10GGAX.gif" width="200" /> </center>

<div style="text-align: center;"> 
<b>Welcome</b> to my simple triple blog, i`m <b>Atin</b>..thanks for visited my blog, nice to meet you, leave your footstep at my cbox, Do follow  
<br><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#FFFFFF" />
    <param name="FlashVars" value="mp3=http://k005.kiwi6.com/hotlink/7or0o1n5j0/Hellohow_are_you_-_Kano_English_Sub.mp3&amp;autoplay=1&amp;bgcolor=FFFFFF&amp;loadingcolor=D7D7D7&amp;buttoncolor=EE9A49&amp;slidercolor=CD661D" />
</object><br>
<center>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAtinTorys-Blog%2F469196396471064%3Fref%3Dhl&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</center>
<br>
</div>

<div class="tit">Tagboard!</div><br> 
<div style="text-align: center;"> 
PUT YOUR CBOX width="210"

<br> 
</div>

<div class="tit">My Post</div><br>
<center>
<div style="border:1px solid #996600;background:#fff; width:188px; overflow-x:hidden; overflow-y:scroll;padding:5px; height:100px;text-align:left; ">
<bloggerpreviousitems>
<li><a  href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></li>
</a>
</BloggerPreviousItems> 
</div>

<div class="tit">Thanks Bear</div><br>
<!----- DONT REMOVE THE CREDITS  -------!>
<b>Template 100%:</b> <a href="http://fatinhalid.blogspot.com/"target="_blank" >Atin</a> <a href="http://www.blogskins.com/me/atintory"> Tory </a></br>
<b>Editor:</b><a href="http://blogspot.com">Your name</a></br>
<b>Help: </b><a href="http://nurulatiqahjaidin.blogspot.com/"> ➊ </a> <a href="http://www.weheartit.com"> ➋</a><a href="http://kiwi6.com/users/atin"> ➌ </a>
<!----- DONT REMOVE THE CREDITS -------!>
<br>
<td valign="top" style="width:650px; padding-left:5px; border-left:1px solid #f0f0f0; padding-right:11px; padding-left:22px;"> 
<div id="entry">  
<blogger><div class="tit"><img src="http://i.imgur.com/xUPdbaV.gif" />   <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader><BlogItemCommentsEnabled> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></div>
<br>
<$blogitembody$>
<br></blogger><br>
<center><OlderPosts><a  href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center>
</div> 
</td></tr></tbody> 
</table> 
<div id="link" style="display: none;"> 
<div class="tit"><img src="http://i.imgur.com/KcWYJeX.gif" /> Exchanged Link </div><br>
<center><img src="http://data.whicdn.com/images/50579239/tumblr_mh8zi8w3r11ra5z2bo1_500_large.jpg"/></center><br>

<br>
<br>
<a target="_blank" class="link" href="http://fatinhalid.blogspot.com/"> AtinVIP</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a>
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a>
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 
<a target="_blank" class="link" href="http://blogspot.com/">Next</a> 

<br><br>
<blockquote>Want to exchanged Link, leave your footstep at my cbox :)</blockquote>
</div>

<div id="about" style="display: none;"> 
<div class="tit"><img src="http://i.imgur.com/WD1eKhB.gif" /> Meet the owner here </div><br> 
<center><img src="http://data.whicdn.com/images/50678203/tumblr_mh9ht1B7XB1rf92dbo1_500_large.png"/></center><br>
<b>Name</b> : yours / famous as<br>
<b>Age</b> : yours<br>
<b>Adress</b> : yours<br>
<b>Fav.food</b> : yours<br>
<b>Fav.drink</b> : yours<br>
<b>Birthday</b> : yours<br>
<b>Born of place</b> : yours<br>
<b>Hobbies</b> : yours<br>
<b>Ambition</b> : yours<br>
<b>Fav.colour</b> : yours<br>
<b>Boyfriend</b> : yours<br>
<b>Fav.animal</b> : yours<br>
<b>No.tel</b> : yours<br>
<b>Friend</b> : yours<br><br>
<b>Likes</b><br>

<br>
<b>Hates</b><br>


<br>
<blockquote>PUT ABOUT YOU</blockquote>
<br> 
<br>
<br>
</div></div></div></div>
<div id="diary" style="display: none;"> 

<blogger><div class="tit"><img src="http://i.imgur.com/P787mzf.gif"/>  <BlogItemTitle><$BlogItemTitle$></BlogItemTitle>
</div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader><BlogItemCommentsEnabled> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></div>
<br>
<$blogitembody$>
<br></blogger><br>
</div> 
<div id="rules" style="display: none;"> 
<div class="tit"><img src="http://i.imgur.com/P787mzf.gif" /> Tutorial & Goddies !</div><br> 
<div class="separator" style="clear: both; text-align: left;"> 
<center><img src="http://data.whicdn.com/images/20190715/tumblr_lwxintYVWq1qi23vmo1_500_large.jpg"/></center><br>

<u>Tutorials For Blog</u>

<li><a href="http://fatinhalid.blogspot.com/"> Tutorial: Coming Soon!</a></li>
<li><a href="http://fatinhalid.blogspot.com/"> Tutorial: Coming Soon!</a></li>
<li><a href="http://fatinhalid.blogspot.com/"> Tutorial: Coming Soon!</a></li>
<li><a href="http://fatinhalid.blogspot.com/"> Tutorial: Coming Soon!</a></li>
<li><a href="http://fatinhalid.blogspot.com/"> Tutorial: Coming Soon!</a></li>
<li><a href="http://fatinhalid.blogspot.com/"> Tutorial: Coming Soon!</a></li>
<br>

</div> </div></div>
</table>
<div style="margin-top:-10px;margin-bottom: 0px;">
<center>
<img class="header" src="http://i.imgur.com/5aR2bct.png"width="937"/>
</center>
</div>
<script type="text/javascript" src="http://www.blogger.com/static/v1/common/js/3407999231-csitail.js"></script> 
<script type="text/javascript">BLOG_initCsi('classic_blogspot');</script></body> 
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-5/cur492.cur), progress;
}
</style>
</html>

Silakan Sahabat.....Bisa kalian modifikasi sesuka kalian,kok!Oh ya,kalau begitu,saya buka jasa pembelian Skin aja XD Skinnya dibayar pake picture apa aja XD atau bisa juga pake SKIN BLOG PUNYA DIA SENDIRI 

No comments:

Post a Comment

Hello there guys.If you comment,then i will give you 1 points.I will tag you.