Tampilkan postingan dengan label widget. Tampilkan semua postingan
Tampilkan postingan dengan label widget. Tampilkan semua postingan

Cara Membuat Tulisan Berjalan

Cara Membuat Tulisan Berjalan - Setelah mengetahui cara membuat spoiler, trik Blogger Bugis berikutnya adalah membuat teks atau tulisan atau widget yang ada pada blog bergerak sendiri dengan menggunakan kode HTML. Teks atau tulisan bergerak ini biasa di sebut dengan tulisan berjalan, dalam kode HTML di kenal dengan perintah marquee.

Cara membuat tulisan berjalan | Cara membuat tulisan bergerak | Cara membuat tulisan berjalan di blog | Cara membuat tulisan berjalan pada blog | cara membuat widget berjalan dan bergerak
Gambar 1 : Cara Membuat Tulisan Berjalan

Membuat tulisan berjalan akan memberikan tambahan variasi pada blog. Biasanya, tulisan berjalan atau widget berjalan pada blog di gunakan oleh blogger untuk menampilkan semua widget atau tulisan yang tersimpan di dalam kotak yang tidak menggunakan scroll. Kecepatan berjalan, arah gerakan dan variasi lain bisa di tambahkan pada teks atau tulisan berjalan untuk membuat tulisan atau teks berjalan bergerak atau berjalan sesuai dengan yang kita inginkan.

Cara Membuat tulisan berjalan

Kode HTML dasar yang di gunakan untuk membuat tulisan bergerak atau berjalan adalah :

<marquee>Tulisan Berjalan</marquee>

Kode tersebut akan membuat tulisan berjalan seperti di bawah ini :

Tulisan Berjalan


Cara Membuat Widget Berjalan

Membuat widget berjalan atau bergerak sama saja dengan cara membuat tulisan berjalan. Gunakan kode yang sama seperti kode di atas lalu ganti tulisan yang berwarna merah dengan kode widget yang ingin di buat bergerak atau berjalan sehingga kodenya seperti ini :

<marquee>Tulisan Berjalan</marquee>

Ubah kodenya menjadi seperti ini :

<marquee>Kode Widget</marquee>

Ganti kode yang berwarna merah dengan kode widget yang ingin di buat bergerak

Macam - Macam Tulisan Berjalan

Setelah mengetahui cara membuat tulisan dan widget berjalan, berikut saya jelaskan cara mengatur gerakan dan memberi variasi pada tulisan berjalan agar terlihat lebih menarik

1. Mengatur Kecepatan Gerakan
Tambahkan perintah scrollamount="angka kecepatan" untuk mengatur kecepatan gerakan tulisan berjalan sehingga kodenya menjadi seperti ini :

<marquee scrollamount="angka kecepatan">TULISAN BERJALAN</marquee>

Ganti kode berwarna biru dengan angka ( misalanya 2, 3, atau 4 dsb ) dan ganti Tulisan berjalan dengan teks atau tulisan atau kode widget yang ingin di buat berjalan atau bergerak.
Contohnya :

<marquee scrollamount="2">TULISAN BERJALAN</marquee>
<marquee scrollamount="3">TULISAN BERJALAN</marquee>
<marquee scrollamount="4">TULISAN BERJALAN</marquee>

Ke tiga kode diatas akan membuat tulisan berjalan dengan kcepatan berbeda yaitu 2, 3, dan 4. Kode di atas akan membuat tulisan berjalan seperti berikut ini :

TULISAN BERJALANTULISAN BERJALANTULISAN BERJALAN
Semakin besar angka scrollamount semakin cepat tulisannya berjalan.

2. Mengatur Arah Gerakan
Tambahkan perintah direction="arah gerakan" untuk menentukan arah gerakan tulisan berjalan. Adapun arah gerakan yang bisa di gunakan adalah :

right = arah gerakan ke kanan
up = arah gerakan ke atas
down = arah gerakan ke bawah

Penempatan kode arah gerakan sama dengan penempatan kode kecepatan gerakan. Contohnya seperti ini :

<marquee direction="right">TULISAN BERJALAN</marquee>

Jika kode kecepatan dan kode arah gerakan  di gabung, kodenya akan menjadi seperti ini :


<marquee scrollamount="2" direction="right">TULISAN BERJALAN</marquee>

<marquee scrollamount="2" direction="up">TULISAN BERJALAN</marquee>

<marquee scrollamount="2" direction="down">TULISAN BERJALAN</marquee> 

hasilnya :

TULISAN BERJALANTULISAN BERJALANTULISAN BERJALAN

Dengan memahami contoh di atas, anda sudah tahu bagaimana cara menambahkan perintah dan menggabung perintahnya untuk memberikan efek berbeda pada tulisan berjalannya. Sekarang saya akan memberikan beberapa kode perintah untuk tulisan berjalan. Anda tinggal menggabung kodenya jika anda menginginkan efek berbeda pada saat membuat tulisaan berjalan.

3. Tulisan Berjalan Bolak Balik
Membuat tulisan berjalan mondar mandir juga menarik. Untuk itu, berikut cara membuatnya versi Blogger Bugis. Kode yang di gunakan :

<marquee behavior="alternate">TULISAN BERJALAN BOLAK-BALIK</marquee>

Hasilnya :
TULISAN BERJALAN BOLAK-BALIK

4. Tulisan Berjalan dan Berhenti
Kode yang di gunakan :

<marquee onmouseover="this.stop()" onmouseout="this.start()">TULISAN BEJALAN dan BERHENTI</marquee>

Hasilnya :
TULISAN BEJALAN dan BERHENTI

Kode diatas akan membuat tulisan berhenti saat di sentuh mouse. Arahkan mouse anda pada tulisan berjalannya untuk melihat hasilnya.

5. Memberi background
Untuk memberi background dan warna pada tulisan berjalan kode yang di gunakan adalah sebagai berikut :

<marquee bgcolor="#FDEAE8">Tulisan Berjalan</marquee>

Hasilnya seperti ini :

Tulisan Berjalan

#FDEAE8 adalah kode warna background, untuk melihat lebih banyak kode warna, anda bisa lihat di artikel Blogger Bugis sebelumnya "Tools Untuk Melihat Kode Warna" 

6. Mengatur Lebar dan Tinggi Jarak Gerakan.
Untuk mengatur lebar dan gerakan tulisan berjalan, kode yang di gunakan adalah sebagai berikut :

<marquee scrollamount="2" direction="up" width="50px" height="70px">TULISAN BERJALAN</marquee>
<marquee scrollamount="2" direction="down" width="50px" height="70px">TULISAN BERJALAN</marquee>

Hasilnya :
TULISAN BERJALANTULISAN BERJALAN

Pengaturan tinggi gerakan biasanya di gunakan untuk tulisan berjalan yang bergerak ke atas dan ke bawah agar arah gerakan tidak terlalu naik tau terlalu ke bawah seperti pada contoh nomor 2 tulisan bergerak ke atas / bawah.

Width adalah lebar, sedangkan height adalah tinggi. Anda juga bisa menambah kode width saja atau height saja sesuai keinginan anda. Ganti angkanya dengan angka yang lebih besar atau lebih kecil jika ingin membuat lebar atau tinggi menjadi lebih lebar atau lebih tinggi atau sebaliknya. Semakin tinggi angka, maka akan semakin lebar atau semakin tinggi.

Beberapa contoh tulisan berjalan di atas saya rasa sudah cukup. Anda bisa memberikan variasi lain dengan menggabungkan kodenya. Jika anda ingin membuat link di berjalan, ganti kode "Tulisan Berjalan" dengan kode html link anda. Jika anda belum tahu bagaimana cara membuat kode HTML link, klik "Cara Membuat Link".

Selamat membuat blog anda lebih ramai dengan menambahkan Tulisan Berjalan. Jika masih ada pertanyaan tentang cara membuat tulisan berjalan di blogspot, sampaikan melalui kotak komentar di bawah artikel ini.
Semoga bermanfaat......

Cara Membuat Spoiler

Cara membuat spoiler - Spoiler adalah sebuah tombol yang akan menyembunyikan widget / gadget atau tulisan. Jika tombol spoiler di klik, maka tulisan atau widget yang tersembunyi akan di tampilkan. Jika di klik lagi maka widget atau tulisan tersebut akan di sembunyikan kembali. Artikel ini tidak berhubungan dengan postingan BB sebelumnya yaitu "Cara Menghapus Broken Link". Agar tidak terlalu tegang menghapus link rusak, saya tulis artkel untuk mempercantik blog yaitu "Cara Membuat Spoiler di blog"

cara membuat spoiler | tombol spoiler | kode spoiler di blog
Gambar 1 : Cara Membuat Spoiler

Contoh / Live Demo tombol spoiler di blog yang terpasang di postingan atau di dalam artikel blog, bisa anda lihat di artikel "Cara Membuat Daftar Isi Blog Otomatis". Untuk melihat contoh Spoiler yang lain, anda bis lihat di bagian paling bawah blog ini, tepatnya di bagian komentar blog ( Selama template BLOGGER BUGIS belum di edit / berubah ).

Cara Membuat Spoiler

Untuk membuat spoiler, kode yang digunakan adalah :

<div style="font-family: verdana; margin-top: 5px; text-align: center;">
<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 Kembali'; }" style="font-size: 12px; margin: 0px; padding: 3px 5px;" type="button" value="Buka" /></div>
<div style="margin: 0px; padding: 1px;">
<div style="display: none;">
www.bloggerbugis.com
</div>
</div>

Keterangan :
  • Verdana = Jenis Huruf tulisan pada tombol Spoiler. Ganti dengan Trebuchet ms, georgia, arial, atau jenis huruf lain yang anda inginkan
  • 5 = Jarak tombol dari objek di atasnya. Ganti dengan angka yang lebih besar untuk membuatnya lebih jauh dari objek yang ada di atasnya atau sebaliknya
  • center = Posisi / Letak tombol spoiler. Center berarti posisi tombol berada di tengah. Jika ingin membuat tombolnya berada di sebelah kiri, ganti center dengan Left, untuk sebelah kanan, ganti dengan right.
  • Tutup = Tulisan pada tombol spoiler saat spoiler menampilkan widget atau tulisan yang di sembunyikan.
  • Buka Kembali = Tulisan pada tombol spoiler saat widget atau tulisan tersembunyi tapi sebelumnya sudah pernah di buka / di tampilkan spoiler
  • Buka = Tulisan pada tombol spoiler saat tulisan atau widget masih di sembunyikan oleh spoiler
  • www.bloggerbugis.com adalah tulisan yang di sembunyikan oleh spoiler. Ganti dengan tulisan yang ingin anda sembunyikan dengan spoiler atau ganti dengan kode widget jika anda ingin menyembunyikan widget dengan spoiler
Untuk memasang Spoiler pada postingan atau artikel blog, anda harus memasang kode spoiler pada mode HTML ( Kecuali anda menggunakan "Tafsirkan HTML yang di ketik" pada menu pilihan yang ada di post editor blogspot ).

Sampai baris ini, tutorial cara membuat spoiler selesai. Sampai jumpa di artikel tips dan trik Blogger Bugis berikutnya. Salam Blogger......

Trik Mudah Cara Membuat Daftar isi blog

cara membuat daftar isi blog, cara membuat daftar isi blog keren, cara membuat daftar isi blog otomatis, cara membuat daftar isi blog dengan scrollCara Membuat daftar Isi Blog - Beberapa artikel terakhir yang saya posting di blog seperti Cara Memasang Tracking ID kode Google analystics di blog dan artikel sebelumnya berhubungan dengan SEO. Agar tidak terlalu banyak di pusingkan dengan Optimasi SEO saya akan selingi artikel SEO di BB dengan artikel tentang cara menghias dan mempercantik blog.

Saya memilih menulis artikel tentang widget daftar isi blog sebagai selingan artikel SEO Blogger Bugis. Alasannya, karena Widget Daftar isi Blog akan membuat pengunjung lebih mudah mencari artikel di dalam blog.Tampilannya yang menarik tidak akan membuat pengunjung bosan berlama lama nongkrong di blog.

Selain itu, Cara Membuat Daftar isi blog yang akan saya share di artikel ini akan bekerja secara otomatis tanpa perlu memasukkan link artikel satu persatu ke dalammya. Yang membuatnya lebih menarik, gadget Daftar Isi Blog ini di lengkapi dengan menu drop down untuk memudahkan pengunjung memilih jenis artikel yang akan di tampilkan oleh daftar isi blog keren ini.

Pengunjung bisa memilih melihat daftar isi Blog berdasarkan tanggal posting, dan bisa juga berdasarkan label artikel. Saya juga menambahkan Kotak dengan Fungsi Scroll agar widgetnya tidak terlalu panjang ke bawah jika settingan widget memuat ratusan artikel sehingga membuat widget ini lebih menarik. Untuk melengkapi tampilannya, saya juga menambahkan efek shadow inset atau efek bayangan ke dalam box widget, artinya, anda bisa menyebut widget ini dengan "Widget daftar isi blog otomatis dengan scroll efek shadow" cara membuat daftar isi blog, cara membuat daftar isi blog keren, cara membuat daftar isi blog otomatis, cara membuat daftar isi blog dengan scroll

Agar anda lebih tertarik untuk memasang widget daftar isi Blog otomatis ini di blog anda, silahkan lihat gambar di bawah ini :
cara membuat daftar isi blog, cara membuat daftar isi blog keren, cara membuat daftar isi blog otomatis, cara membuat daftar isi blog dengan scroll


Tidak puas dengan gambar ?
Klik tombol spoiler di bawah ini untuk melihat Live Demonya :


Untuk membuat daftar isi blog otomatis seperti di atas, kode yang digunakan adalah sebagai berikut :

<div style="background: #f2f2f2; width: 320px; color: #000; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #fff; border:4px double #ccc; -moz-box-shadow: inset 2px 2px 2px #404040; -webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px #404040">
<div id="cl_option">
Masih loading bro... sabar ya... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan =200;
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugisdotkom/javascript/Dafatar_isi_Biasa_Bloggerbugis.js">
</script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script>
<div style="float:right;font:normal 10px verdana; color:#ccc;text-align:right;padding:5px 0px;text-shadow:1px 1px 1px #000">
Widget by <a href="http://www.bloggerbugis.com">Blogger Bugis</a></div>
</div>

Kode di atas bisa di edit untuk menyesuaikan tampilannya dengan tema blog anda.
Perhatikan kode yang berwarna merah !!!
  • f2f2f2 adalah kode warna background ( Warna Latar Belakang ) yaitu Abu - Abu. Ganti kode tersebut dengan kode warna yang anda inginkan untuk mengganti warna background widget Daftar Isi Otomatis.Untuk melihat kode warna HTML, silahkan klik "Daftar Kode Warna HTML".
  • 320px adalah Kode lebar widget. Ganti dengan angka yang lebih besar untuk membuat widgetnya lebih lebar atau ganti dengan angka yang lebih kecil untuk membuat widgetnya lebih sempit. Misalnya 300px atau 350px.
  • 000 adalah kode warna tulisan yaitu hitam. Silahkan ganti dengan warna yang anda inginkan. Adapun warna Link yang ada di dalam widget, tergantung dari pengaturan CSS template anda.
  • 4px double adalah kode ketebalan garis pinggir widget, yaitu garis pinggir ganda ( double ) dengan ketebalan 4 piksel ( 4px ) . Ganti dengan angka 4 yang lebih besar atau lebih kecil. untuk membuat hanya 1 garis pinggir, ganti double dengan solid, untuk membuat garis pinggir putus - putus, ganti dengan dashed
  • ccc adalah kode warna garis pinggir, ganti dengan kode warna yang anda inginkan.
  • Masih loading bro... Sabar ya.... adalah kalimat yang di tampilkan jika widgetnya belum terbuka karena halaman masih loading. Silahkan ganti dengan kalimat yang anda inginkan.
  • 500 adalah jumlah maksimal judul artikel yang akan di tampilkan di dalam widget daftar isi otomatis. Ganti dengan angka yang lebih besar atau lebih kecil. Pada live demo yang anda lihat di atas, saya hanya menggunakan 15.
  • Yang terakhir dan paling penting adalah kode http://www.bloggerbugis.com. Ganti kode tersebut dengan URL / Alamat blog anda
Dengan mengedit semua kode di atas, anda akan memiliki daftar isi blog yang sesuai dengan tema warna blog anda. Silahkan pasang widgetnya pada sidebar blog atau laman atau halaman artikel blog anda, jika belum tahu caranya, simak tutorialnya berikut ini :

Cara Memasang Widget Daftar Isi Blog Otomatis
Ada 2 cara yang bisa di lakukan untuk memasang widget daftar isi tersebut di dalam blog. Yang pertama adalah memasang daftar isi blog otomatisnya pada sidebar blog, dan yang kedua memasang daftar isi otomatis tersebut pada halaman artikel atau laman blog. Berikut masing masing panduan cara memasang daftar isi blog otomatis :

1. Pasang Daftar Isi Blog Otomatis di Laman atau Halaman Artikel

Untuk memasang daftar isi otomatis pada Laman Baru atau Halaman Posting ( artikel ), silahkan masuk ke Post Editor blogspot sama seperti jika ingin membuat artikel. Pada halaman Post Editor, pilih mode HTML lalau paste kode Daftar Isi Blog Otomatis.

Untuk membuat widgetnya berada di tengah halaman, tambahkan kode <center> sebelum kode Daftar Isi lalau tambahkan kode </center> di bawah kode daftar isi sehingga kodenya akan terlihat seperti ini :

<center>
Kode Daftar Isi Blog Otomatis
</center>

Setelah selesai, jangan lupa publish / terbitkan seperti artikel biasa.



2. Pasang Daftar Isi Blog Otomatis Pada Sidebar Blog 

Untu memasang daftar Isi Blog Otomatis pada sidebar blog, silahkan masuk ke halaman TATA LETAK >>> Klik Tambah Gadeget >>> Pilih HTML/JavaScript >>> Copy Paste kode Daftar Isi ke kotak HTML/JavaScript >>> Klik Simpan.

Penjelasan lengkap tentang cara memasukkan widget daftar isi Blog pada sidebar blog, klik "Cara Menambahkan Widget di Blog" untuk membaca tutorialnya yang di lengkapi dengan gambar

Semoga artikel Blogger Bugis tentang Cara Membuat Daftar Isi blog ini bermanfaat. Jika anda kurang suka dengan widget ini, saya akan membuat artikel lagi tentang widget daftar isi di blog dengan tampilan berbeda

Happy Blogging.......