Cara Membuat Kotak Quote Dengan Select Teks

Kita sebagai blogger tak jarang sering melihat sebuahpostingan yang menggunakan kotak quote yang biasanya digunakan untuk menuliskan kata-kata penting untuk diperhatikan pengunjung.

Kotak quote yang akan kita bahas dalam posting kali ini adalah dengan menggunakanselect text. Seperti ini contohnya.

Menarik bukan, jika dengan kotak select text ini pengunjung bisa dengan mudah mengcopy isi dari text yang ingin Anda beritahukan. Model select text ini bisa Anda gunakan jika ingin memberikan petunjuk kepada pengunjung misalnya semacam tutorial atau hal-hal lainnya yang ingin Anda beritahukan. Atau ketika Anda hendak menulis sebuah artikel, kemudian Anda ingin beberapa kode atau kalimat anda masukkan kedalam quote supaya orang bisa mengcopynya. Anda bisa menambahkan kode berikut: 

<br /><form name="MyTextBoxForm"><br /><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select All Text" /><br /><textarea cols="65" name="MyTextBox" rows="12" wrap="off"> Disini tulisan Anda </textarea></form>

Masukkan kode tersebut pada mode posting Html, baru kemudian Anda rubah ke mode Compose. Untuk mengatur lebar dan barisnya Anda dapat merubah ukuran yang berwarna merah diatas sesuai dengan keinginan Anda. Setelah itu Anda lihat hasilnya.

Keterangan Hari, tanggal, bulan

<script type='text/javascript'>
//<![CDATA[

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<p>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</p>")

//]]>
</script>

Membuat Spoiler

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 0px;"><i><span style="font-weight: bold;"></span></i><input value="Buka Dong Sobat :)" style="margin: 0px; padding: 0px; width: 310px; font-size: 20px;" 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 = 'Jangan Lupa Di Tutup !!!'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Thank Atas Kunjungannya Sobat'; }" type="button"/>
</div>
<div class="alt2" style="border: 0px inset ; margin: 0px; padding: 0px;">
<div style="display: none;">

Membuat Lintas berita

<style>
#jbpanel1 {position: fixed;bottom:0px;left:0px; background: #000000; width: 100%;color:#ECECEC;  padding:-2px;}
</style>
<div id="jbpanel1"><marquee behavior="scrool" onmouseover="this.stop()" onmouseout="this.start()"><div align="center"> <b>Info:</b> Butuh Informasi klick <a href="http://google.com">disini</a></div></marquee></div>

Cara Membuat Back to Top Dengan Jquery

Selamat sore, kali ini saya ingin share bagaimana caranya Cara Membuat Back To Top/Scroll To Top dangan jQuery, banyak blog master yang telah menerangkannya. Tapi kali ini saya akan menuliskannya di blog ini.


Ok, langsung saja cari kode </head> di Edit HTML dan masukan kode dibawah ini SEBELUM kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

Setelah itu  masukan script jQuery di bawah, tepat dibawah kode diatas

<!-- Back To Top -->
<script src='http://riky-rizkiyana.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
  min: 1,
  fadeSpeed: 200
 }, settings);
 return this.each(function() {
  var el = $(this);
  el.hide(); 
  $(window).scroll(function() {
   if($(window).scrollTop() &gt;= settings.min)
   {
    el.fadeIn(settings.fadeSpeed);
   }
   else
   {
    el.fadeOut(settings.fadeSpeed);
   }
  });
 });
};

$(document).ready(function() {
 $(&#39;#top-link&#39;).topLink({
  min: 300,
  fadeSpeed: 500
 });
 $(&#39;#top-link&#39;).click(function(e) {
  e.preventDefault();
  $.scrollTo(0,300);
 });
});
</script>
<!-- End Back To Top -->

Cari kode <body> dan rubah menjadi <body id='top'>  
Masukan kode CSS dibawah ini sebelum kode]]></b:skin>

#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

 Masukan kode HTML di bawah ini sebelum kode </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

Ok silahkan anda coba sendiri, Good luck !!

Tips Membuat Script Memberikan Judul Artikel Ketika Di Copy Paste

1.Login ke blogger.
2.Dihalaman dasbor klik Rancangan » Edit HTML.
3.Masukkan script ini dibawah kode <head>.

<script type='text/javascript'>
function addLink() {
 var body_element = document.getElementsByTagName('body')[0];
 var selection;
 selection = window.getSelection();
 var pagelink = "<br/><br/> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright  http://www.contohaje.com/ Under Common Share Alike Atribution"; // change this if you want
 var copytext = selection + pagelink;
 var newdiv = document.createElement('div');
 newdiv.style.position='absolute';
 newdiv.style.left='-99999px';
 body_element.appendChild(newdiv);
 newdiv.innerHTML = copytext;
 selection.selectAllChildren(newdiv);
 window.setTimeout(function() {
  body_element.removeChild(newdiv);
 },0);
}document.oncopy = addLink;
</script>

4.Ganti url http://www.contohaje.com/ dengan url blog sobat.
5.Klik save template

Memasang Kode Warna Di Blog

silahkan ikuti langkah-langkah di bawah ini. . .
Login dulu ke akun blogger
Klik "Design"
Pilih "HTML/JavaScript"
Copy JavaScript dibawah ini dan paste di tempat yang telah disediakan! 

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

<script type='text/javascript'>

var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;

function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}

// Picker ---------------------------------------------------------

function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };

picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

hueUpdate();

dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}

executeonload(init);

function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}



function hueUpdate(newVal) {

var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }

var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

pickerSwatchUpdate();
}

function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);

h = h / 180;

var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);

var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);

var a = YAHOO.util.Color.hsv2rgb( h, s, v );

document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}

</script><!--[if gte IE 5.5000]>
<script type="text/javascript">

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}

YAHOO.util.Event.addListener(window, "load", correctPNG);

</script>
<![endif]-->

Buat postingan baru, pilih Edit HTML yang ada di pojok kanan atas, dan masukan kode di bawah ini!

<center><form name="hcc" id="hcc">

<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody>
<tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr>
<tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr>
<tr height="10"><td>
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody>
<tr height="24"><td id="vzorec" width="24" height="24">
</td><td valign="bottom"><p>
Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p>
</td></tr>
</tbody></table>
</form>
</center>

Setelah melakukan langkah-langkah tersebut, sobat bisa lihat hasilnya.

cara membuat link berbintang

cari kode </head> kemudian masukan script diatasnya...

<style>
a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoDQ9uEvADsaZd4Sx4VSIS2UCE6YF9GoltUYGEtRGI44B1HH6afnhNTdHxeR9rwXEy_SO2bR6ib0PlOHBL0XHZhoHVpQMmSv2NPlcF9bQD5zaLtjb8ueGEfpUboP5ZGBLCwcz2Cz9JZcM/s1600/blink.gif); }
</style>

Script membuat tulisan mengetik

<form name="news">
<textarea cols="23" name="news2" rows="3" wrap="virtual"></textarea></form>

<script type="text/javascript">
//<![CDATA[

var newsText = new Array();
newsText[0] = "hii";
newsText[1] = "Blog tutorial, tips, trik dan download";
newsText[2] = "Anda sedang membuka halaman";
newsText[3] = "Tentang membuat widget tulisan seolah mengetik sendiri";
newsText[4] = "Silahkan mencoba tips dan triknya";
newsText[5] = "Semoga bermanfaat ";

var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False)
var tspeed = 250; // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds

// ------------- NO EDITING AFTER THIS LINE ------------- 
var dwAText, cnews=0, eline=0, cchar=0, mxText;

function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}

doNews()
//]]>
</script>

Script Membuat Icon Twitter terbang

<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/techgyo";var tweetThisText= "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();
</script>
<a id="theBird" href="http://twitter.com/akuntwittersobat"target="_blank" style="display: block; position: absolute; width:64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png);background-attachment: initial; background-origin: initial; background-clip:initial; background-color: transparent; z-index: 947; left: 0px; top: 587px;background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/"target="_blank" title="tweet this" style="position:absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png);background-attachment: initial; background-origin: initial; background-clip:initial; background-color: transparent; width: 58px; height: 30px; z-index:951; left: 49px; top: 583px; display: none; opacity: 0; background-position:-64px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLfollow" href="http://twitter.com/xxx"target="_blank" title="follow me" style="position:absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png);background-attachment: initial; background-origin: initial; background-clip:initial; background-color: transparent; width: 58px; height: 20px; z-index:952; left: 54px; top: 613px; display: none; opacity: 0; background-position:-64px -30px; background-repeat: no-repeat no-repeat; "></a>

Cara membuat judul blog di belakang postingan

Cara membuat judul blog dibelakang judul postingan. Tips lagi neh sobat blog biar blog anda lebih SEO dalam dalam pencarian di google. Saya ambil contoh blog saya ini blog ini apabila di search akan menunjukan judul postingan dahulu baru judul blog. Coba anda perhatikan gambar dibawah ini.

Pasti sobat blog mengerti apa yang di maksud judul blog dibelakang judul postingan. nah agar blog seperti itu langkah-langkahnya sebagai berikut.
1. Login blog kemudian ke menu edit HTML.
2. Beri tanda centang pada Expand template widget
3. Cari kode dibawah ini dengan menekan F3 atau CTRL+F agar lebih mudah

<title><data:blog.pageTitle/></title>

4. Bila kode sudah ditemukan sekarang ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

sekedar informasi untuk sobat blog
<data:blog.title/></title> = Judul blog
<title><data:blog.pageName/> = Judul postingan
5. Bila semua sudah selesai silahkan simpan template. Semoga brmanfaat.

Cara membuat Efek background berwarna warni

1. Login blog kemudian menuju menu edit tata letak
2. Pilih menu tambahkan widget
3. Pilih menu HTML/javascript kemudian copy kode dibawah ini dan paste kan pada HTML/javascript tadi.

<script type="text/javascript">// <![CDATA[var border=50; // how wide is each bordervar effects=3; // how many of the effect are on the pagevar speed=50; // how fast is the animation (lower is faster)var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");// above line lists colours for the groovy effect (can be as long or short as you like)

var swide, shigh;var h=new Array();var v=new Array();var op=1/(effects+1);window.onload=function() { if (document.getElementById) {var i, d, s, b;b=document.createElement("div");s=b.style;s.position="absolute";s.overflow="hidden";s.zIndex="-1";b.setAttribute("id", "bod");i=document.body.style.backgroundColor;if (document.body.parentNode) {if (i) document.body.parentNode.style.backgroundColor=i;document.body.style.backgroundColor="transparent";}document.body.appendChild(b);set_width();set_scroll();for (i=0; i<effects*10; i+=10) {d=document.createElement("div");s=d.style;s.width="100%";h[i]=Math.floor(Math.random()*shigh/2.5);h[i+1]=Math.floor(Math.random()*shigh/2.5);h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));s.top=h[i]+"px";s.bottom=h[i+1]+"px";s.position="absolute";s.borderColor=jazz();s.borderStyle="solid";s.borderWidth=border+"px 0px";s.backgroundColor=jazz();if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";else s.opacity=op;h[i+5]=s;b.appendChild(d);}for (i=0; i<effects*10; i+=10) {d=document.createElement("div");s=d.style;s.height="100%";v[i]=Math.floor(Math.random()*swide/2.5);v[i+1]=Math.floor(Math.random()*swide/2.5);v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));s.left=v[i]+"px";s.right=v[i+1]+"px";s.position="absolute";s.borderColor=jazz();s.borderStyle="solid";s.borderWidth="0px "+border+"px";s.backgroundColor=jazz();if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";else s.opacity=op;v[i+5]=s;b.appendChild(d);}groovy();}}
var old_jazz=false;function jazz() {var new_jazz;do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }while ( new_jazz==old_jazz );old_jazz=new_jazz;return (new_jazz);}
function scat(no) {var yes;no=no*Math.abs(no);do { yes=2+Math.floor(Math.random()*3); }while ( no==yes );return (yes);}
function groovy() {setTimeout("groovy()", speed);var i;for (i=0; i<effects*10; i+=10) {h[i]+=h[i+2];h[i+1]+=h[i+3];if (h[i]+h[i+1]>shigh-border*2) {h[i+4]=h[i+2];h[i+2]=-h[i+3];h[i+3]=-h[i+4];h[i+5].backgroundColor=jazz();}if (h[i]<-border && Math.random()<1/border) {h[i+2]=scat(h[i+3]);if (h[i+1]>shigh) h[i+5].borderColor=jazz();}else if (h[i]>shigh && Math.random()<1/border) {h[i+2]=-scat(h[i+3]);}if (h[i+1]<-border && Math.random()<1/border) {h[i+3]=scat(h[i+2]);if (h[i]>shigh) h[i+5].borderColor=jazz();}else if (h[i+1]>shigh && Math.random()<1/border) {h[i+3]=-scat(h[i+2]);}h[i+5].top=h[i]+"px";h[i+5].bottom=h[i+1]+"px";}for (i=0; i<effects*10; i+=10) {v[i]+=v[i+2];v[i+1]+=v[i+3];if (v[i]+v[i+1]>swide-border*2) {v[i+4]=v[i+2];v[i+2]=-v[i+3];v[i+3]=-v[i+4];v[i+5].backgroundColor=jazz();}if (v[i]<-border && Math.random()<1/border) {v[i+2]=scat(v[i+3]);if (v[i+1]>swide) v[i+5].borderColor=jazz();}else if (v[i]>swide && Math.random()<1/border) {v[i+2]=-scat(v[i+3]);}if (v[i+1]<-border && Math.random()<1/border) {v[i+3]=scat(v[i+2]);if (v[i]>swide) v[i+5].borderColor=jazz();}else if (v[i+1]>swide && Math.random()<1/border) {v[i+3]=-scat(v[i+2]);}v[i+5].left=v[i]+"px";v[i+5].right=v[i+1]+"px";}}
window.onresize=set_width;function set_width() {if (typeof(self.innerWidth)=="number") {swide=self.innerWidth-18;shigh=self.innerHeight-18;}else if (document.documentElement && document.documentElement.clientWidth) {swide=document.documentElement.clientWidth;shigh=document.documentElement.clientHeight;}else if (document.body.clientWidth) {swide=document.body.clientWidth;shigh=document.body.clientHeight;}else {swide=800;shigh=600;}var s=document.getElementById("bod").style;s.width=swide+"px";s.height=shigh+"px";}
window.onscroll=set_scroll;function set_scroll() {var sleft, sdown;if (typeof(self.pageYOffset)=="number") {sdown=self.pageYOffset;sleft=self.pageXOffset;}else if (document.body.scrollTop || document.body.scrollLeft) {sdown=document.body.scrollTop;sleft=document.body.scrollLeft;}else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {sleft=document.documentElement.scrollLeft;sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}var s=document.getElementById("bod").style;s.top=sdown+"px";s.left=sleft+"px";}// ]]></script><script type="text/javascript">// <![CDATA[var border=50; // how wide is each bordervar effects=3; // how many of the effect are on the pagevar speed=50; // how fast is the animation (lower is faster)var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");// above line lists colours for the groovy effect (can be as long or short as you like)

var swide, shigh;var h=new Array();var v=new Array();var op=1/(effects+1);window.onload=function() { if (document.getElementById) {var i, d, s, b;b=document.createElement("div");s=b.style;s.position="absolute";s.overflow="hidden";s.zIndex="-1";b.setAttribute("id", "bod");i=document.body.style.backgroundColor;if (document.body.parentNode) {if (i) document.body.parentNode.style.backgroundColor=i;document.body.style.backgroundColor="transparent";}document.body.appendChild(b);set_width();set_scroll();for (i=0; i<effects*10; i+=10) {d=document.createElement("div");s=d.style;s.width="100%";h[i]=Math.floor(Math.random()*shigh/2.5);h[i+1]=Math.floor(Math.random()*shigh/2.5);h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));s.top=h[i]+"px";s.bottom=h[i+1]+"px";s.position="absolute";s.borderColor=jazz();s.borderStyle="solid";s.borderWidth=border+"px 0px";s.backgroundColor=jazz();if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";else s.opacity=op;h[i+5]=s;b.appendChild(d);}for (i=0; i<effects*10; i+=10) {d=document.createElement("div");s=d.style;s.height="100%";v[i]=Math.floor(Math.random()*swide/2.5);v[i+1]=Math.floor(Math.random()*swide/2.5);v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));s.left=v[i]+"px";s.right=v[i+1]+"px";s.position="absolute";s.borderColor=jazz();s.borderStyle="solid";s.borderWidth="0px "+border+"px";s.backgroundColor=jazz();if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";else s.opacity=op;v[i+5]=s;b.appendChild(d);}groovy();}}
var old_jazz=false;function jazz() {var new_jazz;do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }while ( new_jazz==old_jazz );old_jazz=new_jazz;return (new_jazz);}
function scat(no) {var yes;no=no*Math.abs(no);do { yes=2+Math.floor(Math.random()*3); }while ( no==yes );return (yes);}
function groovy() {setTimeout("groovy()", speed);var i;for (i=0; i<effects*10; i+=10) {h[i]+=h[i+2];h[i+1]+=h[i+3];if (h[i]+h[i+1]>shigh-border*2) {h[i+4]=h[i+2];h[i+2]=-h[i+3];h[i+3]=-h[i+4];h[i+5].backgroundColor=jazz();}if (h[i]<-border && Math.random()<1/border) {h[i+2]=scat(h[i+3]);if (h[i+1]>shigh) h[i+5].borderColor=jazz();}else if (h[i]>shigh && Math.random()<1/border) {h[i+2]=-scat(h[i+3]);}if (h[i+1]<-border && Math.random()<1/border) {h[i+3]=scat(h[i+2]);if (h[i]>shigh) h[i+5].borderColor=jazz();}else if (h[i+1]>shigh && Math.random()<1/border) {h[i+3]=-scat(h[i+2]);}h[i+5].top=h[i]+"px";h[i+5].bottom=h[i+1]+"px";}for (i=0; i<effects*10; i+=10) {v[i]+=v[i+2];v[i+1]+=v[i+3];if (v[i]+v[i+1]>swide-border*2) {v[i+4]=v[i+2];v[i+2]=-v[i+3];v[i+3]=-v[i+4];v[i+5].backgroundColor=jazz();}if (v[i]<-border && Math.random()<1/border) {v[i+2]=scat(v[i+3]);if (v[i+1]>swide) v[i+5].borderColor=jazz();}else if (v[i]>swide && Math.random()<1/border) {v[i+2]=-scat(v[i+3]);}if (v[i+1]<-border && Math.random()<1/border) {v[i+3]=scat(v[i+2]);if (v[i]>swide) v[i+5].borderColor=jazz();}else if (v[i+1]>swide && Math.random()<1/border) {v[i+3]=-scat(v[i+2]);}v[i+5].left=v[i]+"px";v[i+5].right=v[i+1]+"px";}}
window.onresize=set_width;function set_width() {if (typeof(self.innerWidth)=="number") {swide=self.innerWidth-18;shigh=self.innerHeight-18;}else if (document.documentElement && document.documentElement.clientWidth) {swide=document.documentElement.clientWidth;shigh=document.documentElement.clientHeight;}else if (document.body.clientWidth) {swide=document.body.clientWidth;shigh=document.body.clientHeight;}else {swide=800;shigh=600;}var s=document.getElementById("bod").style;s.width=swide+"px";s.height=shigh+"px";}
window.onscroll=set_scroll;function set_scroll() {var sleft, sdown;if (typeof(self.pageYOffset)=="number") {sdown=self.pageYOffset;sleft=self.pageXOffset;}else if (document.body.scrollTop || document.body.scrollLeft) {sdown=document.body.scrollTop;sleft=document.body.scrollLeft;}else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {sleft=document.documentElement.scrollLeft;sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}var s=document.getElementById("bod").style;s.top=sdown+"px";s.left=sleft+"px";}// ]]></script>