Wednesday, January 17, 2018

UserPro Dashboard WordPress Plugin 3.6.2

thumbs

Selamat Malam. Aduh sibuk saya sama kerjaan di rumah numpuk udah kek karung. hehehe. ehh tapi kebetulan ada waktu jadi ya saya mau bagi-bagi salah satu Plugin Wordpress terbaik yang pernah saya punya yaitu UserPro Dashboard WordPress Plugin 3.6.2. tapi kalian sebelumnya harus sudah terinstal Userpro untuk dapat menikmati Plugins ini. Ok that's right boys Langsung to do point.

UserPro Dashboard Features :
  • Build profile page with widgets.
  • A compact way of managing your profile.
  • Support languages : French, German and Spanish.
  • And more…


Plugin sudah saya test dengan XAMP.
See Full Content

Multi Spoiler Blogger

thumbs

Malam sob kali ini saya ingin berbagi tutorial Cara Pasang Multi Spoiler Pada Halaman Postingan. Spoiler sendiri berguna untuk menyembunyikan konten dan menampilkan konten jika kita klik. Spoiler berguna untuk membuat konten di postingan jadi semakin terorganisir dengan maksud agar tidak terlalu banyak konten yang di tampilkan , contoh nya saja seperti list gambar, kode html,javascript dll.
bagaimana cara pasang nya , mari langsung kita mulai.

Pertama kita buka draft.blogger.com lalu pilih tab template , lalu pilih edit html.
cari </body> CTRL + F lalu tambahkan kode di bawah ini di atas kode </body>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Multiple Spoiler By Agiel Triono
$(function(){
var e = $(".post-body > spoiler"),
    d = "<div class='spoiler'><span>Spoiler</span></div>",
    c = "spoiler-panel spoiler-hide";
    e.before(d);
    e.addClass(c);
$('.spoiler').click(function (){
  if ($( this ).next().is(".spoiler-hide")) {
    $(this).next().removeClass("spoiler-hide");
    $(this).next().addClass("spoiler-show");
  } else if ($( this ).next().is(".spoiler-show")) {
    $(this).next().removeClass("spoiler-show");
    $(this).next().addClass("spoiler-hide");
  }
 });
});
//]]>
</script>
</b:if>

Setelah itu tambahkan kode CSS di bawah ini sesudah tag ]]></b:skin> gunakan CTRL + F untuk mencari.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Multi Spoiler Agiel Triono */
.spoiler{text-align:center}
.spoiler span{text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;display:inline-block;margin:0;background:#aa65c7;color:#fff;text-align:center;border:none;border-radius:3px;padding:8px 16px;margin:10px auto;font-size:14px;font-weight:bold;vertical-align:middle;cursor:pointer;user-select:none;text-shadow:0 1px rgba(0,0,0,0.3);transition:background 0.1s ease-in-out}
.spoiler span:hover,.spoiler span:focus{background:#9e4fbf;outline:none}
.spoiler-panel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.spoiler-panel{padding:24px}
.spoiler-hide{display:none}
.spoiler-show{display:block}
</style>
</b:if>

Oke Simpan Template.

Kode Pada Postingan.
<spoiler>KONTEN ANDA DI SINI</spoiler>
Ganti KONTEN ANDA DI SINI dengan konten yang ingin anda sembunyikan.


Silahkan kreasikan sendiri jika ada kekurangan. Semoga tutorial ini dapat bermanfaat untuk sobat.
See Full Content

Monday, January 15, 2018

Mempercepat Koneksi Internet Dengan Kostum DNS

thumbs

Apa itu Domain Name System(DNS) , DNS adalah sebagian dari struktur dalam layanan komputer, yang terkoneksi dengan internet, DNS adalah sebuah nama Domain yang bervariasi dan beragam jenis nya dengan memunculkan nama menjadi angka yang dapat di pahami. Singkat nya DNS adalah jembatan. Nah Jembatan itulah yang menentukan seberapa cepat atau lambat nya koneksi.

Untuk mengatasi koneksi lambat atau cepat namun kurang stabil, kalian bisa menggunakan kumpulan DNS yang sudah saya sediakan di bawah.Ini adalah teknik dasar dari Kostum DNS dan saya rasa efektif buat kalian yang memang memiliki internet lambat.
Dan Perlu di ketahui angka sebelum koma adalah preffered DNS dan angka setelah koma adalah alternate DNS yang nanti kalian pakai.

US - Google Public DNS=8.8.8.8, 8.8.4.4
US - Freenom=80.80.80.80, 80.80.81.81
US - OpenDNS=208.67.222.222, 208.67.220.220
US - OpenDNS - 2=208.67.222.220, 208.67.220.222
RU - Yandex=77.88.8.1, 77.88.8.8
US - Norton ConnectSafe Basic=199.85.126.10, 199.85.127.10
US - Level 3 - A=209.244.0.3, 209.244.0.4
US - Level 3 - B=4.2.2.1, 4.2.2.2
US - Level 3 - C=4.2.2.3, 4.2.2.4
US - Level 3 - D=4.2.2.5, 4.2.2.6
US - Comodo Secure=8.26.56.26, 8.20.247.20
US - Dyn=216.146.35.35, 216.146.36.36
US - Advantage=156.154.70.1, 156.154.71.1
US - Norton DNS=198.153.192.1, 198.153.194.1
US - Comodo=156.154.70.22, 156.154.71.22
GB - Fast Broadband=78.143.192.10, 78.143.192.20
US - Qwest=205.171.3.65, 205.171.2.65
US - CenturyLink=74.4.19.187, 67.238.98.162
US - Sprint=204.97.212.10, 204.117.214.10
US - Hurricane Electric=74.82.42.42
TR - TurkTelekom=195.175.39.40, 195.175.39.39
DK - Censurfridns=89.233.43.71, 91.239.100.100
RU - Safe DNS=195.46.39.39, 195.46.39.40
IT - OpenNIC=192.71.245.208, 108.61.210.58
DE - Open Root=109.230.224.42, 87.118.126.225
FR - Open Root=37.187.23.23, 37.187.99.178
DE - DNS WATCH=84.200.69.80, 84.200.70.40
DE - ClaraNet=212.82.225.7, 212.82.226.212
AT - FreeDNS=37.235.1.174, 37.235.1.177
US - Sprintlink=199.2.252.10, 204.97.212.10
NL - A2B Internet=46.244.10.98, 46.244.10.116
US - SpeakEasy=216.27.175.2, 64.81.45.2
DE - Cesidian Root=178.254.21.113, 37.221.193.195
GB - Bulldog1=212.158.248.5, 212.158.248.6
GB - Bulldog2=83.146.21.5, 83.146.21.6
US - UltraDNS=204.69.234.1, 204.74.101.1
GB - Tiscali=212.74.114.129, 212.74.114.193
GB - TimeWarp=217.149.108.10, 217.149.108.11
GB - Zen Internet=212.23.8.1, 212.23.3.1
GB - Orange DNS=195.92.195.94, 195.92.195.95
BG - MegaLan=95.111.55.251, 95.111.55.250
DE - FoolDNS=87.118.111.215
GB - BSO Network=212.73.209.34, 212.73.209.35
US - ServInt=206.214.214.28
ES - Servidordenoms.cat=109.69.8.51
FR - Budget Telekom=95.170.0.168

Untuk cara penerapan nya disini saya menggunakan Windows 7 , kalian buka Control Panel > Network and Internet > Network Connections.
di sana akan muncul modem atau lan sobat lalu klik kanan pilih properties, pada jendela pilih Internet Protocol Version 4 (TCP/IPv4).
di jendela pilih Use the following DNS address:

di sini saya memakai DNS Google.
Contoh :
untuk preffered DNS saya pakai 8.8.8.8
untuk alternate DNS saya memakai 8.8.4.4

Jika sudah kalian save dan coba rasakan kecepatan yang berbeda.

Untuk pengguna Smartphone ,kalian wajib harus sudah Root terlebih dahulu untuk mencoba teknik ini.
See Full Content

Membersihkan Ram Dengan Notepad

thumbs

Kita mungkin sering mngeluh dengan komputer yang beoperasi sangat lambat jika di pakai dengan pemakaian ruten serta dalam jumlah proses yang cukup banyak yang memungkinkan komputer dapat terjadi overheating. Masalah ini bnyak saya alami terutama pada spesifikasi komputer yang cukup minim.
Nah kita akan belajar mengatasi masalah bagaimana memberikan ruang yang cukup pada Random Access Memory(RAM) dengan cara yang sederhana.
Pertama kita akan mengecek berapa jumlah memori pada komputer.
Klik Pada start menu Windows Lalu pada kolom pencarian ketik “run“ lalu pilih,setelah itu pada jendela ketik "cmd" lalu tekan Enter.
setelah itu di cmd ketik "systeminfo".
lihat berapa Ram yang kamu punya saat ini. jika jumlah punya saya berkisar 4GB adalah 4096MB atau 409600000byte
seperti ini.

FreeMem=Space(409600000)

4 digit angka dari depan adalah jumlah dari total RAM kamu jika 4 GB jadi kalo di kali kan 4 maka menjadi 16GB,16GB adalah 16384MB atau 163840000byte.
seperti ini tepat nya.

FreeMem=Space(163840000)

jadi kalian kalkulasikan sendiri angka nya ya.
Nah kalian save tuh kode yang kalian buat tadi di notepad dengan nama ramcleaner.vbs .
kedua kita akan membuat lagi script vbs di notepad.
kalian ketik seperti di bawah ini.

mystring=(80000000)

lalu kalian simpan dengan nama Ramcleaner2.vbs .

usahakan simpan di dekstop biar gak bingung mnecari file nya.
Selesai , Coba Klik dua kali file tersebut dan rasakan kenikmatan nya setelah di bersihkan.
See Full Content

Saturday, January 13, 2018

Menambahkan Jquery Clipboard Pada Syntax Highlighter

thumbs

Syntax Highlighter Memang berguna untuk memastikan pengunjung untuk tahu jenis kode apa yang sedang kita tulis dalam postingan kita. Mungkin dari sebagian kalian sudah tahu semua kegunaan Syntax Highlighter, Ya Syntax Highlighter Sekarang Sudah Banyak brand yang Di gunakan seperti Prism,Crayon,Highlight dan Masih Banyak Lagi. Dan Kini saya ingin berbagi tutorial bagaimana cara menambahkan Tombol Copy To Clipboard Button menggunakan JQUERY . Oke langsung saja .

Step 1
Buka draft.blogger.com lalu Edit HTML. Dan kita Tambahkan CSS di bawah ini sebelum tag <Head> .
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Clipboard Button */
.copycode{transition:all 200ms ease-in}
.copycode{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}
.copycode{position:absolute;display:inline-block;padding:6px 12px;font-size:13px;font-weight:bold;line-height:20px;color:#333;opacity:0;right:8px;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #d5d5d5;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}
.copycode:hover{background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)}
/* use opacity:1; for more visible */
pre:hover .copycode{opacity:1}
</style>
</b:if>

Step 2
Letakan kode Di bawah sebelum tag </body> .
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
//<![CDATA[
// TO DO
$(document).ready(function() {
var e = $(".post-body pre code"),
      l = "<button class='copycode'>Copy</button>";
    e.before(l);
});
(function($){
$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("Copy");
    }
}
$.fn.removeRange = function(){
 if (window.getSelection) {
    if (window.getSelection().empty) {
            window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {
            window.getSelection().removeAllRanges();
     }
    } else if (document.selection) {
           document.selection.empty();
  }
 }
})(jQuery);
$(document).ready(function() {
  $(".copycode").click(function() {
    var e = $(this).parent().find('code'),
        l = $(this),
        c ="Copied",
        d = l.text();
     e.selectText();
     l.html(c);
   setTimeout(function(){
     l.html(d);
   e.removeRange();
   },1000)
  });
});
//]]>
</script>
</b:if>

Lalu Save Template.
Nah sekarang coba lihat hasilnya.
oh iya untuk memastikan kode terpasang dengan benar , coba kalian buka postingan yang terdapat Syntax Highlighter.


Mohon maaf apabila ada kesalahan . kalian bisa memberikan feedback langsung kepada saya pada kolom komentar. Terima kasih
See Full Content

Tuesday, January 9, 2018

Tutorial Membuat Halaman Error 404

thumbs

Malam Gaes , kali ini saya mau bagi tutorial membuat halaman Error 404 . Dengan sedikit trik javascript bind url window dan Responsive layout.
Langsung ajah kita simak.

Cara Pasang
Cara pasang nya cukup mudah kalian taruh kode berikut di antara tag <body> dan </body>.
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style scoped='scoped' type='text/css'>
/* Error Page */
html,body{background-color:#334453!important}
.page-container{width:100%;float:left;min-height:100%}
.page-container .page-content{padding-left:250px;z-index:1;background:#f0eff5;min-height:100%;padding-bottom:10px}
.page-container .page-content.page-content-default{background:#334454;padding:0;float:left;width:100%}
#errrr{margin:0!important;font-size:13px!important;line-height:normal!important}
#errrr #text-url{color:#e74c3c;white-space:pre-wrap;word-wrap:break-word;display:block}
/* Error Button */
.back-to{display:block;width:100%;margin-bottom:0;padding:10px 15px;font-family:inherit;font-size:15px;font-weight:400;line-height:1.4;text-align:center;overflow:visible;text-transform:none;border:none;border-radius:4px;-webkit-appearance:button;-webkit-transition:border .25s linear,color .25s linear,background-color .25s linear;transition:border .25s linear,color .25s linear,background-color .25s linear;-webkit-font-smoothing:subpixel-antialiased;white-space:normal;color:#fff;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;background-image:none}
.back-home{color:#fff;background-color:#5dade2;border-color:#5dade2}
.back-history{color:#fff;background-color:#1abc9c}
.back-home:hover,.back-home.hover,.back-home:focus,.back-home:active,.back-home.active{color:#fff;background-color:#5dade2;border-color:#5dade2}
.back-history:hover,.back-history.hover,.back-history:focus,.back-history:active,.back-history.active{color:#fff;background-color:#48c9b0;border-color:#48c9b0}
/* Error Block */
.block-error{width:400px;margin:50px auto 0}
.block-error .error-num{font-size:190px;font-weight:100;text-align:center;float:left;width:100%;color:#FFF;line-height:180px}
.block-error .error-text{font-size:31px;color:#F5F5F5;float:left;width:100%;font-weight:200;text-align:center;margin-top:10px;text-transform:uppercase}
.block-error .error-description{font-size:13px;color:#F0F0F0;float:left;width:100%;font-weight:300;margin:30px 0;text-align:center}
.block-error .copy{float:left;width:100%;text-align:center;color:#FFF;margin-top:30px;color:#dddddd}
</style>
        <div class='page-container'>
            <div class='page-content page-content-default'>
                <div class='block-error'>
                    <div class='error-num'>404</div>
                    <div class='error-text'>Page not found</div>
                    <div class='error-description'><p id='errrr'/></div>
                    <div class='row'>
                        <div class='col-md-6'>
                            <button class='back-to back-home' onClick='document.location.href = &apos;/&apos;;'>Back to <data:blog.title/></button>
                        </div>
                        <div class='col-md-6'>
                            <button class='back-to back-history' onClick='history.back();'>Previous page</button>
                        </div>
                    </div>
                    <div class='copy'>
                      &#169; All Rights Reserved <data:blog.title/> <span id='current-year'/>
                    </div>
                </div>
            </div>
        </div>
<script type='text/javascript'>
//<![CDATA[
// Get Current Year
function getCurrentYear(){var e=new Date;return e.getFullYear()}el=document.getElementById("current-year"),el.innerHTML=getCurrentYear();
// Get Url
document.getElementById("errrr").innerHTML = "The requested URL <span id='text-url'>"  + window.location.href + "</span> was not found on this server.";
//]]>
</script>
</b:if>
Lalu save Template

Result :
thumbs

Jika ada kekurangan silahkan kreasikan sendiri.
See Full Content

Monday, January 8, 2018

Template Safelink Update 2.1

thumbs

Hai Bro, Good News Nih Hari ini Safelink Template sudah Update dengan tampilan terbaru. dengan Lebih Cepat dari yang sebelum nya. Saya harap kalian suka dengan versi yang sekarang.

What's New ?
  • New Flat Look N Feel
  • New Back To Top Button
  • Auto Resize Thumbnail
  • SEO Ready
  • New Look In Safelink Page

thumbs
thumbs


Safelink akan terus saya update untuk tetap Responsive.
See Full Content