contoh tag pre url gambar contoh tag pre url gambar

]]></b:skin>

pre {
margin : 25px;
padding : 19px;
clear : both;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgA2y62bYRLwoQvEm_Tezz9lh88UUqbrO9gLEf-k9gneyXf_pOGae8jLTGT0wBBg-_iXJLxADlW9AJ2yOFgFTOLtB0Ldv4Q8Q-1C4oIJj8EXdPg6DT6T5JkuB48gY4WO02-0Djmwqy6L4/s800/pre_code3.gif) repeat-y;
width : 85%;
}

<pre> tulis disini teks atau kode HTML yang akan diposting </pre>

Hasilnya sebagai berikut :

Pemahaman Tag Kondisional Tingkat Pertama Pemahaman Tag Kondisional Tingkat Pertama

Tag Kondisional/Conditional Tag adalah tag yang digunakan untuk mengatur elemen-elemen tertentu agar tampil atau tidak tampil, berfungsi atau tidak berfungsi dalam halaman spesifik yang telah ditentukan. Ada begitu banyak bentuk tag kondisional dalam dunia kode, namun di sini Saya hanya akan menjelaskan tentang tag kondisional untuk platform blogspot.

BAB 1: Membaca Tag Kondisional

Berikut ini adalah sebuah contoh tag kondisional halaman yang paling umum digunakan:

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

Tag kondisional selalu diawali dengan tag <b:if> dan ditutup dengan tag </b:if>. Setiap tag <b:if> memiliki atribut cond. Atribut cond bisa dibilang adalah penentu/penunjuk yang digunakan untuk menunjukkan suatu kondisi. Kode data:blog.url == data:blog.homepageUrl adalah nilai atribut yang menjelaskan maksud dari kondisi/condition yang diinginkan.
Kode data:blog.url adalah suatu pernyataan yang mewakili keadaan URL sebuah halaman, sementara kode data:blog.homepageUrl adalah perwakilan dari URL halaman muka (homepage). Misalnya begini: kamu memiliki sebuah blog dengan alamat http://silitpitik.blogspot.com, maka kode data:blog.homepageUrl dapat diartikan sebagai http://silitpitik.blogspot.com.
Jika keseluruhan kode di atas diterjemahkan, maka akan menghasilkan kalimat seperti ini:

TAG KONDISIONAL	ARTI KODE
<b:if cond='data:blog.url == data:blog.homepageUrl'> OBJEK1 </b:if>	Jika keadaan halaman saat ini sama dengan URL halaman muka/homepage, maka OBJEK1 akan ditampilkan/difungsikan.

Kamu juga bisa memutarbalikkan fungsi tag kondisional hanya dengan mengganti pembandingnya saja. Secara normal, sebuah pembanding dapat dituliskan sebagai == yang berarti "sama dengan" atau "menyetujui keadaan". Kode pembanding tersebut juga dapat kita balik menjadi != yang berarti "tidak sama dengan" atau "bukan" seperti ini:

<b:if cond='data:blog.url != data:blog.homepageUrl'>OBJEK1</b:if>

Jika keseluruhan kode di atas diterjemahkan, maka akan menghasilkan kalimat seperti ini:

TAG KONDISIONAL	ARTI KODE
<b:if cond='data:blog.url != data:blog.homepageUrl'> OBJEK1 </b:if>	OBJEK1 hanya akan ditampilkan apabila keadaan halaman saat ini tidak sama dengan halaman muka/homepage.

BAB 2: Penerapan Tag Kondisional

Ada dua cara penerapan tag kondisional, yaitu dengan cara menerapkannya secara langsung pada objek sasaran, atau menerapkannya secara tidak langsung dengan memanfaatkan kemampuan CSS.

Penerapan Kondisi Secara Langsung

Penerapan kondisi secara langsung dapat dilakukan dengan cara mengapit objek tersebut dengan tag kondisional seperti ini:

TAG KONDISIONAL	ARTI KODE
<b:if cond='data:blog.url == data:blog.homepageUrl'> OBJEK1 </b:if>	Jika keadaan halaman saat ini sama dengan URL halaman muka/homepage, maka OBJEK1 akan ditampilkan/difungsikan.

Penerapan Kondisi Secara Tidak Langsung

Penerapan kondisi secara tidak langsung dilakukan dengan cara mengapitkan tag kondisional pada kode CSS selektor objek yang menjadi sasarannya. Untuk menghilangkan objek sasaran, digunakanlah deklarasi display:none; seperti ini:

TAG KONDISIONAL	ARTI KODE
<b:if cond='data:blog.url != data:blog.homepageUrl'> <style type='text/css'> #objek1{display:none;} </style> </b:if> ...... <div id='objek1'>OBJEK1</div>	Seluruh elemen yang memiliki ID objek1 akan disembunyikan apabila keadaan halaman saat ini tidak sama dengan halaman muka/homepage. Pernyataan di atas pada prinsipnya mempunyai makna yang sama dengan: "OBJEK1 hanya akan ditampilkan apabila keadaan halaman saat ini sedang berada di halaman muka/homepage".

Penerapan tag kondisional secara tidak langsung ini memang sedikit membingungkan, tapi sangat berguna apabila kamu mengalami kesulitan dalam menentukan bahwa sekumpulan kode yang sedang kamu lihat sekarang adalah sebuah kesatuan objek.
Maksudnya begini: Menentukan tag <div> pembuka memang sangat mudah, karena dalam tiap-tiap tubuh tag pembuka pasti terdapat atribut id='' atau class='' yang memiliki nilai tertentu yang tentunya spesifik. Namun menentukan di mana kode yang menjadi </div> penutup dari divisi yang dimaksud tidaklah semudah itu.

Menonaktifkan Komentar Tanpa Menyembunyikan Komentar yang Sudah Ada Menonaktifkan Komentar Tanpa Menyembunyikan Komentar yang Sudah Ada

<b:if cond='data:post.allowComments'> adalah kondisional template yang berfungsi untuk menyatakan bahwa pemilik blog mengizinkan pengunjung untuk menuliskan komentar. Anda biasanya akan melihat kode ini membungkus semua elemen di dalam seksi komentar sehingga jika administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung lain menuliskan komentar baru melalui panel pengaturan utama (bukan opsi pada pengaturan posting), maka seluruh komentar yang telah masuk akan ikut menghilang (disembunyikan):

<div class='comments' id='comments'>
  <b:if cond='data:post.allowComments'>

    Seluruh konten di bagian ini akan menghilang jika
    Administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung
    menuliskan komentar baru.

  </b:if>
</div>

Biasanya hal ini akan merugikan blog-blog bertipe diskusi yang ramai pengunjung, terutama jika komentar-komentar yang diterbitkan berguna untuk pembaca lain sebagai referensi tambahan.
Suatu saat mungkin Anda akan mengalami masa-masa sibuk atau katakanlah “sedang tidak mampu untuk membalas komentar-komentar yang masuk”. Saat Anda mengalami itu biasanya hal yang akan Anda lakukan adalah menutup komentar posting secara temporer dengan cara menyembunyikannya seperti ini:

Menonaktifkan sekaligus menyembunyikan komentar pada semua posting.

Untuk menjaga agar komentar-komentar lama tidak hilang, Anda bisa memindahkan/memperbaharui wilayah kekuasaan kondisional <b:if cond='data:post.allowComments'> menjadi lebih sempit. Cukup hilangkan formulir komentarnya saja dan biarkan komentar-komentar yang sudah ada tetap pada tempatnya. Caranya adalah hapus kode <b:if cond='data:post.allowComments'> ... </b:if> yang mengelilingi elemen <div class='comments' id='comment'> sehingga akan tersisa seperti ini:

<div class='comments' id='comments'>
  ...
</div>

Kemudian cari elemen ini:

<b:include data='post' name='comment-form'/>

Ganti dengan ini:

<b:if cond='data:post.allowComments'>
  <b:include data='post' name='comment-form'/>
</b:if>

Temukan juga kode ini:

<b:include data='post' name='threaded-comment-form'/>

Ganti dengan kode ini:

<b:if cond='data:post.allowComments'>
  <b:include data='post' name='threaded-comment-form'/>
</b:if>

Masing-masing kode biasanya akan ditemukan dua buah, termasuk juga untuk seksi komentarnya. Dimana salah satu adalah elemen komentar yang akan aktif pada blog versi biasa dan satunya lagi aktif pada blog tampilan mobile.

Sekilas Tentang B:Else Sekilas Tentang B:Else

Dalam tag kondisional blogspot kita tahu bahwa kondisi dinyatakan dengan <b:if>. Tapi biasanya kita juga akan menemui <b:else/>. Apa itu?
Mereka berdua pada dasarnya masih memiliki tugas yang sama yaitu untuk menciptakan kondisi seperti halnya peraturan if dalam JavaScript. Jika kondisi terpenuhi, lakukan A. Jika tidak, lakukan B.
Berikut ini adalah salah satu contoh peraturan if pada JavaScript dengan perintah: Jika A, tulskan A!

if(A) {
   document.write('A');
}

Dalam tag kondisional blogspot, kita bisa menuliskannya seperti ini:

<b:if cond='A'>
    A
</b:if>

<b:else/>

<b:else/> digunakan untuk menyatakan perintah cadangan jika tugas yang diberikan tidak terpenuhi. Sama seperti halnya else dalam JavaScript: Jika A, tuliskan A. Jika bukan A, tuliskan B!

if(A) {
   document.write('A');
} else {
   document.write('B');
}

Dalam tag kondisional blogspot, kita bisa menuliskannya seperti ini:

<b:if cond='A'>
    A
<b:else/>
    B
</b:if>

Satu contoh nyata ada dalam beberapa penerapan tag kondisional halaman. Katakanlah, saat kita sedang berada pada halaman item, kita ingin menampilkan posting. Sedangkan saat kita sedang tidak berada pada halaman item, kita ingin menampilkan sidebar. Pada umumnya, kita akan menuliskan kondisinya seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <article class='post hentry'> ... </article>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <aside class='sidebar'> ... </aside>
</b:if>

Dengan <b:else/> kita bisa meringkasnya menjadi seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <article class='post hentry'> ... </article>
<b:else/>
    <aside class='sidebar'> ... </aside>
</b:if>

Sidebar Hanya Tampil Selain pada Halaman Artikel Sidebar Hanya Tampil Selain pada Halaman Artikel

Beberapa orang mungkin merasa sedikit pusing ketika menemui sebuah situs dengan elemen halaman yang super komplit di segala penjuru, baik di sisi kanan maupun sisi kiri artikel. Mungkin tujuanmu memang baik, yaitu menyediakan semua fasilitas yang ada kepada para pembaca. Monitoring komentar, posting terbaru, daftar isi, ikon-ikon jejaring sosial dan masih banyak lagi. Tapi kalian harus ingat satu hal terpenting mengenai apa itu blog: ARTIKEL!
Jangan sampai mata para pembaca gentayangan melirik sisi kiri dan kanan artikel (yang kebetulan dipenuhi oleh gambar gadis-gadis cantik), sementara artikel itu sendiri dilupakan. Sangat tidak menyenangkan apabila pada akhirnya kamu menemukan komentar-komentar yang tidak bermutu di dalam artikelmu.
Kadangkala, seseorang memutuskan untuk menuliskan komentar dahsyat tidak semata-mata karena mereka tidak menyukai artikelmu, tetapi tidak jarang juga karena mereka merasa kebingungan.
Sidebar. Sebuah blok kecil dalam blog yang seharusnya menjadi prioritas pandangan ke dua justru menjadi berkuasa penuh karena munculnya godaan-godaan setan pernak-pernik blog yang merajalela merangsang nafsu birahi umat manusia di muka bumi ini. Jika kalian merasa bahwa sidebar di blogmu itu sangat mengganggu, ayo kita hilangkan saja!
Jangan khawatir, di sini kita akan menghilangkannya dengan tag kondisional, jadi sidebar hanya akan menghilang pada halaman tertentu saja.
Pertama-tama, masuklah ke tab Rancangan kemudian pilih Edit HTML.
Cari baris kode yang kurang lebih tampak seperti ini:

<div id='sidebar-wrapper'> 
    <b:section class='sidebar' id='sidebar' preferred='yes'> 
        <b:widget id='Label1' locked='false' title='Kategori Posting' type='Label'/> 
        <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> 
        <b:widget id='Text1' locked='false' title='Obrolan Monyet' type='Text'/> 
    </b:section> 
</div>

Sisipkan tag kondisional halaman item di luar elemen tersebut, sehingga tag kondisional tersebut sekarang berperan sebagai pembungkus sidebar. Seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
    <div id='sidebar-wrapper'> 
        <b:section class='sidebar' id='sidebar' preferred='yes'> 
            <b:widget id='Label1' locked='false' title='Kategori Posting' type='Label'/> 
            <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> 
            <b:widget id='Text1' locked='false' title='Obrolan Monyet' type='Text'/> 
        </b:section> 
    </div> 
</b:if>

Klik Simpan Template.
Sebagai catatan, atribut id='sidebar-wrapper' itu tidak mutlak, setiap template mempunyai ID-nya masing-masing. Intinya adalah, kamu cari saja elemen <b:section> yang memiliki class='sidebar', kemudian temukan elemen divisi yang menjadi pembungkus dari tulang-belulang sidebar tersebut. Terakhir tinggal letakkan saja tag kondisional di luar objek tersebut.
Widget-widget yang berada di dalam seksi sidebar juga bisa menjadi panduan yang baik.
Berikut ini adalah contoh tampilan saat awal pertama kamu mengunjungi blogmu:

Halaman depan

Setelah kamu memasuki halaman artikel (menekan tombol Baca Selengkapnya atau link Komentar), maka hasil tampilannya akan berubah menjadi seperti ini:

Setelah masuk ke halaman item

Elemen Halaman Hanya Tampil pada Halaman Tertentu Elemen Halaman Hanya Tampil pada Halaman Tertentu

Tutorial ini sangat erat hubungannya dengan pemahaman tag kondisional. Salah satu solusi terbaik untuk mengatasi masalah beban muat halaman adalah dengan mengatur pemuatan elemen. Dengan cara mengatur pemuatan elemen-elemen halaman, maka secara tidak langsung kamu telah menciptakan sebuah sistem preload/penundaan muat beban yang efektif dalam hal efisiensi waktu dan penampilan halaman.
Sebelum melangkah lebih jauh, pertama-tama Saya perkenalkan dulu kerangka-kerangka sistemnya seperti ini:

Perintah Positif:

Widget Hanya Tampil pada Halaman Muka

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

Widget Hanya Tampil pada Halaman Item

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil pada Halaman Arsip

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;archive&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil pada Halaman Statis

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil pada Halaman Indeks

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;index&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil pada Halaman Label

<style type='text/css'>
     #ID-WIDGET {display:none;}
     <b:if cond='data:blog.searchLabel'>
          #ID-WIDGET {display:block !important;}
     </b:if>
</style>

Widget Hanya Tampil pada Halaman yang Telah Ditentukan

<style type='text/css'>
     <b:if cond='data:blog.url != &quot;URL HALAMAN&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Perintah Negatif:

Widget Hanya Tampil Selain di Halaman Muka

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

Widget Hanya Tampil Selain di Halaman Item

<style type='text/css'>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil Selain di Halaman Arsip

<style type='text/css'>
     <b:if cond='data:blog.pageType == &quot;archive&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil Selain di Halaman Statis

<style type='text/css'>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil Selain di Halaman Indeks

<style type='text/css'>
     <b:if cond='data:blog.pageType == &quot;index&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil Selain di Halaman Label

<style type='text/css'>
     <b:if cond='data:blog.searchLabel'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Widget Hanya Tampil selain di Halaman yang Telah Ditentukan

<style type='text/css'>
     <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
          #ID-WIDGET {display:none;}
     </b:if>
</style>

Cukup salin kode-kode yang kamu perlukan saja, kemudian letakkan tepat di atas kode </head>. Ganti kode ID_WIDGET dengan ID widget blogmu.
Apa yang dimaksud dengan ID widget?
Oke, sekarang carilah baris-baris kode yang tampak seperti ini dalam templatemu:

<b:widget id='HTML3' locked='false' title='Waktu Indonesia Barat' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Baru - Baru Ini' type='HTML'/>
<b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts'/>
<b:widget id='Image1' locked='false' title='Sementara Itu' type='Image'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Buku' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Halaman' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Daftar Bacaan' type='LinkList'/>

Kode-kode yang Saya beri warna hijau itulah yang dimaksud sebagai ID widget.
Sebagai contoh, kamu ingin menampilkan widget arsip hanya pada halaman arsip saja, maka kodenya harus kamu ubah menjadi seperti ini:

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;archive&quot;'>
          #BlogArchive1 {display:none;}
     </b:if>
</style>

Mengatur penampilan widget lebih dari satu tag kondisional dapat kamu tuliskan seperti ini:

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;archive&quot;'>
          #BlogArchive1 {display:none;}
     </b:if>
     <b:if cond='data:blog.url == data:label.url'>
          #Label1 {display:none;}
     </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
          #LinkList1 {display:none;}
     </b:if>
</style>

Mengatur penampilan beberapa widget sekaligus hanya dalam satu macam kondisi halaman dapat kamu tuliskan seperti ini:

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;archive&quot;'>
          #BlogArchive1, #Label1, #HTML6 {display:none;}
     </b:if>
</style>

Simpan perubahan templatemu.