Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Sabtu, 21 Oktober 2017

DAFTAR TAG HTML DAN FUNGSINYA

TAG HTML FUNGSI TAG HTML DAN CONTOHNYA
1. <I> </I> Menyisipkan tulisan miring.   makan
2. <u> </u> Menyisipkan tulisan bergaris bawah.   minum
3. <b> </b> Menyisipkan tulisan tebal .   belajar
4. <li> </li> Menyisipkan bullet.  *  FUNGSI HTML
5. <marquee> </marquee> Menyisipkan tulisan berjalan .  “welcome to website” bergerak dari kiri ke kanan atau dari atas ke bawah.
6. <blink> </blink> Menyisipkan tulisan berkedip kedip. <blink> klick here </blink>
7. <center> </center> Menyisipkan tulisan dalam bentuk ratah tengan .
“hendra simanungkalit”

8. <title> </title> Menyisipkan title html
9. <head> </head> Menyisipkan bagian head pada sebuah html.\
10. <body> </body> Menyisipkan atribut untuk seluruh dokumen. Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth
11. <html></html> Tag pembuka di dalam membuat sebuah desain web.
12. <h1> </h1> Menyisipkan tulisan dalam bentuk h1 Header 1
13. <h2> </h2> Menyisipkan tulisan dalam bentuk h2. Header 2
14. <h3></h3> Menyisipkan tulisan dalam bentuk h3. Header 3
15. <h4></h4> Menyisipkan tulisan dalam bentuk h4. Header 4
16. <h5></h5> Menyisipkan tulisan dalam bentuk h5. Header 5
17. <h6></h6> Menyisipkan tulisan dalam bentuk h6. Header 6
18. <h7> </h7> Menyisipkan tulisan dalam bentuk h7. Header 7
19. <abbr> </abbr> Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja
20. <acronym></acronym> Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
21. <area ></area> Mendefinisikan daerah yang dapat diklik (link) pada peta gambar
22. <base > </base> Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen
23. <blockquote> </blockquota> Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam
24. <cite> </cite> Mendefinisikan kutipan
25. <code> </code> Mendefinisikan sebuah bagian dari kode komputer
26. <button> </button> Mendefinisikan sebuah tombol diklik
27. <cite> </cite> Mendefinisikan kutipan
28. <font> </font> Mendefinisikan jenis font, warna dan ukuran untuk teks
29. <form> </form> Mendefinisikan sebuah form HTML untuk input form
30. <frame> </frame> Mendefinisikan frame dalam frameset
31. <hr> </hr> Membuat garis horizontal
32. <small> </small> Memperkecil ukuran teks dari ukuran defaultnya
33. <span> </span> Mendefinisikan sebuah section dalam dokumen
34. <strike> </strike> Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
35. <strong> </strong> Membuat teks tebal, fungsi tag ini sama dengan tag <b>
36. <tr> </tr> Membuat baris di dalam sebuah table
37. <ul> </ul> Mendefinisikan daftar dalam format bullet
38. <td> </td> Mendefinisikan sel di dalam sebuah table. Height, width, bgcolor, background, align, valign, title, colspan, rowspan
39. <thead> </thead> Untuk mengelompokkan isi header di dalam sebuah tabel
40. <samp> </samp> Mendefinisikan contoh keluaran dari program computer
41. <frameset> </frameset> Mendefinisikan satu set frame
42. <input > </infut> Mendefinisikan input field pada form
43. <img > </img> Berfungsi untuk menampilkan gambar pada dokumen HTML. Src, alt, name, border, height, width
44. <big> </big> Memperbesar ukuran teks sebesar satu point dari defaultnya
45. <em> </em> Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
46. <fieldset> </fieldset> Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form
47. Mendefinisikan client-side script
48. <select> </select> Membuat daftar drop-down
49. <strong> </strong> Membuat teks tebal, fungsi tag ini sama dengan tag <b>
50. <sub> </sub> Memberikan efek subscript pada teks. Subscript
51. <sup> </sup> Memberikan efek superscript pada teks. Superscript
52. <table> </table> Membuat table. Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign
53. <textarea> <textarea> Mendefinisikan sebuah kontrol input multiline. Name, rows, cols, wrap
54. <tfoot> </tfoot> Untuk mengelompokkan isi footer di dalam sebuah tabel
55. <th> </th> Mendefinisikan sel header di dalam  sebuah table. Height, width, bgcolor, background, align, valign, title, colspan, rowspan
56. <ul> </ul> Mendefinisikan daftar dalam format bullet
57. <var> </var> Mendefinisikan sebuah variable
58. <xmp> </xmp> Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre>
59. <tt> </tt> Mendefinisikan teletype text
60. <option> </option> Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down
61. <noscript> </noscript> Jika browser user tidak mendukung client-side scripts
62. <noframes> </noframes> Jika browser user tidak mendukung frame
63. <nobr> </nobr> Mencegah ganti baris pada teks atau gambar
64. <meta > </meta> Mendefinisikan metadata tentang sebuah dokumen HTML
65. <menu> </menu> Mendefinisikan sebuah daftar menu
66. <map> </map> Mendefinisikan client-side peta gambar
68. <listing> </listing> Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes
69. <legend> </legend> Mendefinisikan sebuah caption untuk elemen <fieldset>
70. <ol> </ol> Ordered List (digunakan dengan <li>) . 1. Item 1
71. <p> </p> Menyisipkan paragraph
72. <br> </br> Mengganti baris
73. <hr> </hr> Mengganti horizontall
74. <dt> </dt> Definition term
75. <dd> </dd> Definition list
76. <colgroup> </colgroup> Format yang berlaku bagi kolom. Height, width, align, valign, bgcolor, background, colspan
77. <a> </a> Membuat link ke dokumen atau situs lainnya. Href, target, style, class, name, id
78. <option> </option> Selected, name, value
79. <pre></pre> Preformatted teks. Contoh text
80. <button> </button> Mendefinisikan sebuah tombol diklik.

Selasa, 28 Februari 2017

Pada artikel ini akan membahas tentang bagaimana untuk memulai langkah awal untuk menjadi seorang programmer. bahasa pemograman apa saja yang perlu dikuasai dalam pemograman web dan pemograman internet.

Definisi pemograman web

World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya. Hiperteks dilihat dengan sebuah program bernama browser web yang mengambil informasi (disebut "dokumen" atau "halaman web") dari server web dan menampilkannya, biasanya di sebuah monitor. Kita lalu dapat mengikuti pranala di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim informasi kembali kepada server untuk berinteraksi dengannya. Ini disebut "surfing" atau "berselancar" dalam bahasa Indonesia. Halaman web biasanya diatur dalam koleksi material yang berkaitan yang disebut "situs web".

Definisi Internet

Menurut Budhi Irawan (2005 : 69), Internet adalah suatu jaringan komputer global yang terbentuk dari jaringan-jaringan lokal dan regional yang memungkinkan komunikasi data antar komputer yang terhubung ke jaringan tersebut. Internet merupakan hubungan antar berbagai jenis komputer dan jaringan di dunia yang berbeda sistem operasi maupun aplikasinya, dimana hubungan tersebut memanfaatkan kemajuan media komunikasi (telepon dan satelit) yang menggunakan protokol standar dalam berkomunikasi yaitu protokol TCP/IP. Untuk dapat menggunakan fasilitas internet, komputer kita harus terhubung ke salah satu ISP (Internet Service Provider). ISP adalah perusahaan yang menyediakan layanan untuk menghubungkan komputer kita ke internet atau disebut juga sebagai pintu gerbang ke internet. Untuk itu, kita perlu mendaftarkan diri ke ISP untuk mendapatkan nama dan alamat di internet

Bahasa Pemograman yang perlu dikuasai dalam pemrograman web dan internet

1.HTML

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C). Versi terakhir dari HTML adalah HTML 5, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

2.CSS

Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yg ada di situs kita sekaligus memformat ulang situs kita. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.
Keuntungan dari CSS yaitu Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturanaturan CSS tersebut untuk diterapakan pada seluruh dokumendokumen HTML pada halaman situs kita. User yang berbeda dapat mempunyai style-sheet yg berbeda pula. Ukuran dan kompleksitas document code dapat diperkecil.
pada saat ini sudah banyak framework css instant yang sangat mudah digunakan dan cepat dan sesainnya sudah kren. seperti salah satunya twitter Bootsrap

3.Javascript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.
Jquery adalah salah satu framework js . yang sudah dirancang dengan baik untuk penggunaan js lebih mudah dan simple.slah satunya membuat animasi loader dengan ajax akan lebih mudah megunakan jquery.

4.PHP

Menurut Didik Dwi Presetyo (2004 : 76), PHP merupakan bahasa scripting server-side, dimana pemrosesan datanya dilakukan pada sisi server. Sederhananya, serverlah yang akan menerjemahkan skrip program, baru kemudian hasilnya akan dikirim kepada client yang melakukan permintaan.
dengan php kita dapat menghubungkan dengan database. agar dapat melakukan proses dasar pada database sepert insert, update dan delete data.

apa itu web server ?

Web server adalah software yang menjadi tulang belakang dari world wide web (www). Web server menunggu permintaan dari client yang menggunakan br owser seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser lainnya. Jika ada permintaan dari browser, maka web server akan memproses permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format SGML ( standar general markup language). Data yang berupa format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut. Contohnya, bila data yang dikirim berupa gambar, browser yang hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu menampilkan gambar tersebut, dan jika ada akan menampilkan alternatifnya saja. Web server, untuk berkomunikasi dengan client -nya (web browser) mempunyai protokol sendiri, yaitu HTTP (hypertext transfer protocol ). Dengan protokol ini, komunikasi antar web server dengan client-nya dapat saling dimengerti dan lebih mudah. Seperti telah dijelaskan diatas, format data pada world wide web adalah SGML. Tapi para pengguna internet saat i ni lebih banyak menggunakan format HTML (hypertext markup language) karena penggunaannya lebih sederhana dan mudah dipelajari. Kata HyperText mempunyai arti bahwa seorang pengguna internet dengan web browsernya dapat membuka dan membaca dokumen -dokumen yang ada dalam komputernya atau bahkan jauh tempatnya sekalipun. Hal ini memberikan cita rasa dari suatu proses yang tridimensional, artinya pengguna internet dapat membaca dari satu dokumen ke dokumen yang lain hanya dengan mengklik beberapa bagian dari ha laman-halaman dokumen (web) itu. Proses yang dimulai dari permintaan webclient (browser), diterima web server, diproses, dan dikembalikan hasil prosesnya oleh web server ke web client lagi dilakukan secara transparan. Setiap orang dapat dengan mudah menget ahui apa yang terjadi pada tiap - tiap proses. Secara garis besarnya web server hanya memproses semua masukan yang diperolehnya dari web clientnya.

5.MySQL

Menurut Didik Dwi Prasetyo (2004 :18) MySQL merupakan salah satu database server yang berkembang di lingkungan open source dan didistribusikan secara free (gratis) dibawah lisensi GPL. MySQL merupakan RDBMS (Relational Database Management System) server. RDBMS adalah program yang memungkinkan pengguna database untuk membuat, mengelola, dan menggunakan data pada suatu model relational. Dengan demikian, tabel-tabel yang ada pada database memiliki relasi antara satu tabel dengan tabel lainnya.

dari penjelasan diatas dapat kita simpulkan bahwa semua bahasa pemograman baik itu termasuk dalam kategori client side maupun server side yang ada diatas. wajib di kuasai untuk menjadi seorang programmer berbasis web.

Senin, 06 Februari 2017

selamat datang di arsipbertuah blog. pada posting sne kali ini. ane akan membahas tentang cara membuat form login popup atau melayang. menggunakan Bootstrap. seperti yang kita ketahui Bootstrap adalah framework untuk mendesain sebuah aplikasi / sistem yang berbasis web. bootstrap memberikan kemudahan untuk kita dalam mendesain user interface pada web. yang telah di desain sendiri komponen- komponen HTML menggunakan CSS sehingga tampilan web lebih teratur dan rapi . dan dengan sentuhan javascrip yang sudah diatur sedemikin rupa akan membuat web yang kita buat lebih interaktif dengan user. salah satu komponen untuk membuat form login tampilan popup atau melayang adalah menggunakan salah satu komponen bootstrap yaitu Modal. Modal pada botstrap adalah sebuah activity dialog yang muncul di tengah layar.
pada artikel ini kita akan belajar membuat desain form login menggunakan modal Twitter Bootstrap. dengan tujuan hanya untuk membuat website atau sistem memiliki tampilan yang lebih kren dan interaktif dengan user. lihat kode basic modal bootstrap dibawah ini:

Basic Modal Bootstrap

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>
kode diatas adalah kode dasar dari dialog modal bootstrap. diatas bisa kita lihat ada beberapa kompone yang ada pada modal tersebut.
1.Button untuk aksi memanggil atau acuan untuk menampilkan modal
2.Header modal yaitu tempat memberikan judul misalnya.
3.Content yaitu tempat meletekan isi dari dari suatu dialog
4.footer yaitu biasanya tempat meletakkan buuton dan lain-lain

Membuat Form Login pop up

nah, untuk membuat form login menggunakan modal Bootstrap kita modif saja kode diatas seperi dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>belajar membuat form login menggunakan modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Log in</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Form Login</h4>
</div>
<div class="modal-body">
<form method="post" action="" class="form-horizontal">

<div class="form-group">
<label for="nama" class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" requered ></div>
</div>
<div class="form-group">
<label for="nama" class="col-sm-2 control-label">password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="pwd" requered ></div>

</div>
<div class="form-group">
<label class="col-sm-2"></label>
<div class="col-sm-10">
<a href="">lupa password ?</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="s"class="btn btn-primary">LOGIN</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
</div>

</body>
</html>
begitu gan contoh membuat form login pop up menggunakan modal bootstrap. silahkan kopas kode diatas untuk melihat hasilnya.tapi harus ada koneksi internet karena instalasi bootstrap pada kode diatas menggunakan CDN lihatlah pada tag head diatas. supaya bisa offline instal baca cara instalasi bootstrap disini .ane juga pernah buat seperti gambar ini gan.
belajar-membuat-form-login-modal-bootstrap
begitulah hasilnya yang pernah ane buat. sekaian dari ane semoga dapat memberikan manfaat buat agan. selamat mencoba dan semoga sukses.

Senin, 21 November 2016

Pengertian html

selamat datang di arsipbertuah blog.pada posting ane kali ini ane ingin berbagi pada belajar HTML bagaimana cara untuk menampilkan gambar, video dan audio di web.
HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.salah satunya adalah dengan menampilkankan media di halaman web.
untuk menampilkan gambar,video maupun audio memiliki persamaan yaitu memanggil file pada lokasi/alamat tempat penyimpanan file tersebut.hanya saja tag html yang berbeda ,seperti yang kita lihat untuk gambar hanya di tampilkan sesuai dengan ukuran lebar dan tinggi yang kita atur sedangkan audio menggunakan fungsi lain yaitu tombol play dan pause, begitu juga dengan video.
ada dua macam dalam memanggil file yaitu internal dan external.

belajar HTML menempilkan vidio audio dan gambar
1. internal yaitu memanggil file dari penyimpanan lokal. misalkan agan belajar buat web di komputer.
maka untuk menampilkannya cukup memanggil url folder dimana tempat penyimpanan file.
contoh :
<img src="img/realmadrid.jpg">

2.sedangkan external yaitu memanggil file pada dari link website lain, misalkan agan mau menampilkan gambar dari facebook
maka agan harus copy link gambarnya lalu paste pada tag html agan.tapi cara ini untuk belajar web harus ada koneksi internet
contoh :
<img src="https://yt3.ggpht.com/-zvPqz5WM4EE/AAAAAAAAAAI/AAAAAAAAAAA/fh1Q0Ycpv2M/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">

nah,sekarang kita terjun ke lapangan untuk praktek lansung. tapi pada posting ini,ane menggunakan source file external.
berikut ini adalah contoh HTML untuk menampilkan gambar,video dan audio.

contoh tag html menampilkan video ,audio dan gambar

<html>
<head>
<title>belajar menampikan vidio,gambar dan audio</title>
</head>
<body>
<div>
<h1>gambar</h1>
<img src="#masukan url gambar" width="400">
</div>
<div>

<h1>video</h1>
<video width="400" controls>
<source src="#masukan url video" type="video/mp4" >
</video>
</div>

<h1>audio</h1>
<audio controls>
<source src="#masukan url audio" type="audio/mpeg">
</audio>
</div>
</body>
</html>

silahkan ganti src=""  dengan source file yang ada pada komputer agan .

sekian penjelasan sederhana tantang tag html untuk memanggil video, audio dan gambar .semoga dapat memberikan manfaat dan menambah wawasan untuk mempelajarinya lebih lanjut.

Rabu, 07 Agustus 2013

There are many simple tools that give excellence for blogs, including the design of  template and colors ... etc., today we will learn how to add a logo to your blogger blog , which is an image or text excellence your blog from the rest of other blogs, and the benefits of logo is keeping visitors to your blog and also give her aesthetic.

1. Go to "Blogger Dashboard" > "Layout" "Edit" like the following screen

2. After click on "Editwill appears for you this pop up.
3. Click on ''Choose File'' and upload your logo image from you computer or paste your image url in "From the web. Paste an image URL below" box.
4. Select ''Instead of this description" like the above screen.
5. Finally click on save button.

Jumat, 26 Juli 2013

HTML code contains more than 400 games, which is free to your website/blog, These games provided by www.freegaming.de .


To do this just follow me:
- Simply copy the following code (Html) to your Homepage,Blog,EMail or Website.
<iframe src="http://www.freeonlinegamesplay247.com/webmastercontent/fungames.php" style="border:0px #FFFFFF none;" border="0" name="FunGames Collection" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px" height="700" width="600"></iframe>

Note: Edit the "height="700" and the "width="600" parameter to fit your personal needs.
The Smileys/Emoticons way to give the visitors a lot of fun and confidence to your blog,It is known that these smileys used in social websites as Facebook.
To do this just follow the steps:

1.  Go to Blogger Dashboard  --> Template
2.  Please! download  a copy of your template
3.  Now click on Edit HTML
4.  Use Ctrl+F to find </body>
5.  Then copy and paste just  above/before it, this code:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]>
</script>
<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
</b:if>

Note: You can change blue with your own words.
6. Now the next step to find the code ]]></b:skin>
7. Then copy and paste just  above/before it, this code:
.emoWrap {
  position:relative;
  padding:10px;
  margin-bottom:7px;
  background:#fff;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Opera */
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
  border:3px solid #860000;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  font-weight:normal;
  color:#333;
}
.emoWrap:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}
8. Add the below code above/before </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/
9. Finally click save template.
Now you can see the result and be happy. :-d

Rabu, 10 Juli 2013

I will explain to you in this tutorial how to show post title only in the Home page in your blogger blog. this a simple code works on show titles only and is not a title and post together, where the title appears on the home page of the blog just by clicking on it redirects to the main post, and to be able to install this code in your blog, follow these simple steps:

1. Login to your Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML
4. Use Ctrl + F to find </head> and paste the following code above/before it.
<style type='text/css'>

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

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>

</style>
5. Finally, click on Save the template.
Enjoy and happy blogging! ;)

Sabtu, 25 Mei 2013

How to Add Text And Font Gadget To Your Blog

1. Login to your blogger dashboard--> Layout-->'Add A Gadget'--> Choose HTML/JavaScript
2. Copy and paste the code below into the HTML/JavaScript gadget :
<script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>
<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option selected value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option selected value="Trebuchet Ms"//>Trebuchet Ms
<option value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="18px"/>18
</select></form>
3. Save HTML/JavaScript you are done.

Kamis, 23 Mei 2013

Chatwee is a new chat service, unlike other Chatwee is added as a toolbar and chat deployed on the right side (you can switch to the left), showing the flag next to the user depending on the country where connect. Its design is attractive, however the functions are very limited because you can not choose a nickname unless you register, and so far I still do not know how to change the avatar once you're registered. But yes, it has the advantage of allowing users to share files such as PDF, music and photos.
Once you register you'll have the code you can use on your blog, you can also customize the colors of it.

It is recommended to have a script that prevents the redirection of countries, since the chat is only displayed in the URL you have registered, so if someone from another country comes in and adds another extension is not shown.

How to Add Cool Chat Box to Blogger?


Step 1

1- Go to the following link: chatwee
2- And do like the image


3- After creating your chatwee account, login to your account with your username and password, then you will see a code, just click on �Copy script to clipboard�.

Step 2
1- Login to your blogger dashboard --> Layout --> 'Add A Gadget' --> Html/Javascript
2- then paste the code into the box and then Save Arrangement
3- Now go to your blog to see your chat box.

Selasa, 21 Mei 2013



How To Add a Clock To Your Blogger Blog


1. Login to your blogger dashboard--> Layout-->'Add A Gadget'
2. Choose Html/Javascript Gadget and add the one of code given below : 


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" 
wmode="transparent"> </embed></object>




<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" 
wmode="transparent"> </embed></object>



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf" width="150" height="150" wmode="transparent"></embed></object>



<embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-190.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed>



<embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed>


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object>


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object>



<embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/WorldCupClock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>


3. Save HTML/Javascript you are done.
For more visit:      freeflashclocks.com