Title post Blogger otomatis muncul di tab bar browser

Kita bisa modifikasi teks di belakang Favicon menjadi judul artikel yang saat dibuka atau membuat moving-teks atau marquee dengan teks milik sendiri.  Bagaimana cara menampilkan judul posting blogger sehingga muncul title di bagian tab browser (tepat di belakang Favicon)?

Sebelumnya pada bagian tersebut diatas dalam sembarang tampilan blog blogger saya "Website Design" selalu dengan sederetan nama website diikuti beberapa keyword utama seperti setting di halaman code HTML template, yaitu :

<title><data:blog.pageTitle/>|SEO|website|blog|toko online|prestashop</title>

Dan ditampilkan sebagai teks di depan Favicon untuk homepage dan innerpages ebagai berikut :

Website Design | SEO|website|blog|toko online|prestashop

Sehingga tampilan title sesudah favicon-image blog blogger (lihat baris paling atas tampilan browser atau bagian tab browser) adalah :

JUDUL ARTIKEL | SEO|website|blog|toko online|prestashop

Untuk homepage tetap ditampilkan :

Website Design | SEO|website|blog|toko online|prestashop

Title posting di belakang Favicon website blog Blogger

Beberapa waktu lalu saya ingin mengganti tampilan tersebut dengan judul posting artikel yang sedang dibuka. Lalu apa yang harus dilakukan?

PERINGATAN!

Sebelum mencoba tip ini, SANGAT disarankan membuat backup file template dengan cara :

Dashboard >> Template  >> klik tombol CADANGKAN / PULIHKAN (sudut kanan-atas)

Tujuannya, jika terjadi sesuatu yang tidak dikehendaki bisa mengembalikan template seperti semula.

Lalu apa yang harus dilakukan?

1. Dashboard >> Template  >>  Edit HTML
2. Letakkan (paste) code CSS style berikut ini pada bagian header
   
   
   .post-outer div.post{
   position: relative;
   padding-left: 200px !important;
   }
   
   
3. Klik Simpan Template

Aplikasi pada blog saya seperti gambar berikut :

Hasilnya bisa dilihat title artikel ada sesudah favicon :  pada blog ini.
Menggantikan tampilan bar tab URL artikel sebelum saya lakukan tip ini :

Website Design | SEO|website|blog|toko online|prestashop

(Text sesudah favicon di atas hanya muncul pada Homepage SAJA)

Membuat teks bergerak di belakang Favicon website blog

Masih berkaitan dengan teks pada bar tab (teks di belakang Favicon). Kali ini kita membuat sembarang teks yang bergerak dari kanan ke kiri sebagaimana fungsi "marquee"

Apa yang harus dilakukan? Masih pada halaman edit HTML (template blogger), :

1. Gunakan kombinasi tombol Ctrl - F untuk mencari </head>
2. Paste kode berikut ini tepat dibawah </head>
   
   
   <script type="text/javascript">
   //<![CDATA[
   msg = "SELAMAT DATANG DI BLOG SAYA WEBSITE DESIGN";+ msg;pos = 0;
   function scrollMSG() {
   document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
   if (pos > msg.length) pos = 0
   window.setTimeout("scrollMSG()",150);
   }
   scrollMSG();
   //]]>
   </script>
3. Ganti teks warna merah (di antara 2 tanda petik ganda) dengan teks Anda sendiri.
4. Klik tombol Simpan Template.

Source

---

Selamat mencoba - Happy blog blogger

---

Memasang modul CS Content Marquee pada Joomla 3

Marquee ialah penulisan code HTML untuk memberikan efek rangkaian kata atau kalimat menjadi bergerak atau berjalan dari kiri ke kanan atau dari kanan ke kiri atau dari atas ke bawah dan sebaliknya. Efek teks Marquee ini merupakan salah satu bentuk modifikasi tulisan di website (blog blogger) termasuk diaplikasikan pada template Joomla. Marquee sangat baik digunakan karena merupakan animasi bersifat "eye-chatching" bagi pengunjung, Penggunaan marquee juga menghemat tempat pada website ketika Anda ingin menampilkan demo pesan khusus pada teks berjalan.

Atribut setting Marquee untuk tampilan website

Memang tetap ada kekurangan ketika kita menggunakan efek teks berjalan (marquee), yaitu saat content marquee melebihi kapasitas ruang (height atau width), sehingga ketika loading website (blog) belum selesai maka seluruh isi marquee akan terlihat sehingga tampilan webpage tampak jelek.

Berikut atribut sering dipakai untuk setting marquee dengan tujuan efek-teks-berjalan terlihat menarik :

• bgcolor : Digunakan untuk mengatur background text yang akan diberi efek marquee.
• direction : Digunakan untuk mengatur gerakan dari text tersebut (up, down, left right).
• scrollamount : Mengatur speed gerakan text (angka dalam px), semakin tinggi angkanya, maka semakin cepat gerakan dari text.
• behaviour : Untuk mengatur efek dari gerakan (slide, scroll, alternate).
• width : Untuk mengatur lebar dari area text (dinyatakan dalam px atau %).
• height : Untuk mengatur tinggi dari area text (dinyatakan dalam px atau %).
• align : Untuk mengatur posisi (center, left, right).
• onmouseover : Untuk memberhentikan efek ketika disorot (hover) mouse.
• onmouseout : Untuk melanjutkan efek bila mouse sudah tidak menyorot (hover) text.

Modul CS Content Marquee website Joomla

Modul ini sifatnya sederhana dan portabel untuk menampilkan marquee (efek teks bergerak) dari list judul-judul artikel yang paling baru diterbitkan. Modul ini ditawarkan untuk template Joomla versi 2.5 dan versi 3.x (Joomla terbaru versi 3.3). Modul ini bersifat Responsive untuk versi 3 keatas. Setting marquee mudah dan tidak banyak pilihan setting seperti : pilihan untuk memilih arah (LTR dan RTL), pilihan untuk memilih kecepatan, pilihan untuk memilih kategori posting, pilihan untuk memilih message, pilihan untuk memilih count dan pilihan untuk memilih warna.

Demo modul ini bisa dilihat DISINI
Download modul KLIK CS Content Marquee

Penggunaan

Install melalui halaman Administrator Joomla.

1. Extention >> Extention Manager >> Upload berkas paket (file ekstensi .zip) >> Choose file (browsing file di computer) >> Upload dan Install
2. Extention >> Module Manager >> pilih modul CS Continue Joomla
3. Klik tombol "Terbit" dan klik tombol "Edit"
4. Silahkan lakukan setting seperti contoh berikut :
   
   
   
   
   
   
5. Klik tombol "Simpan & Tutup"

---

That's all we know - Happy blog blogger

Tips of Marquee : How to make moving text in Website

Marquee ialah penulisan code HTML untuk memberi efek rangkaian kalimat atau frase kata menjadi moving (bergerak) atau berjalan dari kiri ke kanan atau dari kanan ke kiri atau dari atas ke bawah dan sebaliknya. Tips ini untuk memperkaya variasi tampilan halaman blog blogger website. Pengkayaan variasi halaman tetap harus mempertimbangkan aspek letak dan lainnya. Karena jangan sampai justru mengganggu konsentrasi pengunjung untuk mencerna esensi content website.

Memperkaya tampilan halaman website

Berikut ini beberapa variasi marque atau teks bergerak untuk ditampilkan di halaman website.

1. Teks bergerak dari kanan ke kiri (Marquee / moving from right to left (default)
   
   Bentuk tag Html sebagai berikut :
   
   
   <marquee>Place your Text </marquee>
   
   
   Hasilnya seperti terlihat di bawah ini :
   
   Place your Text
   
   
2. Teks bergerak dari kiri ke kanan  (Marquee/moving from left to right)
   
   Bentuk tag Html sebagai berikut :
   
   
   <marquee direction="right">Place your Text </marquee>
   
   Hasilnya seperti terlihat di bawah ini :
   
   Place your Text
   
   
3. Marquee/moving back and forth.
   
   Bentuk tags Html sebagai berikut :
   
   
   <marquee behavior="alternate">Place your Text </marquee>
   
   
   Hasilnya seperti terlihat di bawah ini :
   
   Place your Text
   
   
4. Marquee/moving with scrollamount become aggressive.
   
   Bentuk tag Html sebagai berikut :
   
   
   <marquee scrollamount="18" behavior="alternate">Place your Text </marquee>
   
   Hasilnya seperti terlihat di bawah ini :
   
   Place your Text
   
   
5. Marquee/moving with on-mouse-over stop and on-mouse-out start,if mouse point to text so stop.
   
   Bentuk tag Html sebagai berikut :
   
   
   <marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="alternate">Text </marquee>
   
   Hasilnya seperti terlihat di bawah ini :
   
   Place your Text
   
   
6. Teks bergerak dari bawah ke atas (Marquee/moving from bottom to up)
   
   Bentuk tags Html sebagai berikut :
   
   
   <marquee direction="up">
   Place your Text #1
   Place your Text #2
   Place your Text #3
   Place your Text #4 </marquee>
   
   Hasilnya seperti terlihat di bawah ini :
   
   Place your Text
   Place your Text
   Place your Text
   Place your Text
   
   
7. Teks bergerak dari atas ke bawah (Marquee/moving from up to bottom).
   
   Bentuk tags Html sebagai berikut :
   
   
   <marquee direction="down">
   Place your Text #1
   Place your Text #2
   Place your Text #3
   Place your Text #4 </marquee>
   
   Hasilnya seperti terlihat di bawah ini :
   
   Place your Text
   Place your Text
   Place your Text
   Place your Text
   

---

---

That's all we know - Happy blog blogger