Penerang Jalan

Tampilkan postingan dengan label template. Tampilkan semua postingan

Sabtu, 07 Desember 2013

Cara Mengubah Mengganti Template Blogger Blogspot

Bosan dengan template blog standar yang kamu gunakan? Ubahlah template blog kamu dengan template yang lebih menarik. Banyak situs yang menyediakan template-template blog, baik yang gratis maupun yang berbayar, seperti: BTemplates, eBlog Templates, Blogspot Templates, Islamic Templates, dll.

Untuk mengganti template blog, pertama-tama, bukalah situs yang menyediakan template dan pilihlah salah satu template sesuai dengan selera, kemudian download template tersebut kedalam komputer kamu. Jika file hasil download-nya berbentuk file compress (ZIP atau RAR) maka extract file tersebut.

Selanjutnya, masuklah kedalam Dasboard blogger kamu, kemudian pilih Tata Letak (Layout) dan pilih Edit HTML, seperti nampak pada gambar di bawah:

Klik Browse dan masukkan nama file template hasil download yang sudah diextract (awas jangan salah milih, pilihlah nama file yang ber-ekstensi XML) lalu Unggah (upload) file tersebut. Jika ada konfirmasi untuk menghapus beberapa widget, konfirmasikan saja. Adanya konfirmasi ini karena pada template tersebut masih menggunakan widget standar, seperti Labels, Blog Archieves, dan Followers. Kamu tinggal menambahkan widget baru sesuai yang kamu inginkan.
Nah, mudah kan? Selamat mencoba...

ReadFull Article ..

Kamis, 07 November 2013

Cara Bikin Template Blog Sendiri Bagian 3

Postingan kali ini adalah kelanjutan dari postingan sebelumnya tentang cara bikin template blog sendiri bagian 2. Kali ini kita akan memfokuskan pembahasan pada komponen lain di header. Silahkan simak tutorial berikut.

hasil template pada tutorial sebelumnya.

Kira kira seperti ini kode header secara keseluruhan.

#header-wrapper{

width:900px;

margin-bottom:10px;

border:1px solid #000000;}

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center; ( judul blog berada di tengah, ubah kekiri dengan menggunakan kode left )

color:$pagetitlecolor; ( untuk mengubah warna dari judul blog, ubah dengan warna yang di sukai )

}

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont; ( jenis font dari judul blog )

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:$pagetitlecolor; ( efek judul blog ketika di lewati pointer )

}

#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont; ( jenis font dari deskripsi blog )

color: $descriptioncolor; ( warna dari deskripsi blog )

}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

kode berwarna biru adalah kode yang biasa di edit untuk membagi 2 kolom header serta memodifikasi konten di dalam header secara keseluruhan.
kode berwarna ungu adalah kode untuk judul blog.
kode berwarna merah adalah kode untuk deskripsi blog
kode berwarna hijau adalah kode untuk efek hover pada judul blog
kode bercetak tebal digunakan untuk mengatur tampilan image atau gambar dalam header.

ganti kode di atas dengan kode berikut.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 10px;
border: 0px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
font-size:16px;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

hasilnya akan seperti ini

Setelah membahas tentang header, sekarang kita masuk di Heading.

Seperti yang saya jelaskan pada cara bikin template blog bagian 1, bahwa heading adalah untuk mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.
berikut kodenya

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

ubah dengan kode berikut

h2{
margin:1.5em 0 .75em;
font:$headerfont;
line-height:1.4em;
border-bottom:1px solid $bordercolor;
text-transform:uppercase;
font-size:17px;
letter-spacing:.2em;
color:#000}

kode bercetak tebal adalah kode yang di tambahkan.

berikut tempilannya...

Pada gambar di atas sobat sobat melihat beberapa konten di postingan dan di sidebar berada dalam satu kotak, kita akan mencoba membuat area postingan secara terpisah - pisah dengan mengedit kode berikut.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

ganti dengan kode berikut

.post {
margin-right:px;
margin-bottom:10px;
color:#000;
background:#ffffff;
line-height:20px;
border:1px solid #222;
padding:5px;
}
.post h1{
margin:5px;
padding-right:10px;
font-size:20px;
border-bottom:1px solid #000000;
font-weight:normal;
line-height:1.4em;
color:$titlecolor}

selesai dengan itu sekarang kita ke sidebar...

buat sidebar dalam kotak - kotak terpisah dengan mengedit kode berikut.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

ganti dengan kode berikut

.main .widget{
border:0px solid $bordercolor;
background:#FFF;
padding:0 0 0em}

.sidebar .widget {
margin-bottom:10px;
color:#000;
background:#ffffff;
border:1px solid #222;
padding:3px 10px 10px 10px;
}

dengan kode di atas, tampilan template nya akan jadi seperti ini..

tunggu kelanjutannya di cara bikin template bagian 4..

ReadFull Article ..

Gratis Blogger Template Main Kolom

Blogger Template Main Kolom adalah Template Minima Flatform Blogger / Blogspot yang saya modifikasi lagi supaya mengikuti perkembangan dan selera Blogger yang berkecimpung di Blogspot, ini merupakan Template pertama yang saya publish atau bagikan secara Gratis untuk kawan yang berminat mencoba, memakai pada Blog kawan dan untuk kawan Blogger Senior yang sudah ahli menciptakan Template saya mohon bimbingannya :z;

Nama Template : Main Kolom
Flatform : Blogger / Blogspot
Nama Author & URL : Blogger Edan

Deskripsi : Template Blogger Main Kolom adalah Blogger Template Gratis kalau kawan ingin mencoba Template Minima yang sudah dimodifikasi ini untuk Blog kawan silahkan, Gratis..... Blogger Template Main Kolom ini berisi beberapa fitur yang menarik seperti Menu Navigasi, Readmore Otomatis, Relatif Post dan lain sebagainya, membuat tampilan Blog dengan kesan beda dan seperti profesional.

Lisensi

Blogger Template Main Kolom merupakan Blogger Template Gratis yang bisa kawan pergunakan secara cuma-cuma, namun yang harus kawan patuhi adalah tidak boleh mengahapus Credit Link ke Desainer Template yang ada dibagian footer [kanan bawah] Template.

ReadFull Article ..