From nothing to something

[recent]

Saturday, July 22, 2017

Memasang HTML Parse Tool di Blog Valid HTML5

HTML Parse adalah Tool untuk mengkonversi kode HTML, CSS, JavaScript, dll untuk dimasukan kedalam artikel di blog. HTML Parse juga bisa digunakan untuk mengkonversi kode iklan yang nantinya akan ada didalam postingan, baik diatas, tengah, ataupun di bawah.

Tool ini sangat mudah digunakan, kalian hanya perlu menekan tombol "Parse Script" setelah Script dimasukan kedalam textarea. Untuk menghilangkan tulisan yang berada didalam textarea kalian hanya perlu menekan tombol "Clear Textarea". Jika kalian ingin melihat demonya kalian bisa menekan tombol demo dibawah ini.

Memasang HTML Parse Tool di Blog Valid HTML5

1. Masuk ke Blogger > Laman > Laman Baru
2. Ganti mode Compose ke mode HTML
3. Simpan kode dibawah ini dikolom yang tersedia
<style type="text/css">
#htmlparser{margin: 0 auto}
#htmlparserbox{background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px;font-size: 15px;border-radius: 3px}
#htmlparserbox[placeholder]:focus::-webkit-input-placeholder{opacity: 0;transition:opacity .2s ease-in-out}
#htmlparserbtn{padding: 10px 20px;background: rgba(26, 188, 156,1.0);color: #F5F5F5;border-radius: 3px;cursor: pointer;border: none;transition:all .1s ease-in-out;font-size: 15px;}
#htmlparserbtn:hover{background: rgba(26, 188, 156,0.8)!important;transition:all .4s ease-in-out}
#htmlparserbox:focus, #htmlparserbtn:focus{outline: none;}
</style>
<table id="htmlparser"><tbody>
<tr><td><textarea id="htmlparserbox" placeholder="Tulis/paste kode disini lalu klik 'Parse Script'"></textarea><br/>
<input onclick="convert();" id="htmlparserbtn" type="button" value="Parse Script" />
<input type="button" value="Clear Textarea" id="htmlparserbtn" onclick="eraseText();" /></td></tr>
</tbody></table>
<script type="text/javascript">
function convert(){var ele1 = document.getElementById("htmlparserbox");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(/&#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;}
function eraseText() {document.getElementById("htmlparserbox").value = "";}
</script>
4. Klik Publikasikan.

Untuk warna yang lainnya kalian bisa scroll kebawah..

Warna Hijau (Default)
<style type="text/css">
#htmlparser{margin: 0 auto}
#htmlparserbox{background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px;font-size: 15px;border-radius: 3px}
#htmlparserbox[placeholder]:focus::-webkit-input-placeholder{opacity: 0;transition:opacity .2s ease-in-out}
#htmlparserbtn{padding: 10px 20px;background: rgba(26, 188, 156,1.0);color: #F5F5F5;border-radius: 3px;cursor: pointer;border: none;transition:all .1s ease-in-out;font-size: 15px;}
#htmlparserbtn:hover{background: rgba(26, 188, 156,0.8)!important;transition:all .4s ease-in-out}
#htmlparserbox:focus, #htmlparserbtn:focus{outline: none;}
</style>
<table id="htmlparser"><tbody>
<tr><td><textarea id="htmlparserbox" placeholder="Tulis/paste kode disini lalu klik 'Parse Script'"></textarea><br/>
<input onclick="convert();" id="htmlparserbtn" type="button" value="Parse Script" />
<input type="button" value="Clear Textarea" id="htmlparserbtn" onclick="eraseText();" /></td></tr>
</tbody></table>
<script type="text/javascript">
function convert(){var ele1 = document.getElementById("htmlparserbox");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(/&#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;}
function eraseText() {document.getElementById("htmlparserbox").value = "";}
</script>

Warna Biru
<style type="text/css">
#htmlparser{margin: 0 auto}
#htmlparserbox{background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px;font-size: 15px;border-radius: 3px}
#htmlparserbox[placeholder]:focus::-webkit-input-placeholder{opacity: 0;transition:opacity .2s ease-in-out}
#htmlparserbtn{padding: 10px 20px;background: rgba(52, 152, 219,1.0);color: #F5F5F5;border-radius: 3px;cursor: pointer;border: none;transition:all .1s ease-in-out;font-size: 15px;}
#htmlparserbtn:hover{background: rgba(52, 152, 219,0.8)!important;transition:all .4s ease-in-out}
#htmlparserbox:focus, #htmlparserbtn:focus{outline: none;}
</style>
<table id="htmlparser"><tbody>
<tr><td><textarea id="htmlparserbox" placeholder="Tulis/paste kode disini lalu klik 'Parse Script'"></textarea><br/>
<input onclick="convert();" id="htmlparserbtn" type="button" value="Parse Script" />
<input type="button" value="Clear Textarea" id="htmlparserbtn" onclick="eraseText();" /></td></tr>
</tbody></table>
<script type="text/javascript">
function convert(){var ele1 = document.getElementById("htmlparserbox");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(/&#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;}
function eraseText() {document.getElementById("htmlparserbox").value = "";}
</script>


Warna Hitam
<style type="text/css">
#htmlparser{margin: 0 auto}
#htmlparserbox{background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px;font-size: 15px;border-radius: 3px}
#htmlparserbox[placeholder]:focus::-webkit-input-placeholder{opacity: 0;transition:opacity .2s ease-in-out}
#htmlparserbtn{padding: 10px 20px;background: rgba(33, 33, 33, 1.0);color: #F5F5F5;border-radius: 3px;cursor: pointer;border: none;transition:all .1s ease-in-out;font-size: 15px;}
#htmlparserbtn:hover{background: rgba(33, 33, 33, 0.8)!important;transition:all .4s ease-in-out}
#htmlparserbox:focus, #htmlparserbtn:focus{outline: none;}
</style>
<table id="htmlparser"><tbody>
<tr><td><textarea id="htmlparserbox" placeholder="Tulis/paste kode disini lalu klik 'Parse Script'"></textarea><br/>
<input onclick="convert();" id="htmlparserbtn" type="button" value="Parse Script" />
<input type="button" value="Clear Textarea" id="htmlparserbtn" onclick="eraseText();" /></td></tr>
</tbody></table>
<script type="text/javascript">
function convert(){var ele1 = document.getElementById("htmlparserbox");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(/&#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;}
function eraseText() {document.getElementById("htmlparserbox").value = "";}
</script>

Warna Merah
<style type="text/css">
#htmlparser{margin: 0 auto}
#htmlparserbox{background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px;font-size: 15px;border-radius: 3px}
#htmlparserbox[placeholder]:focus::-webkit-input-placeholder{opacity: 0;transition:opacity .2s ease-in-out}
#htmlparserbtn{padding: 10px 20px;background: rgba(231, 76, 60,1.0);color: #F5F5F5;border-radius: 3px;cursor: pointer;border: none;transition:all .1s ease-in-out;font-size: 15px;}
#htmlparserbtn:hover{background: rgba(231, 76, 60,0.8)!important;transition:all .4s ease-in-out}
#htmlparserbox:focus, #htmlparserbtn:focus{outline: none;}
</style>
<table id="htmlparser"><tbody>
<tr><td><textarea id="htmlparserbox" placeholder="Tulis/paste kode disini lalu klik 'Parse Script'"></textarea><br/>
<input onclick="convert();" id="htmlparserbtn" type="button" value="Parse Script" />
<input type="button" value="Clear Textarea" id="htmlparserbtn" onclick="eraseText();" /></td></tr>
</tbody></table>
<script type="text/javascript">
function convert(){var ele1 = document.getElementById("htmlparserbox");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(/&#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;}
function eraseText() {document.getElementById("htmlparserbox").value = "";}
</script>

Jika kalian memiliki permasalahan dalam pemasangan tool ini silahkan berikan komentar di artikel ini. Terimakasih.

Friday, July 21, 2017

Cara Membuat Tombol Demo dan Download di Blogger


Mengingat kematiannya chester bennington yang baru saja terjadi maka saya akan membagikan tombol demo dan download pada artikel ini. //ganyambung ih

Memasang tombol demo dan download yang digunakan pada blog ini sangatlah mudah. Kalian tinggal simpan kode css diatas tag ]]></b:skin> atau </style> dan untuk memanggilnya kalian tinggal gunakan kode html yang nanti saya berikan. Desain tombol ini juga sangatlah simpel. Untuk demonya akan saya berikan dibagian bawah artikel ini.

Cara Membuat Tombol Demo dan Download di Blogger

Tombol ini menggunakan Font Awesome. Jika kalian belum memasang link Font Awesome silahkan simpan kode dibawah ini diatas tag </head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>

1. Masuk ke Blogger > Tema > Edit HTML
2. Simpan kode dibawah ini diatas kode ]]></b:skin> atau </style>
/*Button CSS*/
.post-body .button{width:100%;padding:0!important;list-style:none;margin:10px auto!important}
.post-body .button li{display:inline-block;width:49%;line-height:normal;margin:0}
.post-body .button li a{position:relative;display:block;padding:15px;margin:5px;color:#fff;text-align:center;text-transform:uppercase;border-radius:3px}
.post-body .button li a.demo{background:#dda245;}.post-body .button li a.demo:hover{background:#c18e3d;}
.post-body .button li a.download{background:#529cce;}.post-body .button li a.download:hover{background:#4686b0;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
3. Klik simpan template.

Jika kalian ingin menggunakan tombol ini cukup gunakan kode dibawah ini di mode HTML
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="#">DEMO</a></li>
<li><a class="download" href="#">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear">
</div>

Jika kalian hanya ingin menggunakan tombol demo saja, kalian tinggal hapus baris kode dibawah ini.
<li><a class="download" href="#">DOWNLOAD</a></li>

Jika kalian hanya ingin menggunakan tombol download saja, kalian tinggal hapus baris kode dibawah ini.
<li><a class="demo" href="#">DEMO</a></li>

DEMO TOMBOL DEMO DAN DOWNLOAD

Jika kalian memiliki permasalahan atau pertanyaan dalam pemasangan widget ini, silahkan berikan komentar di artikel ini. Terimakasih.

Thursday, July 20, 2017

Memasang Search Form di Blogger


Pada kesempatan kali ini saya akan berbagi cara memasang search form di blogger. Search form ini sangatlah penting untuk blog, karena jika tidak ada search form pengunjung tidak akan bisa mencari artikel di blog kita. Search Form ini juga sangatlah ringan, jadi kalian tidak perlu khawatir blognya akan menjadi berat. Nah jika kalian ingin melihat demo search form ini silahkan klik tombol dibawah ini.

Memasang Search Form di Blogger

1. Masuk ke Blogger > Tema > Edit HTML.
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>
 /*Simple Search Form*/
#searchbtn {background:#0099ff;color:white;padding:10px 20px;border-radius:0 5px 5px 0;border:0 none;font-weight:bold;}
#searchbtn:hover{cursor:pointer}
#searchbox {background: #eee;padding:10px; border-radius:5px 0 0 5px;border:0 none;width:160px;}
#searchbox:focus{outline:none}
3. Silahkan simpan kode HTML dibawah ini dinavbar atau disidebar blog kalian.
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="searchbox" name="q" size="30" type="text" placeholder="Search"/>
<input id="searchbtn" value="Go" type="submit"/>
</form>
4. Klik simpan temlate!

Jika kalian kesulitan atau mempunyai pertanyaan dalam pemasangan search form ini silahkan berikan komentar di artikel ini, Jika sempat akan saya bantu / balas. Terimakasih.

Wednesday, July 19, 2017

Simple Subscription Widget


Pada artikel kali ini saya akan berbagi widget yang sama dengan kemarin, yaitu subscription box atau kotak berlangganan, hanya saja berbeda style-nya. Widget subscription box yang satu ini memiliki style yang sangat simple hanya ada kata pengantar dan form berlangganan.Widget ini direquest oleh salah satu sobat blogger. Jika kalian ingin memasang widget ini silahkan ikuti langkah-langkah dibawah ini. Untuk demonya kalian bisa klik tombol dibawah ini.

Simple Subscription Widget

1. Masuk ke Blogger > Tema > Edit HTML
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>
/* Subscribe Box */
.subscribe-wrapper{background:#34495e;color:#fff;margin:0;padding:20px;text-align:center}
.subscribe-wrapper p{margin:0;text-align:left;}
.subscribe-form{clear:both;display:block;margin:10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#fff;color:#95a5a6;margin:0 0 15px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:13px}
.subscribe-css-button{background:#43a1a0!important;color:#fff;cursor:pointer;padding:7px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .1s}
.subscribe-css-button:hover{background:#2c3e50!important}
3. Klik simpan template.
4. Masuk ke bagian Tata Letak > Tambah widget di sidebar > Pilih HTML/Javascript
5. Salin lagi kode dibawah ini dan simpan dikolom konten.
<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>Jika Anda menyukai Artikel di blog ini, Silakan berlangganan gratis via email.</p>
<div class="subscribe-form">
<form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="YOUR-USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/>
<input class="subscribe-css-button" title="" type="submit" value="Submit" />
</form>
</div>
</div></div>
6. Ganti kode yang saya tandai (YOUR-USER-NAME) dengan id feedburner kalian.


Jika kalian mengalami masalah dengan pemasangan widget ini silahkan berkomentar di artikel ini. Terimakasih.

Tuesday, July 18, 2017

Membuat Subscription Box Seperti Template eL diablo

Pada artikel kali ini saya akan membagikan widget subscription box atau widget kotak berlangganan seperti template eL diablo, untuk demonya kalian bisa lihat di blog demo template eldiablo atau kalian bisa klik tombol demo dibawah ini.
Nah jika kalian tertarik untuk memasang widget ini di sidebar blog kalian silahkan ikuti langkah-langkah dibawah ini.

Membuat Subscription Box Seperti Template eL diablo

1. Masuk ke Blogger > Tema > Edit HTML
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>
/*Subscribe Box*/
  #subscribebox{background:#F8F8F8;padding:20px;}
  .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
  #subscribebox p{color:#888;font-size:15px;text-align:center;font-weight:700}
  .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
  .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
  .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
  .follow-subscribe-social ul li:last-child{margin:0}
  .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
  .follow-subscribe-social ul li a:hover{color:#212121}
  form.subscribe{margin-top:-7px}
  form.subscribe input{display:block;width:100%}
  .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(0,0,0,0.01);text-align:center;color:rgba(0,0,0,0.4);font-weight:bold}
  .subscribe-email:focus{outline:0}
  form.subscribe .placeholder{color:#cacaca}
  form.subscribe input:-ms-input-placeholder{color:#cacaca}
  form.subscribe input::-webkit-input-placeholder{color:#cacaca}
  form.subscribe input:-moz-placeholder{color:#fafafa}
  form.subscribe input::-moz-placeholder{color:#fafafa}
  .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#888;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
  .subscribe-button:hover{background-color:#999}
  .subscribe-button:focus{outline:0}
3. Masuk kebagian Tata Letak > Tambah widget di sidebar > Pilih Menu HTML/Javascript.
4. Salin kode dibawah ini dan simpan diatas kolom konten.
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
5. Ganti kode yang saya tandai (YOUR-USER-NAME) dengan id feedburner kalian.

Jika kalian mengalami masalah dengan pemasangan widget ini silahkan berkomentar di artikel ini.
Demikianlah tutorial tentang Membuat Subscription Box Seperti Template eL diablo sampai ketemu lagi di artikel selanjutnya.

Monday, July 17, 2017

Cara Membuat Tag KBD Seperti Arlinadzgn

Tag kbd? Apa sih itu? Tag kbd adalah tag yang merepresentasikan input (masukkan) dari user (biasanya masukkan karakter/kata dari keyboard yang diketik oleh user, atau dapat pula hasil masukkan dari alat lainnya, seperti perintah suara (voice command)). [src: http://dul.web.id/belajar/html/tag-element/kbd.php]

Pada dasarnya tag kbd terlihat seperti gambar dibawah ini.
Nah pada artikel kali ini saya akan mengubah style tag kbd tersebut seperti yang digunakan didalam blog arlinadzgn, untuk contohnya bisa dilihat digambar yang pertama.

Cara Membuat Tag KBD Seperti Arlinadzgn

1. Masuk ke Blogger > Tema > Edit HTML
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>.
kbd{position:relative;color:#28a1f0;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#fff;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;}
kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}
3. Salin lagi kode dibawah ini dan simpan diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('kbd');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>
4. Simpan Template!

Jika masih ada yang kesulitan atau gagal silahkan berikan tanyakan pada kolom komentar.

Saturday, July 15, 2017

eL diablo Responsive Blogger Template

Setelah sekian lama saya tidak update artikel, akhirnya bisa update kembali. Saya kembali ingin membagikan sebuah template blogger PREMIUM yang saya buat sendiri dari 0. Template ini menggunakan Bootstrap v3.7.7 tadinya saya mau pake Bootstrap v4, tapi berhubung bootstrap v4 masih dalam versi alpha jadi saya belum berani buat bikin template dari versi tersebut. Sebelumnya saya juga sudah membuat template juga, tapi karena kurang jelek jadi saya tidak publish :p.

Nama eL diablo sendiri terinspirasi dari film suicide squad. Dalam film suicide squad, eL diablo menggunakan tato tulang-belulang yang artinya sama saja sebagai border didalam template ini.
Berikut fitur yang ada didalam template ini.

Features Availability
Responsive True
SEO Friendly True
Fixed Navbar True
Mobile Friendly True
Dynamic Heading True
Personal Blog True
Bootstrap True
Font Awesome True
Unlimited Pagination True
Light Base Theme Color True
Breadcrumbs True
Search Box True
Social Search Button True
Responsive Dropdown Menu True
Custom Subscribe Box True
Smooth Back to Top True
Shortcodes True
Documentation True

Untuk demonya kalian bisa klik tombol dibawah ini.
Bagi yang berminat dengan template ini, silahkan kirim pesan ke facebook saya: https://www.facebook.com/AthharKautsar14 dengan harga yang cukup murah yaitu Rp. 30.000,00
NO NEGO YA GAN HEHE :D