Pramudya Ksatria Budiman: template blogger

Showing posts with label template blogger. Show all posts

Template editchil advance instruction

Oke gan setelah sekian lama akhirnya link download template ini sudah ane sediakan langsung download aja ya gan.

Instruksi
untuk mengaktifkan widget latest news, silahkan masuk ke blogger kemudian atur layout klik edit pada widget latestnews kemudian copy code berikut ini :

<script src="http://wdesain.web.id/edikomputer/recentpost.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://www.edikomputer.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Keterangan :
warna biru merupakan jumlah komentar yang akan muncul silhkan ganti sesuai keinginan
warna merah silahkan ganti dengan url agan

Kemudian Untuk Recent Comment Silahkan copy kode berikut ini :

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://wdesain.web.id/edikomputer/recentcomment.js"></script>
<script type="text/javascript" src="http://www.edikomputer.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Kemudian Save

berikut link downloadnya

DEMO | DOWNLOAD

Add Comment

Pramudya Ksatria Budiman template blogger

Membuat menu navigasi

Setelah Kemarin Kita membahas tentang Style header dan logo kini kita lanjutkan ke bagian menu navigasi

menu navigasi berfungsi untuk menunjukan kepada pengunjung agar lebih mudah apa yang mereka cari, biasanya menu di tujukan untuk menampilkan kategory artikel atau artikel penting yang terdapat pada blog misalnya Home about, contact us dan lainya.

oke langsung saja kita buat stylenya, Cari kode berikut :

]]></b:skin>

kemudian copy code berikut ini diatasnya:

#menu-wrapper{background: #558701;margin:0 auto;text-align: left;color:#fff;width:900px;height:30px;}
#menu,#menu ul{list-style-type:none;list-style:none;position:relative;text-align:left;font-size:12px;font-family:Arial;font-weight:bold;padding:0px 1px;}
#menu a{height:24px;display:block;color:#fff;text-decoration:none;background:none;padding:5px 6px 1px 6px;border-right:1px solid #fff;}
#menu a:hover{ color:#000;}
#menu li{float:left;position:relative;padding:0px 0px}

kemudian kita akan buat kode HTML nya, cari kode ini :

<section id='mainwrap'>

kemudan copy kode ini diatasnya :

<div id='menu-wrapper'>
<ul id='menu'>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Contact Us</a></li>
<li><a href='/'>Edit sendiri ya gan</a></li>
</ul>
</div>

Save dan lihat hasilnya
sampe sini dulu tutorialnya besok kita lanjut lagi ya gan

Add Comment

Pramudya Ksatria Budiman template blogger

template editchil Advance

hai sobat blogger sudah lama saya tidak membuat template maklum lagi sibuk sama kerjaan nah oke sekarang saya ingin membagi-bagikan template baru lagi template ini saya beri nama editchil advance style karena template ini masih satu generasi dengan editchil yang kemaren-kemaren hanya saya tambahkan image style didalamnya

oke langsung saja lihat penampakannya ya


tampilan home page

tamilan post page

tampilan post komentar

menu hover

Nah gimana tertarik dengan template ini tunggu releasenya ya

Update Release : 26 Juli 2012
Template Instruction : http://www.edikomputer.com/2012/07/template-editchil-advance-instruction.html

DEMO | DOWNLOAD (Available)

Add Comment

Pramudya Ksatria Budiman template blogger

membuat header dan logo di blogspot

Oke kini kita lanjutkan pelajaran membuat template bloggernya ya,,, kemarin kita sampai pada membuat style body dan wrapperdan sekarang kita akan coba belajar membuat header.

Header berfungsi untuk menampilkan judul blog atau logo dan sekarang sudah berkembang untuk di buat space adsense namun kita belajar dasarnya dulu biar nanti bisa di kembangkan lagi

oke sekarang tambahkan kode css ini di bawah kode yang kemarin kita buat tepatnya di bawah kode wrapper kemarin

#headerwrap {
background:#000;
height:90px;
width:900px;
}

.logo{
margin:0 auto;
text-align: left;
float:left;
color:#fff;
height:90px;
width:300px;
}

headerwrap berfungsi untuk membatasi semua yang ada pada header seperti logo, adsense dan kalo agan mau nambahin widget juga bisa yang penting jngn melebihi kapasitas headerwrap ini
ket :
#headerwrap
background:#000 : berarti background yg kita buat berwarna hitam kamu bisa ganti sesuai selera
height dan width : adalah tinggi dan lebar area header

.logo
text-align: left; : format tulisan logo adalah rata kiri jika kamu tidak ingin menggunakan logo bitmap dengan warna teks putih
float:left : letak logo berada di sebelah kiri

width:300px;

: nah dengan lebar 300 berarti kita msh punya space 600 dan itulah space ads yang nanti kita kembangkan tapi nanti aja ya,,

apakah sudah cukup sekian? oh tentu saja belum karena kita baru buat cssnya nanti kita panggil kode css tadi ke html untuk di tampilkan di blog oke sekarng cari kode :

<div id='wrapper'>

kemudian copy code ini di bawahnya :

<div id='headerwrap'>
<div class='logo'>
<b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Theme Style (Header)' type='Header'/>
</b:section>
</div>
</div>

lo gan itu yg logo kok pake class nggak pake id?nah itu dia perbedaan class sama id kalo klass css di tandai dengan tanda (.) (lihat kode css di atas) sedangkan kalo id itu di tandai dengan tanda (#)
(lihat kode css di atas) nah sekarang kita akan memasang logonya silahkan klik menu * Page Elements nah disana akan ada 1 widget (header) klik edit kemudian upload logo kamu kalo belum punya pake logo ini aja nggak papa

kalo udah save dan lihat hasilnya
oke sampai disini dulu ya nanti kita lanjut lagi kasih komentar dulu biar semangat kasih tutorialnya soalnya kalo nggak ada komentarnya berarti nggak ada yg berminat tuk belajar bikin template dan saya nanti juga males nulis lagi kalo nggak ada yg baca kan percuma ...

selamat belajar semoga sukses

Add Comment

Pramudya Ksatria Budiman template blogger

Free Template blogger editchil v1.2 minisite edition

tambah template lagi ni versi terbaru dari editchil yaitu template editchil v1.2 minisite edition, template ini sangat unik karena ukuranya yang kecil dengan dimensi lebar 600px

langsung liat aja screenshotnya gan

tampilan homepage

tampilan post page

DEMO | DOWNLOAD (Available)

Add Comment

Pramudya Ksatria Budiman template blogger

membuat template Blogspot : style wrapper

masih dengan edikomputer sebelum membca artikel ini harap membaca pada tutorial sebelumnya agar tidak terjadi kesalahan pada saat memasukan kode dan lain sebagainya.

wrapper merupakan pembatas blog dimana kita bisa ukuran konten blog kita, nah disinilah nantinya kita akan menempatkan post artikel widget / sidebar untuk lebih jelasnya lihat gambar dibawah ini

Keterangan :

warna ungu : merupakan area body
warna merah : merupakan bagian wrapper
warna biru : merupakan area header
warna hijau : merupakan area konten post/ artikel
warna kuning; merupakan area sidebar/ widget
warna hitam : merupakan area footer

Dari uraian di atas tentu kmu sudah mengerti area-area yang akan kita kerjakan dan template ini bisa kamu modif sesuai kinginan dan tentu akn kita bahas pada sesion berikutnya

oke kembali ke topik yaitu kita akan membuat wrapper atau pembatas area antara body dan konten berarti kita akan mengedit bagian yang berwarna merah oke kita akan langsung membuat selector untuk wrapper

cari kode :

]]></b:skin>

Copy kode berikut di atasnya :

#wrapper{
background:#fff;
border:1px solid #999;
margin:0 auto;padding: 10px 0 10px 0;
width:900px;
}

Keterangan :

#wrapper : merupakan selector id yang nantinya akan kita panggil untuk menampilkannya secara visual
background:#fff; : merupakan pengaturan dari id wrapper yang akan menampilkan warna background disini saya menggunakan warna putih
border:1px solid #999; : merupakan garis batas wrpper agar kita bisa mengetahui pembtasnya
margin:0 auto;padding: 10px 0 10px 0; ; merupakan jarak antara atas, bawah, kanan dan kiri dan saya memberi jarak 10 px
width:900px; : merupakan lebar dari wrapper nah disinilah konten tersebut di batasi dan saya memberi ukuran 900px

save dulu templatenya.
kok nggak ada perubahan? he..he.. nanti dulu sekarang kita akan memanggil selector wrapper ke html

cari kode

<body>

kalo sudah ketemu paste kode ini di bawahnya :

<div id='wrapper'>

dan terakhir jngan lupa berkan penutup di atas kode

</body>

ini kodenya :

</div>

save dan lihat hasilnya.....

Add Comment

Pramudya Ksatria Budiman template blogger

Cara membuat template Blogspot : Style Body

Oke gimana udah di tes templteny oke sekarang kita lanjut ya sekarang kita akan edit style body style body disini adalah tampilan seluruh halaman blog kita mulai dari warna dasar atau background blog dan jenis font yang akan kita gunakan oke langsung ane tambahin kodenya lihat kode template blank yang sudah saya berikan dan pastikan kamu belum merubah sama sekali cari kode :

]]></b:skin>

kemudian copy paste kode ini tepat diatasnya

body {
background: #fff;
font-family: verdana;
color: #000;
}

Keterangan :

teks warna merah adalah warna background tmplate kamu dan kamu bisa mengganti kode warna sesuai selera
teks warna hijau adalah jenis font yang secara default di gunakan pada template
teks warna biru adalah kode warna untuk teks dari template kamu

Add Comment

Pramudya Ksatria Budiman template blogger

Cara membuat template Blogspot : style author

pada halaman sebelumnya saya sudh menjelaskan template dasar blogspot artinya template tersebut adalah template dasar dan sekarang edikomputer akan melanjutkan tutorialnya silahkan disimak ya

setiap template memiliki informasi template tersebut antara lain

nama template (name)
pemilik template (author)
alamat url pemilik (link)
tanggal rilis (Date)
kamu bisa mnambahkan informasi yang dibutuhkan

oke langsung saja ya bagaimana kode authornya

cari kode ini

/*bagian ini untuk css*/

hapus kode tersebut dan ganti dengan kode ini

/*-----------------
Blogger Template Style
Name: theme style (Ganti dengan nama template kamu)
URL: http://www.edikomputer.com/ (Ganti dengan url kamu)
author : edi prasetiyo ( Ganti Dengan Nama kamu)
design : edikomputer tm (ganti dengan siapa yang membut desain template ini)
version : 1.0 (versi pertama yang kamu buat)
------------------------*/

kemudian save dan template kamu sudah memiliki nama sendiri, teks warna merah bisa kamu ganti sesuai selera

lanjut ke halaman berikutnya ya gan. kasih komentarnya ya sebagai apresiasi biar semangat melanjutkan step by step tutorialnya hargai author yg telah meluangkan waktunya

Add Comment

Pramudya Ksatria Budiman template blogger

Iklan