Kamis, 30 Januari 2014

Cara membuat pesan komentar Blog

Form komentar dalam sebuah halaman sangat kita perlukan dimana para pengunjung dapat berkonsultasi terhadap sebuah artikel yang telah kita posting di halaman blog kita. Aktivnya suatu share melalui form komentar akan semakin bagus buat blog kita untuk meningkatkan PR ( Pageranking ) halaman situs kita dimata mesin pencari, seperti google. Sebagai pengguna jasa online hal ini harus menjadi pertimbangan yang utama diantara pertimbangan yangpaling utama lainnya. 
Oleh karena pentingnya hal ini, dalam berkomentar, pengunjung blog kita akan mengetahui tata cara berkomentar pada blog kita sehingga kita memerlukan suatu pesan singkat yang dituliskan dalam sebuah halaman blog yang menjadi acuan peraturan dari suatu komentar yang akan diberikan oleh para pengunjung. Yang biasa saya sebut dengan Pesan Komentar.

Fungsi Pesan Komentar:

  • Untuk memberikan suatu pesan aturan dari tata cara menyampaikan sebuah komentar untuk sebuah artikel yang telah kita posting pada halaman blog kita. 
  • Sebagai fungsi suatu pesan aturan, kita akan menuliskan suatu pesan yang memang benar benar ringkas jelas dan tidak bertele tele.
  • Sebuah pesan yang disampaikan buat para pengunjung yang akan menjadi sebuah aturan dalam berkomentar harus dituliskan dengan serba sopan santun agar para pengunjung kita tidak merasa tersinggung, sebab suatu kunjungan sangat berharga buat suatu halaman blog kita. 

Dalam postingan saya kali ini, sebuah pesan dalam halaman blog akan kita buat, dan akan saya uraikan melalui tag tag html agar dapat kita sisipkan dalam tubuh tag HTML blog kita.
Saya beharap sahabat sahabat bloger saya sudah memahami kegunaan dari Pesan Komentar yang akan kita buat pada halaman blog kita.


Fitur

  1. Gambar leave a comment
  2. Text pesan Komentar
  3. Tombol Join to Blog
  4. Gif images

Install Program CSS

  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin>
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
.Pesan_Komentar{
background:#FFF;
width:590px;
padding-top:2px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(204, 204, 204);
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
border-color: #666666;
height: 200px;
}

Install Program Tag HTML

  1. Login ke dashboard anda
  2. Masuk ke "Template"
  3. lalu klik "Edit HTML"
  4. Cari code <div class='comment-form'> ( tekan Ctrl+F untuk mempercepat )
  5. Copas code HTML dibawah ini, paste di atas code <div class='comment-form'>
<h4 id='comment-post-message'>
<img alt="leave comment" height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDOw3ur6byblcEutY-Ww9youDQL6u0TVtM8UCY0FRSQJ3rB3umM0Xi9YnGkOdogUNeN6d7ctlKDQHsxFOLVWV2Vy9Z0s-9i5K8Blc6kREDBofORp1yyxyFz_0kVd6yVPaOvoZlgkRpcQ/s1600/leave-a-comment.jpg' width='300' style="margin-bottom:-20px;" />
</h4>
<div class='Pesan_Komentar'>
<p>
<span id='result_box' lang='id'>
<b>Semua umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin. </b>
<br/><br/>
1. Komentar SPAM akan dihapus segera setelah saya review
<br/>
2. Pastikan untuk klik &quot;Berlangganan Lewat Email&quot; untuk membangun kreatifitas blog ini
<br/>
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana.
<br/>
4. Jangan Tambah Link ke tubuh komentar Anda karena saya memakai system
<b> link exchange </b>
</span><span lang='id'><br/>
</span>5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
<br/></p>
<div style='margin-top:1px; margin-left: 0px; font-style:italic'>
<p align="right"> Bila anda senang dengan artikel ini silahkan <a href='http://www.blogger.com/follow-blog.g?blogID=IDE BLOG ANDA' target='_blank' rel="nofollow" title="Join to Blog">Join To Blog </a> atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar atau share sesuai dengan artikel diatas. </p>
</div>
<div style='margin-top:-15px;'>
<img alt='Me' align='left' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjveusrvkdcDuoWQs5oXqu6BG-6BOBlWSmNQaKiu0pvQ7vnoqFNeTesnqEaUJ15T3_BAR1Ix0AGyO1bKGSDSrf-fBpXvlR3eXnaZTlTPnBNOKELVW_DVrHxBHdVA4EtQe8G63nQqZgDLbM/s1600/masalah.gif' style='padding: 10px 10px 0px 0px;margin: -40px 10px 0px 0px;' width='80'/></div>
</div>

Keterangan Code:
  • Tilisan ID BLOG ANDA ganti URL sesuai dengan ID blog anda
  • Ukuran lebar adalah 590px (edit CSS untuk merubah ukurannya)
  • Sesuaikan semua tulisannya sesuai dengan peraturan blog anda.
  • Rabu, 29 Januari 2014

    Membuat image slider keren dengan Thumbnails

    Alhamdulillah akhirnya bisa kembali lagi menyapa anda dengan tutorial baru membuat image slider keren dengan thumbnails. Image slider ini tentu sangat bagus sebagai sarana promosi artikel terbaik anda dengan bantuan gambar yang membuatnya tampil aktraktif, elegant dengan efek yang halus bertenaga CSS3 dan JavaScript, namun tetap dengan fast loading sehingga anda tidak perlu khawatir akan mempengaruhi kecepatan loading blog anda.
    untuk membuktikannya anda bisa mengecek live demo pada Halaman Blog DEMO saya




    Nah jika anda tertarik untuk menambahkan image slider keren dengan thumbnails pada blog anda, setelah melihat live demonya atau sekedar ingin tahu cara membuatnya, silahkan ikuti langkah-langkah berikut:

    Simak langkah2 dibawah ini:

    1. Login ke akun blogger sobat
    2. Klik Template » Edit HTML
    3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
    4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
    .slider{   
    width: 640px; /*Same as width of the large image*/
    position: relative;
    /*Instead of height we will use padding*/
    padding-top: 320px; /*That helps bring the labels down*/
    margin: 100px auto;
    /*Lets add a shadow*/
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
    }
    /*Last thing remaining is to add transitions*/
    .slider>img{
    position: absolute;
    left: 0; top: 0;
    transition: all 0.5s;
    }
    .slider input[name='slide_switch'] {
    display: none;
    }
    .slider label {
    /*Lets add some spacing for the thumbnails*/
    margin: 18px 0 0 18px;
    border: 3px solid #999;
    float: left;
    cursor: pointer;
    transition: all 0.5s;
    /*Default style = low opacity*/
    opacity: 0.6;
    }
    .slider label img{
    &display: block;
    }
    /*Time to add the click effects*/
    .slider input[name='slide_switch']:checked+label {
    border-color: #666;
    opacity: 1;
    }
    /*Clicking any thumbnail now should change its opacity(style)*/
    /*Time to work on the main images*/
    .slider input[name='slide_switch'] ~ img {
    opacity: 0;
    transform: scale(1.1);
    }
    /*That hides all main images at a 110% size
    On click the images will be displayed at normal size to complete the effect
    */
    .slider input[name='slide_switch']:checked+label+img {
    opacity: 1;
    transform: scale(1);
    }
    /*Clicking on any thumbnail now should activate the image related to it*/

    Perhatikan tulisan berwarna biru adalah lebar dan tinggi gambar

      Penerapannya:

      Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.
      <div class="slider">  
      <input type="radio" name="slide_switch" id="id1"/>
      <label for="id1">
      <img src="URL gambar" width="100"/>
      </label>
      <img src="URL gambar"/>
          <!--Lets show the second image by default on page load-->
      <input type="radio" name="slide_switch" id="id2" checked="checked"/>
      <label for="id2">
      <img src="URL gambar" width="100"/>
      </label>
      <img src="URL gambar"/>
      <input type="radio" name="slide_switch" id="id3"/>
      <label for="id3">
      <img src="URL gambar" width="100"/>
      </label>
      <img src="URL gambar"/>
      <input type="radio" name="slide_switch" id="id4"/>
      <label for="id4">
      <img src="URL gambar" width="100"/>
      </label>
      <img src="URL gambar"/>
      <input type="radio" name="slide_switch" id="id5"/>
      <label for="id5">
      <img src="URL gambar" width="100"/>
      </label>
      <img src="URL gambar"/>
      </div>

      Kustomisasi

      Ganti URL gambar dengan link gambar anda.
      •  Tambahkan script berikut diatas kode </head>
      <script src="https://sites.google.com/site/vanzdy/script/image_slider-thumbnails.js" type="text/javascript"></script>
      • Simpan template.
      Sebelum menyimpan anda bisa klik pratinjau dulu jika sudah sesuai dengan yang anda inginkan, silahkan Simpan dan lihat hasilnya diblog anda.

      Demikian tutorial membuat image slider keren dengan thumbnails semoga bermanfaat.
      Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dan terimakasih atas kunjungan anda.

      Jumat, 24 Januari 2014

      Cara membuat background slide show

       
      Background Slide Show adalah gambar latar belakang yang bisa berganti-ganti secara otomatis setiap waktu yang telah ditentukan. Background ini disematkan di bagian body dengan posisi 100%.


      Background Slide Show ini pertama-tama harus di load dengan JQuery yang biasanya dipasang di atas </head>
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>
      <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'></script>

      Setelah itu dibagian CSS body, minimal harus ada seperti ini:
      body {
         background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKzt0Mpb3b04tVt_t4B-tXRTmuML73XYOgg73PzWhTr2SKtz4xTGp7YfXOnFDXlncakOiVUhRmNXTk567ZIxlWzjv1I1pUekcZtI7JSqxhMXElmUfVYruKxY0SY1IfwOgvnirA6M-7w/s1600/free-wallpaper-2.jpg) repeat-x fixed top center;
         -moz-background-size:100%;
         -webkit-background-size:100%;
         -o-background-size:100%;
         background-size:100%;
      }

      Jika sudah terpasang juga, kita harus menambah JavaScript Backround Slide Show di bawah ini:
      <script type='text/javascript'>
      var ssBG={
      gbr:[
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczCbZeJpMYup1UH0L5sXF7MP9w9dsqrnTQlqELtJyPFpWdW6PIU6Io8Cmry3LuRWMqJ6AMDLksJX5Vwc3sIDZVHvAKeyHz1str3L8mEyeToutBk29NvCsPrHHLPYvJVl3nMNrD8w5iw/s1600/3d-desktop-background-hd-of-art-and-design.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4vfgmMiGTnQtnE3dRWiXawJj4OPTcR5VGcyMIhDdyJmuu_j1Bdl81K3yQMk2L_NsvxTQkBbEAl0sHDeQYcahRXwc8GCie54rhLtEvRn_FrEV0eLsJASl13iqlwc0OSQ4zPImePtwHuw/s1600/3D-Background-Ball-Free-Download.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVocsz4o6h47dgJ5sVme9fQ7PT3Uls2t0YscPdAnZMZxwjtRbFuRwE-_hhxa9BjkiDFWGErrk1EuDP3Zh05jwDdyycbdBAlNVkQOhtBd25qPSO5AN7DL-4FefQuCE_smRXbQAo1pxW9A/s1600/Snow_leopards.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRE1xrBsc5oOxXEcCnNsY3DJFFHKI7IND5QBzB6yuGTJBR-Q07vcgck1MHLXFJoyIkIg9Hv4p91uUvUCde__d3I9rK-OIQt_Kh2e955JSIeTYk0EOJgL2_hhaRM9sM39ns6GudKc5bdg/s1600/3d-hd-wallpaper-ja-amazing-wallpaper+%281%29.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5hEGwbwT4CA_Xt4zLhQsnAtu25l9JR5Dl9VsYxNKoArZaFTKnuLNWAOmmipedMwxeJO-ZI1uk_lutIRLMPibmBT7fZ6U4dMdNqKEgmKJ-_L6ZnFjaXXCE1V8cjsmRPVFbsxGL7APvxg/s1600/3d-desktop-backgrounds.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrzRLP90PZBppvVfaQ_l_8D_uNeF8Bs5ViMfyptH5gOCA6H3uNEbc7peQV06YiHM2PSXrf2cHhGp0-Cxs2vS7hfIJdcMdIu8FzGFbszOc-MrWCP5u-LHoYD4eDGIDSGS-pc9gEgms3Tw/s1600/3D_desktop_wallpaper.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gRCZwScEuG2TCWykwljBWbl20pIcOacpiYVR0UkNAJFanykkgbQ6ZxkZ9Ry9__JIA7_i3d0boSedycos9AhYrHYW6W6yrySsxZRTo7XQatSD11Uodngu9Mdg4BUheOcm_SsWSK6n-UU/s1600/China_Country_4+%28wallpapersbay.blogspot.com%29.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQJk1-rgN98-HK9ytKG7o-VVdRFA0QQfaBUI1J-SomjM6VV6d_NZHB8YKlvuRJR0J4smjDa3fYv62jhzS5R7GpSBmgj0s5xnEyZxONB7EqR5zkSHd6sZVrH4dYOpa2hrYEUq4_zjeykU/s1600/Rainbow_Wallpapers_(1)+%28wallpapersbay.blogspot.com%29.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVREHRi5WlBEJKedDxXBwUVL8T7-W3bW8KihhipE70HbupK1vnOjUa2iAdjn-rnuB7wKqFeQ_BROZk0VuzYxt9mCghkDc6QxGZ8ITtVi5sfutjcxDi4itW4rxYYFmUChYMMvAspA_f7c/s1600/Creative-Digital-Animal-Wallpapers-24+%28wallpapersbay.blogspot.com%29.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuM93PTDdom-tHP2Ak8TXQmXdcTqjad9SMd2UVxa3YxxRyZr8tnkMX10l9UZNmpWDBH9Z8U7_MOO4DrEt9RuoNYrH3pHVa0ZCM304crawJlpyyYzt7HcMak0HS4jkDViAW9QbfE7C2vQ/s1600/Thunder_Storm_Wallpapers_(37)+%28wallpapersbay.blogspot.com%29.jpg"
      ],
      now:0,
      SlideMyBG:function(list,style,speed,bgPos,bgSize,bgRep){
      if(!ssBG.SlideMyBG.hasRun){ssBG.SlideMyBG.hasRun=true;
      if(list==null||list==''){list=ssBG.gbr}else{if(typeof list!='object'){list=ssBG.gbr}}
      if(style==null||style==''){style='random'}
      if(speed==null||speed==''){speed=5000}
      if(bgPos==null||bgPos==''){bgPos='top center'}
      if(bgSize==null||bgSize==''){bgSize='100%'}
      if(bgRep==null||bgRep==''){bgRep='repeat'}
      ssBG.gaya=style;ssBG.jeda=speed;ssBG.gbr=list;ssBG.pos=bgPos;ssBG.size=bgSize;ssBG.rep=bgRep;
      ssBG.opt={'background-attachment':'fixed','background-repeat':ssBG.rep,'-moz-background-size':ssBG.size,'background-size':ssBG.size};
      }
      if(ssBG.gaya=='random'){ssBG.gbr=ssBG.gbr.sort(function(){return 0.5-Math.random()})}
      var img=new Image();var brp=ssBG.gbr.length;if(ssBG.now>=brp){ssBG.now=0}
      var gbrSkrng=ssBG.gbr[ssBG.now];ssBG.now++;
      if($('#bg-fader').length==0){$('body').prepend('<div id="bg-fader" style="opacity:0.0;top:0;left:0;width:100%;height:100%;background-color:'+$('body').css('background-color')+'"></div>');$('#bg-fader').css(ssBG.opt);$('body').css(ssBG.opt)}
      $(img).load(function(){
      $('#bg-fader').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos}).animate({opacity:1.0},'slow','linear',function(){
      $('body').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos});
      $(this).animate({opacity:0.0},'slow','linear');
      setTimeout("ssBG.SlideMyBG()",ssBG.jeda);
      });
      }).attr('src',gbrSkrng).error(function(huh){ssBG.SlideMyBG()});
      }
      };
      </script>

      <script type='text/javascript'>$(window).load(function(){ssBG.SlideMyBG()})</script>

      Selasa, 21 Januari 2014

      Cara membuat akun hantu facebook


      Selamat siang pengunjung di manapun anda berada kali ini saya mau share Trick terbaru pada artikel sebelumnya saya pernah sih membuat Artikel cara membuat akun facebook blank tetapi cara tersebut masih menggunakan code berhubung trick itu sudah tidak layak lagi,..

      Kali ini saya berbagi trick baru lagi cara'ny sedikit berbeda, mungkin kalian tidak punya nama terus bingung mau buat akun facebook karena di tolak terus.

      Langsung saja simak langkah-langkah dibawah ini:
      1. Pertama anda harus membuat akun email dulu pasti nya:
      • Gmail
      • Yahoo
      • Hotmail
      Terserah anda mau daftar yang mana ajah yang penting masih baru atau belum di gunakan sama sekali.

      2. Masuk ke dalam Bug akun facebook Link nya sebagai berikut :

      Link Bug 1
      Link Bug 2

      3. Kemudian isi semua kolom yang sudah di sediakan:
      • Email
      • Password
      • Date Of Birth
      • Security Check
      • Centang kotak kecil di bawah sendiri
      • Terakhir click Sign Up Now
      4. Kalo udah sign up kemudian buka http://www.m.facebook.com
      5. Masukan Email dan Password anda yang barusan anda daftar
      6. Bila ada tulisan "Silahkan Klik Disini untuk confrim akun anda dengan facebook"
      Anda hanya perlu menekan tulisan "Klick Disini"
      7. Kemudian akan terlihat halaman Verifikasi.
      8. Kemudian buka Email anda Gmail / Yahoo atau Hotmail anda.
      9. Cek kotak masuk email anda.
      10. JANGAN KLICK LINK TERSEBUT. Yang anda lakukan hanya mengambil kode verifikasi 
      Contoh :

      Anda mungkin akan diminta memasukkan kode konfirmasi ini "839181241"

      • Yang harus kamu lakukan hanya mengambil kode "839181241"

      Lebih jelas lihat gambar


      11. Lalu masukan kode verifikasi tersebut ke halaman verifikasi
      12. Lalu ikuti langkah-langkah tersebut jika sudah selesai semua.
      • Tambahkan NO Hp biar tambah cetar membahana. heheheheee
      13. Selamat mencoba dan semoga berhasil
      Screenshot :


      Berikut ini contoh" akun Blank


      • Jangan lupa kasih jempol dan komentar ya gan :)
      • Sekalian follow blog saya kalo menurut anda berguna,...

      Terima kasih

      Cara membuat notifikasi komentar seperti google plus

      Malam ini saya mau berbagi bagaimana caranya buat Notifikasi komentar atau recents comment di blogger dengan tampilan seperti notifikasi di google plus.
      Contohnya kaya yang ada di blog ini, coba liat di pojok kanan atas, ada icon lonceng.
      Itu adalah icon notifikasi / pemberitahuan jika ada komentar terbaru di blog Irvan Efendy ini.

      Cara Membuat Notifikasi Komentar Seperti Google Plus

      Nah, buat sahabat blogger yang minat membuat Notifikasi komentar seperti Google Plus langsung ajah simak langkah-langkah nya di bawah ini:

      STEP 1
      copy script jQuery ini dan paste diatas </head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
      *tapi kalo sebelumnya udah ada jQuery di template blog kalian, STEP 1 bisa di skip.

      STEP 2
      Copy CSS ini dan paste diatas ]]></b:skin>

      /* Notifikasi Komentar
      ----------------------------------------------- */
      #cm-total {
      position:fixed;
      top:14px;
      right:0;
      width:188px;
      text-align:left;
      z-index:9999;
      cursor:pointer;
      }
      .total-counter {
      background-color:#d11919;
      color:white;
      padding:1px 4px;
      font-family:Arial,Sans-serif;
      font-size:11px;
      border-radius:5px;
      font-weight:bold;
      }
      #notif {
      position:fixed;
      top:20px;
      right:180px;
      z-index:9999;
      height:22px;
      width:19px;
      opacity:.4;
      cursor:pointer;
      }
      #notif:hover {
      opacity:1;
      }
      .close-notif {
      position:fixed;
      top:92px;
      right:20px;
      z-index:9999;
      cursor:pointer;
      display:none;
      }
      #cm-container {
      width:355px;
      position:fixed;
      top:67px;
      right:0;
      z-index:9999;
      background-color:#e5e5e5;
      padding:60px 20px 10px 20px;
      color:#666;
      box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
      text-align:left;
      border:1px solid rgba(0,0,0,.2);
      background-clip:padding-box;
      display:none;
      }
      #cm-container:before {
      content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4uZoUNUhDx2jDJhbDlyhmCwxYLQeeev9nLmYDrmEOWgy3bj7nnPSH-hGRW8cvbxPUc7XcvJ2o-84b19Dtq51Z2Fs9NW2i1t-ET1PfozByfPOTrDjsu9jit3zYi2P05Ex9Ce212V-Nhx0/s1600/arrow-notif.png');
      position:absolute;
      top:-14px;
      left:196px;
      }
      #cm-container:after {
      content:"Komentar Terbaru";
      position:absolute;
      top:22px;
      left:150px;
      text-align:center;
      font:normal 14px Arial;
      color:#333;
      }
      .cm-outer {
      margin:0 auto;
      padding:0;
      font-size:11px;
      text-align:left;
      font:normal 12px Arial;
      }
      .cm-outer ul{
      margin-bottom:5px;
      }
      .cm-outer li {
      padding:9px 10px 14px;
      list-style:none;
      clear:both;
      position:relative;
      border-radius: 3px;
      box-shadow: 0 1px 2px rgba(0,0,0,.2);
      background-color: white;
      margin-bottom:10px;
      }
      .cm-text {color:#797979;}
      .cm-outer {margin:0 0 5px}
      .cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
      .cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
      .cm-header a:hover {color:#74a2c3;text-decoration:none;}
      .cm-outer .cm-content {overflow:hidden}
      .cm-content {margin-left:90px}
      .cm-outer img {
      display:block;
      float:left;
      background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9aLNjnfdncNywOEpX-VoFYLE4n1KZ7nQAKOeDm-h3Gr3xXb_z9-NBWSIrxTuReEFqVMuqadzH-W48Zm-pRQaxAG-3nAdK3wSJT71oXJ3OEkLKRz39MS2RGkJmLYHSbtp03HCAvj0NIg/s1600/anon80.png') no-repeat 50% 50%;
      overflow:hidden;
      border-radius:3px 0 0 3px;
      position:absolute;
      top:0;
      left:0;
      }
      .cm-footer {margin-top:7px;}
      .cm-footer a {color:#5886a7;text-decoration:none;}
      .cm-footer a:hover {color:#74a2c3;text-decoration:none;}
      div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
      content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqyN3lhNWdSnJ4_KNQ6en7q2ZDlcfBB9mxyHYwsgvdZZVMxW8OgiocHraryzKUHsO47eGQ9InZ68uthod1JVurl16Xjm-EnIkWSHPRdztTJ3iBw5aW514lxaK6uOxlz-OeznhgGv6QUM/s80-c/gravatar.png);
      }

      STEP 3
      Copy kode ini diatas </body>
      <div id='cm-container'/>
      <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgthid2f4B2ZpkHmWoKIdlDcK9XigldiwxEu4dicDKyyMK46-5T-fQ-bctEV-9HmI_7InEkFawkmqTTR7jieDHShf5DhkxnZGHXSKkpH9V_v4sbqXMxbZgzLEKakN6_1lJPikkBydsMVUY/s1600/lonceng.png'/></div>
      <div id='cm-total'/>
      <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk3b4iXvpCmy2akLSmv07ya7b3ufViocKsPKltemdACOyRzAMKHuRk0QwAQSJWt06YElBBnR6uOPp0IlIMJaOqT_ZpQtEzcfZtjuX3DqEFanS0_WFV69ZQbEwZLXIYMN-x_xbvAh0jPqM/s1600/delete4.png' title='close'/></div>
      <script>
      //<![CDATA[
      var originalTitle = document.title;
      var cm_config = {
      home_page: "http://irvan-efendy.blogspot.com",
      max_result: 6,
      t_w: 80,
      t_h: 80,
      summary: 40,
      new_tab_link: true,
      ct_id: "cm-container",
      new_cm: " Komentar Baru!",
      interval: 30000,
      alert: true,
      alert: function(total) {
      document.getElementById("cm-total").innerHTML = '<strong class='total-counter'>'+total+'</strong>';
      document.title = '(' + total + ') ' + originalTitle;
      }
      };
      $('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
      //]]>
      </script>
      <script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>
      *pada bagian ini home_page: "http://irvan-efendy.blogspot.com" , ubah sesuai URL blog kalian.

      Kalo udah semuanya, SAVE.  dan lihat hasilnya.. :)
      Inspirasi dari: Blog Kang Ismet

      Minggu, 19 Januari 2014

      Membuat efek lensa flip 3D pada gambar

      Membuat Efek Lensa Flip 3D Pada Gambar - Membuat Gambar pada artikel blog sudah hal yang biasa, karena dengan adanya gambar pada tulisan dapat memudahkan pengunjung untuk memahami tujuan dari isi tulisan pada blog, tetapi merubah gambar tersebut agar terkesan unik dan menarik di mata pengunjung tidak banyak yang melakukannya.

      Seperti Efek kaca pembesar pada gambar sebelumnya, di artikel kali ini saya akan mencoba mengubah efeknya menjadi sebuah LENSA PEMBESAR saat mouse anda menyentuh gambar.
      Detailnya kursor panah mouse anda seolah-olah akan bertindak sebagai lensa untuk melihat ukuran gambar menjadi 3 Dimensi saat anda menyorot obyek membutuhkan waktu yang cukup lama saat menggabungkan antara kode script dengan CSS Code, dan memodifnya sedikit sehingga akan memberikan titik fokus pada obyek yang kita tentukan dan menghasilkan Efek Lensa Flip 3D pada gambar seperti berikut :


      Web Page


      Buat sahabat-sahabat Tercinta Blog Irvan Efendy yang mau mencoba, pintu hatiku selalu terbuka untukmu...
      Hahahahaa..!! jadi kayak maaf-maafan ajah neh, hehehe...

      Simak langkah2 dibawah ini:

      1. Login ke akun blogger sobat
      2. Klik Template » Edit HTML
      3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
      4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

      #iphone{
      width:550px;
      height:293px;
      background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczCbZeJpMYup1UH0L5sXF7MP9w9dsqrnTQlqELtJyPFpWdW6PIU6Io8Cmry3LuRWMqJ6AMDLksJX5Vwc3sIDZVHvAKeyHz1str3L8mEyeToutBk29NvCsPrHHLPYvJVl3nMNrD8w5iw/s1600/3d-desktop-background-hd-of-art-and-design.jpg') no-repeat center center;
      position:relative;
      }
      #webpage{
      width:365px;
      height:207px;
      position:absolute;
      top:63%;
      left:62%;
      margin:-141px 0 0 -249px;
      }
      #retina{
      background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-KkbnRvNBynCFA838UBeFwv4jfDqCa3abdSAnNRYZ-O01UkA-TP3a46kccz_jCGEIqwGXpvv5gZArDXV_hfUb_RRlAuv9MiDTg6fA6U6305Nw0ZJVDX-1G5VZqp6c0iM5p9iwoIiBrXp/s1600/home_blog+(irvan-efendy.blogspot.com).PNG') no-repeat center center white;
      border:2px solid white;
      position:absolute;
      height:180px;
      width:180px;
      display:none;
      -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
      -webkit-box-shadow:0 0 5px #777;
      box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
      -moz-border-radius:90px;
      -webkit-border-radius:90px;
      border-radius:90px;
      }

      Penerapannya:

      Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

      <div id="iphone">
      <div id="webpage">
      <img alt="Web Page" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-KkbnRvNBynCFA838UBeFwv4jfDqCa3abdSAnNRYZ-O01UkA-TP3a46kccz_jCGEIqwGXpvv5gZArDXV_hfUb_RRlAuv9MiDTg6fA6U6305Nw0ZJVDX-1G5VZqp6c0iM5p9iwoIiBrXp/s1600/home_blog+(irvan-efendy.blogspot.com).PNG" height="207" width="365" />

      <div id="retina">
      </div>
      </div>
      </div>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
      <script src="https://sites.google.com/site/vanzdy/script/efek_lensa-flip-3D.js" type="text/javascript"></script>

      Keterangan:

      1. Teks Biru adalah Gambar 1 (Gambar Lensa Flip)
      2. Teks Merah adalah Gambar 2 (Gambar Utama)
      3. Silahkan Ganti dengan URL gambar anda dengan URL gambar yang sama
      4. Selamat Mencoba Cara membuat Efek Lensa Flip 3D Pada Gambar, semoga bermanfaat
      5. Terima Kasih

        Jangan lupa kasih komen ya gan :) wkwkkwkwkk

      Membuat efek remote link pada gambar

      Cara membuat efek Remote Link pada gambar – Sebuah link yang terdapat pada blog memiliki fungsi maupun peranan yang sangat penting, dengan adanya hal ini link yang di inginkan dapat di custom agar pada link tersebut memiliki efek tersendiri yang nantinya akan terlihat berbeda dari link lainnya.
      Setiap Postingan pasti terdapat sebuah gambar yang mengarah pada keseluruhan makna isi konten tulisan, tetapi link yang terdapat pada gambar tersebut hanya berupa alamat URL gambar, dengan sedikit modifikasi disini saya akan berbagi Cara membuat efek Remote Link pada gambar. 

      Okey,.. langsung ajah ke TKP.

      Simak langkah2 dibawah ini:

      1. Login ke akun blogger sobat
      2. Klik Template » Edit HTML
      3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
      4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

      .remote{ position: relative; }
      .remote a{ text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; }
      .remote a img{ width:125px; height:125px;}
      .remote a:hover{ background: #cecece; }
      .remote a .name{ font: 18px Georgia, Serif; }
      .remote a:hover .name{ color: #900; font-weight: bold; }
      .remote a:hover img{ border: 5px solid #52e052; margin: -4px; }
      .remote a .photo{ display: block; position: absolute; width: 125px; height: 125px; }
      #img1 .photo{ top: 0; left: 0; }
      #img2 .photo{ top: 0; left: 134px; }
      #img3 .photo{ top: 134px; left: 0; }
      #img4 .photo{ top: 134px; left: 134px; }

      Penerapannya:

      Masukan kode HTML di bawah ini ke dalam postingan blog sobat (Menggunakan Mode HTML).

      <div class="remote">
      <a href="http://URL ANDA" id="img1">
      <span class="name">Photo 1</span><br />
      Silahkan ganti dengan TITLE URL ANDA
      <span class="photo">
      <img src="URL GAMBAR ANDA" alt="ATRIBUT GAMBAR ANDA" />
      </span></a>

      <div class="remote">
      <a href="http://URL ANDA" id="img2">
      <span class="name">Photo 2</span><br />
      Silahkan ganti dengan TITLE URL ANDA
      <span class="photo">
      <img src="URL GAMBAR ANDA" alt="ATRIBUT GAMBAR ANDA" />
      </span></a>

      <div class="remote">
      <a href="http://URL ANDA" id="img3">
      <span class="name">Photo 3</span><br />
      Silahkan ganti dengan TITLE URL ANDA
      <span class="photo">
      <img src="URL GAMBAR ANDA" alt="ATRIBUT GAMBAR ANDA" />
      </span></a>

      <div class="remote">
      <a href="http://URL ANDA" id="img4">
      <span class="name">Photo 4</span><br />
      Silahkan ganti dengan TITLE URL ANDA
      <span class="photo">
      <img src="URL GAMBAR ANDA" alt="ATRIBUT GAMBAR ANDA" />
      </span></a>
      </div>

      Keterangan :

      Maka hasilnya akan terlihat saat anda menekan tombol BUKA dibawah ini
      Silahkan letakkan panah kursor mouse anda disalah satu GAMBAR di bawah, maka secara otomatis link akan ter-REMOTE pada tulisan yang ada disamping


      Sabtu, 18 Januari 2014

      Download Latihan Soal UN TKJ SMK, Prediksi, Try Out, Bank Soal TKJ Lengkap

      Walau di luar lagi dalam keadaan hujan tapi tidak membuat semangat untuk membuka laptop pudar, haha.setelah sebelumnya saya share artikel mengenai Soal UN Teori Kejuruan Multimedia 2013/2014 kali ini saya +Dwi Yulianto selaku Admin Blog ini akan berbagi kumpulan soal ujian kejuruan yang lain yang saya rangkum dalam artikel berjudul Download Latihan Soal UN TKJ SMK, Prediksi, Try Out, Bank Soal

      Kamis, 16 Januari 2014

      Cara membuat tombol demo dengan CSS


      Assalamualaikum......, masih bersama Blog Irvan Efendy, pada kesempatan ini saya akan coba membuat artikel tentang Cara Membuat Tombol Download Dan Demo Dengan CSS,ya dari pada saya bengong mending bikin artikel siapa tau buat sobat ada yang minat memakai tombol button made in hansmjlkcommunity.....hehehehhe.tombol button lumayan penting guna memberikan tampilan pada blog sobat,yang mana pada kesempatan dulu saya sempat membahas juga tentang
      Cara modifikasi Tag Blockquote dengan CSS,masih ada kaitannya dengan artikel kali ini,nmaun siapa tau sobat ada yang minat dengan tampilan button kali ini.
      Bagi sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini

      1. Sepeti biasa login dulu ke akun blog sobat.
      2. Pilih Template > Edit HTML,kemudian centang Expand Widget Templates
      3. Cari kode [[></b:skin> dan letakan kode di bawah tepat di atas kode ]]></b:skin>
      .SRB{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
      .SRB a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

      .SRB a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

      .SRB a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

      .SRB a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

      .SRB a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

      .SRB a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

      .SRB a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

      .SRB a:hover, .SRB:hover { color: #fff; opacity: .7 }

      4. Kemudian save.


      Untuk penggunaan dalam postingan bisa sobat gunakan kode kode di bawah.


      <span class="SRB"><a class="green" href="#" rel="nofollow" target="_blank"> Button Text </a></span>


      <span class="SRB"><a class="orange" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

      <span class="SRB"><a class="red" href="#" rel="nofollow" target="_blank"> Button Text </a></span>


      <span class="SRB"><a class="gray" href="#" rel="nofollow" target="_blank"> Button Text </a></span>


      <span class="SRB"><a class="dark" href="#" rel="nofollow" target="_blank"> Button Text </a></span>


      <span class="SRB"><a class="blue" href="#" rel="nofollow" target="_blank"> Button Text </a></span>


      Keterangan :

      • Untuk tulisan berwarna merah menunjukan tempat URL
      • Untuk tulisan berwarna hijau menunjukan nama button
      Selesai sudah tutorial kali ini terima kasih atas partisipasinya semoga dapat sedikit membantu buat sobat semuanya.

      Rabu, 15 Januari 2014

      Cara modifikasi tag blockquote dengan CSS

      Hay guys jumpa lagi dengan saya orang terkece sedunia maya,..wkwkwwkwkk
      kali ini aku mau share tentang Cara modifikasi Tag Blockquote dengan CSS dari dulu aku pengen blockquote seperti yang ada di DEMO tapi baru nemuin caranya disini dan sekarang aku mau share lagi, karena yang ada disana menggunakan Tag <pre> kalau saya menggunakan Tag default yaitu <blockquote> jadi biar gak terlalu repot hehehehe.
      Okey udah liat kan DEMO nya yang di bawah itu tuh jadi blockquote nya itu nanti bisa ada namanya sesuai dengan nama yang akan kita berikan, mungkin sedikit beda dan lebih menarik menurut saya.
      Dari situ orang bisa ngerti maksud kalimat atau kode yang ada di blockquote.

      Caranya juga mudah banget anda tinggal simpan kode di bawah ini di atas kode ]]></b:skin> kalau belum ngerti silahkan ikuti langkah - langkahnya :

      1. Masuk di dasbor blogger
      2. Klik Rancangan / Template
      3. Klik Edit HTML
      4. Klik Prooced / Lanjutkan ( jika menggunakan editor baru )
      5. Cari kode ]]></b:skin>
      6. Setelah ketemu silahkan simpan kode css di bawah ini di atas kode tersebut.
      .post blockquote { margin-left: 15px; padding: 5px 5px 5px 10px; background: #cfcb9d; border: #ada171 solid 1px; font: normal 12px/14px Monaco, Monospace; border-left: #ada171 solid 5px; position: relative } .post blockquote[rel] { padding-top: 25px; } .post blockquote[rel]::before { content: attr(rel); font: bold 12px/22px Arial, Sans-Serif; color: white; background-color: #b4a97e; padding: 0 10px; position: absolute; top: 0; right: 0; left: 0; text-transform: uppercase }
      Lalu klik SIMPAN TEMPLATE.

      7. Nah saat anda menulis di postingan dan menambahkan blockquote di postingan pasti nanti kodenya seperti ini,
      <blockquote> Disini kata - kata anda </blockquote>

      Nah sekarang anda hanya perlu menambahkan kode seperti ini rel="Contoh" pada kode pembuka blockquote, jadi nanti kodenya seperti ini
      <blockquote rel="Contoh"> Disini kata - kata anda </blockquote>
      Nah kalau sudah seperti itu maka nanti nama blockquote nya akan muncul, ganti juga kata contoh dengan kata - kata anda. selamat berkreasi dengan nama blockquote nya ya. emm jangan lupa untuk melihat kodenya anda perlu beralih dari mode Compose ke Mode HTML atau Edit HTML Nih screenshot nya.


      Itulah cara Modifikasi Tag Blockquote dengan CSS semoga bermanfaat.
      Kalo sobat tidak keberatan tolong follow Blog Irvan Efendy ya,.... heheheee

      Cara membuat tag pre keren diblogger

      Halo sahabat Blogger ,, Apa Kabar :)  Lama ya saya gk post ,, cuma 2 hari yang lalu ,, oke pada postingan kali ini saya akan share tentang Cara membuat Tag Pre keren di blogger ,, Udah Tau Gk Tag Pre ??

      Tag Pre Adalah Suatu Kotak Yang Kayak BLOCKQUOTE Yaitu Untuk Meletakkan Script Atau CSS Di Blog ,, Hayo Kalian suka mana ?? kalo saya sih Blockquote !! okelah langsung aja yuk tutorialnya :D


      MASUKKAN KODE HTML ANDA ATAU SEMBARANG 
      MASUKKAN KODE CSS ANDA DISINI HERE HERE
      MASUKKAN KODE JAVASCIRPT ANDA DISINI WOOY ☻
      MASUKKAN KODE JQUERY DISINI SEMBARANG 
      MASUKKAN KODE PHP DISINI ATAU KODE SEMBARANG BISA
      MASUKKAN KODE XML DISINI ATAU KODE SEMBARANG BISA

      Simak langkah-langkah nya dibawah ini:

      1. Login Di Blooger
      2. Template --> edit HTML
      3. CTRL +F Cari Kode ]]></b:skin>
      4. Lalu Masukkan Kode Dibawah Ini Diatas Kode Tersebut
      pre {
      background-color:white;
      background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
      background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
      background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
      background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
      background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
      -webkit-background-size:30px 30px;
      -moz-background-size:30px 30px;
      -ms-background-size:30px 30px;
      -o-background-size:30px 30px;
      background-size:30px 30px;
      background-repeat:repeat;
      font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
      color:#333;
      border:2px solid #666;-moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      position:relative;
      padding:0 7px;
      margin:10px 5px;
      overflow:auto;
      word-wrap:normal;
      white-space:pre;
      -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
      -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
      box-shadow:0 1px 2px rgba(0,0,0,0.2);
      position:relative;
      }
      pre[data-codetype] {
      padding:29px 1em 7px 1em;
      }
      pre[data-codetype]:before {
      content:attr(data-codetype);
      display:block;
      position:absolute;
      top:0;
      right:0;
      left:0;
      background-color:#666;
      padding:0 7px;
      font:bold 11px/20px Arial,Sans-Serif;
      color:white;
      }
      pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
      pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
      pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
      pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
      pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
      pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}
      pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
      pre[data-codetype="CSS"]:before {background-color:#7B990C;}
      pre[data-codetype="JavaScript"]:before {background-color:#545448;}
      pre[data-codetype="JQuery"]:before {background-color:#395540;}
      pre[data-codetype="PHP"]:before {background-color:#FF9900;}
      pre[data-codetype="XML"]:before {background-color:#FF0C39;
      }
      5. Simpan Template

      *Untuk Menampilkan Tampilan Tag Pre Tersebut Guankan Mode HTML html

      6. Lalu Masukkan Kode Pemanggil nya dibawah ini simak baik baik ya ^_^

       <pre data-codetype="HTML">Disini Tag XML</pre>
       <pre data-codetype="CSS">Disini Tag CSS</pre>
       <pre data-codetype="JavaScript">Disini Tag JavaScript</pre>
       <pre data-codetype="JQuery">Disini Tag JQuery</pre> 
        <pre data-codetype="PHP">Disini Tag PHP</pre>
        <pre data-codetype="XML">Disini Tag XML</pre>

      7. Simpan Postingan tersebut ,,

      Good Luck

      Demikian Post Tentang  Cara Membuat Tag Pre keren di blogger Semoga Bermanfaat Bagi Kita Semua :D , Wassalamualaikum Wr Wb.

      Cara menghilangkan tanda Obeng di Blog

      Pada kesempatan kali ini saya akan berbagi trick tentang Cara menghilangkan tanda Obeng di Blog biasanya sahabat blogger tidak menyukai tanda Obeng seperti ini  Jujur saya pribadi juga sangat tidak menyukai tanda Obeng tersebut karena menurut saya tanda Obeng membuat tampilan blog sedikit jelek.
      Biasanya tanda Obeng ini berguna untuk mengedit Tata Letak di Blog kamu secara langsung atau tanpa melalui Tata Letak Blogger. Tapi jika menurut sobat tanda Obeng ini hanya sampah yang tidak di butuhkan silahkan sobat hapus tanda Obeng tersebut.

      Simak langkah2 dibawah ini:

      1. Login ke akun blogger sobat
      2. Klik Template » Edit HTML
      3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
      4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
      .quickedit{
      display:none;
      }

      5. Simpan template sobat dan lihat hasilnya.

      Semoga tutorial ini bermanfaat buat anda semua,.. Happy Blogging !!!

      Senin, 13 Januari 2014

      Cara memperbaiki pesan komentar yang turun kebawah

      Banyak sekali blog blog yang saya kunjungi ketika ingin berkomentar pesan komentar yang seharusnya berada di atas kotak komentar malah berpindah kebawah saat membalas komentar, hal ini juga sering terjadi pada emoticon smiley yang berpindah kebawah saat berkomentar, tentu hal ini membuat kotak komentar yang tadi terlihat rapih dan menarik justru menjadi kebalikannya, tapi tidak perlu khawatir lagi karena kali ini saya akan membagikan tutorial memperbaiki pesan komentar dan emoticon yang turun kebawah kotak komentar. perhatikan step by stepnya
      • login ke blogger
      • back up template untuk berjaga-jaga
      • pilih template >> edit html
      • centang expand widget template
      • cari kode <b:includable id='threaded-comment-form' var='post'> untuk mempermudah gunakan ctrl+f
      • ganti kode berikut
      <b:includable id='threaded-comment-form' var='post'>
      <div class='comment-form'>
      <a name='comment-form'/>
      <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
      <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
      </b:if>
      <data:post.friendConnectJs/>
      <data:post.cmtfpIframe/>
      <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
      </script>
      </div>
      </b:includable>
      • ganti kode diatas dengan kode dibawah ini
      <b:includable id='threaded-comment-form' var='post'>
      <div class='comment-form'>
      <a name='comment-form'/>
      <b:if cond='data:mobile'>
      <div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
      </div>
      <b:else/>
      <div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
      </div>
      </b:if>
      <data:post.friendConnectJs/>
      <data:post.cmtfpIframe/>
      <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
      </script>
      </div>
      </b:includable>
      • cari kode  
      document.getElementById(domId).insertBefore(replybox, null);
      • ganti kode diatas dengan kode dibawah ini
      document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);
      • simpan template 
      Help :silakan tanyakan di kotak komentar jika ada sobat yang belum mengerti

      Minggu, 12 Januari 2014

      Cara membuat emotion comment di blog


      Untuk melengkapi malam ini saya akan membagikan widget emotion diatas kotak komentar setelah saya selesai membuat artikel Widget penunjuk waktu achan IKT48 , widget ini memang sangat menarik rasanya tidak sabar untuk langsung memasangnya pada blog, gimana enggak, seolah olah widget nya ngomong ayolah cepet pasang gw (hehhee),
      Keuntungan dari widget ini adalah mempercantik tampilan kotak komentar sekaligus manambah nilai sudut pandang pengunjung blog yang gak tahan langsung ingin komentar menggunakan emoticon. langsung aja nih tutornya.

    1. Login ke blogger
    2. pilih template >> edit html
    3. centang expand widget template
    4. cari kode ]]></b:skin> untuk mempermudah gunakan ctrl+f
    5. copy paste kode dibawah ini tepat diatas kode ]]></b:skin>
    6. .emoWrap {
      position:relative;
      padding:10px;
      margin-bottom:7px;
      background:#fff;
      /* IE10 Consumer Preview */
      background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
      /* Mozilla Firefox */
      background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
      /* Opera */
      background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
      /* Webkit (Safari/Chrome 10) */
      background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
      /* Webkit (Chrome 11+) */
      background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
      /* W3C Markup, IE10 Release Preview */
      background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
      border:3px solid #860000;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border-radius:5px;
      box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
      -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
      -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
      box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
      font-weight:normal;
      color:#333;
      }

      .emoWrap:after {
      content:"";
      position:absolute;
      bottom:-10px;
      left:10px;
      border-top:10px solid #860000;
      border-right:20px solid transparent;
      width:0;
      height:0;
      line-height:0;
      }
    7. kemudian cari kode </body> 
    8. copy paste kode dibawah ini tepat diatas kode </body>

    9. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script type='text/javascript'>
      //<![CDATA[
      jQuery(document).ready(function () {emoticonx({
      emoRange:"#comments p, div.emoWrap",
      putEmoAbove:"iframe#comment-editor",
      topText:"Click to see the code!",
      emoMessage:"To insert emoticon you must added at least one space before the code."
      })
      });
      //]]>

      </script>
      <script src='http://not-delete.googlecode.com/files/emoticon-comment.js' type='text/javascript'/>
      </b:if>
    10. Langkah terakhir simpan template sobat, dan lihat hasilnya

    11. NOTE: jika ada dari sobat yang tiba-tiba emoticonnya turun kebawah kotak komentar bisa baca postingan saya disini

      Sabtu, 11 Januari 2014

      Download Kumpulan Soal UN TKJ 2014 Sesuai Kisi-Kisi Per Materi Gratis

      Setelah sebelumnya saya posting mengenai Download Soal Latihan UN Kejuruan TKJ 2013/2014 Lengkap. Kali ini saya melanjutkan artikel yang masih satu genre yaitu Download Soal Latihan UN TKJ 2014 Sesuai Kisi-Kisi Per Materi




      Nah berhubung di harddisk saya masih ada kumpulan soal-soal menghadapai Ujian Nasional SMK TKJ, tidak ada salahnya saya share ke rekan-rekan yang barangkali membutuhkan

      Selasa, 07 Januari 2014

      Widget penunjuk waktu achan JKT48


      Widget ini aku buat karena terinspirasi dari widget yg ada di skin rainmeter
      selain untuk menghias blog, widget ini juga bertujuan untuk mengingatkan waktu pada pengunjung blog

      Widget ini juga di lengkapi dengan flash player yang bertujuan untuk memutar mp3
      flash player ini sebenarnya cuma buat pemanis saja, karena sebelumnya aku juga pernah share Widget Musik Player Untuk Blog


      Tahap 1. Masuk Dasbor - Template - Edit HTML

      Copas Salah Satu Kode CSS Dibawah ini dan letakan diatas/sebelum kode ]]></b:skin>

      #oshi-ku{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2V63GMB8zhqpFTnKQ5JZA_OukfgRn1zz0ZeEtHsMs5oxSsboABM-F6xTj5zOsqcncYTePusPwzwebfqdP47d1Bv-akdpHw2YZb-kcGfMijOveCqC8ZrCQcZtbIWQn7NfHzqCuNheWu4oP/s1600/achan-ponyshu.png)no-repeat;
      width:267px;
      padding-top:303px;
      color:#1900FF;
      font-family: comic sans ms;
      font-size: 17px;
      }
      .wadah{padding-top:5px;
      height:152px;
      background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14FBAbyqQHq3B-54zxkHjja6cMUJk6zeSV_iV98cN5-6PMqB2WJo8NOso3cvoxT4tG2T0eZRgB3Gwcn5tH7Jh483QT29HvEH0xFZdBXdYxOtdHqoY-6SQt0z3mx5zjzUbLCeZUwYzsBSQ/s1600/kotak-Biru.png)no-repeat;
      }
      #tanggal{margin-top:-9px; margin-left:15px; width:108px;height:81px;font-size: 75px;text-align:center;}
      #bulan-tahun, #hari, #pukul{width:126px;height:24px;text-align:center;margin-left:130px;margin-top:6px;overflow: hidden;}
      #bulan-tahun{margin-top:-71px;}

      #oshi-ku{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xdeXdQlSv8mluL_tAtbGlP6vXkDtThkrP9fuKtfKY9FLsKil_qy3N7xh2ZNaTlQllBXPdMkLby78C-V_drwD_lB9p4_F_7vwbaf0wAo3-o7EtqpfxzUgjorU1hfYOgZ0Gtq92pN2hpIn/s1600/achan.png)no-repeat;
      width:267px;
      padding-top:200px;
      color:#FF294D;
      font-family: comic sans ms;
      font-size: 17px;
      }
      .wadah{padding-top:5px;
      height:152px;
      background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFzc_Dp2Sp2KasWoRQlROAcdTP_YN5aKV6HDKY3fVSYgVYJEpzMx__SBxB1srQECwoAvuvGyrlGCE_Bm2xL90NrqgEQ8CoL_JTxG-LfNuBxWFEZfk3iL0gBKbhvmePfMu72Tnpe-jULHTw/s1600/kotak-pink.png)no-repeat;
      }
      #tanggal{margin-top:-9px; margin-left:15px; width:108px;height:81px;font-size: 75px;text-align:center;}
      #bulan-tahun, #hari, #pukul{width:126px;height:24px;text-align:center;margin-left:130px;margin-top:6px;overflow: hidden;}
      #bulan-tahun{margin-top:-71px;}
      Tahap 2. Pilih tata letak - Tambah gadget
      Pilih HTML/JavaScript
      Kemudian copas kode di bawah ini
      <script>var p1y3j4l=['ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=','','charAt','indexOf','fromCharCode','length'];function iki(h41d4r4x_3){var h41d4r4x_4=p1y3j4l[0];var h41d4r4x_5,h41d4r4x_6,h41d4r4x_7,h41d4r4x_8,h41d4r4x_9,h41d4r4x_a,h41d4r4x_b,h41d4r4x_c,h41d4r4x_d=0,h41d4r4x_e=p1y3j4l[1];do{h41d4r4x_8=h41d4r4x_4[p1y3j4l[3]](h41d4r4x_3[p1y3j4l[2]](h41d4r4x_d++));h41d4r4x_9=h41d4r4x_4[p1y3j4l[3]](h41d4r4x_3[p1y3j4l[2]](h41d4r4x_d++));h41d4r4x_a=h41d4r4x_4[p1y3j4l[3]](h41d4r4x_3[p1y3j4l[2]](h41d4r4x_d++));h41d4r4x_b=h41d4r4x_4[p1y3j4l[3]](h41d4r4x_3[p1y3j4l[2]](h41d4r4x_d++));h41d4r4x_c=h41d4r4x_8<<18|h41d4r4x_9<<12|h41d4r4x_a<<6|h41d4r4x_b;h41d4r4x_5=h41d4r4x_c>>16&0xff;h41d4r4x_6=h41d4r4x_c>>8&0xff;h41d4r4x_7=h41d4r4x_c&0xff;if(h41d4r4x_a==64){h41d4r4x_e+=String[p1y3j4l[4]](h41d4r4x_5)}else{if(h41d4r4x_b==64){h41d4r4x_e+=String[p1y3j4l[4]](h41d4r4x_5,h41d4r4x_6)}else{h41d4r4x_e+=String[p1y3j4l[4]](h41d4r4x_5,h41d4r4x_6,h41d4r4x_7)}}}while(h41d4r4x_d<h41d4r4x_3[p1y3j4l[5]]);return h41d4r4x_e};function merekne(h41d4r4x_10){var h41d4r4x_11=p1y3j4l[1],h41d4r4x_d=0;for(h41d4r4x_d=h41d4r4x_10[p1y3j4l[5]]-1;h41d4r4x_d>=0;h41d4r4x_d--){h41d4r4x_11+=h41d4r4x_10[p1y3j4l[2]](h41d4r4x_d)};return h41d4r4x_11};var mumet='+QHcpJ3Yz9CP9VWdyRHIuJXd0Vmc7kyJwADMxcCLnsTKicyKkl2KnICK4FmchRWahh0X1R3ahd1JoQXdvVWbpRFdlN3Osl2chhWPM1EVIJXZu5WaukCZphCZJlnQ05WZtVGbFRXZn5CduVWb1N2bktzJg4jdpR2L8cyKrlGdlR2KnozJrQXauVWbrciOnsSbhp2Kn4jIsV3a1BnI9QWagYXakxDI+YXak9CPnsSXpJXYotVY55WayFGarcCIpJXYI5jIpJXYoJSPklGI2lGZ84jdpR2L8cyKuVHahR3KnAyJr0lbhxWditVY55mbhxWdityJ+Iib1hWY01ibhxWdiJSPklGI2lGZ8AiP2lGZvwzJrwWYndmbhR3Kn4jIsF2Zn5WY0JSPklGI2lGZ8AiP2lGZvwzJrEmbhNXY1N3KnACdh1WYsV2U+IiclRnblNmOudWasFWL0hXZ0JSPlxWe0NHI2lGZ8cSPsl2chhWfrlGdlR2KiAjI9sWa0VGZ7lCMxwzapRXZkhiZptTKoMHZu92YlNFdldmL1R3ahdXPrlGdlRWf0lmbl12KiAjI9QXauVWb7lCMxwDdp5WZthiZptTKoMXZ0Vnbp1EdldmL1R3ahdXP0lmbl1WftFmarICMi0Tbhp2epATM80WYqhiZp1nItFGbh1kI9EmbhNXY1N3epQjM9wTbhpmJm0WYq1DP4EDKmlWfiUmcvNlI9EmbhNXY1N3epgTM80WYqZiJtFma9wTNxgiZp1nIn5WYpNlI9EmbhNXY1N3epUTM80WYqZiJtFma9wTMxgiZp1nIpdWYQJSPh5WYzFWdztXKxEDPtFmamYSbhpWP8UDKmlWfikmchhEIp5WaEJSPh5WYzFWdztXK1wTbhpmJm0WYq1DPwgiZptTKoMnc19GS0V2ZuUHdrF2d90WYqtTKnUHdiF2UnwyJ0F2O5MzIm0WdKdCLnMXatF2SnwyJ1JWYSdCLnE2chxWZTdCLn4WauV2UnwyJ1d2ZulWTngSehJncBBydl5WPhlnbpJXYotTKokXYERXZn5Sd0tWY31TayFGa7kCKlRXYERXZn5Sd0tWY31Dbhd2ZuFGd7kyJyVmYtV2clR0JsciclJWblZ3bOdCLnIXZi9Gdr90JsciclJWblRHclN1Jscyc1R3c1dWQnwyJpxWdKdCLnkmb1p0JscSal10JscCbpJHcBdCLnQXZyFWTnwyJpJXY1JnYlZ0JscSayFWduFmSngSehJncBBydl5WPhlnbuFGb1J2OpgCa052bNRXZn5Sd0tWY31jbhxWditTKoIXYllFbsVnR0V2ZuUHdrF2d94WdoFGd7UGdhREI3Vmb9UHdrF2d7lCZphCehJXYklWYI9Vd0tWYXBibvlGdj5Wdm5DdwlmcjNHP';document.write(unescape(iki(merekne(mumet))));</script>
      <div id="oshi-ku"><div class="wadah" id="widget">
      <script type="text/javascript">Waktu_Haidarax('widget');</script>
      </div><div style="width:267px;margin-top:-40px;margin-bottom:20px;"><center>
      <embed src="http://haidarax.heck.in/files/putar.swf?file=http://haidarax.heck.in/files/ayana-voice-2.mp3&autostart=no&repeat=always" width="240" height="20"></embed>
      </center></div></div>
      Perhatikan Kode yg di beri tanda Garis Bawah, itu adalah kode flash player kalau mau ganti warna flash player nya, ganti aja dengan kode berikut
      Pink: <embed src="http://haidarax.heck.in/files/putar.swf?file=http://haidarax.heck.in/files/ayana-voice-2.mp3&autostart=no&repeat=yes&frontcolor=FF4249&lightcolor=FF213F&backcolor=FFC9ED" width="240" height="20"></embed>
      Biru: <embed src="http://haidarax.heck.in/files/putar.swf?file=http://haidarax.heck.in/files/ayana-voice-2.mp3&autostart=no&repeat=yes&frontcolor=477EFF&lightcolor=243AFFF&backcolor=BABAFF width="240" height="20"></embed>
      Simpan dan lihat hasilnya,..
       
      ;);