Home Posts filed under Template
Showing posts with label Template. Show all posts
Showing posts with label Template. Show all posts

Cara Membuat Logo Blog menggunakan CSS dan HTML

Habis Baca, Jangan lupa tinggalkan komen yaa..
Posted by Desain Kode Tuesday, December 29, 2015 2 comments
Logo merupakan salah satu hal yang sangat penting bagi sebuah blog, web atau sebuah perusahaan, dimana logo yang baik dapat menjadi ciri khas tersendiri dari blog atau perusahaan tersebut. Bahkan banyak dari beberapa perusahaan-perusahaan terkemuka didunia rela menghabiskan jutaan dollar hanya untuk membut logo brand mereka. Contohnya saja pada Logo Pertamina yang menghabiskan dana sebesar Rp 2,5 milyar dalam pembuatan Logo baru (sumber). Dalam mendesain template blogspot, kebanyakan blogger hanya dengan menggunakan tulisan atau gambar saja. Dulunya logo blog DesainKode juga menggunakan tulisan, namun dalam pengembangannya dapat kita lihat di bagian header logo blog ini sudah berubah murni dengan menggunakan CSS dan HTML meskipun hanya dibuat dengan metode trial and error saja. Hanya logo blog DesainKode ini yang akan saya jelaskan cara mendesainnya.
membuat logo blog menggunakan css dan html

Ada beberapa keunggulan jika menggunakan logo dengan CSS dan HTML dibandingkan dengan logo bergambar yaitu sudah jelas dapat membuat tampilan blog menjadi ringan karena browser tidak perlu menampilkan gambar yang bisa membuat blog menjadi berat, disamping itu logo dengan kode CSS juga dapat didesain menjadi animasi sederhana. Sebelum melihat penjelasan logo Blog ini, ada baiknya kita mengenal beberapa logo yang sudah dibuat sebelumnya oleh beberapa orang :

1. Logo Microsoft

cara buat logo dari css

logo {
    font-size:40px;
    color: #747273;
    line-height: 1.5em;
    padding-left: 1.7em;
}
logo:before {
    content: '\2006';
    position: absolute;
    height: 0.095em;
    left: 0;
    box-shadow: 0.35em 0.35em 0 0.25em #f8510c,
                1.05em 0.35em 0 0.25em #7eba00,
                0.35em 0.97em 0 0.25em #00a3f4,
                1.05em 0.97em 0 0.25em #ffba00;   
}


<logo>Microsoft</logo>

itu kode CSS dan HTML yang digunakan untuk Logo Microsoft. Bagaimana? terlihat begitu simpel? Jelas sangat smpel dibandingkan kalau ingin menggunakan gambar.
DEMO

2. Logo Android

cara buat logo android dengan css dan html


div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}

.android{
    height: 404px; width: 334px;
    margin: 100px auto;
    
}
.head{
    width: 220px; height: 100px;
    top: 32px;
    
    border-radius: 110px 110px 0 0;
    -moz-border-radius: 110px 110px 0 0;
    -webkit-border-radius: 110px 110px 0 0;
    
    -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
    background: #fff;
    width: 20px; height: 20px;
    position: absolute; top: 42px;
    
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}

.l_ant, .r_ant{
    width: 6px; height: 50px;
    position: absolute; top: -34px;
    
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.l_ant {
    left: 50px;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}
.r_ant {
    right: 50px;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.body{
    width: 220px; height: 184px;
    top: 40px;
    
    border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
    width: 50px; position: absolute;
    -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
    height: 150px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
    height: 80px; top: 182px;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}

.head:hover {
    -webkit-transform: rotate(-5deg) translate(-4px, -8px);
    -transform: rotate(-5deg) translate(-4px, -8px);
    -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
    -webkit-transform: rotate(15deg) translate(-14px, 0);
    -transform: rotate(15deg) translate(-14px, 0);
    -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
    -webkit-transform: rotate(-30deg) translate(30px, 0);
    -transform: rotate(-30deg) translate(30px, 0);
    -moz-transform: rotate(-30deg) translate(30px, 0);
}


<div class="android">
    <div class="head">
        <div class="l_ant"></div>
        <div class="r_ant"></div>
        <div class="l_eye"></div>
        <div class="r_eye"></div>
    </div>
    <div class="body">
        <div class="l_arm"></div>
        <div class="r_arm"></div>
        <div class="l_leg"></div>
        <div class="r_leg"></div>
    </div>
</div>

Untuk logo Android ini, struktur kode CSS dan HTML nya agak lebih panjang karena menggunakan sedikit animasi.
DEMO

3. Logo Blog DesainKode

/* Header Logo */
#header-logo {
    position: relative;
    width: 84px;
    height: 35px;
    margin: 10px 30px 5px;
}
#header-logo span,
#header-logo span:before,
#header-logo span:after {
    content: "";
    position: absolute;
    display: block;
}
#header-logo .char-k {
    height: 40px;
    border: 6px solid #46A3FA;
    top: 5px;
    bottom: 0;
    left: 39px;
}
#header-logo:hover .char-k {
    height: 40px;
    border: 6px solid #ED1C24;
    top: 5px;
    bottom: 0;
    left: 39px;
}
#header-logo .char-d {
    border: 11px solid #46A3FA;
    border-radius: 0 10px 10px 0;
    top: 5px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width:14px;
}
#header-logo:hover .char-d {
    border: 11px solid #ED1C24;
    border-radius: 0 10px 10px 0;
    top: 5px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width:14px;
}
#header-logo:hover .char-e {
    border: 11px solid black;
    border-color:#ED1C24;
    border-left: none;
    border-right: none;
    top: 5px;
    right: 30px;
    bottom: 0px;
    left: 50px;
    height: 30px;
    width: 18px;
}
#header-logo:hover .char-e:before {
    border-top: 11px solid black;
    border-color:#ED1C24;
    top: 9px;
    right: 30px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 12px;
}
#header-logo:hover .char-c {
    height: 40px;
    border: 6px solid #46A3FA;
    top: 5px;
    bottom: 0;
    left: 71px;
}
#header-logo:hover .char-c:before {
    border: 11px solid #46A3FA;
    border-right:none;
    border-bottom:none;
    top: 3px;
    bottom: 0px;
    left: 2px;
    height:25px;
    width: 25px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#header-logo:hover .char-d2 {
    border: 11px solid #46A3FA;
    border-radius: 0 10px 10px 0;
    top: 5px;
    bottom: 0px;
    left: 159px;
    height: 30px;
    width:14px;
}
#header-logo:hover .char-e2 {
    border: 11px solid #46A3FA;
    border-right: none;
    top: 5px;
    right: 30px;
    bottom: 0px;
    left: 198px;
    height: 30px;
    width: 18px;
}#header-logo:hover .char-e2:before {
    border-top: 11px solid #46A3FA;
    top: 9px;
    right: 30px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 14px;
}
#header-logo .char-symb {
    position: absolute;
    top: 7px;
    left: 55px;
    width: 30px;
    height: 30px;
    border: 8px solid #ED1C24;
    border-top-color:white;
    border-right-color: white;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#header-logo .char-symb:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 7px;
    left: 11px;
    width: 23px;
    height: 23px;
    border: 2px solid transparent;
    border-bottom-color: black;
    border-left-color: black;
    -webkit-border-radius: 42px;
    -moz-border-radius: 42px;
    border-radius: 42px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
#header-logo .char-symb:after {
    position: absolute;
    display: block;
    content: "";
    top: 5px;
    left: 9px;
    width: 10px;
    height: 10px;
    background-color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#header-logo .char-symb span {
    content: "";
    position: absolute;
    display: block;
    top: -6px;
    left: 19px;
    right: 4px;
    width: 10px;
    height: 10px;
    background-color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#header-logo:hover .char-symb:before {
    left:5px;
    bottom:4px;
    border-bottom-color: #ED1C24;
    border-left-color: transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
#header-logo .char-symb .mata2 {
    top: -3px;
    left: 22px;
    right: 7px;
    width: 4px;
    height: 4px;
    background-color: #ED1C24;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#header-logo .char-symb .mata1 {
    top: 8px;
    left: 12px;
    width: 4px;
    height: 4px;
    background-color: #ED1C24;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    z-index: 1;
}
#header-logo:hover .char-symb:after{
    top:11px;
    left:5px;
    background-color: #5498C9;
}
#header-logo:hover .char-symb span {
    background-color: #5498C9;
    top:11px;
    left:22px;
}
#header-logo:hover .char-symb .mata2{
    background-color: blue;
    top:14px;
    left:25px;
}
#header-logo:hover .char-symb .mata1 {
    background-color: blue;
    top:14px;
    left:8px;
}
#header-logo:hover .char-symb,
#header-logo:focus .char-symb,
#header-logo.focused .char-symb {
    top: 5px;
    left:106px;
    width: 35px;
    height: 35px;
    border-color: #46A3FA;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);

  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 0.2s;
  animation-duration: 1s;
  animation-delay: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  50% {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
  }
}
#header-logo .char-symb,
#header-logo .char-d,
#header-logo .char-e,
#header-logo .char-k,
#header-logo .char-c,
#header-logo .char-d2,
#header-logo .char-e2,
#header-logo .char-symb:after,
#header-logo .char-symb span {
    -webkit-transition: all 1.5s ease-out;
    -moz-transition: all 1.5s ease-out;
    -ms-transition: all 1.5s ease-out;
    -o-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
}

#header-logo .char-e {
    border: 11px solid white;
    border-left: none;
    border-right: none;
    top: 5px;
    right: 30px;
    bottom: 0px;
    left: 150px;
    height: 30px;
    width: 18px;
}
#header-logo .char-e:before {
    border-top: 11px solid white;
    top: 9px;
    right: 30px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 12px;
}
#header-logo .char-c {
    height: 40px;
    border: 6px solid white;
    top: 5px;
    bottom: 0;
    left: 171px;
}
#header-logo .char-c:before {
    border: 11px solid white;
    border-right:none;
    border-bottom:none;
    top: 3px;
    bottom: 0px;
    left: 2px;
    height:25px;
    width: 25px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#header-logo .char-d2 {
    border: 11px solid #46A3FA;
    border-radius: 0 10px 10px 0;
    top: 5px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width:14px;
}
#header-logo .char-e2 {
    border: 11px solid white;
    border-right: none;
    top: 5px;
    right: 30px;
    bottom: 0px;
    left: 240px;
    height: 30px;
    width: 18px;
}#header-logo .char-e2:before {
    border-top: 11px solid white;
    top: 9px;
    right: 30px;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 14px;
}

<a href='http://desainkode.blogspot.co.id/' id='header-logo'><span class='char-k'></span><span class='char-d'></span><span class='char-e'></span><span class='char-c'></span><span class='char-d2'></span><span class='char-e2'></span><span class='char-symb'><span></span><span class='trip'></span><span class='trap'></span></span></a>

DEMO

Kode CSS Logonya masih sedikit berantakan, tapi anda masih bisa untuk dijadikan bahan pembelajaran dalam membuat desain logo yang lain. Berikut ini beberapa penggunaan kode CSS yang dipakai dalam membuat Logo blog DesainKode :

  • "#" dan "." : Tag selector untuk class (#) dan id (.)
  • width dan height : Mengatur lebar dan tingginya
  • position : Mengatur letak posisi logo
  • top, right, bottom dan left : Mengatur jarak dan posisi antar setiap elemen
  • margin : Mengatur jarak antar elemen
  • border : Semua karakter dalam Logo ini menggunakan border dalam membuat huruf dan simbolnya.
  • border-radius : Untuk membengkokkan garis di bagian tepi. Bisa juga dipakai untuk membuat lingkaran.
  • webkit, moz, ms dan o : kode tampilan untuk setiap browser. (webkit untuk chrome dan safari, moz untuk mozilla, ms untuk internet explorer dan o untuk opera)
  • transform : Memodifikasi letak kordinat elemen dalam logo
  • transition : Mengatur jenis perpindahan saat disentuh (hover)
  • animation : Mengatur jenis animasinya
  • keyframes : Juga termasuk untuk mengatur animasi elemen dalam setiap waktu
  • hover : tampilan elemen pada saat disentuh
Dalam mendesain Logo dengan animasi menggunakan CSS tentunya yang paling penting adalah menggunakan kode "hover" namun yang perlu diperhatikan terlebih dahulu adalah menentukan/membuat tampilan awal kode, setelah itu baru menentukan tampilan saat disentuh (hover) kemudian menentukan animasi dan transitionnya yang akan digunakan.

Ada banyak kode-kode CSS yang masih bisa di gunakan dalam membuat Logo. Namun semua yang ingin digunakan tentunya harus sesuai dengan kebutuhan kita juga. Seilahkan buat logo css anda sendiri, mulailah membuat sedikit-demi sedikit, sampai menghasilkan sebuah Logo yang baik dan menarik.
Categories: , ,

Cara Membuat Web Tempat Menguji CSS, JS dan HTML

Habis Baca, Jangan lupa tinggalkan komen yaa..
Posted by Desain Kode Saturday, December 26, 2015 0 comments
Di bagian akhir pada artikel Cara Mengedit Blog Dengan Mudah, saya juga mengatakan akan menulis artikel bagaimana caranya membuat sebuah web atau blog untuk mengetes/menguji kode-kode seperi CSS, Javascript dan HTML dalam mendesain blog. Tujuan dari pembuatan Web untuk menguji CSS, JS dan HTML ini tidak lain hanya untuk mempersiapkan desain dengan cepat sebelum diterapkan ke blog, karena akan lebih memakan waktu yang lama jika melakukan pengeditan template di blogspot dengan metode trial and error. Saya juga nantinya akan berikan filenya untuk didownload sehingga dalam mode offline juga anda bisa menggunakannya.

Ada banyak situs web yang serupa dengan yang akan kita buat disini. Jadi semuanya tergantung dari diri sendiri saja yang mana yang akan digunakan. Namun, sebelum kita membuatnya, mungkin kita bisa mengenal beberapa situs serupa tersebut yang banyak digunakan orang-orang :

1. JSFiddle

Cara Membuat Web Tempat Menguji CSS, JS dan HTML seperti JSFiddle

Menurut saya, JSfiddle yang paling banyak digunakan coder-coder di dunia. Ini juga merupakan tempat favorit saya dalam melakukan koding. Ada banyak keunggulan JSFiddle dibanding dengan yang lainnya, diantaranya tampilan 4 panel editor (CSS, JS, HTML dan Pratinjau) yang dapat dilihat sekaligus dalam satu halaman dan dengan cepat kita juga dapat mengubah ukuran panel sesuai kebutuhan kita. Sistem tata letak JSfiddle benar-benar fleksibel dari para pesaingnya. Selain itu JSFiddle juga dapat menyimpan hasil koding kita, tentunya dengan mendaftar dulu di webnya. Hanya saja ada kekurangan dari JSFiddle dimana tidak adanya fitur auto update untuk melihat tampilan. Jadi setelah mengedit kode, harus klik "Run" dulu untuk melihat tampilannya.

2. CSSDESK

Cara Membuat Web Tempat Menguji CSS, JS dan HTML seperti cssdeck

CSSDESK merupakan situs yang tertua dari situs lain yang serupa. Tidak banyak yang saya tahu tentang CSSDESK karena saya tidak pernak menggunakannya. Bisa di lihat, ada 3 panel editor utama yaitu CSS, HTML dan Pratinjau yang mana ukurannya juga bisa diubah dengan cepat. Tampilan CSSDESK juga diwarnai dengan adanya menu untuk mengganti background pada pratinjau. Selain itu, kita juga bisa download apa saya yang kita kerjakan. Kekurangannya? tentu saja kita tidak melihat adanya panel Javascript. Jadi CSSDESK hanya murni berfokus pada CSS dan HTML

3. JSBIN

Cara Membuat Web Tempat Menguji CSS, JS dan HTML seperti JSBin

Tempat populer kedua setelah JSFiddle adalah JSBin. Kelebihannya ada pada tampilan yang sederhana dimana ada beberapa tombol untuk mengatur panel editor yang ingin ditampilkan. Keunggulannya dibanding JSFiddle, adalah ketika melakukan reload ulang page, dimana kode-kode yang telah berada dalam panel editor CSS, JS dan HTML tidak akan hilang. Sama seperti CSSDESK, JSBin juga dapat mendownload hasil pekerjaan kita buat. Saya juga tidak pernah menggunakan situs ini, namun jika dilihat pada halaman websitenya, JSBin juga menyuguhkan banyak fitur-fitur yang tidak kalah baiknya dengan JSFiddle.
Cara Membuat Web Tempat Menguji CSS, JS dan HTML seperti Dabblet

DABBLET memang belum sepopuler JSFiddle dan JSBin, namun merupakan salah satu dari beberapa pilihan terbaik untuk mengetes kode CSS, JS dan HTML. Tampilannya juga cukup baik dengan pengaturan horizontal atau vertikal sesuai dengan keinginan dan kebutuhan kita. Ada keunggulan DABBLET yang tidak dimiliki situs serupa lainnya, dimana kita bisa melihat preview kecil (font, warna, ukuran dan gambar) hanya dengan menyorot ke kodenya. Hanya saja ukuran panel tidak bisa diatur sesuai dengan keinginan kita, pembagiannya 50% antara preview dengan panel editor lain yang ditampilkan. 
Cara Membuat Web Tempat Menguji CSS, JS dan HTML seperti editorkode

Blog ini yang akan saya bagikan ke anda. Fungsinya jelas sama dengan yang dipaparkan diatas yaitu untuk menguji kode-kode CSS, JS dan HTML. Untuk kelebihan dan kekurangannya, silahkan di cari sendiri. Silahkan di download template gratis yang saya bagikan ke anda. Ada juga saya file untuk bisa mengedit dan menguji CSS, JS dan HTML anda secara offline.

XML FILE
DOWNLOAD
(untuk upload file .xml buka menu setting -> other -> lalu import blog)

 NOTEPAD (.txt) FILE
DOWNLOAD
(untuk file notepad/.txt  buka menu template -> EditHTML -> lalu ganti semua kode yang ada dengan kode dalam notepad)

 ALL FILES (Untuk Mode Offline)
DOWNLOAD
(ekstrack file .rar lalu pilih index.html untuk menjalankannya)

Masih ada beberapa situs lain yang serupa, seperti CSSDECK, Liveweave, dan Codepen, hanya saja belum sepopuler dengan yang diatas. Belum lagi jika anda membuat sendiri Editor anda, pastinya akan semakin banyak. Tampilan blog EditorKode yang diberikan diatas memang sangatlah sederhana. Jadi, silahkan diedit sendiri sesuai dengan keinginan dan buat Editor kode anda sendiri. Kalau tidak ingin membuatnya, anda bisa bookmark salah satu dari situs diatas. Karena suatu saat anda akan membutuhkannya dalam mengedit template blog atau web anda atau mungkin untuk bereksperimen dan mengembangkan ide-ide anda dalam hal desain template.
Categories: , ,

Tag Kondisional Halaman Blogspot dan Cara Penggunaannya

Habis Baca, Jangan lupa tinggalkan komen yaa..
Posted by Desain Kode Tuesday, December 22, 2015 0 comments
Seperti yang saya janjikan sebelumnya dalam artikel Cara Mengedit Blog dengan Mudah, pada artikel kali ini saya mau menjelaskan secara rinci tentang penggunaan Tag Kondisional yang ada pada blog. Tapi semua yg akan dipaparkan dalam artikel ini, hanya akan berfungsi dan berguna pada platform blogspot saja.
Apa sih Tag Kondisional itu? bagaimana penggunaannya dalam blogspot? trus, apa-apa saja jenis dari Tag Kondisional itu? mungkin sudah ada dari kita yang mulai bertanya-tanya akan hal tersebut.
tag kondisional blogspot dan cara menggunakannya

Langsung saja, Tag Kondisional bisa dikatakan adalah sebuah perintah untuk kode-kode seperti css, js html, objek atau elemen-elemen lain ingin di tampilkan atau tidak pada sebuah jenis halaman yang sudah diberikan pihak blogger. Mungkin kebanyakan blogger belum mengetahui hal ini, bisa terlihat dari banyaknya blog yang mana masih menggunakan template standar dan masih mempunyai tampilan yang sama hampir pada semua jenis halaman pada blognya.

Ada beberapa jenis halaman yang di berikan pihak blogger sewaktu kita mendaftarkan blog dimana etiap orang mempunyai jatah jumlah halaman yang sama satu dengan yang lainnya. Jenis-jenis Halaman gratis yang di maksudkan di sini adalah sebagai berikut :
  1. Halaman utama/ Homepage blog.
  2. Halaman statis/ Laman. 
  3. Halaman Item/ Postingan blog.
  4. Halaman Label dan Label tertentu blog.
  5. Halaman Index blog (Halaman pada blog selain halaman item)
  6. Halaman Asrip blog.
  7. Halaman 404/ error page. (Halaman yang tidak ditemukan)
  8. Halaman Tertentu dalam blog.
Nantinya setelah membaca artikel ini, saya yakin akan ada banyak hal baru yang dapat di lakukan untuk mempercantik, memperindah, dan membuat tampilan yang menarik dan berbeda untuk blog anda masing-masing. Cobalah dari hal kecil seperti menampilkan salah satu widget pada salah satu jenis halaman yang ada. Lanjut, sebelum dipaparkan penggunaan penggunaan tag kondisional untuk beberapa jenis halaman tersebut, perlu diketahui terlebih dahulu tentang 2 tanda kondisi yang akan kita digunakan dalam tag kondisional yaitu sebagai berikut :

  • "==" (2 samadengan) tanda ini berarti kondisi objek atau kode akan ditampilkan/ diproses
  • "!=" (seru dan samadengan) tanda ini berarti kondisi kecuali/ objek atau kode tidak akan diproses

Berikut ini beberapa penggunaan tag kondisional dari beberapa jenis halaman yang sudah disebutkan diatas (lihat perbedaan tiap jenis halaman dalam contohnya) :
  1. Halaman utama/ Homepage blog.
    Contoh : http://desainkode.blogspot.com/
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
OBJEK/ELEMEN
</b:if>
  2. Halaman statis/ Laman.
    Contoh : http://desainkode.blogspot.com/p/
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
OBJEK/ELEMEN
</b:if>
  3. Halaman Item/ Postingan blog.
    Contoh : http://desainkode.blogspot.com/2015/12
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
OBJEK/ELEMEN
</b:if>
  4. Halaman semua Label blog.
    Contoh : http://desainkode.blogspot.com/search/label/
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.searchLabel'>
OBJEK/ELEMEN
</b:if>
  5. Halaman Label Tertentu blog.
    Contoh : http://desainkode.blogspot.com/search/label/
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.searchLabel == &quot;NAMA_LABEL&quot;'>
OBJEK/ELEMEN
</b:if>
  6. Halaman Index Blog
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
OBJEK/ELEMEN
</b:if>
  7. Halaman Arsip Blog
    Contoh : http://desainkode.blogspot.com/2015_01_1_archieve.html
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
OBJEK/ELEMEN
</b:if>
  8. Halaman 404/ error page.
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
OBJEK/ELEMEN
</b:if>
  9. Halaman Tertentu/ khusus.
    Kode Tag kondisionalnya adalah :
    <b:if cond='data:blog.url == &quot;URL_HALAMAN&quot;'>
OBJEK/ELEMEN
</b:if>

Penjelasan Penggunaan Tag Kondisional :

Tag Kondisional diawali dengan kode <b:if> dan diakhiri dengan penutup </b:if>. Sementara data:blog.url menunjukkan URL atau link dari sebuah halaman (keadaan halaman saat ini). Tanda "==" menunjukkan kondisi secara langsung dan  tanda "!=" menunjukkan kondisi secara tidak langsung.
Contoh 1 :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type="text/css"> 
ELEMEN/OBJEK
</style>
</b:if>
Dapat diartikan bahwa jika halaman saat ini adalah halaman homepage maka ELEMEN/OBJEK akan diproses/ ditampilkan.

Contoh 2 :
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type="text/css"> 
#desain
</style>
</b:if>
Dapat diartikan bahwa jika halaman saat ini tidak sama dengan halaman homepage, maka semua objek/elemen yang memiliki ID (tanda pagar) desain, akan disembunyikan (none). dengan kata lain ID desain hanya akan diproses pada halaman homepage.

Ini salah satu contoh blog yang menggunakan tag kondisional : http://editkode-live.blogspot.co.id/. Blog tersebut sebenarnya halaman demo dari Blog DesainKode. Dapat dilihat, contoh kecilnya banyak elemen/objek yang ada di halaman hompage tidak saya tampilkan di halaman lain (halaman postingan dan halaman statis). begitupun sebaliknya, ada beberapa objek di halaman postingan dan halaman statis yang tidak nampak di halaman utama. Tentu saja semuanya menggunakan fungsi Tag Kondisional. Coba lihat sendiri di source kode blognya.

Oke. Demikian penjelasan beberapa hal penting tentang Tag Kondisional dan penggunaannya. Semoga artikel ini bisa dipahami dengan baik saya dan harap setelah membaca artikel ini, banyak inovasi dan kreasi-kreasi baru yang bisa anda lakukan untuk blog anda. Buat hal-hal baru yang berbeda pada setiap jenis halaman yang telah diberikan gratis oleh pihak blogger. Perbanyak latihan dan ciptakan blog dengan desain template terbaru. Sama seperti yang saya katakan dalam artikel sebelumnya, jika ingin mencoba bermain-main terkait kode css, js dan html, gunakan http://jsfiddle.com untuk melihat hasilnya sebelum di terapkan di blog anda. Sekian artikel tentang Tag Kondisional dan cara penggunaannya. Dan ingat, tetap kunjungi blog desainkode. akan ada banyak hal-hal yang baru. Terima Kasih.
Categories: ,

Tahapan Awal Cara Mengedit Blog dengan Mudah

Habis Baca, Jangan lupa tinggalkan komen yaa..
Posted by Desain Kode Sunday, December 20, 2015 0 comments
Tidak mudah sebenarnya mengedit blog dengan baik, salah sedikit saja bisa menghancurkan tampilannya. Bahkan hilang satu karakter saja dalam script akan sangat berpengaruh besar. Mengedit blog dengan mudah yang saya maksudkan disini adalah bagaimana kita memahami dasar tentang apa yang kita lakukan sewaktu ingin menambahkan sesuatu atau mengedit tampilan blog kita. Kebanyakan orang biasanya mencari tutorial cara mengedit atau menambahkan widget misalnya, setelah mereka menemukan yang dicarinya kemudian menerapkannya ke blog mereka masing-masing, tidak sedikit yang melakukan hanya dengan mencopy paste kode-kode pada tutuorial yang dibacanya.

Misalnya : Anda sedang yang mencari cara membuat widget artikel terkait dibawah postingan atau widget lain apa saja. setelah mendapat di google dan masuk ke blog tutorialnya, tentunya akan ada kode css, js dan html yang diberikan dalam tutorial tersebut. Apakah memang anda memahami maksud dari kode-kode tersebut? Sebagai seseorang yang bukan berlatar belakang programer memang cenderung tidak mengetahuinya, tapi setidaknya ada baiknya memahami maksud atau keterkaitan antara kode css, js dan html yang diberikan tersebut. Cobalah setiap ingin mengedit tampilan blog, entah itu menambahkah widget atau apa saja, pahami maksud dari setiap kode-kode tersebut. Memang kita belum tentu dapat membuat sendiri script yang kita butuhkan, tapi cobalah untuk mempelajarinya.

MENGEDIT BLOG DARI MENU LAYOUT

Seperti dalam artikel Cara Buat Blog Untuk Blogger Pemula, saya juga sedikit menjelaskan tentang beberapa menu yang ada dalam blogger. Terkait dengan hal mengedit blog, menu yang biasanya dipakai para blogger adalah menu Layout, Template dan Settings. 
cara mengedit blog


Tapi dari ketiganya, menu Template yang paling utama. Apa yang kita edit di menu Layout dan Settings akan berpengaruh ke kode-kode yang ada di menu Template. Jadi ingat, jangan pernah mengedit blog dengan membuka menu Layout dan Template di tab secara bersamaan. Sebagai contoh, mari kita mengedit widget dari menu Layout dan melihat hasilnya di menu Template. Ikuti langkah-langkah berikut :

  1. Masuk ke menu Layout lalu klik salah satu "Add a Gadget" yang ada. Maka akan muncul jendela yang bar untuk memilih Gadget/Widget
  2. Sebagai contoh, saya akan menmbahkan widget Profile, Klik tanda + yang ada di kanan atasnya. 
    3. mengedit template blog
  3. Ketik Judul Widget (mis: About Me), lalu pilih Save.
  4. Nah, widget Profil sudah berhasil dipasang. Dalam hal ini, saya memasangnya di sebelah kanan atau di Side Bar. 
    5. cara edit bogspot
  5. Untuk memindahkannya sangatlah mudah. cukup dengan klik dan tahan Gadget yang akan dipndahkan, lalu pindahkan di tempat yang diinginkan. Jangan lupa klik "Save arrangement"
Nah, setelah berhasil memasang salah satu Gadget di menu Layout, apakah memang benar bahwa akan berpengaruh ke menu Template seperti yang saya ketakan sebelumnya? Coba kita buktikan :
  1. Buka kembali Gadget About Me yang kita buat tadi, atau Gadget lain juga boleh. Klik "Edit" di bagian kanannya.
  2. Coba lihat bagian url-nya. Di bagian akhir anda akan menemukan "widgetId". Dalam hal ini, widget id untuk About Me yang saya pasang tadi adalah "Profile1". Widget id inilah yang nantinya akan kita cari pada menu Template blogger. Tutup kembali jendela widget yang dibuka tadi.
    3. Cara Mengedit Template Widget Blogspot
  3. Masuk ke menu "Template". Lalu pilih "Edit HTML"
  4. Klik sekali pada sembarang daerah di dalam edit HTML. lalu Ctrl+F pada keybord (search), Lalu ketik "Profile1" (tanpa petik)
  5. Bagaimana? pasti akan kita temukan widget id yang tadi dibuat sebelumnya di menu Layout. Lihat hasil pencarian saya dibawah. Yang saya block merupakan bagian dari Gadget Profile/About Me yang di buat tadi. 
    6. Cara Mengedit Template Edit HTML
  6. Kode gadget di menu "Edit HTML" dimulai dari kode <b:widget id=  ....> dan diakhiri dengan kode penutup </b:widget>. Kalau masih belum percaya itu adalah widget yang kita buat sebelumnya di menu Layout, coba hapus bagian kode gadget tersebut (dalam hal ini kode gadget Profile2 saya berada di baris 1584-1626). Save template dan kembali ke menu Layout. Kalau di menu Layout tidak tampil lagi, artinya memang benar itu kode dari Gadget yang dibuat tadi.
Semua yang di jelaskan dan dipaparkan diatas hanya sebagian kecil dari pengetahuan tentang mengedit blog. Masih terlalu banyak yang harus dimengerti dan dipahami jika ingin menjadi blogger profesional. Nah, mari kita lanjutkan. Sebelumnya sudah dibahas tentang mengedit template dari menu Layout, sekarang kita beralih ke menu Template. 

MENGEDIT BLOG DARI MENU TEMPLATE

Yang akan saya bahas disini, bukan tentang struktur tampilan yang ada di blogspot tapi, struktur dari kode-kode yang ada pada Edit HTML di menu Template. Seperti yang terliha ketika membuka menu Template, ada 2 cara yang disediakan pihak bloger untuk mengedit template blog. Bagi yang benar-benar pertama kali menggunakan blogger atau yang sama sekali tidak mengerti tentang bahasa pemrograman CSS, JS dan HTML, saya sarankan untuk mengedit blog lewat sub menu "Costumize" saja. sangat mudah untuk mengedit tampilan blog dari costumize, karena apayang yang kita ubah akan terlihat langsung pada blog kita. Beda dengan submenu "Edit HTML" karena kita harus mengatur kode-kode didalamnya sedemikian rupa sapai menghasilkan tampilan blog yang diinginkan.

Pada umumnya struktur kode-kode tampilan blogspot yang ada dalam "Edit HTML" adalah seperti berikut (Secara umum, struktur kodenya saya tulis seperti ini agar mudah dipahami) :

<html>
<head> 
<!-- KODE META TAG BLOG --> 
<b:skin>
<!-- KODE CSS BLOG -->
</b:skin>
<!-- KODE JAVASCRIPT BLOG -->
</head>
<body>
<!-- KODE HTML BLOG --> 
<!-- KODE JQUERY BLOG -->
<!-- KODE SECTION BLOG --> 
</body>
</html>

  • META TAG. Apa itu? cari sendiri penjelasannya di google. karena butuh artikel baru untuk menjelaskannya secara rinci. Intinya, meta tag adalah kode untuk memberitahukan segala informasi yang ada di blog kita ke mesin pencari seperti google, yahoo dan bing, tentunya dengan tepat dan benar.
  • CSS. (Cascade Style Sheets) adalah kode untuk mengatur dan menghias tampilan blog kita nantinya agar lebih menarik dan enak dipandang mata. Kode CSS biasa diawali dengan tanda "." (titik)" dan "#" (pagar) dan dipanggil oleh HTML lewat batuan kode "class" atau "id"
  • JS atau (Javascript) adalah kode untuk menjalankan perintah yang telah disusun dan dipanggil oleh CSS dan HTML untuk mengubah halaman blog statis menjadi dinamis dan interaktif.
  • HTML. (HyperText Markup Language) adalah kode untuk membuat halaman blog kita. kode ini juga untuk membuat perintah kepada CSS dan JS atau dengan bahasa lainnya, HTML yang memanggil CSS dan JS. Untuk lebih jelasnya silahkan bertanya ke google.
  • KODE SECTION ? untuk template-template standar, blogger sudah pasti menyediakan kode ini. Dalam kode Section terdapat kode Widget. Tapi bagi mereka yang mengambil kode template dari tempat lain, harus memasukkan kode section ini ke dalam EditHTML, karena blog harus mempunyai setidaknya 1 kode section (b:section tag)
Secara garis besar, didalam kode Head di letakkan kode CSS dan JAVASCRIPT untuk mengubah tampilan blog. Itulah kenapa, biasanya blogger tutorial menyuruh untuk meletakkan kode CSS diatas </b:skin> dan kode JS diatas kode </head>. kode CSS bisa saja diletakkan di dalam Body namun harus memakai kode (style="<!-- letak kode css -->") tanpa harus menambah tanda titik dan pagar lagi dalam kode html yang dibuat. Begitu pula untuk kode JS membutuhkan kode tambahan (<script src="<!-- letak url file js -->"). 

Kalo ingin berkreasi dan berinovasi untuk membuat desain/ hal baru yang mau diterapkan di blog anda, saya sarankan untuk menggunakan web https://jsfiddle.net/ sebelum menerapkan ke blogspot. jsfiddle dibuat untuk mengetes kode-kode JS, CSS dan HTML. Ada banyak situs yang serupa, tapi menurut saya JSfiddle yang terbaik. Juga nantinya saya akan membuat artikel bagaimana membuat sebuah web atau blog seperti JSfiddle tersebut.

Pada struktur template blogspot, blogger juga sudah menyediakan beberapa jenis halaman yang mana akan sangat dibutuhkan bagi mereka yang ingin membuat template yang berbeda pada setia halamannya yang berbeda dengan tampilan template blogger pada umumnya. Hal ini dinamakan TAG KONDISIONAL. Nanti juga saya akan membuat penjelasannya dalam artikel yang lain. Cukup sekian penjelasan umum untuk mengedit blog. Lakukan banyak demonstrasi. Kalo sudah terbiasa mengedit template, nantinya akan terasa mudah dan menyenangkan. Jangan lupa untuk tetap ikuti perkembangan artikel blog desainkode.
Categories: ,
DMCA.com Protection StatusMau copy artikel? Jangan lupa cantumkan link sumber desainkode