Cara Memasang Marquee Text di Blog

Cara Memasang Marquee Text di Blog - Hallo gaess! ketemu lagi nih sama ane, hihihi. Udah berapa hari yak nggak update, maklum orang sibuk hehe. Ok gaess! di tutorial kali ini saya akan membeberkan cara mudah membuat dan memasang tulisan berjalan running text (marquee) di blog, yang pada umumnya disebut dengan MARQUEE.

Apa itu marquee?

Marquee adalah sebuah kode html yang digunakan untuk menghasilkan sebuah transisi atau efek tulisan dengan berjalan.

Lebih dari itu, fungsi dari tag html marquee ini bisa kita manfaatkan untuk sebuah link atau postingan khusus yang ingin Sobat tampilkan di tempat tertentu. Lalu untuk cara membuatnya gimana ya? pertanyaan yang bagus. Cara membuat tulisan berjalan (marquee) ini cukup mudah, yaitu kita bungkus "TEKS" yang mau di jalankan dengan kode <marquee> ISI TEKS SOBAT </marquee>.

Cukup mudah bukan? ya, untuk selebihnya Sobat bisa lihat beberapa type dan efek marquee dibawah ini. Dan untuk memasangnya cukup Sobat letakkan di mana saja, asal di situ masih terdapat markup html dsb.

Cara Memasang Marquee Text di Blog

<marquee> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

<marquee direction="right"> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

<marquee direction="down"> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

<marquee direction="up"> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

<marquee behavior="alternate"> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

Variasi Marquee Text di Blog

<marquee scrolldelay="700"> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

scrolldelay="500" Pengaturan jeda dalam mil detik (700=0,7) 1 detik = 1000

<marquee loop="4"> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

loop="4" Pengaturan pengulangan, Jika loop=4 maka teks marquee akan tampil 4 kali, setelah itu menghilang

<marquee width="50%">Letakan Teks Sobat Disini by Viham Blog</marquee>
 Letakan Teks Sobat Disini by Viham Blog 

width="lebar" Pengaturan lebar dengan satuan persen atau pixel

<marquee bgcolor="green"> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

bgcolor="warna" Pengaturan warna latar belakang

<marquee title="Buka sitik Joss">Letakan Teks Sobat Disini by Viham Blog</marquee>
Letakan Teks Sobat Disini by Viham Blog

title="pesan" Pengaturan pesan yang akan di munculkan ketika mouse mengarah ke teks marquee

<marquee scrollamount="17">Letakan Teks Sobat Disini by Viham Blog</marquee>
Letakan Teks Sobat Disini by Viham Blog

scrollamount="angka" Pengaturan speed atau kecepatan berjalannya teks marquee

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"> Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

onmouseover="this.stop()" onmouseout="this.start()" Pengaturan untuk berhenti apabila cursor mouse mendekati teks marquee

<marquee direction="down" height="100" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href="http://vihamblog.blogspot.com/2017/04/cara-memasang-marquee-text-di-blog.html"> Letakan Teks Sobat Disini by Viham Blog </a>
</marquee>

 Letakan Teks Sobat Disini by Viham Blog 

Variasi text marquee dengan Backlink

<marquee bgcolor="blue" style="font-family: impact; font-size:24px; color:#19B5FE;" > Letakan Teks Sobat Disini by Viham Blog </marquee>
 Letakan Teks Sobat Disini by Viham Blog 

Variasi text marquee Backgraund dan Color Text

Cara Memasang Code Marquee?

Langkah - langkah untuk memasang kode marquee ini cukup mudah kok Sobat, sama persis kita membuat atau menambahkan script pada Gadget ataupun Elemen Html.

WIDGET - Masuk ke Tata Letak - Tambah Gadget - Pilih gadget HTML/JAVASCRIPT

ARTIKEL - Masuk ke halaman tulis post - Pilih Mode HTML

Gampang kan Sobat? untuk kreasi lainnya silakan Sobat Blogger kembangkan sendiri ya. Sedikit tutorial dari saya Cara Memasang Marquee Text di Blog, semoga bermanfaat.

Read more

Cara Membuat Tombol Demo dan Download Flat UI Part I

Cara Membuat Tombol Demo dan Download Flat UI Part I - Viham Blog - Mungkin sudah banyak sekali blog-blog lain yang mengulas tentang cara ini, membuat tombol (button) Demo dan Download Flat UI. Namun karena di Viham Blog, masih belum ada ya terpaksa saya posting lagi hehehe.

Cara untuk membuat dan memasang tombol Demo dan Download ini cukup mudah, silakan sobat ikuti langkah-langkah di bawah ini:

Cara Membuat Tombol Demo dan Download Flat UI Part I

1. Masuk ke Blogger - Template - Edit HTML - Kemudian letakan kode CSS dibawah ini di atas ]]></b:skin>

/* Tombol Demo dan Download by Viham Blog */
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#3498db!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#e74c3c!important;background:0}
.buttonx:active{position:relative;top:1px}

2. Gunakan kode markup dibawah ini, untuk memanggil kode di postingan. Jika sobat belum paham disaat sobat membuat artikel dan mau menambahkan tombol Demo dan Download, silakan tambahkan kode dibawah ini lewat HTML bukan Compose Post.

<div style="text-align: center;margin: 100px 0;">
<a class="buttonx" href="vihamblog.blogspot.com" target="_blank">Demo</a>
<a class="buttonx" href="vihamblog.blogspot.com" target="_blank">Download</a>
</div>

Demo

Baca juga: Memasang Share Button Telegram di Blog

Demikian tutorial untuk menambahkan Tombol Demo dan Download Flat UI Part I di blog, semoga bermanfaat.

Read more

Memasang Share Button Telegram di Blog

Memasang Share Button Telegram di Blog - Viham Blog - Dengan semakin berkembangnya teknologi di platform aplikasi chatting-an social media, baik di Android maupun Dekstop. Tombol share di media blog/website pun bertambah, seperti yang akan saya bahas kali ini, yaitu cara membuat dan memasang button (tombol) share telegram di blog AMP dan non AMP.

Cara Memasang Telegram Share Button

For Blogger Non AMP

Silakan sobat masuk ke akun Blogger - Template - Edit HTML - Kemudian taruh kode dibawah ini sesuai kebutuhan, artinya bebas diletakan dimana saja, asal jangan dirumah ya sobat, hehe.

Buat icon dan ukuran, bisa di sesuaikan dengan selera.

 For Blogger AMP



Apabila sobat, ingin menampilkan tombol share button ini pada mobile  saja, silakan tambahkan kode dibawah ini:



Baca juga: Fungsi Tag Kondisional untuk Elemen Blog dan Web

Sangat sederhana tutorial cara Memasang Share Button Telegram di Blog, semoga bermanfaat :-).

Read more

Fungsi Tag Kondisional untuk Elemen Blog dan Web

Fungsi Tag Kondisional untuk Elemen Blog dan Web - Viham Blog - Di kalangan blogger mungkin ada yang tidak tau akan hal ini, sebab tidak semua pengguna blogger menggunakan Tag Kondisional pada blognya.

Tag Kondisional bisa diartikan sebagai gembok untuk mengunci sebuah kamar tertentu, kenapa? Ya, karena tag kondisional ini berguna untuk menampilkan elemen blog/website di content tertentu atau bisa disebut dihalaman tertentu.

Fungsi dari Tag Kondisional ini untuk semua jenis kode yang ada pada blog/web, baik Widget, CSS, HTML. Javascript, Jquery, dan type-type elemen lainnya. Kelebihan dari Tag Kondisional bisa membantu pemilik blog untuk memaksimalkan performance webnya. Baik dari segi halaman dan penampilan.

Disini, apakah Sobat sudah tau cara memasang dan menerapkan kode Tag Kondisional ini? kalau belum tau, Sobat bisa ikuti sedikit langkah-langkah dibawah ini serta cara penerpan kode Tag Kondisional-nya.

Beberapa Kode Tag Kondisional

Tag Kondisional di Halaman Depan (Homepage)

Tag Kondisional di Halaman Item (Postingan)


Tag Kondisional di Halaman Statis


Tag Kondisional di Halaman Index


Tag Kondisional di Halaman Label


Tag Kondisional di Halaman Terterntu


Tag Kondisional di Halaman Errorpage 404


Tag Kondisional di Halaman Arsip (Archive)


Beberapa Tag Kondisional diatas, selain menampilkan bisa juga untuk menyembunyikan. Seperti menampilkan di halaman dan menyembunyikan di halaman. Caranya pun cukup mudah karena tinggal mengganti kode == dengan kode !=. Jadi jika sobat ingin menyembunyikan elemen tertentu pada blog/website silakan ganti beberapa kode Tag Kondisional diatas seperti dibawah ini:

Penerapan Menyembunyikan Elemen dengan Tag Kondisional

Menampilkan


Menyembunyikan

Contoh Penerapan Tag Kondisional pada Widget Blog

Menampilkan Widget di Halaman Depan (Homepage)

Menyembunyikan Widget di Halaman Depan (Homepage)


Mungkin cukup segitu dulu ya Sobat, dan contoh diatas hanya lah contoh sederhana dari saya, jadi silakan Sobat kembangkan lagi untuk mendapatkan hasil yang maksimal dalam membuat blog lebih ringan.

Baca juga: Cara Memasang Tombol Smooth Back To Top di Blog

Jika ada kesalahan atau pertanyaan, jangan malu-malu untuk mengisi kolom komentar di bawah ini, ya? dan cukup sekian tutorial dan tips Fungsi Tag Kondisional untuk Elemen Blog dan Web. Semoga bermanfaat.

Read more

Cara Memasang Tombol Smooth Back To Top di Blog

Cara Membuat dan Memasang Tombol Smooth Back To Top di Blog - Viham Blog, Mungkin cara ini sudah ada di tahun yang lalu. Namun dengan berkembangnya para pengguna Blogger, saya sengaja membuat kembali tips Cara Memasang Tombol Smooth Back To Top di Blog dengan mudah dan cepat.

Pertanyaan "Apa sih fungsi tombol back to top ini untuk pengguna blogger?" Ya, fungsi dari tombol back to top ini di blog. Sebagai langkah cepat atau navigasi saat kita membaca artikel yang panjang tentunya ke bawah kan ya? otomatis kita akan kembali lagi ke atas menggunakan keyboard atau mouse.

Dengan adanya tombol back to top ini di blog, akan memudahkan pengguna (Audiens) juga pemilik blognya. Secara, dengan sekali klik saja sobat sudah bisa kembali ke halaman content atas artikel tanpa ribert-riber menggunakan mouse dan jari tangan.

Tombol yang simpel tapi manfaatnya banyak, jika Sobat mau memasang tombol back to top ini, silahkan ikuti langkah-langkah dibawah ini.

Cara Memasang Tombol Smooth Back To Top di Blog

1. Login ke akun Blogger ↣ Template ↣ Edit HTML ↣  Kemudian letakan kode dibawah ini tepat sebelum

2. </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

3. </style>

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#22A7F0;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

4. </body>

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-angle-double-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

Kalau sudah semua, Sobat simpan perubahan template dan lihat hasilnya.

• Demo

Gimana? keren kan? Ya, kalau Sobat mau ada sedikit efek! silakan ganti Javascript (4) diatas dengan Javascript dibawah ini.

Baca juga : Cara Menghilangkan atau Menghapus Atribusi di Blog 

Bounce Effect Contents

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-angle-double-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

• Demo

Hemm, akhirnya selesai juga ^_^, untuk color bisa Sobat sesuaikan dengan selera Sobat sendiri. Dan kali ini, sekian disini dulu ya Sobat untuk tutorial Cara Memasang Tombol Smooth Back To Top di Blog, Semoga bermanfaat.

Read more

Cara Menghilangkan atau Menghapus Atribusi di Blog

Cara Menghilangkan atau Menghapus Atribusi di Blog - Atribusi ini sering sekali kita jumpai pada waktu awal membuat blogger, karena saat membuat blog baru secara otomatis dari template bawaan blogger akan memasang atribusi secara sendirinya.

Kalau sekarang kebanyakan template yang di pakai oleh para kalangan blogger, adalah template pihak ketiga. Namun tetap saja biasanya pada template ketiga pun tertentu, masih ada atribusinya. Pertanyaan "Kalau di hilangkan apa bisa mas?" | Bisa, caranya pun banyak dari disembunyikan atau dihapus secara permanen. Tapi kita bisa juga menambahkan atribusi lagi kalau mau, karena di pengaturan Tata Letak fitur menambahkan atribusi bawaan ada.

Sebagai seorang manusia, pasti selera masing-masing orang berbeda. Ada yang atribusi-nya dibiarkan saja, namun ada juga yang dari awal lihat langsung ingin menghapusnya. Mungkin mereka atau kamu Sobat memiliki alasan tertentu akan hal ini, dengan begitu Viham Blog akan memberi tahu tips Cara Menghilangkan atau Menghapus Atribusi di Blog dengan mudah  dan cepat.

Contoh tampilan Atribusi Blogger

Cara Menghilangkan atau Menghapus Atribusi di Blog

Cara I: Dengan menambahkan kode CSS

Login ke akun Blogger ↬ Template ↪ Edit HTML ↬ Kemudian tambahkan kode dibawah ini, tepat sebelum kode </style>

#Attribution1 {

height:0px;

visibility:hidden;

display:none

}

Cara II: Dengan merubah kode kunci widget

Login ke akun Blogger ↬ Template ↪ Edit HTML ↬ Cari kode dibawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Attribution1' locked='true' title='Atribusi' type='Attribution' visible='true'>

Lalu ubah kode "Locked='True' menjadi "Locked='false'" 

Fungsi dari True adalah aktif, dan False adalah Non Aktif. Jika sudah silakan Sobat simpan perubahan template dan masuk ke Tata Letak ↬ Cari widget Atribusi, seperti gambar dibawah

Kemudian klik Edit dan Hapus, lihat hasilnya, Gampang kan!

Baca juga: Cara Memasang Auto Like Facebook di Blogger

Akhirnya beres juga, cukup demikian tutorial Cara Menghilangkan atau Menghapus Atribusi di Blog. Semoga bermanfaat ya sobat.

Read more

Cara Membuat Slot Iklan Adsense di Tengah Postingan

Cara Membuat Slot Iklan Adsense di Tengah Postingan - Adsense? siapa sih yang tidak tau Google Adsense. Semua para kalangan blogger tau akan hal ini, karena salah satu tujuan mereka bermain blogger, ya bisa bekerja sama dengan Gogle Adsense, hihi.

Dengan ini, Viham Blog akan membahas dalam tata letak slot iklan adsense? salah satunya ya, gimana sih cara memasang dan membuat iklan adsense ada di tengah postingan artikel? Sebenarnya caranya cukup mudah kok Sobat, cukup dengan menambahkan beberapa kode. Tapi kalau tidak tau ya sulit kan? hehe. Baiklah cukup sampai disini saja basa-basinya, silakan SObat ikuti tips dan trik Cara Membuat Slot Iklan Adsense di Tengah Postingan berikut ini.

Cara Membuat Slot Iklan Adsense di Tengah Postingan

1. Login ke akun Blogger ↦ Pilih Template ↦ Edit HTML ↦ kemudian tekan tombol CTRL+F ↦ Ketik di kolom dengan kode <data:post.body/>

Di dalam template, pasti ada beberapa kode <data:post.body/> tersebut, namun SObat bisa pilih salah satu dan ganti-ganti sampai iklan-nya tampil di tengah halaman postingan

 2. Salin kode diatas dengan kode dibawah ini

<div expr:id='&quot;ads1&quot; + data:post.id'/>

<div class='googleads'>

<!-- pasang kode iklan yang sudah diparse di sini -->

</div>

<div expr:id='&quot;ads2&quot; + data:post.id'><p><data:post.body/></p></div>

<script type='text/javascript'>

var obj0=document.getElementById(&quot;ads1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;ads2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}

</script>

Silakan SObat tambahkan kode iklan pada kode yang ditandai diatas

3. Tambahkan kode CSS berikut ini tepat di atas kode </style>. Fungsinya agar iklan bisa terlihat rapi dan bagus.

.googleads{margin:65px auto;text-align:center}

Jika sudah, simpan perubahan dan ndelok en dewe hasilnya.

Baca juga: Cara Menyembunyikan Icon Tang dan Obeng di Blog

Kelebihan dari kode diatas, tidak hanya untuk iklan Google Adsense. Namun bisa juga untuk merek  iklan-iklan lainnya. Salam Hebat! Terimakasih ya, sudah membaca tutorial Cara Membuat Slot Iklan Adsense di Tengah Postingan.

Read more