Cara Membuat Halaman Demo CharCode

Saturday, December 1, 2012

Tutorial ini Bertujuan Untuk Iframe Sebuah Web/Blog, Contohnya Klik Disini
Sebenarnya Kodenya Masih Dalam Tahap Penyempurnaan sih
Kode Ini Hasil Kombinasi Dari CharCode Ide Gue Network & Demo Zoom Template

Buat Halaman Baru
Laman > Laman Baru > Laman Kosong


Di Isi Terserah kamu dan publikasikan




Lihat halaman yg sudah di buat tadi, salin urlnya
pindahkan ke notepad atau kemana ajalah (yg penting gk ilang)



Kemudian Ke Bagian Template > Edit HTML
Ntar Muncul Popup Trus Klik "Lanjutkan"



Salin Kode Dibawah Ini Dan Tempel Di Atas Kode </head>

<b:if cond='data:blog.url == &quot;Url Halaman Yg Sudah Dibuat Tadi&quot;'>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='http://haidarax.xtgem.com/Bingkai.js'></script>
<style type='text/css'>
a{outline-style:none; color:#0696cb; font-size:11px;text-decoration:none;}
#navbar-iframe{display:none}
html, #iframe{overflow: hidden;}
/* iframe */
#iframe, iframe{position: absolute; width: 100%; height: 100%; border:none;}
#iframe{margin-top:31px;}
/*-- DROPDOWN MENU --*/
.likefb, .google_plus, .twitter{float:left;margin:0 3px 0 0 !important;padding:4px 0 0 1px; }
.likefb {width:90px !important;}
.google_plus {width:63px !important;}
.twitter {width:95px !important;}
#toolbar {position:fixed; top:0;left:0; width: 100%; height:30px !important; margin: 0; padding:0; z-index:50}
#nav-menu-label{float:right; margin:0px; padding:0px; }
.text-style{background:url(http://1.bp.blogspot.com/-VaJX0ShxH6c/TeUGQ0IGOWI/AAAAAAAAJGo/Qw7sIjc5MrQ/s200/bc_separator.png) no-repeat;color:#333; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:0; border-left:0px solid #CDCDCD; padding:8px 4px 8px 14px; height:14px }
.text-style:hover{color:#FF6600; cursor:pointer;height:14px}
/*-- (Menu Nav LABEL) --*/
#nav-menu-label{float:right; margin:0px; padding:0px}
#nav-menu-label ul{float:left; list-style:none; margin:0px; padding:0px}
#nav-menu-label li{list-style:none; margin:0px; padding:0px}
#nav-menu-label li a, #nav-menu-label li a:link, #nav-menu-label li a:visited{color:#333; display:block; font-size:12px; font-family:arial,verdana,georgia; font-weight:normal; text-transform:normal; margin:0px; background:url(http://1.bp.blogspot.com/-VaJX0ShxH6c/TeUGQ0IGOWI/AAAAAAAAJGo/Qw7sIjc5MrQ/s200/bc_separator.png) no-repeat ; padding:8px 3px 6px 14px}
#nav-menu-label li a:hover, #nav-menu-label li a:active{color:#FF6600; margin:0px; padding:8px 3px 6px 14px; text-decoration:none}
#nav-menu-label li li a, #nav-menu-label li li a:link, #nav-menu-label li li a:visited{background:#f5f5f5; width:90px; color:#333; font-size:11px; font-family: arial,Times New Roman; font-weight:normal; text-transform:normal; float:none; margin:0px; padding:4px 10px 4px 10px; border-top:1px solid #fff; border-bottom:1px solid #CDCDCD;border-left:1px solid #CDCDCD; border-right:1px solid #CDCDCD}
#nav-menu-label li li a:hover, #nav-menu-label li li a:active{background:#fff; color:#FF6600; padding:4px 10px 4px 10px}
#nav-menu-label li{float:left; padding:0px}
#nav-menu-label li ul{z-index:999; position:absolute; left:-999em; height:auto; width:100px; margin:0px; padding:0px}
#nav-menu-label li li{}
#nav-menu-label li ul a{width:100px}
#nav-menu-label li ul a:hover, #nav-menu-label li ul a:active{}
#nav-menu-label li ul ul{margin:-31px 0 0 100px}
#nav-menu-label li:hover ul ul, #nav-menu-label li:hover ul ul ul, #nav-menu-label li.sfhover ul ul, #nav-menu-label li.sfhover ul ul ul{left:-999em}
#nav-menu-label li:hover ul, #nav-menu-label li li:hover ul, #nav-menu-label li li li:hover ul, #nav-menu-label li.sfhover ul, #nav-menu-label li li.sfhover ul, #nav-menu-label li li li.sfhover ul{left:auto}
#nav-menu-label li:hover, #nav-menu-label li.sfhover{position:static}
/* -- SEARCR BOX -- */
#src-bar{border:1px solid #C9D7F1;  height:18px; width:140px; padding:0;  background:transparent;  }
#src-bar input{border:0;  background:transparent;  color:#000}
#s-bar{font-size:11px; width:140px; padding-left:4px;  margin:0;  background:transparent}
#tsrc-bar #src-bar{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background:transparent;border:1px solid #CDCDCD;}
#tsrc-bar #s-bar{width:140px}
#mta_bar{background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x;      overflow: hidden; padding-top:0px; width:100%; height:30px;display:block; border-bottom:1px solid #cdcdcd}
#mta_bar .bar_logo{float:left;  padding-left:8px; text-align:left; font-family:Arial; font-size:15px; font-weight:bold; font-style:normal; color:#333; width:148px; padding-top:7px}
#mta_bar .bar_logo a{background:url(http://haidarax.blogspot.com/favicon.ico) 0px no-repeat; background-size:15px 15px; text-decoration:none; color:#333; padding-left:21px; }
#mta_bar .bar_logo a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_search{float:left;  padding-top:5px; margin:0px; text-align:left; font-family:tahoma; font-weight:bold; font-style:normal; color:#333; width:140px}
#mta_bar .bar_search a{text-decoration:none; color:#333; padding-left:10px; padding:0}
#mta_bar .bar_search a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar-menu-label{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#333; width:520px; padding:0px}
#mta_bar .bar-menu-label a{text-decoration:none}
#mta_bar .bar-twitter{float:left;  text-align:left; padding-top:5px; padding-left:14px; width:65px}
#mta_bar .bar_hide{float:right;  text-align:left; font-family:arial; font-size:13px; font-weight:bold; font-style:normal; color:#333; padding:7px 0 0 5px; width:20px}
#mta_bar .bar_hide a{background:url(http://www.google.com/uds/css/v2/clear.png)  no-repeat; text-decoration:none; color:#333; padding-left:20px; }
#mta_bar .bar_hide a:hover{text-decoration:underline; color:#FF6600}
#mta_bar .bar_fb {float:left; width:70px;padding-top:6px; padding-left:2px; margin:0px;}
</style>
 </b:if>

Kedua Salin Kode Dibawah Ini Dan Tempel Di Bawah Kode <body>
<b:if cond='data:blog.url != &quot;Url Halaman Yg Sudah Dibuat Tadi&quot;'>

Ketiga Salin Kode Dibawah Ini Dan Tempel Di Atas Kode </body>

</b:if>
<b:if cond='data:blog.url == &quot;Url Halaman Yg Sudah Dibuat Tadi&quot;'>
<div id='toolbar'>
<div id='mta_bar'>
<div class='mta_bar bar_logo'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
<div class='mta_bar bar_search'>
<div id='tsrc-bar'>
<div id='src-bar'>
<form action='http://www.jurukunci.net/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-bar' name='s' onblur='if (this.value == "") {this.value = "Cari..";}' onfocus='if (this.value == "Cari..") {this.value = ""}' type='text' value='Cari..'/>
</form>
</div>
</div>
</div>
<div class=' mta_bar bar-twitter'>
<a class='twitter-follow-button' data-lang='id' data-show-count='false' href='https://twitter.com/Haidarax'>Ikuti @Haidarax</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class='mta_bar bar_hide'>
<a id='tkp'></a>
</div>
<div class='mta_bar bar-menu-label'>
<div id='NavbarMenuleft'>
<ul id='nav-menu-label'>
<li>
<div class='text-style'>Alat&#9660;</div>
<ul>
<li><a href='http://jsbeautifier.org/' rel='nofollow' target='_blank' title='Javascript Beautifier'>JS beautifier</a></li>
<li><a href='http://www.digitalcoding.com/tools/html-beautifier.html' rel='nofollow' target='_blank' title='HTML Beautifier'>HTML Beautifier</a></li>
<li><a href='http://www.codebeautifier.com/' rel='nofollow' target='_blank' title='CSS Beautifier'>CSS Beautifier</a></li>
<li><a href='http://closure-compiler.appspot.com/home' rel='nofollow' target='_blank' title='Closure Compiler'>JS Compressor</a></li>
<li><a href='http://www.cssdrive.com/index.php/main/csscompressor/' rel='nofollow' target='_blank' title='CSS Compressor'>CSS Compressor</a></li>
<li><a href='http://www.textfixer.com/html/compress-html-compression.php' rel='nofollow' target='_blank' title='HTML Compressor'>HTML Compressor</a></li>
</ul>
</li>
<li>
<div class='text-style'>Hubungi Saya &#9660;</div>
<ul>
<li><a href='http://www.kaskus.co.id/profile/4809577' rel='nofollow' target='_blank'>Kaskus</a></li>
<li><a href='http://light.mindtalk.com/u/Haidarax' rel='nofollow' target='_blank'>Mindtalk</a></li>
<li><a href='https://twitter.com/haidarax' rel='nofollow' target='_blank'>Twitter </a></li>
<li><a href='https://plus.google.com/u/0/115864296179320952044' rel='nofollow' target='_blank'>Google +</a></li>
<li><a href='https://www.facebook.com/haidarax' rel='nofollow' target='_blank'>Facebook</a></li>
</ul>
</li>
<li>
<div class='text-style'>Juru Kunci &#9660;</div>
<ul>
<li><a href='http://www.jurukunci.net/search/label/gaya%20hidup'>Gaya Hidup</a></li>
<li><a href='http://www.jurukunci.net/search/label/olah%20raga'>Olah Raga</a></li>
<li><a href='http://www.jurukunci.net/search/label/Misteri'>Misteri</a></li>
<li><a href='http://www.jurukunci.net/search/label/wanita'>Wanita</a></li>
<li><a href='http://www.jurukunci.net/search/label/islam'>Islam</a></li>
</ul>
</li>
<li>
<div class='text-style'>Lainnya &#9660;</div>
<ul>
<li><a href='http://jurukunci4.blogspot.com/p/tkp.html'>Feed Aggregator</a></li>
<li><a href='http://www.jurukunci.net/p/antah-berantah.html'>Random Post</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div style='clear: both;'></div>
<div id='iframe'><iframe src=''></iframe></div>
</b:if>

Edit Menu Toolbar di atas sesuai keinginan
Simpan deh, sudah selesai halaman demonya
eitsssss, tapi tunggu dulu
masih ada tahap berikutnya, yaitu mengalihkan link blog ke halaman demonya
Masih Dibagian Edit Html, Cari kode <body> Lalu Ganti Dengan kode di bawah ini

<body onmousedown='CharCode();'>
<script type='text/javascript'>
//<![CDATA[
   var bingkai= new Array("Url Halaman Yg Sudah Dibuat Tadi");
    var j = 0;
function CharCode() {
    for (var i = 0; i < document.links.length; i++) {
        var hrefer = document.links[i].href;
        if(hrefer.match("namablogkamu.blogspot.com|haidarax.blogspot.com|blogger.com")) {
            document.links[i].href = document.links[i].href;
        }else{
            var char, code, diff=4, temp="";
            var text = document.links[i].href;
            for (var k=0; k<text.length; k++) {
                char = text.charCodeAt(k);
                code=char+diff;
                temp += String.fromCharCode(code);
            }
            if(j>=bingkai.length){j = 0;}
            document.links[i].href = bingkai[j] +'?'+ escape(temp) +'CyxqcwsyvgiAlemheve|2fpskwtsx2gsq';
            j++;
        }
    }
}
    //]]>
</script>
itu yg warna biru agar tidak terkena efek dari Charcode
Kamu bisa Menambah/mengurangi alamat2 yg tidak ingin terkena efek charcode, jgn lupa hapus/tambah vertical bar (|) untuk pemisahnya

terus yg haidarax.blogspot.com teserah kamu mau dihilangkan atau tidak, tapi kalau di hilangkan tombol close pada toolbar juga gk akan berfungsi



Simpan dan lihat hasilnya

19 komentar:

  1. kodenya panjang >.<

    tapi makasih mas udah dibikinin, perlu sedikit penyesuaian lagi nih :D

    ReplyDelete
  2. yoi, selamat mencoba dan semoga berhasil mas :D

    ReplyDelete
  3. wha ribet bgt gan.. ini bukannya kyak di zoomtemplate ya gan?

    ReplyDelete
    Replies
    1. yap, memang dari zoom template tapi diedit pake tambahan Charcode

      kalau di zoom template
      http://demo.zoomtemplate.com/?dm=http://haidarax.blogspot.com/

      tapi kalau yg pake charcode
      http://haidarax.blogspot.com/p/bingkai.html?lxxt>33lemheve|2fpskwtsx2gsq

      Delete
    2. kok yg di zoom template lebih simple gan... gimana itu caranya?

      Delete
  4. yang gak masuk ke html ada gak ya :D


    blognya mistery nih horor gw suka ^_^
    .

    ReplyDelete
    Replies
    1. ya harus masuk ke HTML dong :D
      horor gmn mbak ?

      Delete
  5. Replies
    1. ciyus ?
      miyapah ?
      hahaha

      makasih loh pujiannya mas :D
      aku jadi malu nih

      Delete
  6. bagus nihh . bookmark dulu ya :D

    ReplyDelete
  7. Gak jelas .......................

    ReplyDelete
    Replies
    1. gk jelasnya bagian mana ?
      kalau bisa komentarnya jgn pake Anonymous, biar lebih enak :)

      Delete
  8. kunjungan malam bro.
    cuma saran kalu mu berbagi Tutorial yang pasti bisa aja bro
    kasian temen2 yang mau buat kesushan heheh

    ReplyDelete