Tampilkan postingan dengan label bagian. Tampilkan semua postingan
Tampilkan postingan dengan label bagian. Tampilkan semua postingan
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.
Kira kira seperti ini kode header secara keseluruhan.
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
ganti kode di atas dengan kode berikut.
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
ubah dengan kode berikut
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.
ganti dengan kode berikut
selesai dengan itu sekarang kita ke sidebar...
buat sidebar dalam kotak - kotak terpisah dengan mengedit kode berikut.
ganti dengan kode berikut
dengan kode di atas, tampilan template nya akan jadi seperti ini..
tunggu kelanjutannya di cara bikin template bagian 4..
ReadFull Article ..
 |
| 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;
}
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;
}
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.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}
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;
}
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}
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;
}
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;
}
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..
Jumat, 25 Oktober 2013
Kombinasi Rangkaian Nama Bayi Perempuan dan Artinya 9
Nama Bayi Perempuan beserta artinya yang indah kembali blog Cara Cepat Hamil lanjutkan kembali. Berikut adalah contoh rangkaian nama umum untuk bayi perempuan umum yang indah, disertai artinya rangkaian namanya, dan dilengkapi penjelasan masing-masing komponen nama dan artinya. Sebelumnya bisa anda baca Kombinasi Rangkaian Nama Bayi Perempuan dan Artinya Bagian 8 tersebut dan semoga memberikan inspirasi.
Jovita Darla Callista = Anak kesayangan yang periang dan kecantikannya luar biasa
Jovita = Periang (Latin)
Darla = Anak kesayangan (Inggris, Prancis)
Callista = Kecantikan yang luar biasa (Yunani)
Julta Adamma = Anak remaja yang cantik
Julta = Remaja (Yunani)
Adamma = Anak yang cantik (Ibo)
Julta Brunella = Remaja yang berambut coklat
Julta = Remaja (Yunani)
Brunella = Berambut cokelat (Italia)
Juwan Rara Rasmini = Perempuan yang harum namanya dan jiwanya bersinar
Juwan = Harum
Rara = Perempuan
Rasmini = Yang bersinar
Kaila Kineta = Perempuan yang bagai mahkota menjadi pemimpin dengan semangat energik
Kaila = Mahkota
Kineta = Energik
Kalinda Labibah = Perempuan yang menjadi sumber kecerdasan bagai matahari
Kalinda = Matahari
Labibah = Cerdas
Kallista Sidra Philotra = Wanita dari bintang yang cantik dan saleh
Kallista = Cantik (Yunani)
Sidra = Wanita dari bintang (Latin)
Philotra = Saleh (Yunani)
Karaissa Naraya = Anak yang bercahaya dan beriman yang akan menjadi besar dan bahagia
Karaissa : Cahaya dan beriman (Kara dan Raissa)
Naraya : Bahagia dan besar (Nara dan Raya)
Kemala Leandra Mada = Perempuan yang tangguh dan mampu menciptakan kegembiraan
Kemala = Tumbuhan yang berkhasiat
Leandra = Seperti seekor singa
Mada = Kegembiraan
Kenar Sadina Ikanah
Kenar : Sinar rembulan
Sadina : Pemilik kebaikan
Ikanah : Berhati Penunjuk
Kenes Cahaya Dewi = Wanita yang bersinar, lincah, dan menawan
Kenes = Lincah dan menawan (Jawa)
Cahaya dewi = Wanita yang bersinar (Jawa)
Kenes Nisa = Wanita yang lincah, dan menawan hati
Kenes = Lincah dan menawan hati (Jawa)
Nisa = Wanita (Arab)
Keyne Anita = Sebuah intan yang agung dan mulia
Keyne : intan (Celtic)
Anita : agung dan mulia (Melayu)
Keysha Aqilla Reviera
Keysha : Pohon pelindung
Aqilla : Terhormat
Reviera : Nama bunga (Belanda)
Khalisa Naura Athifa = Wanita yang murni, suci dan penuh kasih sayang seperti bunga
Khalisa : Murni, suci
Naura : Bunga
Athifa : Penuh kasih sayang
Khalisah Aulia = Wanita yang cantik dan mulia
Khalisah : Cantik
Aulia : Mulia/wali
Kyati Nisa = Wanita dengan nama yang harum
Kyati = Nama yang harum (Jawa)
Nisa = Wanita (Arab)
Kyna Lituhayu = Wanita yang cantik rupawan
Kyna = Wanita (Yunani)
Lituhayu = Cantik rupawan (Jawa)
Kyna Lucette = Wanita sebagai pembawa cahaya
Kyna = Wanita (Yunani)
Lucette = Cahaya, pembawa cahaya (Inggris)
Kyna Querida = Wanita (kekasih) tersayang
Kyna = Wanita (Yunani)
Querida = Kekasih, yang tersayang (Spanyol)
Kynthia Rika = Perempuan yang menjadi penguasa bagai dewi bulan yang cantik
Kynthia = Dewi bulan
Rika = Penguasa, pemimpin
Labiba Nasjmi Humaira = Perempuan yang bagaikan bintang putih kemerahan yang sehat akal dan cerdas
Labiba = Sehat akal dan cerdas cerdik
Nasjmi = Bintang
Humaira = Putih kemerahan
Lacita Alysia = Memiliki pemikiran yang dalam
Lacita : pemikiran yang dalam (Jawa)
Alysia : memiliki (Yunani)
Lakeisha Faranissa = Wanita gembira yang hidup sejahtera
Lakeisha = Hidup sejahtera
Faranissa = Wanita gembira
Lena Asha Nadine = Perempuan dengan cahaya kehidupan dan penuh harapan yang disucikan
Lena = Cahaya, sinar, terang
Asha = Kehidupan
Nadine = Penuh harapan
Lena Aurelia = Perempuan yang penuh dengan cahaya kebahagiaan
Lena = Cahaya, sinar, terang
Aurelia = Bahagia
Leonie Karia = Singa betina yang kuat
Leonie : singa betina (Perancis)
Karia : kuat (Jerman)
Liangyi Xianlun = Perempuan yang baik, sopan dan berparas cantik
Liangyi = Wanita yang baik
Xianlun = Ramah, sopan berparas cantik
Lina Aretina Saskia = Perempuan yang feminim dan berbudi luhur menjadi pelindung manusia
Lina = Cahaya, feminim, lembut
Aretina = Berbudi luhur
Saskia = Pelindung manusia
Langganan:
Postingan (Atom)