Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts

ImageLens Zoom jQuery Hover Image

08:39 Add Comment
Ada begitu banyak trik untuk membuat blog menjadi kian menarik dan membuat para pengunjung bertanya-tanya "kok bisa ??" . Iya saya tau pembukaan ini terlalu lebay , tapi memang harus agak sedikit lebay biar dramatis .

View demoDownload source
Yap , di tutorial blogging kali ini saya akan membahas sedikit , lebih tepatnya memberikan informasi dan arahan dan bukan pembahasan atau pembedahan karena saya bukan ahlinya dibidang ini , jadi saya hanya akan mengatakan apa yang saya tau saja .

Yang akan saya bagikan dalam post ini adalah sebuah cara untuk menciptakan efek Hover Zoom pada image post . Untuk contohnya anda bisa melihat gambar dibawah ini dan silahkan arahkan mouse anda ke gambar tersebut .

Ya , kebetulan saya juga barusaja menggunakan system ini untuk sekedar uji coba .


Disini kita akan memanfaatkan sebuah Plugin ImageLens yang berfungsi menciptakan efek kaca pembesar pada gambar saat di sorot mouse ( hover ) .

Cara memasangnya cukup sederhana , silahkan ikuti petunjuknya dibawah ini .

Instalasi Plugin
1. Silahkan anda masuk ke dasbor blogger > Template > Edit Html .
2. Letakkan script dibawah ini diantara kode <head> dan </head> pada template anda .

<script src="jquery.imageLens.js" type="text/javascript"></script>
3. Pastikan template anda sudah menggunakan framework jQuery.

Eksekusi
Disini saya menerapkan pada image posting , untuk itu yang perlu kita eksekusi adalah bagian

.post-body img
dengan meletakkan script dibawah ini diatas kode </body>

<script type='text/javascript'>
$(".post-body img").imageLens();
</script>
Dengan begitu secara otomatis image posting akan ditambahkan class='imagelens' untuk menciptakan efek zoom .

Catatan : Setiap template memiliki kode yang berbeda pada setiap gambar posting , silahkan disesuaikan dengan kode pada template anda masing-masing. Untuk memberi sentuhan style pada efek zoom kita juga bisa menambahkan beberapa value seperti misal kita akan mengubah ukuran efek lensa pada saat zoom dengan memberikan nilai { lensSize: 200 } sehingga menjadi seperti dibawah ini

<script type='text/javascript'>
$(".post-body img").imageLens({ lensSize: 200 });  </script>
Atau bisajuga memberikan sentuhan border danjuga warna pada border tersebut dengan memberikan nilai { borderSize: 8, borderColor: "#06f" }  .

Anda bisa melihat berbagai macam style yang dihasilkan dengan mengunjungi halaman demo melalui tombol dibawah ini .

View demoDownload source
+

Membuat Pesan Khusus Pada Komentar

03:46 5 Comments
Kali ini kita akan memberikan sentuhan hangat pada para komentator di blog dengan memberikan pesan singkat berupa Ucapan terimakasih atau sejenisnya seketika saat komentator tersebut memberikan komentar .
Ini sangat simpel sekali dan kesan yang diberikan juga tidak terlalu penting namun hangat .
Tentu saja , Interaksi yang hidup dari pemilik blog kepada para pengunjung tentu akan menjadi nilai plus dimata netter . Dan untuk meciptakan kesan seperti itu salah satunya adalah dengan menambahkan pesan khusus pada komentator .

Oke daripada bingung dengan kalimat saya , lebih baik kita pelajari sekarang juga .

Untuk membuat apa yang saya bicarakan ini sebelumnya anda harus mengaktifkan Threaded Comment dulu di blog anda dengan mgnikuti petunjuk dibawah ini .

Aktifasi Threaded Comment


1. Masuk ke menu template di dasbor anda buka edit HTML . Kemudian cari kode dibawah ini

<b:include data='post' name='threaded_comments'/>
2. Kemudian ganti semua kode diatas pada template anda dengan kode dibawah ini

<b:include data='post' name='comments'/>
3. Cari kode ]]></b:skin> dan letakkan kode Css dibawah ini tepat diatasnya

#comments {}
#comments h3 {margin-bottom:15px;font-size:18px;}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
background:#fcfcfc;
padding:4px;
border-radius: 2px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QV7sCubLeh1Cblgg3ezHRrBkhNX2AYe4Xhyphenhyphen0kd8ZAJXgX2OFiPkOO3pwcqPuFieCtShXSMnePsnfRjwFoXSv3Ug10kf4-S80Tcysl0cUhtM788KMIT5IVa_wJx3Zd4Lfa8Ihag5XBl0G/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-weight: bold;
padding: 5px 0 0 0;
font-size: 13px;
text-decoration: none;
}
.comment_admin .comment_name  {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background:#eee;
}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#eee;
padding:10px;
font-size:13px;
font-weight:bold;
position:relative;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
margin-top:-3px;
}
.comment_date a{
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
}
.comment_date a:hover{
color: #a9a9a9;
text-decoration:none;
}
.comment_body{
margin-left:66px;
margin-top: -72px;
background:#fcfcfc;
border:1px solid #d1d1d1;
padding:10px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #666;
border:1px solid #eee;
font-size: 13px;
word-wrap:break-word;
background:#fff;
padding:10px;
}
.comment_inner {
padding-bottom: 5px;
margin: 5px 0 5px 0;
}
.comment_child .comment_wrap {padding-left: 7%;}
.comment_reply {
display: inline-block;
margin-top:8px;
margin-left:-5px;
padding: 1px 12px;
color: #fff !important;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: #bababa;
font: 11px/18px sans-serif;
transition: background-color 1s ease-out 0s;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #056b95;
}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:103%!important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%}}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment-form p {
background: #666;
padding: 10px;
margin: 5px 0 5px 0;
color: #eee;
font-size: 13px;
line-height: 20px;
width:97%;
border-radius:3px;
position:relative;
}
.comment-form p:after{
content:"";
width:0;
height:0;
position:absolute;
bottom:-16px;
left:15px;
border:8px solid transparent;
border-color:#666 transparent transparent;
}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list{
display:none;
}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAHromkI9csMazlJedUUCXNAVSvvDPf-z4temjoRRHsVZoFhyphenhyphenMTEtpTbLuP9b60BbIkTxRtS0eenDUQQLQdHuBX_xU-D764r1jO9PFy2BmWR5YtGecf51R0ynu8thqek8PjIhgwCp3tg/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QV7sCubLeh1Cblgg3ezHRrBkhNX2AYe4Xhyphenhyphen0kd8ZAJXgX2OFiPkOO3pwcqPuFieCtShXSMnePsnfRjwFoXSv3Ug10kf4-S80Tcysl0cUhtM788KMIT5IVa_wJx3Zd4Lfa8Ihag5XBl0G/s1600/anon.jpg) no-repeat}
.comment-delete img{float:right;margin-left:15px;margin-top:3px;margin-right:10px}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuUZrMgnGgS05kkbl8-Bb9qlxxInEOUSD4W3t1-4mR8ZLEAVJQG9R_DruxzyzTPOt8nXus_FCt2Lit3Um1SeoxmV3I1y4gKDI6MBsmIqVWPzeOf80Wj4cl0YyMroE-q2GusS4One1ERs8/s1600/author.png)no-repeat;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;}
iframe{border:none;overflow:hidden} 
4. Kemudian ganti semua kode dibawah ini

<b:includable id='comments' var='post'>...</b:includable>
dengan kode baru dibawah ini :

 <b:includable id='comments' var='post'>
<div class='comments' id='comments'>
 <b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </b:if>
              
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
   </span>
  </b:if>
                      
  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
                                                                            
   <div class='data:comment.adminClass' expr:id='data:comment.anchorName'>                                                                                    
      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if>
   
    <div class='comment_header'>
     <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>
     </div>
                        
     <div class='clear'/>
    </div>
        
    <div class='comment_body'>
                                      <span class='comment_arrow'/>
     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>
       <b:if cond='data:comment.author == data:post.author'>
         <span class='comment_author_flag'>Admin</span>
       </b:if>  
                  <span class='comment_service'>
      <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicYG7rcVKuOI4vRqL7h3YBdewPRX91gesePbEZQPOlwvNjtC6xgN-_bW_ZfanPo85loLCMKNWl7Z_izV3Iuj8lEB9HZnfncQjjlgfZMkAawEjiKbFdJpV61kwPg87IHK6Tvuc0It_Jm2I/s1600/delete4.png' title='Hapus Komentar'/>
</a>               
      <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                  <data:comment.timestamp/>
        </a></span>
  </span></div>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
                        <div class='clear'/>
                     
     </b:if>
                                                     
    </div>                        
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
          
    <div class='comment_child'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>             
    </div>
   </b:loop>             
   </div>   
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
     <span class='paging-control-container'>
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form'>        
        
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>  
      <div class='comment_emo_list'/>
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>               
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
    
       <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
       <script type='text/javascript'>
     
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
                                Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
     
        //Pengaturan Emoticon
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9OBSHBD9_YCeK0nqCoOzhSiDbB3Rw0flRwyXA0S_4aBMXqm8e7_4CQgUVwKO4PUZ4A5XwgZdy0UyYQZ_m0IZ_XgsnLHAJTHfJbO2Buit4nXx8FVBh5aJuWR4ExJ5ZA3jcfTxxMzALack/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhvroB9CjmxbGaSIZNzUh0lQAmPK72D0ojn6iDOOqinOKD0qWy2hWL1EDe82LYApaQR7C-qci9rM-ghTMF1Z6hMIzEQjBSc9qAk2K4kKOzb3AryeljTJRL12TNLvVuzlGd22DK3_EUdo/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJmYTBxxo4nb6nPipPHx7w3rg4WbKJyRtrOBONRUCJyAH0VCS-LAu6a_3WbhXrkmvjNcOWdAvqQgeT2RKxWUeiHqwFcbbJ9EeRGiOcZXvlEyDF4c7w4fG5NLPqg0sPfpPL8iIv3v3VNTs/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxjIR9aeRkOzXdOk_rDZRGavlzZ3fkLWbMSCjyjff49eMhEuczUYlVMLuHx3cRzrk9JiGs3ZsFAAzQ9x9AK8OZVClplnKzQejjuP96krmJrlpGyrSRXCrmXO3L0tV0EoNWnnjLq2lomc/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITKOqF0zD1ytFMpYwRz0jpVm8ehyphenhyphena3uBkmduD8rYTrF_V0cfKpPPny4OxkYLqKob5Plit_1gDhQKRocWc9fL66msFgDhR0FM8epQcJEhM7jlVMZayC9PwNFl4hSy1jXNLd6gzlMkBeL4/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio9fZUu__YOXyDyeBfQxm9rYH2jl-bAMr12AZ4mgQA65-3kSlHybMK0MN1ihNF47onJggzXrPp-L3KImjqI5fzOrOBtyjbH6sns7dfuwlDPRwQ_SJW5wuRcVABMVL5HINd9sNOYOYjgPw/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioYwwee5yQ2U2H65UNIZugsp2ya4qHbDsoebFtQSiRxcfoPyjceM7wMn4SBEtoB4N7aQ34IbGbLVMuzkG1Es0jGQR3HaopultFlrSmlr10e3DK7g-bA4P0ibAjxr_PGpo0MhBdIb9JpWc/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6cHnL8Uu_30dKi4Uv87tD-cUmgJqz24K9x3T18tM9uPdca50DZNY4LLAiVLG6178GdIW7OehglzCeFVKr2mUkA8Q_fa8cMcI-AgRHBqO9cU4wioRFoRnRks3TJhnyV5f9_Fg-aeNqu0/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6INAKfw4qASKMzKe-9vasUL1KqLiVJEanwaG4A2HDL0PgwQL8MED7Mb0c_BPMrZ_AWnaV0pA46EimmEXJRpVCA9vaARAj3NVcJWKdQwOI9zQeIkbCilm7feXZ96bVUL8KV-_XcAP2elQ/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3kcrzeUXAygVhzaCWuIHHUiyt2gZtdwphmfpMcAiAsdb_x-IEOPlBlYisRXXLiZg20i0dkJLy2OXtqPgQw0558EUO4RnpbPjjB3l5Tesr28G9YOx6mfrWHl2Y4DtyeT8SrdmgLWs6oM/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiqcZictBWI02e-UVmksdXk1A8Monrw12og2qOGIOULfFn0mWE1MuIz_O0r1Uu6TDB5NztHmlUehLLu8xMpMmY1kNmmz1_simYHjQHa2tD5RIAgC1BwXgtzr1BJZKpGE0afDCvX4apVA/s1600/thumbsup.gif',
        ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7je1d6OAemijNo167rP593o6gILsBrdocuQMnRHP-MlRJe-zLiLWAI00G449EXynzEB5bVx3d864W-Pj5sqmCTzMwgOucBPmcCsSP8jGSiS14-S1kIej8NdS6sLACK-6Y5CLbip6pdAs/s1600/wee.gif',    
        ];
     
                            
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
   
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
    //]]>
</script>
</b:includable>
5. Simpan template anda .

Aktifasi Pesan Khusus
6. Kita masih di area Edit HTML , kemudian tambahkan Css dibawah ini tepat diatas ]]></b:skin>
div:target .comment_body::after {
content: "THANKS FOR COMMENT";
background: #2b2b2b;
box-shadow: 0 1px 1px rgba(201,201,201,0.1) inset,0 1px 0 rgba(32,32,32,0.35);
padding: 2px 10px;
width: auto;
height: auto;
border-radius: 3px;
float: right;
margin-top: -25px;
transition: opacity .2s ease-in-out;
color: #747474;
z-index: 999;
}
Siilahkan ubah kata yang bercetak kapital dengan kata-kata milik anda sendiri .
Dan jangan lupa sesuaikan juga warna Background dan lainnya agar serasi dengan komentar dan blog anda . Anda juga bisa memberikan background berupa image dengan meletakkan url image di bagian backround dengan cara penulisan seperti ini :
background: #2b2b2b url(URL_IMG) no-repeat;


7. Setelah itu klik simpan dan cobalah berkomentar sendiri untuk melihat hasilnya .

Hasil akhir dari tutorial ini adalah seperti pada gambar yang saya tandai dibawah ini .


Untuk mencobanya , silahkan berkomentar .

Info : Pesan khusus ini hanya akan muncul saat ada aktifitas komentar .

Simple memang , Dan silahkan digunakan jika menginginkannya . Dan jika artkel ini bermanfaat , silahkan bagikan pada teman-teman anda . terimakasih .
+

Membuat Animasi Web Banner Pure Css3

16:11 4 Comments

View demoDownload source

Oke , pada posting awal bulan ini saya mau menyuguhkan sesuatu yang menarik dari Css . Memang sih ini bukan hal baru ataupun sesuatu yang wow , hanya saja sepertinya ini layak untuk anda pelajari dan mungkin diterapkan untuk memancing minat visitor pada website anda .

Hal yang akan saya bagikan sekarang ini adalah Cara Membuat Web Banner Animasi .
Tapi sebelumnya bahwa browser yang paling mendukung untuk Css animation adalah Webkit dan Firefox , dan untuk apra pengguna Internet Explorer v7 kebawah sepertinya anda harus sesegera mungkin meng-upgrade peramban anda untuk bisa menikmati Css versi baru .

Untuk membuat Css Animasi dan mempelajarinya lebih lanjut mungkin ada perlunya anda membaca ini terlebih dulu . Dan buat yang sudah akrab dengan Css Animasi , maka langsung saja kita masuk ke inti pembahasan pada topik kali ini .

Langkah pertama yang akan kita lakukan adalah membuat Struktur HTML dimana kita akan memberikan sentuhan dan menjalankan fungsi Animasi ( target eksekusi ) .
Disini saya tidak akan menjelaskan panjang lebar , dan struktur HTML yang kita perlukan adalah seperti ini

<div id="ad-1">
    <div id="content">
        <h2>Lost at sea?</h2>
        <h3>Relax - we've got your rudder.</h3>
        <form>
            <input type="text" id="email" value="Email address..." />
            <input type="submit" id="submit" value="Guide me" />
        </form>
    </div>
    <div id="clouds">
        <ul id="cloud-group-1">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
        </ul>
        <ul id="cloud-group-2">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
        </ul>
    </div>
    <ul id="boat">
        <li>
            <div id="question-mark"></div>
        </li>
    </ul>
    <ul id="water">
        <li id="water-back"></li>
        <li id="water-front"></li>
    </ul>
</div>
Kemudian siapkan Css nya .

/*Animate */

@keyframe our-fade-in-animation {
    0%   {opacity:0;}
    100% {opacity:1;}
}

div {
    opacity: 1; /* This div is visible by default */
    animation: our-fade-in-animation 1s 1;
}
Pada dasarnya , untuk membuat animasi dengan css adalah dengan menggunakan Css @keyframe seperti diatas . Mungkin sebaiknya kita belajar lebih jauh mengenai hal ini ,mungkin dengan mengunjungi tautan diatas atau anda bisa mencarinya sendiri penjelasan detail dan mendasar serta mendalam tentang Css animasi ini .
Tapi lupakan itu sejenak dan kita lanjutkan pekerjaan kita . Untuk sementara ikuti ini dulu dengan baik jika anda sudah terlanjur membaca ini .

Kemudian kita buat styling untuk masing masing bagiannya ...

#ad-1 {
    width: 720px;
    height: 300px;
    float: left;
    margin: 40px auto 0;
    background-image: url(../images/ad-1/background.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 0px 6px #000;
}
Css diatas adalah Css dasar dari konten yang tengah kita buat yaitu Iklan atau banner .

Selanjutnya kita berikan styling pada Text dan Form Email dengan Css dibawah ini

#ad-1 #content {
    width: 325px;
    float: right;
    margin: 40px;
    text-align: center;
    z-index: 4;
    position: relative;
    overflow: visible;
}
#ad-1 h2 {
    font-family: 'Alfa Slab One', cursive;
    color: #137dd5;
    font-size: 50px;
    line-height: 50px;
    text-shadow: 0px 0px 4px #fff;
    animation: delayed-fade-animation 7s 1 ease-in-out; /* This will fade in our h2 with a simulated delay */
}
#ad-1 h3 {
    font-family: 'Boogaloo', cursive;
    color: #202224;
    font-size: 31px;
    line-height: 31px;
    text-shadow: 0px 0px 4px #fff;
    animation: delayed-fade-animation 10s 1 ease-in-out; /* This will fade in our h3 with a simulated delay */
}
#ad-1 form {
    margin: 30px 0 0 6px;
    position: relative;
    animation: form-animation 12s 1 ease-in-out;  /* This will slide in our email address form with a cool elastic effect. This also has a simulated delay */
}
#ad-1 #email {
    width: 158px;
    height: 48px;
    float: left;
    padding: 0 20px;
    font-size: 16px;
    font-family: 'Lucida Grande', sans-serif;
    color: #fff;
    text-shadow: 1px 1px 0px #a2917d;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border:1px solid #a2917d;
    outline: none;
    box-shadow: -1px -1px 1px #fff;
    background-color: #c7b29b;
    background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
}
#ad-1 #email:focus {
    background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
   
}
#ad-1 #submit {
    height: 50px;
    float: left;
    cursor: pointer;
    padding: 0 20px;
    font-size: 20px;
    font-family: 'Boogaloo', cursive;
    color: #137dd5;
    text-shadow: 1px 1px 0px #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border:1px solid #bcc0c4;
    border-left: none;
    background-color: #fff;
    background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
}
#ad-1 #submit:hover {
    background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
}
Dan sekarang kita mulai mengatur Style pada air (watter)  pada banner kita kali ini

#ad-1 ul#water{
    /* If we wanted to add another animation to the water (move it horizontally for instance), we could do that here */
}
#ad-1 li#water-back {
    width: 1200px;
    height: 84px;
    background-image: url(../images/ad-1/water-back.png);
    background-repeat: repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 10px;
    left: -20px;
    animation: water-back-animation 3s infinite ease-in-out; /* Bobbing water effect */
}
#ad-1 li#water-front {
    width: 1200px;
    height: 158px;
    background-image: url(../images/ad-1/water-front.png);
    background-repeat: repeat-x;
    z-index: 3;
    position: absolute;
    bottom: -70px;
    left:-30px;
    animation: water-front-animation 2s infinite ease-in-out; /* Another bobbing water effect - yet slightly different. We'll make this animation move a little bit faster in order to create some perspective. */
}
Dan kali ini kita masuk ke bagian Boat dan bagian-bagian lainnya pada banner

#ad-1 ul#boat {
    width: 249px;
    height: 215px;
    z-index: 2;
    position: absolute;
    bottom: 25px;
    left: 20px;
    overflow: visible;
    animation: boat-in-animation 3s 1 ease-out; /* Slides the group in when ad starts */
}
#ad-1 ul#boat li {
    width: 249px;
    height: 215px;
    background-image: url(../images/ad-1/boat.png);
    position: absolute;
    bottom: 0px;
    left: 0px;
    overflow: visible;
    animation: boat-animation 2s infinite ease-in-out; /* Simulate the boat bobbing on the water - similar to the animation already used on the water itself. */
}
#ad-1 #question-mark {
    width: 24px;
    height: 50px;
    background-image: url(../images/ad-1/question-mark.png);
    position: absolute;
    right: 34px;
    top: -30px;
    animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */
}
Bagian Awan

#ad-1 #clouds {
    position: absolute;
    top: 0px;
    z-index: 0;
    animation: cloud-animation 30s infinite linear; /* Scrolls the clouds off to the left, resets, and repeats */
}
#ad-1 #cloud-group-1 {
    width:720px;
    position: absolute;
    left:0px;
}
#ad-1 #cloud-group-2 {
    width: 720px;
    position: absolute;
    left: 720px;
}
#ad-1 .cloud-1 {
    width: 172px;
    height: 121px;
    background-image: url(../images/ad-1/cloud-1.png);
    position: absolute;
    top: 10px;
    left: 40px;
}
#ad-1 .cloud-2 {
    width: 121px;
    height: 75px;
    background-image: url(../images/ad-1/cloud-2.png);
    position: absolute;
    top: -25px;
    left: 300px;
}
#ad-1 .cloud-3 {
    width: 132px;
    height: 105px;
    background-image: url(../images/ad-1/cloud-3.png);
    position: absolute;
    top: -5px;
    left: 530px;
}
Yap .... Itu dia styling untuk bagian konten bannernya . Cukup panjang ternyata .
Dan sekarang tugas kita adalah tinggal mengeksekusi dengan Css animation .

/* An animation with a simulated delay used to fade in multiple elements. We've achieved a simulated delay by starting the fade in process 80% of the way through the animation (instead of starting the process immediately). We can use this technique and increase the animation duration on any element to reach the desired delay duration: */

@keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

/* An animation that will slide in our email address form. We've spiced this animation up by overshooting the desired position and sliding it back - this creates a nice elastic effect. As you can see, this animation also uses a simulated delay: */

@keyframes form-animation {
    0%   {opacity: 0; right: -400px;}
    90%  {opacity: 0; right: -400px;}
    95%  {opacity: 0.5; right: 20px;}
    100% {opacity: 1; right: 0px;}
}

/* This is as basic as an animation gets. Only two keyframes and no simulated delay. This animation slides the boat in from the left when the ad begins: */

@keyframes boat-in-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

/* Here's our really cool cloud animation. The first group of clouds will start off aligned in the center with the second group off to the right of the screen. While the left group of clouds is sliding off the screen to the left, the right group will begin to appear on the right side of the screen. As soon as the left group is completely off the screen, the clouds will reset (very quickly) to their original positions and repeat: */

@keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -720px;}
    100%     {left: 0px;}
}

/* These last 3 animations are all basically the same - the only difference being the position of each element. They will emulate the bobbing effect of an ocean: */

@keyframes boat-animation {
    0%   {bottom: 0px; left: 0px;}
    25%  {bottom: -2px; left: -2px;}
    70%  {bottom: 2px; left: -4px;}
    100% {bottom: -1px; left: 0px;}
}
@keyframes water-back-animation {
    0%   {bottom: 10px; left: -20px;}
    25%  {bottom: 8px; left: -22px;}
    70%  {bottom: 12px; left: -24px;}
    100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
    0%   {bottom: -70px; left: -30px;}
    25%  {bottom: -68px; left: -32px;}
    70%  {bottom: -72px; left: -34px;}
    100% {bottom: -69px; left: -30px;}
}
Yaap , sekarang banner kita sudah bisa berfungsi dengan baik . itu seharusnya ...

Dan mungnkin itu saja dulu karena sudah saya katakan diatas bahwa saya tidak akan menjelaskan panjang lebar mengenai kasus ini karena saya bukan ahlinya .

Untuk lebih lengkap tentang tutorial ini anda bisa mengikuti tautan ini .


View demoDownload source

+

Menghubungkan Form Dengan Email

10:14 4 Comments
Menghubungkan Form Dengan Email - Artikel ini adalah kelanjutan dari Artikel sebelumnya mengenai Cara membuat Form pada Blog yang bisa anda pelajari caranya disini .

Di artikel sebelumnya ada penjelasan bagaimana membuat Radio Button dan CheckBox yang berguna untuk melengkapi formulir anda nantinya .

Jika sudah , oke mari kita lanjutkan .
Sekarang kita akan membahas bagaimana cara menghubungkan data yang terinput pada form ke Email .
Tentu hal ini akan sangat berguna sekali jika anda ingin membuka sebuah formulir pendaftaran ataupun pemesanan pada blog anda , untuk itu mari kita langsung perhatikan contoh dibawah ini .

<form action="mailto:emailanda@gmail.com" enctype="text/plain" method="post">
<input name="username" type="text" /> : name <br />
<input name="email" type="text" /> : email <br />
comments <br />
<textarea name="comments" rows="10" wrap="hard"></textarea>
<input name="redirect" type="hidden" value="index.html" />
<input name="NEXT_URL" type="hidden" value="index.html" /><br />
<input type="submit" value="Send" />
<input type="reset" value="Clear" />
</form>
Tampilan dari contoh Code diatas nantinya akan seperti ini .
: name

: email

comments



Untuk tulisan berwarna Merah silahkan ganti dengan email tujuan .

Untuk tampilan form sendiri anda dapat memodifikasi dengan gaya anda sendiri .

Mungkin begitu saja cara Menghubungkan Form Dengan Email yang dapat saya bagikan kali ini . Untuk memodifikasi tampilan form mungkin akan saya lanjutkan di posting berikutnya .

Sekian dari saya dan semoga bermanfaat .
+