DELOGIN ZONE

           Berdasarkan request dari salah seorang member DELOGIN yang menginginkan penjelasan lengkap mengenai CSS border saya membuat artikel ini untuk mudah dimengerti oleh newbie sekalipun. Walaupun sudah banyak di bahas di blog blog lain tapi tak apalah.
          CSS Border adalah CSS yang pada umumnya digunakan untuk menambahkan garis tepi atau garis pembatas pada sebuah objek. Bagi kalian web master pastilah sudah sangat hafal dengan yang namanya CSS border ini, saya sendiri sering menggunakannya. Okelah, langsung saja, silahkan dipelajari semua hal tentang CSS border di bawah ini.

Properti pada CSS Border

Properti dasar pada border terdiri dari 3 jenis, yaitu:

• border-width
Digunakan untuk menentukan tingkat ketebalan border. Satuan ukuran yang biasa digunakan adalah pixel, akan tetapi kita juga bisa menggunakan alternatif dengan mengetik kata thin (tipis), medium (sedang), atau thick (tebal).
• border-style
Digunakan untuk menentukan tipe border. Jika tidak ada border-style maka border-width dan border-color tidak akan bekerja.
Berikut ini saya tampilkan beberapa style yang bisa kita gunakan pada CSS border:
border-style: none;
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
• border-color
Digunakan untuk menentukan warna border. Kita bisa menggunakan format warna HEX, RGB, atau menuliskan langsung nama warna yang kita inginkan (dalam bahasa Inggris tentunya).

Penerapan CSS Border

          Dalam penerapan CSS border ini kita bisa menggunakan 2 metode, yaitu meletakkan css pada CSS area (kode yang diawali <style type='text/css> dan diakhiri </style>) atau meletakkannya langsung pada Element HTML. Untuk lebih jelasnya perhatikan contoh berikut:

CSS Area	HTML Area
<style type='text/css'> #dz-border { border-width: 4px; border-style: double; border-color: blue; } </style> -------------------------------------- <div id='dz-border'>Objek</div>	<div style='border-width: 4px;border-style: double;border-color: blue;'>Objek</div>

          Karena pada umumnya CSS border ini digunakan untuk memperindah objek penggunaan paling sering adalah diletakkan pada CSS area, akan tetapi pada saat-saat tertentu seperti pembuatan contoh border pada post ini saya menggunakan cara di HTML Area/ Element HTML. Kurang lebih seperti itulah penerapan CSS border.

Lebih lanjut mengenai CSS Border

          Jika dilihat sekilas menggunakan tiga properti border tadi terlalu banyak memakan tempat, apa lagi jika kita menggunakan banyak css pada satu objek. Tenang saja, hal tersebut bisa diatasi, caranya dengan menggabungkan ketiga properti tadi (border-width, border-style, dan border-color) menjadi satu properti, yaitu border. Untuk contoh dan urutannya bisa sobat lihat dibawah ini:

border: border-width border-style border-color;
border: 4px double #08F;

          Nah, bagaimana cara membuat tampilan border yang berbeda di setiap sisinya?... Terkadang muncul pertanyaan seperti itu bukan?... Untuk menjawabnya simak penjelasan berikut ini:
          Properti border yang kita gunakan tersebut sebenarnya adalah ringkasan dari properti border-top, border-right, border-bottom, dan border-left yang diringkas menjadi satu kesatuan, yaitu border. nah, untuk membuat tampilan border yang berbeda disetiap sisinya kita bisa menggunakan ke-empat properti tersebut. Untuk lebih jelasnya perhatikan contoh berikut:
Cara 1:

border-top: 4px double green; /*pengaturan border atas*/
border-right: 4px solid red; /*pengaturan border kanan*/
border-bottom: 2px dotted blue; /*pengaturan border bawah*/
border-left: 4px ridge yellow; /*pengaturan border kiri*/

          Selain cara 1 tersebut kita juga bisa menggunakan tiga properti yang kita pelajari di awal tadi dan memasukkan nilainya sesuai jenisnya. Pada umumnya untuk urutan nilai yang biasa digunakan untuk pengaturan sisi adalah sama, yaitu atas kanan bawah kiri, begitu pula dengan CSS border ini.
Cara 2:

properti: top right bottom left
border-width: 4px 4px 2px 6px; /*pengaturan lebar border*/
border-style: double solid dotted ridge; /*pengaturan tipe border*/
border-color: green red blue yellow; /*pengaturan warna border*/

Untuk hasil dari kedua cara diatas bisa sobat lihat dibawah ini:

          Nah, bagaimana?... Sudah mengerti bukan tentang CSS border ini?... Saya rasa cukup sudah pengenalan CSS border ini, semoga postingan kali ini bermanfaat.

          Tak terasa hari demi hari berlalu begitu cepatnya, tak terasa pula kita akan segera memasuki bulan Ramadhan yang penuh berkah. Bagi para admin blog pastinya terasa kurang lengkap jika tidak memasang pernak-pernik yang berhubungan dengan bulan Ramadhan ini pada blog mereka. Nah, sehubungan dengan hal tersebut kali ini saya akan share cara membuat pesan pembuka ketika memasuki homepage. Tutorial ini saya repost dari Kompi Ajaib dengan sedikit modifikas tentunya.
          Pesan pembuka ini sangat mudah diterapkan pada blog, apalagi didukung dengan loading yang cepat + responsive tentunya. Untuk tampilannya kurang lebih seperti gambar dibawah ini:


          Bagaimana?... Tertarik menerapkannya pada blog sobat?... Okelah, saya kasih tahu caranya:

1. Simpan kode dibawah ini sebelum atau diatas  kode ]]></b:skin> atau </style>

/* Pesan Pembuka Homepage */
#welcomebox {position: fixed;top: 10%;left: 50%;width: 70%;margin-left: -37%;z-index: 1000000;text-align: center;background: rgba(0, 0, 0, 0.5);padding: 20px 2%;}
#welcomebox p{color: #FFF;font-size: 150%;line-height: 1.6em;margin: -5px 0 50px;font-family: cursive;}
.welcomeclose {background: #FFF;color: #06F;border-radius: 3px;padding: 4px 10px;text-align: center;margin: 0 auto;cursor: pointer;display: inline;font-weight: bold;}
.welcomeclose:hover {background-color:#DDD}
#welcomeoverlay, #welcomeoverlay2 {position:fixed !important;z-index:999999;margin: auto;top:0px;right:0px;bottom:0px;left:0px;background: linear-gradient(#000, #09F);}
#welcomeoverlay2 {background: url(http://goo.gl/ftdBGk) no-repeat top center;}

Ket:
1. Untuk mengganti font-nya silahkan ganti cursive dengan font yang sobat inginkan.
2. Untuk mengganti warna background silahkan ganti kode (#000, #09F) dengan warna yang sobat inginkan.
3. Untuk mengganti gambar silahkan ganti url http://goo.gl/ftdBGk dengan url gambar yang sobat inginkan.

2. Lalu simpan juga kode dibawah ini di bawah kode <body> atau diatas kode </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='welcomeoverlay'>
<div id='welcomeoverlay2'>
<div id='welcomebox'>
  <p><b>&#8220;Marhaban Ya Ramadhan&#8221;</b><br/>
      Saya, Setyawan Umar selaku admin DELOGIN ZONE mengucapkan<br/>
&quot;Selamat menunaikan ibadah puasa, semoga kita selalu diberkahi di bulan yang penuh mahrifah ini... Amin...&quot;</p>
    <div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Continue Reading &#8594;</div>
  </div></div></div>
</b:if>

Ket: Sesuaikan tulisan yang berwarna biru dengan pesan yang sobat inginkan.

          Bagaimana sob?... Mudah bukan!... Semoga artikel ini bermanfaat bagi sobat.

Sumber:
http://www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html

          Apa itu Tag Kondisional/Conditional Tag?... Bagi para web Designer pastilah tidak asing lagi dengan istilah itu. Tag Kondisional adalah tag yang digunakan untuk mengatur element-element tertentu dimana akan ditampilkan atau disembunyikan. Misal: Kita ingin menampilkan slider hanya di homepage saja, sedangkan pada halaman postingan slider ingin disembunyikan, saat itulah kita perlu menggunakan tag kondisional.

          Okelah, setelah penjelasan singkat diatas saya akan memberikan penjelasan lebih lanjut mengenai Tag Kondisional/Conditional Tag khusus platform Blogspot.

1. Memahami Tag Kondisional
Perhatikanlah contoh tag kondisional berikut ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>Element/Objek</b:if>

          Dari contoh diatas bisa kita lihat bahwa tag kondisional selalu diawali dengan tag <b:if> dan diakhiri dengan tag </b:if>. Setiap tag <b:if> memiliki atribut cond yang berfungsi sebagai penanda suatu kondisi. Sedangkan kode data:blog.url == data:blog.homepageUrl adalah nilai atribut yang menjelaskan maksud dari kondisi yang diinginkan.
          Kita juga bisa membuat kebalikan dari fungsi tag kondisional tersebut. Bagaimana caranya?... Jika diperhatikan dalam nilai atributnya terdapat kode pembanding, yaitu == yang berarti "sama atau menyetujui". Untuk membuat kebalikannya kita hanya perlu merubah kode pembanding itu menjadi != yang berarti "tidak sama atau menolak".

Jika diartikan secara keseluruhan maka akan menjadi seperti ini:

Tag Kondisional	Arti Kode
<b:if cond='data:blog.url == data:blog.homepageUrl'>Element/Objek</b:if>	Element/Objek akan ditampilkan/difungsikan apabila keadaan saat ini berada pada homepage.
<b:if cond='data:blog.url != data:blog.homepageUrl'>Element/Objek</b:if>	Element/Objek akan ditampilkan/difungsikan kecuali keadaan saat ini  berada pada homepage.

2. Jenis-Jenis Tag Kondisional
Berikut ini adalah beberapa jenis tag kondisional yang biasa di pakai:

Tag Kondisional: Halaman Muka (Homepage)

Homepage adalah halaman depan blog kita yang berupa link murni.
Contoh url: http://namablog.blogspot.com

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
Isi Kode
</b:if>

Ket: Tag ini berfungsi untuk menampilkan Objek hanya di homepage saja.

Tag Kondisional: Halaman Item (Halaman Posting)

Halaman item adalah halaman posting blog kita, url-nya berakhiran dengan nama berkas/post.
Contoh url: http://namablog.blogspot.com/2014/05/judul-postingan.html

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
Isi Kode
</b:if>

Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman posting saja.

Tag Kondisional: Halaman Statis

Halaman statis adalah halaman khusus yang tidak akan tampil pada arsip setelah diterbitkan. Umumnya halaman ini dibuat pada fitur Laman di blogger.
Contoh url: http://namablog.blogspot.com/p/judul-laman.html

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
Isi Kode
</b:if>

Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman statis saja.

Tag kondisional: Halaman Label

Halaman label adalah hasil sortir label pada postingan, biasanya url halaman label diawali dengan cabang search/label/ kemudian diakhiri dengan kata kunci label.
Contoh url: http://namablog.blogspot.com/search/label/label1

<b:if cond='data:blog.searchLabel'> 
Isi Kode
</b:if>

Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman hasil sortir label saja.

Tag Kondisional: Halaman Label Tertentu

Sama halnya dengan tag kondisional halaman label, namu yang ini dikhususkan untuk label tertentu saja.
Contoh url: http://namablog.blogspot.com/search/label/popular

<b:if cond='data:blog.searchLabel == &quot;Popular&quot;'> 
Isi kode yang akan ditampilkan pada label "Popular"
</b:if>

Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman sortir label tertentu (dalam contoh tersebut adalah label Popular).

Tag Kondisional: Halaman Arsip

Halaman arsip adalah halaman dari sekumpulan arsip postingan blog. Pada umumnya url halaman arsip diakhiri dengan archive.html.
Contoh url: http://namablog.blogspot.com/2014_05_01_archive.html

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
Isi Kode
</b:if>

Ket: Tag ini berfungsi untuk menampilkan Objek hanya pada halaman arsip saja.

Tag Kondisional: Halaman Kesalahan (Error Page)

Error page atau bisa juga disebut error 404 adalah halaman dari url yang salah atau tidak ditemukan pada blog kita. Biasanya terjadi karena kesalahan pengetikan atau postingan telah dihapus.

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

Ket: Tag ini berfungsi untuk menampilkan Objek pada saat halaman terjadi error 404.

Tag Kondisional: Halaman Pencarian

Halaman pencarian adalah halaman hasil pencarian yang berasal dari kata kunci yang diketik melalui kotak pencarian/search box.
Contoh url: http://namablog.blogspot.com/search?q=template

<b:if cond='data:blog.searchQuery == &quot;css&quot;'> 
Isi kode
</b:if>

Ket: Tag ini berfungsi untuk menampilkan Objek pada hasil pencarian (dalam contoh tersebut saya menggunakan kata kunci "template").

Tag Kondisional: Halaman Indeks

Yang dimaksud dengan halaman indeks disini adalah semua jenis halaman selain halaman item/posting.
Contoh url: http://namablog.blogspot.com , http://namablog.blogspot.com/p/judul-laman.html

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

Ket: Tag ini berfungsi untuk menampilkan Objek selain pada halaman posting.

Tag Kondisional: Halaman Tertentu

Yang dimaksud halaman tertentu disini adalah halaman yang dianggap spesial atau unik yang ingin diberi tampilan berbeda dari yang lain.

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'> 
Isi Kode
</b:if>

Ket: Tag ini berfungsi untuk menampilkan Objek tertentu pada halaman yang dianggap khusus atau spesial.
          Nah, itulah tadi beberapa tag kondisional yang biasa dipakai. Bila kita ingin membuat kebalikan dari fungsi tag kondisional tersebut caranya hanyalah mengganti kode pembanding == menjadi !=, cukup mudah bukan?...

3. Penerapan Tag kondisional
          Setelah memahami dan mengetahui jenis-jenis tag kondisional sekarang tinggal menerapkannya pada template kita. Bagaimana caranya?... Ada 2 cara umum yang digunakan dalam penerapan tag kondisional ini, diantaranya adalah:

Penerapan secara langsung

          Penerapan secara langsung dilakukan dengan cara mengapit objek yang ingin kita beri tag kondisional. Dalam penerapan langsung ini, biasanya objek berupa kode html.
Contoh penerapan:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='Slider'>Isi kode slider</div>
</b:if>

Ket: Slider (<div id='Slider'>Isi kode slider</div>) akan ditampilkan apabila keadaan saat ini berada pada homepage.

Penerapan tidak langsung

          Penerapan tidak langsung dilakukan dengan cara mengapit kode css selektor objek yang ingin diberi tag kondisional.
Contoh penerapan:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#slider {display: none;}
</style>
</b:if>

Ket: Slider (<div id='Slider'>Isi kode slider</div>) tidak akan ditampilkan apabila saat ini tidak berada pada homepage. Pada dasarnya sama saja dengan Slider akan ditampilkan pada homepage.
          Itulah tadi keterangan singkat mengenai penerapan tag kondisional dalam dokumen HTML. Karena hanya berupa keterangan sederhana silahkan dikembangkan sesuka sobat.

          Dengan demikian selesai sudah penjelasan saya mengenai tag kondisional. Semoga artikel yang cukup banyak ini dapat bermanfaat bagi sobat sekalian.

Sumber:
http://www.dte.web.id/2011/08/pemahaman-tag-kondisional-tingkat.html
http://www.dte.web.id/2011/08/tag-kondisional-tingkat-lanjut.html