Showing posts with label Tips Blog. Show all posts
Showing posts with label Tips Blog. Show all posts

Tuesday, October 1, 2013

Cara Membuat Banner di Widget Blog

Banner Biasanya dipakai untuk pemasangan iklan yang berisikan Produk atas jasa dari Perusahaan tertentu. Berikut ini langkah-langkah untuk membuat banner.
1. Login/Masuk ke blog
2. Klik Rancangan pilih Edit HTML di blogger anda, kemudian cari kode ]]></b:skin> dan Copy kode CSS di bawah Paste kode CSS  diatas kode  ]]></b:skin>



Wednesday, September 11, 2013

Cara Mengcopy Artikel Pada Web Atau Blog Yang Tidak Bisa Diklik




Pada saat anda berselancar di internet, mungkin anda pernah menjumpai sebuah artikel yang tidak bisa diklik kanan mouse, karena pemilik website tersebut memasang sebuah script dari java script agar isi posting tidak dapat di copy dengan klik kanan mouse, memang sungguh sangat menjengkelkan, karena terkesan website tersebut terlalu menjaga agar postingnya tidak dapat di copy, sementara posting tersebut mungkin dibutuhkan untuk menyelesaikan tugas sekolah.

Tapi apapun yang mereka lakukan untuk memprotek posting mereka agar tidak dapat di copy, sebenarnya percuma dan sia-sia saja. Karena bagaimanapun juga tetap saja posting mereka dapat di copy dan disimpan di file pengunjung.

Ada beberapa cara untuk mengcopy website mereka antara lain :
Dengan menyimpan Website mereka ke file berbentuk HTML, caranya, pada browser klik menu file, Save Page As, maka website mereka dapat tersimpan beserta posting mereka di file komputer kita dan kita dapat membukannya secara off line.

Dengan cara menggunakan tombol Print Screen, kemudian di pastekan dengan menggunakan program adobe Photoshop atau Pain brush dan simpan dalam file berbentuk jpg/tif, kemudian dengan menggunakan fasiltas menu Recognize text using OCR, fungsinya untuk merubah gambar/foto menjadi teks.

Ini adalah cara yang paling mudah. Dengan cara mendisable atau menon aktifkan program java script, yang mencegah klik kanan dengan menggunakan sebuah addons mozilla firefox, nama program tersebut adalah RightToClick, silahkan Download Disini bila keluar pesan tidak dapat klik kanan, centrang kotak stop Klik kanan kemudian klik Ok, maka anda bisa menggunakan klik kanan mouse sepuasnya.

Tuesday, September 10, 2013

Cara Menambah Gadget di bawah Header

Selama ini mungkin kita hanya tahu bagaimana cara menambah Gadget di halaman bagian samping atau bagian bawah. Tapi bagaimana caranya kalau kita pingin menambah Gadget di bagian atas...?

Untuk mengetahuinya, silahkan ikuti langkah-langkah berikut ini :

1. Login ke blog anda
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari kode berikut ini di dalam template anda


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


6. Jika sudah ketemu, silahkan ganti semua kode tersebut dengan kode berikut ini


<b:section class='header' id='header' preferred='yes'>


7. Klik Simpan Template

8. Selesai

Wednesday, February 6, 2013

CARA MUDAH MEMBUAT DATAR ISI BLOG TANPA BACKLINK


Daftar Isi atau sitemap ini berfungsi sebagai alat navigasi dan pemetaan bagi pengunjung/visitor untuk melihat seluruh isi konten atau artikel blog/website dalam satu halaman khusus. Tentunya ini sangat menguntungkan pengunjung dan juga pemilik blog/website dalam usaha meningkatkan jumlah pageview.

Daftar Isi pada blog sama halnya dengan daftar isi yang sobat temui pada majalah, buku dan sejenisnya. Khusus untuk blog fungsinya sebagai susunan artikel berupa kumpulan tautan judul postingan yang terstruktur. List daftar isi pada blog dapat menampilkan perlabel, abjad dan lain-lain, sesuai setelan dan modikasi.




Untuk melihat tampilannya seperti apa, silahkan Anda lihat dulu demonya terlebih dahulu:




Bagaimana sobat, apakah anda berminat untuk memasang daftar isi ini di blog anda? Untuk memasang widget daftar isi di blog, anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini :

Berikut Langkah-Langkahnya:

1. Login ke akun blog Anda
2. Pilih laman => Laman baru => Laman kosong
3. Pilihlah penulisan mode HTML (Lihat gambar) kemudian copy script berikut dan pastekan di laman baru tadi.

<script src="https://googledrive.com/host/0B17Sm1R_7ImLRTJBUjV3RXpVWm8/" type="text/javascript"></script><script src="http://sen1budaya.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan:
Ganti tulisan warna merah di atas dengan url blog sobat.

4. Setelah itu silahkan isi judul dan kemudian pratinjau, jika sudah sesuai dengan keinginan. silahkan publikasikan.
5. Selesai, silahkan copy link URLnya ke menu navigasi sobat. selamat mencoba dan semoga sukses

Untuk yang belum terlalu mengerti atau ada yang ingin ditanyakan silahkan komentar saja diblog ini. Semoga postingan Tutorial ini bisa bermanfaat bagi teman-teman blogger semua.

Friday, January 11, 2013

Menambahkan Bismillah di Setiap Awal Postingan Blog


Anda tentunya tahu bukan keagungan Bismillah?

Membaca bismillah memang diperintahkan oleh Nabi Muhammad SAW ketika kita hendak memulai aktivitas yang baik. Sabda Nabi, "Segala sesuatu (aktivitas yang baik) yang tidak dimulai dengan bismillah, akan terputus (nilai keberkahannya)". (HR Al-Bukhari dan Muslim).

Dengan kata lain, kunci kebaikan dan pangkal keberkahan dalam meraih cita-cita mulia adalah membaca Bismillah.

Bismillah bukan sekadar bacaan pembuka, tetapi merupakan zikir hati yang dapat memancarkan cahaya keagungan Sang Pencipta.
 
Jadi segala sesuatu yang kita lakukan harus dimulai dengan Bismillah, termasuk saat memulai membuat postingan blog. Jika anda ingin setiap mengawali tulisan postingan blog sebelumnya dimulai dengan bismillah, seperti pada blog saya ini, ikuti langkah-langkah berikut untuk Menambahkan Bismillah di Setiap Awal Postingan Blog.

LANGKAH-LANGKAHNYA:
  • Silahkan masuk akun blogger anda
  • Masuk ke menu Template > Edit HTML
  • Cari kode <div class='post-body entry-content'> [Gunakan CTRL+F]
  • Letakkan kode di bawah ini tepat setelah kode <div class='post-body entry-content'>
<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><b><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></b></span></span></div>
Jika tidak ditemukan kode <div class='post-body entry-content'> anda dapat menyimpan kodenya di atas <data:post.body/>. Kode tersebut ada banyak, jadi anda harus mengetesnya satu persatu untuk mengetahui mana yang tepat dan berfungsi.
  • Scroll kebawah, nanti ada kode <data:post.body/>. Simpan kode dibawah ini tepat setelah kode <data:post.body/>
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-_nHGUjG1_t4/UWurZQ4tOqI/AAAAAAAABBM/V2NdOr0Iu-I/s1600/Alhamdulillah101111.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black;"><img border="0" src="http://2.bp.blogspot.com/-_nHGUjG1_t4/UWurZQ4tOqI/AAAAAAAABBM/V2NdOr0Iu-I/s1600/Alhamdulillah101111.jpg" /></span></a></div>
 
CATATAN:
 
Apabila kalimat bismillah juga muncul di home page/beranda, bagaimanakah cara menghilangkannya ? Caranya anda harus menyisipkan kede tambahan lagi.

  • Lihat kode di bawah : (yang harus ditambahkan adalah kode berwarna merah)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><b><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></b></span></span></div></b:if>


Jika jarak kalimat bismillah dengan isi postingan terlalu dekat, bagaimana mengatasinya?
  • Untuk mengatasi hal ini, anda harus menyisipkan kode <br/>
  • Contoh
<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><b><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></b></span></span></div><br/><br/></b:if>
  • Kode <br/> adalah kode enter (garis baru). Dua buah kode <br/> berarti berjarak dua garis dari kalimat basmalah di atas. 


    Semoga bermanfaat.

Tuesday, January 8, 2013

Upload File CSS, Javascript, HTML di Google Drive


Google terus melakukan perubahan guna kenyamanan pengguna serta peningkatan efektifitas sistem. Googlecode merupakan tempat untuk melakukan upload file dengan berbagai jenis seperti CSS, JS (Javascript) , HTML, jQuery, dan sebagainya. Namun ketika anda pergi ke Google Code sekarang, Menu download sudah tidak ada lagi sehingga fungsi untuk upload file ke browser pun hilang. Proyek-proyek yang telah dibangun sebelumnya tetap akan masih tersimpan dan dapat digunakan.



Anda bisa dengan mudah mengupload kode css, ataupun javascript pada web anda. Caranya adalah dengan memanfaatkan fasilitas Google Drive. Google Drive akan mempermudah kita dengan banyaknya Aplikasi yang disediakan oleh Google , mulai dari Pengolah kata , Pengolah angka , Formulir , Presentasi , Pemutar Lagu , Video , Pembuatan Contact Form + Upload File (Integrasi dengan JOTFORM) , terus Alat konversi File , dan masih banyak lagi.

Berikut panduan, Tutorial cara mengupload file css, javascript di Google Drive Hosting :
1. Go to Googledrive on your browser.
2. Lalu jika anda adalah pengguna baru silahkan Login lewat email Gmail anda dan Buatlah satu buah folder sebagai tempat untuk menyimpan proyek file file penting anda. Caranya click CREATE.
3. Setelah folder jadi, klik logo icon Upload berwarna merah seperti gambar ini


4. Pilih File.
5. Cari document anda yang akan diupload.
6. Tunggu hingga proses unggah selesai yang ditampilkan pada bagian kanan bawah layar desktop anda.
7. Klik SHARE.
8. Copy link yang disediakan, paste di notepad terlebih dahulu.
9. Pada bagian Privacy, klik CHANGE. Mengubah privacy bertujuan untuk bagaimana file tersebut dapat diakses, jika private berarti khusus diri sendiri dan tidak dapat diakses oleh browser ketika meminta file css, js yang terupload tadi.

10. Pilih Public, agar semua browser dan orang lain yang membuka web blog anda dapat menggunakan file css atau javascript code yang diupload.
11. Maka akses akan berubah dari Private ke Public.
12. Click Save and save your link to share.

Sekarang, untuk mengkoneksikan antara file yang ada di Googledrive dengan blog anda caranya adalah :
Perhatikan, link to share file tadi, contohnya seperti ini :

https://docs.google.com/file/d/0B5s9APyz09BWXFjeVptY1dnZzA/edit?usp=sharing

Kode berwarna merah, silahkan anda copy dan ambil dan letakkan pada kode berikut untuk memanggil file anda :

https://googledrive.com/host/MasukkanKodeFileDisini

Maka, hasilnya akan seperti :

https://googledrive.com/host/0B5s9APyz09BWXFjeVptY1dnZzA


Nah, sekarang struktur link tersebut sudah dapat digunakan untuk mengakses file kita dan coba buka URL diatas lalu lihat hasilnya , sama seperti ketika kalian menghosting File ke Yourjavascript atau googlecode kan ! Struktur URL itulah yang bisa berfungsi untuk diterapkan ke Blog kita , lalu dibagian ini kalian juga bisa meletakkan ekstensi .js .css .html .php atau yang lainnya tapi harus sesuai dengan Bahasa Pemrograman yang kalian Host.

9. Kemudian untuk penerapannya ke Blog atau website kita ngga ada perbedaan kok dengan saat menghosting File ke GoogleCode , yah kurang lebih kayak gini :


Untuk File CSS penulisannya seperti ini :

<link href='https://googledrive.com/host/0B9bAUAMahvVPV19JSk3tQnQ3MFU' rel='stylesheet'/>

Untuk File Javascript strukturnya seperti ini :

<script type="text/javascript" src="https://googledrive.com/host/0UPloadPyz09BWXFjeVptY1dnZzA/"></script>

10. Silahkan anda copy dan letakkan pada blog anda diatas kode </head>


Selamat mencoba...!!!



Wednesday, June 13, 2012

Cara Membuat Tulisan Berjalan di Blog

Kali ini kita akan belajar cara membuat teks berjalan, bagi yang belum tahu caranya silahkan disimak tulisan berikut. Tulisan atau teks berjalan atau running text biasa disebut marquee, karena untuk membuatnya dengan kode marquee. Tulisan ini bisa diisi dengan berita atau info-info penting yang update atau terbaru.
Kita akan membuat beberapa jenis marquee, agar banyak variasi yang bisa dipilih. Pertama-tama kita belajar membuat kodenya, lalu belajar cara memasang pada blog.

Kode dasar untuk membuat marquee atau teks berjalan adalah....
 <marquee>TULISAN YANG AKAN BERGERAK</marquee>
Kode di atas akan terlihat seperti ini:
  TULISAN YANG AKAN BERGERAK



Tapi selain kode di atas ada beberapa tambahan kode yang bisa anda berikan untuk membuat variasi dari marquee. Di bawah ini kita akan berikan kodenya dan sekaligus mempraktikkan marquee tersebut....

kode scrolldelay="angka" digunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000
Contoh kode marquee:
<marquee scrolldelay="500">RUNNING TEKS DELAY 0,5 DETIK</marquee>
Hasilnya akan terlihat seperti di bawah ini: RUNNING TEKS DELAY 0,5 DETIK



kode loop="angka|-1|infinite" digunakan untuk mengatur pengulangan atau repetisi dari marquee
Contoh:

<marquee loop="3">MARQUEE BEROTASI 3 KALI SAJA</marquee>
Hasilnya akan terlihat seperti di bawah ini:

MARQUEE BEROTASI 3 KALI SAJA

Keterangan: Setelah 3 kali teks akan hilang.



kode width="lebar" digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen dari bidang yang ada
Contoh kode:

<marquee width="50%">MARQUEE LEBAR 50 PERSEN</marquee>
Hasilnya akan terlihat seperti di bawah ini:
  MARQUEE LEBAR 50 PERSEN



kode bgcolor="warna" digunakan untuk memberikan warna latar pada marquee jika diperlukan
Contoh kode marquee:

<marquee bgcolor="red">RUNNING TEXT LATAR MERAH</marquee>
Hasilnya akan terlihat seperti di bawah ini:

  RUNNING TEXT LATAR MERAH



kode title="pesan" digunakan untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan
Contoh kode:

<marquee title="BISA TERBACA PESANNYA">TEKS BERJALAN DENGAN PESAN</marquee>
Hasilnya akan terlihat seperti di bawah ini:

TEKS BERJALAN DENGAN PESAN
Keterangan: Taruh kursor mouse pada jalur dan bukan pada teks untuk membaca pesan



kode scrollamount="angka" digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang
Contoh kode:

<marquee scrollamount="14">MARQUEE SPEED 14!!!</marquee>
Hasilnya akan terlihat seperti di bawah ini:

MARQUEE SPEED 14!!!



kode direction="left/right/up/down" digunakan untuk mengatur arah pergerakan running text
Contoh kode:

<marquee direction="right">MARQUEE BERGERAK KE KANAN</marquee>
Hasilnya akan terlihat seperti di bawah ini: MARQUEE BERGERAK KE KANAN



kode behavior="scroll/slide/alternate" digunakan untuk mengatur type pergerakan
Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari sisi lain
Slide jika ingin teks bergerak sekali kemudian berhenti dan diulangi lagi
Alternate jika ingin teks terlihat memantul/bouncing dari ujung kembali ke ujung.
Contoh kode:

<marquee behavior="alternate">MARQUEE BERGERAK BOLAK-BALIK</marquee>
Hasilnya akan terlihat seperti di bawah ini: MARQUEE BERGERAK BOLAK-BALIK



Sekarang kita akan coba membuat variasi dari kode di atas. Kita akan membuat teks ini bergerak turun dan oleh karena itu kita perlu menambah kode height untuk membuat ruang pergerakan teks;
Contoh kode:

<marquee direction="down" height="100">MARQUEE BERGERAK KE BAWAH</marquee>
Hasilnya seperti ini : MARQUEE BERGERAK KE BAWAH





Lalu bagaimana caranya membuat tulisan ini berhenti jika dilintasi kursor mouse?
Mudah, silahkan tambahkan kode

onmouseover="this.stop()" onmouseout="this.start()"
Contoh kodenya seperti berikut:
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">MARQUEE BERGERAK BOLAK-BALIK</marquee>
Tampilan akhir akan terlihat seperti berikut.  MARQUEE BERGERAK BOLAK-BALIK
Keterangan: Silahkan lintaskan kursor pada jalur ataupun teks untuk menghentikan pergerakan




Bisakah Marquee diberi link? 
Tentu saja, sebagai contoh lihat kode berikut:
<marquee direction="down" height="100" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href="http://trikmudahseo.blogspot.com/2012/09/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a>
</marquee> 
Tampilan akhir akan terlihat seperti berikut.
CARA MEMBUAT TULISAN BERJALAN (MARQUEE)

Itulah beberapa cara dan variasi untuk membuat teks berjalan. Semoga bermanfaat bagi anda semua. 
 
 


Lalu bagaimana cara memasang kode-kode ini?
Anda bisa memasang kode teks berjalan yang sudah dibuat pada dua tempat, yaitu widget dan artikel:
Untuk memasang pada widget silahkan ikuti langkah berikut:
  • Buka menu Tata Letak / Layout
  • Klik Tambah Gadget
  • Pilih gadget HTML/JAVASCRIPT
  • Masukkan kode yang sudah dibuat
  • Simpan perubahan pada gadget
Untuk memasang pada artikel ikuti langkah berikut:
  • Saat menulis artikel masuk ke mode HTML
  • masukkan kode HTML marquee saat berada di mode ini
  • Kembali ke mode Compose untuk melihat apakah posisi teks sudah benar
  • Klik PRATINJAU untuk melihat versi web aktif
  Cukup sampai di sini dan terimakasih.......  :)

Saturday, April 28, 2012

CARA MEMBUAT GALERRY FOTO DI BLOG

Tips blog kali ini adalah cara membuat gallery foto di blog. Gallery foto ini berguna buat unyuk menampilkan foto-foto dalam postingan dengan bentuk sejajar. Bagaimanakah bentuk visualnya ? Lihatlah contoh gambar di bawah ini, atau buka langsung Top Menu Fotografi yang ada di blog ini. Misalnya, Menu Fotografi > Eksperiment.



Tampilan Galerry Foto


 Cara membuat gallery foto :
  1. Upload foto ke hosting (picasaweb.google.com, atau photobucket, atau yang lainnya), kemudian dapatkan url foto yang telah diupload.
  2. Bikin postingan dalam mode HTML (bukan Compose).
  3. Masukkan kode di bawah ini pada postingan.
  4. Klik pratinjau untuk melihat hasilnya, jika sudah sesuai klik publikasikan.



<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Fotografi Eksperiment</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href="https://lh4.googleusercontent.com/-3A67-VQszW0/UgRHmv6hzWI/AAAAAAAABxs/sbge9EXBoRk/s640/IMG_1230aa%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://lh4.googleusercontent.com/-3A67-VQszW0/UgRHmv6hzWI/AAAAAAAABxs/sbge9EXBoRk/s640/IMG_1230aa%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh6.googleusercontent.com/-qe3aw9j3HlA/UgRHqE_xXaI/AAAAAAAABx0/oQHJ1NkmjDI/s640/IMG_1357a%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://lh6.googleusercontent.com/-qe3aw9j3HlA/UgRHqE_xXaI/AAAAAAAABx0/oQHJ1NkmjDI/s640/IMG_1357a%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh3.googleusercontent.com/-AT0uM22pwvg/UgRHuap5BeI/AAAAAAAABx8/WPmgk-igBn0/s640/IMG_1373%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://lh3.googleusercontent.com/-AT0uM22pwvg/UgRHuap5BeI/AAAAAAAABx8/WPmgk-igBn0/s640/IMG_1373%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh3.googleusercontent.com/-pP6BHmtc2dc/UgRHyXnZlSI/AAAAAAAAByE/fyGBCrhP6Zo/s640/IMG_1410%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://lh3.googleusercontent.com/-pP6BHmtc2dc/UgRHyXnZlSI/AAAAAAAAByE/fyGBCrhP6Zo/s640/IMG_1410%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh6.googleusercontent.com/-4zQyEJjG9BE/UgRH2n7rAxI/AAAAAAAAByM/0oCygpEy58c/s640/IMG_1415%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://lh6.googleusercontent.com/-4zQyEJjG9BE/UgRH2n7rAxI/AAAAAAAAByM/0oCygpEy58c/s640/IMG_1415%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh5.googleusercontent.com/-RnrgvlRmwP0/UgRH66Ch9QI/AAAAAAAAByU/hsH3vHAkZZU/s640/IMG_1420%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://lh5.googleusercontent.com/-RnrgvlRmwP0/UgRH66Ch9QI/AAAAAAAAByU/hsH3vHAkZZU/s640/IMG_1420%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh6.googleusercontent.com/-8AZVBkZ4DqI/UgRIBBiVTHI/AAAAAAAAByc/mq7WJxXISDw/s640/IMG_1422%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://lh6.googleusercontent.com/-8AZVBkZ4DqI/UgRIBBiVTHI/AAAAAAAAByc/mq7WJxXISDw/s640/IMG_1422%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh5.googleusercontent.com/-5Fst1N-sA4o/UgRIHxvNfbI/AAAAAAAAByk/zY5D3-StGcA/s640/IMG_1430%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://lh5.googleusercontent.com/-5Fst1N-sA4o/UgRIHxvNfbI/AAAAAAAAByk/zY5D3-StGcA/s640/IMG_1430%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh5.googleusercontent.com/-RXIPZ2faQoA/UgRILIo4j5I/AAAAAAAABys/f7zMzgw15-A/s640/IMG_1438%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://lh5.googleusercontent.com/-RXIPZ2faQoA/UgRILIo4j5I/AAAAAAAABys/f7zMzgw15-A/s640/IMG_1438%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh5.googleusercontent.com/-Q-0_QLrbgK8/UgRIPxKJclI/AAAAAAAABy0/EJE-_9edlYI/s640/IMG_1444%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://lh5.googleusercontent.com/-Q-0_QLrbgK8/UgRIPxKJclI/AAAAAAAABy0/EJE-_9edlYI/s640/IMG_1444%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="https://lh5.googleusercontent.com/-Qi8A_qFxFxQ/UgRIXIiYtuI/AAAAAAAABzE/1wl02pFWjzY/s640/IMG_3966%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://lh5.googleusercontent.com/-Qi8A_qFxFxQ/UgRIXIiYtuI/AAAAAAAABzE/1wl02pFWjzY/s640/IMG_3966%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh4.googleusercontent.com/-JAR9VZFmZSw/UgRIpzEQ0GI/AAAAAAAABzs/OGSZMt6yAiE/s640/IMG_5245%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://lh4.googleusercontent.com/-JAR9VZFmZSw/UgRIpzEQ0GI/AAAAAAAABzs/OGSZMt6yAiE/s640/IMG_5245%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh5.googleusercontent.com/-eT0gv-zjtsE/UgRIa1u9DAI/AAAAAAAABzM/23JGzS_tHjM/s640/IMG_4004%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://lh5.googleusercontent.com/-eT0gv-zjtsE/UgRIa1u9DAI/AAAAAAAABzM/23JGzS_tHjM/s640/IMG_4004%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh3.googleusercontent.com/-Nr0yTBOe8l0/UgRIeTOJCdI/AAAAAAAABzU/EU1BqB2JTr8/s640/IMG_4009%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://lh3.googleusercontent.com/-Nr0yTBOe8l0/UgRIeTOJCdI/AAAAAAAABzU/EU1BqB2JTr8/s640/IMG_4009%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh3.googleusercontent.com/-HVQBzEpZtjs/UgRIhc7xO9I/AAAAAAAABzc/TD-IDuVwjkE/s640/IMG_4010%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://lh3.googleusercontent.com/-HVQBzEpZtjs/UgRIhc7xO9I/AAAAAAAABzc/TD-IDuVwjkE/s640/IMG_4010%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh3.googleusercontent.com/-E-wKTt7Pm3Y/UgRImxLPQCI/AAAAAAAABzk/21ykXlkv5mA/s640/IMG_5244%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://lh3.googleusercontent.com/-E-wKTt7Pm3Y/UgRImxLPQCI/AAAAAAAABzk/21ykXlkv5mA/s640/IMG_5244%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>

</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh3.googleusercontent.com/-evTJ3cCCJ48/UgRIUVuNWeI/AAAAAAAABy8/njusYJyhxkI/s640/IMG_1447%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://lh3.googleusercontent.com/-evTJ3cCCJ48/UgRIUVuNWeI/AAAAAAAABy8/njusYJyhxkI/s640/IMG_1447%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>

</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://lh6.googleusercontent.com/-vO1CvAtWoD8/UgRNDe1UOOI/AAAAAAAAB0E/1XDg32NoBFY/s640/IMG_4057%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://lh6.googleusercontent.com/-vO1CvAtWoD8/UgRNDe1UOOI/AAAAAAAAB0E/1XDg32NoBFY/s640/IMG_4057%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :

  1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
  2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
  3. Angka 33% adalah prosentase untuk membuat foto berjajar menyamping 3 kolom (rumusnya: 100% dibagi 3 = 33%) Jika ingin 4 kolom, gunakan 25%.
  4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
  5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
Demikian tutorial cara membuat galerry foto di blog. Semoga bermanfaat.

Tuesday, February 14, 2012

Cara Membuat Blogroll Dengan Efek Scroll

Ada yang belum tahu apa itu scrollbar ???

Bagi yang belum tahu scrollbar, berikut ini akan dijelaskan sedikit tentang scrollbar. Scrollbar adalah kotak yang berisi sebuah konten yang dapat digulung/ditarik kesamping maupun ke atas ke bawah sehingga konten yang terdapat didalamnya dapat dilihat dengan cara menggulungnya.
Fungsi utama dari scrollbar adalah untuk menghemat tempat agar sebuah konten terlihat tidak terlalu panjang maupun lebar.


Isi scrollbar bermacam-macam tergantung kebutuhan si pengguna, ada yang memanfaatkannya untuk memperingkas tampilan banner, daftar isi, arsip suatu blog, iklan, feedjit seperti di blog saya ini maupun kumpulan link sahabat/blogroll.

Kali ini saya akan memberitahu Cara Membuat Blogroll Dengan efek Scroll.

Berikut ini adalah contoh Blogroll yang dibuat Dengan Fungsi Scroll 

 



Untuk membuat blogroll dengan scroll seperti di atas yang diperlukan hanyalah menambahkan kode berikut ini :
<div style="border: 1px solid #eee; height: 30px; overflow: auto; padding: 20px; width: 500px;">
<ol>
<li><a href="http://isi-dengan-url-blogAnda">text</a></li>
<li><a href="http://isi-dengan-url-blogAnda">text</a></li>
<li><a href="http://isi-dengan-url-blogAnda">text</a></li>
<li><a href="http://isi-dengan-url-blogAnda">text</a></li>
</ol>
</div>

Copy kode tersebut kemudian letakkan dalam halaman postingan maupun di sidebar blog Anda (Desain -> Elemen -> Javascript/HTML)
code yang berwarna merah adalah untuk mengatur warna garis tepi.
code yang berwarna biru untuk mengubah tinggi dan lebar scrollbar.
code yang berwarna hijau dapat anda rubah sesuai dengan kebutuhan anda.


Tuesday, May 10, 2011

Cara Menjadikan Setiap Kalimat Atau Paragraf Dalam Artikel Otomatis Rata Kiri Dan Kanan




Sobat Blogger, seperti yang kita ketahui bersama bahwasanya apabila menyusun artikel dengan menuliskannya menggunakan editor Blogger, maka setelan perataan default yang dipakai pada tiap kalimat atau paragraf dalam artikel tersebut adalah teks rata kiri. Sehingga dengan sistem perataan teks rata kiri seperti ini, maka kita harus mengubah setelan perataan (alignment) dari setiap paragraf agar tampak lebih rapi (sebagai contoh misalnya adalah dengan menggunakan sistem perataan justify atau rata kiri dan kanan) sebelum artikel tersebut diterbitkan.
Dalam hal mengatur setelan perataan teks untuk setiap kalimat atau paragraf yang terdapat dalam artikel sebenarnya tidaklah sulit, karena dapat dilakukan secara cepat yaitu dengan cara mengeblok kalimat atau paragraf yang dimaksud dan kemudian mengeklik salah satu tombol perataan teks yang terdapat dalam toolbar alignment. Namun perlu diketahui bahwasanya pengaturan untuk setelan perataan teks dapat dipermudah lagi yaitu dengan menambahkan kode CSS tertentu ke dalam template, sehingga setelah artikel diterbitkan maka secara otomatis sistem perataan teks yang digunakan pada setiap kalimat atau paragraf yang terdapat dalam artikel tersebut adalah sesuai dengan sistem perataan teks yang dipakai pada kode CSS dalam template.
Sebagai contoh misalnya jika setelan sistem perataan teks yang dipakai pada kode CSS dalam template adalah rata kiri-kanan (justify), maka tanpa harus melakukan pengaturan perataan teks pada setiap kalimat atau paragraf, secara otomatis setelah artikel diterbitkan setiap kalimat atau paragraf yang terdapat di dalamnya akan menjadi rata kiri-kanan. Demikian pula jika setelan perataan teks yang dipakai adalah rata tengah atau rata kanan, maka setelah artikel diterbitkan secara otomatis pula setiap kalimat atau paragraf yang terdapat di dalamnya akan menjadi rata tengah atau rata kanan.
Oke, selanjutnya untuk keperluan tersebut dapat dilakukan dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan’.
Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di atasnya.
.post-body.entry-content {
  text-align: justify;
}

Ketiga, simpan template.

Dengan demikian maka Anda tidak perlu lagi repot-repot menentukan sistem perataan teks yang digunakan untuk setiap kalimat atau paragraf yang terdapat dalam artikel, karena setelah diterbitkan maka secara otomatis setiap kalimat atau paragraf yang terdapat dalam artikel tersebut akan menjadi rata kiri-kanan. Sehingga dengan demikian dapat diartikan pula bahwa Anda dapat menulis dan atau menyusun artikel untuk kemudian diterbitkan tanpa perlu mengkhawatirkan sistem perataan teks yang digunakan untuk artikel tersebut karena sistem perataan teks secara otomatis akan menyesuaikan dengan sistem perataan yang digunakan pada kode CSS di atas.
Semoga berguna dan bermanfaat.

Tuesday, February 15, 2011

Membuat Scroll pada Widget Arsip Blog

Widget arsip blog yang panjang kadang membuat kita merasa tidak nyaman dengan tampilannya, untuk mengatasinya kita bisa meletakkan widget arsip blog ke dalam kotak scroll, seperti yang ada pada blog ini.



Berikut ini adalah cara membuat scrool widget arsip blog, bisa juga diterapkan untuk widget yang lain. Tetapi, kali ini kita akan fokus membuat scroll untuk widget arsip blog. ada cara mempersingkatnya dengan scroll.

Untuk membuat widget arsip dengan scroll ikuti langkah-langkah yang sangat singkat ini.
Buka Dashboard blog anda yang akan edit, kemudian ke  > Template > Edit HTML.

Lalu carilah code  ]]></b:skin> (Gunakan Ctrl + F untuk mempermudah pencarian. Caranya klik pada kotak HTML, kemudian Ctrl+F) Lalu copy code di bawah ini.
 
#BlogArchive1 .widget-content{
height:240px;
width:auto;
overflow:auto;
}

Letakkan code tersebut tepat di bawah kode  ]]></b:skin> :

Sehingga hasilnya nanti akan tampak seperti ini :
#BlogArchive1 .widget-content{
height:240px;
width:auto;
overflow:auto;
}
]]></b:skin>
NB : Angka 240 (Berwarna Biru) merupakan tinggi kotak scroll, dan bisa anda ubah sesuai keperluan.

Lalu klik pratinjau template untuk melihat hasilnya. Jika sudah sesuai dengan apa yang anda inginkan, klik simpan template.

Friday, January 28, 2011

CARA MEMBUAT TABEL DI BLOG TANPA CODING

Cara membuat tabel dalam sebuah artikel bagi sebagian blogger mungkin merupakan hal yang sulit, karena bagi kita yang belum paham kode-kode HTML tentu akan kebingungan. Sebenarnya bisa saja kita membuat tabel dengan mengcopy paste dokumen tabel yang sudah kita buat di Microsoft word atau Excel. tapi jika sobat blogger memiliki koneksi internet yang lelet, terkadang tidak bisa terpublikasi. Mengapa bisa tidak terpublikasi? Karena tabel atau dokumen yang langsung kita copy paste dari microsoft word / Excel tadi sebenarnya mengandung kode-kode rumit. Terkadang pula tabel yang sudah kita copas dari excel, ketika di masukkan ke posting blog tidak menjadi sebuah tabel yang diinginkan / tidak ada garisnya.
Jika sobat sudah memakai software/aplikasi Windows Live Writer, membuat tabel akan mudah dilakukan, karena dalam toolsnya sudah ada pembuat tabel. Berbeda dengan blogger yang belum ada.

Buat sobat yang menemui kendala dalam pembuatan tabel di blog karena belum mengenal kode-kode HTML/CSS tabel, mungkin bisa mengikuti cara berikut ini.

1. Buatlah terlebih dulu tabel artikel kita di MS word/excel.

2. Blok/Highlight tabel yang sudah jadi tadi, kemudian copy.

3. Lalu Masuk ke http://tableizer.journalistopia.com/

4. Paste dokumen tabel tadi di dalam form/kotak.

Paste your cells from Excel, Calc or other spreadsheet here:



5. Jangan lupa mengatur ukuran huruf, jenis huruf dan warna header tabel di posting blog.

6. Jika sudah selesai, lihat preview kodenya di bagian bawah, Klik Tableize it!

7. Tunggu sebentar, maka Akan di dapat kode HTML untuk tabel yang siap dimasukkan ke dalam posting blog.

8. Langkah berikutnya adalah copy kode yang di dapat di form/kotak.

9. Masuk ke pembuatan artikel, Silakan masukkan kata atau kalimat yang dikehendaki
 
Klik menu HTML di samping menu Compose.

Memasukkan kode yang sudah di copy tadi pada tempat yang dikehendaki

10. Kembali ke menu Compose untuk memasukkan kalimat atau kata-kata yang lainnya, seandainya tabel berada di tengah postingan.

Sebagai contoh bisa dilihat pada tabel di bawah adalah hasil Tableizer. 


No.Daftar BarangJumlahSatuan
1Sandal 5Kodi
2Topi4Kodi
3Tas7Kodi


Cukup mudah bukan? Memang untuk pewarnaan hanya bisa di header tabel saja. Silakan sobat coba-coba.