Pasang Tools ini Di Blog Supaya Pengunjung Tertarik

Pasang Tools ini Di Blog Supaya Pengunjung Tertarik

Apakah kamu seorang blogger? Jika iya, sudah menjadi kewajiban kamu untuk membuat fitur yang menarik dan tentunya bermanfaat bagi para pengunjung. Dengan begitu mereka akan lebih sering mengunjungi blog kamu dan tentunya penghasilan yang kamu dapatkan juga akan bertambah.

Fitur yang saya maksud yaitu memasang beberapa tools gratis yang bermanfaat. Sehingga orang yang berkunjung akan merasa terbantu dengan fitur yang tersedia di blog kamu.

Cukup menarik bukan? Tak hanya itu, tools yang akan saya bagikan ini juga tentunya bermanfaat bagi kalian sebagai pemilik blog.

Pasang Tools ini di Blog Kamu Agar Semakin Menarik

Word Counter

Tools ini cukup bermanfaat bagi seorang blogger karena membantu untuk mengetahui jumlah kata yang telah ditulis. Jika kamu tertarik memasangnya silahkan ikuti langkah-langkahnya dibawah ini.

Demo

Buka dashboard blogger > halaman > buat halaman baru lalu salin script dibawah ini dan letakan pada tampilan html jika sudah simpan.

<div id="word-counter">
<div class="frame">
<textarea id="text" spellcheck="false"></textarea>
</div>
<div class="button-group">
<table>
<tbody>
<tr>
<td>Jumlah Kata :</td><td id="wordCount">0</td>
</tr>
<tr>
<td>Jumlah Karakter :</td><td id="totalChars">0</td>
</tr>
<tr>
<td>Jumlah Karakter (tanpa spasi) :</td><td id="charCountNoSpace">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
counter = function() {
    var value = $('#text').val();

    if (value.length == 0) {
        $('#wordCount').html(0);
        $('#totalChars').html(0);
        $('#charCountNoSpace').html(0);
        return;
    }

    var regex = /\s+/gi;
    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
    var totalChars = value.length;
    var charCountNoSpace = value.replace(regex, '').length;

    $('#wordCount').html(wordCount);
    $('#totalChars').html(totalChars);
    $('#charCountNoSpace').html(charCountNoSpace);
};

$(document).ready(function() {
    $('#count').click(counter);
    $('#text').change(counter);
    $('#text').keydown(counter);
    $('#text').keypress(counter);
    $('#text').keyup(counter);
    $('#text').blur(counter);
    $('#text').focus(counter);
});
</script>

Parse HTML

Tools ini berperan penting ketika ingin memasang sebuah iklan pada blog, karena tanpa menggunakan tools parse besar kemungkinan artikel menjadi berantakan. Dengan memasang tools ini tentunya akan sangat membantu bagi orang mengunjungi blog kamu. Berikut langkah-langkahnya:

Demo

Buka dashboard blogger > halaman > buat halaman baru lalu salin script dibawah ini dan letakan pada tampilan html jika sudah simpan.

<style>
.btn,.btn:active{background-image:none}
.btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px;cursor:pointer}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover{background:rgba(255,255,255,.5);color:#fff}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#31b0d5;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-sm,.btn-xs{outline:none;background:rgba(255,255,255,.25);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:4px 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
#parser2{position:relative;display:block;clear:both;border-radius:4px;border:1px solid var(--sideBd-color);transition:all .6s}
#parser2 textarea#somewhere{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:var(--fontCode);font-size:14px;border:0;border-radius:4px 4px 0 0;box-shadow:unset;resize: vertical; min-height: calc(100vh - 300px);background:transparent;color:var(--themeC)}
#parser2 .button-group{float:none;background:#00BFFF;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 4px 4px}
.collapse{display:none}
.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px}
button.closes{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1;z-index:2}
.closes{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.closes:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link,#btn_clear{display:none}
.btn-reset{padding:0;border:0;background:0 0;position:absolute;top:10px;right:15px;color:#ddd;font-size:34px;font-weight:lighter;cursor:pointer;line-height:1;display:none;z-index:1}
.btn-reset:hover{color:#555}
.btn-reset:focus{outline:0}
.clear{clear:both;display:block;margin-bottom:2px;}
</style>

<div id="parser2">
<textarea id="somewhere" onfocusin="focusFunction()" placeholder="Tulis/paste kode di sini lalu klik tombol Parse Code"></textarea>
<div class="alert alert-success margin-bottom-20 collapse" id="btnInfo" role="alert">
<button class="closes close-copy" onclick="document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;" type="button"><span aria-hidden="true">&#215;</span></button>
<h4>Berhasil disalin!</h4>
</div>

<div class="button-group">
<button class="btn btn-primary btn-sm btn-parse" onclick="convert();textareaReplaceLineBreaks('#somewhere');" type="button">Parse Code</button>

<button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" type="submit">Salin Code</button> <button class="btn btn-danger btn-xs" id="btn_clear" onclick="cdClear2();">Bersihkan</button>
</div>
  
<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'></script>
<script type="text/javascript">
function convert() {
    var ele1 = document.getElementById("somewhere");
    var replaced;
    replaced = ele1.value;
    replaced = replaced.replace(/&/ig, "&amp;");
    replaced = replaced.replace(/</ig, "&lt;");
    replaced = replaced.replace(/>/ig, "&gt;");
    replaced = replaced.replace(/"/ig, "&quot;");
    replaced = replaced.replace(/'/ig, "&#039;");
    replaced = replaced.replace(/&#177;/ig, "&plusmn;");
    replaced = replaced.replace(/&#169;/ig, "&copy;");
    replaced = replaced.replace(/&#174;/ig, "&reg;");
    replaced = replaced.replace(/ya'll/ig, "ya'll");
    
    ele1.value = replaced;
    document.getElementById("button-link")
        .style.display = "inline-block";
    document.getElementById("btn_clear")
        .style.display = "inline-block";
        document.getElementById("btn-reset")
        .style.display = "none";
}
function cdClear() {
  var wtarea = document.getElementById('somewhere');
  wtarea.value = '';
  document.getElementById("btnInfo")
        .style.display = "none",document.getElementById("button-link")
        .style.display = "none",document.getElementById("btn_clear")
        .style.display = "none"
}
function cdClear2() {
  var wtarea = document.getElementById('somewhere');
  wtarea.value = '';
  document.getElementById("btn-reset")
        .style.display = "none";
}
function focusFunction() {
    document.getElementById("btn-reset").style.display = "block";
}
</script>

Password Generate

Tak sedikit orang yang kebingungan dalam menentukan kata sandi ketika membuat sebuah akun baik akun media sosial ataupun game. Dengan kamu memasang tools ini tentunya akan membantu mereka. Berikut langkah-langkahnya:

Demo

Buka dashboard blogger > halaman > buat halaman baru lalu salin script dibawah ini dan letakan pada tampilan html jika sudah simpan.

<!--HTML-->
<div class="passGenerator">
  <div class="passResult">
    <span id="result"></span>
    <button class="passButton" id="clipboard">COPY</button>
  </div>
  <div class="passLists">
    <div class="passList">
      <label>Password length</label>
      <input id="length" max="20" type="number" value="12" />
    </div>
    <div class="passList">
    <label>Include uppercase letter</label>
    <input checked="" id="uppercase" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include lowercase letter</label>
      <input checked="" id="lowercase" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include number</label>
      <input checked="" id="numbers" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include symbol</label>
      <input id="symbols" type="checkbox" />
    </div>
  </div>
  <button class="passButton largeButton" id="generate">GENERATE</button>
  <div class="creatorLink" style="font-size: 12px;"><a href="https://www.media903.com">Made by www.media903.com</a></div>
</div>
<!--End HTML-->

<!--CSS-->
<style>
.passGenerator{width:100%;max-width:100%;background:#fffeff;font-family:"Noto Sans",sans-serif;font-size:16px;padding:20px;border:1px solid #e6e6e6}
.passResult{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;height:50px;background-color:#f8f8f8;font-size:18px;letter-spacing:1px;padding:12px 10px}
.passResult #result{word-wrap:break-word;max-width:calc(100% - 40px);color:#009ee0;font-weight:bold}
input#length{background:#fafafa;padding:8px;border:0}
.passResult .passButton{position:absolute;top:5px;right:5px;font-size:20px;height:40px;font-size:12px;letter-spacing:1.5px}
.passButton{background-color:#009ee0;color:#fff;padding:8px;font-size:16px;border:none;cursor:pointer}
.largeButton{display:block;margin:0 auto;padding:10px;font-size:15px}
.passList{display:flex;justify-content:space-between;align-items:center;margin:15px 0}
input[type=checkbox]{margin-right:0}
.creatorLink{display:none}
@media screen and (max-width:400px){.passResult{font-size:14px}}
/* Dark Mode */
.drK .passResult{background:#1e1e1e}
.drK .passGenerator{background:#252526;border-color:rgba(255,255,255,.15)}
.drK .passButton{background:#2d2d30}
.drK input#length{background:#1e1e1e}
</style>
<!--End CSS-->

<!--JavaScript-->
<script>
const resultEl=document.getElementById("result"),lengthEl=document.getElementById("length"),uppercaseEl=document.getElementById("uppercase"),lowercaseEl=document.getElementById("lowercase"),numbersEl=document.getElementById("numbers"),symbolsEl=document.getElementById("symbols"),generateEl=document.getElementById("generate"),clipboardEl=document.getElementById("clipboard"),randomFunc={lower:getRandomLower,upper:getRandomUpper,number:getRandomNumber,symbol:getRandomSymbol};
generate.addEventListener("click",()=>{const e=+lengthEl.value,c=lowercaseEl.checked,l=uppercaseEl.checked,s=numbersEl.checked,n=symbolsEl.checked;resultEl.innerText=generatePassword(c,l,s,n,e)});
clipboardEl.addEventListener("click",()=>{const e=document.createElement("textarea"),t=resultEl.innerText;t&&(e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),e.remove(),alert("Password copied!"))});
function generatePassword(e,r,t,n,o){let c="";const s=e+r+t+n,l=[{lower:e},{upper:r},{number:t},{symbol:n}].filter(e=>Object.values(e)[0]);if(0===s)return"";for(let e=0;e<o;e+=s)l.forEach(e=>{const r=Object.keys(e)[0];c+=randomFunc[r]()});return c.slice(0,o)}
function getRandomLower(){return String.fromCharCode(Math.floor(26*Math.random())+97)}function getRandomUpper(){return String.fromCharCode(Math.floor(26*Math.random())+65)}function getRandomNumber(){return String.fromCharCode(Math.floor(10*Math.random())+48)}function getRandomSymbol(){return"!@#$%^&*(){}[]=<>/,."[Math.floor(Math.random()*"!@#$%^&*(){}[]=<>/,.".length)]}
const floating_passButton=document.querySelector(".floating-passButton"),close_passButton=document.querySelector(".close-passButton"),social_panel_passGenerator=document.querySelector(".social-panel-passGenerator");
floating_passButton.addEventListener("click",()=>{social_panel_passGenerator.classList.toggle("visible")}),close_passButton.addEventListener("click",()=>{social_panel_passGenerator.classList.remove("visible")})
</script>
<!--End JavaScript-->

YouTube Downloader

Seperti yang kita tahu banyak orang yang ingin mendownload vidio youtube dengan menggunakan Tools yang tersedia di google. Dengan memasangnya di blog kamu, bukankah dapat meningkatkan pengunjung? Berikut langkah-langkahnya:

Demo

Buka dashboard blogger > halaman > buat halaman baru lalu salin script dibawah ini dan letakan pada tampilan html jika sudah simpan.

<!DOCTYPE html>
<html>
<title>All Format YouTube Video Downloader</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free online YouTube video downloader to download YouTube videos in MP4 in HD quality with high download speed."/>
<meta name="robots" content="index,follow" />
<meta name="keywords" content="Free online YouTube video downloader to download YouTube videos in MP4 in HD quality with high download speed." />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
<style>
* {
margin: 0;
padding: 0;
}
.mt-5, .my-5 {
margin-top: 0rem!important;
}
#hd {
width:100%;
height:390px;
margin:0 0 50px 0;
}
.custom-shape-divider-bottom-1610026357 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1610026357 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 183px;
}
.custom-shape-divider-bottom-1610026357 .shape-fill {
fill: #FFFFFF;
}
</style>
</head>
<body>
<div style="position: relative; background-image: linear-gradient(to right, #2101b9, #005eec, #0090f8, #00bcee, #00e3e3); min-height: 99vh;">
<div id='hd'>
<center><img alt='youtube video downloader' height='150' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZKNsYS4KOMUmeLpEnHkzGyPCmnVPuq4AIH-RyplZX1c6BqTMHtRRIlw6JLEYPQVt8gq3YUd5MdH7xAULjHZTfz0OxuQp7muXzUkzi7x37gEpH-v9-AHTk0NSVWWSIg26yYsFM30XMtPQ/s1600/aaaaaaa.png' width='100' title='High Quality YouTube Video Downloader'/></center>
<div class="col-md-6 offset-md-3 mt-5">
<div class="card">
<div class="card-header bg-info">
<center><h5>All Format YouTube Video Downloader</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="text-weight"><b>Enter YT Video Link:</b></label>
<input type="txt" name="link" class="form-control link" required>
</div>
</div>
</div>
<form class="form-download">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="text-weight"><b>Select Video Format:</b></label>
<select class="form-control formte" required>
<option selected disabled>Select Video Formate</option>
<option value="mp3">Mp3</option>
<option value="mp4a">144 Mp4</option>
<option value="360">360 Mp4</option>
<option value="480">480 Mp4</option>
<option value="720">720 Mp4</option>
<option value="1080">1080 Mp4</option>
<option value="4k">4k Mp4</option>
<option value="8k">8k Mp4</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group mt-4 download-video">
<button class="btn btn-success btn-block click-btn-down" type="submit">Click Here</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="custom-shape-divider-bottom-1610026357">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
</body>
<script type="text/javascript">
$(".click-btn-down").click(function(){
var link = $(".link").val();
var fromate = $(".formte").children("option:selected").val();
var src =""+link+"="+fromate+"";
downloadVideo(link,fromate);
});
function downloadVideo(link,fromate) {
$('.download-video').html('<iframe style="width:100%;height:60px;border:0;overflow:hidden;" scrolling="no" src="https://loader.to/api/button/?url='+link+'&f='+fromate+'"></iframe>');
}
</script>
</html>

Sekian pembahasan kali ini, jika ada yang yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.