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 Mudah Membuat Post Artikel Agar Tidak Bisa di Copy Paste

Cara Mudah Membuat Postingan Artikel Agar Tidak Bisa di Copy Paste - Whatsapp guys! hehehe. Apa jadinya ya, kalau seumpama Sobat membuat sebuah konten blog, yaitu dalam artian artikel, dimana letak artikel itu sangat panjang dan bagus. Eh, tiba-tiba ada yang copas (copy paste) dan tidak mencantumkan sumber?

Apa jadinya ya Sobat? kalau terjadi begitu. Tapi di satu sisi ada baiknya juga kalau kita meng-ikhlas kan saja, karena kenapa? sebab! dengan banyaknya orang meng-copy artikel kita berarti apa-apa yang telah kita tulis itu bermanfaat dan berguna bagi mereka dan kita sendiri. So, santai saja ya, toh kita tidak kekurangan apa-apa, yang penting tidak merusak dan membuat sara.

Mungkin sudah tidak 1 atau 2 orang yang bermain dalam kehidupan plagiat konten, tapi ribuan bahkan milyaran. Namun mereka mempunyai satu sisi yang berbeda, yaitu tehnik dan cara. Dengan semakin maraknya kasus copy paste artikel, tentu ada cara untuk mengatasinya. Ya, memang bukan 99% baik, namun setidaknya bisa mencegah sedikit dari hal yang terjadi yaitu meng-plagiat artikel, meng-copy paste artikel dsb.

Ada beberapa cara untuk mengatasi agar artikel postingan blog tidak bisa di copy paste oleh orang lain, untuk itu Sobat bisa pilih yang mana saja, sesuaikan dengan selera. Mau tau caranya? yuk simak kebawah.

3 Cara Agar Postingan Artikel Blog Tidak Bisa di Copy Paste

1. Menggunakan Fungsi (True dan False) JavaScript

Langka-langkah nya, Sobat masuk ke akun Blogger - Pilih Tema - Edit HTML - Salin semua kode dibawah ini, dan letakan tepat di atas kode </head>

<SCRIPT type=”text/javascript“>
if (typeof document.onselectstart!=”undefined”) {
document.onselectstart=new Function (“return false”);
}
else{
document.onmousedown=new Function (“return false”);
document.onmouseup=new Function (“return true”);
}
</SCRIPT>/code>

Simpan Template dan Cek hasilnya ^_^.

Apabila ingin men-nonaktifkan, ganti "FALSE" dengan TRUE"

2. Mencatumkan Sumber Secara Otomatis

Penjelasannya, apabila ada seseorang mencoba copy paste konten Sobat, maka secara otomatis akan terdapat link sumber secara otomatis, yang berupa link dibawah artikelnya.

Langkah-langkahnya, Sobat login ke akun Blogger - Pilih Tema - Edit HTML - Copy semua kode dibawah lalu letakan diatas kode </body>

<script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Artikel ini berasal dari Blog:"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://infonetmu.googlecode.com/files/sumber-otomatis.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script>

Simpan Template dan Cek langsung hasilnya :-).

Ganti kata yang saya tandai diatas, dengan kata yang Sobat inginkan.

3. Menggunakan CSS Manual

Tehnik ini yang saya paling suka, sebab kelebihannya kita bisa memprotect text di bagian tertentu. Maksudnya Sobat bisa pilih bagian mana saja yang bisa di copy dan tidak bisa di copy paste.

Langkah-langkahnya cukup mudah kok, Sobat masuk ke akun Blogger - Tema - Edit HTML - Kemudian salin semua kode CSS di bawah ini, dan letakan diatas kode </style> atau ]]></b:skin>

/* Script Agar Blog Tidak Bisa Di Copy Paste */
.post-outer {
-webkit-touch-callout:none;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}

/* Script Agar Blog Bisa di Copy Paste Pada Bagian tertentu */
.post blockquote,.post pre,.post code{
  -webkit-touch-callout:text;
  -khtml-user-select:text;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
}

Untuk penerapan nya, agar blog bisa di copas pada bagian tertentu, Sobat bisa tambahkan markup. Contohnya dibawah ini saya tambahkan markup pada bagian komentar agar bisa di copy paste.

/* Script Agar Blog Bisa di Copy Paste Pada Bagian tertentu */
.comments_vihamblog p, .post blockquote,.post pre,.post code{
  -webkit-touch-callout:text;
  -khtml-user-select:text;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
}

Jangan lupa untuk Simpan Template, dan Cek hasilnya pada Blog Sobat.

Baca juga: Cara Membuat Tombol Demo dan Download Flat UI Part I di Blog

Jangan segan untuk berkomentar ya Sobat, sekian dulu tutorial dan tips Cara Mudah Membuat Post Artikel Agar Tidak Bisa di Copy Paste. 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

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

Cara Menyembunyikan Icon Tang dan Obeng di Blog

Cara Menyembunyikan Icon Tang dan Obeng di Blog - Sering sekali Para Sobat blogger kebingungan dengan adanya icon tang dan obeng pada blog-nya, cara hapusnya gimana ya? ganggu banget deh! di tampilan?

Sebagian dari mereka tidak tau mungkin? kalau sebenarnya fungsi dari icon tang dan obeng ini bermanfaat banget, yaitu tombol cepat untuk widget-widget saat kita mau mengedit salah satu dari widget tersebut.

Selain itu juga, icon tang dan obeng ini tidak akan terlihat oleh orang lain selain pemilik blog, So, santai ajalah.. tapi ya selera orang kan berbeda-beda juga kan? Hemm. Baiklah kini Viham Blog akan membeberkan cara menghilangkan atau menyebunyikan icon tang dan obeng di blog dengan mudah.

Cara Menyembunyikan Icon Tang dan Obeng di Blog

Langkah pertama, masuk ke akun blogger Sobat ↦ Template ↦ Edit HTML ↦ Cari kode </style> ↦ Salin semua kode dibawah ini, taruh tepat diatas kode </style> tadi.

.quickedit{

display:none;visibility:hidden;}

Atau bisa juga dengan menghapus kode dibawah ini

<b:include name='quickedit'/>

Baca Juga : Cara Memasang Auto Like Facebook di Blogger

Sesudah melakukan cara diatas, simpan template dan ndelok en dewe hasilnya. Semoga dengan adanya tutorial Cara Menyembunyikan Icon Tang dan Obeng di Blog, bisa membantu Sobat semua ^_^ terimakasih.

Read more