Tempatnya Belajar dan Berbagi

Written By Unknown on Rabu, 18 September 2013 | Rabu, September 18, 2013

Tempatnya Belajar dan Berbagi

Memasang IP Address di Blogger

Posted: 16 Sep 2013 09:57 PM PDT


Tutorial kali ini saya akan membahas tentang memasang IP Address di blogger anda.Dengan memasang IP address pada blog, anda dapat mengetahui atau melacak IP address para pengunjung blog atau web yang kita kelola. Tidak hanya itu, amda bahkan dapat mengetahui browser dan operating system yang sedang anda pakai. Ada beberapa situs yang menyediakan untuk melacak IP address secara gratis diantaranya adalah www.wieistmeineip.de

Untuk memasangnya sangat mudah, Anda cukup kunjungi situs www.wieistmeineip.de. Kemudian pada halaman depan akan ada gambar seperti dibawah ini :


Klik gambar tersebut dan kemudian anda akan dibawa ke halaman pilihan model IP address beserta kode HTML-nya, contohnya seperti ini :



Anda salin (copy) kode HTML-nya dan masukkan ke blog anda. Caranya seperti berikut :
  1. Login ke blogger dengan akun anda
  2. Setelah itu klik Tata Letak
  3. Menuju ke Elemen Halaman
  4. Klik Tambah Gadget
  5. Pilih yang HTML/Javascript
  6. Masukkan kode HTML-nya kedalam kolom kosong yang tersedia
  7. Lalu Simpan. 
Nah, itu tadi tutorial sederhana mengenai pemasangan IP Addres di Blog, selamat mencoba dan semoga bermanfaat. Oya, jangan lupa kasih komentar, ya? Komentar temen-temen sangat berarti bagi blog ini.
jangan lupa untuk berlangganan dan follow blog ini.

Memasang Disable Right Click di Blog

Posted: 16 Sep 2013 09:57 PM PDT


Bukan berarti dengan artikel ini saya termasuk blogger yang melarang keras adanya copy paste. Tapi disini saya tegaskan kembali bahwa blog saya ini bebas di copy paste siapa saja. Nah, pada tutorial kali ini saya akan menjelaskan bagaimana untuk membuat klik kanan pada mouse anda tidak dapat berfungsi. Klik kanan atau right click terkadang sering digunakan untuk kopi paste, seperti saya misalnya he he he.... Setelah dipasang kode Disable Right Click pada blogger anda setiap pengunjung atau anda sendiri akan kesulitan melakukan klik kanan, jika demikian isi dari halaman blog anda, artikel dan gambar tidak bisa di copy atau disalin.

Terkadang sebuah website atau blog ada yang mengandung konten privasi, seperti gambar yang kiranya sangat riskan untuk di copy oleh orang lain dan untuk keperluan yang bisa sangat merugikan anda. Untuk itu di perlukan teknik men-disable klik kanan pada blog, maka gambar-gambar yang sangat privasi tidak akan bisa di copy dan di salahgunakan oleh orang lain. Nah, jika di antara temen-temen ingin memakai tips ini berikut langkah-langkah pembuatannya :
  1. Login ke Blogger dengan akun anda.
  2. Kemudian klik Tata Letak >> Elemen Halaman.
  3. Pilih yang HTML/JavaScript.
  4. Copy kode dibawah ini ke dalam kolom kosong yang tersedia :
    5. <script> var message="Maaf, Klik Kanan Tidak Diperbolehkan !"; /////////////////////////////////// function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);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(message);return false") </script>
  5. Setelah itu anda Save, dan lihat hasilnya.
Tulisan yang berwarna merah adalah sebuah pesan yang akan muncul jika seorang pengunjung atau anda sendiri melakukan klik kanan pada mousenya. Temen-temen  bisa  ganti sesuai dengan keinginan. Nah, itu tadi cara agar klik kanan pada mouse tidak aktif. Bagi temen-temen saya sarankan nggak usah pasang aja lah. Toh, mereka juga bisa dapat artikel itu dari blog lain.. he... he... he
jangan lupa untuk berlangganan dan follow blog ini.

Membuat Efek Image Zoom dengan Jquery

Posted: 16 Sep 2013 09:57 PM PDT


jquery zoom image
Seperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar, kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu membuat efek image zoom. Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Untuk lebih jelasnya anda bisa lihat disini, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langkah pembuatannya :
  1. Login dulu ke blogger anda
  2. Kemudian klik Rancangan 
  3. Setelah itu klik Edit HTML
  4. Lalu anda cari kode berikut ]]></b:skin>
  5. Setelah ketemu masukkan kode CSS dibawah ini sebelum kode diatas
    div.jquery-image-zoom {
    line-height: 0;
    font-size: 0;
    z-index: 10;
    border: 5px solid #fff;
    margin: -5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    div.jquery-image-zoom a {
    background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: -17px;
    top: -17px;
    /* IE-users are prolly used to close-link in right-hand corner */
    *left: auto;
    *right: -17px;
    text-decoration: none;
    text-indent: -100000px;
    outline: 0;
    z-index: 11;
    }
    div.jquery-image-zoom a:hover {
    background-position: left -25px;
    }
    div.jquery-image-zoom img,
    div.jquery-image-zoom embed,
    div.jquery-image-zoom object,
    div.jquery-image-zoom div {
    width: 100%;
    height: 100%;
    margin: 0;
    }
  6. Masih belum selesai setelah itu cari kode berikut </head>. Setelah ketemu masukkan kode berikut diatasnya.
    7. <script  type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolisjquery.imageZoom.min.js"/>  <script type="text/javascript">  jQuery(document.body).imageZoom();  </script>
  7. Yang terakhir Save Template anda. Selesai dah....
Catatan :
Sekedar catatan, sebaiknya anda simpan kode HTML imagezoom pada file penyimpanan anda sendiri agar script ini bisa berjalan dengan baik. Berhubung kemarin ada teman yang nyoba ternyata nggak bisa jalan scriptnya. Download scriptnya di sini. Untuk mengetahui bagaimana cara menyimpan file di penyimpanan online (google code) silahkan baca di sini.

Setelah semua proses diatas sudah anda lakukan dengan benar, sekarang coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

Membuat Sliding Login/Register Form Panel di Blog

Posted: 16 Sep 2013 09:57 PM PDT


Selamat siang semuanya, pada siang hari yang mendung ini saya akan memberikan tutorial mengenai cara membuat Sliding Login/Register Form Panel di Blogspot dengan jQuery. Login dan register biasanya digunakan pada sebuah blog atau web yang sudah banyak memiliki anggota. Contoh dari form login/register ini dapat anda temui jika anda login di Blogger, Facebook, Twitter atau situs-situs yang menyediakan layanan jaringan community. Untuk contohnya bisa temen-temen lihat pada gambar di bawah, atau bisa langsung klik disini.


Nah, jika temen-temen tertarik untuk membuatnya, di bawah ini saya akan berikan penjelasannya :
  1. Pertama, anda mesti login ke blogger.
  2. Kemudian klik Rancangan 
  3. Setelah itu klik Edit Html
  4. Jangan lupa untuk mencentang Expand Widget Template (saya anjurkan download dahulu template anda)
  5. Kemudian cari kode berikut ini </head>
  6. Setelah itu letakkan kode Javascript dibawah ini tepat diatasnya
    <script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js'  type='text/javascript'/><script style='display:none'  type='text/javascript'>$(document).ready(function() {    // Expand Panel  $(&quot;#open&quot;).click(function(){  $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);  });    // Collapse Panel  $(&quot;#close&quot;).click(function(){  $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);  });    // Switch buttons from &quot;Log In | Register&quot; to  &quot;Close Panel&quot; on click  $(&quot;#toggle a&quot;).click(function () {  $(&quot;#toggle a&quot;).toggle();  });    });  </script>
  7. Setelah itu anda cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelumnya.
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

Setelah semuanya sudah anda masukkan, langkah berikutnya adalah cari kode </body>, kemudian letakkan kode di bawah ini tepat diatasnya :
<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome In Creating Website</h1>
<h2>Contoh Sliding Login Dengan JQuery</h2>
<p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
<h2>Tutorial Blog</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html' title='Download'>Pencet Sini</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Halo Semuanya</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Masuk | Daftar</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
</li>

<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->
Pada kode diatas, untuk tulisan warna kuning bisa anda ganti dengan tulisan yang anda inginkan, begitu juga tulisan yang berwarna merah bisa anda ganti dengan Login dan register misalnya. Kemudian klik Save Template anda dan lihat hasilnya.

Oke, itu tadi pembahasan pada kali ini, bagi yang masih bingung jangan malu-malu untuk mengisi kotak komentar yang ada di bawah ini. Selamat mencoba dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.
di Rabu, September 18, 2013

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)