Tutorial Social Network

Informasi Seputar Media Sosial

Tutorial Computer

Informasi Seputar Komputer

Tutorial Youtube

Informasi Seputar Youtube

Tutorial Blogger

Informasi Seputar Blogger

Tutorial Wordpress

Informasi Seputar Wordpress

Tutorial Website

Informasi Seputar Pemrograman Website

Tutorial Windows

Informasi Seputar Sistem Operasi Windows

Tutorial Linux

Informasi Seputar Sistem Operasi Linux

Tutorial Android

Informasi Seputar Android

Saturday 27 February 2021

Cara Membuat Tulisan Berjalan (Marquee) di Website/Blog

Memberikan kesan yang indah dan menarik bagi para pembaca blog kita nantinya. Salah satunya, memberi sedikit sentuhan seni animasi yaitu membuat tulisan/teks berjalan.

Sering kan lihat tulisan/teks berjalan? Entah itu di layar televisi, tempat periklanan (Billboard) di pinggir jalan counter biasanya rame banget tuh dengan berbagai macam gerakan.

Nah dalam dunia Web-pro, tulisan/teks berjalan atau running text lebih dikenal dengan nama “Marquee”.

Apa itu Marquee?

Marquee adalah salah satu kode bahasa program HTML (HyperText Markup Language), untuk membuat efek tulisan/gambar menjadi berjalan atau bergerak.

Bagaimana cara membuat tulisan berjalan (marquee) di website/blog?

Cara membuat tulisan berjalan (marquee) di website/blog, bukanlah perkara yang sulit.
Kode Dasar Tag Marquee :

<marquee> TULISAN BERJALAN </marquee>

Secara default, teks akan berjalan dari kanan ke kiri dan berulang terus-menerus.

Preview :

TULISAN BERJALAN

Tapi kurang seru kalau gerakannya monoton itu-itu saja. Karena tag marquee memiliki beberapa attribute yang bisa kita kombinasikan untuk membuat beberapa variasi gerakan tulisan sesuka hati.

Berikut beberapa Atribut Marquee :


Attribute & Value

Description
direction = "left/right/up/down"
Mengatur arah gerakan teks
behavior="scroll/slide/alternate"
Note :
*scroll (bergerak berputar)
*slide (sekali lalu berhenti)
*alternate (bolak-balik men)
Mengatur perilaku gerakan teks
Seperti : bergerak sekali lalu berhenti, berputar, atau bolak-balik


align = “left/right/center/justify”
Mengatur posisi teks
bgcolor ="warna/kode warna"
Memberi warna tulisan
scrollamount="angka"
Mengatur kecepatan gerakan, semakin besar angka semakin cepat gerakannya
scrolldelay="angka"
Mengatur waktu tunda gerakan dalam mili detik
loop = "angka |-1| infinite"
Mengatur jumlah perulangan (loop)
width="px atau %"
Mengatur lebar blok teks dalam pixel atau persen
height ="px atau %"
Mengatur tinggi blok teks dalam pixel atau persen
title="pesan"
Pesan akan muncul saat mouse berada di atas teks
onmouseover = “this.stop()”
Menghentikan teks saat disorot mouse
onmouseout = “this.start()”
Menjalankan teks ketika mouse menjauh
hspace = "px"
Mengatur jarak kiri-kananya teks
vspace = "px"
Mengatur jarak atas-bawahnya teks
Catatan :

Silahkan sobat berkreasi dengan mengkombinasikan atribut marquee ini. Bahkan kita bisa dekorasi tampilannya sesuai keinginan, menggabungkannya dengan kode program CSS.

Tulisan ini hanya bisa berjalan Vertikal & Horizontal. Tidak bisa berjalan dari arah pojok, jadi jangan harap tulisan ini bisa datang berjalan sendiri dari pojokan.

Mari kita sama-sama belajar membuat tulisan bejalan di website/blog, dengan script HTML marquee. Silahkan ganti "TULISAN BERJALAN" dengan pesan singkat yang hendak kalian sampaikan.

1. Tulisan Berjalan dari Kanan ke Kiri, atau dari Kiri ke Kanan
Script:
<marquee direction="left" scrollamount="10"> Tulisan berjalan ke kiri </marquee><br />
<marquee direction="right" scrollamount="10"> Tulisan bejalan ke kanan </marquee>

Preview:

Tulisan berjalan ke kiri

Tulisan berjalan ke kanan

2. Tulisan Berjalan dari Atas ke Bawah, atau dari Bawah ke Atas
Script:
<marquee align="center" direction="down" scrollamount="3"> Tulisan berjalan ke bawah </marquee><marquee align="center" direction="up" scrollamount="3"> Tulisan berjalan ke atas </marquee>

Preview:

Tulisan berjalan ke bawahTulisan berjalan ke atas

Atau dengan gerakan menjauh, silahkan posisi script-nya dibalik.

Preview:
Tulisan berjalan ke atasTulisan berjalan ke bawah

3. Tulisan Berjalan Memusat atau Berlawanan Arah (kiri-kanan)
Script:
<marquee direction="right" width="50%"> Tulisan berjalan arah memusat</marquee><marquee direction="left" width="50%"> Tulisan berjalan arah memusat </marquee><marquee width = "50%"> Tulisan berjalan berlawanan arah </marquee><marquee direction="right" width="50%"> Tulisan berjalan berlawanan arah </marquee>

Preview:

<< Tulisan berjalan arah memusatTulisan berjalan arah memusat >><< Tulisan berjalan berlawananTulisan berjalan berlawanan arah >>

4. Tulisan Berjalan Memantul (bolak-balik)
Script:
<marquee behavior="alternate" scrollamount="10"> Tulisan berjalan memantul </marquee>

Preview:

Tulisan berjalan memantul

5. Tulisan Berjalan Zig-zag
Script:
<marquee behavior ="alternate" direction = "up" height="60px" scrollamount="30"> <br />
<marquee direction="right" scrollamount="6"> Tulisan berjalan zig-zag </marquee> </marquee>

Preview:


Tulisan berjalan zig-zag

6. Tulisan Berjalan Melayang
Script:
<marquee behavior="alternate" direction="up" height="100" scrollamount="6" weight="460">
<marquee behavior="alternate" direction="right"> Tulisan berjalan melayang </marquee> </marquee>

Preview:

Tulisan berjalan melayang

7. Tulisan berjalan dengan Atribut "behavior"
Script:

<marquee behavior="scroll" scrollamount="10" width="460">Tulisan berjalan (scroll) </marquee><br />
<marquee behavior="slide" scrollamount="10" width="460"> Tulisan berjalan (slide) </marquee><br />
<marquee behavior="alternate" scrollamount="10" width="460"> Tulisan berjalan (alternate) </marquee>

Preview:

Tulisan berjalan (scroll)

Tulisan berjalan (slide)

Tulisan berjalan (alternate)

8. Tulisan Berjalan dengan Kecepatan
Script:
<marquee width="450"> Tulisan berjalan dengan kecepatan </marquee><br /><marquee scrollamount="15" width="450"> Tulisan berjalan dengan kecepatan </marquee><br />
<marquee scrollamount="25" width="450"> Tulisan berjalan dengan kecepatan </marquee>

Preview:

Tulisan berjalan dengan kecepatan

Tulisan berjalan dengan kecepatan

Tulisan berjalan dengan kecepatan

9. Tulisan Berjalan dengan Atribut "vspace"
Script:
<marquee bgcolor="red" scrollamount="10" width="450"> Tulisan berjalan (vspace) </marquee><br />
<marquee bgcolor="yellow" scrollamount="10" vspace="15" width="450"> Tulisan berjalan (vspace) </marquee><br /><marquee bgcolor="green" scrollamount="10" vspace="15" width="450"> Tulisan berjalan (vspace) </marquee>

Preview:

Tulisan berjalan (vspace)

Tulisan berjalan (vspace)

Tulisan berjalan (space)

10. Tulisan Berjalan dengan "hspace"
Script:
<marquee bgcolor="red" hight="100" width="400"> Tulisan berjalan (hspace) </marquee> <br />
<marquee bgcolor="yellow" hight="100" hspace="15" width="400"> Tulisan berjalan (hspace) </marquee><br /> <marquee bgcolor="green" hight="100" hspace="40" width="400"> Tulisan berjalan (hspace) </marquee>

Preview:

Tulisan berjalan (hspace)

Tulisan berjalan (hspace)

Tulisan berjalan (hspace)

11. Tulisan Berjalan dengan Background
Script :
<marquee align ="center" direction ="left" scrollamount="10"> Tulisan berjalan dengan background </marquee>

Preview :

Tulisan berjalan dengan background

12. Tulisan Berjalan dengan Link, dan akan Berhenti ketika Pointer Diletakkan di atasnya.
Script :
<marquee align="center" direction="up" height="200" onmouseout ="this.start()" onmouseover = "this.stop()" scrollamount="2" width="100%">
<a href="http://ricohaloho.blogspot.com/2018/10/tentang-media-sosial.html?"> Tentang media sosial </a><br />
<a href="http://ricohaloho.blogspot.com/2019/02/katakan-adios-untuk-hoax.html?"> Katakan "adios" untuk hoax</a><br />
<a href="http://ricohaloho.blogspot.com/2019/04/menulis-nakal-jelang-pilpres-2019.html?"> Menulis nakal jelang Pilpres </a><br /> </marquee>

Previeuw :


13. Tulisan Berjalan dengan Atribut "Loop"
*Tulisan ini berjalan hanya 5x puteran. Habis itu, tulisan berhenti. Untuk melihat gerakan, silahkan di-refresh dulu ya.
Script :
<marquee loop="5" width="450"> Tulisan berjalan dengan loop </marquee> <br /> <marquee behavior ="slide" loop="5" width="450"> Tulisan berjalan dengan loop </marquee>

Preview :

Tulisan berjalan berulang (loop)

Tulisan berjalan berulang (loop)

14. Gambar Berjalan dengan Tag Marquee
Script :
<marquee direction="right" scrollamount="10">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3FpT4iqFgIaJ2V9Khp5tWyEdqvTMLvdsJfYxSgH4ANCbPUtkTu2dC5ga7pEoVdhwgh9tLgxVAAWwwOvL33NPe0n6UZziv_5CfZrOR4dIdjplFepqkCQdhLzdP587RHLUo0h0IYi_M3_vj/s1600/Gambar-berjalan%25283%2529.gif" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3FpT4iqFgIaJ2V9Khp5tWyEdqvTMLvdsJfYxSgH4ANCbPUtkTu2dC5ga7pEoVdhwgh9tLgxVAAWwwOvL33NPe0n6UZziv_5CfZrOR4dIdjplFepqkCQdhLzdP587RHLUo0h0IYi_M3_vj/s1600/Gambar-berjalan%25283%2529.gif" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4uynoOgyZdMgdYR8uFIysZDChs96E9wq7YssjniusPTb4hQyvj9FlgceSzdLEC1E3dgfStytHa68tx9q3mEwleSidp2gsuaFN0eRzNJIfDMbly0gia4PQ8kYpS3NGnABex4alyYeGttey/s1600/Gambar-berjalan.jpg" /> </marquee>

Preview :

 

Dengan menggabungkan beberapa script HTML. Sebagai catatan: Silahkan ganti "value" sesuai keinginan kalian.

Contoh :

RICO HALOHORICO HALOHO

RICO HALOHORICO HALOHO << Welcome to my BlogWelcome to my Blog >>

Thanks for visiting >><<Thanks for visiting

Despresso adalah perasaan yang kau alami ketika kehabisan kopi

Kopi boleh minta..!

Membuat Link pada Marquee

<marquee><a href="http://carabelajartutorial.blogspot.com/2016/09/cara-membuat-tulisan-berjalan-di-blog.html">Cara Membuat Tulisan Berjalan</a></marquee>
Cara Membuat Tulisan Berjalan

Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee.

Kombinasi Atribut Marquee


<div style="text-align: center;">
<span style="font-size: x-large;">
<marquee bgcolor="black" style="color: red;" direction="left" width="130">
<b>&lt;&lt;</b><b> MACAM &gt;&gt;</b>
</marquee>
<marquee bgcolor="black" style="color: blue;" direction="right" width="130">
<b>&lt;&lt; MACAM &gt;&gt;</b>
</span>
</marquee>
</div>
<< MACAM >><< MACAM >>

Kombinasi marquee dapat dilakukan dengan menggabungkan beberapa atribut sekaligus. Anda sudah mengetahui dasar-dasar membuat marquee, silahkan mengkreasikan marquee Anda sendiri.

Bagaimana cara memasang tulisan berjalan di website/blog?

Ada dua cara yang bisa kita gunakan, yaitu melalui editor artikel dan melalui widget.
Pertama, Melalui Editor Artikel
Caranya :
  • Masuk ke Dashboard
  • Buat Posting/New Entry
  • Tulis konten seperti biasa sampai selesai
  • Ganti mode penulisan dari “Compose” menjadi “HTML”
  • Copy script tulisan berjalan yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
  • Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulisan berjalan..!” ganti dengan tulisan sobat yang mau dijalankan.
  • Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
  • Terakhir, kalau sudah berjalan dan posisinya sudah pas. Silahkan dipublish.
Kedua, Melalui Widget
Caranya :
  • Masuk ke Dashboard
  • Pada Menu sisi kiri, Pilih Tata Letak/Layout
  • Klik Tambahkan Gadget Baru
cara-membuat-tulisan-berjalan-di-blog

  • Pilih gadget HTML/JavaScript
  • Copy & Paste -kan tulisan berjalan pada bagian konten.
  • Pastikan sobat melihat tulisan Rich Text
cara-membuat-tulisan-berjalan-di-blog
  • Save

Cara Membuat Text Box Untuk Menulis Script/Kode

Kotak script atau text box yang dimaksud pada artikel ini digunakan untuk menampilkan sebuah kotak berisikan script di dalam postingan blog dengan tujuan membuat pengunjung nyaman dalam membaca dan memahami kode script yang ditulis oleh pemilik blog.
Menampilkan text box pada postingan blog biasanya digunakan oleh penulis blog yang isi postingannya menjelaskan tentang suatu script ataupun memang tema blog tersebut membahas pembelajaran tutorial komputer yang perlu menggunakan text boxt untuk bahan script yang dijelaskannya.

Alasan kenapa harus pakai Kotak Script di postingan?
  • Dengan memakai kotak script akan lebih rapi karena bisa memisahkan antara text biasa dan kode script, karena tersusun didalam satu kotak, atau box area apa bila membahas tutorial yang harus menampilkan kode script.
  • Akan lebih menarik jika sebagai tempat konten pilihan post terkait, tombol download, atau apa saja karena script box ini bisa di pakai apa saja (pasti yang lain tertarik dan pada mau pake)
  • Tidak akan membuat lambat pada loding blog karena kode yang digunakan sangat minimal.
Gambar contoh - Script Text-Box (BroHabir)

Manfaat Script Text-Box
Manfaat dari script text-box ini sendiri, berfungsi sebagai box atau kotak yang dimana dikotak tersebut terdapat scroll-box yang membuat text yang berada di box tersebut bisa dituliskan sepanjang-panjangnya script tanpa menampilkan banyak text pada wrapper atau isi artikel..

Script Text-Box 1
<div style="background-color: #111; border-radius: 5px; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>



Script Text-Box 2
<div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>

Script Text-Box 3
<div style="background-color: #3d3627; border-radius: 0px; border: 1px solid #000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>

Script Text-Box 4
<div style="background-color: #000; border-radius: 0px; border: 2px dashed #fff; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>

Script Text-Box 5
<div style="background-color: #2b3b44; border-radius: 0px; border: 2px dotted #fff; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>

Script Text-Box 6 (sudut melengkung)
<div style="background-color: #ffe599; border-radius: 20px; border: 4px groove rgb(170, 170, 170); padding: 10px;"> Tulis script anda di sini..! </div>

Script Text-Box 7 (sudut melengkung)
<div style="background-color: #6fa8dc; border-radius: 20px; border: 2px solid rgb(178, 34, 34); padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Script Text-Box 8 (sudut melengkung)
<div style="background-color: #f3f3f3; border-left: 10px solid rgb(34, 136, 221); border-radius: 20px; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Script Text-Box 9 (efek bayangan)
<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px, rgba(0, 0, 0, 0.118) 10px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>


Script Text-Box 10 (efek blur)
<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px 15px, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>


Script Text-Box 11 (efek drag)

Cara Penggunaan:
Cara penggunaan script text-box ini tidak sembarangan. Maka dari itu, berikut ini adalah cara penggunaannya:

Blogger Menu → Postingan → Entri Baru (Tempat anda menulis artikel) → Salin kode diatas mulai dari <div hingga </div> → Paste di HTML (Terletak disebelah Compose) → Buka Compose → Isi Box baru ditulis Script atau kodenya.

Cara Mengganti Background Blog Dengan Gambar/Foto/HTML

Background blog adalah tampilan latar belakang dari sebuah blog yang berbeda pada setiap template yang dipakai dan biasanya secara default hanya berupa warna saja. Mengganti background blog juga dapat membuat blog menjadi indah dan memberikan kenyamanan pada pengunjung agar betah untuk berlama-lama di blog tersebut serta dapat mengecilkan bounce rate blog yang sangat baik untuk SEO. Bagi para blogger yang bosan dengan tampilan background blognya dan ingin mengubahnya dengan gambar yang keren bisa mengikuti langkah berikut ini.

Cara Mengganti Background Blog Sesuai Keinginan:
1. Bikin background blog seperti gambar diatas yaitu dengan cara masuk ke menu Template dan klik Sesuaikan



2. Kemudian pilih menu Latar Belakang dan klik Gambar latar seperti berikut


3. Setelah itu akan muncul tampilan berikut, pilih kategori yang diinginkan lalu klik salah satu gambar background yang disukai atau sobat juga bisa klik unggah gambar untuk upload gambar / foto sendiri untuk dijadikan background blog, jika sudah silahkan klik Selesai maka background blog sobat akan berubah menjadi gambar tersebut


4. Jika cara diatas tidak bisa disebabkan blog sudah diganti templatenya dengan hasil download maka bisa menggunakan cara berikut yaitu masuk menu Template dan klik Edit HTML


5. Kemudian cari kode body{background: ,gunakan Ctrl+F untuk mempermudah pencarian


6. Setelah itu ganti kode yang ditandai warna merah dengan url gambar milik sobat, jika sudah klik Simpan template.. Selesai


#Catatan:
Format gambar yang dapat digunakan menjadi background adalah jpg, gif, png dengan ukuran hingga 300kb tapi disarankan dibawah 50kb agar loading blog tidak berat dan untuk mendapatkan latar belakang penuh bisa gunakan gambar dengan ukuran 1800x1600 atau lebih besar serta jika ingin posisi gambar tetap ketika di scroll maka harus memiliki panjang minimal 860px contoh 1400x880.

Cara Membuat Daftar Isi di Dalam Postingan

Membuat daftar isi adalah salah satu hal yang wajib dilakukan dalam pembuatan skripsi, laporan, serta penulisan buku guna mempermudah mencari halaman yang ingin dituju. Namun sayangnya masih ada yang membuat daftar isi dengan manual dan belum nampak rapi.

1. Pengertian Daftar Isi
Daftar isi atau table of content (TOC) yaitu sebuah daftar link yang biasa seorang blogger letakan di awal postingan / artikel untuk mengarahkan ke bagian-bagian / pokok pembahasan tertentu.

2. Tujuan Membuat Daftar Isi Pada Artikel Blog
Tujuan dari memberikan daftar isi pada postingan / artikel di blog adalah untuk memudahkan pembaca dalam menjelajahi serta memahami apa yang kita tulis di blog.

Ketika seorang pembaca menginginkan informasi namun tidak ingin membaca seluruh artikel yang kita buat melainkan hanya ingin mengambil poin-poin tertentu maka daftar isi sangat membantu bagi mereka agar tidak merepotkan harus scroll atas dan bawah.

Dengan demikian dapat meningkatkan daya tarik pembaca untuk berkunjung kembali di blog kita, karena kemudahan informasi yang di sajikan di setiap postingan / artikel yang kita buat.

Selain memudahkan pembaca dalam mencari informasi, blog yang memberikan daftar isi di setiap postingan / artikel yang di tulis, akan sangat di sukai oleh mesin pencari (search engine) seperti Google, sehingga mereka memperlakukan postingan / artikel kita lebih istimewa.

Contoh kasusnya seperti ini teman-teman : ketika ada seseorang yang mencari informasi semisal tentang "cara membuat daftar isi di artikel blog" dan kebetulan artikel kita muncul menjadi salah satunya di antara artikel yang lainya, hal ini memungkinkan postingan yang kita buat tampil lebih menarik di hasil penelusuran mesin pencari karena di beberapa kasus mesin pencari google akan menampilkan daftar isi pada hasil pencariannya. Dan ini akan membuat postingan kita terlihat lebih menarik dan profesional. Seperti berikut contoh dari artikel yang menampilkan daftar isi di hasil pencarian google :


3. Cara Membuat Daftar Isi Di Dalam Postingan
Seperti yang sudah saya jelaskan di atas, daftar isi adalah sebuah daftar link yang ada dalam satu halaman postingan yang dapat mengarah kepada bagian atau poin tertetntu. Nah.. untuk membuat daftar isi hal yang perlu di perhatikan ialah sebagai berikut :

Langkah 1: memberikan ID unik pada elemen
Dalam proses pembuatan postingan biasanya kita menggunakan mode Compose, jika teman-teman ingin menambahkan daftar isi pada postingan yang di buat silahkan beralih ke mode HTML dan berikan ID unik pada elemen yang ingin dijadikan target pada link daftar isi. (pada contoh ini saya aplikasikan pada semua elemen heading 1). Berikut adalah contoh tag HTML sebelum dan setelah diberikan atribut ID.

Sebelum:
<h1>Pokok Pembahasan 1</h1>

Sesudah:
<h1 id="daftarisi-1">Pokok Pembahasan 1</h1>

Perlu di inget, bahwa pemberian ID juga bisa di berikan pada elemen lainya seperti div, img dan seterusnya. Setiap ID yang di buat itu sifat nya harus unik dan tidak di gunakan berulang, jika pada contoh di atas ditulis daftarisi-1 maka selanjutnya bisa di tulis daftarisi-2 , daftarisi-3 , daftarisi-4 .

Langkah 2: Membuat link yang mengarah pada elemen dengan ID tertentu
Selanjutnya, setelah setiap elemen yang di inginkan sudah memiliki ID unik, tinggal sekarang buat link dengan URL tujuan yang mengarah pada elemen tersebut menggunakan tag anchor <a> dengan nilai nya yaitu ID elemen yang dikehendaki. Berikut contoh penulisan HTML nya :

<a href="#daftarisi-1">Pokok pembahasan 1</a>

Penulisan URL di awali dengan tanda pagar (#) kemudian di ikuti dengan ID yang di kehendaki.

4. Pemasangan daftar isi pada postingan
Pada proses di atas teman-teman sudah mengetahui bagaimana cara membuat link yang mengarah pada bagian tertentu, Sekarang mari kita lihat langkah selengkapnya :

Agar link yang kita buat menjadi daftar kita perlu menggunkan elemen ul dan li. Lihat penulisannya di bawah ini :

<b>Daftar Isi :</b><br /> <ul> <li><a href="#daftarisi-1">Pokok pembahasan 1</a></li> <li><a href="#daftarisi-2">Pokok pembahasan 2</a></li> <li><a href="#daftarisi-3">Pokok pembahasan 3</a></li> </ul>

Jika teman-teman sudah selesai menulis artikel, baru kemudian buat daftar isi dengan cara beralih dari mode Compose ke mode HTML kemudian letakan kode di atas pada bagian tertentu pada postingan / artikel. Untuk selengkapnya bisa lihat gambar berikut ini :



Berikut contoh kode selengkapnya untuk membuat daftar isi di postingan / artikel blog:

<b>Daftar Isi :</b><br /> <ul> <li><a href="#daftarisi-1">Pokok pembahasan 1</a></li> <li><a href="#daftarisi-2">Pokok pembahasan 2</a></li> <li><a href="#daftarisi-3">Pokok pembahasan 3</a></li> </ul> <br /> <br /> <h1 id="daftarisi-1">Pokok Pembahasan 1</h1> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. Delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br /> <br /> <h1 id="daftarisi-2">Pokok Pembahasan 2</h1> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br /> <br /> <h1 id="daftarisi-3">Pokok Pembahasan 3</h1> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Silahkan copy kode di atas lalu buka HTML online kemudian paste kan, untuk melihat demo nya.

5. Catatan Penting
Usahakan menulis lengkap isi artikel terlebih dahulu baru kemudian menembahkan kode HTML daftar isi dengan cara beralih ke mode HTML, jika teman-teman sudah ada di mode HTML jangan beralih kembali ke mode Compose, ini di karenakan sistem blogger akan secara otomatis menambahkan path URL dengan URL dashboard blog kalian. Pada contoh kasus ini, URL link yang tadinya hanya berupa #namaid akan berubah menjadi url-dashboard#namaid. Contohnya seperti berikut :

<a href="https://www.blogger.com/blogger.g?blogID=7894333152787373029#isi-1">

Apabila hal tersebut terjadi maka daftar isi tidak dapat berfungsi sebagai mana mestinya. Jadi usahakan pembuatan daftar isi dilakukan setelah tahap akhir postingan di buat dan mepublikasikan dalam mode HTML.

Source:
https://ngodingtah.blogspot.com/2019/04/cara-membuat-daftar-isi-di-dalam-postingan-artikel-blog.html#isi-5

Cara Mengganti Nomor HP Pada Gmail

Mengganti nomor HP pada akun Gmail memang sangat diperlukan apabila nomor lama sudah tidak aktif.
Karena selain untuk mempermudah proses pemulihan akun, menggunakan nomor yang aktif pada Gmail juga bisa dijadikan sebagai notifikasi keamanan.

Sehingga apabila ada yang mencoba menggunakan akun Anda di perangkat lain, Anda akan mendapat notifikasi tentang upaya masuk.
Keuntungan lainnya yang bisa Anda nikmati apabila menggunakan nomor HP yang aktif adalah ketika anda lupa password.

Anda bisa menggunakan nomor HP sebagai langkah terakhir untuk memperbaiki akun Anda.
Maka dari itu, Anda perlu mengetahui cara mengganti nomor HP di Gmail. Sehingga saat nomor pada akun Gmail sudah tidak aktif, Anda bisa menggantinya kapan saja.

Daftar Isi
Cara Mengganti Nomor HP di Gmail di PC
Cara Mengganti Nomor HP di Gmail di Android
Cara Mengganti Nomor HP Akun Gmail di iOS

Cara Mengganti Nomor HP di Gmail di PC
Cara pertama yang bisa Anda lakukan untuk mengganti nomor hp di akun Gmail, yaitu menggunakan PC/Komputer.

Untuk mengganti nomor hp, Anda bisa ikuti langkah-langkah berikut ini:
Buka Akun Google Anda dengan kunjungi situs https://myaccount.google.com
Klik pada bagian Info Pribadi
Pilih Info Kontak > Telepon.


Klik dibagian nomor telepon dan klik icon titik tiga pada bagian kanan nomor.


Klik Edit untuk mengganti nomor hp yang masih aktif.


Klik Update Nomor Telepon dan isi nomor hp yang baru lalu klik Selanjutnya

.

Klik dapatkan Kode.
Maka kode verifikasi akan dikirimkan oleh Google ke nomor yang baru saja Anda masukkan.

Cara Mengganti Nomor HP di Gmail di Android
Cara kedua yaitu dengan menggunakan smartphone Android. Berikut ini langkah-langkah mengganti nomor hp dengan Android:
Buka aplikasi Setelan.
Pilih pada bagian Google > Akun Google.
Pilih Info Pribadi.
Pada Info kontak, pilih Telepon
Klik Edit di bagian kanan nomor hp kemudian pilih Update nomor telepon.


Kemudian lanjutkan sesuai dengan perintah yang muncul.

Cara Mengganti Nomor HP Akun Gmail di iOS
Apabila Anda menggunakan smartphone iPhone atau iPad, Anda bisa ganti nomor hp di akun Gmail dengan cara berikut ini:
Buka aplikasi Gmail dari smartphone Anda.
Klik Menu atau icon tiga garis vertikal di sisi kiri.
Pilih Setelan > Akun Anda > Kelola Akun Google Anda. Apabila anda tidak mengunakan aplikasi Gmail, anda bisa kunjungi situs https://myaccount.google.com/
Pilih menu Info Pribadi.
Di bagian Info kontak pilih Telepon.
Klik Edit di bagian kanan nomor hp kemudian pilih Update nomor telepon.
Kemudian lanjutkan sesuai dengan perintah yang muncul.

Catatan : Apabila Anda Mengubah/Mengganti nomor telepon di akun Google, itu hanya memengaruhi beberapa layanan Google saja.
Dengan memperbarui atau mengganti nomor hp di akun Gmail / Google dengan nomor yang aktif, maka kemudahan akan Anda dapati.


Cara 2:
Buka Akun Google Anda dengan kunjungi situs https://myaccount.google.com


Pilih “see all setting”

Pilih account and import


Pilih other google account settings



Pilih personal info


Pilih phone


Pilih nomor hp




Pilih icon pensil



Isi password



Click icon pensil



Click update nomor, next


Clik get code


Masukan nomor baru hp


Pilih verify


Update no berhasil