ALy Kampret: Desember 2015

Minggu, 13 Desember 2015

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Darul Sahaja - Bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog saya [tenag aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,,

] silakan ikuti lankah-langkah berikut ini ya sobat:

1. Silahkan Login ke akun blogger sobat.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>var tujuan ='http://Alamat Url Feeds Sobat'</script>

<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)

Keterangan:

Kode warna hijau: ganti dengan URL Feeds sobat
Kode warna biru: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.

Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.

1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.

2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan URL gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah URL berikut dengan URL gambar sobat:

http://petir-project.googlecode.com/files/feed.png

4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti url http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.

Selamat mencoba ya sobat,,

Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7znTZDAgmekYZrKYWSOiuhZ7Uw50TPI83NNdPVVGhihpHmAFKMv1K662Txx9H2tQrfci7mChi3f8t3M_OVMGt57-yUGrWT1YTJNL9ijwBIIQXYLbsYAux19_ahXfQgndCEk-ecrejGp0W/s1600/Untitled-2.png'/></a>

Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7znTZDAgmekYZrKYWSOiuhZ7Uw50TPI83NNdPVVGhihpHmAFKMv1K662Txx9H2tQrfci7mChi3f8t3M_OVMGt57-yUGrWT1YTJNL9ijwBIIQXYLbsYAux19_ahXfQgndCEk-ecrejGp0W/s1600/Untitled-2.png'/></a>

5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:

Kode warna kuning adalah posisi tombol berada
Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan gambarnya dengan selera anda)

Cara Kedua:
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

1. Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.

    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

2. Kemudian sisipkan kode berikut ini setelah atau dibawah kode </body>

3. Lalu simpan tamplate anda, dan lihat hasilnya…

Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol

apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:

=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).

Jangan lupa komentarnya… :)

Sabtu, 12 Desember 2015

Cara Mecegah Copy Paste Pada Blog

Setelah sekian lama tidak posting dikarenakan masih banyak urusan yang harus saya selesaikan, dan kali ini saya hanya sedikit share dari postingan blog sahabat yaitu tentang cara mencegah copy paste pada blog, kalau menurut saya sih hal ini tidak terlalu penting, merupakan satu keuntungan tersendiri bila artikel kita di copas (copy paste), apa lagi bila sobat yang copas mau mencantumkan sumber dari artikel tersebut, bisa menambah back link kan, merupakan keuntungan tersendirikan.

Namun bagi sobat yang merasa bahwa artikel sobat sangat penting dan tidak rela untuk di copy paste, mungkin hal ini cukup berguna untuk dilakukan. akan tetapi cara tersebut tidak melindungi content blog sobat sepenuhnya, stidaknya cukup membuat orang yang berniat copas sedikit bingung apabila dia seorang newbie, karena sebenarnya ada jalan lain untuk bisa meng-copas artikel blog sekalipun sudah dilindungi dengan script anti copas.

Tanpa panjang lebar, kali ini untuk melindungi blog di blogger (blogspot) dari dari copy paste adalah dengan mendisable right click, atau lebih dikenal dengan mematikan klik kanan. Berikut tutorial cara mematikan klik kanan pada blogspot.

Login terlebih dahulu ke Blogger.com
Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>

Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.

Berikut penjelasan dari kode-kode diatas:

oncontextmenu='return false' (untuk mematikan klik kanan mouse)
onmousedown='return false' (untuk mematikan klik blok ke bawah)
onselectstart='return false' (untuk mematikan seleksi blok)
onkeypress='return false' (untuk mematikan tombol keyboard)

Jika sudah, Simpan Template blog Sobat.

Mohon maaf apabila tutorial sebelumnya tidak berhasil karena belum saya coba. untuk demonya silakan sobat lihat di sini DEMO.

Selamat mencoba dan semoga berhasil sobat. :)

Cara Membuat Widget Menu TAB View Pada Blog

Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silahkan Login ke blog sobat

2. Masuk ke tab Perancangan lalu pilih edit HTML

3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.

4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian

5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */ div.Tabateonsoft div.TFs {height: 30px; overflow: hidden;} div.Tabateonsoft div.TFs a {float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em; background:#f0f0f0; color: #333; border-top:1px solid #CCCCCC; border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #cccccc; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px; } div.Tabateonsoft div.TFs a:hover { background: #E8E8E8; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999;} div.Tabateonsoft div.TFs a.Active { background: #333; color: #000000; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999; font-weight:bold; color: #ffffff;} div.Tabateonsoft div.Pages { clear: both; overflow: hidden; height:333px; border:1px solid #EFF0F1; padding:0;background: #222222; -moz-border-radius:5px;} div.Tabateonsoft div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; } div.Tabateonsoft div.Pages div.Page div.floor { font-size:12px;padding: 3px 5px; text-align:left;}

5. Letakkan kode dibawah ini diatas kode </head>

6. Save template

7. Masuk ke tab Elemen laman

8. Tambahkan widget HTML/JavaScript

9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript

Setelah itu simpan dan lihat hasilnya. :)

Jumat, 11 Desember 2015

Cara Memasang Slide Box Rekomendasi di Blog

Silahkan simak tutorial Cara Membuat Slide Box Rekomendasi Artikel pada blog dibawah ini :

1. Cari kode script berikut ]]></b:skin> (gunakan Ctrl + F untuk mempercepat pencarian)

2. Copy kode script dibawah ini, lalu paste tepat di Atas kode script ]]></b:skin>

/* Related Post with Sliding CSS */
#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:335px;height:250px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Castellar, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:40px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-10px;style:none;}
.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}
a.related-post-item-title {color :#333 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}
/* End CCSS Related Post with Sliding */

Catatan :
Kode script yang berwarna Biru bisa Anda ganti sesuka hati Anda
width : 335 (lebar kotak rekomendasi artikel)
height : 250 (tinggi kotak rekomendasi artikel)
-10px : merupakan letak gambar dari sebelah kiri, jika semakin besar angka yang diberikan maka gambar akan semakin dekat dengan garis

3. Cari kode script berikut </head> (gunakan Ctrl + F untuk mempercepat pencarian)

4. Copy kode script dibawah ini, lalu paste tepat di Atas kode script </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
        }
    });
$(document).ready(function(){
 var kislidingbox      = $(&#39;#kislidingbox&#39;);
    var closed      = $(&#39;#kislidingbox-close&#39;);
    var minimize    = $(&#39;#kislidingbox-minimize&#39;);
    var maximize    = $(&#39;#kislidingbox-maximize&#39;);
    maximize.hide();
    closed.click(function(){
        kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;});
        kislidingbox.fadeOut(&#39;slow&#39;);
    })
    minimize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        minimize.show();
    })
});
</script>

Catatan :

Kode script warna Hijau : Boleh Anda pasang atau tidak, sebaiknya Anda pasang agar membuat slide box rekomendasi artikel pada blog Anda berhasil. Tetapi sebelum di pasang apakah kode script tersebut sudah terpasang pada blog Anda atau belum, jika belum silahkan pasang dan jika sudah tidak dipasang juga tidak apa-apa
Kode script Biru : Bisa Anda ganti selain 400, bisa juga 500,600,700 atau bahkan lebih. Semakin besar angka yang diberikan maka akan semakin bawah slide box muncul pada blog Anda

5. Cari kode script berikut <div class='post-footer'>

6. Copy kode script dibawah ini, lalu paste tepat dibawah kode <div class='post-footer'> (kodenya yang ke 2)

Catatan :

Jika blog Anda tidak memiliki 2 kode script <div class='post-footer'>
Anda bisa menyimpannya tepat dibawah kode script
<data:post.body/>
<div class='clear'/>

<!-- Related Post with Sliding -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span>
        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU-OEjWBGIti0pdR9Y7FgUcIR5TfjJ1RqelyKCj2IhxVDqHRvZC89F64H02dzBToBhAlJdAA6auQxLm3XlFlWr9kAhqH2E3iBYT_Zp2rGdcs6f93eTJ7yrT_QcvKIk7HvO0EWiIJ2/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzMG9gokfH-0SEBl3RGPctX-Wtm6rn_wGPWEKNLA0QAEWfH0Q1O9CUVHKUr4IRDImbPyiwHTJTd47cpqx5467IfNt1lgkUgqQFxTJvKPljuR1lne69SC0tCQWQ-lEPFTv1JzkBDJmg/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhajjSZA4RoEASGkfPc_L1nV_EGtE8FiNj8eH1_Fxmy5d8CnEGb4Gw5rNYePzO1Wv48G0ENlhB5L2k2kOC9Br_2QrrJSIoQYiTm6etcn9iWGs0HohjGeGGRhv_uVbKvtMZUmtYTv4P/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='sliding-tab'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,
      numPosts: 3,
      summaryLength: 0,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 45,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;sliding-tab&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script><script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>         
    </div>
</div>
</b:if>
<!-- Related Post Widget End -->

Catatan :

Baca Juga Artikel Ini = Bisa Anda ganti dengan kata-kata Anda sendiri, atau dengan kata-kata seperti ini : Artikel Rekomendasi, Recommended Article, Rekomendasi Artikel, Mungkin Artikel Yang Anda Cari, dan lain-lain
numPosts: 3 = Jumlah rekomendasi artikel yang muncul, bisa Anda ganti 1,2,3,4,5. Lebih dari 5 mungkin akan terlalu kebanyakan
thumbnailSize: 45 = Ukurang gambar yang tampil pada slide box rekomendasi artikel, bisa Anda ganti sesuai keinginan Anda
newTabLink: false = Artinya jika artikel yang ada pada kotak slide box rekomendasi Anda klik, maka artikel tersebut tidak akan muncul di tab baru. Jika Anda ganti menjadi true, maka artikel tersebut jika di klik akan muncul di tab baru