Novita Lesyani☂: Membuat Blogskin Sendiri
     

Membuat Blogskin Sendiri


Haiiiii... Setelah cukup lama ga ngepost tutobies, kali ini aku mau ngepost tutorial cara membuat blogskin sendiri. Yaaaa, meskipun ini kodenya bukan dari aku, soalnya aku ga pernah buat blogskin karena males-_- waktu itu pernah sih, tapi sederhana cuman skin untuk ripper. Ini kodenya dari Safira^^ Safira sih udah sering buat blogskin, hehe. Oke, jadi aku cuman me-repost tutorial dari safira kodenya, kalo kata2nya aku usahain ku ubah2 biar kalian ga pusing dan mudah nerapinnya. Oiya, ini request dari Mardhiyah, dia blogger asal Malaysia. Nah, Mardhiyah semoga tutorial ini bisa membantu:)
Sebelum kalian membuat template blogskin kalian sendiri, aku sarankan untuk mengcopy terlebih dahulu seluruh kode template blog kalian yang lam lalu paste di tempat seperti MS Word. Kenapa? Agar, kalo terjadi kerusakan pada template blogskin yang kalian buat/kalian tidak bisa membuatnya, kan kalian masih bisa pake template kalian yang lama:)
1. Sediakan tempat untuk menaruh kode-kode membuat blogskin di bawah ini, bisa di MS Word/langsung di tempat kode template blog. Atau kalo kalian mau lebih mudah melihat preview kode-kode blogskin nya nanti, kalian bisa pergi ke sini (live preview html codes)
2. Copy kode di bawah ini, lalu paste di tempat kalian untuk menaruh kode blogskin.
<html>
<head>
<center><img src="URL HEADER" /></center>
<title>Judul Blog</title>
Merah: Url header untuk blogskin kalian.
Biru: Judul blogskin kalian.
3. Copy kode di bawah ini, lalu paste di bawah kode yang ada di nomor-2 tadi (usahakan spasi satu baris ya)
<style type="text/css">
#navbar-iframe {display: none;}
body {
background: url(URL BACKGROUND);
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
}
a:link, a:visited {
color:#ffa1c2;
-webkit-transition-duration: 0.5s;
text-decoration:none;
}
a:hover {
-webkit-transition-duration: 0.5s;
color: #666;
}
</style>
<body><br>
Merah: Url background blog kalian
Biru: Kode html warna link di blog kalian nanti. Mau lihat kode-kode warna? Ke sini
Hijau: Font untuk blogskin kalian dan ukuran font.
4. Cari kode </style> pada kode-kode yang sudah kalian copypaste tadi. Sudah ketemu? Kalo sudah, copy kode di bawah ini di atas kode </style> itu.
.mainblog {
background:#ffffff;
color:#666666;
padding:14px;
width:900px;
border-radius:10px;
text-align:justify;
}
.sidebarblog {
background: #ffffff;
color: #666666;
padding: 8px;
width: 240px;
border-radius: 10px;
text-align: justify;
}
.title {
color:#FF9FCC;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #ffa1c2;
}
.date {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
Ungu: Warna dan ukuran font di sidebar blogskin kalian.
Merah: Width (lebar) blog kalian.
Kuning: Width (lebar) untuk sidebar.
Hijau: Warna untuk post title (judul posting/entri)
*kalo yang tulisan "date" itu, berarti kode-kode dibawahnya berhubungan dengan tanggal di posting/entri kalian*
Untuk jenis font, font style, warna font, dll itu bisa kalian edit sendiri. Soalnya ribet kalo mau aku warnain satu-satu dan tulis keterangannya satu-satu. Kalian pasti tau kok;) Misalnya, warna dan keterangan yang udah aku tulis di atas itu kan ada, kalo ungu warna dan ukuran font sidebar berarti kode-kode yang di dekat warna ungu adalah kode-kode untuk sidebar:)
5. Cari kode <body>. Sudah ketemu? Kalo sudah, copy kode di bawah ini, lalu paste di bawah kode <body> tadi.
<td valign="top" width:550px;">
<div class="mainblog">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
</td>
Biru: kode ini adalah nama banyaknya komentar. Contoh, misalnya di posting/entri kalian ada 2 komentar, kan biasanya tulisannya "2 Comments". Nah, kalo kode biru itu kalian ganti dengan tulisan Friend(s), maka tulisan nama di komentar posting kalian adalah "2 Friend(s)"
Merah: Nama posting terbaru (newer) atau posting lama (older). Terserah mau diganti apapun, contoh "Past", dll.
6. Copy kode di bawah ini, lalu paste di bawah kode-kode tadi. (Ini adalah kode untuk gadget/elemen sidebar blogskin kalian)
<td valign="top" width="250px">
<div class="sidebarblog">
<div class="title">Tajuk Sidebar</div>
ISI SIDEBAR</div>
<br>
Ungu: kode html gadget/elemen sidebar kalian, misalnya di baris pertama sidebar, kalian mau menaruh chatbox, maka letakkan kode chatbox kalian pada kode berwarna ungu tersebut.
Hijau: Judul gadget/elemen sidebar kalian, kalo di kode ungu nya kalian taruh html chatbox, maka judulnya bisa chatbox, tagboard, shout here, dll terserah kalian.
Note:
Kalo kalian mau menaruh beberapa gadget/elemen di sidebar kalian, maka copy lagi kode yang sama seperti kode di nomor-6, lalu paste dibawahnya. Misal, kalian ingin menaruh gadget/elemen chatbox, ask.fm, dan credits, maka kalian copy kode di nomor-6 sebanyak 3 kali, namun judul dan kode html nya beda ya, harus di sesuaikan dengan kode gadget/elemen yang kalian mau:)
7. Copy kode di bawah ini, lalu paste dibawah kode-kode yang sudah kalian edit tadi.
</table></body></head></html>
Selesai sudah langkah-langkah membuat blogskin sendiri, kalo kalian mau menambah effect-effect lain, re-edit aja:) Kalo ada yang tidak di mengerti, silahkan tanya di komentar, aku akan jawab semampuku:) Huh, ribet banget buat tutorial ini#:-s Jadi yang mau repost jgn lupa credit ya! ;)

46 komentar:

  1. Makasih ya akak :') Terharu gituu dongg.

    BalasHapus
  2. Hai.. mau tanya apa klo pake blogskin maka harus selalu memakai "revert to classic templates" baru blogskin bisa bekerja dgn baik? Setahuku, klo pake "template update dr blog" buat masang gadget2 tinggal klik layout dan klik "add a gadget", nah klo pake blogskin "add a gadget"nya mesti pake kode2 seperti yg di tutorial di atas? Maaf banyak tanya maklum newbie blogskin :) Ditunggu jawabannya.. Tmksh

    BalasHapus
    Balasan
    1. Iya, kita harus pake classic template dulu:) Kalo pake blogskin, dan mau ngedit blog harus di kode template dan menggunakan kode html/script, soalnya di blogskins gaada tata letak/layout:) Maaf baru dibales, baru baca soalnya, hhe.

      Hapus
  3. Kak,. Mau tanya,. Kalau aku mau menambahkan Widget lain nya seperti Cbox,. Itu kan pakai Kode yang ter akhir,.. Di enter 1 baris atau engga?
    ^^Makasih kak

    BalasHapus
  4. YEYY KAKAK!!!!!!! AKUUU BISSSSSSSSSSSSSSSAAAAAAAAAAAA!!!!!!!!!!!!!!!!

    BalasHapus
  5. Nahhh sekarang aku baru bikin Skins Aku yang ke duaaaaaaaaaaaaaaaaa!!!!!!!!!!!

    BalasHapus
  6. makasih buat infonya bermanfaat bangett ^^ kunjungi blog saya yah^^ masih pemula nih saya XD
    http://exofanspage.blogspot.com/

    BalasHapus
    Balasan
    1. Alhamdulillah kalau bermanfaat :) okayyy

      Hapus
  7. makasih yaa... ini membantu banget:D

    BalasHapus
  8. Thanks, ya kak^^ Kak, kalau misalnya buat blogskins nya gagal, klo mau balikin ke template semula, gimana caranya?

    BalasHapus
    Balasan
    1. Ke template, udah gitu tingkatkan template aja Uz..^^ Nanti balik lagi (kalo ga salah) Sori aku yang jawab, hehehe^^

      Hapus
  9. Kak, kok aku enggak ada kodenya??

    BalasHapus
  10. Izin copy artikel ya kakkkk><

    BalasHapus
  11. yang no.6 ditaruh dimana ya?

    BalasHapus
  12. aku enggak ada kode style tuh kak

    BalasHapus
  13. aka jika kode tadi dah jadi, trs budak harus pastekan tu semua kode kat edit html??

    BalasHapus
  14. makasih kak... ^^ btw utk gambar itu brrti harus gnti jadi URL dlu ya?

    BalasHapus
  15. Kak, kalau bikin screenshotnya dimana? Di paint atau di photoscape?

    BalasHapus
  16. udah nyoba bisa sih. kak, kalo mau buat skins kayak punya kakak gimana ?

    BalasHapus
  17. Kak, cara ngasih kolom komentar gimana? Tolong dibales yaa :)

    BalasHapus
  18. kak kalo mau masang cursor gimana?

    BalasHapus
  19. abis di save muncul kata2 ini "Kesalahan saat mengurai XML, baris 55, kolom 29: Attribute name "width:550px" associated with an element type "td" must be followed by the ' = ' character.
    udah ane utak atik sendiri masih gagal, kenapa ya

    BalasHapus
    Balasan
    1. itu salah tempat. kamu belum 'kembali ke template klasik'..
      kalo pake skins, gini caranya:
      >dasbor
      >template (scroll ke bawah sampe nemu 'kembali ke template klasik' trs di klik
      >nah, ada kolom kode? taruh la kodenya di situ ^^
      >save!
      spt itu caranya ;)

      Hapus
  20. yg langkah nomor 3, warna blog itu warna untuk yg mananya ya?

    BalasHapus
  21. Bisa kak! tapi sederhana banget.... :(
    tpi gapapa deh.
    Thank you! ^^

    BalasHapus
  22. kak, gimana ya, biar sidebarnya nyambung sama body postingannya?

    BalasHapus
  23. Cara re-edit buat nambahin effect nya gimana kak??
    Visit blog aku yaa kak, pake skin turtorial dari kakak lho..
    http://mydiarystory226.blogspot.com/

    BalasHapus
  24. tengkiyu caranya. bermanfaat banget

    BalasHapus
  25. thanks, kak. aku sangat tertolong. titip salam juga untuk kak Safira

    BalasHapus
  26. thanks kak, sangat membantu! izin ambil kode-kodenya untuk di-repost ya kak!

    BalasHapus
  27. terima kasih ya kakak :) jadinya blogku bagus deh atas bantuan kakak :)

    BalasHapus
  28. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  29. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  30. Izin repost kak, pakai credit kok ^^

    BalasHapus

Still Confused? NoProb! Ask me here^^