December 2015

Cara Membuat Logo Blog menggunakan CSS dan HTML

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.

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

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


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.

Cara Membuat Web Tempat Menguji CSS, JS dan HTML

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.

4. DABBLET

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.

5. EDITORKODE-LIVE

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.

Tag Kondisional Halaman Blogspot dan Cara Penggunaannya

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 :

Halaman utama/ Homepage blog.
Halaman statis/ Laman.
Halaman Item/ Postingan blog.
Halaman Label dan Label tertentu blog.
Halaman Index blog (Halaman pada blog selain halaman item)
Halaman Asrip blog.
Halaman 404/ error page. (Halaman yang tidak ditemukan)
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) :

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>
```
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>
```
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>
```
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>
```
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>
```

Halaman Index Blog
Kode Tag kondisionalnya adalah :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
OBJEK/ELEMEN
</b:if>

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>
```

Halaman 404/ error page.
Kode Tag kondisionalnya adalah :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
OBJEK/ELEMEN
</b:if>

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.

Tahapan Awal Cara Mengedit Blog dengan Mudah

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.

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 :

Masuk ke menu Layout lalu klik salah satu "Add a Gadget" yang ada. Maka akan muncul jendela yang bar untuk memilih Gadget/Widget
Sebagai contoh, saya akan menmbahkan widget Profile, Klik tanda + yang ada di kanan atasnya.

Ketik Judul Widget (mis: About Me), lalu pilih Save.
Nah, widget Profil sudah berhasil dipasang. Dalam hal ini, saya memasangnya di sebelah kanan atau di Side Bar.

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 :

Buka kembali Gadget About Me yang kita buat tadi, atau Gadget lain juga boleh. Klik "Edit" di bagian kanannya.
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.

Masuk ke menu "Template". Lalu pilih "Edit HTML"
Klik sekali pada sembarang daerah di dalam edit HTML. lalu Ctrl+F pada keybord (search), Lalu ketik "Profile1" (tanpa petik)
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.

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="") tanpa harus menambah tanda titik dan pagar lagi dalam kode html yang dibuat. Begitu pula untuk kode JS membutuhkan kode tambahan (<script src="").

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.

Cara Membuat Blog Untuk Blogger Pemula

Posted by Desain Kode Friday, December 18, 2015 0 comments

CARA MEMBUAT BLOG BARU DI BLOGSPOT

Sebelum membuat blog dan meneruskan untuk membaca artikel ini, terlebih dahulu pikirkan, sebenarnya apa tujuan anda akan membuat blog. Apakah membuatnya hanya untuk sekedar belajar dan menambah ilmu? mengikuti trend atau untuk memasarkan bisnis anda lewat jejaring online?.

Saat ini, banyak blogger yang hanya semangat melakukan blogging di awal saja, hingga selang beberapa waktu blog yang dibuatnya menjadi tidak terurus. Itu tidak jadi masalah, seperti yang saya katakan di awal, mungkin meraka membuat blog tersebut hanya untuk menambah ilmu baru. Awalnya memang kebanyakan orang membuat blog untuk kalangan sendiri saja yang nantinya dipakai untuk mengutarakan semua tentang pribadi orang tersebut atau bisa disebut diari onlinenya. Namun seiiring dengan berjalannya waktu, ada juga yang menjadikan blog sebagai hobby untuk menulis hal-hal yang disukainya, membuat portfolio, mengembangkan bisnis, tempat untuk mencari uang dengan adsense, sampai saya pernah mendapat orang menjadikan blog sebagai tempat mengutarakan isi hatinya kepada orang yang dicintainya.

Blog yang akan dibahas di artikel ini, dan nantinya akan dikembangkan pada artikel-artikel lain pada blog desainkode ini adalah sebuah website gratis berplatform "blogspot" yang disediakan gratis untuk kalian yang hobi menulis. Akan ada banyak hal yang akan dibahas di blog ini, namun untuk artikel yang pertama sebelum mencoba hal-hal yang lebih baru, disini saya akan memaparkan cara membuat blog baru bagi blogger pemula. Berikut langkah-langkahnya :

Buka www.blogger.com. pilih "Create account"

tapi jika anda sudah mempunyai akun google, anda dapat mengabaikan langkah ini hingga proses pembuatan akun baru untuk google selesai.

Isi dengan lengkap data diri. Setelah itu klik "Next"

Proses pembuatan akun google selesai. Klik "Continue to blogger"

Selanjutnya adalah tahapan pembuatan profile Google Plus (G+). Sama seperti facebook dan Twitter, G+ juga merupakan salah satu dari jejaring sosial yang dikembangakan oleh Google. klik "Create a Google + profile"

"Add your photo" jika ingin menambahkan foto pada profil google yang telah dibuat. Setelah itu pilih "Upgrade"

"Add people" untuk menjadikan teman di G+. Jika tidak ada klik "Continue"
Pada halaman "Follow thing you love" follow hal-hal yang ingin anda ikuti di G+. Jika tidak ada klik "Continue" lalu pilih "Continue Anyway"
Selanjutnya, lengkapi data diri untuk profil G+. Setelah itu klik "Finish"

Proses pembuatan akun email dan profil G+ selesai. klik "Continue to Blogger", maka akan masuk kehalaman blogger. Perlu diketahui, satu akun merupakan semua akun Google yang ada dan untuk setiap akun google yang telah dibuat tersebut, dapat kita gunakan untuk membuat banyak Blog. Jadi, setelah membaca dan mengikuti tahapan artikel ini, anda sudah mempunyai email baru, profile G+ baru dan blog baru. Mari kita buat salah satu blog barunya :

Klik "New Blog"
Tulis Judul Blog yang diinginkan. setelah itu tulis Alamat Blog yang diinginkan.

Judul Blog dan Alamat blog disini sangat berpengaruh besar pada SEO google, jadi biasanya blogger yang membuat blog dengan tujuan untuk memasarkan produknya ke jejaring online mempertimbangkan untuk pemilihan nama dan alamat blog yang tepat.

Pilih Template yang disuka. setelah itu klik "Create Blog"

Template yang ditampilkan merupakan template standar dari blogger. nantinya anda dapat menggantinya sesuai keinginan dan kebutuhan anda.

MENGENAL MENU-MENU PADA BLOGSPOT

Blog baru di blogspot telah berhasil dibuat. Selanjutnya, anda akan dialihkan ke halaman Overview yang mana merupakan tampilan awal setiap anda membuka blog. Ada beberapa menu dalam blogspot yang tentunya mempunyai peranan dan fungsi masing-masing. Berikut pejelasan dari setiap menu tersebut :

CREATE NEW POST adalah tempat untuk membuat artikel baru yang akan ditampilkan di blog.
VIEW POST (sama dengan No 4) adalah menu untuk mengatur postingan yang telah dibuat. Mulai dari mengedit, membagikan artikel ke G+, menghapus artikel atau mengatur label untuk setiap artikel yang ada.
VIEW BLOG adalah untuk melihat tampilan blog.
OVERVIEW ialah bagian dari STATS. tampilan untuk melihat update blog secara terkini diantaranya jumlah Pageviews, Comment, Postingan ataupun Follower blog
VIEW POST (sama dengan No 3)
PAGES adalah Laman atau halaman statis. Berbeda dengan Pos, Laman tidak akan di tampilkan di halaman depan blog, tidak memiliki label, tanggal publish, author, dan tidak diarsipkan. Kita juga hanya dapat membuat Halaman Statis sebanyak 20 laman
COMMENTS adalah menu untuk mengatur komen-komen yang masuk ke blog.
GOOGLE+ ialah menu untuk mengatur G+ yang dikaitkan dengan Blog. Mulai dari share atau tampilan comment blog menggunakan G+.
STATS adalah menu untuk melihat semua laporan-laporan pengunjung blog. Secara mendetail dapat menampilkan pengunjung untuk artikel tertentu, asal pengunjung dan kata kunci yang mengarah ke blog kita.
EARNINGS adalah menu Google Adsense. Sebaiknya abaikan menu ini jika blog masih terbilang baru. Menu ini biasanya hanya digunakan oleh blogger dengan pengunjung blog yang sudah banyak setiap harinya.
CAMPAIGNS. Kalo ingin mempromosikan blog anda, silahkan menggunakan menu ini. Blog akan dipromosikan oleh google lewat Adsense dan tentunya menggunakan biaya promosi.
LAYOUT adalah menu untuk melihat dan mengatur tata letak dari Widget/Gadget (Informasi-informasi lain yang terkait dengan blog) yang telah terpasang di blog.
TEMPLATE adalah tempat untuk mengedit tampilan Blog. "Costumize" untuk mengedit secara langsung dengan melihat hasilnya, sementara "Edit HTML" untuk mengedit tampilan menggunakan bahasa HTML. Template yang dipilih sebelumnya merupakan template standar bawaan Blogspot, anda dapat menggantinya dengan yang lebih keren, indah dan enak dipandang. Saya menyarankan anda mengunjungi http://btemplates.com
SETTINGS ialah menu untuk mengatur hal-hal lain yang terkait dengan blog diantaranya Judul dan deskripsi blog, penulis dan pembaca blog, tampilan komentar blog, bahasa tampilan, format waktu dll.

Baca artikel 9 Bagian Penting dalam Artikel saat akan memulai menulis di halaman blog anda.

Setelah membuat blog baru dan mengetahui fungsi dari menu-menu yang telah dipaparkan diatas, silahkan mengembangkan blog baru anda tergantung tujuan awal anda membuatnya. Mengurus blog bisa dikatakan tidak terlalu sulit, mengembangkannya itu yang lumayan sulit. Menulis artikel yang berkualitas tentu saja akan memakan banyak waktu, kecuali bagi mereka yang memang mempunyai hobby menulis dan mengarang. Masih banyak hal-hal lain terkait ilmu blogspot yang bisa anda pelajari untuk lebih membantu anda dalam berselancar di dunia blogging. Saran saya, tetaplah berkunjung ke blog desainkode, akan ada banyak hal-hal baru terkait dengan ilmu blog.

Desain Kode

Cara Membuat Logo Blog menggunakan CSS dan HTML

1. Logo Microsoft

2. Logo Android

3. Logo Blog DesainKode

Cara Membuat Web Tempat Menguji CSS, JS dan HTML

1. JSFiddle

2. CSSDESK

3. JSBIN

4. DABBLET

5. EDITORKODE-LIVE

Tag Kondisional Halaman Blogspot dan Cara Penggunaannya

Penjelasan Penggunaan Tag Kondisional :

Tahapan Awal Cara Mengedit Blog dengan Mudah

MENGEDIT BLOG DARI MENU LAYOUT

MENGEDIT BLOG DARI MENU TEMPLATE

Cara Membuat Blog Untuk Blogger Pemula

CARA MEMBUAT BLOG BARU DI BLOGSPOT

MENGENAL MENU-MENU PADA BLOGSPOT

Popular Posts

Blog Archive