Pages

Jumat, 10 Januari 2014

Mengalihkan Ctrl+U (Ctrl+U Redirect) ( no insfect element

Mengalihkan Ctrl+U (Redirect) - Ada beberapa cara untuk melihat "Source Code" sebuah web/blog, diataranya dengan klik kanan kemudian klik view source code, atau menggunakan shortcut Ctrl+U. Hal yang paling banyak digunakan adalah dengan memijit tombol Ctrl dan U berbarengan.

Yang melakukan hal ini biasanya sudah memiliki pemahaman CSS dan HTML. Biasanya sih untuk mengintip kode, baik jiplak ataupun sekedar menambah pengetahuan.

Bagi sobat yang ingin memproteksi blog/web dengan Ctrl+U, untuk meminimalisir para jiplaker silahkan simpan kode ini di atas </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://hohoketauan.blogspot.com/p/ketauan.html"});
//]]>
</script>
Ganti http://hohoketauan.blogspot.com/p/ketauan.html (baris paling bawah), dengan URL tujuan. Untuk DEMO, silahkan klik DISINI kemudian tekan Ctrl+U.

Semoga bermanfaat...

Membuat Spoiler di Blog (show)

Bagi sebagian Anda tentunya familiar dengan kata-kata spoiler, apalagi pengguna forum-forum seperti Kaskus. Spoiler berguna untuk menyembunyikan sebagian atau seluruh postingan, untuk menghemat space halaman posting. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Bagi pengguna kaskus, tentunya berbeda kode antara kaskus dan web/blog. Langsung caranya aja gan... Pastikan ketika anda menulis postingan, dalam mode HTML, copy kode dibawah ini :
<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>
Ini contoh hasilnya
Contoh spoiler:

Apabila ingin menggunakan gambar, maka ganti teks dengan kode gambar.
Contoh kode gambar :

<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHNYAzuVEKerUrh7qYU_DbodGnQ0O7jZe3bcEkmNAHSkJ834ULa2Gihxd-KnfUyu5kixxCr6lapVGnqestCTvqJiS5ML-B_g8GxMFSCayGOghIouCRvW5yvgbsNwVh0_ES2LENLXTYP8/s1600/aspire3.jpg" />
</div>

Maka kode spoiler di atas menjadi
<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></i>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHNYAzuVEKerUrh7qYU_DbodGnQ0O7jZe3bcEkmNAHSkJ834ULa2Gihxd-KnfUyu5kixxCr6lapVGnqestCTvqJiS5ML-B_g8GxMFSCayGOghIouCRvW5yvgbsNwVh0_ES2LENLXTYP8/s1600/aspire3.jpg" />
</div>
</div></div></div>
Maka hasilnya seperti ini:
Contoh spoiler gambar:

Ditunggu komennya gan....smile


Membuat Related Posts dengan Thumbnails (berita lain nya)

Pada postingan sebelumnya, saya pernah menjelaskan bagaimana membuat artikel terkait (related post), dengan point berjejer ke bawah sesuai kategori (contoh di blog ini). Sekarang saya akan menjelaskan langkah-langkah membuat Artikel Terkait, dengan thumbnails, contoh seperti gambar ini :

1. Masuk ke Dasbor > Tata Letak > Edit HTML, beri centang pada "Expand Template Widget"
2. Cari kode
</head>
Ganti dengan kode ini :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvN9NnxbNJyKoktP8dKtIzAkJ0SIfGdYzOxNcobaEyj28vAgZUieSAFvhJx3xtmakK_y7qIuy6i83dF6i69Y-DC-eHS6coQ578r-P1_U3aMb97Q1pt6skCC0mvZYUP0gMv-9_sWT5Q1Fo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
4. Setelah itu cari kode ini :
<div class='post-footer-line post-footer-line-1'>
kalau tidak ketemu, coba cari ini :
<p class='post-footer-line post-footer-line-1'> 
5. Masukan kode di bawah ini, tepat setelah kode yang kamu temukan.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End--> 
6. Save, dan lihat hasilnya.

Catatan:

1. Untuk menampilkan berapa jumlah related post cari kode ini, ganti angka sesuai yang diinginkan.
var maxresults=5; 
2. Untuk mengganti judul cari kode ini, dan rubah yang berwarna merah :
var relatedpoststitle="Related Posts"; 
3. Tampilan thumbnail postingan, yang tidak mempunyai gambar (image) seperti ini:


Untuk merubahnya, cari kode dibawah ini, dan ganti dengan url gambar rekan.
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvN9NnxbNJyKoktP8dKtIzAkJ0SIfGdYzOxNcobaEyj28vAgZUieSAFvhJx3xtmakK_y7qIuy6i83dF6i69Y-DC-eHS6coQ578r-P1_U3aMb97Q1pt6skCC0mvZYUP0gMv-9_sWT5Q1Fo/s400/noimage.png";
4. untuk merubah warna splitter (garis pembatas) ganti kode ini :
var splittercolor="#d4eaf2";
5. Untuk merubah warna background, temukan kode ini :
background-color:#d4eaf2;
Selamat mencoba.......
Enjoy blogging!

Membuat Navigasi Halaman / Page Navigation Blogger

Page Navigation atau navigasi halaman berfungsi untuk mempermudah pengunjung menjelajahi blog kita dan melihat halaman perhalaman.

Bagi pengguna Wordpress tentunya sudah tidak asing dengan page navigation. Bagi pengguna Blogger / Blogspot, harus menyisipkan kode javascript.

Langkah -langkah membuat navigasi menu :
1. Login ke Blogger
2. Masuk ke Dasbor > Rancangan > Edit HTML
3. Cari kode
]]></b:skin>
untuk memudahkan gunakan (Ctrl+F)
4. Paste kode di bawah ini diatas kode ]]></b:skin>
/* Page Navigation styles */
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }
5. Selanjutnya paste kode dibawah ini di atas kode </body>
 <!--Page Navigation Starts-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://btreaders.googlecode.com/files/pagenav.js' type='text/javascript'/>
<!--Page Navigation Ends -->
6. Simpan dan lihat hasilnya.

Untuk melihat

auto read more d More dengan Thumbnail


Auto Read More dengan thumbnail, adalah solusi atau bisa dikatakan Blogger hacks untuk menampilkan fungsi read more di blog. Bahkan script ini menampilkan thumbnail gambar, baik itu disimpan di awal, tengah atau akhir. Cotohnya kaya di blog ini :


Langsung aja langkahnya :

1. Login ke Blogger. Dasbor > Rancangan > Edit HTML, centang "Expand template widget"
2. Simpan kode dibawah ini, tepat sebelum </head>
 <script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>
Kode yang dapat di rubah :

summary_noimg = 430; (karakter yang ditampilkan tanpa gambar)
summary_img = 340; (karakter yang ditampilkan dengan gambar)
img_thumb_height = 100; (ukuran tinggi thumbnail gambar)
img_thumb_width = 120; (ukuran lebar thumbnail gambar)

3. Cari kode <data:post.body/>, dan ganti dengan kode ini :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
Kode yang betanda merah, bisa diganti sesuka anda, misalkan Read More, Baca Selengkapnya, dll

4. Save.

Gampang bukan? gimana hasilnya?

Memasang Kolom About Author (dihalaman utama)

About author atau author box atau kolom author biasanya sering kita temukan di blog berbasis Wordpress. Tutorial ini adalah bagaimana memasang author box di bawah postingan. Author box tidak ditampilkan di halaman utama blog. Sebagai contoh, di bawah postingan ini, tapi teksnya saya ganti.
Tertarik dengan hal ini? Ikuti saja langkahnya...

1. Masuk ke Dasbor > Rancangan > Edit HTML, jangan lupa centang "Expand template Widgets".
2. Simpan kode di bawah ini tepat diatas kode ]]></b:skin>
 /***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
3. Cari kode <div class='post-footer-line post-footer-line-1'>, ganti dengan kode dibawah ini :
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5Ld5-pTGYPgv1lU25Xe5Fi0uYh4Exo4bVtSdLglwjBtSeAqWsXpknN9Dob-zLO76q9tdp5L8wSsz8nE27zKf7XO5u43krLbjbSwy8wpkhF4ny7SDY0BZ-odNfG8b3PoQKIPv70AisIE/s1600/myavatar.png' width='70'/><b>Tentang Penulis</b><br/>
Tulis sesuatu tentang diri anda!<br/></p>
</div>
</b:if>
4. Ganti teks yang berwarna merah dengan url dan keterangan anda.
5. Save.

Berhasil?

Menghilangkan Judul Pada Widget HTML/Javascript Blogger

Bermula dari komentar seorang rekan, yang lumayan panjang lebar, tentang Widget HTML/Javascript tidak bisa disimpan kecuali dengan Judul. Entah kenapa hal ini terjadi, kemungkinan ada bugs di blogger. Atau mungkin Blogger merubah pengaturan javascript, entahlah.
Setelah saya coba membuat widget HTML/Javascript dan text memang hal itu terjadi, widget tidak bisa disimpan kecuali dengan menggunakan judul/title. Ada peringatan "Harap perbaiki kesalahan pada form ini" dan  "Bidang yang dipersyaratkan tidak boleh kosong".
Bagi rekan yang ingin menampilkan widget html/javascript tanpa menampilkan judul, saya akan memberikan solusi alternatif. (Sebenarnya bukan khusus widget HTM/Javascript saja, bisa untuk semua widget).

Langsung langkahnya aja sob:
  1. Buat widget HTML/Javascript, tulis judul terserah anda. misalkan TEST.
  2. Simpan.
  3. Masuk ke Dasbor > Rancangan > Edit HTML. Centang Expand Template Widget.
  4. Cari judul yang anda buat. Supaya lebih memudahkan pencarian (Ctrl+F) kemudian ketik judul.
  5. Perhatikan kode di bawah ini, (yang berwarna biru, adalah judul widget)
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='false' title='test' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

Stop dulu sob..... sekarang siap2 menghilangkan judul.., lebih tepat menyembunyikan.
1. Perhatikan kode yang berwarna merah.
2. Ganti dengan kode dibawah ini :
<h2 style='display:none'><data:title/></h2>
3. Simpan dan lihat hasilnya.

Pada preview di dasbor judul tetap ada, tapi di blog akan disembunyikan. Trik di atas hanya salahsatu cara saja, masih banyak cara yang lain. Kalau saya tulis semua takut kepanjangan...
Gimana hasilnya sob? udah coba?

UPDATE

Karena masih ada yang tampil, seperti komentar 'Kyutaroo'. Tips dibawah ini untuk menghilangkan dan bukan lagi menyembunyikan.

1. Perhatikan lagi kode berikut :
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='false' title='test' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

2. Hapus kode yang berwarna merah.
3. Simpan.

So, gimana? masih tampil?