Tool pharse html

Mungkin beberapa sobat masih ada yang belum tahu apa itu Parse HTML.

Mem-Parse\mem-parsing HTML adalah salah satu cara yang di gunakan para blogger untuk memposting artikel yang berkaitan dengan code HTML/javascript. Kegunaannya agar kode yang kita posting di dalam artikel akan tampil menjadi sebuah karakter/tulisan. Karena jika kita memposting kode script kedalam artikel, maka tulisan tidak akan muncul atau malah muncul sebagai widget. (referensi dari bagollum)
jika sobat ingin widget yang seperti ini, sobat bisa membuka artikel saya cara membuat widget parse html.

ok langsung aja deh dibawah ini toolnya..

Cara :
copy kode html yang hendak oum p

read more “Tool pharse html”

Cara buat Spoiler pada postingan blogger

Spoiler : suatu ruang dalam postingan yang dapat di sembunyikan dan dapat di tampilkan dengan bantuan tombol ,hampir sama dengan menempatkan sebuah gambar atau text anda di wadah bingkai yang sering lihat di web atau blog yang gambar pada artikel nya di sembunyikan dan kalau kita ingin melihat gambar nya kita di suruh klik pada suatu tombol..kira-kira begitu deh ,mungkin sobat lebih paham apa yang di maksud dengan spoiler ,di bawah ini ada beberapa kode pembuatan spoiler yang mungkin dapat menghemat tempat postingan kita baik gambar maupun teks dan juga tidak mengganggu loading web kita,yuk mari kita coba.....

 Koyo iki lo rek...........

Ini kodenya: 1.spoiler tampilkan/sembunyikan <div> <input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div> <div class="alt2"> <div style="display: none;"> <div style="background:000;text-align:left;padding:10px;color:#ffffff;"> Masukkan text anda di sini </div> </div> </div>

Caranya gini oum........
Copy kode berikut pada postingan yang ingin di beri  Spoiler

&lt;div&gt;&lt;div style=&quot;margin: 20px; margin-top:5px&quot;&gt;&lt;div style=&quot;margin-bottom: 2px;&quot; class=&quot;smallfont&quot;&gt;&lt;input style=&quot;margin: 0px; padding: 5px; width: auto; &quot; value=&quot;Show&quot; onclick=&quot;if (this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display != &#039;&#039;){ this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;&#039;; this.innerText = &#039;&#039;; this.value = &#039;Hidden&#039;; }else { this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;none&#039;; this.innerText = &#039;&#039;; this.value = &#039;Show&#039;; }&quot;type=&quot;button&quot;/&gt;&lt;/div&gt;&lt;div class=&quot;alt2&quot;&gt;&lt;div style=&quot;display: none;&quot;&gt;&lt;div style=&quot;border: none; color:none; background-color:none; text-align: justify; padding:10px;&quot;&gt; DISINI LETAK KONTENT ANDA&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

Mau gaya lain lagi
moga Manfaat ya brooo

read more “Cara buat Spoiler pada postingan blogger”

Perbedaan javascript dan jquery

Perbedaan antara javascript dan jquery sering menimbulkan pertanyaan, dari segi penulisan maupun penggunaanya. Berikut ini saya akan berbagi tentang apa Perbedaan javascript dan jquery tersebut.
Perbedaan dari definisi javascript dan jquery

Javascript adalah bahasa pemrograman yang dirancang untuk berjalan di lingkungan klien yang dikombinasikan dengan dokumen HTML. Javascript dijalankan dengan bantuan browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol browser dan memanipulasi dokumen web saat ditampilkan.
Sedangkan jquery adalah komponen/librari/framework yang dibuat dari javascript dengan tujuan memudahkan seorang programmer dalam menggunakan fungsi-fungsi yang lebih rumit. Dengan jquery, seorang programmer bisa lebih leluasa dan mudah melakukan kontrol/manipulasi halaman web. Oleh karena kemudahan tersebut jquery memiliki semboyan "write less, do more" yang bisa kita artikan dengan sedikit menulis kode tapi dapat melakukan banyak hal.
Jquery dibangun dengan berorientasi objek sehingga akan lebih optimal dan memiliki kemampuan yang lebih luas untuk menciptakan serta memanipulasi halaman web yang dikirimkan ke browser pengguna.
Mari kita lihat bagaimana penulisan javascript dan javascript untuk melakukan sebuah manipulasi background dokumen html berikut:

Javascript

<script language="javascript">

function changeBackground(color)

{

  document.body.style.background = color;

}

onload="changeBackground('red');"

</script>

Jquery

   

<script>

  $('body').css('background', '#ccc');

</script>

-Sumber  : http://www.zainalhakim.web.id/posting/perbedaan-javascript-dan-jquery

read more “Perbedaan javascript dan jquery”

Pengertian Padding,Margin dan Border pada CSS

  Bagi rekan blogger yang suka otak-atik template blognya (tidak hanya di template blog seeh), pasti sering kali melihat kata-kata dan istilah Padding, Margin Dan Border pada CSS yang digunakan sebagai pengukuran dasar pada CSS.. Nah pada pertemuan ini saya akan memberikan sedikit pengertian dari ketiga Hal tersebut dan juga gunanya..

Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu :


Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah

Padding :   Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border   :   Adalah garis tepi dari komponen
Margin   :   Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

Cara Penggunaan :

Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)

Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas

Satuan Dalam CSS

1. Statik

    in -- satuan inchi
    cm -- satuan centimeter
    mm -- satuan milimeter
    pt -- satuan point (1point = 1/72 inchi)
    pc -- satuan pica (1pica = 12 point)
    px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)

2. Relatif

    % -- satuan persen
    em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
    ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

Sekian semoga bermanfaat

Cak

read more “Pengertian Padding,Margin dan Border pada CSS”

Cara Membuat Popular Post Entri Populer dengan Fungsi Scroll

Bagi sobat yang ingin menampilkan widgat Arsip / Daftar isi dengan fungsi scroll silahkan ikuti berikut ini:

1.     Login terlebih dahulu mengunakan akun bloger
2.     Buatlah Entri Populer/Populer Post dengan menambah Gadget pada sidebar, beri nama dengan  "Populer Post" ( bisa diganti sesuai keingian ).
3.     Simpan/save. sampai disini anda telah membuat Entri Populer/Populer Post ( tanpa fungsi       scroll ).
4.     Utuk menambahkan fungsi scroll pada Arsip Sekarang tuju Tata letak -- -->>Edit HTML.
5.     Beri tanda centang pada Expand Template Widgets.
6.     Cari Populer Post yang sudah di buat tadi, dengan CTRL+F dan ketikkan kata “Populer Post”, ( biasanya di pojok kanan bawah ). akan muncul kode hatml seperti di bawah ini:

    <b:widget id='PopularPosts1' locked='false' title='Galery Populer' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div style='overflow:auto; width:ancho;height:200px;'>
    <div class='widget-content popular-posts'>
    <ul>
    <b:loop values='data:posts' var='post'>
    <li>
    <b:if cond='data:showThumbnails == &quot;false&quot;'>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <!-- (1) No snippet/thumbnail -->
    <a expr:href='data:post.href'><data:post.title/></a>
    <b:else/>
    <!-- (2) Show only snippets -->
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div class='item-snippet'><data:post.snippet/></div>
    </b:if>
    <b:else/>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <!-- (3) Show only thumbnails -->
    <div class='item-thumbnail-only'>
    <b:if cond='data:post.thumbnail'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    </div>
    <div style='clear: both;'/>
    <b:else/>
    <!-- (4) Show snippets and thumbnails -->
    <div class='item-content'>
    <b:if cond='data:post.thumbnail'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div class='item-snippet'><data:post.snippet/></div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div></div>
    </b:includable>
    </b:widget>

    Letakkan Kode berikut ini <div style='overflow:auto; width:ancho;height:200px;'> sebelum kode <div class='widget-content popular-posts'>


8. Letakkan Kode berikut Sebelum kode </b:includable>

</div>

9. Perhatikan tulisan berwarna merah di atas, kode itulah yang harus disisipkan kedalam
arsip yang telah dibuat, sedangkan tulisan yang berwarna biru pada height:200px;
adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan )
10. Simpan template dan lihatlah hasilnya

C a k

read more “Cara Membuat Popular Post Entri Populer dengan Fungsi Scroll ”

Membuat Blockquote Keren Di Blog

  Artikel yang saya cari-cari dari dulu, yaitu blockquot yang tampilannya cantik dan menarik dilihat, saya kira itu bukan blockquote melainkan text area yang diberi background, tp ternyata saya salah... hehee
Nah, karna itulah kali ini saya akan bahas cara membuat blockquote.
Seperti yang sudah kita tahu Pada blogger sendiri sudah ada fitur Blockquote , tetapi setiap tampilannya berbeda tergantung kode CSS yang ada pada tempalte blog Sobat.
Bagi Sobat yang ingin membuat tampilan layaknya punya saya, silahkan ikuti langkah-langkah berikut :

Gambar

Contoh tampilannya seperti di bawah ini :

Contoh Blockquote Kode-Blogger

Cara Membuatnya Sebagai berikut :

• Login ke akun Blogger Sobat
• Masuk Tata Letak
• Edit HTML
• Beri centang pada "Expand template widget"
• BackUp template sobat dulu, dengan cara klik "download template lengkap"
• Cari kode Berikut : .post blockquote {
• Berilah imbuhan, sehingga kodenya jadi seperti berikut :

.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, &quot;Courier New&quot;, Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}

• Simpan Template.

Keterangan :
Cara menggunakannya, waktu buat postingan baru cukup klik gambar "blockquote" yg sudah ada di form posting blogger.
Semoga bermanfaat. 

Sumber 

read more “Membuat Blockquote Keren Di Blog ”

Membuat Efek Bayangan Pada Teks

Salah satu cara yang bisa sobat blogger lakukan untuk memodifikasi atau menghias tampilan dari teks atau postingan sobat blogger adalah dengan cara menambahkan warna dan efek bayang pada teks sobat blogger. Efek bayang atau Shadow Effect akan membuat tulisan sobat blogger terlihat lebih Cool dan menakjubkan. Coba perhatikan contoh di bawah ini!

Cak kis kopen

Apakah sobat blogger penasaran bagaimana cara membuat teks berbayang pada postingan? Baiklah, coba sobat blogger ikuti langkah berikut :

Cara Menambahkan Efek Bayang pada Tulisan atau Teks :

Ketika sobat blogger menulis postingan di blogger.com, sobat blogger harus menulis postingan dalam mode HTML.

Kemudian tambahkan kode berikut sebelum dan setelah teks.

<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 2pxac black }</style><font color="white"><b class="drop-shadow"><b>Cak kis kopen</b></f0nt></b>


selamat belajar

read more “Membuat Efek Bayangan Pada Teks”