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 .?
- 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/AVvXsEhvDnsB3Wjykt8nuLpfe6bNfVlTOdLeBjSUpJR2eb9uKG-H2xcqQ3pQidYMWwFTg9N4fU17LcTWL_AZ2MsUg-_RPVTOS7dJF3FOJ1c6xVoJonJ4IeNiT86zVWLjJ-zVP7OCcR9_z5K6xJo/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/AVvXsEhvDnsB3Wjykt8nuLpfe6bNfVlTOdLeBjSUpJR2eb9uKG-H2xcqQ3pQidYMWwFTg9N4fU17LcTWL_AZ2MsUg-_RPVTOS7dJF3FOJ1c6xVoJonJ4IeNiT86zVWLjJ-zVP7OCcR9_z5K6xJo/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
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/AVvXsEhvDnsB3Wjykt8nuLpfe6bNfVlTOdLeBjSUpJR2eb9uKG-H2xcqQ3pQidYMWwFTg9N4fU17LcTWL_AZ2MsUg-_RPVTOS7dJF3FOJ1c6xVoJonJ4IeNiT86zVWLjJ-zVP7OCcR9_z5K6xJo/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:
Posting Komentar - Back to Content
Luangkanlah Sedikit Waktu Sobat Untuk Memperindah Blog Ini Dengan Berkomentar,, (^_^)
PERINGATAN,,!!!
Bagi Sobat Yang ingin berkomentar, mohon sesuaikan dengan tema pada postingan, dan saya mohon untuk tidak mencantumkan link (URL) pada komentar karena akan saya anggap spam dan mohon maaf apabila saya hapus komentar Sobat,,!!!