Minggu, 27 Mei 2012

Cara Buat/Pasang Fitur Emoticon/Smiley di Comment Blogger

emoticon/smiley blogger
Emoticon/smiley dapat mewakili ekspresi komentator blog. Selain itu, emoticon/smiley dapat lebih mempercantik  tampilan bagian komentar blog. Dengan menggunakan javascript, kita dapat melakukan hack untuk menambahkan fitur emoticon pada blog berplatform Blogger. Emoticon ini menggunakan basis perintah emoticon  Yahoo! yg telah kondang itu. Misalnya, ketika ingin menampilkan gambar emoticon senyum, digunakan perintah/menuliskan karakter :), dst. Di blogger, perintah tersebut dapat diadaptasi guna memunculkan tampilan gambar smiley/emoticon tertentu. Pada fitur emoticon komentar Blogger ini, saya menggunakan gambar-gambar berformat gif milik Yahoo! yg memiliki efek animatif (bergerak).
demo smiley/emoticon comment blogger

Cara Pasang/Buat Fitur Emoticon Pada Komentar Blogger

Jika sobat Blogger tertarik memasang fitur emoticon pada blog sobat, ikuti beberapa langkah pemasangannya. Pada intinya ada 3 poin langkah penting:
a. Memasang CSS yg mengatur tampilan emoticon.
b. Memasang kode HTML guna menampilkan preview emoticon/smiley di bagian atas kotak komentar. Fungsinya sebagai panduan pengunjung ketika hendak membuat emoticon pada komentar.
c. Memasang kode javascript, yg berfungsi mengconvert perintah menjadi gambar emoticon.

Berikut cara pemasangannya:
1. Masuk ke Design/Template > Edit HTML
2. Centang "Expand Widget Templates"
3. Copy paste kode CSS berikut di ATAS ]]></b:skin> (cari dg Ctrl + F):
.bukarahasiasmiley {background: none repeat scroll 0 0 #EFF5FB !important;font-size: small !important;padding: 5px !important;margin:auto !important;text-align: left !important;font-weight:bold !important;width:100% !important;-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;}
.bukarahasiasmiley span {padding-right: 3px !important;} 
img.brbsmly {height: auto !important;vertical-align: middle !important;width: auto !important;border:0px !important;}
Jika ingin ganti warna background, ganti #EFF5FB dengan kode warna lain.
4. Cari <b:if cond='data:post.embedCommentForm'>. Biasanya ada dua tag xml seperti itu, cari & pilih yg kedua, yaitu yg berpasangan dengan <b:include data='post' name='comment-form'/>.
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
5. Copy kode HTML berikut (klik select all & copy), letakkan di BAWAH/SETELAH <b:if cond='data:post.embedCommentForm'>.



6. Copy kode berikut & letakkan di atas </body>:
<script src='
https://sites.google.com/site/bukarahasiahost/blogger-comment-smileys/bukarahasiablogspot-ysmileys-bloggercomments.txt' type='text/javascript'></script>
7. Save template.
8. You are done!

Kini pengunjung n sobat dapat menggunakan emoticon/smiley di komentar blog sobat.
Have a nice Blogging.

Sumer © buka-rahasia.blogspot.com
Diposting oleh di Tidak ada komentar:

Cara Mudah Membuat Logo Blog Keren! (6 Online Text Logo Generators)


Tampilan logo blog pada header yang khas dan memiliki desain yang bagus pasti menjadi dambaan setiap blogger. Logo blog biasanya ditampilkan sebagai bagian dari header yang berupa paduan gambar dan gambar teks yang berisi nama atau ciri dari suatu blog.  Umumnya, logo blog digunakan untuk menggantikan teks pada bagian title dan deskripsi header. Tentu saja, membuat logo blog, meskipun hanya berupa logo text, bukanlah perkara mudah bagi setiap orang. Keahlian setidaknya dibutuhkan untuk membuat teks logo dengan menggunakan software image editing semacam Correl Draw maupun Photoshop.
Pengen punya logo teks blog yang seperti ini?

 Atau yang seperti ini?
Kabar baiknya, saat ini ada banyak layanan situs online logo creator and generator yang dapat memudahkan pekerjaan membuat logo blog. Siapa saja dapat dengan mudah membuat teks logo blog maupun logo blog untuk header dengan hasil yang lumayan baik dan tidak mengecewakan. Telah saya pilihkan 6 online logo generator/creator yang mudah untuk digunakan sebagai berikut:

Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.

FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.

Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.

Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.

Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.

Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Simak Cara Mengubah/Memasang Gambar Background Header Blogger/Blogspot

Sumber:  http://buka-rahasia.blogspot.com/2011/06/cara-mudah-membuat-logo-blog-online.html

 
Diposting oleh di Tidak ada komentar:

Kamis, 19 April 2012

Membuat Halaman 123 / Page Number Navigation Berurut di Blogspot

Baru beberapa hari lalu saya menemukan artikel yang benar-benar saya cari.
Adalah bagaimana cara membuat halaman berurut 123 /page 123 navigation untuk blog di blogger/blogspot.

Kode membuat halaman 123 di blogspot ini,saya dapat dari hasil karya besar Eko di eko tips n trick
Anda bisa mengunjungi website dan tutorial 123 page navigation ini di situsnya langsung dalam tutorialnya 'Membuat Navigasi Page Number Blogspot.

Untuk hasilnya akan seperti gambar dibawah ini:

membuat navigasi page angka/number 123 berurut blogger.


Bagaimana? Ingin membuatnya?

Langkah Cara Membuat Page Navigasi Angka / Number 123dst pada Blog.



Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.
Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut:

]]></b:skin>

Setelah ketemu,letakkan persis diatasnya kode css dibawah ini:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Lalu,cari lagi kode seperti ini:

</body> 

Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if> 

Langkah terakhir,carilah kode berikut: 

 'data:label.url'

Jika sudah ketemu, ganti kode tersebut dengan  kode berikut:

'data:label.url + &quot;?&amp;max-results=5&quot;'

Sekarang,simpan templates anda,dan anda bisa lihat hasilnya sekarang :D
Diposting oleh di Tidak ada komentar:

Mengenal Kode HTML




HTML adalah Hypertext Markup Language, yaitu sebuah bahasa representasi untuk halaman website. Pertama kali dikembangkan di CERN yaitu sebuah laboratorium fisika partikel yang berlokasi di Swiss.

HTML memiliki kelebihan yang mendasar yang tidak dimiliki oleh bahasa pemrograman biasa yaitu, adanya hypertext, yaitu link yang dapat menghubungkan antara dokumen satu dengan lainnya.
Justru dengan adanya perbedaan fungsi antara HTML dengan bahasa pemrograman maka keduanya dapat digabungkan untuk membuat situs web yang bagus.

Mengapa kita perlu mengenal HTML ?

Mengenal dan mengetahui kode HTML adalah salah satu usaha agar kita bisa memaksimalkan tampilan website/blog yang kita kelola. Karena, hampir semua dokumen web dibuat dengan kode-kode HTML. Adapun tag-tag yang sering muncul dalam dokumen berekstensi *htm atau *html, yang sering muncul terutama banyak digunakan dalam pembuatan template blog/website adalah sebagai berikut :
  • <html> …… </html>
Sebuah file HTML selalu harus ada dalam pasangan tag di atas. Informasi dalam file HTML ini dibagi dalam dua bagian yaitu :
  1. Header(<head> …</head> yang menyimpan informasi administratif, dan
  2. Body (<body> …</body>) di mana terdapat informasi dokumen yang akan ditampilkan.
Struktur umum dari file HTML adalah seperti di bawah :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Judul HTML</title>
</head>
<body>
<p>Ini adalah body<br>
</p>
</body>
</html>
Lebih jelasnya, coba buka template blog anda kemudian download template-nya. Lalu paste-kan di notepad. Anda akan mendapati tag html seperti yang diatas tertera pada template blog anda.

Tag lain yang umum dipakai dalam sebuah halaman web untuk menciptakan sebuah halaman yang lebih hidup adalah tag-tag yang masuk dalam format tampilan. Di bawah ini adalah contoh tag html dan fungsinya :

  • <b> …</b> adalah tag yang digunakan untuk membuat huruf tebal.
  • <u> … </u> adalah tag yang digunakan untuk membuat garis bawah.
  • <i> … </i> adalah tag yang digunakan untuk membuat huruf miring
  • <blink> … </blink> adalah tag yang digunakan untuk mengatur tulisan agar berkedip
  • <marquee> … </marquee> adalah tag yang digunakan untuk mengatur sebuah tulisan yang berjalan
  • <table> … </table> adalah tag yang digunakan untuk membuat tabel. Namun untuk penggunaannya, ia harus di dukung tag atribut lain agar bisa menampilkan sebuah kotak. Diantara tag atribut yang melekat dalam tag <table> adalah : <tr> … </tr> yang fungsinya untuk menampilkan baris dalam tabel. Dan, <td> … </td> adalah untuk menampilkan kolom dalam tabel.
  • <p> adalah tag untuk memisahkan paragraf
  • <hr> adalah tag untuk membuat garis pemisah.
  • <center> …</center> tag untuk membuat rata tengah.
Untuk saat ini itu dulu, kita akan lanjutkan di posting-posting berikutnya.


Sumber:
http://lulukmarjan.wordpress.com/2012/03/27/mengenal-kode-html/
Diposting oleh di Tidak ada komentar:

Kode HTML

01<!-- --> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
02<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
03<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
04<applet> Sebagai awal dari Java applets<!--more-->
05<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
06<b> Membuat teks tebal
07<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
08<bgsound> Memberi (suara latar) background sound pada halaman web
09<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
10<blink> Membuat teks berkedip
11<body> Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
12<br> Pindah baris
13<caption> Membuat caption pada tabel
14<center> Untuk perataan tengah terhadap teks atau gambar
15<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
16<dd> Indents teks
17<div> Represents different sections of text.
18 Menambahkan sound or file avi ke halaman web
19<fn> Seperti tag <a name>
20<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
21Mendefinisikan input form
22<frame> Mendefinisikan frame
23<frameset>; Mendefinisikan attribut halaman yang akan menggunakan frame
24<h1> ... <h6> Ukuran font
25<head> Mendefinisikan head document.
26<hr> Membuat garis horizontal
27<html> Bararti dokumen html
28<i> Membuat teks miring
29<img> Image, imagemap atau an animation
30<input> Mendefinisikan input field pada form
31<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
32<map> Mendefinisikan client-side map
33<marquee> Membuat scrolling teks (teks berjalan) - hanya pada MS IE
34<nobr> Mencegah ganti baris pada teks atau images
35<noframes> Jika browser user tidak mendukung frame
36<ol> Mendefinisikan awal dan akhir list
37<p> Ganti paragraf
38<pre> Membuat teks dengan ukuran huruf yg sama
39<script> Mendefinisikan awal script
40<table> Membuat tabel
41<td> Kolom pada tabel
42<title> Mendefinisikan title
43<tr> Baris pada tabel
44<u> Membuat teks bergaris bawah
  
 Sumber:

     http://irfanwineers.wordpress.com/2012/03/08/beberapa-kode-tag-html-beserta-fungsinya/                                                                                                                                                                                                                                                             
Diposting oleh di Tidak ada komentar:

Kode Kode HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:
Belajar
Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :
Belajar
Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :
Belajar
Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar
Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar
Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar
Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar
Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar
Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..
Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar
Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar
Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
42
Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
42
Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf
Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar
Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar
Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3
Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:
Belajar
Membuat tabel border solid gunakan kode:
<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
hasilnya seperti :
Text

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:
Text

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :
Text

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:
Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.
Diposting oleh di Tidak ada komentar:

Minggu, 08 April 2012

Wujud pasir setelah diperbesar 110x !!

Pasir adalah sebuah bentuk seni itu sendiri. pasir tampaknya seperti segerombolan batu kecil berwarna coklat, mungkin dibumbui dengan hancuran kulit kerang. Tapi pasir memiliki cerita jauh lebih menarik untuk diceritakan.

Terdiri dari sisa-sisa ledakan gunung berapi, mengikis pegunungan, organisme mati, dan bahkan struktur buatan, pasir dapat mengungkap sejarah-baik biologi dan geologi-lingkungan lokal. Seorang ilmuwan Gary Greenberg meneliti pasir lebih dalam, ternyata pasir dapat mengungkapkan warna yg spektakuler dari segi bentuk maupun tekturnya.


Berikut ini photo2 pasir dalam bentuk 3D oleh Greenberg dgn menggunakan Mikroskop Edge 3D (pembesaran 110x), kumpulan butiran pasir dari belahan dunia.






Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)

Free Download 4shared Premium Gratis

http://bengkelweb.co.de/4shared/

Valid CSS!

LinuxHQ LinuxHQ
Free Automatic Backlink Religion (Islam) - TOP.ORG Religion blogs powered by PRBbutton Religion Blogs - Blog Rankings rantop.com Saung Link SEO-Supreme Professional search tools for free Get Freebl Religion Blogs