Script Tools Parse HTML dan Color Picker Blogger

Oktober 25, 2024 Posting Komentar

Script Tools Parse HTML dan Color Picker di Blogger - Parser HTML dan color picker sangat penting bagi blogger (orang yang suka ngeblog). Tidak jarang orang memasang HTML parser dan color picker tool ini di blognya, terutama bagi mereka yang memiliki blog di niche blogging atau coding. Karena penguraian HTML dan pemilih warna online terkait dengan ini. Untuk membuat color picker online atau parser HTML, Kamu memerlukan skrip parser yang harus diinstal pada halaman statis

PARSE HTML

Parse HTML adalah alat untuk mengurai atau mengubah kode HTML menjadi karakter entitas HTML secara otomatis. Mengapa perlu di Parse? Karena tema blogger ini menggunakan format XML. Kenyataannya, ketika kita mencoba mengurai sebuah skrip HTML, tidak semua kodenya langsung diubah (dikonversi). Hanya sebagian kode yang berubah; Jika Kamu mengetikkan kata atau frasa yang diapit kode HTML, kata tersebut tidak akan diubah.

Di bawah ini adalah beberapa contoh kode HTML yang akan berubah bila dikonversi menggunakan script parser/converter HTML.

tanda < menjadi <
tanda > menjadi >
tanda " menjadi "
tanda ' menjadi '
tanda & menjadi &

Biasanya orang menggunakan alat parsing HTML ini untuk mengkonversi script HTML agar tidak error saat dipasang di blog. Selain itu untuk memasang script iklan Google Adsense kita juga perlu menganalisa kode Adsense terlebih dahulu agar tidak terjadi error dan iklan dapat ditampilkan, kecuali jika dipasang di widget blog maka tidak perlu dilakukan. menganalisanya terlebih dahulu.

Cara Membuat Tools Parse HTML Online di Blogger

Pertama buka dashboard blogger kamu.
Pilih menu \"Halaman\" atau \"Halaman\".
Buat halaman baru dengan mengklik tombol \"Halaman Baru\" di atas.
Ada dua pilihan mode yang tersedia yaitu Compose dan HTML.
Jika ingin menulis paragraf pembuka, pilih dulu mode Tulis lalu mode HTML untuk menyisipkan kode. Copy dan paste script HTML Parse Box di bawah ini

Script Tools HTML Parse

 <textarea id="codes" spellcheck="false"></textarea></div>
<div class="button-group">
<center>
<span class="Apple-style-span" style="font-family: &quot;trebuchet ms&quot;; font-size: x-small; line-height: 20px;">Alat Parse HTML &nbsp;oleh &nbsp;<a href="http://template.zone.id/" style="color: #2980b9; text-decoration: none;">Template Zone</a></span></center>
<button id="convert" onclick="cdConvert();this.disabled = true;">Kuy Parse</button><button onclick="cdClear();">Bersihin dulu</button></div>
<br />
<ul id="wrapin">
<li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
</ul>
<style type="text/css">
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{font:13px 'Courier New',Monospace;border:1px solid #CCCCCC;width:550px;height:250px;margin:0 auto;display:block;background-color:#f2f2f2;color:#333;padding:15px;}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{border: none;padding: 5px 12px;color: #fff;background-color: #0ea6d8;cursor: pointer;font-size: 13px;margin: 0 10px;line-height: 23px;border-radius: 3px;transition: all 0.3s ease-in-out;}
button:active{background:#3f92e1;}
button[disabled],button[disabled]:active{background:#3f92e1;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin-right:10px;}
</style> 
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('convert').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/</g, "&lt;");
    if (opt3.checked) cv = cv.replace(/>/g, "&gt;");
    if (opt4.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt5.checked) cv = cv.replace(/'/g, "&#039;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>

Untuk Demonya bisa loe lihat disini : HTML Parse Tools

Color Picker

Color Picker adalah alat online yang digunakan untuk memilih warna. Bagi para desainer grafis dan blogger, tool ini sangat berguna karena dapat memberikan informasi detail mengenai kode warna HEX dan RGB. Oleh karena itu, banyak blogger yang membuat color picker tools pada halaman blognya untuk memudahkan dalam memilih warna jika sewaktu-waktu ingin mengganti template blognya.

Cara membuat alat Color Picker

Bagaimana jika kamu juga ingin membuat color picker di halaman blog kamu? Disini saya akan membagikan caranya, ada 4 jenis script yang bisa kamu pilih sesuai selera kamu untuk dipasang di halaman statis.

halaman blogger
Buka blogger.com > Halaman
Buat halaman baru dan beri judul pada halaman tersebut.
Pilih bagian HTML, bukan Tulis
Salin dan tempel kode di bawah ini
Publikasikan dan lihat hasilnya.

Script Color Picker

Saya telah membuat skrip di bawah ini responsif, pilih yang paling kamu sukai

Script 1

 <div ng-app="app">
   <color-picker color="foo"></color-picker>
  <p style="margin-top: 10px; width: 100%;">color: {{ foo }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
    (function(){
        'use strict';
        angular.module('app', ['colorPicker']);
    }());
</script>

<style>
.ng-scope {text-align: center;}* {box-sizing: border-box;}.color-picker {display: inline-block;position: relative;}
.color-picker input { display: none;}
.canvas-wrapper {border-radius: 1000px;overflow: hidden;}
.indicator {top: calc(50% - 2rem);left: 50%;display: block;position: absolute;background-color: transparent;transform: translate3d(-50%,-2rem,0);pointer-events: none;}
.indicator .selected-color {position: absolute;top: 2px;left: 2px;right: 2px;bottom: 30%;border-radius: 1000px;z-index: -1;background-color: #fff;-webkit-filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));}
</style>

<script>
  (function(){
    'use strict';
  
  angular.module('app', ['colorPicker']);

    angular.module('colorPicker', [])
        .directive('colorPicker', [function () {

            var updateEventListenerTargets = ['touchstart','touchmove','mouseup','mousemove'],
                clientX, clientY,
                mousedown = 0;

            function ColorPicker() {
                // Initialize at center position with white
                this.ngModel = '#ffffff';
            }

            ColorPicker.$inject = [];

            return {
                restrict: 'E',
                controller: ColorPicker,
                bindToController: true,
                controllerAs: 'colorPicker',
                scope: {
                    ngModel: '=color'
                },
                replace: true,
                template: [
                    '<div class="color-picker">',
                        '<canvas width="230px" height="230px"></canvas>',
                        '<span class="indicator">',
                            '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="64" viewBox="0 0 25 32">',
                                '<path fill="#ffffff" d="M12.528 0c-6.943 0-12.528 5.585-12.528 12.528 0 10.868 12.528 19.472 12.528 19.472s12.528-9.585 12.528-18.792c0-6.868-5.66-13.208-12.528-13.208zM12.528 21.434c-4.981 0-9.057-4.075-9.057-9.057s4.075-9.057 9.057-9.057 9.057 4.075 9.057 9.057-4.075 9.057-9.057 9.057z"></path>',
                            '</svg>',
                            '<span class="selected-color"></span>',
                        '</span>',
                    '</div>'
                ].join(''),
                link: function (scope, el, attrs, colorPicker) {

                    var canvas = el.find('canvas')[0];

                    var context = canvas.getContext('2d');
                    var x = canvas.width / 2;
                    var y = canvas.height / 2;
                    var radius = x;
                    var counterClockwise = false;

                    for(var angle=0; angle<=360; angle+=1){
                        var startAngle = (angle-2)*Math.PI/180;
                        var endAngle = angle * Math.PI/180;

                        context.beginPath();
                        context.moveTo(x, y);
                        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
                        context.closePath();

                        var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
                            gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)');
                            gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)');

                        context.fillStyle = gradient;
                        context.fill();
                    }

                    var updateColorPicker = function(e){
                        e.preventDefault();

                        if (e.type === 'mousemove' && !mousedown) { return; }

                        clientX = (e.clientX) ? e.clientX : e.changedTouches[0].clientX;
                        clientY = (e.clientY) ? e.clientY : e.changedTouches[0].clientY;

                        var canvasOffset = canvas.getBoundingClientRect();
                        var canvasX = Math.floor(clientX - canvasOffset.left);
                        var canvasY = Math.floor(clientY - canvasOffset.top);

                        // get current pixel
                        var imageData = context.getImageData(canvasX, canvasY, 1, 1);
                        var pixel = imageData.data;

                        var indicator = el.find('span')[0];
                        var selectedColor = indicator.getElementsByClassName('selected-color')[0];

                        if(!pixel[pixel.length - 1]) {
                            return;
                        }

                        var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];

                        colorPicker.ngModel = '#' + ('0000' + dColor.toString(16)).substr(-6);

                        indicator.style.left    = canvasX + 'px';
                        indicator.style.top     = canvasY - 32 + 'px';
                        selectedColor.style.backgroundColor = colorPicker.ngModel;

                        scope.$apply(function(){
                            colorPicker.ngModel = colorPicker.ngModel;
                        });

                    };

                    for (var i=0, len = updateEventListenerTargets.length; i<len; i++) {
                        canvas.addEventListener(updateEventListenerTargets[i], updateColorPicker, false);
                    }

                    canvas.addEventListener('mousedown', function(){
                        mousedown = 1;
                    }, false);

                    document.addEventListener('mouseup', function(){
                        mousedown = 0;
                    }, false);
                }
            };
        }]);
}());
</script>

Script 2

 <input id="inputColor" type="color" value="#ff1a1a" />
<button onclick="getColor()">Get Color</button>
<br />
<div id="colorHex">
</div>
<div id="colorRGB">
<script>
function getColor() {
    document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value;
    document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
}
function hexToRgb(hex) {
    var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
    var r = parseInt(result[1], 16);
    var g = parseInt(result[2], 16);
    var b = parseInt(result[3], 16);
    return 'RGB('+r+','+g+','+b+')'; 
}
</script>
</div>

Script 3

 <iframe frameborder="0" src="https://raw.githack.com/onbloging/kompi-html/master/color-palettes2.html" style="height: 575px; width: 100%;" title="Color Palette"></iframe>

Untuk demonya bisa elo lihat disini : Color Picker Tools

Blank Format atau Blogspot kosong

Blank template sangat berguna jika kamu berencana mengganti template blog lama kamu dengan template blog baru yang ingin kamu gunakan.

Script Blank Format

Cara Membuat Template Blogger Blank, Cara Mengganti Template Blogger Blank, Reset Template Blog Blank, Blogger dengan Template Blank

 <html>
 <head>
           <title>Ini Contoh Template Kosong</title>
                  <b:skin>
                  <![CDATA[
                  /****KODE CSS DI SINI*****/
                  ]]>
                  </b:skin>
 </head>
    <body>
    <b:section id="aloha" class="aloha"></b:section>
           <p>Template Kosong adalah Seperti Ini</p>
    </body>
</html>

Plagiarsm Online

Plagiarisme online digunakan untuk memeriksa apakah artikel yang kamu tulis merupakan plagiat atau asli. Alat ini sangat populer di kalangan blogger dan penulis. Pernahkah kamu berpikir jika alat luar biasa ini ada di blog kamu? Nah kali ini saya akan membagikan script plagiarisme blogger online

Cara Membuat Tools Plagiarsm Online di Blogger

Masuk blogger.
Buat halaman statis baru.
Masuk ke mode HTML, bukan mode tulis.

Script Plagiarsm Online

 <iframe src="https://www.editpad.org/tool/plagiarism-checker" style="border: 0; height: 100%; min-height: 400px; width: 100%;"></iframe>

Untuk demonya kamu bisa lihat disini : Plagiarsm Detector Online

ZONA TEMPLATE