tag:blogger.com,1999:blog-20537436879067828702024-03-05T19:25:50.347+08:00Berbagi Tips BloggerBerbagi informasi online, komputer, software, tutorial, blogger template, dan tips trik bloggerAnonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.comBlogger52125tag:blogger.com,1999:blog-2053743687906782870.post-27553692620431709732016-03-24T15:05:00.000+08:002016-03-24T15:05:29.348+08:00Cara penanganan Jumlah Postingan di Halaman Beranda Blogger yang tidak sesuai dengan setelanAda beberapa beberapa Blogger yang tidak dapat mengatur jumlah postingan yang muncul di halaman Beranda Blogger, padahal di setelan pos mereka sudah mengisi dengan angka yang mereka inginkan (misal mereka ingin di halaman beranda muncul 20 posting), namun di Blog tetap yang muncul hanya 6,7 atau 9 posting saja. Terutama Rekan Blogger yang menggunakan Template dengan fitur ReadMore.<br />
<br />
Hal seperti ini juga pernah saya alamai di Blog photo yang saya punya (<a href="http://photomyshot.blogspot.co.id/" target="_blank">http://photomyshot.blogspot.co.id</a>), tadinya di halaman beranda maksimal hanya bisa menampilkan 6 postingan saja. Setelah saya tanya sana sini, mencari sana sini belum juga ada solusi yang bisa mengobati masalah saya ini. Akhirnya saya telusuri satu-persatu setiap postingan yang sudah saya buat, untung jumlah pos-nya belum begitu banyak. Ternyata masalahnya ada pada Jump break yang konflik dengan fitur Auto readmore yang ada pada template.<br />
<br />
Jalan keluarnya adalah dengan cara memberi Jump Break pada setiap posting yang Anda buat walaupun template Anda sudah terdapat widget ReadMore otomatis di dalamnya. Usahakan membuat jump break di bawah gambar pertama pada postingan Anda. Ternyata cara ini bisa membuat setelan jumlah tampilan pos di halaman Beranda normal lagi.<br />
<br />
<b><span style="background-color: black; color: white;">Sebagai contoh penerapan Jump Break bisa dilihat dari gambar di bawah ini :</span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJfk4quRmoAp2-eRLreVuOmKRFm27iPfKpPo2pVMe8vEgut3RhHSyxtJrDFMdMmfiCvOwkx1lQH5AIANbSWf-W3C-oQFkz_dfy6-mKn90Yqrbs7me42tXQnLIGxwjNChni5orI6XPOm89x/s1600/jump+break.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJfk4quRmoAp2-eRLreVuOmKRFm27iPfKpPo2pVMe8vEgut3RhHSyxtJrDFMdMmfiCvOwkx1lQH5AIANbSWf-W3C-oQFkz_dfy6-mKn90Yqrbs7me42tXQnLIGxwjNChni5orI6XPOm89x/s400/jump+break.png" /></a></div>
<br />
<br />
<br />Wayanhttp://www.blogger.com/profile/17860284870145482980noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-5344479322670157742016-03-24T10:38:00.004+08:002016-03-24T10:42:00.364+08:00Membuat Widget Recent Comment sangat Ringan di BloggerPada beberapa Blogger kadang enggan memasang Widget Recent Comment (komentar terbaru) di Blog-nya, dengan alasan berat atau loading Blog jadi lambat. Berbeda dengan Widget Recent Comment yang saya share kali ini, widget ini sangat ringan, karena tidak menampilkan avatar komentar, sehingga sangat ringan untuk Blog.Tampilannya juga lumayan gaul, walau sederhana.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNE7EwtsT5Kn6tlAI8f5oNk6O8k_GoLaLO3TjDp-NrUNsDj0-5ncLdyi2vgkjOoCu3cOuqfQ8BZQP0QSP9YIS-NfgY_v5noN7JTuH50Bb8h-a9tnuzEvGw8N7E9pna8-DPeEeo8KB7yS4/s1600/comment.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Widget Recent Comment sangat Ringan di Blogger" border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNE7EwtsT5Kn6tlAI8f5oNk6O8k_GoLaLO3TjDp-NrUNsDj0-5ncLdyi2vgkjOoCu3cOuqfQ8BZQP0QSP9YIS-NfgY_v5noN7JTuH50Bb8h-a9tnuzEvGw8N7E9pna8-DPeEeo8KB7yS4/s320/comment.png" title="Membuat Widget Recent Comment sangat Ringan di Blogger" width="320" /></a></div>
<br />
<b><span style="background-color: black; color: white;">Tertarik ingin memasang di Blog Anda, ikuti langkah-langkah berikut :</span></b><br />
<br />
1). Masuk ke Tata Letak --> Add Gadget --> Pilih HTML/JavaScript<br />
2). Masukkan Script di bawah ini ke dalamnya.<br />
<br />
<blockquote>
<script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_netoopsblog_min.js"></script><script style=text/javascript ><span style="color: red;">var a_rc=5</span>;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=<span style="color: red;">http://berbagitipsblogger.blogspot.com</span>/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><br />
<a style="display:none" href=http://berbagitipsblogger.blogspot.com>Recent Comments Widget</a><style type=text/css><br />
.rcw-comments a {text-transform: capitalize;}<br />
.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}<br />
</style></blockquote>
<br />
Note :<br />
--> Ganti <span style="color: red;">http://berbagitipsblogger.blogspot.com</span> dengan URL Blog Anda<br />
--> <span style="color: red;">var a_rc=5</span> Jumlah komentar yang akan ditampilkan<br />
<br />
3). Simpan Gadget Anda.<br />
Selamat mencoba dan terima kasih.Wayanhttp://www.blogger.com/profile/17860284870145482980noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-34718038504321370922016-03-18T16:27:00.002+08:002016-03-18T16:45:08.359+08:00HTML DictionaryBerikut saya Share kamus HTML, kamus ini sudah pernah di share di Blog-nya arlinadzgn. Mungkin kamus ini juga berguna buat Rekan-rekan Blogger yang apalagi yang sedang belajar bikin Blog dan juga belajar tentang Kode HTML seperti saya ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOyjFWpmk5z2qxHAEl98JRLJGNtiFXYDyl5d3_gpQfu2Hnbv3uZoxqBBwI1lnw4pr0ArkR2LgdbYRx1y_fIu_voMxW0bG6HWeWjJECDZnwGiX7HQm5YC4_xmcncVdqunkCNsMJfOWypcN/s1600/html-on-sheet.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dictionary" border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOyjFWpmk5z2qxHAEl98JRLJGNtiFXYDyl5d3_gpQfu2Hnbv3uZoxqBBwI1lnw4pr0ArkR2LgdbYRx1y_fIu_voMxW0bG6HWeWjJECDZnwGiX7HQm5YC4_xmcncVdqunkCNsMJfOWypcN/s400/html-on-sheet.jpg" title="HTML Dictionary" width="400" /></a></div>
<br />
<br />
<b><span style="background-color: black; color: white;">Berikut Kamus HTML yang dimaksud seperti di bawah ini :</span></b><br />
<br />
<b><span style="color: red;"><!-- ... --></span></b><br />
Digunakan untuk memberi sebuah komentar atau keterangan. Kalimat yang terletak pada kontiner ini tidak akan terlihat pada browser<br />
<br />
<b><span style="color: red;"><!DOCTYPE></span></b><br />
Mendefinisikan informasi tipe dokumen<br />
<br />
<b><span style="color: red;"><a></span></b><br />
Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain<br />
<br />
<b><span style="color: red;"><abbr></span></b><br />
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<br />
<br />
<b><span style="color: red;"><acronym></span></b><br />
Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr><br />
<br />
<span style="color: red;"><b><address></b></span><br />
Mendefinisikan informasi kontak untuk penulis/pemilik dokumen<br />
<br />
<b><span style="color: red;"><applet></span></b><br />
Digunakan untuk memasukan file java kedalam dokumen HTML<br />
<br />
<b><span style="color: red;"><area /></span></b><br />
Mendefinisikan daerah yang dapat diklik (link) pada peta gambar<br />
<br />
<span style="color: red;"><b><b><span class="Apple-tab-span" style="white-space: pre;"> </span></b></span><br />
Membuat teks tebal<br />
<br />
<b><span style="color: red;"><base /></span></b><br />
Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen<br />
<br />
<b><span style="color: red;"><basefont /></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen<br />
<br />
<b><span style="color: red;"><bdo></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Digunakan untuk menimpa arah teks<br />
<br />
<span style="color: red;"><b><big></b></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Memperbesar ukuran teks sebesar satu point dari defaultnya<br />
<br />
<b><span style="color: red;"><blink></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat teks berkedip<br />
<br />
<span style="color: red;"><b><blockquote></b></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam<br />
<br />
<b><span style="color: red;"><body></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya<br />
<br />
<b><span style="color: red;"><br /></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Memberi baris baru/pindah baris<br />
<br />
<b><span style="color: red;"><button><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Mendefinisikan sebuah tombol diklik<br />
<br />
<b><span style="color: red;"><caption></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat caption pada tabel<br />
<br />
<span style="color: red;"><b><center></b></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Untuk perataan tengah terhadap teks atau gambar<br />
<br />
<span style="color: red;"><b><cite></b></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan kutipan<br />
<br />
<span style="color: red;"><b><code></b></span><br />
Mendefinisikan sebuah bagian dari kode komputer<br />
<br />
<b><span style="color: red;"><col /></span></b><br />
Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel<br />
<br />
<b><span style="color: red;"><colgroup></span></b><br />
Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan<br />
<br />
<b><span style="color: red;"><dd></span></b><br />
Mendefinisikan deskripsi dari item dalam daftar definisi<br />
<br />
<b><span style="color: red;"><del></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Untuk memberi garis tengah pada teks/mencoret teks<br />
<br />
<b><span style="color: red;"><dfn></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah istilah definisi<br />
<br />
<b><span style="color: red;"><dir></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah daftar direktori<br />
<br />
<b><span style="color: red;"><div></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah section dalam dokumen<br />
<br />
<b><span style="color: red;"><dl></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah daftar definisi<br />
<br />
<b><span style="color: red;"><dt></span></b><br />
Mendefinisikan istilah (item) dalam daftar definisi<br />
<br />
<span style="color: red;"><<b>em></b></span><br />
Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring<br />
<br />
<b><span style="color: red;"><embed></span></b><br />
Digunakan untuk memasukkan file video atau file musik<br />
<br />
<b><span style="color: red;"><fieldset></span></b><br />
Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form<br />
<br />
<b><span style="color: red;"><font></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan jenis font, warna dan ukuran untuk teks<br />
<br />
<b><span style="color: red;"><form></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah form HTML untuk input form<br />
<br />
<b><span style="color: red;"><frame /></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan frame dalam fremeset<br />
<br />
<b><span style="color: red;"><frameset></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan satu set frame<br />
<br />
<b><span style="color: red;"><h1> to <h6></span></b><br />
Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.<br />
<br />
<span style="color: red;"><b><head></b></span><br />
Digunakan untuk memberikan informasi tentang dokumen tersebut<br />
<br />
<b><span style="color: red;"><hr /></span></b><br />
Membuat garis horisontal<br />
<br />
<b><span style="color: red;"><html></span></b><br />
Mendefinisikan root dari suatu dokumen HTML<br />
<br />
<b><span style="color: red;"><i></span></b><br />
Membuat teks miring<br />
<br />
<b><span style="color: red;"><iframe><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Mendefinisikan sebuah inline frame<br />
<br />
<b><span style="color: red;"><img /></span></b><br />
Berfungsi untuk menampilkan gambar pada dokumen HTML<br />
<br />
<b><span style="color: red;"><input /></span></b><br />
Mendefinisikan input field pada form<br />
<br />
<b><span style="color: red;"><ins></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat teks bergaris bawah<br />
<br />
<b><span style="color: red;"><kbd></span></b><br />
Mendefinisikan teks yang di input dari keyboard<br />
<br />
<b><span style="color: red;"><label></span></b><br />
Mendefinisikan label untuk sebuah elemen <input><br />
<br />
<b><span style="color: red;"><legend></span></b><br />
Mendefinisikan sebuah caption untuk elemen <fieldset><br />
<br />
<span style="color: red;"><b><li></b></span><br />
Digunakan untuk menampilkan informasi dalam bentuk item daftar<br />
<br />
<b><span style="color: red;"><link /></span></b><br />
Mendefinisikan hubungan antara dokumen dan sumber eksternalnya<br />
<br />
<b><span style="color: red;"><listing></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag<br />
<br />
<b><span style="color: red;"><listing> </span></b><br />
tidak layak/diprotes<br />
<br />
<b><span style="color: red;"><map></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan client-side peta gambar<br />
<br />
<b><span style="color: red;"><marquee></span></b> <span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat teks berjalan secara vertikal atau horisontal<br />
<br />
<span style="color: red;"><b><menu><span class="Apple-tab-span" style="white-space: pre;"> </span></b></span><br />
Mendefinisikan sebuah daftar menu<br />
<br />
<b><span style="color: red;"><meta /></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan metadata tentang sebuah dokumen HTML<br />
<br />
<b><span style="color: red;"><nobr></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mencegah ganti baris pada teks atau gambar<br />
<br />
<b><span style="color: red;"><noframes></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Jika browser user tidak mendukung frame<br />
<br />
<b><span style="color: red;"><noscript></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Jika browser user tidak mendukung client-side scripts<br />
<br />
<b><span style="color: red;"><object></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
meletakkan embed sebuah objek<br />
<br />
<b><span style="color: red;"><ol><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Mendefinisikan daftar dalam format penomoran<br />
<br />
<b><span style="color: red;"><optgroup></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Menampilkan beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar drop-down<br />
<br />
<b><span style="color: red;"><option><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down<br />
<br />
<b><span style="color: red;"><p><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Membuat sebuah paragraf<br />
<br />
<span style="color: red;"><b><param /></b></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah parameter untuk objek<br />
<br />
<span style="color: red;"><b><pre></b></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat teks dengan ukuran huruf yang sama<br />
<br />
<b><span style="color: red;"><q></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah kutipan singkat<br />
<br />
<b><span style="color: red;"><s><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del><br />
tetapi tag <s> tidak dianjurkan sebagai gantinya menggunakan tag <del><br />
<br />
<b><span style="color: red;"><samp></span></b><br />
Mendefinisikan contoh keluaran dari program komputer<br />
<br />
<b><span style="color: red;"><script></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan client-side script<br />
<br />
<b><span style="color: red;"><select></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat daftar drop-down<br />
<br />
<b><span style="color: red;"><small><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Memperkecil ukuran teks dari ukuran defaultnya<br />
<br />
<b><span style="color: red;"><span></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah section dalam dokumen<br />
<br />
<b><span style="color: red;"><strike></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del><br />
<br />
<b><span style="color: red;"><strong></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat teks tebal, fungsi tag ini sama dengan tag <b><br />
<br />
<b><span style="color: red;"><style></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan informasi style untuk dokumen HTML<br />
<br />
<b><span style="color: red;"><sub></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Memberikan efek subscript pada teks<br />
<br />
<b><span style="color: red;"><sup></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Memberikan efek superscript pada teks<br />
<br />
<b><span style="color: red;"><table></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat tabel<br />
<br />
<b><span style="color: red;"><tbody></span></b><br />
Untuk mengelompokkan isi body di dalam sebuah tabel<br />
<br />
<b><span style="color: red;"><td><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Mendefinisikan sel di dalam sebuah tabel<br />
<br />
<b><span style="color: red;"><textarea></span></b><br />
Mendefinisikan sebuah kontrol input multiline<br />
<br />
<b><span style="color: red;"><tfoot></span></b><br />
Untuk mengelompokkan isi footer di dalam sebuah tabel<br />
<br />
<b><span style="color: red;"><th></span></b><br />
Mendefinisikan sel header di dalam sebuah tabel<br />
<br />
<b><span style="color: red;"><thead></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Untuk mengelompokkan isi header di dalam sebuah tabel<br />
<br />
<span style="color: red;"><b><title></b></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Membuat judul untuk dokumen HTML<br />
<br />
<b><span style="color: red;"><tr><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Membuat baris di dalam sebuah tabel<br />
<br />
<b><span style="color: red;"><tt><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Mendefinisikan teletype text<br />
<br />
<b><span style="color: red;"><u><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Membuat teks bergaris bawah, fungsi tag ini sama dengan tag <ins> tetapi tag <u> tidak dianjurkan untuk kategori HTML text formatting melainkan termasuk kategori HTML Style<br />
<br />
<b><span style="color: red;"><ul><span class="Apple-tab-span" style="white-space: pre;"> </span></span></b><br />
Mendefinisikan daftar dalam format bullet<br />
<br />
<b><span style="color: red;"><var></span></b><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Mendefinisikan sebuah variabel<br />
<br />
<b><span style="color: red;"><xmp></span></b><br />
Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre><br />
<br />
<span style="font-size: xx-small;">Code : <a href="http://www.arlinadzgn.com/p/kamus-html_21.html" target="_blank">http://www.arlinadzgn.com/p/kamus-html_21.html</a></span>Wayanhttp://www.blogger.com/profile/17860284870145482980noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-29826634419106653502016-03-16T14:47:00.000+08:002016-03-16T17:05:13.039+08:00Memasang Widget Formulir Kontak di halaman Statis BloggerKali ini saya kembali berbagi tutorial cara Memasang Widget Formulir Kontak di halaman Statis Blogger, widget formulir kontak ini cukup berbeda dari formulir kontak yang sudah pernah saya share pada <a href="http://berbagitipsblogger.blogspot.co.id/2016/02/buat-formulir-kontak-di-laman-statis-blogger.html" target="_blank">postingan terdahulu</a>. Fungsi dari widget formulir kontak ini cukup penting di dalam Blog itu sendiri, sebagai sarana kontak antara pengunjung dan Admin Blog agar kelihatan lebih profesional tentunya.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyXY0rBnksUqiih_WE4wWZHuHsBQc25VOU9NCEmMnzwodspRmPY9JBJL2DeJYMcbud394lAY77EJXRDfWdvVWq7d-So7_aZGHh0QOalV4zKCyrNLCZpodUsF7mNzypvYmfddG_3iNi78Fm/s1600/form+komentar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Widget Formulir Kontak di halaman Statis Blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyXY0rBnksUqiih_WE4wWZHuHsBQc25VOU9NCEmMnzwodspRmPY9JBJL2DeJYMcbud394lAY77EJXRDfWdvVWq7d-So7_aZGHh0QOalV4zKCyrNLCZpodUsF7mNzypvYmfddG_3iNi78Fm/s320/form+komentar.png" title="Memasang Widget Formulir Kontak di halaman Statis Blogger" width="302" /></a></div>
<br />
Tampilan dari Widget contact form ini cukup unik dan lumayan keren bagi saya. Jika Anda tertarik ingin memasangnya di halaman statis Blog Anda, silakan Anda ikuti tutorial yang akan saya share ini.<br />
<br />
<span style="background-color: black;"><span style="color: white;">Cara memasangnya di Blog seperti ini :</span></span><br />
<br />
1). Masuk ke Tata Letak --> Add Gadget --> Gadget --> Pilih Formulir Kontak<br />
2). Buat Laman Baru --> beri judul (misal : Hubungi Saya), Copy paste kode di bawah ini pada mode HTML jangan mode Compose lalu terbitkan pos Anda :<br />
<br />
<blockquote>
<div id="contact_wrap"><br />
<h3><br />
Hubungi Kami</h3><br />
<form name="contact-form"><br />
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;"><br />
<div id="ContactForm1_contact-form-error-message"><br />
</div><br />
<div id="ContactForm1_contact-form-success-message"><br />
</div><br />
</div><br />
</form><br />
</div><br />
<br />
<style type="text/css"><br />
/* Menyembunyikan elemen dalam postingan */<br />
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}<br />
</style></blockquote>
<br />
3. Untuk mempercantik style tampilan, dan sekaligus menyembunyikan formulir kontak Widget di sidebar, letakkan CSS di bawah ini tepat sebelum kode <span style="color: red;">]]></b:skin></span><br />
<br />
<b><span style="color: blue;">Style Light Background</span></b><br />
<br />
<blockquote>
/* CSS Contact Form Light Theme by BloggerTut.com */<br />
#ContactForm1{<br />
display:none;<br />
}<br />
#contact_wrap {<br />
margin: auto;<br />
width: 321px;<br />
height: 380px;<br />
padding: 25px;<br />
border-radius: 1em;<br />
border-top:1px solid #dbdbdb;<br />
border-right:1px solid #b2b2b2;<br />
border-left:1px solid #dbdbdb;<br />
border-bottom:1px solid #9d9d9d;<br />
background-color:#cccccc;<br />
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');<br />
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
box-shadow: 1px 1px 5px #ccc;<br />
}<br />
#contact_wrap h3{<br />
color: #e8f3f9;<br />
font-family:Georgia;<br />
font-size: 20px;<br />
font-style:italic;<br />
font-weight:bold;<br />
margin: 0 -36px 20px -36px;<br />
padding: 12px;<br />
text-align: center;<br />
text-shadow: 2px 0 0 #1f4962;<br />
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
background-color: #3689b9;<br />
position: relative;<br />
}<br />
#contact_wrap h3:before {<br />
content: ' ';<br />
position: absolute;<br />
bottom: -10px;<br />
left: 0;<br />
width: 0;<br />
height: 0;<br />
border-style: solid;<br />
border-width: 10px 0 0 10px;<br />
border-color: #333 transparent transparent transparent;<br />
}<br />
#contact_wrap h3:after {<br />
content: ' ';<br />
position: absolute;<br />
bottom: -10px;<br />
right: 0;<br />
width: 0;<br />
height: 0;<br />
border-style: solid;<br />
border-width: 0 0 10px 10px;<br />
border-color: transparent transparent transparent #333;<br />
}<br />
#ContactForm1_contact-form-name{<br />
width: 270px; <br />
height:auto;<br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXN2qNtQZuaMt4tou3SPTHCBxyOgt_mymCaNZncWar_OiqCNIFf0YVh-HbDo6g9IsYQ4d42ht4R75_DUizxjLRlKe7D7-LB6FQdvd3Pj6eXExRaTwgIWWwOfh1z5RnMvFycY90THrUz6s/s1600/user.png)no-repeat 10px center; <br />
color:#777;<br />
border:1px solid #ccc;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-email{<br />
width: 270px; <br />
height:auto;<br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Zc8Auy94iPozfyjbKrHINL_YTg9-4FAGKBNc2oSpzEOI1KJzqEYwqV6vnAmB2sWZ0RdljezV0pw3nTud1OfzIFKQPyJrpI_bOmaJuIBvgTCIvFwIWmodKIRJPltDXIs-w50PDZuIrcY/s1600/pen.png)no-repeat 10px center; <br />
color:#777;<br />
border:1px solid #ccc;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-email-message{<br />
width: 270px; <br />
height: 150px; <br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
font-family:Arial, sans-serif;<br />
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNHBMriEPHONtjofe_0JgtLwYJmXVus_QwwrpgSBS2MCW8stEvySHHq-Hch6kmnU1aAjtKnYNdd1E-TRBIqU0xtWS0WoCEDyGeTStBhEUL6tzdmNwxnjihV7ecsUamwGlKhJyGz-hCyU/s1600/msg2.png)no-repeat 10px 10px; <br />
color:#777;<br />
border:1px solid #ccc;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-submit {<br />
width: 95px; <br />
height: 30px; <br />
float: right; <br />
color: #FFF;<br />
padding: 0; <br />
cursor:pointer;<br />
margin: 25px 0 3px 0 0;<br />
background-color:#005a8a;<br />
border-radius:4px;<br />
text-shadow: 1px 0 0 #1f4962;<br />
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
background-color: #3689b9;<br />
border:1px solid #194f6d;<br />
}<br />
#ContactForm1_contact-form-submit:hover {<br />
background:#4c9bc9;<br />
}<br />
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{<br />
width: 320px;<br />
margin-top:35px;<br />
}</blockquote>
<br />
<b>Style Dark Background</b><br />
<br />
<blockquote>
/* CSS Contact Form Dark Theme by BloggerTut.com */<br />
#ContactForm1{<br />
display:none;<br />
} <br />
#contact_wrap {<br />
margin: auto;<br />
width: 321px;<br />
height: 380px;<br />
padding: 25px;<br />
border-radius: 1em;<br />
border: #600 solid 1px;<br />
border-bottom: #420000 solid 1px;<br />
background-color:#983738;<br />
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');<br />
background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);<br />
background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);<br />
background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);<br />
background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);<br />
background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);<br />
}<br />
#contact_wrap h3{<br />
color: #fff;<br />
font-family:Georgia;<br />
font-size: 20px;<br />
font-style:italic;<br />
font-weight:bold;<br />
margin: 0 -36px 20px -36px;<br />
padding: 12px;<br />
text-align: center;<br />
text-shadow: 2px 0 0 #3b5931;<br />
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;<br />
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;<br />
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;<br />
background-color: #659156;<br />
position: relative;<br />
}<br />
#contact_wrap h3:before {<br />
content: ' ';<br />
position: absolute;<br />
bottom: -10px;<br />
left: 0;<br />
width: 0;<br />
height: 0;<br />
border-style: solid;<br />
border-width: 10px 0 0 10px;<br />
border-color: #000 transparent transparent transparent;<br />
}<br />
#contact_wrap h3:after {<br />
content: ' ';<br />
position: absolute;<br />
bottom: -10px;<br />
right: 0;<br />
width: 0;<br />
height: 0;<br />
border-style: solid;<br />
border-width: 0 0 10px 10px;<br />
border-color: transparent transparent transparent #000;<br />
}<br />
#ContactForm1_contact-form-name{<br />
width: 270px; <br />
height:auto;<br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXN2qNtQZuaMt4tou3SPTHCBxyOgt_mymCaNZncWar_OiqCNIFf0YVh-HbDo6g9IsYQ4d42ht4R75_DUizxjLRlKe7D7-LB6FQdvd3Pj6eXExRaTwgIWWwOfh1z5RnMvFycY90THrUz6s/s1600/user.png)no-repeat 10px center; <br />
color:#d2d2d2;<br />
border:1px solid #ce6d6e;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-email{<br />
width: 270px; <br />
height:auto;<br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Zc8Auy94iPozfyjbKrHINL_YTg9-4FAGKBNc2oSpzEOI1KJzqEYwqV6vnAmB2sWZ0RdljezV0pw3nTud1OfzIFKQPyJrpI_bOmaJuIBvgTCIvFwIWmodKIRJPltDXIs-w50PDZuIrcY/s1600/pen.png)no-repeat 10px center; <br />
color:#d2d2d2;<br />
border:1px solid #ce6d6e;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-email-message{<br />
width: 270px; <br />
height: 150px; <br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
font-family:Arial, sans-serif;<br />
background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCfDUrHWxqPswz8hQiLQgm6Hm2vFMt1a2xEah8knDYvUkbmkyvpQnUKuegWZ5X0lkCB9zZHc0R3Fu8H8tOTBHdoSRzYdF9tWdm2XJjZHvWkcZ9LjTzQaKdsVp9qHVROA-TsE9lli3ijGc/s1600/msg.png)no-repeat 10px 10px; <br />
color:#d2d2d2;<br />
border:1px solid #ce6d6e;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-submit {<br />
width: 95px; <br />
height: 30px; <br />
float: right; <br />
color: #FFF;<br />
padding: 0; <br />
cursor:pointer;<br />
margin: 25px 0 3px 0 0;<br />
background-color:#005a8a;<br />
border-radius:4px;<br />
text-shadow: 1px 0 0 #1f4962;<br />
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
background-color: #659156;<br />
border:1px solid #333;<br />
}<br />
#ContactForm1_contact-form-submit:hover {<br />
background:#5d894d;<br />
}<br />
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{<br />
width: 320px;<br />
margin-top:35px;<br />
}</blockquote>
<br />
<br />
Contohnya bisa dilihat disini : <a href="http://berbagitipsblogger.blogspot.com/p/hubungi-saya.html">http://berbagitipsblogger.blogspot.com/p/hubungi-saya.html</a><br />
Sekian dan terima kasih.<br />
<br />
<i><span style="font-size: xx-small;">Code : http://bloggertuts02.blogspot.co.id/2013/05/widget-contact-form-blogger-keren-pada-halaman-statis.html</span></i><br />
<i><span style="font-size: xx-small;"><br /></span></i>Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com1tag:blogger.com,1999:blog-2053743687906782870.post-42908762834554481422016-03-15T20:41:00.000+08:002016-03-15T21:01:05.938+08:00Membuat Style Blockquote Lebih dari Satu di Posting BloggerSatu tampilan Blockquote sudah biasa dalam sebuah posting, bagaimana jika Anda ingin menampilkan dua, tiga, empat, dan banyak tampilan style Blockquote yang berbeda-beda di postingan yang Anda tulis. Mungkin Anda ingin menunjukkan yang berbeda di Blog Anda, menunjukkan kepada pengunjung hal-hal yang penting dengan tampilan yang unik dan tidak biasa. Anda bisa manfaatkan berbagai style Blockquote yang berbeda-beda juga.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVrWxyuUvyPd1RWQR1RgiImIOH_ulBGT6KRSLGhYH4I8Ok6CXc22RlUVWMCLIJu8Q0kWij6fUKLPVYuMl-Q6AuA-1mctj0tmFZcK-ZVqpLgxrz3S_lVZMUU_xX2NNRTP3pn25k7h75XXT/s1600/blockquote.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Style Blockquote Lebih dari Satu di Posting Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVrWxyuUvyPd1RWQR1RgiImIOH_ulBGT6KRSLGhYH4I8Ok6CXc22RlUVWMCLIJu8Q0kWij6fUKLPVYuMl-Q6AuA-1mctj0tmFZcK-ZVqpLgxrz3S_lVZMUU_xX2NNRTP3pn25k7h75XXT/s1600/blockquote.jpg" title="Membuat Style Blockquote Lebih dari Satu di Posting Blogger" /></a></div>
<br />
Contoh #1<br />
<blockquote class="bq1">
Contoh Membuat Style Blockquote Lebih dari Satu di Posting Blogger<br />
Ini contoh Membuat Style Blockquote Lebih dari Satu di Posting Blogger</blockquote>
<br />
Contoh #2<br />
<blockquote class="bq2">
Contoh Membuat Style Blockquote Lebih dari Satu di Posting Blogger<br />
Ini contoh Membuat Style Blockquote Lebih dari Satu di Posting Blogger</blockquote>
<br />
Contoh #3<br />
<blockquote class="bq3">
Contoh Membuat Style Blockquote Lebih dari Satu di Posting Blogger<br />
Ini contoh Membuat Style Blockquote Lebih dari Satu di Posting Blogger</blockquote>
<br />
Contoh #4<br />
<blockquote class="bq4">
Contoh Membuat Style Blockquote Lebih dari Satu di Posting Blogger<br />
Ini contoh Membuat Style Blockquote Lebih dari Satu di Posting Blogger</blockquote>
<br />
<span style="background-color: black;"><span style="color: white;">Untuk menampilkan style Blockquote Berbeda-beda Dalam satu postingan Anda bisa mengikuti cara di bawah ini :</span></span><br />
<br />
1. Masuk ke Template --> Edit HTML<br />
2. Backup dulu template Anda.<br />
3. Cari kode ]]></b:skin>, lalu Salin kode dibawah ini dan tempelkan diatasnya.<br />
<br />
<blockquote>
blockquote.bq1{<br />
background:green;<br />
color:red;<br />
-moz-border-radius:10px;<br />
-webkit-border-radius:10px;<br />
padding:10px;<br />
font-family:monospace;<br />
font-size:12px;<br />
}<br />
blockquote.bq2{<br />
background:black;<br />
color:yellow;<br />
-moz-border-radius:5px;<br />
-webkit-border-radius:5px;<br />
padding:12px 24px;<br />
-moz-column-count:2;<br />
-moz-column-rule:1px solid white;<br />
-moz-column-gap:10px;<br />
font-family:Arial, Tahoma, Verdana;<br />
font-size:12px;<br />
}<br />
blockquote.bq3{<br />
background:green;<br />
color:aqua;<br />
padding:20px;<br />
text-align:center;<br />
font-family:Georgia, Serif;<br />
font-size:24px;<br />
}<br />
blockquote.bq4{<br />
background: -moz-linear-gradient(-90deg,green,blue);<br />
-webkit-gradient(linear, left top, left bottom, from(green), to(blue));<br />
color:white;<br />
-moz-box-shadow:#555 5px 5px 6px;<br />
-webkit-box-shadow:#555 5px 5px 6px;<br />
border:5px solid #CCCCCC;<br />
font-family:Verdana;<br />
font size:12px;<br />
padding:10px 20px 30px 40px;<br />
}</blockquote>
<br />
<br />
<span style="background-color: black;"><span style="color: white;">Note :</span></span><br />
Anda dapat menambahkan blockquote.bq5, blockquote.bq6, dst. Sebanyak yang Anda ingin tambahkan. <br />
<br />
4. Lalu klik Simpan Template.<br />
<br />
Untuk penerapannya, pada setiap posting yang Anda buat, dalam mode Edit HTML, ketikkan kode berikut:<br />
<br />
<blockquote>
<blockquote class="NAMACLASS"><br />
... isi blockquote ...<br />
</blockquote></blockquote>
<br />
<br />
<span style="background-color: black;"><span style="color: white;">Note :</span></span><br />
"NAMACLASS" : Ganti dengan bq1, bq2, bq3, atau lainnya sesuai keinginan anda.<br />
<br />Wayanhttp://www.blogger.com/profile/17860284870145482980noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-17385607494460687962016-03-13T14:20:00.001+08:002016-03-13T21:42:30.820+08:00Memasang Tanggal Hari Ini (Current Date) di Blog<div align="justify"><span class="unik">A</span></div>nda berminat memasang Tanggal {Current Date) di sidebar Blog, seperti yang ada di Blog ini?. Kali ini Saya akan membagikan tutorialnya kepada Anda. Silakan ikuti semua langkah-langkah di bawah ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTkJ5OpjTj9TViQMEF9MD1-tXJsq70Q9ZkuSzachHxQtvHNVP9MCBqN_7ZQo-vcUTL3SxC44m1P0O4rc3vUl-2B9Pjv44s2P1vZHTlqf3cJ_KpNYLmkg8i2WcETur3rj1pElWmcrtz-yfE/s1600/DATE.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Tanggal Hari Ini (Current Date) di Blog" border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTkJ5OpjTj9TViQMEF9MD1-tXJsq70Q9ZkuSzachHxQtvHNVP9MCBqN_7ZQo-vcUTL3SxC44m1P0O4rc3vUl-2B9Pjv44s2P1vZHTlqf3cJ_KpNYLmkg8i2WcETur3rj1pElWmcrtz-yfE/s320/DATE.JPG" title="Memasang Tanggal Hari Ini (Current Date) di Blog" width="320" /></a></div><br />
<center><script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array ("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu")
var montharray=new Array("Januari","Februari","Maret","April","Mei", "Juni","Juli", "Agustus","September","Oktober","November","Desember")
document.write("<p>"+dayarray[day]+", "+daym+" "+montharray[month]+" "+year+"</p>")
</script></center><br />
1). Login ke Blogger --> Tata Letak --> Add Gadget --> Gadget --> HTML/JavaSript<br />
2). Salin script di bawah ini dan tempelkan di bilah Gadget yang muncul.<br />
<br />
<blockquote class="bq2"><script><br />
var mydate=new Date()<br />
var year=mydate.getYear()<br />
if (year < 1000)<br />
year+=1900<br />
var day=mydate.getDay()<br />
var month=mydate.getMonth()<br />
var daym=mydate.getDate()<br />
if (daym<10)<br />
daym="0"+daym<br />
var dayarray=new Array ("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu")<br />
var montharray=new Array("Januari","Februari","Maret","April","Mei", "Juni","Juli", "Agustus","September","Oktober","November","Desember")<br />
document.write("<p>"+dayarray[day]+", "+daym+" "+montharray[month]+" "+year+"</p>")<br />
</script></blockquote><br />
3). Simpan Gadget Anda.<br />
<br />
<span style="background-color: black;"><span style="color: white;">Note:</span></span><br />
Kata Minggu, Senin..dst, dan Januari, Februari..dst, bisa anda ganti dengan bahasa Inggris jadi Sunday, Monday..dst dan January, February..dst.<br />
<br />
Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com1tag:blogger.com,1999:blog-2053743687906782870.post-79428411303091918512016-03-13T10:43:00.000+08:002016-03-15T10:39:13.307+08:00Membuat Tabel Flate UI Color di Blogger<div align="justify"><span class="unik">K</span></div>ali ini Blog BTB kembali membagikan sebuah Blogging tool kepada Anda, yakni Tabel Flate UI Color. Tabel yang menampilkan kode-kode warna standar dalam pembuatan template Blog. Sangat cocok untuk Anda yang berjiwa modifikator template alias suka utak atik tampilan template Blog. Tampilan Tabel Flate UI Color juga sangat sederhana, terdiri dari 36 balok kode warna standard yang umum digunakan dalam pembuatan blog/website.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifcRCNZlAeHJ9IU-HbyBliOytG9grenv6mdcy_S9QTVO_67zL-p5iBzuZ7VgX4z_8lgHQEF4CO4XrQy1YdDnCnThiEyn6cax4gX0Am9jFFQJOzObhLhA49f81mEWJZ2b1nlbj_vxl1Md-p/s1600/flate+ui.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tabel Flate UI Color di Blogger" border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifcRCNZlAeHJ9IU-HbyBliOytG9grenv6mdcy_S9QTVO_67zL-p5iBzuZ7VgX4z_8lgHQEF4CO4XrQy1YdDnCnThiEyn6cax4gX0Am9jFFQJOzObhLhA49f81mEWJZ2b1nlbj_vxl1Md-p/s320/flate+ui.JPG" title="Membuat Tabel Flate UI Color di Blogger" width="320" /></a></div><br />
Tertarik ingin memasang di Blog Anda? Ikuti petunjuk di bawah ini :<br />
<br />
1. Buat Laman atau post baru beri judul misal 'Tabel Flate UI Color', dalam mode HTML masukkan kode-kode di bawah ini :<br />
<br />
<blockquote class="bq2"><p><center class="button_me" id="button_me"><a class="button button_turquoise" onClick="colorToTurquoise()">Turquoise</a><a class="button button_green_sea" onClick="colorToGreenSea()">GreenSea</a><a class="button button_emerald" onClick="colorToEmerald()">Emerald</a><a class="button button_nephritis" onClick="colorToNephritis()">Nephritis</a><a class="button button_peter_river" onClick="colorToPeterRiver()">PRiver</a><a class="button button_belize_hole" onClick="colorToBelizeHole()">BelizeH</a><a class="button button_amethyst" onClick="colorToAmethyst()">Amethyst</a><a class="button button_wisteria" onClick="colorToWisteria()">Wisteria</a><a class="button button_wet_asphalt" onClick="colorToWetAsphalt()">WetA</a><a class="button button_midnight_blue" onClick="colorToMidnightBlue()">Midnight</a><a class="button button_sunflower" onClick="colorToSunflower()">Sunflower</a><a class="button button_orange" onClick="colorToOrange()">Orange</a><a class="button button_carrot" onClick="colorToCarrot()">Carrot</a><a class="button button_white_smoke" onClick="colorToWhiteSmoke()">WhiteSmoke</a><a class="button button_pumpkin" onClick="colorToPumpkin()">Pumpkin</a><a class="button button_alizarin" onClick="colorToAlizarin()">Alizarin</a><a class="button button_pomegranate" onClick="colorToPomegranate()">Pgranate</a><a class="button button_clouds" onClick="colorToClouds()">Clouds</a><a class="button button_silver" onClick="colorToSilver()">Silver</a><a class="button button_concrete" onClick="colorToConcrete()">Concrete</a><a class="button button_asbestos" onClick="colorToAsbestos()">Asbestos</a><a class="button button_chestnut_rose" onClick="colorToChestnutRose()">ChestnutR</a><a class="button button_alice_blue" onClick="colorToAliceBlue()">AliceBlue</a><a class="button button_spray" onClick="colorToSpray()">Spray</a><a class="button button_gossip" onClick="colorToGossip()">Gossip</a><a class="button button_cream_can" onClick="colorToCreamCan()">CreamCan</a><a class="button button_silver_tree" onClick="colorToSilverTree()">SilverTree</a><a class="button button_cape_honey" onClick="colorToCapeHoney()">CapeHoney</a><a class="button button_medium_turquoise" onClick="colorToMediumTurquoise()">MTurquoise</a><a class="button button_lynch" onClick="colorToLynch()">Lynch</a><a class="button button_crusta" onClick="colorToCrusta()">Crusta</a><a class="button button_jungle_green" onClick="colorToJungleGreen()">JungleG</a><a class="button button_hoki" onClick="colorToHoki()">Hoki</a><a class="button button_wax_flower" onClick="colorToWaxFlower()">WaxFlower</a><a class="button button_observatory" onClick="colorToObservatory()">Observat</a><a class="button button_ecstacy" onClick="colorToEcstasy()">Ecstacy</a></center><center><div class="wrap-header">FLAT UI COLOR</div><div class="kode-warna" id="kode-warna"><div class="colorName" id="colorName">Silakan klik tombol warna diatas,</div><div class="colorText" id="colorText">Kemudian salin kode warna yang sudah Anda pilih.</div><section><p></p></section></div></center><style scoped="" type="text/css"><br />
#sidebar-wrapper{display:none}#main-wrapper{float:none;width:100%;margin-right:0}.wrap-header{text-align:center;font-size:20px;background:#444;color:#fafafa;padding:10px;font-weight:700}.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center;margin-bottom:20px}#button_me a:hover{color:#fff}.button{margin:0!important;text-transform:none;cursor:pointer;font-size:12px;line-height:3.4em;flex:100 100 8%;-webkit-flex:100 100 8%;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial}.button_turquoise{border:5px solid #1abc9c;background:#1abc9c;color:#fff;padding:1px}.button_green_sea{border:5px solid #16a085;background:#16a085;color:#fff;padding:1px}.button_emerald{border:5px solid #2ecc71;background:#2ecc71;color:#fff;padding:1px}.button_nephritis{border:5px solid #27ae60;background:#27ae60;color:#fff;padding:1px}.button_peter_river{border:5px solid #3498db;background:#3498db;color:#fff;padding:1px}.button_belize_hole{border:5px solid #2980b9;background:#2980b9;color:#fff;padding:1px}.button_amethyst{border:5px solid #9b59b6;background:#9b59b6;color:#fff;padding:1px}.button_wisteria{border:5px solid #8e44ad;background:#8e44ad;color:#fff;padding:1px}.button_wet_asphalt{border:5px solid #34495e;background:#34495e;color:#fff;padding:1px}.button_midnight_blue{border:5px solid #2c3e50;background:#2c3e50;color:#fff;padding:1px}.button_sunflower{border:5px solid #f1c40f;background:#f1c40f;color:#fff;padding:1px}.button_orange{border:5px solid #f39c12;background:#f39c12;color:#fff;padding:1px}.button_carrot{border:5px solid #e67e22;background:#e67e22;color:#fff;padding:1px}.button_pumpkin{border:5px solid #d35400;background:#d35400;color:#fff;padding:1px}.button_alizarin{border:5px solid #e74c3c;background:#e74c3c;color:#fff;padding:1px}.button_pomegranate{border:5px solid #c0392b;background:#c0392b;color:#fff;padding:1px}.button_clouds{border:5px solid #ecf0f1;background:#ecf0f1;color:#808080;padding:1px}.button_silver{border:5px solid #bdc3c7;background:#bdc3c7;color:#fff;padding:1px}.button_concrete{border:5px solid #95a5a6;background:#95a5a6;color:#fff;padding:1px}.button_asbestos{border:5px solid #7f8c8d;background:#7f8c8d;color:#fff;padding:1px}.button_chestnut_rose{border:5px solid #D24D57;background:#D24D57;color:#fff;padding:1px}.button_alice_blue{border:5px solid #E4F1FE;background:#E4F1FE;color:#999;padding:1px}.button_spray{border:5px solid #81CFE0;background:#81CFE0;color:#fff;padding:1px}.button_gossip{border:5px solid #87D37C;background:#87D37C;color:#fff;padding:1px}.button_cream_can{border:5px solid #F5D76E;background:#F5D76E;color:#fff;padding:1px}.button_silver_tree{border:5px solid #68C3A3;background:#68C3A3;color:#fff;padding:1px}.button_cape_honey{border:5px solid #FDE3A7;background:#FDE3A7;color:#999;padding:1px}.button_medium_turquoise{border:5px solid #4ECDC4;background:#4ECDC4;color:#fff;padding:1px}.button_white_smoke{border:5px solid #ECECEC;background:#ECECEC;color:#999;padding:1px}.button_lynch{border:5px solid #6C7A89;background:#6C7A89;color:#fff;padding:1px}.button_crusta{border:5px solid #F2784B;background:#F2784B;color:#fff;padding:1px}.button_jungle_green{border:5px solid #26C281;background:#26C281;color:#fff;padding:1px}.button_hoki{border:5px solid #67809F;background:#67809F;color:#fff;padding:1px}.button_wax_flower{border:5px solid #F1A9A0;background:#F1A9A0;color:#fff;padding:1px}.button_observatory{border:5px solid #049372;background:#049372;color:#fff;padding:1px}.button_ecstacy{border:5px solid #F9690E;background:#F9690E;color:#fff;padding:1px}.kode-warna{line-height:normal;border:1px solid #38424b;padding-top:30px;font-size:28px;color:#999;width:100%;background:#ececec}section{background:#transparent;margin:30px;width:80%;color:#000;border-top-right-radius:5px;border-top-left-radius:5px;padding-left:20px;padding-right:20px;padding-top:1px;padding-bottom:1px;text-align:left}@media (max-width:800px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:4px}.kode-warna{width:100%}}@media (max-width:320px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:3px}.kode-warna{width:100%}}@media (max-width:360px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center}.button{font-size:3px}}<br />
</style><br /><br />
<script type="text/javascript"><br />
function colorToTurquoise(){document.getElementById("kode-warna").style.backgroundColor="#1abc9c";var e=document.getElementById("colorName");e.innerHTML="Turquoise",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#1abc9c"}function colorToGreenSea(){document.getElementById("kode-warna").style.backgroundColor="#16a085";var e=document.getElementById("colorName");e.innerHTML="Green Sea",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#16a085"}function colorToEmerald(){document.getElementById("kode-warna").style.backgroundColor="#2ecc71";var e=document.getElementById("colorName");e.innerHTML="Emerald",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2ecc71"}function colorToNephritis(){document.getElementById("kode-warna").style.backgroundColor="#27ae60";var e=document.getElementById("colorName");e.innerHTML="Nephritis",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#27ae60"}function colorToPeterRiver(){document.getElementById("kode-warna").style.backgroundColor="#3498db";var e=document.getElementById("colorName");e.innerHTML="Peter River",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#3498db"}function colorToBelizeHole(){document.getElementById("kode-warna").style.backgroundColor="#2980b9";var e=document.getElementById("colorName");e.innerHTML="Belize Hole",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2980b9"}function colorToAmethyst(){document.getElementById("kode-warna").style.backgroundColor="#9b59b6";var e=document.getElementById("colorName");e.innerHTML="Amethyst",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#9b59b6"}function colorToWisteria(){document.getElementById("kode-warna").style.backgroundColor="#8e44ad";var e=document.getElementById("colorName");e.innerHTML="Wisteria",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#8e44ad"}function colorToWetAsphalt(){document.getElementById("kode-warna").style.backgroundColor="#34495e";var e=document.getElementById("colorName");e.innerHTML="Wet Asphalt",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#34495e"}function colorToMidnightBlue(){document.getElementById("kode-warna").style.backgroundColor="#2c3e50";var e=document.getElementById("colorName");e.innerHTML="Midnight Blue",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#2c3e50"}function colorToSunflower(){document.getElementById("kode-warna").style.backgroundColor="#f1c40f";var e=document.getElementById("colorName");e.innerHTML="Sunflower",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#f1c40f"}function colorToOrange(){document.getElementById("kode-warna").style.backgroundColor="#f39c12";var e=document.getElementById("colorName");e.innerHTML="Orange",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#f39c12"}function colorToCarrot(){document.getElementById("kode-warna").style.backgroundColor="#e67e22";var e=document.getElementById("colorName");e.innerHTML="Carrot",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#e67e22"}function colorToPumpkin(){document.getElementById("kode-warna").style.backgroundColor="#d35400";var e=document.getElementById("colorName");e.innerHTML="Pumpkin",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#d35400"}function colorToAlizarin(){document.getElementById("kode-warna").style.backgroundColor="#e74c3c";var e=document.getElementById("colorName");e.innerHTML="Alizarin",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#e74c3c"}function colorToPomegranate(){document.getElementById("kode-warna").style.backgroundColor="#c0392b";var e=document.getElementById("colorName");e.innerHTML="Pomegranate",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#c0392b"}function colorToClouds(){document.getElementById("kode-warna").style.backgroundColor="#ecf0f1";var e=document.getElementById("colorName");e.innerHTML="Clouds",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#ecf0f1"}function colorToSilver(){document.getElementById("kode-warna").style.backgroundColor="#bdc3c7";var e=document.getElementById("colorName");e.innerHTML="Silver",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#bdc3c7"}function colorToConcrete(){document.getElementById("kode-warna").style.backgroundColor="#95a5a6";var e=document.getElementById("colorName");e.innerHTML="Concrete",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#95a5a6"}function colorToAsbestos(){document.getElementById("kode-warna").style.backgroundColor="#7f8c8d";var e=document.getElementById("colorName");e.innerHTML="Asbestos",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#7f8c8d"}function colorToChestnutRose(){document.getElementById("kode-warna").style.backgroundColor="#D24D57";var e=document.getElementById("colorName");e.innerHTML="Chestnut Rose",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#D24D57"}function colorToAliceBlue(){document.getElementById("kode-warna").style.backgroundColor="#E4F1FE";var e=document.getElementById("colorName");e.innerHTML="Alice Blue",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#E4F1FE"}function colorToSpray(){document.getElementById("kode-warna").style.backgroundColor="#81CFE0";var e=document.getElementById("colorName");e.innerHTML="Spray",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#81CFE0"}function colorToGossip(){document.getElementById("kode-warna").style.backgroundColor="#87D37C";var e=document.getElementById("colorName");e.innerHTML="Gossip",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#87D37C"}function colorToCreamCan(){document.getElementById("kode-warna").style.backgroundColor="#F5D76E";var e=document.getElementById("colorName");e.innerHTML="CreamCan",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F5D76E"}function colorToSilverTree(){document.getElementById("kode-warna").style.backgroundColor="#68C3A3";var e=document.getElementById("colorName");e.innerHTML="SilverTree",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#68C3A3"}function colorToCapeHoney(){document.getElementById("kode-warna").style.backgroundColor="#FDE3A7";var e=document.getElementById("colorName");e.innerHTML="CapeHoney",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#FDE3A7"}function colorToMediumTurquoise(){document.getElementById("kode-warna").style.backgroundColor="#4ECDC4";var e=document.getElementById("colorName");e.innerHTML="Medium Turquoise",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#4ECDC4"}function colorToWhiteSmoke(){document.getElementById("kode-warna").style.backgroundColor="#ECECEC";var e=document.getElementById("colorName");e.innerHTML="White Smoke",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#ECECEC"}function colorToLynch(){document.getElementById("kode-warna").style.backgroundColor="#6C7A89";var e=document.getElementById("colorName");e.innerHTML="Lynch",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#6C7A89"}function colorToCrusta(){document.getElementById("kode-warna").style.backgroundColor="#F2784B";var e=document.getElementById("colorName");e.innerHTML="Crusta",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F2784B"}function colorToJungleGreen(){document.getElementById("kode-warna").style.backgroundColor="#26C281";var e=document.getElementById("colorName");e.innerHTML="JungleGreen",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#26C281"}function colorToHoki(){document.getElementById("kode-warna").style.backgroundColor="#67809F";var e=document.getElementById("colorName");e.innerHTML="Hoki",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#67809F"}function colorToWaxFlower(){document.getElementById("kode-warna").style.backgroundColor="#F1A9A0";var e=document.getElementById("colorName");e.innerHTML="WaxFlower",e.style.color="gray";var o=document.getElementById("colorText");o.style.color="gray",o.innerHTML="#F1A9A0"}function colorToObservatory(){document.getElementById("kode-warna").style.backgroundColor="#049372";var e=document.getElementById("colorName");e.innerHTML="Observatory",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#049372"}function colorToEcstasy(){document.getElementById("kode-warna").style.backgroundColor="#F9690E";var e=document.getElementById("colorName");e.innerHTML="Ecstasy",e.style.color="white";var o=document.getElementById("colorText");o.style.color="white",o.innerHTML="#F9690E"}<br />
</script></p><br />
<div style='clear: both;'></div><br />
</blockquote><br />
2. Terbitkan postingan Anda. Selesai.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-88944322749482211032016-03-13T09:47:00.000+08:002016-03-13T19:34:20.807+08:00Membuat scroll pada Arsip Blog<div align="justify"><span class="unik">B</span></div>ingung dengan postingan Anda sudah sangat banyak, sehingga tampilan Blog Archive pun jadi sangat panjang ketika disetel ke mode Hirarki. Hal ini bisa Anda akali dengan membuat scroll pada widget Blog Archive. Anda bisa ikuti tutorial sederhana di bawah ini:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQZOnnBA6T3GA47oE3leuTcCAUaD0IFJN_Ij6WNeyEuoIV2mYw6hjQNvJDHqfOf_nTTqM6QnqrKVr7wSolw7FjpMnCvTJyz_wdHgpu1mMW6ULctbhsz5EQ7qr9RCGsWdJuE4JxbQI2AUq/s1600/scroll.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat scroll pada Arsip Blog" border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQZOnnBA6T3GA47oE3leuTcCAUaD0IFJN_Ij6WNeyEuoIV2mYw6hjQNvJDHqfOf_nTTqM6QnqrKVr7wSolw7FjpMnCvTJyz_wdHgpu1mMW6ULctbhsz5EQ7qr9RCGsWdJuE4JxbQI2AUq/s320/scroll.JPG" title="Membuat scroll pada Arsip Blog" width="320" /></a></div><br />
1. Sign in ke blogger<br />
2. Ke Template —> Edit Html<br />
3. Klik pada Tab "<span style="background-color: #ffe599;">Lompat ke widget</span>" dan lihat ID dari widget Blog Archive yang akan dipasangi scroll<br />
4. Saya anggap ID widget Blog Archive sama dengan Blog ini yaitu : <span style="background-color: #ffe599;">"BlogArchive1" </span><br />
<span style="background-color: #ffe599;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5NTYYYk1CfOd-PjwfckJoT5ducDyk0gwMQBvFSGh49ztncSFziSzT5xzg7j8S0O0zMC1Aw6u3Jjj0dDInlFVLIeaxZorO9wf15x5K7ogL9QvuuCJ0g2O7H-GQTUXfi45fkm4jBx38Wr2/s1600/ARSIP.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat scroll pada Arsip Blog" border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn5NTYYYk1CfOd-PjwfckJoT5ducDyk0gwMQBvFSGh49ztncSFziSzT5xzg7j8S0O0zMC1Aw6u3Jjj0dDInlFVLIeaxZorO9wf15x5K7ogL9QvuuCJ0g2O7H-GQTUXfi45fkm4jBx38Wr2/s320/ARSIP.jpg" title="Membuat scroll pada Arsip Blog" width="320" /></a></div><span style="background-color: #ffe599;"><br />
</span> <span style="background-color: black;"><span style="color: white;">Kode lengkap tampilan di template seperti dibawah ini :</span></span><br />
<br />
id=<span style="background-color: #ffe599;">"BlogArchive1"</span> locked="false" title="Arsip Blog" type="BlogArchive"><br />
<br />
5. Setelah tahu ID Blog Archive di template Anda, sekarang kita buatkan kode pemanggil scroll-nya, yaitu :<br />
<br />
<blockquote class="bq2">#BlogArchive1 .widget-content{<br />
height:200px;<br />
width:auto;<br />
overflow:auto;<br />
}</blockquote><br />
<span style="background-color: black;"><span style="color: white;">Note :</span></span><br />
height:200px; bisa Anda rubah sesuai ukuran ketinggian bidang scroll yang Anda suka.<br />
<br />
6. Letakkan kode pemanggil scroll di atas tepat sebelum kode <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
7. Kemudian simpan Templete.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com1tag:blogger.com,1999:blog-2053743687906782870.post-1988594661113343432016-03-12T22:09:00.000+08:002016-03-13T14:56:21.308+08:00Membuat Footer 3 Kolom di Blogger<p align="justify"><span class="unik" >H</span></p>ari ini anda bisa melihat perubahan pada footer Blog ini, yakni tersedianya ruang baru widget tiga colom. Saya modifikasi template ini karena malas untuk mengganti dengan yang baru, dengan alasan ribet harus membangun dari awal lagi. Yah mendingan tempate ini saya modifikasi dengan menambahkan sedikit script untuk colom footer. Dan hasilnya lumayan rapi untuk sebuah footer tambahan.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeVEXJh7bVUFz8s1FLTNtUBZHYufR3EZNo3hhtbzcGWf5VGGiFfALmueF023VZCGyUxsWH4HOTnlEw-_-wmrtAnYT-aSka72jPkJJwP_HAEhRqMg-U8MEz-7hvokxz1zHGmFDtLQqDl1A/s1600/footer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Footer 3 Kolom di Blogger" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeVEXJh7bVUFz8s1FLTNtUBZHYufR3EZNo3hhtbzcGWf5VGGiFfALmueF023VZCGyUxsWH4HOTnlEw-_-wmrtAnYT-aSka72jPkJJwP_HAEhRqMg-U8MEz-7hvokxz1zHGmFDtLQqDl1A/s400/footer.png" title="Membuat Footer 3 Kolom di Blogger" width="400" /></a></div><br />
<span style="background-color: black;"><span style="color: white;">Jika template Blog Anda juga minus footer colom dan berminat memasang=nya juga di Blog Anda, silakan ikuti langkah-langkah di bawah ini :</span></span><br />
<br />
1). Masuk ke Template >> Edit HTML<br />
2). Copy kode di bawah ini dan tempelkan sebelum Kode <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
<blockquote>#footer-column-container {<br />
clear:both;<br />
}<br />
.footer-column {<br />
padding: 10px;<br />
}</blockquote><br />
3). Selanjutnya Copy kode di bawah ini dan tempelkan setelah Kode <span style="background-color: #ffe599;"><div id='footer'></span> atau <span style="background-color: #ffe599;">id='footer'</span> atau <span style="background-color: #ffe599;">sebelum 'Kredit Link'</span><br />
<br />
<blockquote><div id='footer-column-container'><br />
<div id='footer2' style='width: 30%; float: left;<br />
margin:0; text-align: left;'><br />
<b:section class='footer-column' id='col1'<br />
preferred='yes' style='float:left;'/><br />
</div><br />
<div id='footer3' style='width: 40%; float: left;<br />
margin:0; text-align: left;'><br />
<b:section class='footer-column' id='col2'<br />
preferred='yes' style='float:left;'/><br />
</div><br />
<div id='footer4' style='width: 30%; float: right;<br />
margin:0; text-align: left;'><br />
<b:section class='footer-column' id='col3'<br />
preferred='yes' style='float:right;'/><br />
</div><br />
<div style='clear:both;'/><br />
<p><br />
<hr align='center' color='#ffae00' width='90%'/></p><br />
<div id='footer-bottom' style='text-align: center; padding:<br />
10px; text-transform: lowercase;'><br />
<b:section class='footer' id='col-bottom' preferred='yes'><br />
<b:widget id='Text2' locked='false' title='' type='Text'/><br />
</b:section><br />
</div><br />
<div style='clear:both;'/><br />
</div></blockquote><br />
4). Simpan template Anda.<br />
5). Masuk ke Tata Letak dan lihat widget colom footer sudah siap ditambahkan Gadget baru.<br />
<br />
<span style="background-color: black;"><span style="color: white;">Note :</span></span><br />
Kadang pertama kali, Anda harus me-refresh halaman Tata Letak Blog<br />
.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-36285174052783762052016-03-12T13:00:00.001+08:002016-03-13T14:59:29.731+08:00Memasang Tool HTML Hex Color Code di Blogger<p align="justify"><span class="unik" >P</span></p>ada postingan terdahulu saya sudah membagikan cara memasang Tabel Kode warna HTML di Blog, namun Tabel kode warna itu masih ada satu kekuranganyakni kita tidak bisa meminta kebalikannya, maksudnya jika kita ada Hex Kode-nya dan kita perlu tahu warna dari kode hex itu, tabel kode warna terdahulu itu belum bisa menyelesaikannya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgboqvaTVXJFTAzOEZf22M94NpZkRYIpVj4mo1yXT_rmWz6Gd6C26zbsOwL91lHN09exJfcXx5GR578DXybG_d1RrkVNHdDV0q9RyZicguMU7ynrBFjz9mKrZ_aIEGZd142qiGau-zUULwi/s1600/color+hex.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Tool HTML Hex Color Code di Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgboqvaTVXJFTAzOEZf22M94NpZkRYIpVj4mo1yXT_rmWz6Gd6C26zbsOwL91lHN09exJfcXx5GR578DXybG_d1RrkVNHdDV0q9RyZicguMU7ynrBFjz9mKrZ_aIEGZd142qiGau-zUULwi/s400/color+hex.png" title="Memasang Tool HTML Hex Color Code di Blogger" /></a></div>Dalam postingan kali ini, tabel Hex kode warna dibuat dari kombinasi HTML dan Flash Player dari Macromedia. Hasilnya Widget ini begitu akurat bisa menampilkan kode warna yang kita mau. Kita bisa memasukkan Hex kode warna yang kita punya pada form yang sudah disediakan dan klik get! maka warna-nya pun akan muncul.<br />
Tool ini sangat cocok bagi Anda yang senang edit template, edit widget dan sebagainya yang berhubungan dengan warna HTML.<br />
<br />
<span style="background-color: black; color: white;">Ada dua model Tool HTML Hex Color Code yang akan saya share kali ini, mempunyai tampilan yang beda namun fungsinya sama-sama bagus.</span><br />
<br />
1. Login ke Blogger >> Buat pos/Laman Baru >> Menulis Pos harus dalam Mode HTML<br />
2. Salin Kode di bawah ini dan pastekan ke halaman posting Blog.<br />
<br />
<span style="background-color: black; color: white;">Tool HTML Hex Color Code Model #1</span><br />
<br />
<center><object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie"><param value="High" name="quality"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="485" height="485"></embed> </object> </center>
<span style="background-color: black; color: white;">Ini kode-nya : </span>
<blockquote><center> <object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie"><param value="High" name="quality"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="485" height="485"></embed> </object> </center> </blockquote><span style="background-color: black; color: white;">Tool HTML Hex Color Code Model #2 </span>
<center><div style="text-align: center;"><object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess" /><param value="http://www.2createawebsite.com/build/col.swf" name="movie" /><param value="high" name="quality" /><param value="#ffffff" name="bgcolor" /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"></embed> </object></div></center>
<span style="background-color: black; color: white;">Ini kode-nya : </span>
<blockquote><center> <div style="text-align: center;"> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess" /><param value="http://www.2createawebsite.com/build/col.swf" name="movie" /><param value="high" name="quality" /><param value="#ffffff" name="bgcolor" /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"></embed> </object></div> </center> </blockquote><br />
3. Terbitkan Postingan Anda.Wayanhttp://www.blogger.com/profile/17860284870145482980noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-81477495612644963842016-03-12T11:14:00.002+08:002016-03-18T07:56:08.972+08:00Seleksi Otomatis Pada Blockquote di Blogger<div align="justify">
<span class="unik">S</span></div>
eleksi otomatis pada Blockquote di dalam artikel Blogspot, bertujuan untuk mempermudah pengunjung Blog untuk menyalin dan menyimpan apa yang ada di dalam Blockquote, baik itu berupa script ataupun kalimat. Pengunjung bisa memilih dengan hanya sekali klik untuk menyeleksi tag yang ada di dalam Blockquote.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgXt3gTMtszT8Q-W1bBMxhGsNX7MxJ8l3ZvIqk-HcAJEHX_trXQBNqd3HRGzUvdaBcFgPdPAhpmpDApNDmNtPIQ6F2YiRJiv7WLpSn3o8lAyRQM7hA3B-WzCe7ojQh3z8CJsKmF5v9ohd/s1600/blockquote.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Seleksi Otomatis Pada Blockquote" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgXt3gTMtszT8Q-W1bBMxhGsNX7MxJ8l3ZvIqk-HcAJEHX_trXQBNqd3HRGzUvdaBcFgPdPAhpmpDApNDmNtPIQ6F2YiRJiv7WLpSn3o8lAyRQM7hA3B-WzCe7ojQh3z8CJsKmF5v9ohd/s320/blockquote.jpg" title="Seleksi Otomatis Pada Blockquote" width="320" /></a></div>
<br />
Blogger saat ini sudah menyertakan fitur Blockquote di dalam post-nya, namun tampilan dan fiturnya masih standard. Jadi diperlukan sedikit script tambahan untuk menjadikan fitur Blockquote itu menjadi mudah dan menarik.<br />
<br />
<span style="background-color: black; color: white;">Jika Anda berminat memodifikasi Blockquote bawaan Blogger menjadi terseleksi otomatis dalam sekali atau dua kali klik, silakan Anda ikuti prosedur di bawah ini :</span><br />
<br />
1). Masuk ke Template >> Edit HTML<br />
2). Kita hanya perlu menambahkan Script di bawah ini sebelum Kode <span style="color: #cc0000;"></body></span><br />
<br />
<br />
<blockquote>
<script type='text/javascript'><br />
var pres = document.getElementsByTagName(&quot;blockquote&quot;);<br />
for (var i = 0; i &lt; pres.length; i++) {<br />
pres[i].addEventListener(&quot;<span style="background-color: #9fc5e8;">click</span>&quot;, function () {<br />
var selection = getSelection();<br />
var range = document.createRange();<br />
range.selectNodeContents(this);<br />
selection.removeAllRanges();<br />
selection.addRange(range);<br />
}, false);<br />
}<br />
</script></blockquote>
<br />
3). Simpan Template Anda.<br />
<br />
Note :<br />
<span style="background-color: #9fc5e8;">dblclick</span> >> Blockquote akan terseleksi dalam dua kali klik.<br />
<span style="background-color: #9fc5e8;">click</span> >> Blockquote akan terseleksi dalam satu kali klik.Wayanhttp://www.blogger.com/profile/17860284870145482980noreply@blogger.com1tag:blogger.com,1999:blog-2053743687906782870.post-5252757999221254762016-03-12T09:35:00.000+08:002016-03-13T15:02:53.203+08:00Memasang Breaking News di Blogger<p align="justify"><span class="unik" >C</span></p>oba Anda Lihat di atas Judul Artikel postingan Blog ini, sekarang sudah ada widget Breaking News yang nempel di sana dengan gaya drop up. Widget ini saya dapat dari Blog-nya mkr-site.blogspot.com. Lumayan bisa menghiasi Blog dan sekaligus sebagai pemancing artikel lain, agar bisa dilihat secara langsung oleh pengunjung, sehingga diharapkan bisa meningkatkan pageview halaman Blog kita.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIm8czsKxxcmMyJh8jwdVhiH0oVNW0m-9U2MKpXJesWQyysf6A1s3OYBe6nSKEDna0TwotghSQ6nSYwmavoTMcTVEAj4L3d1CW_bubVEuLhnqWEQvhHARKjTk6q4AkTnK9kM2ex8c9TLX2/s1600/news.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Breaking News di Blogger" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIm8czsKxxcmMyJh8jwdVhiH0oVNW0m-9U2MKpXJesWQyysf6A1s3OYBe6nSKEDna0TwotghSQ6nSYwmavoTMcTVEAj4L3d1CW_bubVEuLhnqWEQvhHARKjTk6q4AkTnK9kM2ex8c9TLX2/s320/news.jpg" title="Memasang Breaking News di Blogger" width="320" /></a></div><br />
<span style="background-color: black; color: white;">Penasaran ingin mencoba juga di Blog Anda, silakan ikuti petunjung di Bawah ini :</span><br />
<br />
1). Masuk ke template >> Edit HTML, cari dan temukan kode ini <span style="background-color: #ea9999;">id='Blog1'</span><br />
Posisi kode-nya seperti dibawah ini :<br />
<br />
<blockquote><div id='content-wrapper'> <!-- Tag Pembuka untuk daerah konten dan sidebar --><br />
<div id='main-wrapper'> <!-- Tag Pembuka untuk daerah posting dan komentar --><br />
<span style="background-color: #9fc5e8;"><b:section class='main' id='main' showaddelement='no'></span><br />
<b:widget <span style="background-color: #ea9999;">id='Blog1'</span> locked='true' title='Blog Posts' type='Blog'/><br />
</b:section><br />
</div> <!-- Tag Penutup untuk daerah posting dan komentar --></blockquote><br />
2). Salin kode di bawah ini dan letakkan di atas kode <span style="background-color: #9fc5e8;"><b:section class='main' id='main' showaddelement='no'></span><br />
<br />
<blockquote><span style="background-color: #ea9999;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br />
<span style="background-color: #ea9999;"><div id='beakingnews'><span class='tulisbreaking'>Breaking News</span></span><br />
<span style="background-color: #ea9999;"><div id='recentpostbreaking'>Loading...</div></span><br />
<span style="background-color: #ea9999;"></div></span><br />
<span style="background-color: #ea9999;"></b:if></span></blockquote><br />
Note : di atas itu adalah kode pemanggil Breaking news-nya, disitulah Breaking News akan muncul di Blog.<br />
<br />
3). Nanti tampilan kode lengkapnya jadi seperti ini :<br />
<br />
<blockquote><div id='content-wrapper'> <!-- Tag Pembuka untuk daerah konten dan sidebar --><br />
<br />
<div id='main-wrapper'> <!-- Tag Pembuka untuk daerah posting dan komentar --><br />
<span style="background-color: #ea9999;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br />
<span style="background-color: #ea9999;"><div id='beakingnews'><span class='tulisbreaking'>Breaking News</span><!-- tag pembuka tempat Breaking News--></span><br />
<span style="background-color: #ea9999;"><div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan--></span><br />
<span style="background-color: #ea9999;"></div><!-- tag penutup tempat Breaking News--></span><br />
<span style="background-color: #ea9999;"></b:if></span><br />
<span style="background-color: #9fc5e8;"><b:section class='main' id='main' showaddelement='no'></span><br />
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br />
</b:section><br />
</div> <!-- Tag Penutup untuk daerah posting dan komentar --></blockquote><br />
4). Cari kode <span style="background-color: #ffe599;"></body></span> dan letakkan kode jQuery breaking news di bawah ini di atas kode <span style="background-color: #ffe599;"></body></span>:<br />
<br />
<blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
$(document).ready(function () {<br />
var url_blog = <span style="background-color: #ffe599;">'URL_blog disini'</span>, // alamat blogmu contoh http://berbagitipsblogger.blogspot.com<br />
numpostx = 10; // Jumlah artikel yang di tampilkan<br />
$.ajax({<br />
url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',<br />
type: 'get',<br />
dataType: "jsonp",<br />
success: function(data) {<br />
var posturl, posttitle, skeleton = '',<br />
entry = data.feed.entry;<br />
if (entry !== undefined) {<br />
skeleton = "<ul>";<br />
for (var i = 0; i < entry.length; i++) {<br />
for (var j=0; j < entry[i].link.length; j++)<br />
{<br />
if (entry[i].link[j].rel == "alternate")<br />
{<br />
posturl = entry[i].link[j].href;<br />
break;<br />
}<br />
} <br />
posttitle = entry[i].title.$t;<br />
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';<br />
}<br />
skeleton += '</ul>';<br />
$('#recentpostbreaking').html(skeleton);<br />
// kode untuk efek pada breaking news<br />
function tick(){<br />
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });<br />
}<br />
setInterval(function(){ tick () }, 5000);<br />
} else {<br />
$('#recentpostbreaking').html('<span>No result!</span>');<br />
}<br />
},<br />
error: function() {<br />
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');<br />
}<br />
});<br />
});<br />
//]]><br />
</script><br />
</b:if></blockquote><br />
Note :<br />
Ganti<span style="background-color: #ffe599;"> 'URL_blog disini'</span> dengan Alamat URL blog Anda.<br />
<br />
5). Selanjutnya cari kode <span style="background-color: #ffe599;"></head></span> dan letakkan kode CSS di bawah ini tepat di atasnya.<br />
<br />
<blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<style type='text/css'><br />
#beakingnews{line-height:25px;height:25px;background:#F7F7F7;overflow:hidden}<br />
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#008D17}<br />
#recentpostbreaking{float:left}<br />
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}<br />
</style><br />
</b:if></blockquote><br />
6). Simpan template Anda. Selesai.<br />
Untuk informasi lengkapnya bisa kunjungi langsung web pembuat tutorial : <a href="http://mkr-site.blogspot.co.id/2013/01/membuat-breaking-news-blogspot.html" target="_blank">http://mkr-site.blogspot.co.id/2013/01/membuat-breaking-news-blogspot.html</a>Wayanhttp://www.blogger.com/profile/17860284870145482980noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-67683474091570715432016-03-11T16:18:00.002+08:002016-03-11T16:24:11.934+08:00Mengatasi Emoticon pesan komentar yang pindah ke bawahBlog saya ini juga sempat mengalami Emoticon pesan komentar pindah ke bawah kotak komentar, ini terjadi setelah saya selesai memasang Kaskus Emoticon dari Blog-nya bambangkusumo.blogspot.co.id. Pada awalnya saya diamkan saja, tapi lama kelamaan gak enak juga dilihat.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEGscuHjqrzQjCTItG0w04o6akyMYBgRElWOP3ckAPXRWxc9qIubo-liOOoIgtRYuE47tkFzjkEz0MfHWVGV1kQ5iqYSiYnoDJq9A5tkWtW5XNHiK5FDREYiklLiZeyiNi5SLPM8nWdzfF/s1600/komentar+di+bawah.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengatasi Emoticon pesan komentar yang pindah ke bawah" border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEGscuHjqrzQjCTItG0w04o6akyMYBgRElWOP3ckAPXRWxc9qIubo-liOOoIgtRYuE47tkFzjkEz0MfHWVGV1kQ5iqYSiYnoDJq9A5tkWtW5XNHiK5FDREYiklLiZeyiNi5SLPM8nWdzfF/s320/komentar+di+bawah.png" title="Mengatasi Emoticon pesan komentar yang pindah ke bawah" width="320" /></a></div>
<br />
<br />
Saya coba trik yang dishare oleh Mas Bambang Kusumo, dan saya terapkan di Blog ini dan hasilnya saat ini saat ini normal. Emoticon tidak pernah lagi berada di bawahnya kotak komentar Blog.<br />
<br />
Trik ini merubah dan menambahkan beberapa script ke dalam Template, memang harus kudu hati-hati dan teliti agar template Blog ini tidak jadi Error.<br />
<br />
<span style="background-color: black; color: white;">Berikut Triknya :</span><br />
<br />
<br />
1). Masuk Ke Template >> cari dan dapatkan Kode seperti ini : <br />
<span style="background-color: #ffe599;"><b:includable id='threaded-comment-form' var='post'></span><br />
<br />
Lengkapnya seperti di bawah ini :<br />
<br />
<blockquote>
<b:includable id='threaded-comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <b:if cond='data:mobile'> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/> <b:else/> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/> </b:if> <data:post.friendConnectJs/> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;); </script> </div></b:includable></blockquote>
<br />
<span style="background-color: black; color: white;">Jika Anda sudah menemukannya, silakan ganti dengan Kode di bawah ini :</span><br />
<br />
<blockquote>
<b:includable id='threaded-comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <b:if cond='data:mobile'><div id='<span style="color: red;">form-wrapper</span>'> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/></div> <b:else/><div id='<span style="color: red;">form-wrapper</span>'> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></div> </b:if> <data:post.friendConnectJs/> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;); </script> </div></b:includable></blockquote>
<br />
2). Selanjutnya cari kode ini :<br />
<span style="background-color: #ffe599;">document.getElementById(domId).insertBefore(replybox, null);</span><br />
<br />
<span style="background-color: black; color: white;">Jika sudah ketemu, silakan ganti dengan Kode di bawah ini :</span><br />
<br />
<blockquote>
document.getElementById(domId).insertBefore(document.getElementById('<span style="color: red;">form-wrapper</span>'), null);</blockquote>
<br />
3). Silakan simpan Template Anda.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-16274223372763060042016-03-11T14:34:00.005+08:002016-03-11T15:24:56.866+08:00Memasang Emoticon Kaskus di komentar blogBlog ini akhirnya bisa dipasangkan Emoticon Kaskus di Komentar Blog-nya. Ternyata tidak semua template dapat menjalankan Emoticon di kotak komentarnya, ada beberapa template yang konflik pada javaScriptnya sehingga Emoticon hanya bisa muncul sekali saja dan selanjutnya menghilang. Begitu juga dengan Blog ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzReqYTjGvEDp8CpT5chdAPm-rmNW1D5uRCcVdc98AEfuzjYhPNxO5mSm0hMxpoXFzTodaoEm2sPYgpX04UmMARUPxE_RXpRCyZB7yPMhaR4Ufm-IZ46iFf2_tp8lLwKP1xc7ahJZqJsYM/s1600/Smiley+Kaskus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Emoticon Kaskus di komentar blog" border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzReqYTjGvEDp8CpT5chdAPm-rmNW1D5uRCcVdc98AEfuzjYhPNxO5mSm0hMxpoXFzTodaoEm2sPYgpX04UmMARUPxE_RXpRCyZB7yPMhaR4Ufm-IZ46iFf2_tp8lLwKP1xc7ahJZqJsYM/s400/Smiley+Kaskus.png" title="Memasang Emoticon Kaskus di komentar blog" width="400" /></a></div>
<br />
<br />
Akhirnya saya coba pasang Emoticon Kaskus yang dishare oleh Blog bambangkusumo.blogspot.co.id, dan ternyata emoticon ini berjalan mulus di template Blog saya. Cuman kadang emoticon munculnya di Bawah form komentar, tapi tidak masalah, yang penting emoticon-nya berjalan lancar dan tidak error.<br />
<br />
<span style="background-color: black; color: white;">Jika Anda juga mau memasangnya di Blog milik Anda, silakan saja ikuti tutorial di bawah ini :</span><br />
<br />
1). Masuk ke Template >> Edit HTML<br />
2). Pasang dulu jquery.min.js, jika di Blog Anda belum ada. Copy dan paste script jquery.min.js di bawah ini di bawah Kode <span style="background-color: #ffe599;"><head></span><br />
<br />
<blockquote>
<script charset='utf-8' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/></blockquote>
<br />
3). Copy kode di bawah ini dan letakkan sebelum kode <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
<blockquote>
.emoWrap{ background:#fff; border:1px solid #a7a9aa; margin:5px; padding:10px;}</blockquote>
<br />
4). Selanjutnya Copy kode di bawah ini dan letakkan sebelum kode <span style="background-color: #ffe599;"></body></span><br />
<br />
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <br />
<script type='text/javascript'><br />
//<![CDATA[<br />
var emoRange = "#comments p, div.emoWrap",<br />
putEmoAbove = "iframe#comment-editor",<br />
emoMessage = "To insert emoticon you must added at least one space before the code.";<br />
// Emoticon bar before comment-form<br />
//]]><br />
</script><br />
<script src='<span style="background-color: #ffe599;">https://emoticonkaskus-cahlaban.googlecode.com/svn/emoticon-kaskus-cahlaban</span>' type='text/javascript'/><br />
</b:if></blockquote>
<br />
<span style="background-color: black; color: white;">Note :</span><br />
Anda bisa menghosting file JavaScript '<span style="background-color: #ffe599;">https://emoticonkaskus-cahlaban.googlecode.com/svn/emoticon-kaskus-cahlaban</span>' dengan web hosting Anda sendiri.<br />
<br />
5). Simpan Template Anda. Jika semua langkah di atas sudah dilakukan dengan benar, saya yakin emoticon Kaskus seharusnya sudah ada di atas kotak komentar Blog Anda. Thanx.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com1tag:blogger.com,1999:blog-2053743687906782870.post-35787941045063756762016-03-11T13:54:00.001+08:002016-03-11T14:02:10.573+08:00Modifikasi Judul Sidebar Blogger Dengan CSSCara paling mudah untuk Modifikasi Judul Sidebar Blogger adalah dengan menyisipkan CSS di dalam Template Blog. Saya juga menggunakan Metode ini untuk memberikan Background pada Judul Sidebar Blog ini. Anda bisa lihat hasilnya, judul sidebar kelihatan lebih rapi dan bersih. Jika Anda tertarik untuk mencobanya silakan ikuti metode di bawah ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqEnNlZs6ZDK5Kbc6lTm_BGPx0Yo-f31bCdhCsdWbDintf6Xd4wTzZNIj2dnDqGai9iOy7HO3kAFVMUytnHhOOAnQRLCBMNbhekKcomV9cVs_eVg8W_yaGuSjMUxVNk-xEzkJfBzWAnOtI/s1600/sidebar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Judul Sidebar Blogger Dengan CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqEnNlZs6ZDK5Kbc6lTm_BGPx0Yo-f31bCdhCsdWbDintf6Xd4wTzZNIj2dnDqGai9iOy7HO3kAFVMUytnHhOOAnQRLCBMNbhekKcomV9cVs_eVg8W_yaGuSjMUxVNk-xEzkJfBzWAnOtI/s1600/sidebar.png" title="Modifikasi Judul Sidebar Blogger Dengan CSS" /></a></div>
<br />
<br />
1). Login ke Blogger >> Template >> Edit HTML<br />
2). Copy dan tempelkan Kode di Bawah ini sebelum Kode <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
<blockquote>
.sidebar h2 {<br />
font-size:110%;<br />
font-weight:bold;<br />
color:#ffffff;<br />
text-transform:uppercase;<br />
text-align:center;<br />
background:#2281C4;<br />
border-radius: 15px;<br />
}</blockquote>
<br />
<span style="background-color: black; color: white;">Note:</span><br />
Kode #ffffff adalah kode warna teks<br />
Kode #2281C4 adalah background judul sidebar. <br />
Silahkan di ganti dengan warna Anda. Lihat kode Warna disini : <a href="http://berbagitipsblogger.blogspot.com/p/kode-warna-html.html" target="_blank">Color Picker</a><br />
Kode 'center' untuk judul di Tengah bisa juga diganti dengan :<br />
Kode 'left' untuk judul di kiri<br />
<br />
3). Terakhir simpan Template Anda. Untuk contoh-nya bisa dilihat di Blog saya ini.<br />
Terima kasih.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com1tag:blogger.com,1999:blog-2053743687906782870.post-42410110043711283072016-03-11T13:15:00.000+08:002016-03-11T13:22:40.083+08:00Membuat Tombol Next Page Dengan Angka di BlogTombol Next Page perhalaman sangat diperlukan oleh sebuah Blog, ini akan dapat mempermudah pengunjung untuk menelusuri semua artikel postingan Blog. Coba Anda lihat pada bagian bawah HomePage Blog ini, disitulah Tombol Next Page akan muncul per halaman dan Tombol Next Page ini tidak akan muncul pada halaman Artikel.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP6vqzAf7Q2C_hp5Fvfa8vPdEHePqlJFmTWN0JTt-GcHcflK6AbEoJO0QmKZsbIB6OEtnRMMxaL_G157Dpg97XNhowPpI_ozQspMmffPE12qD6aBgD62m9Jh4zOj_SCRzw2fRtmWJAWVtz/s1600/next+page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tombol Next Page Dengan Angka di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP6vqzAf7Q2C_hp5Fvfa8vPdEHePqlJFmTWN0JTt-GcHcflK6AbEoJO0QmKZsbIB6OEtnRMMxaL_G157Dpg97XNhowPpI_ozQspMmffPE12qD6aBgD62m9Jh4zOj_SCRzw2fRtmWJAWVtz/s1600/next+page.png" title="Membuat Tombol Next Page Dengan Angka di Blog" /></a></div>
<br />
Pada setiap halaman setelah HomePage akan muncul link seperti di bawah ini di Browser setiap kita klik Tombol Next Page, hampir sama dengan link pencarian artikel di Blog.<br />
<br />
<span style="background-color: #b6d7a8;"><i>http://berbagitipsblogger.blogspot.co.id/search?updated-max=2016-03-10T07%3A12%3A00%2B08%3A00&max-results=xx</i></span><br />
<br />
<span style="background-color: black; color: white;">Jika Anda tertarik memasang Tombol Next Page Dengan Angka ini, silakan Anda ikuti petunjung di Bawah ini :</span><br />
<br />
1). Login ke Blogger >> Template >> Edit HTML<br />
2). Salin dan tempel kode di bawah ini sebelum kode <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
<blockquote>
/* Tombol Next Page Dengan Angka<br />
----------------------------------------------- */<br />
.showpageArea{float:left;color:#555;font-size:11px;margin:10px 0}<br />
.showpageArea a{color:#555;text-shadow:0 1px 2px #fff}<br />
.showpageNum a:hover,.showpage:hover{border:1px solid #b2b2b2;color:#555!important}<br />
.showpage{margin:0}<br />
.showpage:hover a{color:#555!important}<br />
.showpagePoint{background:#f8f8f8;border:1px solid #b2b2b2;margin:0 2px 0 0;padding:5px 12px}<br />
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8;background:#f8f8f8;margin:0 2px 0 0;padding:5px 12px}</blockquote>
<br />
3). Kemudian Salin dan tempelkan kode di bawah ini sebelum Kode <span style="background-color: #ffe599;"></body></span><br />
<br />
<blockquote>
<script type='text/javascript'><br />
var pageCount=<span style="background-color: #ffe599;">5</span>;<br />
var displayPageNum=<span style="background-color: #ffe599;">6</span>;<br />
var upPageWord='Prev';<br />
var downPageWord='Next';<br />
</script><br />
<!-- Tombol Next Page Dengan Angka --><br />
<script type="text/javascript" src="https://googledrive.com/host/0By9Vs49VphQqeWVMYzNqbWlNaU0"></script></blockquote>
<br />
<span style="background-color: black; color: white;">Note: </span><br />
- Silahkan Anda ganti angka, dan kata "Prev" dan "Next" sesuai keinginan Anda. <br />
- Angka 5 menunjukan jumlah post yang ingin ditampilkan ketika menekan salah-satu nomor pada tombol next page, <br />
- Angka 6 menampilkan jumlah halaman yang ingin Anda tampilkan pada homepage blog Anda.<br />
<br />
4). Terakhir simpan Template Anda.<br />
<br />Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-58460789200033627972016-03-10T14:30:00.000+08:002016-03-10T14:40:16.257+08:00Membuat Efek pelangi pada Link Aktif di Blog<div align="justify">
<span class="unik">E</span></div>
fek pelangi pada Link Aktif di Blog, hanya sebagai hiasan Blog semata. Cocok bagi Anda yang senang mempercantik tampilan Blog-nya. Blog Anda akan tampil beda, namun tetap ringan. Tampilan Efek pelangi bisa dilihat di Blog <a href="http://berbagitipsblogger.blogspot.com/" target="_blank">BTB</a> ini. Jika Anda tertarik, silakan menerapkan trik ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYuTOdYwhg6cOqxMTkuWfAnJceTxlqHsQnaBAvPry6uTJBi16DMfL68XKnpuxU9wAl26sdxmFF04fkeBvZXGiPdbgwRIRCY_qzZS3NAwq8q2jPp6FwAJHosiJ63VndLs6mtx2IdBzb-Y4P/s1600/rainbow-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Efek pelangi pada Link Aktif di Blog" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYuTOdYwhg6cOqxMTkuWfAnJceTxlqHsQnaBAvPry6uTJBi16DMfL68XKnpuxU9wAl26sdxmFF04fkeBvZXGiPdbgwRIRCY_qzZS3NAwq8q2jPp6FwAJHosiJ63VndLs6mtx2IdBzb-Y4P/s400/rainbow-.jpg" title="Membuat Efek pelangi pada Link Aktif di Blog" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
1). Login ke Blogger.<br />
<br />
2). Pilih Template >> Edit HTML<br />
<br />
3). Cari dan dapatkan kode : <span style="background-color: #ffe599;"></head></span><br />
<br />
4). Langkah copy dan paste-kan kode di bawah ini dan letakkan sebelum kode <span style="background-color: #ffe599;"></head></span><br />
<br />
<blockquote>
<script type='text/javascript'><br />
<br />
//<![CDATA[<br />
<br />
var rate = 20;<br />
<br />
if (document.getElementById)<br />
window.onerror=new Function("return true")<br />
<br />
var objActive; // The object which event occured in<br />
var act = 0; // Flag during the action<br />
var elmH = 0; // Hue<br />
var elmS = 128; // Saturation<br />
var elmV = 255; // Value<br />
var clrOrg; // A color before the change<br />
var TimerID; // Timer ID<br />
<br />
if (document.all) {<br />
document.onmouseover = doRainbowAnchor;<br />
document.onmouseout = stopRainbowAnchor;<br />
}<br />
else if (document.getElementById) {<br />
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);<br />
document.onmouseover = Mozilla_doRainbowAnchor;<br />
document.onmouseout = Mozilla_stopRainbowAnchor;<br />
}<br />
<br />
function doRainbow(obj)<br />
{<br />
if (act == 0) {<br />
act = 1;<br />
if (obj)<br />
objActive = obj;<br />
else<br />
objActive = event.srcElement;<br />
clrOrg = objActive.style.color;<br />
TimerID = setInterval("ChangeColor()",100);<br />
}<br />
}<br />
<br />
<br />
function stopRainbow()<br />
{<br />
if (act) {<br />
objActive.style.color = clrOrg;<br />
clearInterval(TimerID);<br />
act = 0;<br />
}<br />
}<br />
<br />
<br />
function doRainbowAnchor()<br />
{<br />
if (act == 0) {<br />
var obj = event.srcElement;<br />
while (obj.tagName != 'A' && obj.tagName != 'BODY') {<br />
obj = obj.parentElement;<br />
if (obj.tagName == 'A' || obj.tagName == 'BODY')<br />
break;<br />
}<br />
<br />
if (obj.tagName == 'A' && obj.href != '') {<br />
objActive = obj;<br />
act = 1;<br />
clrOrg = objActive.style.color;<br />
TimerID = setInterval("ChangeColor()",100);<br />
}<br />
}<br />
}<br />
<br />
<br />
function stopRainbowAnchor()<br />
{<br />
if (act) {<br />
if (objActive.tagName == 'A') {<br />
objActive.style.color = clrOrg;<br />
clearInterval(TimerID);<br />
act = 0;<br />
}<br />
}<br />
}<br />
<br />
<br />
function Mozilla_doRainbowAnchor(e)<br />
{<br />
if (act == 0) {<br />
obj = e.target;<br />
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {<br />
obj = obj.parentNode;<br />
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')<br />
break;<br />
}<br />
<br />
if (obj.nodeName == 'A' && obj.href != '') {<br />
objActive = obj;<br />
act = 1;<br />
clrOrg = obj.style.color;<br />
TimerID = setInterval("ChangeColor()",100);<br />
}<br />
}<br />
}<br />
<br />
<br />
function Mozilla_stopRainbowAnchor(e)<br />
{<br />
if (act) {<br />
if (objActive.nodeName == 'A') {<br />
objActive.style.color = clrOrg;<br />
clearInterval(TimerID);<br />
act = 0;<br />
}<br />
}<br />
}<br />
<br />
<br />
function ChangeColor()<br />
{<br />
objActive.style.color = makeColor();<br />
}<br />
<br />
<br />
function makeColor()<br />
{<br />
// Don't you think Color Gamut to look like Rainbow?<br />
<br />
// HSVtoRGB<br />
if (elmS == 0) {<br />
elmR = elmV; elmG = elmV; elmB = elmV;<br />
}<br />
else {<br />
t1 = elmV;<br />
t2 = (255 - elmS) * elmV / 255;<br />
t3 = elmH % 60;<br />
t3 = (t1 - t2) * t3 / 60;<br />
<br />
if (elmH < 60) {<br />
elmR = t1; elmB = t2; elmG = t2 + t3;<br />
}<br />
else if (elmH < 120) {<br />
elmG = t1; elmB = t2; elmR = t1 - t3;<br />
}<br />
else if (elmH < 180) {<br />
elmG = t1; elmR = t2; elmB = t2 + t3;<br />
}<br />
else if (elmH < 240) {<br />
elmB = t1; elmR = t2; elmG = t1 - t3;<br />
}<br />
else if (elmH < 300) {<br />
elmB = t1; elmG = t2; elmR = t2 + t3;<br />
}<br />
else if (elmH < 360) {<br />
elmR = t1; elmG = t2; elmB = t1 - t3;<br />
}<br />
else {<br />
elmR = 0; elmG = 0; elmB = 0;<br />
}<br />
}<br />
<br />
elmR = Math.floor(elmR).toString(16);<br />
elmG = Math.floor(elmG).toString(16);<br />
elmB = Math.floor(elmB).toString(16);<br />
if (elmR.length == 1) elmR = "0" + elmR;<br />
if (elmG.length == 1) elmG = "0" + elmG;<br />
if (elmB.length == 1) elmB = "0" + elmB;<br />
<br />
elmH = elmH + rate;<br />
if (elmH >= 360)<br />
elmH = 0;<br />
<br />
return '#' + elmR + elmG + elmB;<br />
}<br />
<br />
//]]><br />
<br />
</script></blockquote>
<br />
5). Simpan Template Anda.<br />
Thanx.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com4tag:blogger.com,1999:blog-2053743687906782870.post-1728364054016333222016-03-10T13:03:00.004+08:002016-03-10T13:13:10.331+08:00Membuat Navigasi Menu Responsive (Mobile Friendly) di blogger<div align="justify">
<span class="unik">M</span></div>
enu Navigasi responsive (Mobile Friendly) ini saya intip dari Blog johnywussresponsif.blogspot.co.id dan menu Navigasi ini juga sudah terpasang di bawah header Blog ini. Navigasi Menu ini memang 100% responsive dan mobil Friendly. Sudah saya tes dengan beberapa browser, tablet phone dan smartphone dengan berbagai resolusi berbeda dan hasilnya benar-benar Responsive.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQ5EkNVCenUTsZQyz1S56SL_cSIBV6t9_3h8Tmg1Do6Rja4gGC72BXQ-wyB1xs6ylly6M3Bu9GdGm1ZdUa49m2mwuMzMTcDQWCg02mhXy6vC9HKSgFii5vW8RyTwXSXFgm_zU-cL_Ss-l/s1600/Membuat+Navigasi+Menu+Responsive.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Navigasi Menu Responsive (Mobile Friendly) di blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQ5EkNVCenUTsZQyz1S56SL_cSIBV6t9_3h8Tmg1Do6Rja4gGC72BXQ-wyB1xs6ylly6M3Bu9GdGm1ZdUa49m2mwuMzMTcDQWCg02mhXy6vC9HKSgFii5vW8RyTwXSXFgm_zU-cL_Ss-l/s320/Membuat+Navigasi+Menu+Responsive.JPG" title="Membuat Navigasi Menu Responsive (Mobile Friendly) di blogger" width="272" /></a></div>
<br />
Thank buat johnywussresponsif.blogspot.co.id, sekalian ijin comot dan share Menu Navigasi responsive (Mobile Friendly) ini di Blog ini.<br />
<br />
<span style="background-color: black;"><span style="color: white;">Bagi Anda yang berminat meminang Menu Navigasi responsive (Mobile Friendly) ini di Blog Anda, silakan ikuti tutorial ini:</span></span><br />
<br />
1. Masuk ke Template >> Edit HTML<br />
2. Cari (ctrl+f) kode <span style="background-color: #ffe599;">]]></b:skin></span><br />
3. Salin dan paste kode di bawah ini sebelum <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
<blockquote>
/*-----Responsive Down Menu ----*/<br />
body {<br />
margin: 0px;<br />
}<br />
#menu{background: #484848;color: #F2F2F2;height: 35px;border-bottom: 2px solid #DDD;}<br />
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}<br />
#menu ul{height:40px;width:1024px}<br />
#menu li{float:left;display:inline;position:relative;font:bold 1em Arial;text-shadow: 1px 2px 4px #838383;}<br />
#menu a{display: block;line-height: 35px;padding: 0 14px;text-decoration: none;color: #FFF;}<br />
<br />
#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;background: #5FC6EB;}<br />
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}<br />
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}<br />
#menu label span{font-size:16px;position:absolute;left:35px}<br />
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}<br />
#menu ul.menus li{display: block;width: 100%;font:normal 1em Arial;text-transform: none;text-shadow: none;border-bottom: 1px dotted #31AFDB;}<br />
#menu ul.menus a{color: #FFF;line-height: 35px;}<br />
#menu li:hover ul.menus{display:block}<br />
<br />
#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}<br />
<br />
@media screen and (max-width: 800px){<br />
#menu{position:relative}<br />
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}<br />
#menu ul.menus{width:100%;position:static;padding-left:20px}<br />
#menu li{display:block;float:none;width:auto; font:normal 1em Arial;}<br />
#menu input,#menu label{position:absolute;top:0;left:0;display:block}<br />
#menu input{z-index:4}<br />
#menu input:checked + label{color:white}<br />
#menu input:checked ~ ul{display:block}<br />
}</blockquote>
<br />
4. Cari (ctrl+f) kode <span style="background-color: #ffe599;"><body></span><br />
5. Salin dan paste kode di bawah ini setelah kode <span style="background-color: #ffe599;"><body>.</span><br />
<br />
<blockquote>
<nav id='menu'><br />
<input type='checkbox'/><br />
<label>&#8801;<span>Navigasi&#160;Menu</span></label><br />
<ul><br />
<li><a href='/'>Home</a></li><br />
<li><a href='#'>Kategori 1</a></li><br />
<li><a href='#'>Kategori 2</a></li><br />
<li><a href='#'>Kategori 3</a></li><br />
<li><a href='#'>Kategori 4</a></li><br />
<br />
<li><a href='#'>Drop Down Menu <font size='1'>&#9660;</font></a><br />
<ul class='menus'><br />
<li><a href='#'>Drop 1</a></li><br />
<li><a href='#'>Drop 2</a></li><br />
<li><a href='#'>Drop 3</a></li><br />
</ul><br />
</li><br />
<li><a href='http://berbagitipsblogger.blogspot.com/' target='_blank'>Links</a></li><br />
</ul><br />
</nav></blockquote>
<br />
<span style="color: white;"><span style="background-color: black;">Note :</span></span><br />
=> Jika di tata Letak template Anda sudah ada ruang Add gadget di bawah header, lewati langkah no.4 dan no.5. Anda bisa memasukkan kode di atas <br />
langsung di Tata Letak >> Add gadget >> HTML/JavaScript.<br />
=> Ganti "#" dengan alamat URL Anda.<br />
<br />
6. Terakhir klik Simpan.<br />
<br />
Demikian Membuat Navigasi Menu Responsive (Mobile Friendly) di blog blogspot. Semoga bisa membantu. Terima kasih.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com2tag:blogger.com,1999:blog-2053743687906782870.post-40118728094577145352016-03-10T08:42:00.004+08:002016-03-10T08:52:54.530+08:00Memasang Widget Tombol Back to Top di Blogger<div align="justify">
<span class="unik">H</span></div>
ampir sebagian besar desainer template menyertakan Tombol Back to Top (Kembali ke Atas) di Template buatan mereka. Tombol Back to Top (Kembali ke Atas) berfungsi untuk mempermudah pengunjung kembali ke halaman Atas tanpa perlu scroll mouse, cukup hanya dengan memencet tombol Back to Top saja. Apalagi untuk halaman posting yang panjang widget Tombol Back to Top sangatlah perlu. Widget Tombol Back to Top ini hanya muncul saat halaman blog discroll ke bawah.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmUuuoi6SRIidm2d6KpQSR_QaeVDC6tP_Ay7_Hkg6blErBHVUFR1UOdYqzq25CRIQ8jzukH0AQHSHAYLsI9z2yiXGw-zAnzH7hLbnN-UZwUUQjkNVSJqW0Zk3PpviXxlmbCmjTSoaLZVW/s1600/back%252Bto%252Btop.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Widget Tombol Back to Top di Blogger" border="0" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmUuuoi6SRIidm2d6KpQSR_QaeVDC6tP_Ay7_Hkg6blErBHVUFR1UOdYqzq25CRIQ8jzukH0AQHSHAYLsI9z2yiXGw-zAnzH7hLbnN-UZwUUQjkNVSJqW0Zk3PpviXxlmbCmjTSoaLZVW/s320/back%252Bto%252Btop.png" title="Memasang Widget Tombol Back to Top di Blogger" width="320" /></a></div>
<br />
<span style="color: white;"><span style="background-color: black;">Mari kita mulai Memasang Widget Tombol Back to Top di Blogger:</span></span><br />
<br />
a). Pastikan di template blog Anda sudah ada kode jquery, kode seperti ini:<br />
<br />
<blockquote>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></blockquote>
<br />
Atau Kode ini :<br />
<br />
<blockquote>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script></blockquote>
<br />
b). Jika belum ada, lakukan langkah ini:<br />
- Masuk dulu ke Template >> Edit HTML<br />
- Cari (CTRL+F) kode <span style="background-color: #ffe599;"></head></span><br />
- Salin salah satu kode Jquery di atas dan tempelkan sebelum kode <span style="background-color: #ffe599;"></head></span>.<br />
- Save template Anda.<br />
<br />
<span style="background-color: black;"><span style="color: white;">Selanjutnya:</span></span><br />
<br />
1). Masuk ke Tata Letak >> Add a Gadget >> Gadget >> pilih HTML/Javascript<br />
2. Judul biarkan kosong<br />
3. Salin Kode dibawah ini dan paste-kan di kolom "Gadget Content":<br />
<br />
<blockquote>
<script type="text/javascript" ><br />
var scrolltotop={<br />
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control<br />
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).<br />
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},<br />
controlHTML: '<img src="<span style="background-color: #9fc5e8;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2wLkR_TMa27HP80eMu4EvpfwoBOkLY0-IHNU-3rc-yZVEfLT-MJ4PkoLaek5u3jCJzwf4n8pv75IFW8Ww3kEUET50ZVsi4FWc5IqRhk0MD72KjuWEB6_remf1yEwJiqtTVAHQ4yyrqw/s1600/back+to+top.png</span>" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"<br />
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner<br />
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links<br />
<br />
state: {isvisible:false, shouldvisible:false},<br />
<br />
scrollup:function(){<br />
if (!this.cssfixedsupport) //if control is positioned using JavaScript<br />
this.$control.css({opacity:0}) //hide control immediately after clicking it<br />
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)<br />
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists<br />
dest=jQuery('#'+dest).offset().top<br />
else<br />
dest=0<br />
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);<br />
},<br />
<br />
keepfixed:function(){<br />
var $window=jQuery(window)<br />
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx<br />
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety<br />
this.$control.css({left:controlx+'px', top:controly+'px'})<br />
},<br />
<br />
togglecontrol:function(){<br />
var scrolltop=jQuery(window).scrollTop()<br />
if (!this.cssfixedsupport)<br />
this.keepfixed()<br />
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false<br />
if (this.state.shouldvisible && !this.state.isvisible){<br />
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])<br />
this.state.isvisible=true<br />
}<br />
else if (this.state.shouldvisible==false && this.state.isvisible){<br />
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])<br />
this.state.isvisible=false<br />
}<br />
},<br />
<br />
init:function(){<br />
jQuery(document).ready(function($){<br />
var mainobj=scrolltotop<br />
var iebrws=document.all<br />
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode<br />
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')<br />
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')<br />
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})<br />
.attr({title:'Scroll Back to Top'})<br />
.click(function(){mainobj.scrollup(); return false})<br />
.appendTo('body')<br />
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text<br />
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text<br />
mainobj.togglecontrol()<br />
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){<br />
mainobj.scrollup()<br />
return false<br />
})<br />
$(window).bind('scroll resize', function(e){<br />
mainobj.togglecontrol()<br />
})<br />
})<br />
}<br />
}<br />
<br />
scrolltotop.init()<br />
</script></blockquote>
<br />
4). Simpan Gadget Anda.<br />
<br />
<span style="background-color: black;"><span style="color: white;">Note:</span></span><br />
Gambar Widget "Tombol Back to Top" bisa Anda dengan gambar milik Anda. Atau silakan pilih dari koleksi gambar di bawah ini. Ganti link URL-nya ke bagian yang ditandai warna biru dalam kode di atas.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxb3Qiue7N02pstLfQf-D099xDKOr9RDt5Wwd5hTRa-Or5DQ_7iDaINStCpVgcTstacOWW7m5GcsPTumcDTPtU6t0IwK5DSfmVjkASS3aMmQAuEVYWbN2mhDJF3qdNfCtjwGPVBPLT1Vo/s1600/back_to_top_button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxb3Qiue7N02pstLfQf-D099xDKOr9RDt5Wwd5hTRa-Or5DQ_7iDaINStCpVgcTstacOWW7m5GcsPTumcDTPtU6t0IwK5DSfmVjkASS3aMmQAuEVYWbN2mhDJF3qdNfCtjwGPVBPLT1Vo/s1600/back_to_top_button.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxb3Qiue7N02pstLfQf-D099xDKOr9RDt5Wwd5hTRa-Or5DQ_7iDaINStCpVgcTstacOWW7m5GcsPTumcDTPtU6t0IwK5DSfmVjkASS3aMmQAuEVYWbN2mhDJF3qdNfCtjwGPVBPLT1Vo/s1600/back_to_top_button.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4GshWGMtHd-2pk0x3sL4Apqmoud6fIwfe8VL4Xd6NSawp_6umlpQFexX-stD7tWvEQB5hDadYaR4fm5n1FdRhEZLbwbmhQse3FZqdBfw3yjEYhS-J0vLvP6bpe_vDXuzEB7Z-a6ehDI0/s1600/Back-To-Top.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4GshWGMtHd-2pk0x3sL4Apqmoud6fIwfe8VL4Xd6NSawp_6umlpQFexX-stD7tWvEQB5hDadYaR4fm5n1FdRhEZLbwbmhQse3FZqdBfw3yjEYhS-J0vLvP6bpe_vDXuzEB7Z-a6ehDI0/s1600/Back-To-Top.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4GshWGMtHd-2pk0x3sL4Apqmoud6fIwfe8VL4Xd6NSawp_6umlpQFexX-stD7tWvEQB5hDadYaR4fm5n1FdRhEZLbwbmhQse3FZqdBfw3yjEYhS-J0vLvP6bpe_vDXuzEB7Z-a6ehDI0/s1600/Back-To-Top.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-jPVQ3wdtbgP_Y0ttoO1cUnkhssat8TVsAUhGnqD51i3EWXjrmLFueSl6P46xd7QKg2072samQVEf64idfj3adiwJOFdOZHW_pDTcJVIw918zgv8H33JG2uAriutG0PgTDXzhrzO5SX4/s1600/back-to-top-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-jPVQ3wdtbgP_Y0ttoO1cUnkhssat8TVsAUhGnqD51i3EWXjrmLFueSl6P46xd7QKg2072samQVEf64idfj3adiwJOFdOZHW_pDTcJVIw918zgv8H33JG2uAriutG0PgTDXzhrzO5SX4/s1600/back-to-top-button.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-jPVQ3wdtbgP_Y0ttoO1cUnkhssat8TVsAUhGnqD51i3EWXjrmLFueSl6P46xd7QKg2072samQVEf64idfj3adiwJOFdOZHW_pDTcJVIw918zgv8H33JG2uAriutG0PgTDXzhrzO5SX4/s1600/back-to-top-button.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9Mf14DbFeblERotJlWe4N32ky6coiO0E7iNIYqZ83iyKkgoACX2BL6nrCyASMXJ91Gs1WqRbeOxTZ0hY68JMUQpp8XpWaBEgumb6ZWs3u-cUYT-Wi7io-wVe3FIgZAu2oLl8nbzYsZ0/s1600/back-to-top-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9Mf14DbFeblERotJlWe4N32ky6coiO0E7iNIYqZ83iyKkgoACX2BL6nrCyASMXJ91Gs1WqRbeOxTZ0hY68JMUQpp8XpWaBEgumb6ZWs3u-cUYT-Wi7io-wVe3FIgZAu2oLl8nbzYsZ0/s1600/back-to-top-button.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9Mf14DbFeblERotJlWe4N32ky6coiO0E7iNIYqZ83iyKkgoACX2BL6nrCyASMXJ91Gs1WqRbeOxTZ0hY68JMUQpp8XpWaBEgumb6ZWs3u-cUYT-Wi7io-wVe3FIgZAu2oLl8nbzYsZ0/s1600/back-to-top-button.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVseKenf-VgPt-XG37tJoA0ny271b6tQsAPooBUEv57JbuIHEzgc3sCDpJl4jjaPMAdiCJ4CQcHw-zqm5eDp-hUcN8kyw06WBwiaMQNks1Jjad2_Ah9MW88JRZCr1hFN1C_fuBdZFmYoA/s1600/back-to-top-button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVseKenf-VgPt-XG37tJoA0ny271b6tQsAPooBUEv57JbuIHEzgc3sCDpJl4jjaPMAdiCJ4CQcHw-zqm5eDp-hUcN8kyw06WBwiaMQNks1Jjad2_Ah9MW88JRZCr1hFN1C_fuBdZFmYoA/s1600/back-to-top-button.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVseKenf-VgPt-XG37tJoA0ny271b6tQsAPooBUEv57JbuIHEzgc3sCDpJl4jjaPMAdiCJ4CQcHw-zqm5eDp-hUcN8kyw06WBwiaMQNks1Jjad2_Ah9MW88JRZCr1hFN1C_fuBdZFmYoA/s1600/back-to-top-button.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtM_OaZyHtuCOE8byxaxVrhgI6hkPUCpa4MkE9iihAl4hy6QVu3ppxVp4oS4EEsbPmMS8cAbF7WC91t1HrmDzk1JM6ENGCJkNkqty9zye18GbFTbsazxoUVsp0_Kri6Mrz-VniPDXMMNA/s1600/Back-To-Top.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtM_OaZyHtuCOE8byxaxVrhgI6hkPUCpa4MkE9iihAl4hy6QVu3ppxVp4oS4EEsbPmMS8cAbF7WC91t1HrmDzk1JM6ENGCJkNkqty9zye18GbFTbsazxoUVsp0_Kri6Mrz-VniPDXMMNA/s1600/Back-To-Top.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtM_OaZyHtuCOE8byxaxVrhgI6hkPUCpa4MkE9iihAl4hy6QVu3ppxVp4oS4EEsbPmMS8cAbF7WC91t1HrmDzk1JM6ENGCJkNkqty9zye18GbFTbsazxoUVsp0_Kri6Mrz-VniPDXMMNA/s1600/Back-To-Top.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y1fWQphQmpZYb632du1oBZ5CKV6wFahyphenhyphenAoHwHkdHr5OgunCl7FQNIk4dQvNkRowYNdGof7Lmy8fEjdEF3rCcS-WhwkkGF_hyphenhyphenj2UMMvCTXKucF5D0i0OSWffe3Bt4_qJytDwONT6VgmU/s1600/back+to+top.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y1fWQphQmpZYb632du1oBZ5CKV6wFahyphenhyphenAoHwHkdHr5OgunCl7FQNIk4dQvNkRowYNdGof7Lmy8fEjdEF3rCcS-WhwkkGF_hyphenhyphenj2UMMvCTXKucF5D0i0OSWffe3Bt4_qJytDwONT6VgmU/s1600/back+to+top.png%20" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y1fWQphQmpZYb632du1oBZ5CKV6wFahyphenhyphenAoHwHkdHr5OgunCl7FQNIk4dQvNkRowYNdGof7Lmy8fEjdEF3rCcS-WhwkkGF_hyphenhyphenj2UMMvCTXKucF5D0i0OSWffe3Bt4_qJytDwONT6VgmU/s1600/back+to+top.png </blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjRTX0DYTZF9KCcTSfZIrLFdAvjRjCczp3fbxMLwXLob8cHTjRdhuybeq1pjwXQKhsNkjRylgdzdw6YQtEVDV0wsk2Ee2lklKDrXGi9lNMovEzYGQVoKF529iFwGz8zaXi5BvJ4Jln9w/s1600/back+to+top+button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjRTX0DYTZF9KCcTSfZIrLFdAvjRjCczp3fbxMLwXLob8cHTjRdhuybeq1pjwXQKhsNkjRylgdzdw6YQtEVDV0wsk2Ee2lklKDrXGi9lNMovEzYGQVoKF529iFwGz8zaXi5BvJ4Jln9w/s1600/back+to+top+button.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjRTX0DYTZF9KCcTSfZIrLFdAvjRjCczp3fbxMLwXLob8cHTjRdhuybeq1pjwXQKhsNkjRylgdzdw6YQtEVDV0wsk2Ee2lklKDrXGi9lNMovEzYGQVoKF529iFwGz8zaXi5BvJ4Jln9w/s1600/back+to+top+button.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zhMNvlu4sgSwij4QgeKoHpwLmj9f11iSDrpu5cXwpS8QYbOGpMBMiJYyXhQPzA0m_RhIMDrNrJQeA9O_P05Y2ov6plSN-KTEKlQkNvsH0lBGIVVAQDyPLq-g4xLD5Vya1A1tiZLtNiQ/s1600/back+to+top+button.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zhMNvlu4sgSwij4QgeKoHpwLmj9f11iSDrpu5cXwpS8QYbOGpMBMiJYyXhQPzA0m_RhIMDrNrJQeA9O_P05Y2ov6plSN-KTEKlQkNvsH0lBGIVVAQDyPLq-g4xLD5Vya1A1tiZLtNiQ/s1600/back+to+top+button.gif%20" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zhMNvlu4sgSwij4QgeKoHpwLmj9f11iSDrpu5cXwpS8QYbOGpMBMiJYyXhQPzA0m_RhIMDrNrJQeA9O_P05Y2ov6plSN-KTEKlQkNvsH0lBGIVVAQDyPLq-g4xLD5Vya1A1tiZLtNiQ/s1600/back+to+top+button.gif </blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuDfuDgb_b7ZwB6rvvYt-6mWvypId0W1a-CixmUuxcoYaTDwM3dFYFGvP-CKLKb3RAThyXy8eyqglXsfD_qCYzkBuZMWzxpMI0OZE7kVuzAwlnILweCWz1bxCrfgpk3OBC3q9WbO0bFc/s1600/back+to+top+button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuDfuDgb_b7ZwB6rvvYt-6mWvypId0W1a-CixmUuxcoYaTDwM3dFYFGvP-CKLKb3RAThyXy8eyqglXsfD_qCYzkBuZMWzxpMI0OZE7kVuzAwlnILweCWz1bxCrfgpk3OBC3q9WbO0bFc/s1600/back+to+top+button.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGuDfuDgb_b7ZwB6rvvYt-6mWvypId0W1a-CixmUuxcoYaTDwM3dFYFGvP-CKLKb3RAThyXy8eyqglXsfD_qCYzkBuZMWzxpMI0OZE7kVuzAwlnILweCWz1bxCrfgpk3OBC3q9WbO0bFc/s1600/back+to+top+button.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbtsPWmPgm6pbHEJfV9jQevinmC95PL-jE0l0SgHYFwXlVKLkJCyUUZN6OnzV_5qTqQ9gplOuBLq_G9q6Pvbrv3toWG32Sf7q-yYHXJBhiF93tZ5Q8KAj2dNihcKAa7uWPnDPVThzrytQ/s1600/back+to+top+button.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbtsPWmPgm6pbHEJfV9jQevinmC95PL-jE0l0SgHYFwXlVKLkJCyUUZN6OnzV_5qTqQ9gplOuBLq_G9q6Pvbrv3toWG32Sf7q-yYHXJBhiF93tZ5Q8KAj2dNihcKAa7uWPnDPVThzrytQ/s1600/back+to+top+button.gif" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbtsPWmPgm6pbHEJfV9jQevinmC95PL-jE0l0SgHYFwXlVKLkJCyUUZN6OnzV_5qTqQ9gplOuBLq_G9q6Pvbrv3toWG32Sf7q-yYHXJBhiF93tZ5Q8KAj2dNihcKAa7uWPnDPVThzrytQ/s1600/back+to+top+button.gif </blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh081jJjwWM8l_92grkvIJt7U_6Fl7_n8Qf9eCoPTjgPDDGaXdRlDHiQbAp_cntaGeUkum5VocPZu1WFGgnHc7IAfo9Wd20etZ7CMxpLxbNRlnzhNJq13JQKQprJfurb8sTCng04B3gcI/s1600/back+to+top.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh081jJjwWM8l_92grkvIJt7U_6Fl7_n8Qf9eCoPTjgPDDGaXdRlDHiQbAp_cntaGeUkum5VocPZu1WFGgnHc7IAfo9Wd20etZ7CMxpLxbNRlnzhNJq13JQKQprJfurb8sTCng04B3gcI/s1600/back+to+top.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh081jJjwWM8l_92grkvIJt7U_6Fl7_n8Qf9eCoPTjgPDDGaXdRlDHiQbAp_cntaGeUkum5VocPZu1WFGgnHc7IAfo9Wd20etZ7CMxpLxbNRlnzhNJq13JQKQprJfurb8sTCng04B3gcI/s1600/back+to+top.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0Nd9lXFSaekmCc2FHIbvOnvg-oIpz7TuXgG2bt56K8AF05sPh1Zzy40JbYaRX6mb8e8q1v9ugVS7rfHt13Ua5nGSpQxrtrxjgSOlg1XalRS2q9bpvOTN7qQ7es5m11qWM6uYWBu_nwI/s1600/back+to+top.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0Nd9lXFSaekmCc2FHIbvOnvg-oIpz7TuXgG2bt56K8AF05sPh1Zzy40JbYaRX6mb8e8q1v9ugVS7rfHt13Ua5nGSpQxrtrxjgSOlg1XalRS2q9bpvOTN7qQ7es5m11qWM6uYWBu_nwI/s1600/back+to+top.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0Nd9lXFSaekmCc2FHIbvOnvg-oIpz7TuXgG2bt56K8AF05sPh1Zzy40JbYaRX6mb8e8q1v9ugVS7rfHt13Ua5nGSpQxrtrxjgSOlg1XalRS2q9bpvOTN7qQ7es5m11qWM6uYWBu_nwI/s1600/back+to+top.png</blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2wLkR_TMa27HP80eMu4EvpfwoBOkLY0-IHNU-3rc-yZVEfLT-MJ4PkoLaek5u3jCJzwf4n8pv75IFW8Ww3kEUET50ZVsi4FWc5IqRhk0MD72KjuWEB6_remf1yEwJiqtTVAHQ4yyrqw/s1600/back+to+top.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2wLkR_TMa27HP80eMu4EvpfwoBOkLY0-IHNU-3rc-yZVEfLT-MJ4PkoLaek5u3jCJzwf4n8pv75IFW8Ww3kEUET50ZVsi4FWc5IqRhk0MD72KjuWEB6_remf1yEwJiqtTVAHQ4yyrqw/s1600/back+to+top.png%20" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2wLkR_TMa27HP80eMu4EvpfwoBOkLY0-IHNU-3rc-yZVEfLT-MJ4PkoLaek5u3jCJzwf4n8pv75IFW8Ww3kEUET50ZVsi4FWc5IqRhk0MD72KjuWEB6_remf1yEwJiqtTVAHQ4yyrqw/s1600/back+to+top.png </blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTn1U-li265rjRnOuK6C_dT8lbeRbW59JA2sfrwQdlI6CUY8d5YSR383BkVnCzqYAQyVPeX7E71M9U7aDGPYUG7KbZtey8D8mgWzUgZVHFB9woTRS5qhiozZ3nBq9t3vlwGoVILE1n79w/s1600/back+to+top.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTn1U-li265rjRnOuK6C_dT8lbeRbW59JA2sfrwQdlI6CUY8d5YSR383BkVnCzqYAQyVPeX7E71M9U7aDGPYUG7KbZtey8D8mgWzUgZVHFB9woTRS5qhiozZ3nBq9t3vlwGoVILE1n79w/s1600/back+to+top.png" /></a></div>
<blockquote>
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTn1U-li265rjRnOuK6C_dT8lbeRbW59JA2sfrwQdlI6CUY8d5YSR383BkVnCzqYAQyVPeX7E71M9U7aDGPYUG7KbZtey8D8mgWzUgZVHFB9woTRS5qhiozZ3nBq9t3vlwGoVILE1n79w/s1600/back+to+top.png</blockquote>
<br />
Demikian cara Memasang Widget Tombol Back to Top di Blogger, semoga bisa membantu Anda.Thanks<br />
<span style="background-color: #a2c4c9;"><span style="font-size: xx-small;">Referensi : http://www.contohblog.com/2015/11/memasang-tombol-back-to-top-seo-blogger.html</span></span>Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com1tag:blogger.com,1999:blog-2053743687906782870.post-25304997225442538182016-03-10T07:12:00.002+08:002016-03-10T07:15:53.874+08:00Chrome memiliki game lucu Easter Egg ketika internet Anda Error<div align="justify"><span class="unik">A</span></div>pakah Anda tahu Google ketika Tidak dapat terhubung ke halaman internet telah tertanam permainan di dalamnya? Mari kita lihat bagaimana memainkannya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTK6T_9NzMEj3TqmhJv9RkwrRopyvSaqQZZG27PwFadXruc1qQ7p76hp7eRzPodu9UW2Kx2uJIhFnJv-1-B-ANxYDpVrKFbue6EdLBp5U-MZASna0W4nXafP1wKao6hiRVy1IBcZnoNc6L/s1600/chrome-unable-to-connect-644x373.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Chrome memiliki game lucu Easter Egg ketika internet Anda Error" border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTK6T_9NzMEj3TqmhJv9RkwrRopyvSaqQZZG27PwFadXruc1qQ7p76hp7eRzPodu9UW2Kx2uJIhFnJv-1-B-ANxYDpVrKFbue6EdLBp5U-MZASna0W4nXafP1wKao6hiRVy1IBcZnoNc6L/s400/chrome-unable-to-connect-644x373.jpg" title="Chrome memiliki game lucu Easter Egg ketika internet Anda Error" width="400" /></a></div><br />
Ketika Anda mencoba untuk me-load halaman tertentu koneksi Internet anda Unable to connect to the Internet, Chrome menampilkan kesalahan jaringan mengatakan tidak dapat menampilkan halaman web yang telah Anda minta.<br />
<br />
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Video game lucu Easter Egg di Chrome</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;"><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/Y_-4MNj7I-Y?feature=player_embedded" width="400"></iframe><br />
</div></div></div><br />
Kemudian Chrome Menampilkan dinosaurus kecil lucu pada halaman error? Dia akan bangun dan mulai berjalan ketika anda menekan spasi. Terus menekan spasi untuk membantunya membersihkan rintangan - kumpulan kaktus dihadapannya. <br />
<br />
Anda bahkan akan mendapatkan poin untuk itu. Seperti yang diharapkan, akan ada dinosaurus terbang untuk dimainkan setelah Anda melewati 450 poin, dan akan menjadi "game over" ketika Anda crash.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggo9I_4HweagxF6VMA8uBPSYb2ZCGDFZwpffHopy6ksnlHDwkKu5QpN6TR0AljjGugfQqDEfTLdw-fQG8Ish19eh2ZG0S9iJYpjLVoLPswJ_YezYSvC-lJJiEXbitslXQrI9WfpZO_SA8p/s1600/untitled1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Chrome memiliki game lucu Easter Egg ketika internet Anda Error" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggo9I_4HweagxF6VMA8uBPSYb2ZCGDFZwpffHopy6ksnlHDwkKu5QpN6TR0AljjGugfQqDEfTLdw-fQG8Ish19eh2ZG0S9iJYpjLVoLPswJ_YezYSvC-lJJiEXbitslXQrI9WfpZO_SA8p/s400/untitled1.jpg" title="Chrome memiliki game lucu Easter Egg ketika internet Anda Error" width="400" /></a></div><br />
<br />
Ini pasti telur Paskah menyenangkan dari Google. Ayo, putuskan Internet dan mencobanya. Anda bahkan dapat bermain game di Android dengan menekan layar bukannya menekan spasi.<br />
<br />
<i><span style="font-size: x-small;"><span style="background-color: #ffe599;">Sumber info : http://www.makeuseof.com/tag/chrome-has-a-fun-easter-egg-when-your-internet-is-broken/</span></span></i>Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-38468534891968232632016-03-09T19:52:00.000+08:002016-03-10T13:34:15.894+08:00Tutorial Blog | Pasang Huruf Besar Di Awal Postingan <div align="justify">
<span class="unik">B</span></div>
agi Anda yang ingin memperindah tampilan Blog dan membuat Blog Anda selalu tampil beda di depan pengunjung. Anda bisa memasang Huruf Besar Di Awal Postingan seperti yang ada di blog BTB ini. Caranya juga cukup mudah, Anda tinggal ikuti tutorial di bawah ini dan setelah itu Blog Anda pasti akan tampil unik dan menarik.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELnkPBgEl4Eamv4CjSvMjINENrKmPoNxYNDw5dN4yqartl-MhsSWQYmRG4X78CKoMg8hwjlduA0-V83grqPdX_DVGsC2tkpf2giG3_hfJHRSHnPHgCEPHssvqd5aiXHnWrXaj0_8oa9B9/s1600/untitled.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial Blog | Pasang Huruf Besar Di Awal Postingan " border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELnkPBgEl4Eamv4CjSvMjINENrKmPoNxYNDw5dN4yqartl-MhsSWQYmRG4X78CKoMg8hwjlduA0-V83grqPdX_DVGsC2tkpf2giG3_hfJHRSHnPHgCEPHssvqd5aiXHnWrXaj0_8oa9B9/s400/untitled.JPG" title="Tutorial Blog | Pasang Huruf Besar Di Awal Postingan " width="400" /></a></div>
<span style="background-color: black;"><span style="color: white;">Tutorial Blog | Pasang Huruf Besar Di Awal Postingan </span></span><br />
<br />
1). Login ke akun Blogger<br />
<br />
2). Pilih Template >> Edit HTML<br />
<br />
3). Cari dan temukan kode ini <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
4). Copy dan paste kode di bawah ini sebelum kode <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
<blockquote>
/* kode membuat posting unik<br />
----------------------------------------------- */<br />
.unik {<br />
float:left;<br />
color: #913CE6;<br />
background:#ffffff;<br />
line-height:80px;<br />
padding-top:1px;<br />
padding-right:5px;<br />
font-family:times;<br />
font-size:<span style="background-color: #ffe599;">100px</span>;<br />
}</blockquote>
<br />
<br />
<span style="background-color: black;"><span style="color: white;">Note :</span></span><br />
font-size:<span style="background-color: #ffe599;">100px</span> = ukuran tinggi huruf bisa diganti sesuai selera Anda<br />
<br />
5). Save Template Anda.<br />
<br />
6). Untuk menerapkan di artikel postingan Anda harus menulis lewat Menu Edit HTML, bukan dari Menu Compose dan dalam postingan yang dibuat masukan kode di bawah ini :<br />
<br />
<blockquote>
<p align="justify"><span class="unik" ><span style="background-color: #ffe599;">masukan huruf awal</span></span></p></blockquote>
<br />
<span style="color: white;"><span style="background-color: black;">Note:</span></span><br />
Pada tulisan “<span style="background-color: #ffe599;">masukan huruf awal</span>”, masukan huruf awal yang ingin diperbesar.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-77792192404409232452016-03-09T17:13:00.000+08:002016-03-09T18:39:16.844+08:00Tutorial Blog | Memasang Gambar di Sudut Blog <div align="justify"><span class="unik">T</span></div>utorial ini berfungsi untuk menghias dan mempercantik tampilan Blog Anda. Selain gambar, Anda juga menggunakan tutorial ini untuk menampilkan icon Yahoo messenger, teks atau menampilkan widget lain di pojok Blog Anda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.subaru-bali.web.id/2016/02/Subaru-XV-Orange.html" target="_blank"><img alt="Tutorial Blog | Memasang Gambar di Sudut Blog " border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUIhGXBbP7VYo7NNugof50U_yApaqLL8v4kOgeHAiSDG-XtvT24V068Yemoi0BDls-obYiu5hyS_rb2Y-zYLDP5-j7MK8BlTQFowm5Afw3ID9NThbzo21yPB0aTGryxE-FiBTBrZHeYYX/s320/Memasang+Gambar+di+Sudut+Blog.jpg" title="Tutorial Blog | Memasang Gambar di Sudut Blog " width="320" /></a></div><br />
<span style="background-color: black;"><span style="color: white;">Anda tertarik? Silakan ikuti tutorial di bawah ini :</span></span><br />
<br />
1. Login ke Blogger >> Template >> Edit HTML<br />
2. Selanjutnya Tambahkan kode dibawah ini sebelum kode <span style="background-color: #ffe599;">]]></b:skin></span>.<br />
<br />
<blockquote>#anima_sudut {<br />
position:fixed;_position:relative;<span style="background-color: #9fc5e8;">bottom</span>:0px; <span style="background-color: #9fc5e8;">left</span>:0px;<br />
clip:inherit;<br />
_top:expression(document.documentElement.scrollTop+<br />
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }</blockquote><br />
<span style="background-color: black;"><span style="color: white;">Note :</span></span><br />
Ganti kode yang berwarna <span style="background-color: #9fc5e8;">biru</span> dengan posisi gambar yang Anda inginkan (ex : top=atas, bottom=bawah, right=kanan, left=kiri).<br />
<br />
3. Tambahkan kode di bawah ini tepat Sebelum kode <span style="background-color: #ffd966;"></body></span>.<br />
<br />
<blockquote><div id='anima_sudut'><br />
<a href='<span style="background-color: #9fc5e8;">http://berbagitipsblogger.blogspot.com/</span>'><br />
<img alt='' border='0' src='<span style="background-color: #b6d7a8;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUIhGXBbP7VYo7NNugof50U_yApaqLL8v4kOgeHAiSDG-XtvT24V068Yemoi0BDls-obYiu5hyS_rb2Y-zYLDP5-j7MK8BlTQFowm5Afw3ID9NThbzo21yPB0aTGryxE-FiBTBrZHeYYX/s320/Memasang+Gambar+di+Sudut+Blog.jpg</span>'/></a><br />
</div></blockquote><br />
<span style="background-color: black;"><span style="color: white;">Note:</span></span><br />
Ganti kode yang berwarna <span style="background-color: #9fc5e8;">biru</span> dengan alamat link yang Anda inginkan dan yang berwarna <span style="background-color: #b6d7a8;">hijau</span> dengan alamat link gambar Anda.<br />
<br />
4. Simpan Template an selesai.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-10065865313438418342016-03-09T13:59:00.002+08:002016-03-09T14:14:53.524+08:00Tombol Social Share dengan Font Awesome di bawah PostinganCara membuat Tombol Social Share dengan Font Awesome ini saya dapat dari hasil blogwalking ke Blog ContohBlog.com. Tombol Social Share merupakan suatu keharusan untuk sebuah Blog. Karena Social media adalah salah satu media yang dapat dengan cepat bisa meningkatkan traffic sebuah blog/website.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtMm49A-xrPVnQQA0hSDbXxnn1J5FkpJWUacTJSkvmhEVac-VmtXX0Rw_7HmCgqSPthhCPSLaauASOtmjelIC7r7RXPniRh2p3N-CKqdrfCnyb8K-xctb8dpjlsIZxvymHYjCjprdNmft/s1600/social.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tombol Social Share dengan Font Awesome di bawah Postingan" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtMm49A-xrPVnQQA0hSDbXxnn1J5FkpJWUacTJSkvmhEVac-VmtXX0Rw_7HmCgqSPthhCPSLaauASOtmjelIC7r7RXPniRh2p3N-CKqdrfCnyb8K-xctb8dpjlsIZxvymHYjCjprdNmft/s400/social.JPG" title="Tombol Social Share dengan Font Awesome di bawah Postingan" width="400" /></a></div>
<br />
Tombol Social Share dengan Font Awesome ini cukup ringan untuk dibuka, karena tidak ada gambar yang diloading, semuanya berupa script dari web-nya Font Awesome yang dipanggil, sehingga tidak akan membuat berat Blog Anda.<br />
<br />
<span style="background-color: black;"><span style="color: white;">Bagi Anda yang tertarik ingin memasangnya, silakan ikuti prosedur di bawah ini :</span></span><br />
<br />
1. Masuk ke Template >> Edit HTML<br />
2. Pasang dulu Kode pemanggil Font Awesome di Blog Anda (jika sudah ada lewati langkah ini). Copy dan paste Kode di bawah ini setelah Kode <span style="background-color: #ffe599;"><head></span><br />
<br />
<blockquote>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/></blockquote>
<br />
3. Salin kode CSS Social Share di bawah ini dan letakkan di atas kode <span style="background-color: #ffe599;">]]></b:skin></span> atau <span style="background-color: #ffe599;"></style></span><br />
<br />
<blockquote>
<br />
.share_posting {<br />
overflow: hidden;<br />
margin-top: 20px;<br />
padding: 2px 0;<br />
border-top: 1px solid #eee;<br />
}<br />
.share_posting h3 {<br />
font-weight: 700;<br />
text-transform: uppercase;<br />
font-size: 13px;<br />
color: #757575;<br />
float: left;<br />
display: inline-block;<br />
padding-top: 1px;<br />
}<br />
.share_posting li {<br />
display: inline-block;<br />
float: left;<br />
padding-left: 10px;<br />
}<br />
.share_posting li a {<br />
color: #757575;<br />
font-size: 13px;<br />
text-decoration: none;<br />
}<br />
.share_posting li a:hover {<br />
text-decoration: underline;<br />
}<br />
.share_posting li a:active {<br />
color: #3775DD;<br />
}</blockquote>
<br />
4. Salin kode di bawah ini dan letakkan setelah Kode <span style="background-color: #ffe599;"><data:post.body/></span>. Kode <data:post.body/>. biasanya ada lebih dari satu, silakan Anda coba satu persatu sampai ketemu yang cocok.<br />
<br />
<blockquote>
<div class='share_posting'><br />
<h3>Share This:</h3><br />
<br />
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> Facebook</a></li><br />
<br />
<li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> Twitter</a></li><br />
<br />
<li><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/> Google Plus</a></li><br />
<br />
<li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/> Pinterest</a></li><br />
<br />
<li><a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/> Linkedin</a></li><br />
<br />
</div><br />
<br /></blockquote>
<br />
5. Simpan template Blog Anda. Sekarang Tombol Social Share dengan Font Awesome di bawah Postingan sudah ada di Blog Anda.<br />
Contohnya bisa Anda lihat di Blog <a href="http://berbagitipsblogger.blogspot.co.id/" target="_blank">BTB</a> ini. Thanx.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-66226920171395949272016-03-09T10:25:00.002+08:002016-03-09T10:44:26.107+08:00Mengganti tulisan Older Post, Home dan New Post dengan gambar atau ikon Ini adalah tutorial untuk mempercantik tampilan Blog Anda, tulisan Older Post, Home dan New Post dapat Anda ganti sesuka hati dengan icon atau gambar pilihan Anda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTOHyitw7Pevv0tX3xlpMLvc3-6by9MRadPIJv4AeeBxenIiFwkdq7pB_FJ-J1aTqh-2erpbkym6HDfAP7CxwepF_T9BzGzGG95WH5dv2HOdnCG7A6hFTWrEdxfSYWr5egCHwR4rc_F25/s1600/untitled.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengganti tulisan Older Post, Home dan New Post dengan gambar atau ikon" border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTOHyitw7Pevv0tX3xlpMLvc3-6by9MRadPIJv4AeeBxenIiFwkdq7pB_FJ-J1aTqh-2erpbkym6HDfAP7CxwepF_T9BzGzGG95WH5dv2HOdnCG7A6hFTWrEdxfSYWr5egCHwR4rc_F25/s400/untitled.JPG" title="Mengganti tulisan Older Post, Home dan New Post dengan gambar atau ikon" width="400" /></a></div>
<br />
<span style="background-color: black;"><span style="color: white;">Ingin menerapkan tutorial ini di Blog Anda?. Silakan ikuti petunjuk di bawah ini.</span></span><br />
<br />
1). Masuk ke Blogspot, tentunya dengan akun yang Anda punya.<br />
<br />
2). Setelah masuk di Dashbord, pilih Template >> Edit HTML, jangan lupa backup dulu Template Anda.<br />
<br />
3). Untuk mengganti Tulisan New Post, cari dan temukan kode di bawah ini :<br />
<br />
<blockquote>
<b:if cond='data:newerPageUrl'><br />
<span id='blog-pager-newer-link'><br />
<a class = 'blog-pager-newer-link' expr: href = 'data: newerPageUrl'<br />
expr: id = 'data: widget.instanceId + "_blog-pager-newer-link"'<br />
expr: title = 'data: newerPageTitle'> <span style="background-color: #ffe599;"><data:newerPageTitle/></span> </ a><br />
</ span><br />
</ b: if></blockquote>
<br />
4). Ganti tulisan yang saya tandai dengan warna kuning, yakni : <span style="background-color: #ffe599;"><data:newerPageTitle/></span> dengan kode di bawah ini :<br />
<br />
<blockquote>
<img src="http://i1016.photobucket.com/albums/af281/wayanarmana/back-icon.png"/></blockquote>
<br />
5). Untuk mengganti Tulisan Older Post, cari dan temukan kode di bawah ini :<br />
<br />
<blockquote>
<b:if cond='data:olderPageUrl'><br />
<span id='blog-pager-older-link'><br />
<a class = 'blog-pager-older-link' expr: href = 'data: olderPageUrl'<br />
expr: id = 'data: widget.instanceId + "_blog-pager-older-link"'<br />
expr: title = 'data: olderPageTitle'> <span style="background-color: #ffe599;"><data:olderPageTitle/></span> </ a><br />
</ span><br />
</ b: if></blockquote>
<br />
6). Ganti tulisan yang saya tandai dengan warna kuning, yakni : <span style="background-color: #ffe599;"><data:olderPageTitle/></span> dengan kode di bawah ini :<br />
<br />
<blockquote>
<img src="http://i1016.photobucket.com/albums/af281/wayanarmana/kanan.png"/></blockquote>
<br />
7). Untuk mengganti tulisan Home, cari dan temukan kode di bawah ini:<br />
<br />
<blockquote>
<b:if cond='data:blog.homepageUrl != data:blog.url'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'> <span style="background-color: #ffe599;"><data:homeMsg/></span> </ a><br />
<b:else/><br />
<b:if cond='data:newerPageUrl'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'> <span style="background-color: #ffe599;"><data:homeMsg/></span> </ a><br />
</ b: if><br />
</ b: if></blockquote>
<br />
8). Ganti tulisan yang saya tandai dengan warna kuning, yakni : <span style="background-color: #ffe599;"><data:homeMsg/></span> dengan kode di bawah ini :<br />
<br />
<blockquote>
<img src="http://i1016.photobucket.com/albums/af281/wayanarmana/home-icon.png"/></blockquote>
<br />
9). Simpan Template Anda. Contoh penerapan-nya bisa dilihat di Blog <a href="http://softwarebali.blogspot.co.id/" target="_blank">http://softwarebali.blogspot.co.id/ </a><br />
Thanx, selamat mencoba.Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0tag:blogger.com,1999:blog-2053743687906782870.post-28820038417972882082016-03-08T21:18:00.002+08:002016-03-08T21:35:45.596+08:00Memasang Headline news Dengan JQuery di BloggerHeadline news sebenarnya hampir mirip dengan Recent Post (Artikel terbaru}, namun Headline news lebih hemat tempat dan bisa dipasang secara Horizontal Slide atau drop down. Headline news di kalangan Blgger dipasang di Blog mereka untuk meningkatan pageview Blog.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilhWk9PQC6Ky7Q8H_EFRrNAHf91SJUMCD5c0KDraqBeY-ggbTYrJZfVw84Sc9og_YsuPNaAABfvsrvWC7Pq1n_V3UhFyugdv9F68I4gC1x2CnuBEsyEZ3fBS6BZNoJotUY1HX-FU0_wmrb/s1600/Headlines+News.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Headline news Dengan JQuery di Blogger" border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilhWk9PQC6Ky7Q8H_EFRrNAHf91SJUMCD5c0KDraqBeY-ggbTYrJZfVw84Sc9og_YsuPNaAABfvsrvWC7Pq1n_V3UhFyugdv9F68I4gC1x2CnuBEsyEZ3fBS6BZNoJotUY1HX-FU0_wmrb/s320/Headlines+News.jpg" title="Memasang Headline news Dengan JQuery di Blogger" width="320" /></a></div>
<br />
<span style="background-color: black;"><span style="color: white;">Jika Anda tertarik, silakan ikuti cara pemasangannya di bawah ini :</span></span><br />
1. Login ke Blogger.<br />
2. Masuk ke Rancangan.<br />
3. Kemudian pilih Edit HTML.<br />
3. Cari kode ]<span style="background-color: #ffe599;">]></b:skin></span><br />
4. Masukkan Kode di bawah ini, sebelum Kode <span style="background-color: #ffe599;">]]></b:skin></span><br />
<br />
<blockquote class="tr_bq">
/* News Sticker<br />
---------------------------------------------*/<br />
.newspic {background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHouH09nAu5Go-cPdeHPoUk0Ecano2mabycZkt-JA1SF7TZqDVF67wJekmTJ5RQdDzprBhkmCOYsVC3-DwsrheUKn76_7p4hYfjP5FKE0Osc54k0qpJY758X-8aTUZr4ZE35Uo7bCaUK0/s1600/headline_news.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:<span style="background-color: #ffe599;">960</span>px;margin:0 auto;padding:0 auto;height:23px;color:#000;}<br />
.news {width: <span style="background-color: #ffe599;">960</span>px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}<br />
.news a:link, .news a:visited{color:#000;text-decoration:none;}<br />
.news a:hover {color:#0099cc;text-decoration:underline;}</blockquote>
<br />
5. Selanjutnya letakkan kode di bawah ini tepat sebelum kode <span style="background-color: #ffe599;"></head></span><br />
<br />
<blockquote>
<!-- News sticker --><br />
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};<br />
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};<br />
//]]><br />
</script><br />
<style type='text/css'><br />
.titlefield{ /*CSS for RSS title link in general*/<br />
text-decoration: none;}<br />
.labelfield{ /*CSS for label field in general*/<br />
color:#0099cc;font-size: 100%;}<br />
.datefield{ /*CSS for date field in general*/<br />
color:#aaa;font:normal 12px courier;text-transform:none;}<br />
#example1{ /*Demo 1 main container*/<br />
width: <span style="background-color: #ffe599;">960</span>px;<br />
height: 13px;<br />
border: 0px solid #cdcdcd;<br />
padding: 0px;<br />
font:bold 13px courier;<br />
text-transform:none;<br />
text-align:left;<br />
background-color:transparent;}<br />
code{ /*CSS for insructions*/<br />
color: #0099CC;}<br />
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}<br />
#example1 a:hover {color:#111;text-decoration:none;}<br />
</style></blockquote>
<br />
6.Untuk meletakkan headline news di bawah header seperti Blog ini, cari kode <span style="background-color: #ffe599;"><div id='content-wrapper'></span> kemudian letakkan kode berikut di atas kode <span style="background-color: #ffe599;"><div id='content-wrapper'></span>:<br />
<br />
<blockquote>
<div style='clear:both;'/><br />
<div class='newspic'><br />
<div style='float:left;width:<span style="background-color: #ffe599;">960</span>px;padding:6px 0 6px <span style="background-color: #ffe599;">125</span>px; position:relative; overflow:hidden;'><br />
<script type='text/javascript'><br />
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)<br />
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;<span style="background-color: #ffe599;">http://Alamat URL Blog Anda</span>/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed<br />
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields<br />
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag<br />
cssfeed.filterfeed(<span style="background-color: #ffe599;">10</span>, &quot;date&quot;) //Show <span style="background-color: #ffe599;">10</span> entries, sort by date<br />
cssfeed.entries_per_page(1)<br />
cssfeed.init()<br />
</script><br />
</div><br />
<div style='clear:both;'/><br />
</div></blockquote>
<br />
<span style="background-color: black;"><span style="color: white;">Note:</span></span><br />
Kode <span style="background-color: #ffe599;">960</span>px = Panjang background gambar headline news, sesuaikan dengan lebar blog anda.<br />
Kode <span style="background-color: #ffe599;">125</span>px = Jarak judul artikel dari sebelah kiri gambar.<br />
Kode <span style="background-color: #ffe599;">10</span> = Jumlah entri judul artikel yang akan ditampilkan.<br />
<span style="background-color: #ffe599;">http://Alamat URL Blog Anda</span> = Ganti dengan Alamat URL Blog Anda<br />
<br />
7. Simpan Template Anda.Sekarang Headline news Dengan JQuery seharusnya sudah ada di Blog Anda. Thanx you<br />
<br />Anonymoushttp://www.blogger.com/profile/07681051855417560075noreply@blogger.com0