Membuat Social Share Button Responsive di Bawah Posting Blog

iMbledoz – Kali ini saya akan berikan tips bagaimana cara membuat tombol sosia share responsive dibawah posting blog. Saya tidak akan jelaskan panjang lebar soal fungsi dari tombol ini karena saya kira semua blooger baik pemula atau pro sudah paham akan fungsinya.

Membuat Social Share Button Responsive di Bawah Posting Blog

1. Silahkan masuk ke akun Blogger Anda

2. Masuk ke Dashboard >> Template >> Edit HTML

3. copy kode CSS dibawah ini sebelum kode </style>

/* CSS Share Button */

.sharepost li{width:19%;padding:0;list-style:none;}

.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}

.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}

.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}

.sharepost li .twitter{background-color:#55acee;}

.sharepost li .facebook{background-color:#3b5998;}

.sharepost li .gplus{background-color:#dd4b39;}

.sharepost li .pinterest{background-color:#cc2127;}

.sharepost li .linkedin{background-color:#0976b4;}

.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,

.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}

.sharepost li{float:left;margin-right:1.2%}

.sharepost li:last-child{margin-right:0}

.sharepost li .fa:before{margin-right:5px}

4. Copy kode dibawah ini diatas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Copy kode dibawah ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='sharepost'>

<ul>

<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

 <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

<li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>

<li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

<li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

</ul>

</div>

</b:if>

6. Kemudian Simpan Template…… selesai

Semoga bermanfaat

Membuat Widget Email Subcribe Keren dan Responsive di Blog

iMledoz – Kali ini saya ingin share bagaimana Cara Membuat Widget Email Subscription Responsive di Blogger, kali ini widget email subscribe yang akan saya bagikan telah dimodifikasi agar tampak lebih profesional.

Anda dapat menyesuaikan kode sesuai yang Anda inginkan, jika Anda memiliki saran atau pertanyaan tentang tutorial di atas Anda dapat berbagi di dalamkotak komentar di bagian bawah blog ini.

Langsung saja ke topik “Cara Membuat Widget Email Subscription Responsive di Blog “

Petama cari kode </head> kemudian letakkan kode dibawah ini diatas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Disini saya akan memberikan 2 model widget Email Subscribe untuk Blogger yang kesemuanya tentu Responsive.

Model # 1

1. Masuk ke akun blogger Anda,  Dashboard  >> Template >> Edit html

2. Mencari kode berikut ]]></ b:skin>

3. Setelah ketemu, letakkan kode dibawah ini, di atas kode ]]></ b:skin>

#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}

.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}

#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}

.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}

.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}

.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}

.follow-subscribe-social ul li:last-child{margin:0}

.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}

.follow-subscribe-social ul li a:hover{color:#fff}

form.subscribe{margin-top:-7px}

form.subscribe input{display:block;width:100%}

.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}

.subscribe-email:focus{outline:0}

form.subscribe .placeholder{color:#cacaca}

form.subscribe input:-ms-input-placeholder{color:#cacaca}

form.subscribe input::-webkit-input-placeholder{color:#cacaca}

form.subscribe input:-moz-placeholder{color:#fafafa}

form.subscribe input::-moz-placeholder{color:#fafafa}

.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}

.subscribe-button:hover{background-color:#f1d640}

.subscribe-button:focus{outline:0}

.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

4. Kemudian Simpan Template

5. Silahkan masuk ke menu Layout (tata letak) >> Tambah Gadget ( Add Gadget ) >> HTML/Javascript

6.Letakkan kode dibawah ini di dalam kotak HTML yang disediakan

<div id="subscribebox">

<div class="follow-subscribe-social">

<ul>

<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>

</ul>

</div>

<p>Subscribe to my Newsletter</p>

<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input name='uri' type='hidden' value='ID FEEDBURNER-ANDA'/>

<input name='loc' type='hidden' value='en_US'/>

<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>

<input class="subscribe-button" type="submit" value="Subscribe" />

</form>

</div>

<div class="creadit">

<a href="http://bloggingpasuruan.blogspot.co.id" rel="dofollow" target="_blank"> Get This Widget</a></div>

7. Simpan dan lihat hasilnya…….

Berikutnya Widget Subscribe Model # 2

1. Masuk ke akun blogger Anda,  Dashboard >> Template >> Edit html

2. Mencari kode berikut ]]></ b:skin>

3. Setelah ketemu, letakkan kode dibawah ini, di atas kode ]]></ b:skin>

#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}

#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}

#subscribe-box .emailfield {padding:0px 20px 10px;}

#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}

#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}

#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}

#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}

#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}

.creadit a{color: #A7A6A6; float: right; font-size: 8px

4. Kemudian Simpan Template

5. Silahkan masuk ke menu Layout (tata letak) >> Tambah Gadget ( Add Gadget ) >> HTML/Javascript

6.Letakkan kode dibawah ini di dalam kotak HTML yang disediakan

<div id="subscribe-box">

<center>

Subscribe for our all latest news and updates</center>

<div class="emailfield">

<form action="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />

<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />

<input name="uri" type="hidden" value="ID FEEDBURNER-ANDA" />

<input name="loc" type="hidden" value="en_US" />

<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>

</div>

</div>

<div class="creadit">

<a href="http://bloggingpasuruan.blogspot.co.id/" rel="dofollow" target="_blank"> Get This Widget</a></div>

7. Simpan dan lihat hasilnya…..

Anda bisa langsung cek dari HP android anda, apakah widget diatas benar-benar responsive atau tidak…… 100% Responsive dech !

Semoga bermanfaat…..

Membuat Kode Anti Ctrl+U dengan Halaman Peringatan

BLOGGINGPASURUAN. Sebelumnya saya telang membahas,baca juga “Cara Memasang Script Ctrl+U dengan EfekRedirect URL” dan kali ini saya akan memberikan tutorial “ Cara Memasang Script Anti URL dengan Halaman Peringatan”. Tutorial ini mirip dengan pembuatan ERROR PAGE atau halaman error 404, namun kali ini saya modifikasi sedemikian hingga dapat digunakan pada script Anti Ctrl+U.

Saya jelaskan sedikit bagaimana cara kerja script Anti Ctrl+u dengan Halaman Peringatan. Ketika pengunjung atau pengguna ingin melakukan Ctrl+u dengan tujuan yang tidak jelas atau tujuan plagia/copy paste kode template Anda, maka akan langsung diarahkan pada halaman peringatan yang kita buat….jadi script tidak akan muncul namun akan digantikan oleh halaman peringatan.... seperti gambar diatas !

Atau lihat DEMO

setelah Anda masuk di halaman DEMO silahkan coba tekan tombol Ctrl+U 

Langsung aja disimak cara pemasangan kodenya seperti dibawah ini :

Penjelasan dibawah ini adalah cara membuat Halaman Peringatan terlebih dahulu,Caranya seperti dibawah ini :

1. Log in Blogger

2. Klik Laman, Laman baru

3. Copy kode di bawah lalu paste di bagian HTML laman, bukan Compose

<b:if cond="data:blog.pageType == &quot;error_page&quot;">
<style>
#error-halaman { position: fixed; z-index: +1000000; top: 0px; left: 0px; width: 100%; height: 100%; background: #d7d7d7; color: #555555; text-align: center; text-shadow: 0px 2px 0px #ccc; font-family: Open Sans, sans-serif; font-size: 14px; color: #3c3c3c; background: #eee url(https://3.bp.blogspot.com/PLFnauscpKE/Vy17FSKOS_I/AAAAAAAAC9s/JLrFdyatq9UTD1GMSvKZXsdm3M0iT7XbgCLcB/s1600/GB2.jpg) repeat top left; } @keyframes go3d { 0% { text-shadow: 0px 0px 2px #686868; } 100% { /***** 3D TRANSFORMATION *****/ text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3); }; } @-webkit-keyframes go3d { 0% { text-shadow: 0px 0px 2px #686868; } 100% { /***** 3D TRANSFORMATION *****/ text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3); }; } @-moz-keyframes go3d { 0% { text-shadow: 0px 0px 2px #686868; } 100% { /***** 3D TRANSFORMATION *****/ text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3); }; } @-ms-keyframes go3d { 0% { text-shadow: 0px 0px 2px #686868; } 100% { /***** 3D TRANSFORMATION *****/ text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3); }; } @-o-keyframes go3d { 0% { text-shadow: 0px 0px 2px #686868; } 100% { /***** 3D TRANSFORMATION *****/ text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3); }; } .go3d { -webkit-animation: go3d 2s; -moz-animation: go3d 2s; -ms-animation: go3d 2s; -o-animation: go3d 2s; animation: go3d 2s; } .comingcontainer { width: 100%; } .checkbacksoon { width: auto; height: 100%; padding-top: 10%; } .checkbacksoon p { text-shadow: none; font-weight: bold; color: #222; font-family: Arimo, sans-serif; display: block; margin: auto; margin-top: 10px; text-align: center;} .checkbacksoon p span { color: #fff; font-family: Arimo, cursive; font-size: 200px; line-height: 220px; letter-spacing: 1px; cursor: pointer; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -ms-transition: all 0.1s linear; transition: all 0.1s linear; /***** 3D TRANSFORMATION *****/ text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3); } .checkbacksoon p span:hover { text-shadow: 0px 0px 2px #686868; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -ms-transition: all 0.1s linear; transition: all 0.1s linear; } .error-bro { font-size: 16px; width: 700px; max-width: 90%; line-height: 2em; letter-spacing: 1px; } .error-bro a { text-decoration: none; color: #000; } .error-bro a:hover { color: #FF7F00; } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) { } /* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) { } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) { .checkbacksoon p span { font-size: 150px; line-height: 160px; }; } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) { .checkbacksoon p span { font-size: 150px; line-height: 160px; }; } .tombol { display: inline-block; text-decoration: none; outline: 0; cursor: pointer; font: 700 12px/1em HelveticaNeue,Arial,sans-serif; padding: 8px 11px; color: #555; text-shadow: 0 1px 0 #fff; background: #f5f5f5; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#f0f0f0)); background: -moz-linear-gradient(top,#f9f9f9,#f0f0f0); border: 1px solid #dedede; border-color: #dedede #d8d8d8 #d3d3d3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; } .tombol:focus,.tombol:hover { color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#e9e9e9)); background: -moz-linear-gradient(top,#f9f9f9,#e9e9e9); border-color: #ccc; -webkit-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #e0e0e0,inset 0 1px 0 #fbfbfb; } .tombol:active { position: relative; top: 1px; color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#eaeaea),to(#f4f4f4)); background: -moz-linear-gradient(top,#eaeaea,#f4f4f4); border-color: #c6c6c6; -webkit-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; -moz-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; } .tombol.bulat { padding: 8px 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } button.tombol,input.tombol { *width: auto; *overflow: visible; } .tombol img { border: none; vertical-align: bottom; } .tombol.kecil { padding: 5px 11px; font-size: 11px; font-weight: 400; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tombol.kecil.bulat { -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; } .tombol.besar { padding: 12px 15px; font-size: 20px; font-weight: 400; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tombol.besar.bulat { padding: 12px 22px; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px }
</style>
<link href="https://fonts.googleapis.com/css?family=Changa+One" rel="stylesheet" type="text/css"></link>
<link href="https://fonts.googleapis.com/css?family=Arimo:400" rel="stylesheet" type="text/css"></link></b:if><br />
<div id="error-page">
<!-- Halaman Error --><!-- #Ctrl _ U --><br />
<div id="error-halaman">
<div class="comingcontainer">
<div class="checkbacksoon">
<span class="go3d">Ctrl</span><span class="go3d">+</span><span class="go3d">U</span><span class="go3d">!</span><br />
<div class="error-bro">
Peringatan ! Ctrl + U tidak tersedia!
Dilarang COPY SCRIPT didalam template ini.
Silahkan kembali ke....<a class="tombol" href="https://www.blogger.com/" style="box-shadow: none; color: #444444;">Halaman Utama</a></div>
</div>
</div>
</div>
</div>

4. Kemudian Simpan Laman Anda

Catatan: Anda Bisa mencoba untuk preview halaman… ingat cuma preview halaman saja, belum pada tahap redirect URL ke template Anda.

Langkah Menbuat Redirect URL ( Mengalihkan URL) ke halaman Anda Sendiri

1. Masuk ke akun Blogger

2. Masuk ke Template >> Edit HTML

3. Cari kode </body> lalu letakkan kode dibawah ini, diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="http://imbledoz.blogspot.co.id/p/blog-page.html"});
//]]>
</script>

4. Kemudian Simpan Template

Catatan: ganti yang saya warnai kuning dengan URL laman yang anda buat tadi pada langkah pertama ( paling awal) 

Selesai dan lihat hasilnya……

Cara testnya : Silahkan buka halaman Blog Anda lalu, coba lakukan Ctrl+U

Semoga bermanfaat…

Cara Memasang Kode Anti Ctrl-U atau ( Disable) Ctrl-U

Salam Blogger, Artikel kali ini adalah tentang “ Cara Agar Blog Anda tidak Bisa di Ctrl+U oleh Pengunjung Blog disertai fungsi redirect ( mengalihkan URL ) “ intinya kita menghindari pengunjung untuk melakukan aktifitas pencurian kode (script) template Blog Anda, disini saya menggunakan Java script untuk me-non aktifkan penggunaan tombol Ctrl + U Dengan Efek Redirect ( Pengalihkan URL)

Saya akan jelaskan sedikit tentang fungsi atau effect redirect link ( mengalihkan URL ), script yang nanti saya bagikan dibawah berfungsi ketika seorang pengunjung melakukan Ctrl+U atau Ctrl+S untuk melihat isi script dari template blog Anda,jadi fungsi dari script akan langsung mengalihkannya ke halaman utama (home) dari blog Anda tanpa menampilkan kode template secara keseluruhan, artinya pengunjung tidak dapat melihat apapun isi kode (script ) template Anda.

Langsung saja yang ingin tau script DISABLE Ctrl+u dengan efek redirect silahkan lihat tutorial cara pemasangannya di blog seperti dibawah ini :

1. Masuk ke akun Blogger Anda

2. Klik Template >> Edit HTML

3. Cari kode </body>

4. Copy kode dibawah ini, lalu Paste diatas kode </body>

<script type='text/javascript'>

//<![CDATA[

shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="https://bloggingpasuruan.blogspot.com"});

//]]>

</script>

5. Klik Simpan Template

Catatan : Ganti yang saya tandai warna kuning dengan URL Blog Anda

Dengan menggunakan script DISABLE Ctrl+U diatas setidaknya akan meminimalisir pencurian kode dari blog Anda.

Semoga Bermanfaat...