Mengubah Tampilan Blogger Anda

Contoh Tulisan Berjalan

Minggu lalu ada teman saya sebut saja Otong nanya begini ‘ eh, bro kira-kira bakal keren ya kalau blog kita dibawahnya (footer) bisa dikasih teks berjalan mirip kayak di berita-berita yang ada di TV ’ spontan langsung saya komentari bahwa hal tersebut sangat mungkin untuk diterapkan juga di Blog.

Dengan wajah lugu teman saya nanya lagi, ‘ emang gimana cara membuat tulisan berjalan di blog ? ’ nah, daripada saya jelasin cara membuat tulisan berjalan tersebut langsung lewat mulut, agak ribet juga, untuk itu saya tulis di blog ini, itung-itung nambah jumlah postingan blog.

Sekedar informasi, kalau di dunia blogging Tulisan Berjalan itu disebut Marquee, sebenarnya saya juga sedikit bingung kenapa teks berjalan disebut Marquee padahal jika diartikan kedalam bahasa indonesia, Marquee berarti Tenda Besar. Entah apa filosofi dibalik pemilihan kata Marquee tersebut.

Dah, dari tadi ngoceh mulu, sekarang kita masuk pada Cara Membuat Tulisan Berjalan (Marquee) di Blog.



Contoh Teks Yang Dikenai Marquee

Untuk membuat Tulisan Berjalan seperti diatas, kita membutuhkan kode html seperti dibawah ini :

<marquee>Contoh Teks Yang Dikenai Marquee</marquee>

Si <marquee> inilah yang nantinya akan membuat seluruh Tulisan atau Teks yang diapit kode tersebut dapat bergerak.

Yang diatas itu kan Tulisan Berjalan yang biasa saja tanpa tambahan efek apapun pada kode html. Kita pun bisa memvariasikan kode <marquee> diatas dengan JavaScript atau HTML yang lain, agar lebih jelas kita masuk contoh saja.



Untuk menambahkan warna background, kita perlu menyisipkan style="background: warna;" kedalam kode marquee-nya, dibawah ini adalah contoh jika kita ingin memberi warna abu-abu pada Marquee Text.

<marquee style="background: gray;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu</marquee>

Maka hasil dari kode HTML diatasa akan nampak seperti ini.

Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu

Tulisan Berjalan diatas susah untuk dibaca bukan ? kita juga bisa mengganti warna dari Teks diatas, agar kontras dengan backgroundnya.



Disini saya akan mencotohkan bagaimana mengganti warna Tulisan Berjalan diatas dengan warna Putih agar teks tersebut mudah untuk terbaca.

Kode yang kita pakai adalah seperti ini :

<marquee style="background: gray; color: white;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih</marquee>

Dan Hasilnya akan nampak seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih



Selain mengganti warna dan juga background kita juga bisa membuat Tulisan Berjalan tersebut hanya tampil dari tengah, tidak full dari kanan ke kiri.

Dan cara ini tergantung dari Div atau Nav pembungkus Marquee Teks tersebut, artinya jika lebar selector Div hanya 500px maka Tulisan berjalan akan muncul pada pixel ke 250 - 0 (tengah ke kiri).

Contoh penerapan dalam kode HTML :

<marquee width="50%">Contoh Teks Yang Dikenai Marquee Width 50%</marquee>

Kode HTML diatas akan membuat tulisan 'Contoh Teks Yang Dikenai Marquee' akan berjalan dari tengah-tengah layar menuju ke kiri, atau lebih jelasnya seperti contoh dibawah ini :

Contoh Teks Yang Dikenai Marquee Width 50%

Dan Anda pun bebas mengganti persentase tersebut. Semakin kecil maka semakin ke kiri pula teks yang akan tampil.

Diatas kita hanya menggunakan HTML dan CSS bukan, nah sekarang kita akan menambahkan JavaScript kedalam kode <marquee> tersebut.



Jika normalnya Tulisan Bejalan atau <marquee> selalu berjalan tanpa henti dari kanan ke kiri, maka kita bisa menyuruhnya untuk berhenti sejenak (jeda) dengan cara menambahkan kode berikut.

<marquee scrolldelay="500">Contoh Teks Yang Dikenai Marquee Scrolldelay 500</marquee>

500 disini maksudnya adalah 0,5 Detik bukan 500 Detik. Jadi kode diatas jika dijalankan akan membuat Teks yang ada didalam kode <marquee></marquee> berhenti sejenak setiap 0,5 Detik.

Contohnya seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Scrolldelay 500



Walaupun standar dari Marquee Text sudah sesuai (tidak terlalu cepat atau lambat) namun jika Anda merasa Tulisan Berjalan tersebut begitu amat cepat, Anda bisa dengan mudah mengatur kecepatannya, yaitu dengan menambahkan scrollamount="angka"

Contoh penerapan dalam HTML :

<marquee scrollamount="10">Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10</marquee>

Dan kode tersebut akan menghasilkan efek seperti ini :

Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10

Saya sendiri tidak tahu persis makna dari angka 10 tersebut, apakah 10px per detik atau apalah saya kurang tahu, Tapi yang jelas jika Anda merubah angkanya menjadi lebih besar, maka Kecepatan Tulisan Berjalan tersebut akan makin cepat.



Seperti yang kita semua tahu, bahwa Standar dari Teks Berjalan adalah mengarah Dari Kanan ke Kiri. Namun kali ini kita akan mencoba hal yang berbeda yaitu membalikkan arah pergerakannya (kiri ke kanan).

Kode HTML tambahan yang kita butuhkan adalah direction="right" yang nanti akan kita pasangkan dengan <marquee> tentunya.

Contoh penggabungan :

<marquee direction="right">Contoh Tulisan Berjalan Dari Kiri ke Kanan</marquee>

Dan hasilnya akan menjadi seperti ini :

Contoh Tulisan Berjalan Dari Kiri ke Kanan



Agar Tulisan Berjalan tersebut dapat memantul, kita cukup menambahkan behavior="alternate".

Contoh penambahan ke dalam HTML :

<marquee behavior="alternate">Contoh Tulisan Berjalan Dengan Efek Memantul</marquee>

Hasilnya setelah kita terapkan :

Contoh Tulisan Berjalan Dengan Efek Memantul



Sebenarnya kode untuk membuat Tulisan Berjalan Dari Bawah ke Atas sama saja dengan dengan Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan, hanya saja kita mengubah valuenya menjadi direction="up"

Contoh penerspan :

<marquee direction="up">Contoh Tulisan Berjalan Dari Bawah ke Atas</marquee>

Dan Hasilnya :

Contoh Tulisan Berjalan Dari Bawah ke Atas

Kata "up" juga bisa Anda ganti dengan down (untuk memberi efek tulisan berjalan dari atas ke bawah).



Membaca dalam kondisi teks sedang berjalan memang saya akui cukup sulit, nah untuk itu ada kode JavaScript (JS) untuk memecahkan masalah tersebut, yaitu onmouseover="this.stop()" onmouseout="this.start()" kode JS tersebut fungsinya untuk menghentikan laju Tulisan Berjalan tersebut, dengan catatan ada Kursor Mouse yang melewati atau bersentuhan dengan Tulisan Berjalan.

Contoh Penggabungan JavaScript diatas dengan kode HTML Marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()">Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya</marquee>

Dan hasil dari kolaborasi JavaScript dan HTML diatas adalah seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya

Cara Memasang Kode Marquee di Dalam Artikel	Cara Memasang Kode Marquee di Dalam Widget
1. Masuk ke dalam Text Editor, lalu pilih Mode HTML 2. Copy dan Paste kode Marquee Anda disini 3. Beralihlah ke Mode Compose (jika berhasil text 4. akan berjalan) 4. Untuk memastikan kode berjalan sempurna klik pada Pratinjau	1. Masuk ke dalam menu Tata Letak lalu Klik Tambahkan Gadget 2. Pilih opsi HTML/JavaScript 3. Copy dan Paste kode Marquee pada textare yang sudah disediakan 4. Klik Simpan dan silahkan dilihat hasilnya

Sebenarnya masih banyak variasi-variasi yang bisa kita lakukan dengan <marquee> ini. Kalau sempat nanti pasti artikel cara membuat tulisan berjalan ini nantinya akan saya Update, jadi jangan sungkan-sungkan untuk membookmark halaman ini untuk mendapatkan update.an terbaru tentang cara membuat tulisan berjalan, hhe.

Akhir kata saya ucapkan terimaksih banyak telah bersedia membaca artikel cara membuat tulisan berjalan ini.

 Cara Membuat Gambar Header Blog. Satu lagi cara desain blog sendiri, yaitu dengan menambahkan gambar di header blog. Cara membuat gambarnya bisa menggunakan software, bisa juga secara online. Artikel ini akan menjelaskan tentang cara membuat gambar header blog secara online. Prosesnya tidak lama, cukup mengunjungi situs penyedia layanan pembuatan gambar, dan memilih salah satu bentuk gambar yang kita inginkan. Setelah itu download dan pasang di blog kita. Silakan lihat dulu contoh gambar dibawah ini.

cara membuat gambar header blog
Gambar diatas adalah contoh gambar dalam bentuk tulisan yang pernah saya gunakan di blog ini. Dengan menggunakan gambar, kita punya banyak pilihan bentuk dan juga warna yang bisa digunakan. Berbeda dengan tampilan huruf blog, yang warna dan bentuknya terbatas, hanya bisa menggunakan satu warna.

Ukuran gambar yang dihasilkan cukup kecil dan juga tidak memberatkan loading blog, ukuran huruf bisa diatur sesuai dengan yang kita inginkan. Disitus tersebut ada juga jenis gambar animasi, seperti huruf yang mengeluarkan api, Petir, animasi Glow yang bergerak dan masih banyak lagi.

    Gambar yang dihasilkan berformat PNG dan juga GIF, sesuai dengan bentuk dan animasi yang digunakan. Dan ukuran File gambar yang dihasilkan juga berbeda, antara Png dan Gif, sesuai dengan ukuran huruf gambar yang digunakan.
    Untuk gambar animasi ukuran huruf 40 keatas bisa sampai 50-70kb dalam format Gif. Sedangkan untuk gambar biasa tanpa animasi hanya 10-30kb dalam format png.
    Silakan pilih bentuk dan ukuran gambar yang sesuai dengan yang kalian inginkan.

Untuk lebih jelasnya, Cara membuat gambar header blog.
Ikuti langkah-langkah dibawah ini:

    Kunjungi situs http://cooltext.com/
    Selanjutnya pilih salah satu gambar huruf yang kalian suka.
    Dan atur warna dan juga bentuk hurufnya.
    Setelah selesai, lihat bagian bawah, klik Creat Logo.
    Terakhir Download. Seperti gambar dibawah ini.
    cara membuat gambar header blog
    Sekarang, memasang gambar tersebut di blog kita.
    Login ke blog, dan Klik pengaturan Tata Letak.
    Pada bagian layout Header Blog, Klik Edit. Dan Upload gambar tadi.
    Selanjutnya atur penempatan gambar. Pilih dibalik judul dan keterangan.
    Terakhir Save pengaturan gambar. Dan lihat, gambar berada di belakang judul dan deskripsi. Jika ingin menyembunyikan tulisan judul dan deskripsi blog. Ikuti langkah-langkah dibawah ini.

Cara menyembunyikan judul dan deskripsi blog

    Sekarang kita sembunyikan tulisan judul dan deskripsi dari halaman blog, cari kode ]]></b:skin> dan tempatkan kode ini diatasnya.
    .Header h1 {
       height: 0px;
       visibility: hidden;
       display: none;
    }

    .Header .description {
       height: 0px;
       visibility: hidden;
       display: none;
    }
    Setelah menambahkan kode diatas maka judul blog dan deskripsi akan disembunyikan dari tampilan blog, tinggal gambar saja.
    Dengan begitu judul dan deskripsi tetap ada, hanya disembunyikan.
    Silahkan cek di chkme.com untuk melihat masih ada atau tidak title judul blog H1, jika ada berarti gambar header tidak akan mempengaruhi seo blog.

Jika kita memliih menempatkan gambar selain judul dan keterangan atau tempatkan keterangan setelah gambar. Maka H1 header akan hilang, dan itu mempengaruhi seo blog. Jika ingin mencoba silahkan saja cek di chkme.com atau disitus chek seo blog lainnya. Agar H1 header blog disembunyikan dari halaman blog tanpa mempengaruhi seo blog, gunakanlah cara seperti diatas. Semoga Bermanfaat

1. Kunjungi situs game berbasis flash, salah satunya Khemer. 
2. Nah ini dia kelebihannya situs Khemer.com, game flashnya boleh di embed alias boleh di gunakan untuk dipasang di blog. Silakan cari dan pilih game yang ingin dipasang (saran saya cari game berbasis flash dengan ukuran file dibawah satu megabyte (1 MB). Oke jika sudah ketemu langsung aja di klik.
3. Silakan lihat di sisi kanan layar disana terdapat tulisan "Interactions widget".
4. Pilih "Embed Code:", setelah itu copy kodenya.
5. Log in ke akun blogger.
6. Klik Design ==> Page Elements ==> Add a Gadget. Pilih "HTML/Java Script".
7. Paste kode pada kotak gadget kemudian klik "Save".
8. Pindahkan elemen gadget tersebut di atas / di bawah elemen postingan biar layar game tidak kekecilan karena apabila elemen gadget yang berisi game ditaruh di sidebar kanan / kiri layar game akan kekecilan.
9. Apabila elemen gadget sudah dipindah, klik "Save" lagi di atas kanan yang berwarna jingga.
10. Selesai... dan coba lihat hasilnya.

Semoga Bermanfaat.....

Setelah kita mengenal cara memasang lagu di blog, tutorial pembahasan topik kali ini adalah mengenai Playlist MP3 Musik layaknya seperti di Media pemutar musik/video seperti Winamp, GOM Player, KM Player dan lainnya. Pada contoh Media Player tersebut terdapat sebuah Playlist yaitu kumpulan musik yang dapat kita pilih dan anda mainkan.

Hanya saja playlist disini hanya dapat dimainkan auto / otomatis, dan hanya dapat menekan tombol nextplay yaitu untuk mengganti ke lagu berikutnya secara berurutan. Memasang Widget/Gadget Musik Player di Blogger memiliki kelebihan dan kekurangan. Semuanya tergantung pada user / pengguna yang mendengarkan lagu tersebut, apakah cocok atau tidak.

Selain itu faktor lainnya adalah akan sedikit menambah beban berat loading blog. Tetapi apabila pengunjung menggunakan koneksi internet yang stabil maka akan mudah, enak dan cpat untuk mendengarkan musik yang tlah tersedia. Menuju ke cara memasang dan membuat playlist pada topik ini.

1. Silahkan anda pergi ke website scmplayer.net
2. Anda akan melihat tampilan sperti gambar diatas, lalu pilih Choose Skin.
    Kamu dapat memilih tampilan yang sesuai dengan tema blog dan bebas memilih skin playlist / warna yang tersedia.
3. Kemudian klik bagian selanjutnya yaitu Edit Playlist.
4. Di dalam kotak tersebut terdapat 2 pilihan.

• Manual Playlist = Memasang lagu dengan url manual. Jadi kita perlu melakukan upload terlebih dahulu, atau bisa juga melalui website lain seperti 4hared,beeMP3,MP3Skull, dll.
• RSS Podcast / SoundCloud Set / Youtube Playlist = Disini terdapat 3 opsi yang dapat dilakukan salah satunya bisa melalui Youtube. Jadi, kita hanya prlu mencari video / lagu yang ingin dicari. Nanti pada saat dimainkan di blog, hanya audio / suara saja yang akan terdengar. Videonya tidak akan ditampilkan. Carilah lagu yang video nya asli biar suara musik tersebut bagus dan belum diedit orang lain.

Perhatikan pada gambar yang saya lingkari merah, disini terterah contoh untuk memasukan lagu yang anda inginkan, silahkan anda cari situs yang menyediakan lagu atau bisa anda upload sendiri ataupun mencari diyoutube.com video yang nantinya sebagai url lagu.(bukan menampilkan video, hanya suara dari video). Pastikan anda memasukkan url dengan benar agar mp3 tersebut dapat muncul dan berjalan di blog.

Kemudian klik pada tab Configure Settings untuk mengatur lagu yang sudah kita pilih tadi, atur sesuai keinginan anda. Jika sudah selesai, klik tombol Done atau Save. Kemudian copy script code mp3 yang diberikan.

Langkah terakhir anda hanya perlu memasukkan kode tersebut ke dalam Widget anda.
Caranya :
1. Masuk ke Blogger.com
2. Pilih Layout / Design / Tata Letak, kemudian pilih letak yang sesuai dan klik Tambah Gadget / Widget.
3. Pilih HTML/Javascript
4. Masukkan kode yang tadi di copy dan letakkan di dalam kotak kedua (yang besar).
5. Save Template.

Semoga Cara Memasang Musik MP3 Playlist di Blogger ini dapat bermanfaat. Untuk memberikan dukungan positif terhadap artikel ini, silahkan klik link berikut.

Favicon merupakan ikon/gambar yang muncul di pojok kiri address bar yang disertakan pada hampir semua situs web atau blog sekaligus merupakan logo dari blog tersebut. Seperti contoh dibawah ini :

Ukuran gambar yang dipakai usahakan tidak lebih dari 100KB atau Anda bisa meng-upload gambar terlebih dahulu di FavIcon from Pics, berikut cara meng-uploadnya :

1. Kunjungi situs http://www.html-kit.com/favicon/ 
2. Pada Create a Favicon from any picture, klik 'Browse'.
   
3. Kemudian klik 'Generate FavIcon.ico'
4. Setelah itu jika Anda menginginkan favicon animasi, download dalam format gif dan simpan gambar.
   
5. Kemudian upload gambar pada free image hosting dan ambil link gambarnya, atau bisa Anda lihat caranya disini.

Selanjutnya kita akan memasang favicon pada blog, berikut langkah-langkahnya :

Cara pertama :

1. Login akun blogger Anda. 
2. Pilih 'Tata Letak' pada menu dropdown. 
3. Klik 'Edit' di bagian Favicon, lihat gambar!
   
4. Klik 'Browse', kalau sudah di upload klik 'Simpan'.
   

Cara kedua :

1. Login akun blogger Anda. 
2. Klik Template ---> Edit HTML ---> beri tanda centang pada kotak Expand Widget Template. 
3. Tambahkan kode dibawah ini tepat diatas </head>
   <link href='URL ICON' rel='icon' type='image/gif'/>
   Keterangan:
   Ganti 'URL ICON' dengan URL atau link gambar yang Anda upload tadi. 
4. Simpan template.

Nah, sekian postingan cara mengganti favicon pada blog dan semoga bermanfaat. Jika Anda masih mengalami masalah silahkan hubungi kami melalui contac.

Cara Mengganti Template Blog - Ada kalanya setelah lama membuat blog kita jenuh dengan template blog. Sehingga kita ingin merubah template blog dengan yang lebih menarik lagi sehingga menambah kesan istimewa terhadap blog yang kita miliki. Ada beberapa faktor mengapa kebanyakan blogger mengganti atau merubah template blog. Diantaranya adalah selain jenuh dengan template blog yang lama juga disebabkan karena kebutuhan blog itu sendiri, atau tidak puas dengan template blog secara default yang telah disediakan blogger ketika kita baru membuat blog di blogger.

Merubah template blog atau mengganti template blog tidak sulit namun perlu saya sampaikan kepada Anda bahwa jangan terlalu sering mengganti template, karena menurut beberapa sumber yang membahas mengenai seo mengatakan, terlalu sering mengganti template blog akan berpengaru terhadap posisi blog serta artikel blog Anda di serp. Disamping itu juga jika Anda sering mengganti template, image terhadap blog Anda akan menurun sehingga pengunjung blog Anda sulit untuk mengenali blog Anda, karena ciri khas yang melekat pada mereka tidak lagi terlihat.

Untuk mendapatkan template blogger yang menarik, cantik dan seo friendly anda bisa mencarinya dengan search di google dengan keyword "download gratis template blogger". Disana Anda akan melihat banyak website yang menyediakan template blogger, wordpress dan lain-lain yang dapat di download secara gratis namun ada juga template blog yang berbayar alias premium template. Anda tinggal memilih sesuai dengan selera serta kebutuhan blog Anda. Atau jika Anda tidak ingin bersusah paya mencari template blogger gratis saya juga menyediakannya, dan template yang saya sediakan tentu terbatas karena template-template blog tersebut saya slektif menurut valid xhtml nya agar memenuhi salah sati faktor seo. Anda dapat melihat template koleksi saya di download template blogger.

Jika anda sudah mendownload template blog dari pihak layanan penyedia template blogger gratis, sekarang mari kita simak tutorial cara mengganti template blog yang akan saya jelaskan berikut ini.

Mengganti Template Blog

Sebelum Anda mengganti template blog yang lama dengan template blog yang baru, perlu saya ingatkan kepada Anda untuk menyimpan widget-widget blog yang telah Anda pasang sebelumnya kedalam notepad. Karena nanti setelah Anda merubah template blog widget tersebut akan hilang.

1. Silahkan login ke ID/akun Blogger Anda
2. Pada menu dropdown, silahkan klik "template"


3. Kemudian klik opsi "Sesuaikan"

4. Silahkan pilih dan sesuikan template blog seperti yang anda inginkan, jika sudah selesai klik "Terapkan ke Blog"

Untuk mengganti template dengan template dari penyedia template gratis, cara merubahnya seperti di bawah ini :

1. Klik "template" seperti langkah 2 diatas
2. Kemudian lihat disudut layar kanan layar monitor Anda dan klik "Cadangkan/Pulihkan"
3. Silahkan Backup template lama Anda untuk berjaga-jaga jika nanti terjadi kesalahan dengan megklik "Unduh template lengkap"


4. Kemudian extract/keluarkan file xml dari folder rar yang Anda download dari layanan penyedia template gratis tadi.
5. Selanjutnya kembali ke blogger dan klik "Browse" lalu pilih file xml template yang baru Anda keluarkan tadi, lalu klik "Unggah"
6. Tunggu hingga proses penguploadan template hingga selesai, lalu save template Anda dan lihat hasilnya.