D'JokoScript: 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>

</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:

a n a n d a3 Januari 2016 pukul 01.43
Thanks... Membantu ^.^
BalasHapus
Balasan
Rin6 Maret 2016 pukul 23.53
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

Tambahkan komentar

^_^ Komentar yang Baik ya! ^_^

Senin, 28 Desember 2015

Cara Membuat Blogskins

4 komentar: