HI, I’M JOHN DOE

We are next Front-End Web Developer

About Me

I'm a Web Developer and UX/Designer

Quisque in metus tristique, gravida dolor ut, varius neque. Maecenas ac risus aliquam, facilisis massa id, vulputate elit. Curabitur pretium arcu dictum, faucibus diam quis, commodo turpis. Proin viverra, risus eget egestas sodales, felis ante scelerisque ligula, eget condimentum diam ligula eu tellus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, exercitationem, laboriosam, modi non quisquam voluptas accusamus numquam ipsum reiciendis saepe veniam cupiditate explicabo autem. Repudiandae tempore dolore deserunt nemo voluptatum consectetur aspernatur expedita aliquid iste illo enim molestias vel animi quod.

John Doe Web Developer

My Services

WHAT I CAN DO

Web designing

Graphic Designing

Content Writing

Integer hendrerit erat sed tellus pretium, eu sodales eros dignissim. Duis augue eros, mollis ac velit at, rutrum tincidunt ipsum. Morbi semper dui id fringilla semper. Etiam vulputate sagittis vestibulum. Vivamus ac ante cursus, feugiat ipsum et, aliquet justo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, minima soluta numquam perferendis illum alias omnis commodi error veritatis a esse nostrum asperiores recusandae.
  • Graphics 90%
  • HTML5 CSS3 75%
  • WordPress 66%
  • Blogger 88%

My Blog

MY BEST WORKS
Cara Agar Postingan Blog Tidak Bisa diCopy-Paste
Sebenarnya ini salah satu tips sederhana Anti copas agar Postingan tidak diCopy-Paste oleh orang lain. Yah, paling tidak bisa mencegah copaser untuk mengcopas tulisan pada artikel kita. sebetulnya saya sendiri tidak mempermasalahkan tindakan copy paste terutama yang dilakukan di blog ini, asalkan sobat menyertakan link aktif artikel yang dicopas sebagai sumbernya. Kira-kira dengan cara seperti itulah kita bisa saling menghargai hasil ketikan jari sesama blogger.



Langkah-langkahnya adalah sebagai berikut:
1. Login dulu Akun blogger/blogspot anda
2. Buka rancangan lalu pilih Edit Html
3. Cari kode <Head>
4. Setelah didapatkan kodenya, letakkan kode berikut di atas kode <Head>
/*Perlindungan Copy Paste Document
===========================
<SCRIPT type='text/javascript'>
if (typeof document.onselectstart!=&quot;undefined&quot;) {
document.onselectstart=new Function (&quot;return false&quot;);
}
else {
document.onmousedown=new Function (&quot;return false&quot;);
document.onmouseup=new Function (&quot;return true&quot;);
}
</SCRIPT>
============================*/
5.Klik Save
Namun jika sobat blogger memang sama skali tak mentolerir tindakan ini atau memang tidak mau artikelnya sampai diduplikat orang lain, maka bisa sobat siasati dengan memasang 3 trik anti copas (disable klik kanan) berikut:
Trik pertama:
1. Mula mula login akun blogger/blogspot anda
2. Buka rancangan lalu pilih Edit Html
3. Lalu cari kode <body>
4. Kita gunakan script berikut untuk meletakkan link sumber (link source) otomatis ketika dicopas. Letakkan script-nya di atas kode <body>
<script type="text/javascript">if(document.location.protocol=='http:'){var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Sumber:"};(function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://infonetmu.googlecode.com/files/sumber-otomatis.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();} </script>
Catatan: Ubah tulisan berwarna merah sesuai keinginan, misalnya "Artikel bersumber dari"
5. Klik Save
Trik Kedua:
1. Klik rancangan, pilih Edit HTML
2. Cari dan ganti kode <body> dengan kode berikut
<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false" >
3. klik save.
Trik Ke Ketiga: Menonaktifkan klik kanan sekaligus mengeluarkan pesan peringatan seperti gambar berikut.

Caranya:
1. Klik rancangan - Elemen laman - Tambah gadget - HTML/Javascript
2. Masukkan kode di bawah ini
<script>
var pesen="Tidak diperbolehkan klik kanan oleh Admin!
///////////////////////////////////
function clickIE4()
{if (event.button==2){alert(pesen);return false;}}function clickNS4(e)
{if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(pesen);return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(pesen);return false")
</script>
Catatan:
Ubah tulisan yang berwarna merah dengan pesan peringatan yang diinginkan.
3. klik save
Cukup mudah dan gampang bukan!? Ini supaya Blog Tidak Bisa Di Copy Paste. Silakan pilih yang mana yang dirasa lebih baik, apakah sobat memperbolehkan Copas tapi harus ada link sumbernya, atau sama sekali tidak ingin ada yang meng-copas artikelnya.
Semoga artikel ini bisa bermanfaat buat anda yang ingin menerapkan anti copas diblog.
Selamat mencoba..!!!
Membuat Simple Tabber di Sidebar
Tabber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.

Nah kali ini saya akan memberikan satu tips untuk Anda semua dalam membuat tabber, sangat sederhana dan tidak memperberat loading blog. Tips ini saya dapat dari Pak Abu Farhan, master blogger Indonesia yang sudah malang melintang di dunia persilatan.. eh dunia perbloggeran. Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.

tabber sidebar maskolis

Untuk hasil akhir tabber ini gambarnya seperti diatas, jika ingin melihat demonya disini. Baiklah, langsung saja pada cara pemasangannya :
  1. Login ke blogger dengan akun anda
  2. Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    .widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:10px;
    }
     
    .widget-tab {
    background:#c9dbdd;
    font-family:Arial,Helvetica,sans-serif;
    padding:5px !important;
    }
     
    .widget-tab  ul {
    margin:0px;
    padding:0px 5px 0 5px;
    }
    .widget-tab  ul li {
    list-style:none;
    border-bottom:1px dotted #a4bddf;
    padding-top:4px;
    padding-bottom:4px;
    font-size:12px;
    }
    .widget-tab  ul li:last-child {
    border-bottom:none;
    }
    .widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
    }
    .widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
    }
    .tab-content  ul li a:hover {
    color:#a59c83;
    }
    .tab-content  ul li a:hover small {
    color:#baae8e;
    }
     
    .active-tab{
    background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGZl0HN2hzt0o2Ei3f1qgal91nVmpJxj1sVZgFomyKqZ9oWm__5_5uvpuLUh-ZMT6IcPpkOqOPwk1tqe28arNaVrY_B8M9iajNEtE_DcHqzt08iUKCPHjvJdFaXGNsOxOc-BaWcw4zGfDY/s1600/sidebar.png) repeat-x scroll left bottom !important;
    color:#282E32 !important;        
    }
     
    ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
    }
     
    ul.tab-wrapper li{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFacQAJC6tZlwQiQV7gMpYOgmid7jZM7Fm9XzaLUIwJV_rvjzzN10nHlfoznfDu7mmxeEbv3rGjpYL4SR8_4-oYSnf2OU0_T9QW6AJCvXfWtVtDs0ZSh2KLgr9PXSpU3BKLW5-VQmWwzl/s1600/menu-m1.png) repeat-x top;
    color:#FFF;
    cursor:pointer;
    display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:700;
    line-height:2em;
    list-style-image:none!important;
    list-style-position:outside!important;
    list-style-type:none!important;
    margin-right:1px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    padding:8px 14px
    }
  5. Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> (jika pada template anda sudah terinstall, langkah ini dilewati saja) :

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

  6. Setelah itu, tambahkan kode berikut ini di bawah script jquery diatas

    <script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar&quot;;
    </script>
    <script src='https://yourjavascript.com/229125112341/tabber.js' type='text/javascript'/>

    Keterangan :
    var starttab=0;
    var endtab=3;
    var sidebarname="sidebar";
    Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtab adalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).

    Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>

  7. Setelah itu Save/Simpan template, sudah selesai.
Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk membuat tabber sederhana dengan jquery, silahkan dimodifikasi sendiri warna serta tampilan lainnya. Sesuaikan dengan komposisi warna blog Anda sehingga tabber ini semakin memperindah tampilan blog dan pengunjung semakin betah berlama-lama di blog Anda. Selamat mencoba dan semoga bermanfaat.....


Script source by : Abu Farhan
Membuat Label Bergerak (Blogmulus) di Blogspot
Tahukah kalian apa itu blogumulus? Blogumulus adalah label widget yang dibuat dengan basis flash animation. Widget ini akan beraksi jika pointer mouse didekatkan ke widget ini. Pertama kali Blogumulus diciptakan oleh Roy Tankc tapi cuma terbatas untuk pengguna Wordpress dan tidak bisa di pakai didalam Blogger. Tapi sekarang Amanda Fazani sudah menyempurnakan widget ini sehingga bisa dipakai di dalam blogger.


Ok..! langsung saja sebelum kita mengenal label itu saya ingin mengucapkan terima kasih kepada Roy Tanck karena hasil karyanyalah label ini tercipta. Bagi yang belum mengetahui nama label tersebut saya akan memberitahukan label itu bernama Blogumulus atau sebagian orang mengucapkannyaBlogumus itu..? Blogumulus itu awalnya diciptakan untuk pengguna Wordpress yang bernama Tag-Cumuluswidget ini yang berbasis flash sehingga bisa dianimasikan. dan karena untuk saat ini sudah bisa dipakai di BLOGGER berkat kreatifitas Amanda Fazani, sebagai pengguna mesin blogger kita bisa memasang widget tersebut di blog kita. Thank's to Amanda Fazani atas kreatifitasnya. maka dirubahlah namanya menjadi Blogumulus. Untuk melihat seperti apa label animasi ini, Oke, bagi anda yang tertarik untuk memasang label animasi atau label flash ini, kita langsung menuju pada langkah-langkahnya. 
  1. Login ke blogger dengan ID anda.  
  2. Klik Tata Letak.  
  3. KLik tab Edit HTML.  
  4. Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman. 
  5. Cari kode yang mirip dengan kode di bawah ini :
  6. <b:section class='sidebar' id='sidebar' preferred='yes'>
  7. Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.
  8. <b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Posted by <a href='http://adesyams.blogspot.co.id/'>Ade'S Tricks</a></div> <script type='text/javascript'> var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;); // uncomment next line to enable transparency //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;); so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;); so.addVariable(&quot;mode&quot;, &quot;tags&quot;); so.addVariable(&quot;distr&quot;, &quot;true&quot;); so.addVariable(&quot;tspeed&quot;, &quot;100&quot;); so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;); so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;); so.write(&quot;flashcontent&quot;); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
  9. Kemudian Save Template anda.
Note : Agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal: Merubah lebar, tinggi dan warna background. Variable untuk lebar dan tinggi ada pada baris script berikut,

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
240 menunjukkan lebar widget. 300 menunjukkan tinggi widget. #ffffff menjukkan warna background. 100 menunjukkan kecepatan putaran. Merubah warna text. Variable untuk lebar dan tinggi ada pada baris script berikut, so.addVariable("tcolor", "0x333333");"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja. Merubah ukuran font. Variable untuk lebar dan tinggi ada pada baris script berikut,
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
12 menujukan ukuran font yang digunakan. ~> bila anda menginginkan background yang transparan, maka anda tinggal menghapus tanda // dari script di atas
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;); Nah, silahkan anda ganti kode-kode pada variabel di atas sesuai dengan kebutuhan template anda.

Semoga Berhasil.

Contact Me

Get in touch