Easy HTML Tricks for Blogging: artikel

Showing posts with label artikel. Show all posts

Perbedaan DIV dan SPAN tag

DIV dan SPAN adalah dua tag HTML yang sangat sering digunakan untuk menandai suatu bagian dari berkas halaman baik dengan ID ataupun CLASS. Dalam artikel ini, saya juga akan berbagi informasi tentang perbedaan tag html div dan span yang akan saya tuliskan secara sederhana yang dikutip dari berbagai sumber.
HTML adalah semua tentang penerapan makna konten. Sebagian besar tag HTML biasanya hanya berlaku untuk kategori tertentu, misalnya tag p untuk membuat paragraf, heading (h1-h6) untuk membuat judul, blockquote untuk teks kutipan dan sebagainya. Namun tag div dan span penggunaanya cukup luas. Mereka (Div dan Span) benar-benar digunakan secara luas dalam hubungannya dengan penerapan gaya CSS.
<div> dan <span> biasanya digunakan dalam potongan kelompok kode HTML dan menghubungkan beberapa informasi ke potongan itu, paling sering dengan atribut CLASS dan ID untuk mengasosiasikan elemen dengan kelas atau id CSS pemilih.
Sebagai contoh :

<div id="navigation">
<span>
<a href="/index.xhtml>HOME</a>
</span>
</div>

Penggunaan tag span dalam paragraf

<div id="content">
<p>
Selamat datang di <span class="yelshadow">Zhamelank Blog</span>. Semoga informasi yang terdapat dalam blog ini bisa bermanfaat.
<p>
</div>

Perbedaan mendasar antara DIV dan SPAN dalam dokumen HTML adalah bahwa DIV (divisi) merupakan elemen blok tingkat yang pada dasarnya memiliki baris jeda sebelum dan sesudah penggunaan kode (secara default akan ditampilkan sebagai elemen blok), sedangkan SPAN adalah elemen inline, yang umumnya digunakan untuk menyorot teks atau kalimat (secara default akan ditampilkan sebagai elemen inline).
Menempatkan tag DIV atau tag blok tingkat dalam SPAN adalah salah dan tidak valid, misalnya menempatkan tag paragraf <p> dalam tag span. Untuk melakukannya (membungkus elemen blok tingkat), maka perlu menempatkan elemen blok tingkat lain seperti menempatkan tag paragraf <p> dalam tag div.

sumber : http://zhamelank.heck.in/perbedaan-antara-tag-html-div-dan-span.xhtml

Membuat Search Box dalam Menu Bar

Fitur pencarian merupakan suatu alat dalam blog kita sebagai navigasi untuk mencari artikel yang berada di dalam blog kita, untuk itu berikut ini adalah cara yang mudah untuk menambahkan search bar yang ikut dalam tag dalam menu bar (jadi kalau belum punya supaya bikin dulu...!!(taruh dalam ]]></b:skin> (intinya pada kode css dalam tag header)

#navright {
width: 220px;
font-size: 11px;
float: right;
padding:0px;
margin: 0px;
}

3. buka link menu bar milik anda dan copy paste kode ini

<div id='navright'> <form action='/search' id='searchthis' method='get' style='display:inline;
'><input id='search-box' name='q' size='25' type='text' value='Cari Artikel Disini'/><input id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJEG6ROslLVprnVx9jZiwCt96rhTqRO4KiFImYfZ8PkGk6OBxecfcFWTz42CNT8WArSY3OapwlHrv8z3AkBnSe3ddEuDcCDFXbOYfdaPPDZI6Yo8Ggu7XuiFsf-Pb7S9floRx4LVqsd4/s1600/magnifier.png' style='margin-left: 5px;
margin: 1px 15px 0px 13px;' type='image' value='Search'/></form> </div>

sesuaikan dengan menu bar yang anda buat..!!!

Mudah Membuat Breadcrumbs untuk SEO

Breadcrumb adalah sebuah navigasi menu horizontal pada sebuah blog yang biasanya berada pada posisi atas blog di bawah judul atau header blog dan berfungsi mempermudah bagi pengunjung untuk mengetahui sedang berada di halaman mana berada dan memudahkan ketika akan kembali ke menu sebelumnya.

Anda dapat melihatnya pada contoh pada blog ini atau lihat pada picture bawah ini

Membuat breadcrumb pada sebuah blog sepertinya sesuatu yang wajib diadakan, kenapa? karena selain dari fungsi di atas, sama halnya seperti sitemap, breadcrumb juga sangat baik bagi SEO blog karena akan memperkaya kata kunci dalam postingan.

Bagi anda yang memakai template bawaan blogger breadcrumb ini tidak disediakan dan anda harus menginstalnya sendiri. Tetapi untuk template-template gratisan dari penyedia template yang banyak beredar terkadang fungsi breadcrumb ini sudah terpasang otomatis.

Nah sekarang bagaimana cara membuat breadcrumb pada blogspot? Gampang sekali kok ^_^, caranya adalah:

1. Log in ke blogger

2. Masuk ke rancangan > Edit HTML > centang “Expand Template Widget”

3. Untuk amannya adan download dulu templatenya sebagai antisipasi apabila ada kesalahan.

4. Dengan CTRL F cara kode ]]></b:skin>

5. Copy kode dibawah ini dan paste tepat diatas kode ]]></b:skin>

.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

6. Kemudian copy kode dibawah ini dan paste tepat dibawah kode <div class='post hentry'> atau cari kode ini <b:includable id='post' var='post'> Paste kode dibawah tepat dibawahnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda disini » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

7. Selesai. Simpan dan lihat hasilnya dengan mengklik salah satu postingan.

Kustomasi CSS untuk menghilangkan sidebar

cara menghilangkan elemen halaman sidebar dan komentar di artikel tertentu

Sebenarnya saya sangat menggemari kustomasi css dari tiap masing-masing artikel atau halaman / pages dari blog. Terbetik sebuah ide untuk memakai tag style untuk menghilangkan widget yang diwakili dari id (#) atau class (.) yang dapat kita ketahui dari kode xhtml yang dipakai untuk membangun blog dengan format blogger.com (ya.. yang seperti inilah).. Untuk menghasilkan hal seperti itu, saya menyamakan untuk melakukan pemanggilan kembali kode Css dari halaman Edit Entri Postingan. Jadi ketika pengunjung membuka halaman tersebut, beberapa elemen blog akan hilang. Berikut ini trik dasarnya, yang saya dapat dari blogger bernama kang salman yang ada di http://www.kucoba.com/2011/02/cara-menghilangkan-widget-di.html


.....Ini adalah bagian akhir dari isi postingan.
<style>
#kodenya {display:none;}
</style>

Andat bisa menyisipkan pemanggilan kode Css diatas dibagian akhir edit entri postingan. Untuk halaman postingan yang pernah saya sisipkan kode Css seperti dibawah ini.


.....Ini adalah bagian akhir dari isi postingan.
<style>#main-wrapper{width: 960px; float: left; margin: 0 10px 0 10px; word-wrap: break-word;overflow: hidden;}</style>

<style>#related-posts{display:none;}</style>
<style>#comment-form{display:none;}</style>
<style>#comments{display:none;}</style>
<style>#sidebar-wrapper{display:none;}</style>