Home Owner Tutobies Other Friends Themes

Senin, 28 Desember 2015

Cara Membuat Blogskins


  Hai teman-teman! Nanda request cara membuat blogskins, sekarang aku post caranya. Yuk bagi teman-teman yang ingin membuat blogskins read more!


1. Klik ini untuk preview sekaligus untuk mengedit kode-kode skins dibawah ini. Lalu hapus semua kodenya.

Perhatikan catatan berikut
kode warna merah ganti dengan url sebuah gambar sesuai keterangan
kode warna biru ganti dengan url background
kode warna hijau ganti dengan jenis font kamu
kode warna fuchsia ganti dengan kode warna kode warna bisa dicari disini
kode warna kuning ganti dengan ukuran sesuai keinginan kamu
kode warna aqua ganti dengan jenis border kamu
kode warna highlight red

2. Copy kode-kode dibawah ini lalu copy paste di tempat yang kalian klik tadi (maksudnya ini)
<html>
<head><link href='URL FAVICON'/>
<center>
<center>
<img class="header" src="URL HEADER" /></center>
<title>TITLE BLOG ;</title>
<style type="text/css">
#navbar-iframe {
display: none;
}
3. Paste kode dibawah ini dibawah kode diatas tadi
body {
background:url(URL BACKGROUND);
font-family: Comic Sans MS;
font-size: 15px;
background-attachment:fixed;
text-align: normal;
cursor:url(URL CURSOR),auto;
}
a:link {
text-decoration: none;
color:#fea5c2;
}
a:hover{
color:#fed7e6;
}
</style>
4. Cari kode </style> taruh kode dibawah ini diatas kode </style>
.h1 {
font-family:Comic Sans MS ;
font-size:19px;
letter-spacing: 4px;
background:#fee6f2;
color: #fea5c2;
text-align: CENTER;
text-transform: normal;
}
.h2 {
margin:10px;
color: #fea5c2;
font-size:15px;
font-family: Comic Sans MS;
text-align:center;
letter-spacing: 2px;
background:#fed7e6;
line-height:3pt;
}
@font-face{font-family:lemoncanfly;src:url('http://static.tumblr.com/eq1rpir/A8nm517nt/lemons_can_fly.ttf')}
.h3 {
font-family: Comic Sans MS;
font-size: 7pt;
MARGIN-TOP:4PX;
border-TOP: 1px DASHED #fed7e6;
text-transform: normal;
text-align: CENTER;
PADDING:3PX;
BACKGROUND:#FFFFFF;
MARGIN-BOTTOM:12PX;
border-bottom: 2px DASHED #fed7e6;
}
a.button {
background:#fea5c2;
width:100px;
height: 35px;
display:inline-block;
text-align:center;
color:#ffffff;
margin-bottom:2px;
font:20px Comic Sans MS;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
cursor:pointer;
}
a.button:hover {
background:#fed7e6;
color:#fea5c2;
}

5. Taruh kode dibawah ini dibawah kode </style>
<!-- --><style type="text/css">@import url(https://www.blogger.com/static/v1/v-css/navbar/3334278262-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>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
        gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
          if (gapi.iframes && gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: 'https://www.blogger.com/navbar.g?targetBlogID\0755605803147909773760\46blogName\75Pinky+Code\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75BLUE\46layoutType\75CLASSIC\46searchRoot\75//ranpinkcode.blogspot.com/search\46blogLocale\75in\46v\0752\46homepageUrl\75http://ranpinkcode.blogspot.com/\46vt\0752861300939067939955',
                where: document.getElementById("navbar-iframe-container"),
                id: "navbar-iframe"
            });
          }
        });
      </script>
<script language=javascript>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com/
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
<table style="font-size: 11px; LETTER-SPACING:1PX;color: #000; line-height: 16px; background:#ffffff; border:5px solid #fed7e6;border-top:0px;border-bottom:0px;border-radius:0px;" width="899" align="center"cellspacing="10">
<tbody>
<tr>
<center>
<div style="background:#fed7e6;padding-top:16px;padding-bottom:16px;  border-radius:0px;width:900px;">
6. Taruh kode dibawah ini dibawah kode yang diatas
<center>
<a class="button" onClick="document.getElementById('post').innerHTML=document.getElementById('profile').innerHTML" title="">ABOUT</a> <span style="padding:4px;"></span>
<a class="button" onClick="document.getElementById('post').innerHTML=document.getElementById('entry').innerHTML" title="">ENTRY</a> <span style="padding:4px;"></span>
<a class="button" onClick="document.getElementById('post').innerHTML=document.getElementById('tuto').innerHTML" title="">LINKS</a> <span style="padding:4px;"></span>
</center>
</div>
</div>
</center>
<div id="profile" style="display: none;">
<div class="h1">
ABOUT</div>
<div class="h3">
Wanna know me?</div>
<br>
ISI MENU
<div class="h3">
Credits more;</div>
<center></center>
<center>
Template By :<a href="http://adillikanaswa.blogspot.com/ ">Resti</a></center>
<center>
</div>
<div id="entry" style="display: none;">

<blogger><div class="h1">
<blogitemtitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h3">
<blogdateheader><$BlogDateHeaderDate$></BlogDateHeader> • <$BlogItemDateTime$> • <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</span></a></BlogItemCommentsEnabled> </div>
<$BlogItemBody$></br></blogger><br><center>
<olderposts><a href=<$OlderPosts$>>PAST</a> </OlderPosts> <newerposts> • <a href=<$NewerPosts$>>FUTURE</a></NewerPosts></center>
</div>
</div>
<div id="tuto" style="display: none;">
<div class="h1">
LINKS</div>
<div class="h3">
Exchange link with me?</div>
<br>
<center></center>
<center>
<br>
ISI MENU
<script type="text/javascript" src="https://www.blogger.com/static/v1/common/js/168336579-csitail.js"></script>
<script type="text/javascript">BLOG_initCsi('classic_blogspot');</script></body>
<td valign="top" style="width:530px; padding-left:5px; border-right:1px dashed #fed7e6; padding-bottom:5px; box-shadow:0px 0px 5px #ffbbbb; padding-right:15px; ">
<div id="post">
<blogger><div class="h1">
<blogitemtitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h3">
<blogdateheader><$BlogDateHeaderDate$></BlogDateHeader> • <$BlogItemDateTime$> • <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</span></a></BlogItemCommentsEnabled> </div>
<$BlogItemBody$></br></blogger><br><center>
<olderposts><a href=<$OlderPosts$>>PAST</a> </OlderPosts> <newerposts> • <a href=<$NewerPosts$>>FUTURE</a></NewerPosts></center>
</div>
<td valign="top" style="line-height:15px; letter-spacing:1px; font-size:11px; width:240px; padding-left:10px;">
7. Taruh kode dibawah ini dibawah kode tadi
<div class="h2">
TITLE SIDEBAR</div>
ISI SIDEBAR</td> 
-ini adalah kode untuk sidebar kamu jadi untuk menambah sidebar, kamu harus menaruh kode itu lagi. dibawahnya.

8. Taruh kode dibawah ini dibawah kode diatasnya
</tr>
</tbody>
</table>
<center>
<div style="background:#fed7e6;padding-top:9px;padding-bottom:24px;border-radius:0px;width:900px;">
</center>
</br>
</html>
9. Selesai, tinggal kamu edit-edit. Bisa kamu tambah blockuote, tooltips, atau apalah untuk skins kamu. Kalau belum paham silakan tanya dikomentar
























Terima kasih telah membaca, tinggalkan komentar ya!

4 komentar:

  1. Thanks, kak. Membantu banget. Oiya, kak aku mau tanya. Saat aku pasang gadget di sidebar, cuma 2 gadget yang di sidebar, yang satu lagi di bawah tab. Kenapa, ya? Mohon jawabannya, kak.

    BalasHapus
    Balasan
    1. di template designer ya? Karena yang satunya buat pinggir body dan yang satunya untuk dibawah header yang biasanya dibuat navigation

      Hapus
    2. Oh begitu. Arigato, ya, kak! :)

      Hapus

^_^ Komentar yang Baik ya! ^_^

Related Posts Plugin for WordPress, Blogger...