Cara Membuat Parse HTML Keren di Blogger - Berikut ini aku akan membagikan cara menciptakan Parse isyarat atau yang biasa di sebut juga HTML Converter di dalam postingan/halaman blogger sendiri dengan tampilan yang menarik.
Sebelumnya aku sudah pernah menjelaskan cara menciptakan HTML Converter sederhana di dalam halaman statis blog. Namun, pada kesempatan ini aku akan membagikan cara menciptakan cara menciptakan Parse HTML (Ads Converter) menyerupai mirip Arlina Design.
Perlu diketahui bawah Parse HTML ini banyak dipakai oleh para pembuat tutorial blogger untuk melaksanakan konversi isyarat adsense/iklan, HTML atau j4vascript sebelum dimasukkan ke dalam kota isyarat (Syntax Highlighter).
Nah, untuk menciptakan parse html sendiri di blog kalian sangatlah mudah, tanpa harus bersusah payah mencari tools website penyedia parse html. Oleh alasannya ialah itu mari kita simak baik-baik tutorial berikut ini.
Cara Membuat Parse HTML Keren di Blogger
1. Masuk ke Blog kalian
2. Pilih sajian Halaman > kemudian Buat Halaman Baru
3. Kemudian Masukkan isyarat di bawah ini di dalam tab HTML (Bukan Compose)
<textarea id="codes" placeholder="Tulis/paste isyarat di sini kemudian klik 'Konversi'" spellcheck="false"></textarea><br /> <br /> <div class="button-group"> <button class="ripplelink" id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button class="ripplelink" onclick="cdClear();">Bersihkan</button></div> <ul id="wrapin"> <li><input checked="true" class="option-input checkbox" id="opt1" type="checkbox" />Konversi <code>&</code> menjadi <code>&amp;</code></li> <li><input class="option-input checkbox" id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&#039;</code></li> <li><input class="option-input checkbox" id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code></li> <li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code></li> <li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Konversi <code>></code> menjadi <code>&gt;</code></li> <br /> </ul> <script type="text/j4vascript"> function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),document.getElementById("cvrt").disabled=!1}function cdConvert(){var a=document.getElementById("codes"),b=a.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),e=document.getElementById("opt3"),f=document.getElementById("opt4"),g=document.getElementById("opt5");b=b.replace(/\t/g," "),c.checked&&(b=b.replace(/&/g,"&")),d.checked&&(b=b.replace(/'/g,"'")),e.checked&&(b=b.replace(/"/g,""")),f.checked&&(b=b.replace(/</g,"<")),g.checked&&(b=b.replace(/>/g,">")),a.value=b,a.focus(),a.select()} </script> <style scoped="" type="text/css"> #main-wrapper{padding:0;width:100%;border:0} code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;} #codes{border:0;width:68%;height:250px;margin:0 auto;display:block;background-color:#f0f0f0;color:#999;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:6px;box-shadow:inset 0 0 10px rgba(0,0,0,0.05);transition:all 2s} #codes:hover,#codes:focus{background-color:#fafafa;color:#666;box-shadow:inset 0 0 10px rgba(0,0,0,0.1);} .button-group{width:100%;max-width:78.5%;float:none;margin:0 auto 0;text-align:center} button,button[disabled]:active{width:42.3%;border:none;padding:14px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#fb5e61;cursor:pointer;font-size:13px;position:relative;top:-20px;margin:0 8px;letter-spacing:.5px;border-radius:3px;transition:all 0.2s} button:hover,button:focus{background:#222222;color:#fff} button[disabled],button[disabled]:active{background:#222222;color:#fff;} #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none} #outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;} #post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;} .post-body,.post{background-position:center!important;} .post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} #comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;} .post-inner {padding:0 0 0 0;margin:20px auto;} .post-body ul#wrapin{width:100%;max-width:68.5%;display:table;position:relative;margin:0 auto;font-size:13px} .post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;} .post-body ul#wrapin br {display:none;} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:#f0f0f0;border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:10%;} .option-input:hover{background:#eee} .option-input:checked{background:#3498db} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} .arlina-nav .share-box button {display:none} </style> <br /> <div class="clear"> </div> 4. Jika sudah jangan lupa masukkan judul > kemudian pilih Publikasikan
Itulah tadi tutorial dari analisyuki.com ihwal Cara Membuat Parse HTML Keren di Blogger. Semoga tutorial ini sanggup bermanfaat bagi kalian sebagai para blogger sekalian, Terimakasih.
Sumber http://www.analisyuki.com/
