This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Friday, June 24, 2011

Tips Trik Blogs: Cara Membuat Efek Link Berwarna-Warni



Script ini akan membuat link yang sobat buat ketika di arahkan oleh kursor mouse akan berubah menjadi warna-warni.

Untuk memasangnya sobat cukup menambahkan script berikut ke dalam Elemen Halaman - Lalu pilih HTML/Javascript..

Scriptnya:

<script type='text/javascript'> 
//<![CDATA[ 
var rate = 20; 
if (document.getElementById) 
  window.onerror=new Function("return true") 
var objActive;  // The object which event occured in 
  var act = 0;    // Flag during the action 
  var elmH = 0;   // Hue 
  var elmS = 128; // Saturation 
  var elmV = 255; // Value 
  var clrOrg;     // A color before the change 
  var TimerID;    // Timer ID 
if (document.all) { 
  document.onmouseover = doRainbowAnchor; 
  document.onmouseout = stopRainbowAnchor; 
  } 
  else if (document.getElementById) { 
  document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); 
  document.onmouseover = Mozilla_doRainbowAnchor; 
  document.onmouseout = Mozilla_stopRainbowAnchor; 
  } 
function doRainbow(obj) 
  { 
  if (act == 0) { 
  act = 1; 
  if (obj) 
  objActive = obj; 
  else 
  objActive = event.srcElement; 
  clrOrg = objActive.style.color; 
  TimerID = setInterval("ChangeColor()",100); 
  } 
  } 
function stopRainbow() 
  { 
  if (act) { 
  objActive.style.color = clrOrg; 
  clearInterval(TimerID); 
  act = 0; 
  } 
  } 
function doRainbowAnchor() 
  { 
  if (act == 0) { 
  var obj = event.srcElement; 
  while (obj.tagName != 'A' && obj.tagName != 'BODY') { 
  obj = obj.parentElement; 
  if (obj.tagName == 'A' || obj.tagName == 'BODY') 
  break; 
  } 
if (obj.tagName == 'A' && obj.href != '') { 
  objActive = obj; 
  act = 1; 
  clrOrg = objActive.style.color; 
  TimerID = setInterval("ChangeColor()",100); 
  } 
  } 
  } 
function stopRainbowAnchor() 
  { 
  if (act) { 
  if (objActive.tagName == 'A') { 
  objActive.style.color = clrOrg; 
  clearInterval(TimerID); 
  act = 0; 
  } 
  } 
  } 
function Mozilla_doRainbowAnchor(e) 
  { 
  if (act == 0) { 
  obj = e.target; 
  while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { 
  obj = obj.parentNode; 
  if (obj.nodeName == 'A' || obj.nodeName == 'BODY') 
  break; 
  } 
if (obj.nodeName == 'A' && obj.href != '') { 
  objActive = obj; 
  act = 1; 
  clrOrg = obj.style.color; 
  TimerID = setInterval("ChangeColor()",100); 
  } 
  } 
  } 
function Mozilla_stopRainbowAnchor(e) 
  { 
  if (act) { 
  if (objActive.nodeName == 'A') { 
  objActive.style.color = clrOrg; 
  clearInterval(TimerID); 
  act = 0; 
  } 
  } 
  } 
function ChangeColor() 
  { 
  objActive.style.color = makeColor(); 
  } 
function makeColor() 
  { 
  // Don't you think Color Gamut to look like Rainbow? 
// HSVtoRGB 
  if (elmS == 0) { 
  elmR = elmV;    elmG = elmV;    elmB = elmV; 
  } 
  else { 
  t1 = elmV; 
  t2 = (255 - elmS) * elmV / 255; 
  t3 = elmH % 60; 
  t3 = (t1 - t2) * t3 / 60; 
if (elmH < 60) { 
  elmR = t1;  elmB = t2;  elmG = t2 + t3; 
  } 
  else if (elmH < 120) { 
  elmG = t1;  elmB = t2;  elmR = t1 - t3; 
  } 
  else if (elmH < 180) { 
  elmG = t1;  elmR = t2;  elmB = t2 + t3; 
  } 
  else if (elmH < 240) { 
  elmB = t1;  elmR = t2;  elmG = t1 - t3; 
  } 
  else if (elmH < 300) { 
  elmB = t1;  elmG = t2;  elmR = t2 + t3; 
  } 
  else if (elmH < 360) { 
  elmR = t1;  elmG = t2;  elmB = t1 - t3; 
  } 
  else { 
  elmR = 0;   elmG = 0;   elmB = 0; 
  } 
  } 
elmR = Math.floor(elmR).toString(16); 
  elmG = Math.floor(elmG).toString(16); 
  elmB = Math.floor(elmB).toString(16); 
  if (elmR.length == 1)    elmR = "0" + elmR; 
  if (elmG.length == 1)    elmG = "0" + elmG; 
  if (elmB.length == 1)    elmB = "0" + elmB; 
elmH = elmH + rate; 
  if (elmH >= 360) 
  elmH = 0; 
return '#' + elmR + elmG + elmB; 
  } 
//]]> 
</script>
</br><a href="http://www.fadlypuccino.co.cc/" style="font-size: 1px; text-decoration:none; color: #ffffff;">Tips Trik Blog</a>

clo sudah SAVE template sobat..
dan lihat hasilnya..

Tuesday, June 7, 2011

Cara Membuat Blog Translator (Widgets Penterjemah Kata di Blog)


Tips Trik kali ini adalah bagaimana Cara Membuat Blog Translator (Widgets Penterjemah Kata di Blog).
Fungsinya supaya memudahkan visitor atau pengunjung Luar Negri untuk mentranslate tulisan di Blog kita dengan bantuan google translate yang diintegrasikan di widgets blog yang akan kita buat.

Langkah-langkahnya:
1. Masuk ke akun Blogger kalian
2. Masuk ke menu Rancangan
3. Pilih "Tambahkan gadget" - Pilih lokasi yang diinginkan
4. Pilih yang HTML/Javascript
5. Setelah itu copy dan pastekan script berikut di widgets tersebut:


<div class='widget-content'> 
<style> 
 
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style> 
 
<div> 
 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWUoPs1Gy9HaDh77A1kzrGnUoo41HDcQ4-VFOxbVPbeyalk8MWZJ15zC9nEJpL_J_RijA87DITySnyK2kugRoKC6_wrnEKypu6W44jUXvlBkg0UVZxwWeIoH8fvI8VcfPMmRMXVo4nfUc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8_Eo8RT4YhfMRxqadGeiCOYMhNOY7Li6NKgkBxRcm6laGuMYdVfx4lvjja9TdZe-xnQtiTlNrabgEZQnQnnMZUsuuZeyXwXv3xemHGKtqDoEa5WD8kirt1xIcSJu-HQEXGxTJc2EcQg8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJH4GGwIypZVkJLUpCiUDRuQdwRpS5xx3nImZAndQpHCqX6S928qid-EG4BdAH2K3j-Zjaw-eBbyzhqzL-wcMj0tq5SRPq45cewHO4v2KvYHYg-mUCsqfeKTHo0jZmkdNhM8bFQi4vBv0/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgbAp3-Q3tte2_VZIIWU6u2c7nJd3tnUtZvfEOIGtJiNM7kfJ4Ohs-YpGoGE9XlsK4cer90MDPhyYnvjgcFTBwg0QMG1I4Ko2L5hU2bjlv1PuxnTlcI6vr88QSergbcoYSrnLCsZrZbBJU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9DQBpkiLPvvklKO7lk4tlR6sPwlWdeQEoz-vbUvuxo4MtSFHYN2Utl4S3xWH60DWE-RkEuvx9yBSSS8nyhErW2CQm6A-t3tDe-7CvRsc9Bmcux-ziBTEHp3FqBBSc8B-jcfd1Ifvti7I/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aIgiwPeF309bUlMmdvuAftWHaFQKJiwD8s_F8wWKmyPMlo21YJKyKC6dw-SiarJ4-h5Okhtgy_ekeIHdLkOs7gg3Hn83EXhJRW9EKRm-h-YFbf_vfJxB20slqrj-Z993pU2fpEXdrTo/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<br /><br /> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIJQ01gPU68vlq32rj0hsKTYk7iaO9X-WI7C8X0rlXbEOoeXbjv9CW0OVU0pQG1LeUdQ0_NysnL-W0HUIS4CjW4O2flw3-vWLlYrPv8Ps8OwhLo91hAF9PYK2X5-TpBak0xDHL4R5gYc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrZt00vKD-xOIOgZ4ZUJiNGs3VPB_3nfYK2j4oNsqHNPciHQFZkl-6BhVmAXli27cYeqp2p1R-lxME1At20uPTYi5it-qGP-ZiYGa9i28T5Yj61UrH4gkpOUInx9breMmJi3Q0aAM1hk/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKM3mNNXkLb-dM_536lt_umXdcM4IhJMvhJ8s6_KfidWi8voLG-FaQWNlbJEjez7vgotPBzVrSTKvOpjVZTgMRjMvukfloTpZy9MrfuSTyCvL1g7YPWX-MckDL85y1bh72E3UMPNNdMvx/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxeu0MhAbhFerNm_KPWLLywTAYZD5ZGnCc3qYjZGiXhaZQJR4w9nslJRcEQ5Xu_8Fl7NAwMoZkCcBMy3Ey0mrrx8G3H2X0KN3veStuqc6c0a10NIqIfCTnNEBHRmMi51U4BsMLBKBiwDE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZ25DAAgc9Vt5BBkw1uUma1otL7O-ut3vB2XoNkhrsx_FLkXepyU0o-jNje5rWNlXs_PM16HLqBkj44hZlpGsBp1d8KSW3Q4IGSYMhWh-2hvz6fYx3lrhToQ_KWwd8ajOiwu91vUlLhI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPc7iNVI9e_iNsQBZRTG2kA4F3kUEhtkByExbpRbxSKfmBM4rjAiV8IoTK2C6FBFmEN9OajQVx6x2qCtlMKH-0SRbkC0pb2h4CtzZqJbKG3S4YNOWFF7ZalpaYIfcpkN3rEogLn5jyGA8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a> 
</div> <div style=ã&#162;ï&#191;&#189;ï&#191;&#189;font-size:10px;margin:8px 0px 3px 0pxã&#162;ï&#191;&#189;ï&#191;&#189;></div> 
</div>

Clo sudah selesai jangan lupa di SAVE..
selamat mencoba sobat..

Friday, June 3, 2011

Pasang Icon Burung Twitter di Blog dengan Berbagai Warna


Mau tau kan gimana caranya pasang icon burung yang melayang-layang diBlog sobat seperti yang saya punya di Blog ini?
Sebenarnya Cara ini sudah saya Publish di artikel sebelumnya, namun icon burung tersebut warnanya masih standar alias warna biru khas Twitter.
Clo sobat mau Icon burung twitternya lebih berwarna, coba ikuti tahapan pemasangan icon burung twitter di Blog di bawah ini.

1. Masuk ke akun Blogspot Sobat
2. Masuk ke menu Rancangan lalu pilih Elemen Halaman
3. Pilih add Gadgets, pilih dimana saja tempat yang sobat sukai
4. Lalu pilih Add HTML/Javascript dan masukan Kode Javascript twitter yang telah sobat pilih.
5. Clo sudah sobat Save, dan Lihat Hasilnya.. 100% Worked..

Warna-Warna Icon Burung Twitter, Silahkan Dipilih:
Merah:

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqwtGKyYcUhAkEAUtaei_YCj8D8elpkTQTtYzlfubspIJHtvdtmZduqkVBXerSIKr1Y_2giGm7LelGEZtQETNNsVDGJB7TnBt_Io9joVd2MoMiKj9fwm7YuC8lMVDEZqy8bcB2lzNv9g/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>

Biru

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRaqyOAxdGqsbuN0nBW_O9IngSsmlh_eE_JpGwcKhNNXbsdxeg3j8ot05zlldiWyhQt3TminSmVxovxNcM-KtrtzRa8YyiFjKOI1rzn9T62SajGdZkhyphenhyphen0djeNJTV5yk0_q855wWg4z7s/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>


Ungu

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTzOfY_FeGI6q2b7WHz9sed3XK2ZWrEfc8hB5xhJZt5fl6Y5bxPt386NLKfYdeCUGc4c6cGUE0KrRp4LZa7JCe4iVGOR6KT5pCRQ37YskKiUQ2sDR7gMU_EqTOY6-ENAhcy_kWBbhTgDQ/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>


Cokelat

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiO6fMyt2HcxC5a68UtN9I634y0_TUhd6ssYcCpaCOOOGhTWQQHFq6BNeNZAR-sqhjEX2SA1-BiSlB6gx9nEenZnCcR3gd6ks8TBP2VeoAhYXGKeiWGlmbON6cR_0JxyHFqDnGExQ4XQI/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>


Hitam

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdRvv0ASaQKmbw6KBVyoN5TsrhtrZhD-20J7w8UdHM3-GrqFlhiMxQ3Oxlj0KKE4SpUwYZTqV0Kil9ccwNSw8k9WlTYpcLV60ketv7F6uWy3ef5KNkDZ8ttrxNv7YNviELC2DDmt-Zml0/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>

Hijau
<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJF_FdmsEap0mjrNOQI70S47OIguqFId4JevR9nXAzDFuQEyO3JZE2W5TLcNVNI0gsLHNsCSYLeWKUemyddySY8p_rgKomASVuuzMHcCoPZbTx3UtCUwLOTNMP1l-IzTpJ45RZkyceKRA/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>

Kuning
<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7HxX9QBffURGP6akC2koF-1dgFPhwZd8BHtzKq8lglSrGOYCPEP1brWaU9hfhkwteTTReVwTrtkDx04NHzwE3V7thI91fIbyA9kW57NtlOLBUlc0v1tK9WdfWi1CDqPsuGIymvZakSR8/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>

Putih
<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpirxDZkXnx4CS-9J2wYSpGULM5vx1zdrMSAazGWNpUWr5rqkjDOyak9uG5tu5eFWLbqjYXEncJkB271ttIlgmCUjOdRB_vAHmzvo4HoimfT6xEW7hUj3-qAa6-mP0xu2wfeE6YWfEU8M/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>

Biru Standar
<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5OJCMu7ZCpc51dQL-2i9yJymF2-0baCqcI0t7HOQbmkWb6SYROc6A7E98bsLLDpaPkHe1QZyhyphenhyphen0q_NtOm7UlYvAyZ1AhgDdHDi5aCVHMFy-UU80CPpRS9PdTCQlX6PA-yfJ8qcCNHZhY/"; 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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>

Yang terpenting, Ganti Semua NamaTwitterAnda dengan akun twitter yang anda miliki, dan ganti juga UrlSitusAnda dengan Url/alamat web/Blog sobat..

Saturday, April 2, 2011

Tips Trik Blog: Membuat Kotak Chat Slide Vertical dengan jQuery

Welcome Reader.
Next trik saya akan membahas mengenai bagaimana cara Membuat Kotak Chat Slide Vertical dengan jQuery seperti yang saya gunakan di Tips Trik Blog ini.
Kotak Chat Slide Vertical dengan jQuery sangatlah unik, karena jika klik tombol Chat Boxnya ,maka akan muncul kotak chatnya.
Bagaimana cara buatnya, langsung aja ikutin tutorialnya.
pertama, masuk ke akun blogger sobat,
lalu, ke Menu Rancangan - Edit HTML - jangan lupa backup dulu template blog sobat,
clo udah centang Expand Template Widget.
next step, sobat cari tag berikut ]]></b:skin>
clo udah ketemu masukan kode berikut tepat diatas/ sebelum tag tadi.
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

clo udah, cari tag </head>, terus sobat masukin kode berikut ini diatasnya.
<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>

Jika sobat telah memasang script Jquery ini sebelumnya sobat dapat meninggalkan langkah diatas.

lanjut lagi, masukin kode berikut dibawah script jQuery tadi:
<script  type="text/javascript">  
$(document).ready(function(){  
$(".trigger").click(function(){  
$(".panel").toggle("fast");  
$(this).toggleClass("active");  
return false;  
});  
});  
</script>   

kemudian cari tag <body>, terus masukin kode dibawah ini diatasnya.
<div class="panel">

Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....

</div>
<a class="trigger" href="">ChatBox</a> 

sobat bisa mengganti dengan kode apapun.
yang terakhir, simpan template blog sobat.

Tuesday, March 15, 2011

Tips Trik Blog: Membuat Icon Burung Terbang Twitter

Welcome in my Blog,
kali ini saya akan membahas mengenai bagaimana cara membuat Icon Burung Terbang Twitter yang bisa beterbangan pada tampilan Blog sobat, cocok sekali buat sobat yang ingin memperbanyak followers di twitter.
langsung aja deh, login ke akun Blogger sobat.
masuk ke Tab Design, pilih Page Element,
lalu pilih Add Gadgets, pilih tempatnya dimana saja sesuka sobat,
kemudian pilih HTML/Javascript,

sebelumnya sobat copy dan paste kode berikut kedalam notepad untuk memudahkan pengeditan:

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lR8VCIcPJsUXHQw783cD_Y7gas987ZGAVLXRo-ueNHXg1zqRtF3xwUG5Jx-M9BnKMSyX1cUAEkM0zBfok8MOxWgHo5T7FhVCJTDS3tHcdo08gfQfUe1_b9haLU7JzAURoYYnjjwqypro/s1600/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/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit(); </script>

*clo sudah, cari http://twitter.com/NamaTwitterAnda
Ubah nama Twitter anda dengan nama akun twitter sobat.
*cari lagi pada kode NamaTwitterAnda http://UrlSitusAnda/
ubah lagi  NamaTwitterAnda dengan nama twitter sobat, lalu UrlSitusAnda dengan URL situs blog sobat.

setelah selesai kemudian sobat SAVE dan lihat hasilnya..

follow to my twitter akun:

@fadlypuccino

Friday, January 14, 2011

Tips Trik Blog: Cara Membuat Kotak Tukeran Link (Link Exchange)

Berikut ini adalah contoh dari Kotak Tukeran Link (Link Exchange) yang saya buat, dan di luar sana masih ada banyak sekali versi dari kotak Tukeran Link yang bisa sobat temui, dan Kotak Tukeran Link di Blog sobat ini wajib ada untuk memudahkan pengunjung dalam bertukar Link dengan Blog kita.
Tujuan dari sobat untuk membuat Kotak Tukeran Link ini dimaksudkan supaya para pengunjung yang akan bertukar Link dengan Blog sobat tidak perlu kerepotan lagi untuk membuat sendiri kode Link HTML dari Blog sobat, jadi pengunjung nantinya hanya tinggal mencopy pastekan saja kode Link Html yang menuju ke Blog sobat. .

Kembali ke Trik awal bagaimana untuk membuat Kotak Tukeran Link,
Cara kerja dari Kotak Link diatas adalah, disaat pengunjung menekan Web Button yang bertuliskan "Tekan Lalu CTRL + C" maka kode Html yang ada didalam kotak tukeran link tersebut akan otomatis terBlok sehingga sobat hanya perlu menekan "Ctrl + C" (copy) saja..

Berikut adalah Script dari Kotak Tukeran Link diatas:


<div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Tekan lalu CTRL+C" /> </div> <div align="center"> </div> <div align="center"> <textarea cols="25" name="txt" wrap="VIRTUAL">Taruh Link Blog Sobat Disini</textarea></div> </form> </div>

Kode Html diatas bisa langsung sobat tambahkan kedalam Widgets Html sobat dan bisa diberi nama "Tukeran Link Yuk".
Mudah Bukan, selanjutnya tinggal sobat kreasikan sendiri sesuka hati sobat..

Friday, January 7, 2011

Tips Trik Blog: Pasang Widgets SMS Gratis Yuk Di Blog Sobat

Selamat Datang di Tips Trik Blogs, Blog yang isinya Tips Trik Blog | Free Blogger Widgets | Informasi Menarik Di Bidang Teknologi dan IT.
Tips Trik Blog kali ini akan membahas mengenai Cara memasang Widgets SMS Gratis di Blog Sobat.

Widgets SMS Gratis ini memungkinkan anda untuk mengirimkan SMS gratis ke semua operator SMS.
Lumayan bergunakan disaat sobat gak punya pulsa untuk kirim SMS, cukup dengan memasang Widget ini di blog sobat, sobat bisa langsung mengirimkan SMS dengan gratis.

Contohnya Widgetsnya seperti ini:
Sobat tinggal memasukkan no. Hp tujuan dan mengetikkan kata-kata yang akan dikirim.

cara Pakai Widgets SMS Gratis:
1. ketikkan no.Hp Tujuan Sobat
2. ketikkan isi SMS yang akan sobat kirim
3. Jawab pertanyaan verivikasi diatas tulisan "KIRIM SMS", jika tidak keliatan bisa di BOLD disekitar area itu.
4. clo udah sekarang klik "KIRIM SMS" untuk mulai mengirim.

Nah Scriptnya seperti dibawah ini:

<div style="border: 1px solid rgb(153, 153, 153); height: 310px; overflow: auto; padding: 10px; width: 200px;">
<iframe name="blacksms" src="http://www.sms-online.web.id/widget/black.php" style="border:0" scrolling="no" width="170" height="310"> not support </iframe></div>

tau kan cara masukinnya?
Taruh di Widgets Blog Sobat.

Sekian Tips Trik Blog saya kali ini, terima kasih sudah menyimak, dan jangan lupa untuk memberikan komentar yang positif demi kemajuan blog ini.
Jika ingin melihat lebih banyak Tips Trik Blog lebih banyak lagi, bisa kunjungi Tips Trik Blogs, disana juga terdapat Free Blogger Widgets alias widgets blog gratis yang bisa anda terapkan untuk mempercantik tampilan Blog anda

Sunday, January 2, 2011

Tips Trik Blog: Cara Memasang Widget Sudoku Di Blog

Selamat Datang di Fadlypuccino Blogs, Tips Trik Blog | Free Blogger Widgets.
Tips Trik Blog kali ini akan membahas mengenai Cara Memasang Widget  Sudoku Di Blog.

sobat sudah pada tau kan apa itu Sudoku?
Sudoku adalah sejenis permainan menjumlahkan angka-angka disetiap barisnya hingga mencapai jumlah yang sama. (agak ribet sih ngitungnya )..
Yupz.. disini saya akan menjelaskan bagaimana caranya agar Blog anda dapat Dipasangi Widgets Sudoku ini.
Langsung aja cekidot..

Pertama, Login ke akun blogger sobat
pilih menu Rancangan - Elemen Halaman - Pilih tempat yang akan sobat taruh Widget Sudoku ini - Add Gadgets - Pilih yang Html/Javascript.
terus copy dan pastekan kode dibawah ini:


<div class='widget-content'>
<br />
<iframe scrolling="no" bgcolor=000000 frameborder="0" width="100%" src="http://www.odyssey.ie/sudoku/sudoku-google.html" height="260">
</iframe>
<p>created by:<a href: http://www.fadlypuccino.co.cc/>Tips Trik Blogger</a></p>
<br />
</div>

Kalau sudah Sobat SAVE template sobat, dan langsung lihat hasilnya.
Neh gan clo mw nyoba maenin..







Sekian Tips Trik Blog saya kali ini, terima kasih sudah menyimak, dan jangan lupa untuk memberikan komentar yang positif demi kemajuan blog ini.
Jika ingin melihat lebih banyak Tips Trik Blog lebih banyak lagi, bisa kunjungi Fadlypuccino Blogs, disana juga terdapat Free Blogger Widgets alias widgets blog gratis yang bisa anda terapkan untuk mempercantik tampilan Blog anda

Saturday, January 1, 2011

Tips Trik Blog: Cara Membuat Kotak Scroll dan Scroll Berjalan

Welcome in Fadlypuccino Blogs, Tips Trik Blog | Free Blogger Widgets
Tips Trik Blog kali ini akan membahas mengenai Bagaimana Cara Membuat Kotak Scroll dan Scroll Berjalan.
Membuat Kotak Scroll biasa. 
Kotak scroll dipakai untuk menyederhanakan tampilan widgets supaya dapat menghemat ruang pada Blog sobat.


langsung aja, sobat masuk dulu ke akun Blogger sobat.
masuk ke Tata Letak - Elemen Halaman - Tambah Gadget - Edit HTML/ Javascript
lalu masukan kode berikut:


<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
.:ISIKAN KODE WIDGETS YANG AKAN DIBERI KOTAK SCROLL:.
 </div>

Setelah itu sobat SAVE.
Selesai.

 Membuat Kotak Scroll Berjalan (Blogroll). 

lakukan cara yang sama dengan cara diatas, lalu tambahkan kode berikut:

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>
 

 Jadi clo digabungin semuanya jadinya:
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >
.:ISIKAN KODE WIDGETS YANG AKAN DIBERI BLOGROLL:.
</marquee> 
</div>
Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.
 
Selamat Mencoba gan..

Friday, December 24, 2010

Tips Trik Blog: Cara Memasang Multi Tab Blogger

Selamat Datang di Fadlypuccino Blogs, Tips Trik Blog | Free Blogger Widgets.
Tips Trik Blog kali ini akan membahas mengenai Cara Memasang Multi Tab Blogger.
Multi Tab blogger adalah sebuah tab menu yang biasanya memuat 2-3 menu sekaligus dalam satu tab menu, selain sebagai pemercantik tampilan pada blog anda, tab ini juga bisa menghemat ruang pada blog anda.

Pertama, yang harus sobat lakukan adalah Login dulu kedalam akun blogspot sobat.
kemudian, masuk ke Menu Rancangan - Pilih elemen halaman - Add Gadget - Pilih yang HTML/ Javascript.
setelah muncul kolom HTML/javascriptnya, sobat copy dan pastekan kode berikut:


<style>
/* Modified By Fadlypuccino */
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #D8D8D8; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Tahoma", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
/* Modified By Fadlypuccino */
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
color: #fff;
background-image:url('http://lh3.ggpht.com/_TWC8zfBIdik/S_mtk3GmCTI/AAAAAAAAA0Y/Icb5zF59LTw/h2.gif'); /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #D8D8D8; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #fff; /* Warna background Kotak Utama */
}
/* Modified By Fadlypuccino */
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/* Modified By Fadlypuccino */
</style>

<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs"> <!-- 450 adalah lebar boks tab -->
<a>Tab 1</a> <!-- Tab 1 adalah judul menu tab 1 -->
<a>Tab 2</a> <!-- Tab 2 adalah judul menu tab 2 -->
<a>Tab 3</a> <!-- Tab 3 adalah judul menu tab 3 -->
</div>
<div style="width: auto; height: 350px;" class="Pages"> <!-- 250 adalah tinggi boks tab -->

<div class="Page">
<div class="Pad">
ini isi tab pertama
</div>
</div>

<div class="Page">
<div class="Pad">
ini isi tab kedua
</div>
</div>

<div class="Page"> <!-- Buat bikin tab baru -->
<div class="Pad"> <!-- CONTENT -->
ini isi tab Ketiga <!-- ISI CONTENT -->
</div> <!-- jangan lupa ditutup -->
</div> <!-- jangan lupa ditutup -->

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

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

clo sudah, saobat SAVE. dan tinggal sobat kreasikan sendiri sesuai kemauan sobat.
hasilnya akan seperti ini (Multi Tab di Blog saya):
Sekian Tips Trik Blog saya kali ini, terima kasih sudah menyimak, dan jangan lupa untuk memberikan komentar yang positif demi kemajuan blog ini.
Jika ingin melihat lebih banyak Tips Trik Blog lebih banyak lagi, bisa kunjungi Fadlypuccino Blogs, disana juga terdapat Free Blogger Widgets alias widgets blog gratis yang bisa anda terapkan untuk mempercantik tampilan Blog anda

Monday, December 20, 2010

Tips Trik Membuat Kotak Email Berlangganan

Welcome guyz,
saya akan sedikit menjelaskan mengenai Tips trik Blog bagaimana membuat kotak email berlangganan.
pada tips trik blog ini anda diharuskan untuk mendaftar di feedburner.com, setelah itu nanti akan didapat alamat feedburner kalian.
buka menu rancangan (design) pada blog kalian.
lalu pilih add a gadget, pilih HTML/ javascript dan pilih tempat dimana kotak email ini akan ditampilkan,
setelah itu masukkan kode berikut:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FadlypuccinoBlogs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="FadlypuccinoBlogs" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Hasil tampilannya:

Enter your email address:

Delivered by FeedBurner


fadlypuccinoblogs : fadlypuccino adalah username saya, ini biasanya sudah disesuaikan dengan milik anda
enter your email address : bisa anda ganti >> masukkan email anda untuk berlangganan artikel kami gratis
subscribe : agar lebih akrab bisa anda tulis “berlangganan”
delivered by bla bla bla sampai bisa anda hapus jika tidak ingin tulisan,
Sekian tips trik blog kali ini, klik free blogger widgets  untuk tips trik blog dalam membuat widgets.
Jika berkenan bisa memberikan komentar.

Tuesday, December 14, 2010

Membuat Widget Recent Post

Widget recent post digunakan untuk menginformasikan artikel apa saja yang baru kita posting.
contoh gambarnya seperti dibawah ini.

langkah-langkah membuatnya;
1. Login dulu ke akun Blogger anda.
2. masuk ke menu rancangan
3. pilih elemen halaman,
4. pilih javascript/html
5. masukkan kode berikut

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:515px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
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 = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://alamatblogsobat.blogspot.com/";

limitspy=7
intervalspy=4000

</script>

6. Simpan

Mudah bukan?

Wednesday, December 8, 2010

Membuat Widget Popular Post Sendiri Yuk. .


Widget popular post biasa digunakan untuk menarik perhatian pengunjung blog karena terdapat artikel-artikel kita yang paling banyak comment, langsung aja saya jelaskan bagaimana membuat widget popular post versi paling baru.
Sebenarnya sudah ada banyak tutorial yang menjelaskan bagaimana membuat widget ini, namun ini cara yang paling simple dan yang paling baru.

1. Login dulu ke akun blogger anda.
2. Masuk ke menu Design ->> Add Gadget ->> pilih javascript/HTML
3. Silahkan anda pilih widget ini mau diletakkan disebelah mana, intinya harus diletakkan diposisi yang mudah dilihat oleh pengunjung blooger.
4. Copy kan script berikut ini.

<script language='javascript'>
aBold = false;
numposts=200;
maxshowresult=10;
home_page = "http://BlogAnda.blogspot.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>

5. Beri judul “Popular Post”
6. Kalau sudah anda lihat dulu dibagian Preview, clo dah pas boleh anda Simpan/SAVE.
Keterangan:
aBold = false; maksudnya adalah jika anda mengganti dengan true maka tulisannya akan bercetak tebal
numposts=200; maksudnya adalah hasil dari penelusuran 200 postingan
maxshowresult=10; ini untuk menampilkan jumlah maksimal popular post anda.
home_page = "http://BlogAnda.blogspot.com/"; Dibagian ini anda harus memasukkan alamat URL anda.

Gimana, mudah bukan?
Jika berkenan, silahkan berkomentar atau di coba.
Salam Blogger.

Sunday, December 5, 2010

Membuat Tab View 3-in-1

Menu tab view adalah sebuah tab menu yang biasanya memuat 2-3 menu sekaligus dalam satu tab menu, selain sebagai pemercantik tampilan pada blog anda, tab ini juga bisa menghemat ruang pada blog anda.

Cara membuatnya, anda  pergi ke menu rancangan/ design, lalu pilih edit html, kemudian anda cari kode seperti ini: ]]></b:skin>
Lalu setelah ketemu, anda copy dan pastekan script dibawah ini sebelum kode diatas.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Untuk merubah/mengedit tampilan warna/font dari tab ini, lihat keterangannya yang diberi warna merah tersebut.
Untuk mencari kode warna bisa dilihat DISINI
Kemudian cari kode </head> pada template anda, lalu anda copy dan pastekan script dibawah ini sebelum kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

Setelah selesai anda pilih SAVE.
Lalu anda pergi ke page elemen/ elemen halaman,
Pilih Add Gadget -> HTML/ Javascript pilih tempat dimana akan anda letakkan Tab Menu ini.
Lalu pasang/masukkan script dibawah ini:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

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

Keterangan:
Angka yang berwana biru itu adalah ukuran tinggi dan lebar tab menu ini.
Kode dengan warna hijau ini adalah tulisan untuk Menu utama /Menu Atas.
Kode yang berwarna merah adalah isi dari tab view ini, anda bisa mengeditnya sesuka hati anda.

Intinya adalah bagaimana anda mengkreasikan tampilan menu view ini agar terlihat lebih bagus, anda bisa menambahkan hyperlink dari tulisan/artikel anda didalam menunya.

Jika anda masih bingung, anda bisa bertanya dan memberi komentar pada tulisan ini.
Jika anda ingin mencopy artikel ini harap mencantumkan alamat blog ini.
salam blogger.

Tuesday, November 30, 2010

Memasang Widget Blog Translator

Pada tutorial kali ini saya akan menjelaskan sedikit bagaimana cara untuk memasang widget Blog translator, saya menggunakan "Google Translator".
Pada menu Design(Rancangan), Pilih elemen halaman, lalu klik add a gadget, lalu pilih yang HTML/javascript,
copy dan pastekan kode berikut.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Untuk judul bisa dengan "Translator" atau "Change Language"
Klik SAVE untuk menyimpan.


Lihat juga artikel saya lainnya


  1. Membuat Widget Label Dengan Efek Berputar
  2. Memblok Menu Klik Kanan Pada Mouse
  3. Kode-Kode Warna Buat Blog
  4. Format Teks Html

Top 10 Widget and Addons for Blogger

Ini dia 10 Widget yang paling banyak digunakan oleh para blogger,
Cekidot. .

1. Whos.amung.us adalah sebuah widget dimana kita bisa mengetahui berapa banyak jumlah pengunjung yang sedang online pada blog anda.
2. Blogumus, buat kalian yang tidak mngetahui apa itu Blogumus, bisa mengklik disini. Blogumus adalah widget dimana akan menampilkan label yang bisa bergerak dengan menggunakan aplikasi flash object.
3. Feedjit, sama seperti Whos.amung.us namun pada feedjit kita bisa mengetahui informasi lebih lanjut mengenai pengunjung di blog kita mengenai artikel yang ia baca dan dari Negara mana.
4. Google Translate, dengan menambahkan widget ini pada blog anda maka pengunjung luar akan lebih mudah menerjemahkan bahasa pada blog kita ke bahasanya.
5. Popular Post, dengan widget ini pengunjung akan mengetahui artikel mana yang banyak/ sering dikunjungi, otomatis mereka pun akan membaca artikel tersebut.
6. Recent Post, widget yang akan menampilkan artikel apa saja yang terakhir anda postkan.
7. Label, dengan widget ini pengunjung akan lebih tertarik untuk membaca blog anda dengan hanya membaca kata kuncinya.
8. Shoutbox, widget yang bisa untuk melakukan chat pada blog kita, pengunjung bisa saling menyapa lewat chat untuk saling mengunjungi blognya, namun kekurangan widget ini adalah kata-kata yang ditampilkan pada kotak chat tidak bisa di moderasi.
9. Twitter Badge, memungkinkan kita untuk menampilkan tweets terakhir kita pada blog anda, lumayan untuk menambah jumlah follower/pengikut.
10. Blog Archive, dengan widget ini kita bisa mengetahui artikel apa saja yang telah kita postkan yang di tampilkan dengan label tahun pembuatannya.


Lihat juga artikel saya lainnya


  1. Membuat Widget Label Dengan Efek Berputar
  2. Memblok Menu Klik Kanan Pada Mouse
  3. Kode-Kode Warna Buat Blog
  4. Format Teks Html

Membuat Label Blogumus 100% Work

Blogumulus adalah widget dengan menggunakan flash object dimana akan menampilkan tampilan Label pada blog anda terkesan berputar/bergerak, very nice cool effect,
Ada banyak tutorial yang membahas cara memasang widget ini pada Blogger, namun kebanyakan tidak bisa dijalankan pada blog anda,
Langsung saja kalau begitu. .
Pergi ke menu layout > Pilih edit HTML > dan kemudian cari tag seperti ini.
<b:section class='sidebar' id='sidebar' preferred='yes'>
Atau seperti ini.
<div class="main section" id="main2">
Setelah ketemu, maka copy dan pastekan script di bawah ini tepat dibawah tag diatas,

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://mopheat.site40.net/recources/tagcloud/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://mopheat.site40.net/recources/tagcloud/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Untuk melihat previewnya, jika anda menginstal secara benar, maka akan muncul sidebar “label” di blog anda
Jika telah sesuai maka klik SAVE.

Selanjutnya kita atur warna dasar, ukuran dan letaknya.

Settingan defaultnya adalah sebagai berikut:
  1. Lebar 240px
  2. Tinggi 300px
  3. Warna Background Putih
  4. Warna text Abu-abu
  5. Ukuran font 12

Merubah Ukuran Tinggi dan Lebar
cari kode seperti ini:

var so = new SWFObject(&quot;http://mopheat.site40.net/recources/tagcloud/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

Yang Warna merah adalah lebar
yang warna biru adalah tinggi

Mengubah Warna Background

Masih dengan kode yang sama, background warna putih ditunjukan dengan kode #ffffff
Kode tersebut bisa anda ganti sesuka anda.
Klik disini untuk mengetahui kode-kode warna pada blog
Merubah Warna Text

Cari kode seperti di bawah ini:

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

Dengan mengubah angka 333333 kita sudah bisa merubah warna textnya.

Mengatur Ukuran Font
Cari kode seperti di bawah ini:

so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

Ukuran font yang dipakai adalah "12", anda bisa merubah font standar tersebut dengan ukuran yang anda inginkan.

Klik disini untuk mengetahui kode-kode warna pada BLog
Thats So Easy. .