Rahasia Hack Template Web / Blog dengan CTRL + U

Template adalah bagian terpenting dalam sebuah blog. Karna dengan adanya ini kita bisa membuat sesuatu yang terlihat indah dan mengagumkan. Kini saya akan memberi tahu kamu Rahasia Hack Template Web / Blog dengan CTRL + U. Bukannya saya mengajarkan tidak benar kepada anda, tapi ini adalah sesuatu pelajaran yang aku pelajari selama berbulan-bulan di internet.

• Pertama yang harus kamu siapkan adalah Niat ( hehehe )
• Terus kita harus punya Template yang sama seperti Template yang kita mau hack
• Isinya Gak harus sama persis, yang penting template itu mirip cuma colomn,header,sidebar,footer sama.
• Setelah itu kamu harus belajar dulu Apa itu CSS .?
  

Cascading Style Sheets atau CSS adalah suatu bahasa lembar gaya yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa HTML dan XHTML.

• Suatu Css  dalam kode laman {CTRL + U } umumnya mempunyai tag <style>   diakhiri dengan tag </style> 
• Umumnya sebuah blogger mempunyai 2 style yaitu : id=page-skin-1 dan id=template-skin-1
• Buka Notepad dan coba anda praktekan CTRL + U  di Blog saya, ambil semua CSS dari tag <style>   sampai dengan tag   </style>
• Setelah itu pastekan di Notepad, Gabungkan style id=page-skin-1 dan id=template-skin-1  menjadi satu element Css (biar lebir irit..:D )    
•  Contoh awal:
  <style id='page-skin-1'>
  body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uwHAV2YM-biBPQANb0e4S5ZTWVyvGrWonhkeJDc_287macIALHnQSBFOhUgxkhq8E4684M_ZniVe0ArfpyaB8hIK6Z2yyllQMU_tPu5ZcGk1Cayjig7z5bamqgLSAzQZuWZ1PH1r_HU/s1600/nyos.jpg);background-size:100%;background-position:center center;background-attachment:fixed;background-color:#010;overflow-x:hidden;}.buat-perhatian{overflow:hidden;width:100%;height:100%;top:0;left:0;margin:0;padding:0;min-width:900px;position:fixed;}
  </style>
  
  <style id='id=template-skin-1'>
  .buat-perhatian{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;}.buat-perhatian a{color:#3b5998}.buat-perhatian .per-bawah{width:250px;margin:auto;position:fixed;top:20px;right:200px;z-index:600}.buat-perhatian .dalem-perhatian h2{text-transform:none;color:white;font-size:14px;font-weight:bold;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;background-color:rgba(109,132,180,0.7);border-color:rgba(59,89,152,0.7);border-width:1px 1px 0;border-style:solid;margin:0;padding:5px 10px;}.buat-perhatian .dalem-perhatian h2 a.ngaran-user{color:#ccc;}.buat-perhatian .dalem-perhatian .text-perhatian{color:#333;padding:10px;background-color:rgba(255,255,255,0.8);border:1px solid rgba(59,89,152,0.7);}.buat-perhatian .dalem-perhatian .bawah-pool{background-color:rgba(255,255,255,0.8);padding:8px 10px;margin-left:210px;margin-top:-2px;border:1px solid rgba(59,89,152,0.7);border-top:none;border-radius:0pt 0pt 100% 0pt;position:relative;text-align:right;display:inline-block;}.klos{float:right;z-index:5;cursor:pointer;width:15px;height:15px;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}.klos:hover{background-position:0px -32px;}.klos:active,.klos:focus{background-position:0px -48px;}
  </style>
  
  Contoh akhir :
  <style>
  body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uwHAV2YM-biBPQANb0e4S5ZTWVyvGrWonhkeJDc_287macIALHnQSBFOhUgxkhq8E4684M_ZniVe0ArfpyaB8hIK6Z2yyllQMU_tPu5ZcGk1Cayjig7z5bamqgLSAzQZuWZ1PH1r_HU/s1600/nyos.jpg);background-size:100%;background-position:center center;background-attachment:fixed;background-color:#010;overflow-x:hidden;}.buat-perhatian{overflow:hidden;width:100%;height:100%;top:0;left:0;margin:0;padding:0;min-width:900px;position:fixed;}.buat-perhatian{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;}.buat-perhatian a{color:#3b5998}.buat-perhatian .per-bawah{width:250px;margin:auto;position:fixed;top:20px;right:200px;z-index:600}.buat-perhatian .dalem-perhatian h2{text-transform:none;color:white;font-size:14px;font-weight:bold;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;background-color:rgba(109,132,180,0.7);border-color:rgba(59,89,152,0.7);border-width:1px 1px 0;border-style:solid;margin:0;padding:5px 10px;}.buat-perhatian .dalem-perhatian h2 a.ngaran-user{color:#ccc;}.buat-perhatian .dalem-perhatian .text-perhatian{color:#333;padding:10px;background-color:rgba(255,255,255,0.8);border:1px solid rgba(59,89,152,0.7);}.buat-perhatian .dalem-perhatian .bawah-pool{background-color:rgba(255,255,255,0.8);padding:8px 10px;margin-left:210px;margin-top:-2px;border:1px solid rgba(59,89,152,0.7);border-top:none;border-radius:0pt 0pt 100% 0pt;position:relative;text-align:right;display:inline-block;}.klos{float:right;z-index:5;cursor:pointer;width:15px;height:15px;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}.klos:hover{background-position:0px -32px;}.klos:active,.klos:focus{background-position:0px -48px;}
  </style>
•  Save as dengan nama saya-bisa.htm

Setelah belajar Css, kini saatnya kita belajar tag script.
Script adalah elemen animasi tambahan untuk membuat blog lebih rame dan mengagumkan.

• Umumnya Script itu harus di load dengan ajax jquery supaya dapat bekerja
• Pasang javascript ini di atas tag style di Saya-bisa.htm tadi
• <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 CTRL + U lagi di blog saya, cari dengan CTRL + F tag script dan pastekan di file mu tadi
• Setelah ketemu , pilih dan pastekan di file kamu tadi
• Contoh akhir :
  <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>
  <style>
  body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uwHAV2YM-biBPQANb0e4S5ZTWVyvGrWonhkeJDc_287macIALHnQSBFOhUgxkhq8E4684M_ZniVe0ArfpyaB8hIK6Z2yyllQMU_tPu5ZcGk1Cayjig7z5bamqgLSAzQZuWZ1PH1r_HU/s1600/nyos.jpg);background-size:100%;background-position:center center;background-attachment:fixed;background-color:#010;overflow-x:hidden;}.buat-perhatian{overflow:hidden;width:100%;height:100%;top:0;left:0;margin:0;padding:0;min-width:900px;position:fixed;}.buat-perhatian{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;}.buat-perhatian a{color:#3b5998}.buat-perhatian .per-bawah{width:250px;margin:auto;position:fixed;top:20px;right:200px;z-index:600}.buat-perhatian .dalem-perhatian h2{text-transform:none;color:white;font-size:14px;font-weight:bold;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;background-color:rgba(109,132,180,0.7);border-color:rgba(59,89,152,0.7);border-width:1px 1px 0;border-style:solid;margin:0;padding:5px 10px;}.buat-perhatian .dalem-perhatian h2 a.ngaran-user{color:#ccc;}.buat-perhatian .dalem-perhatian .text-perhatian{color:#333;padding:10px;background-color:rgba(255,255,255,0.8);border:1px solid rgba(59,89,152,0.7);}.buat-perhatian .dalem-perhatian .bawah-pool{background-color:rgba(255,255,255,0.8);padding:8px 10px;margin-left:210px;margin-top:-2px;border:1px solid rgba(59,89,152,0.7);border-top:none;border-radius:0pt 0pt 100% 0pt;position:relative;text-align:right;display:inline-block;}.klos{float:right;z-index:5;cursor:pointer;width:15px;height:15px;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}.klos:hover{background-position:0px -32px;}.klos:active,.klos:focus{background-position:0px -48px;}
  </style>
  
  <script>
  var tekan="ctrl+u";
  ${'diblog:saya'};
  fuction.Cari="di{kode,laman,saya,donk}";
  </script>
• Simpan file saya-bisa.htm tadi

Yang terakhir adalah kita harus bisa membedakan tag div yag penting dan tag div yang biasa.
Div dalam blog umumnya adalah elemen untuk memangil suatu Css dan  Script. Tanpa tag div elemen Css dan Script tidak bekerja dan kelihatan kosong.

• Coba cari tag div yang sama dengan kode Css dan script yang kamu inginkan.
• Contoh awal :
  <div class="buat-perhatian">
    <div id="dialog-perhatian" class="per-bawah">
      <div class="dalem-perhatian">
        <h2>Woooowww...!!!<div class="klos" onClick="$('#dialog-perhatian').hide('slow');"></div></h2>
        <div class="text-element">
          <div class="text-perhatian">
  Trimakasih telah belajar... <br/>
  Ternyata kamu orang pintar
          </div>
          <div class="bawah-pool">
            <span></span>
          </div>
        </div>
      </div>
    </div>

• Contoh akhir:
<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> <style type="text/css"><!-- body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uwHAV2YM-biBPQANb0e4S5ZTWVyvGrWonhkeJDc_287macIALHnQSBFOhUgxkhq8E4684M_ZniVe0ArfpyaB8hIK6Z2yyllQMU_tPu5ZcGk1Cayjig7z5bamqgLSAzQZuWZ1PH1r_HU/s1600/nyos.jpg);background-size:100%;background-position:center center;background-attachment:fixed;background-color:#010;overflow-x:hidden;}.buat-perhatian{overflow:hidden;width:100%;height:100%;top:0;left:0;margin:0;padding:0;min-width:900px;position:fixed;}.buat-perhatian{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;}.buat-perhatian a{color:#3b5998}.buat-perhatian .per-bawah{width:250px;margin:auto;position:fixed;top:20px;right:200px;z-index:600}.buat-perhatian .dalem-perhatian h2{text-transform:none;color:white;font-size:14px;font-weight:bold;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;background-color:rgba(109,132,180,0.7);border-color:rgba(59,89,152,0.7);border-width:1px 1px 0;border-style:solid;margin:0;padding:5px 10px;}.buat-perhatian .dalem-perhatian h2 a.ngaran-user{color:#ccc;}.buat-perhatian .dalem-perhatian .text-perhatian{color:#333;padding:10px;background-color:rgba(255,255,255,0.8);border:1px solid rgba(59,89,152,0.7);}.buat-perhatian .dalem-perhatian .bawah-pool{background-color:rgba(255,255,255,0.8);padding:8px 10px;margin-left:210px;margin-top:-2px;border:1px solid rgba(59,89,152,0.7);border-top:none;border-radius:0pt 0pt 100% 0pt;position:relative;text-align:right;display:inline-block;}.klos{float:right;z-index:5;cursor:pointer;width:15px;height:15px;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}.klos:hover{background-position:0px -32px;}.klos:active,.klos:focus{background-position:0px -48px;} --></style> <script> var tekan="ctrl+u"; ${'diblog:saya'}; fuction.Cari="di{kode,laman,saya,donk}"; </script> <div class="buat-perhatian"> <div id="dialog-perhatian" class="per-bawah"> <div class="dalem-perhatian"> <h2> Woooowww...!!!<div class="klos" onClick="$('#dialog-perhatian').hide('slow');"> </div> </h2> <div class="text-element"> <div class="text-perhatian"> Trimakasih telah belajar... <br/> Ternyata kamu orang pintar </div> <div class="bawah-pool"> <span></span> </div> </div> </div> </div> <!------ Pelajaran hack from santa-mars.blogspot.com ------>

Coba di buka , Setelah itu Lihat Apa yang kamu pelajari tadi....asyikan belajar ngehack... Notice!
Semua yang aku berikan adalah langkah-langkah awal caraHack Template Web / Blog dengan CTRL + U. Pelajari dan pahami makna turorial diatas. Coba anda praktekkan berulang kali di blog-blog lain. Pasti anda nanti akan jadi MR. HAck (ckakakkak)