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...

KEREN!!! 7 (Tujuh) Langkah Mudah dan Singkat Mengubah Judul Blog dengan Logo Pribadi

Senin, 07 Juni 2021

Assalamu alaykum, rekan-rekan fathinweb, semoga selalu dalam keadaan sehat. Masih dalam masa pandemi covid-19, sangat mungkin rekan-rekan masih aktif di rumah, baik yang bekerja maupun yang bersekolah. Sahabat Fathin akan selalu menemani dengan memberikan informasi yang insya Allah berguna untuk rekan-rekan semua.

Bagi yang memiliki blog, khususnya di blogger, pasti tidak asing dengan dengan logo blog yang membuat blog kita semakin unik. Kali ini sahabat fathin akan membeberkan cara mudah mengubah tulisan judul blog menjadi logo blog yang kita inginkan.

1. Membuat terlebih dahulu logo blog pribadi kita, contohnya ada di bagian atas halaman sahabat fathin.

2. Langkah kedua adalah kita login ke halaman admin blogger kita. Lalu kita masuk ke menu tata letak sehingga muncul seperti gambar berikut ini.

3. Langkah berikutnya. klik "edit" pada kolom header yang terdapat Judul blog kita. Dan akan muncul jendela baru seperti yang tampak berikut ini.

4. Pada menu opsi gambar, pilih "dari komputer anda" dan klik tombol pilih file.

5. Selanjutnya, pada jendela explorer yang muncul, pilih file gambar logo yang sudah anda buat sebelumnya, dan gambar akan otomatis diupload seperti yang tampak pada gambar berikut ini.

6. Ada tiga opsi penempatan yang bisa dipilih, penjelasan opsinya:

A. "Di balik judul dan keterangan" diperuntukan jika logo anda hanya berupa simbol tanpa nama, sehingga judul blog dan deskripsi masih ada di bawah gambar yang kita upload.

B. "Selain judul dan keterangan" jika anda tidak membutuhkan judul dan deskripsi yang lama sehingga yang tampak di header hanya gambar yang di upload.

C. Karena logo blog ini belum ada deskripsi atau keterangannya, maka saya pilih opsi ketiga, yang mana judul tidak akan muncul lagi hanya akan ada keterangan atau deskripsi blog.

7. Kalau sudah yakin klik "Simpan", dan logo sudah terpasang di header blog.

Semoga artikel ini bermanfaat buat rekan-rekan sahabat fathin.

SELAMAT MENCOBA DAN SEMOGA BERHASIL.. Wassalamu alaykum

 

comments | | Selengkapnya...

Cara Mudah Menambahkan/ Melampirkan Video Youtube di Blog

Kamis, 21 Mei 2020

Assalamu alaykum rekan-rekan blog rifqi, alias fathin web... Senang bisa kembali menulis postingan di blog tercinta ini. Semoga rekan-rekan semua selalu diberikan kesehatan selama pandemi Covid-19 saat ini.

Kali ini saya akan membahas cara mudah menambahkan video youtube di postingan atau di sidebar blog kita. Saran saya blog kita bisa dijadikan sarana buat share video youtube dari channel kita sendiri, agar viewer dari channel kita semakin bertambah.. Amiin  

Tampilan channel_rifqi

Nah saya kasih contoh channel youtube saya yakni channel rifqi, penampakan nya seperti gambar di atas. Yang terpenting kita copy dulu link video yang akan kita tambahkan atau kita lampirkan di blog kita. Nah berikut penampakan video yang akan di share. Bagi yang mau nonton Klik di sini ya.. 

1. Cara Pertama

• Dengan mengklik tab "Bagikan" biasanya rekan-rekan akan dibantu google untuk memposting video youtube, dan akan muncul window seperti berikut.

Membagikan video youtube

• 
  Selanjutnya rekan-rekan bisa mengklik opsi blogger, dan akan membuka tab baru blogger.com dengan akun yang sudah login sebelum nya. Kalau belum login sebaiknya login dulu ya. Berikut penampakannya.

Posting otomatis bantuan Youtube ke Blogger

• Untuk langsung publish atau menerbitkan postingan video youtube tersebut, rekan-rekan bisa langsung klik tombol "Terbitkan Entri", atau rekan-rekan bisa menambahkan beberapa kata-kata pujangga atau kata-kata mutiara baik di body postingan atau di Judul agar lebih menarik.

2. Cara Kedua

• Sebenarnya cara kedua adalah cara yang lebih fleksibel karena rekan-rekan bisa menempatkan video tersebut di postingan ataupun di sidebar. Coba perhatikan gambar sebelumnya di atas, pada tab "Edit HTML" rekan-rekan dapat melihat script berikut.

<iframe allowfullscreen="" frameborder="0" height="344" src="https://www.youtube.com/embed/WAisc-S_HrQ" width="459"></iframe>

• Selanjutnya rekan-rekan bisa mengcopy script tersebut dan meletakkan nya pada postingan maupun pada sidebar. Kostumisasi bisa dilakukan pada tinggi (height), lebar (width) ataupun mengganti video hanya dengan mengganti kode video seperti pada tulisan yang berlatar merah di atas.
• Dan selanjutnya video youtube kita siap disaksikan di blog kesayangan masing-masing.

Demikian tutorial singkat dan semoga bermanfaat. Jangan lupa untuk share jika tulisan ini dapat bermanfaat juga bagi yang lain. Kunjungin tutorial lainnya di blog rifqi. Assalamu alaykum warahmatulahi wabarakatuh

comments | | Selengkapnya...

Membuat Folder pada Halaman Depan (Home Screen) Zenfone

Selasa, 09 September 2014

Bagaimana cara membuat folder app di home screen ZenFone?

Untuk membuat folder yang berisi applikasi pada home screen ZenFone langkah-langkah yang dilakukan adalah;

1. Tekan dan tahan icon app.

2. Drag satu app ke app lain untuk membuat folder. Maka akan ada sebuah folder yang memiliki 2 app di dalamnya. Anda dapat mengisi sampai 16 apps pada sebuah folder.

Menambah aplikasi dalam folder

Untuk menambah aplikasi ke dalam sebuah folder, tekan dan tahan icon aplikasi. Kemudian drag icon aplikasi tersebut ke dalam folder tujuan.

Menghapus aplikasi dari folder

Untuk menghapus aplikasi dari sebuahfolderTekan dan tahan icon app. Drag satu app keluar dari folder ke home screen.

Mengganti nama folder 

Untuk mengganti nama folder, tap folder yang akan diganti nama. Kotak berwarna biru atau abu-abu akan muncul diatas folder dan ketik nama baru.

comments | | Selengkapnya...