Menambah Tombol Go To Top Atau Scroll To Top Pada Pojokan Bawah

Menambah Tombol Go To Top Atau Scroll To Top Pada Pojokan Bawah, ini maksudnya untuk memudahkan pengunjung blog untuk kembali ke postingan atas setelah mereka scroll ke bawah.

Karena namanya Go To Top Atau Scroll To Top maka sebaiknya penempatannya ada di bawah, dan biasanya ada di pojok bawah kanan.

Ada banyak model dari tombol Go To Top Atau Scroll To Top ini, ada yang memakai Font Awesome, ada juga yang menggunakan jenis icon seperti ionicons dan lainnya.

Pada kesempatan ini saya akan mencoba menggunakan gambar saja biar lebih mudah dan lebih simpel dalam penerapannya.

Langsung saja kita siapkan kopi dan udud nya... eh maksudnya kita siapkan amunisinya yaitu Style CSS, code HTML dan Javascript nya.

Pertama kita siapkan Style CSS nya, ini fungsinya untuk mengatur letak tombol Go To Top Atau Scroll To Top, agar selalu berada di pojok kanan bawah dari blog kita.

<style>
#myBtnSc {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px; /* Some padding */
  border-radius: 100px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  
}
</style>

Yang kedua kita siapkan code HTML nya, penempatan code ini tidak akan mempengaruhi letak tombol Go To Top Atau Scroll To Top, karena pada style CSS sudah kita seting position: fixed, bottom: 20px; dan right: 30px; Jadi posisi tombol nanti akan tetap berada pada pojok kanan bawah. Untuk alamat gambarnya bisa diganti sesuai selera temen2 Blogger.

<img width="30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheRavZQ1ahyphenhyphenq29tZ9KZFPc8Uar4Ysti18xyNCg8tyjhHmcOZLHpZEcQWNkbD_Hm3qBI0Qol7BWAmPv9kbEHkW6t93GpXiujZLvJFRrgNG5Y1F-yWO1olJt0n4RsEFCndqONoaAscyYwx7F/s72/top.png" onclick="topFunction()" id="myBtnSc" title="Go to top" />

Ok yang terakir kita siapkan Javascript nya, ini nanti fungsinya untuk eksekusi scroll ke atas saat tombol kita klik, dan juga berfungsi untuk menampilkan serta menyembunyikan tombol Go To Top Atau Scroll To Top. 

<script>
//Get the button:
mybutton = document.getElementById("myBtnSc");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  $('html, body').animate({scrollTop:0}, 'slow');
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>

Nah, sudah lengkap amunisi kita, langsung saja kita coba eksekusi pada template kita. Untuk penempatan ketiga code diatas tidak harus terpisah, bisa juga di jadikan satu pada widget kalau kita memakai blogger. Namun kebanyakan penempatan code ini berada di atas </body>.

"Happy Coding"

Tool Atau Alat Hitung Karakter Huruf Dan Kata Di Postingan

Alat Hitung Karakter Huruf Dan Kata

Tool Atau Alat Hitung Karakter Huruf Dan Kata Di Postingan ini adalah alat untuk menghitung berapa banyak kata pada postingan yang kita buat.

Kenapa harus kita hitung?

Karena katanya sih Mesin Pencari itu lebih suka pada postingan yang banyak mengandung kata-kata.

Ada juga yang bilang minimal harus ada 300 kata pada postingan yang kita buat, namun ada juga yang bilang minimal 600 kata.

Kalo menurut saya pribadi sih tergantung seberapa bagus postingan yang Anda buat dan benar-benar di butuhkan orang banyak. Semakin di butuhkan otomatis akan mempengaruhi pengunjung pada Blog Anda.

Yang kedua adalah seberapa banyak temen Anda, atau sebutan lain adalah subreker atao follower Anda. Ini akan sangat berpengaruh pada pengunjung Blog Anda.

Alat Hitung Karakter Huruf Dan Kata ini sangat sederhana, Anda tinggal copy dan paste ketikan anda pada kotak dibawah, setelah itu klik tombol "Hitung", dan langsung akan muncul jumlah Karakter serta berapa banyak kata dalam postingan Anda.

Semoga saja ini bisa bermanfaat, untuk menambah koleksi Tool dalam membuat postingan yang berkualitas.

"Salam Blogger"

Jumlah Karakter

Jumlah Kata

Copy Postingan Disini

Cara Menambah Related Post atau Posting Terkait Paling Gampang

Cara Menambah Related Post atau Posting Terkait Paling Gampang

Coming soon

Cara Nambahi Breaking News Atau Ulasan Berita Di Template Blogger

Cara Nambahi Breaking News

Cara Nambahi Breaking News Atau Ulasan Berita Di Template Blogger, judul ini kayaknya udah nggak asing bagi kebanyakan blogger. Namun sedikit saya jelaskan arti dari Breaking News.

Menurut wikipedia.org Breaking News juga dikenal sebagai laporan khusus atau buletin berita, adalah masalah saat ini yang penyiar merasa perlu menyela jadwal pemrograman dan/atau berita saat itu untuk melaporkan rinciannya. Penggunaannya juga diterapkan pada cerita yang paling signifikan pada momen tersebut atau cerita yang sedang diliput secara langsung. Ini bisa jadi sekadar sebuah cerita yang punya kepentingan luas bagi pemirsa dan memiliki dampak kecil di sisi lain. Sering kali, berita sela digunakan setelah jaringan berita melaporkan cerita ini. Jika cerita belum pernah dilaporkan sebelumnya, grafis dan frasa "baru saja masuk" kadang-kadang digunakan sebagai gantinya.

Wes pokok ngunu kui lah, langsung aja kita siapkan codingnya, pertama kita siapkan Style CSS. ini fungsinya untuk mengatur tampilan tata letak Breaking News dan ukuran yang pas pada template Blogger kita.

<style> 
            .ticker_wrap{
              background:#ebebeb;
              border-top:1px solid rgb(60, 60, 60);
              border-bottom:1px solid #dadada;
              height:40px;
              padding:4px 0 3px 0;
            }
            #beakingnews {
              border-bottom: 1px solid #DDDDDD;
              border-top: 1px solid #DDDDDD;
              height: 31px;
              line-height: 25px;
              /*margin: 0px 20px 0;*/
              overflow: hidden;
              padding: 2px;
              background:#fff;
            }
            #recentpostnews li a {
              font-family: sans-serif;
              font-weight: bold;
              font-size: 12px;
              color: #333;
            }
            #beakingnews .wdxbreaking
            {
              background: none repeat scroll 0 0 #CD2122;
              border-bottom: 1px solid #CD2122;
              border-right: 1px solid #DDDDDD;
              border-top: 1px solid #CD2122;
              border-left: 1px solid #CD2122;
              color: #FFFFFF;
              display: block;
              float: left;
              font-family: sans-serif;
              font-weight: bold;
              font-size: 12px;
              margin: -3px 5px 0 -1px;
              padding: 2px 7px;
              position: absolute;
            }
            #recentpostnews {
              float: left;
              /*margin-top: 0;*/
            }
            #recentpostnews ul,#recentpostnews li{list-style:none;margin-left:25px;padding:0}
	</style>

Copy code diatas dan letakkan di atas </head> pada template Blogger anda. Code diatas bisa anda rubah sesuai dengan selera.

Langkah yang kedua, kita copy code HTML nya dan letakkan dimana nanti Breaking News akan di tampilkan. Kebanyakan letak nya ada di atas menu. Atau kita bisa menambah widget baru dan paste code dibawah ini pada isi widget. sehingga bisa kita pindah-pindah sesuai keinginan.

<div class="ticker_wrap">
    <div id="beakingnews">
        <span class="wdxbreaking">News</span>
        <div id='recentpostnews'>
        </div>
    </div>
</div>

Langkah yang terakhir adalah menempatkan Javascript nya, usahakan penempatan Javascript ini berada di bawah code HTML diatas. Bisa di letakkan tepat di bawahnya atau bisa juga di atas </body> pada template Blogger anda.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
            //<![CDATA[
            $(document).ready(function () {
              var url_blog = 'https://om-wan.blogspot.com/', // Ganti dengan alamat blog kamu
                  numpostx 	= 50; // Maximum Post
              $.ajax({
                url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
                type: 'get',
                dataType: "jsonp",
                success: function(data) {
                  var posturl, posttitle, skeleton = '',
                      entry = data.feed.entry;
                  if (entry !== undefined) {
                    skeleton = "<ul>";
                    for (var i = 0; i < entry.length; i++) {
                      for (var j=0; j < entry[i].link.length; j++)
                      {
                        if (entry[i].link[j].rel == "alternate")
                        {
                          posturl = entry[i].link[j].href;
                          break;
                        }
                      }				
                      posttitle = entry[i].title.$t;
                      skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
                    }
                    skeleton += '</ul>';
                    $('#recentpostnews').html(skeleton);
                    
                    function tick(){
                      $('#recentpostnews li:first').slideUp( function () { $(this).appendTo($('#recentpostnews ul')).slideDown(); });
                    }
                    setInterval(function(){ tick () }, 5000);
                  } else {
                    $('#recentpostnews').html('<span>No result!</span>');
                  }
                },
                error: function() {
                  $('#recentpostnews').html('<strong>Error Loading Feed!</strong>');
                }
              });
            });
            //]]>
          </script>

Silahkan ganti "url_blog" dengan alamat blog Anda.

Nah, demikian sedikit ulasan tentang Cara Nambahi Breaking News Atau Ulasan Berita Di Template Blogger, semoga saja bermanfaat. Jangan lupa Like, Share, Comment dan Subscribenya... Halah... malah koyo yutuber.

"Happy Coding"