Keren!! Begini Cara Mudah Membuat Scroll Box di Postingan Blog

Kamis, 16 Juni 2022

Assalamu alaykum rekan-rekan Fathin Web. Semoga kita semua selalu dalam keadaan sehat dan dalam lindungan Tuhan yang Maha Kuasa. Mungkin sebagian besar rekan-rekan sesama pemilik blog atau situs sudah tidak asing lagi dengan Scroll Box, namun untuk menyegarkan kembali dan untuk menambah kemampuan kita dalam hal editting blog, tmaka kali ini kita akan bahas bagaimana cara untuk membuat scroll box pada postingan di blog kita. Adapun gambaran tampilannya adalah sebagai berikut:

Untuk membuat scroll box di dalam postingan atau artikel kita di blog ikuti langkah-langkah berikut ini:

1. Setelah login di blogger dan masuk ke postingan kita. Klik menu paling kiri dan pilih opsi tampilah HTML <>, seperti gambar berikut ini.

2. Kemudian copy paste kode html di bawah ini. Ada dua jenis scroll yang dapat diaplikasikan di box tulisan anda yaitu scroll ke bawah dan scroll ke samping.

Kode untuk scroll ke bawah.

<div style="background-color: #fffff; border: 1px double rgb(0, 0, 0); height: 100px; overflow: hidden scroll; width: auto">

<p style="width: auto;">Isi tulisan anda di bagian ini</p>

</div>

Kode untuk scroll ke samping

<div style="background-color: #e4e4db; border: 1px double rgb(0, 0, 0); height: 100px; overflow: scroll hidden; width: 100%;">

<p style="width: 250%;">Isi teks/ tulisan anda di bagian ini, dapat berupa teks maupun kode html seperti pada tulisan ini</p></div>

Keterangan kode:

• overflow              : Fungsi utama scroll, gunakan "hidden scroll" untuk scroll ke bawah atau "scroll hidden" untuk scroll ke samping, atau cukup gunakan "scroll" untuk scroll ke bawah dan ke samping.
• height                    : tinggi scroll box, anda dapat mengatur tinggi box dengan mengubah nilai pixel (contoh : height:150px;)
• width                    : lebar scroll box dan lebar paragraph, pastikan untuk scroll ke samping lebar box pada bagian teks atau <p> lebih besar daripada box atau <div> (contoh : width:100%;)
• background-color  : warna latar box/ kotak scroll

BONUS

Scroll ke samping dan ke bawah:

 

<div style="background-color: #EFEFEF; border: 1px double rgb(0, 0, 0); height: 200px; overflow: scroll hidden; width: 75%;">

<p style="width: 200%;">

Isi teks/ tulisan anda di bagian ini, dapat berupa teks maupun kode html seperti pada tulisan ini. Yang perlu diperhatikan adalah saat anda menulis isi scroll box ini dengan kode html, maka ketikkan isi kode html itu setelah ada mengembalikan tampilan input ke dalam "Tampilan menulis".

</p>

</div>

Demikian cara membuat scroll box di postingan blog semoga dapat bermanfaat membuat postingan kita lebih menarik. Wassalam

comments | | Selengkapnya...

Cara Mudah Menambahkan Widget Whatsapp pada Blog Pribadi Anda

Senin, 13 Juni 2022

 

Assalamu alaykum rekan-rekan Fathinweb. Semoga kita semua selalu dalam keadaan sehat dan dalam lindungan Tuhan Yang Maha Kuasa.

Kali ini kita akan coba membahas cara menambahkan widget whatsapp pada blog pribadi anda. Widget ini menggunakan fitur dari website whatshelp. Anda bisa langsung ke situs tersebut, namun di sini kita akan coba dengan menuliskan kode html pada bilah widget pada halaman blog  anda. Berikut langkah-langkah yang perlu dilakukan:

1. Setelah login pada akun blogger anda, pilih menu tata letak kemudian klik "+ Tambahkan gadget" pada bilah sidebar

2. Kemudian pilih opsi "HTML/Javascript, kemudian akan muncul jendela konfigurasi HTML/Javascript.

3. Kosongkan bagian Judul, kemudian pada konten ketik kode javascript berikut ini:

<!-- GetButton.io widget -->

<script type="text/javascript">

    (function () {

        var options = {

            whatsapp: "+62812XXXXXX", // WhatsApp number

            call_to_action: "Message us", // Call to action

            button_color: "#FF6550", // Color of button

            position: "right", // Position may be 'right' or 'left'

        };

        var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;

        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';

        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };

        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);

    })();

</script>

<!-- /GetButton.io widget -->

4. Pada tulisan berwarna merah ganti dengan nomor whatsapp yang ingin ditautkan. Kemudian pada tulisan berwarna biru ganti dengan kata-kata versi anda sendiri. Pengaturan lainnya:

• Button_color : warna background dari tulisan "messagu us"
• Position (right/left) : posisi widget whatsapp yang ingin anda letakkan.

5. Kemudian setelah semua pengaturan sesuai klik tombol "Simpan". Rekan-rekan bisa mengecek kembali apakah tombol whatsapp pada blog atau situs sudah berfungsi dengan baik.

Berikut penampakannya:

Untuk mencoba aplikasi messenger yang lain rekan-rekan fathinweb dapat langsung ke situs Whatshelp dengan mengklik LINK INI. Semoga bermanfaat dan selamat mencoba.

comments | | Selengkapnya...

Belajar Dasar Bahasa Pemograman HTML

Selasa, 17 September 2013

Assalamu alaykum. Selamat malam rekan-rekan sahabat fathin. Semoga kita selalu dalam keadaan sehat wal afiat dan tidak kurang suatu apa pun. Amiiin...

Bagi rekan-rekan blogger, mungkin tidak asing lagi dengan istilah HTML atau HyperText Markup Language. HTML merupakan suatu bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.

Dan Web Browser sendiri merupakan program yang dapat menterjemahkan bahasa HTML dan menampilkannya dalam sebuah halaman web lengkap sesuai dengan kode-kode pada dokumen HTML. Beberapa web browser yang ada saat ini seperti, Internet Explorer, Mozilla Firefox, Opera, Chrome, Safari, dan lain-lain.

Format Dasar Bahasa HTML

Untuk memulainya, kita akan menggunakan program Notepad untuk menyimpan semua pekerjaan kita nantinya. Format dasar bahasa HTML adalah sebagai berikut:

<html>
<head>
<title>Judul Websiteku</title> 
</head> 
<body> 
Ini adalah bagian dari Halaman HTML pertamaku 
</body> 
</html>

Sekarang silakan salin kode di atas ke dalam dokumen Notepad kemudian simpan dengan nama "Website.htm" dengan save as type-nya "All Files". Untuk menampilkannya, dari web browser, klik open kemudian buka dokumen yang tadi disimpan. 

Elemen HTML

Elemen HTML adalah setiap bagian dari kode html yang terdiri dari tag pembuka, isi, dan tag penutup. Sebagai contoh kode di atas terdiri dari empat elemen, yaitu:

• <html>  </html>
• <head> </head>
• <title> Judul Websiteku</title>
• <body> Ini adalah bagian dari Halam HTML pertamaku </body>

Pada kode di atas, terdapat empat tag, yaitu html, head, title, dan body. Tag penutup ditandai dengan penambahan simbol "/" di depan nama tag.

Fungsi elemen html adalah tempat dari isi keseluruhan dokumen html, sehingga seluruh isi dokumen html selalu berada di antara tag <html> dan </html>. Fungsi dari elemen head adalah sebagai informasi dari dokumen html yang dibuat. Dan fungsi dari elemen body adalah sebagai isi dari dokumen html yang akan ditampilkan dalam halaman web.

Atribut HTML

Atribut HTML merupakan informasi tambahan yang ditambahkan pada elemen html yang berupa format font ataupun teks, gambar, maupun link.

Penutup

Demikian pemamparan dari saya mengenai Dasar Bahasa Pemerograman HTML. Insya Allah saya akan tetap melanjutkan tulisan ini seiring saya juga sedang mendalami bahasa pemrograman ini. Semoga Bermanfaat..

comments | | Selengkapnya...