Pages

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Rabu, 06 Februari 2013

Cara Membuat Recent Post Berjalan

Assalamualaikum Wr Wb.
Selamat Malam..!!!

Setelah lama tidak posting dikarenakan kesibikan dunia nyata rasanya kangen banget.
Alhamdulillah ada sedikit waktu senjang jadi saya sempatkan buat berbagi cara membuat recent post berjalan. ya meskipun sudah banyak artikel ini di mbah google namun tidak ada salahnya saya memposting ulang..
silahkan klik tata letak => tambah gadget ==> pilih HTML/java sript

selanjutnya sobat copas script di bawah ini

<script src="http://kucopas.googlecode.com/files/RecentPostThumnailBergerak.js" type="text/javascript"></script>
<style type="text/css" media="screen">

<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = " http://agungnewbie.blogspot.com/ ";
limitspy=5
intervalspy=5000
</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>



Keterangan

    Ganti http://agungnewbie.blogspot.com/ dengan URL blog sobat. Pastikan ada tanda slash ( / ) di belakang url blog.

    text = "Reply(s)" adalah teks jumlah komentar, ganti Reply(s) sesuai dengan keinginan sobat, misalnya: komentar, comment(s), dan lain sebagainya.

    boxwidth = 300 adalah ukuran Lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog sobat.

    numposts = 10; adalah Jumlah posting terbaru yang akan muncul di blog sobat, ganti nilainya sesuai keinginan dengan keinginan sobat.

    limitspy=5 adalah Jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai dengan keinginan sobat.

    intervalspy=5000 adalah kecepatan scroll, spy atau slide dalam milisecond (ms), Silahkan sobat ganti nilainya untuk mengatur kecepatannya. Tambah untuk lambat, Kurang untuk cepat.

jika ada problem silahkan layangkan komentar anda.
sekian dulu posting kali ini semoga bermanfaat..

Assalamualaikum Wr Wb.

Cara Membuat Recent Post Berjalan

Assalamualaikum Wr Wb.
Selamat Malam..!!!

Setelah lama tidak posting dikarenakan kesibikan dunia nyata rasanya kangen banget.
Alhamdulillah ada sedikit waktu senjang jadi saya sempatkan buat berbagi cara membuat recent post berjalan. ya meskipun sudah banyak artikel ini di mbah google namun tidak ada salahnya saya memposting ulang..
silahkan klik tata letak => tambah gadget ==> pilih HTML/java sript

selanjutnya sobat copas script di bawah ini

<script src="http://kucopas.googlecode.com/files/RecentPostThumnailBergerak.js" type="text/javascript"></script>
<style type="text/css" media="screen">

<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = " http://agungnewbie.blogspot.com/ ";
limitspy=5
intervalspy=5000
</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>



Keterangan

    Ganti http://agungnewbie.blogspot.com/ dengan URL blog sobat. Pastikan ada tanda slash ( / ) di belakang url blog.

    text = "Reply(s)" adalah teks jumlah komentar, ganti Reply(s) sesuai dengan keinginan sobat, misalnya: komentar, comment(s), dan lain sebagainya.

    boxwidth = 300 adalah ukuran Lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog sobat.

    numposts = 10; adalah Jumlah posting terbaru yang akan muncul di blog sobat, ganti nilainya sesuai keinginan dengan keinginan sobat.

    limitspy=5 adalah Jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai dengan keinginan sobat.

    intervalspy=5000 adalah kecepatan scroll, spy atau slide dalam milisecond (ms), Silahkan sobat ganti nilainya untuk mengatur kecepatannya. Tambah untuk lambat, Kurang untuk cepat.

jika ada problem silahkan layangkan komentar anda.
sekian dulu posting kali ini semoga bermanfaat..

Assalamualaikum Wr Wb.

Senin, 28 Januari 2013

Cara membuat Breaking News Di Blogger

Salam sejahtera untuk Sobat blogger semua. Setelah sekian lama saya tidak update artikel kali ini saya akan share kepada Sobat semua bagaimana cara membuat breaking news di blog. Breaking news pada blog berfungsi untuk memperindah tampilan, terlihat lebih profesional, dan bisa jadi menambah link in yang akan berefek baik pada nilai SEO blog Sobat. Mungkin ada diantara Sobat blogger yang belum pernah liat breaking news itu kaya apa, silahkan lihat screenshootnya.

Breaking News

Langkah-Langkah Cara Membuat Breaking News di Blog :

  1. Login ke akun blog Sobat, kemudian masuk ke Dashboard
  2. Setelah itu masuk ke menu Template
  3. Klik Edit HTML, kemudian klik Lanjutkan, dan centang (checkclist) Expand Widget Template.
  4. Cari kode ]]></b:skin> (gunakan kombinasi tombol Ctrl + F untuk mempermudah pencarian)
  5. Setelah itu, salin kode dibawah ini tepat diatas kode ]]></b:skin> tersebut
    .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Ljik6z6VeK4tb2fPVek7NKg5fieHW3J4JMGNWNBi0mcjz-5A_6iN-Sx90D_E0KTeGI1AtbSenReCyltveolpaLU0VLBKzagm0vPuRaW5mevV6iSOxG0jqqrhI7lMgwGU3QFkNHCsUrI/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
    .news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
    .news a:link, .news a:visited{color:#fff;text-decoration:none;}
    .news a:hover {color:#ddd;text-decoration:underline;}
  6. Setelah itu cari lagi kode </head>
  7. Jika sudah ketemu, salin kode dibawah ini tepat diatas kode </head> tersebut
    <script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
    <script type='text/javascript'>
    //<![CDATA[
    var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

    var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
    //]]>
    </script>
    <style type='text/css'>
    .titlefield{ /*CSS for RSS title link in general*/
    text-decoration: none;}
    .labelfield{ /*CSS for label field in general*/
    color:#aaa;font-size: 100%;}
    .datefield{ /*CSS for date field in general*/
    color:#aaa;font:normal 14px Arial;text-transform:none;}
    #example1{ /*Demo 1 main container*/
    width: 780px;
    height: 14px;
    border: 0px solid #aaa;
    padding: 0px;
    font:bold 16px Arial;
    text-transform:none;
    text-align:left;
    background-color:transparent;}
    code{ /*CSS for insructions*/
    color: #fff;}
    #example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
    #example1 a:hover {color:#C8D3F2;text-decoration:none;}
    </style>
  8. Kemudian cari kode yang biasa dipakai untuk menu navigasi seperti kode dibawah ini
    <div class='menu horizontal'>
    ...........................................
    ...........................................
    </div>
  9. Jika sudah ketemu kode navigasi blog Sobat (atau kalaupun tidak ada Sobat bisa cari kode </head>) kemudian letakan kode dibawah ini tepat dibawah kode tersebut
    <div class='newspic'>

    <div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
    <script type='text/javascript'>
    var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
    cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://arcendocty.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
    cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
    cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
    cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
    cssfeed.entries_per_page(1)
    cssfeed.init()
    </script>
    </div>
    <div style='clear:both;'/>
    </div>
  10. Ganti tulisan yang berwarna merah dengan alamat (url) blog Sobat, kemudian simpan template blog Sobat
Nah, itu dia cara membuat breaking news di blog yang dapat saya sampaikan pada Sobat. Sekian saja postingan saya kali ini, mohon maaf apabila masih banyak kekurangannya.

Rabu, 23 Januari 2013

Cara Mengganti Posting Lama, Posting Baru dan Beranda Pada Blog

Cara Mengganti Posting Lama, Posting Baru dan Beranda Pada BlogKalau akun Google kita menggunakan bahasa Inggris, maka di bawah postingan kita, kita akan melihat link yang bertuliskan Newer Posts, Older Posts dan Home. Kalau kita setting akun Google kita menggunakan bahasa Indonesia, sudah pasti dibawah postingan kita akan terdapat tiga link yang bertuliskan Posting Lama,Posting Baru Dan Beranda. Link tersebut kalau dalam dunia blogging (Dalam bahasa Inggris) di sebut dengan istilah Navigation Feet.


Bentuk default dari Navigation feet di blog, sebenarnya tidak menggangu tampilan blog kita. Blog kita tidak terlihat rame atau acak-acakan gara Navigation Feet tersebut. Tapi, sembilan dari sepuluh blog, mengganti tulisan Posting Lama, Posting Baru dan Beranda dengan Gambar. Kalau blog Lentera Blogger ini sengaja menghilangkan tulisan Newer Posts, Older Posts dan Home dan menggantinya dengan gambar karena Navigation Feet yang menggunakan gambar, membuat blog saya terlihat indah dan cantik.

Jadi, tutorial blog yang akan saya berikan kali ini adalah tentang Cara mengganti Tulisan Posting Lebih Baru, Posting lama dan Beranda dengan gambar. Sebelum sobat blogger mengikuti tutorial ini, silahkan sobat blogger siapkan tiga gambar dulu. Satu Gambar rumah, dua gambar panah yang menghadap kiri dan kanan. Jangan sampai, panahnya menghadap kiri saja atau menghadap kanan saja, bisa-bisa pengunjung blog sobat jadi tersesat dan bingung.

Cara Mengganti Posting Lama, Posting Baru dan Beranda dengan Gambar:


  1. Sign In di akun blog sobat.
  2. Pada menu drop down, klik Template
  3. Klik Edit Html dan Proceed.
  4. Kasih tanda centang pada Expand Widget Template

Mengganti tulisan Posting Lama atau Older Post
Cari kode <data:olderPageTitle/> Kalau sudah ketemu ganti tersebut dengan kode berikut :

<img src='Url Gambar Anda'/>

Mengganti tulisan Posting Baru atau Newer Post
Cari kode <data:newerPageTitle/> Kalau sudah ketemu ganti tersebut dengan kode berikut :

<img src='Url Gambar Anda'/>

Mengganti tulisan Beranda atau Home
Cari kode <data:homeMsg/> Kalau sudah ketemu ganti tersebut dengan kode berikut:

<img src='Url Gambar Anda'/>


Tulisan Url Gambar Anda harus di ganti dengan Url gambar yang sobat blogger miliki. Saran saya, Sebelum sobat blogger mengganti tulisan Posting Lama, Posting Baru dan Beranda dengan Gambar, sebaiknya gambar di simpan dulu di tempat penyimpanan gambar seperti PhotoBucket, supaya sobat blogger tinggal copy paste Url dari gambar yang sudah sobat blogger Upload tersebut.


Cara Mendisable Klik Kanan & CTRL+U

Cara/setting untuk mematikan/menon-aktifkan klik kanan dan block/select isi blog dan penekanan select Ctrl-A bisa pake script yang belibet, maupun memanfaatkan fungsi-fungsi html itu sendiri yang sangat simpel.

Fungsi-fungsi ini berguna jika si empunya blog tidak menginginkan blognya dikopi paste secara gampangan tanpa minta ijin, alias tulisan postingan kita tidak mudah dikopi paste. Walaupun dengan usaha/cara trik-trik lain bisa membuka/memblok/mengkopi-paste isi blog juga. Tapi cara dibawah, lumayanlah bisa mengurangi tindakan korupsi eeeh... kopi-paste. Penjelasan Fungsi html yang dipakai :

oncontextmenu='return false;'

adalah untuk mematikan menu klik kanan
onkeydown='return false;'

adalah untuk mematikan tombol/keyboard Ctrl-A, Ctrl-U (page source) dan tombol keyboard lainnya eeeh... kalo ngelihat page source dari menu masih kok. Cara melihat page source pada web/blog yang mematikan fungsi klik kanan mouse, klik kiri mouse dan penekanan keyboard (Ctrl+A, Ctrl+U) adalah : jika pakai firefox, buka menu View, lalu pilih Page Source (Ctrl+U). Hasilnya adalah tulisan postingan dalam 1 baris panjaaaaang. Cari aja postingannya ndiri...
onmousedown='return false;'

adalah untuk mematikan klik select mouse
'return false'

adalah untuk mematikan fungsi yang diinginkan

Cara men-disable klik kanan dan CTRL+U pada keyboard

Masuk ke edit html
Cari <body>
Gantikan kode tersebut dengan kode dibawah ini

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
Anda bisa memilih 1 fungsi aja atau 2 fungsi atau ketiga-tiganya, terserah deh... anda yang punya blog kok.



Selasa, 22 Januari 2013

Membuat Spoiler atau Open Close



Membuat Spoiler atau Open Close, hari ini saya akan share sebuah Tutorial Blogger mengenai cara membuat sebuah spoiler atau tombol open close di blog.



Spoiler atau tombol open close ini berfungsi untuk menyembunyikan sebuah text, gambar ataupun widget. Ketika kalian meng-klik tombol open maka text, gambar ataupun widget yang kalian sembunyikan akan terlihat begitu pula sebaliknya, jika kalian kembali meng-klik tombol close maka text, gambar ataupun widget yang kalian sembunyikan akan kembali tertutup. Kalian sudah mengerti kan? Kalau kalian ingin menggunakannya silahkan kalian pilih bentuk spoilernya dan copas kode di bawahnya ke tempat yang kalian inginkan


Spoiler 1
Text, URL Gambar atau Widget kalian Disni


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="background: none repeat scroll 0% 0% yellow; border: 1px dashed red; color: blue; font-size: 10px; margin: 0px; padding: 5px; width: auto;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background-color: yellow; border: 2px dashed red; color: blue; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 2
Text, URL Gambar atau Widget kalian Disni


<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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="background: none repeat scroll 0% 0% BLUE; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="OPEN" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 3
Text, URL Gambar atau Widget kalian Disni


<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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="-moz-border-radius: 15px 15px 15px 15px; background: none repeat scroll 0% 0% BLUE; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="OPEN" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 4
Text, URL Gambar atau Widget kalian Disni


<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="-moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; background: none repeat scroll 0% 0% RED; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 5
Text, URL Gambar atau Widget kalian Disni


<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% darkgreen; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 6
Text, URL Gambar atau Widget kalian Disni


<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<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 = 'HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'SHOW'; }" style="margin: 0px; padding: 0px; width: 100%;" type="button" value="SHOW" /> </div>
<div class="alt2" style="-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(255, 0, 0); border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Catatan :
1. Kalian bisa melakukan beberapa modifikasi : mengganti warna/color, ukuran/jenis font, text-attribute seperti bold/italic, dari Spoiler tersebut.

2. Isi dari Spoiler juga bisa dimasukkan kode div style seperti di bawah ini, sehingga bentuknya seperti tabel yg ada scroll bar-nya...



<div style="padding:10px; overflow:auto; width:200px; height:200px;" 1px="">
.
.
.

</div>


NB :


Kode titik2 ditengahnya adalah isi, bisa berisi link, text, gambar, dll

Bagaimana? Cukup mudah bukan cara membuatnya tinggal copas aja koq.

Semoga bermanfaat and Happy Blogging.

Membuat Tulisan dan Link Berkedip di Blog

Membuat Tulisan dan Link Berkedip di Blog. Ketika berkunjung ke suatu blog atau website kadang kita menemukan tulisan atau link yang berkedip. Salah satu tulisan atau link yang sering dibuat berkedip di blog adalah Klik Disini atau Download Disini. Tulisan atau link yang berkedip bermanfaat menarik perhatian para pengunjung.

Sekarang bagaimana membuat tulisan atau link berkedip di blog atau web kita? Cara membuat link atau tulisan berkedip ternyata gampang sekali. Karena ada tulisan yang ingin dibuat berkedip, dan ada link yang ingin dibuat berkedip, maka akan dijelaskan satu persatu.


  1. Membuat tulisan atau teks agar berkedip:

    • Anda harus berada di mode posting Edit HTML, maka kalau belum berada di mode tersebut maka pindahlah dulu ke mode tersebut

    • Tambahkan kode Blink pada teks atau tulisan yang ingin dibuat berkedip

    • Contonya adalah:<blink>Tulisan Berkedip</blink>

    • Maka jadinya akan seperti ini: Tulisan Berkedip

  2. Membuat link berkedip:

    • Sama dengan di membuat tulisan berkedip, maka Anda perlu pindah ke mode Edit HTML

    • Cari link yang ingin dibuat berkedip, contohnya:<a href="http://arcendocty.blogspot.com/">Link Berkedip</a>

    • Beri kode Blink pada teks linktersebut sehingga menjadi seperti ini: <a href="http://arcendocty.blogspot.com/"><blink>Link Berkedip</blink></a>

    • Dan jadinya akan seperti ini: Link Berkedip

  3. Selamat!!! Anda sudah bisa membuat tulisan dan link berkedip di blog
mudahkan sob....


Rabu, 16 Januari 2013

Cara Membuat Widget Di selular/Hp

Assalamualaikum Wr Wb.
Siang ini panas banget,,,  enaknya ditemeni segelas es teh,,, wah muantap....
Ok langsung saja pada topik pembahasan cara membuat widget di Hp/ seluler
menurut saya ini sangat penting, memngingat membludaknya pengguna browsing menggunaka handphone/seluler agar mudah mencari artikel-artikel di blog lainnya.
klik disini entuk melihat demonya
langsung saja tutorialnya dibawah ini.
Membuat widget tampil di hp/sluler tidaklah rumit. anda hanya perlu menambahkan sedikit kode pada templet anda,
ada beberapa kode yang bisa anda masukkan kedalam propety mobile tersebut, seperti:
mobile=‘yes’  (untuk menampilkan widget pada versi mobile/seluler dan web)

mobile=‘only’ (untuk menampilkan widget hanya versi mobile/seluler saja) 
mobile=‘no’ = (untuk menampilkan widget hanya pada versi web saja)

anda bisa menentukan pilihan widget yang akan anda munculkan,,
saya kasih contoh pada popula post

1. Login, edit templet, jangan lupa klik expand widget pada templet.
2. Cari kode ini






atau lengkapnya seperti ini





Kemudian sisipka salah satu code diatas. saya kasih contoh seperti dibawah menggunakan
mobile=‘yes’




kemudian save templet
 semoga bermanfaat

Assalamualaikum Wr Wb.

Cara Membuat Widget Di selular/Hp

Assalamualaikum Wr Wb.
Siang ini panas banget,,,  enaknya ditemeni segelas es teh,,, wah muantap....
Ok langsung saja pada topik pembahasan cara membuat widget di Hp/ seluler
menurut saya ini sangat penting, memngingat membludaknya pengguna browsing menggunaka handphone/seluler agar mudah mencari artikel-artikel di blog lainnya.
klik disini entuk melihat demonya
langsung saja tutorialnya dibawah ini.
Membuat widget tampil di hp/sluler tidaklah rumit. anda hanya perlu menambahkan sedikit kode pada templet anda,
ada beberapa kode yang bisa anda masukkan kedalam propety mobile tersebut, seperti:
mobile=‘yes’  (untuk menampilkan widget pada versi mobile/seluler dan web)

mobile=‘only’ (untuk menampilkan widget hanya versi mobile/seluler saja) 
mobile=‘no’ = (untuk menampilkan widget hanya pada versi web saja)

anda bisa menentukan pilihan widget yang akan anda munculkan,,
saya kasih contoh pada popula post

1. Login, edit templet, jangan lupa klik expand widget pada templet.
2. Cari kode ini






atau lengkapnya seperti ini





Kemudian sisipka salah satu code diatas. saya kasih contoh seperti dibawah menggunakan
mobile=‘yes’




kemudian save templet
 semoga bermanfaat

Assalamualaikum Wr Wb.

Cara Mudah Membuat Widget Multi Kolom Di Blog

Membuat Menu Multi Kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot di atas



Langkah-langkah untuk
Membuat Menu Multi Kolom silahkah ikuti seperti dibawah ini:
  • Login ke blogger anda
  • Layout-->Edit HTML
  • Kemudian cari kode ]]></b:skin>
  • Masukan kode dibawah ini sebelum kode diatas



div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}




Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna Hitam--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

  • Silahkan masukkan kode dibawah ini sebelum kode </head>



<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>
  • Kemudian Save
  • Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript
  • Silahkan masukkan script menu multi kolom dibawah ini:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan



- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna Kuning adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil sobat!!!

Menambahkan 2 (Dua) Kolom Di Atas/Di Bawah Header

Tutor Menambahkan 2 (Dua) Kolom Di Atas/Di Bawah Header  sebagai arsip untuk saya pribadi biar ga lupa kedepannya, dan untuk berbagi kepada pembaca yang membutuhkan



1. Diatas Header                                               2. Dibawah Header



Langsung saja ya, berikut langkahnya :
1. Login ke akun blog anda
2. Pilih Design >> Edit HTML
3. Centang Expand Template Widget

Untuk menambah 2 kolom di atas header, copy kode yang ada di dalam kotak, lalu letakkan di atas kode <header>

Untuk menambah 2 kolom di bawah header, copy kode yang ada di dalam kotak, lalu letakkan di atas kode </header> 
 

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

selamat mencoba bagi yang mau mencoba....

Selasa, 15 Januari 2013

Membuat Text Area

Dibawah ini beberapa pilihan Text Area yang bisa sobat gunakan


  • Text Area Biasa


Biasanya text area di gunakan untuk menyimpan kode-kode Html/Javascript ataupun text lainnya agar bisa di copy oleh para pengunjung.
Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="5" cols="20" readonly>
Aku Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang pada ngiri ama aku karena aku terlalu tampan!! :)
</textarea></p>

Keterangan :
rows="6", menunjukan tinggi dari text area.
Cols="20", menunjukan lebar dari text area.

Hasilnya akan seperti di bawah ini :





  • Text Area dengan memakai HighLight /Select



Highlight
atau Select All,yaitu dimana saat kita tekan tombol Select All,maka kode dalam text area akan otomatis terblok semua.

Untuk kodenya,copy paste di bawah ini :


<div>
<form name="Select All code">
<p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 184; height: 120" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly>
Aku Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang pada ngiri ama aku karena aku terlalu tampan!! :)
</textarea></p>
</div>
<p align="left" style="margin-top: 0; margin-bottom: 0">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All">

Contoh hasilnya :



Yang berperan penting untuk highlightnya sebenarnya hanya pada kode

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">

jadi,jangan sampai dirubah ya




  • Text Area Select Otomatis


Anda pasti pernah khan mengunjungi suatu situs yang memberikan sebuah kode html,seperti kode Adsense,dll.
Ya,kode akan terblok sendiri,hanya dengan menggerakkan mouse diatas bidang kodenya.
Untuk contohnya lihat di bawah ini :



Untuk kodenya kopi paste di bawah ini :


<div>
<form name="PujiantoroStyle">
<p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 184; height: 120" name="txt" rows="100" cols="55" onmouseover="this.form.txt.select()" readonly ;>
TEXT ANDA DISINI</textarea></p>
</form></div>

Selamat mencoba dan semoga sukses