Sahara Simple Website

Cara Membuat Recent Comment Scroll Pada Blog

2012-02-06T04:33:00.000-08:00

Banyak cara untuk membuat recent comment atau komentar terbaru di blogger. Baik melalui menu widget bawaan blogger maupun memasukkan sendiri kode html. Kalau menurut saya ...sich paling bagus kode html. Sebab menu bisa di kustomisasi sendiri. Widget Recent Comment / komentar terbaru sangat berguna untuk admin blog untuk memantau komentar - komentar terbaru di blog. Daripada anda pusing membuka satu - persatu komentar yang ada di postingan.

Untuk membuat recent comment scroll , ikuti langkah - langkah berikut :

1. Login ke account Blogger anda.

2. Masuk ke menu Rancangan. Tambahkan widget baru dengan memilih HTML/Javascript

3. Masukkan script berikut :

<div style="overflow: auto;width: 200px;height: 300px;text-align: left; "><script style="text/javascript"> function showrecentcomments(json) { var numcomments = 20; var showcommentdate = true; var showposttitle = true; var numchars = 100; for (var i = 0; i < numcomments; i++) { var entry = json.feed.entry[i]; var alturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); var postlink = alturl.split("#"); postlink = postlink[0]; var linktext = postlink.split("/"); linktext = linktext[5]; linktext = linktext.split(".html"); linktext = linktext[0]; var posttitle = linktext.replace(/-/g," "); posttitle = posttitle.link(postlink); var commentdate = entry.published.$t; var cdyear = commentdate.substring(0,4); var cdmonth = commentdate.substring(5,7); var cdday = commentdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; if ("content" in entry) { var comment = entry.content.$t;} else if ("summary" in entry) { var comment = entry.summary.$t;} else var comment = ""; var re = /<S[^>]*>/g; comment = comment.replace(re, ""); document.write('<br/>'); if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' '); document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> berkomentar'); if (showposttitle == true) document.write(' di ' + posttitle); document.write('<br/>'); if (comment.length < numchars) { document.write('<i>'); document.write(comment); document.write('</i>');} else { document.write('<i>'); comment = comment.substring(0, numchars); var quoteEnd = comment.lastIndexOf(" "); comment = comment.substring(0, quoteEnd); document.write(comment + '...<a href="' + alturl + '">(selanjutnya)</a>'); document.write('</i>');} document.write('<br/>'); } document.write('<br/>'); } </script> <script src="http://saharacreatingwebsite.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script></div>

5. Simpan widget kamu dan silakan lihat hasilnya

PESAN :

- Dalam teks warna biru, masukkan url blog anda
- Dalam teks warna merah, masukkan banyaknya komentar yang anda inginkan.
- Kode warna #ffffff, bisa anda ganti warnanya di kode warna di blog ini

Anda bisa melihat contoh dalam daftar komentar saya. Banyaknya komentar yang saya tampilkan sebanyak 20 dan dilengkapi dengan menu scroll.

Semoga bermanfaat.

Memasang Translate Gadget Google.com

2012-02-06T04:16:00.000-08:00

Translator Gadget yang dirilis dengan menggunakan engine dari Google Translate.

Kini, saat ada pengunjung masuk ke situs anda dan saat bahasa mereka (yang ditentukan dari bahasa yang dipake di browser mereka) berbeda dengan bahasa di situs anda, maka mereka akan secara otomatis diberikan banner notifikasi untuk mentranslate bahasa situs anda ke bahasa mereka. Namun jika bahasa mereka sama dengan bahasa di halaman situs anda, maka Website translator Gadget ini tidak akan memunculkan banner atau notifikasi untuk mentranslate situs anda.

Saat Mereka memilih mentranslate situs anda, maka mereka bisa membaca situs anda dalam bahasa yang mereka inginkan.

Anda ingin memasang fitur Google translator di situs anda? berikut ini saya beri tutorialnya happy

1. Klik disini untuk masuk ke Homepage Website Translator Gadget.

2. Pada “Select the language of your webpage” isikan bahasa asli website anda

3. Pada “Choose optional settings” pilih bahasa yang anda inginkan untuk bisa ditranslate dari website anda, lebih baik pilih semua bahasa atau “All Languages”

4. Copy kode yang ada di kotak “Copy and paste this snippet of code into your webpage” dan paste di halaman kode website anda. jika anda menggunakan blog wordpress, bisa anda paste di widget anda.

LinkWithin Untuk Membuat Artikel Terkait

2012-02-06T04:08:00.000-08:00

LinkWithin adalah sebuah website penyedia widget blog untuk menampilkan artikel terkait atau related post pada blog anda. Dengan tool ini kita tidak perlu susah payah memasukkan kode html dalam blog anda. Anda bisa langsung memasukkan widget tanpa perlu registrasi segala. Dan prosesnya pun cepat dan mudah sekali. Widget ini berfungsi pada beberapa platform blog dan website.

Memang...sich terkadang widget ini membebani waktu loading blog kita. Karena widget ini berusaha mencari artikel terkait dan gambar terkait yang ada. Tapi asyiknya...widget ini akan terload sendiri dan mencari sendiri artikel terkait yang ada. Dan kecanggihan widget ini adalah mampu menampilkan dan mencari thumbnail gambar atau video yang ada di artikel. Kenapa saya putuskan memakai widget ini. Karena saya tipe orang yang senang gonta ganti template blog. Dan terkadang script untuk menampilkan artikel terkait tidak akan berfungsi di template blog tertentu. Jadi saya putuskan untuk memakai widget ini karena kepraktisannya. Tanpa perlu coding dan widget akan bekerja sendiri. Jika sobat tertarik silakan memakai widget ini dengan mengklik link LinkWithin pada artikel terkait dibawah blog ini.

Untuk membuat artikel terkait di Blog silahkan masuk ke linkwithin.com

Semoga membantu mempercantik blog anda

Membuat Script Anti Bajak - Anti Copy Paste

2012-02-06T04:01:00.000-08:00

Anda mau memproteksi tulisan anda (Anti Copy Paste) dari orang iseng? Oke disini saya akan sedikit share ilmu, mudah-mudahan bermanfaat untuk anda.

Silakan Login » Rancangan » Edit HTML »

Cari kode <head> untuk memudahkan mencari tekan ctrl F atau F3. Kemudian kamu copy paste kode di bawah ini persis dibawah kode <head>

<SCRIPT type="text/javascript"> if (typeof document.onselectstart!="undefined") { document.onselectstart=new Function ("return false"); } else{ document.onmousedown=new Function ("return false"); document.onmouseup=new Function ("return true"); } </SCRIPT>

Jika mau normal seperti semula lagi dan anda mengizinkan orang lain untuk mengcopy artikel anda, silakan hapus kode tadi.

Oke Selamat mencoba.

Membuat Pesan Ketika Blog Dibuka atau Ketika Blog Ditutup

2012-02-06T03:58:00.000-08:00

Membuat Pesan Ketika Blog Dibuka atau Ketika Blog Ditutup ~ Saya akan membuat pilihan membuat pesan Pesan ketika blog dibuka atau ketika Blog ditutup yang biasanya banyak digunakan para Blogger, baik untuk pesan pribadi, ataupun link Bisnis online.

1. Membuat Pesan ketika blog dibuka

1.Masuk Dasbor
2.Tataletak
3.Tambah gadget pilih HTML/JavaScript
4.Copy dan Paste Code berikut

<script language='javascript'>alert("Selamat datang di blog Situs kami");</script> <script language='javascript'>alert("Semoga anda senang");</script>

<script language='javascript'>alert("tolong beri komentarya");</script> <script language='javascript'>alert("tekan ok atau cancel untuk masuk ");</script>

Teks berwarna merah dapat diganti sesuai dengan Keinginan Anda.

Lalu Save

2. Membuat Pesan Penutup Saat Blog ditutup

Langkah-langkahnya adalah sebagai berikut :
Log-in ke blog>>Rancangan/Tata letak>>Edit HTML, jangan lupa centang expand, lalu
Cari kode </head> gunakan tombol (ctrl + F atau F3) untuk mencari kode. Setelah ketemu Copy

Kode berikut :
<script type='text/javascript'> // goodbye alert function goodbye(){ alert('Tulis pesan penutp disini'); } parent.window.onunload=goodbye; </script>

Letakan/Paste kode tersebut dibawah Kode </head>
klik simpan dan selesai

SEMOGA BERMANFAAT

Cara Membuat Chatbox Show - Hide (Muncul dari Atas)

2012-02-06T03:52:00.000-08:00

Cara Membuat Chatbox Show - Hide (Muncul dari Atas) ~ Seperti yang telah diposting sebelumnya buku tamu membuat Shoutmix/Chatbox/Shoutbox Tersembunyi dibuka-tutup kali ini saya posting buku tamu model baru lagi yaitu membuat Chatbox/Shoutbox yang muncul dari atas (show/hide)

Cara membuatnya :
Login blogger
Rancangan, Tambah Gadget, Html/Java Script
Dan Simpan kode berikut :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
float:left;
border:2px solid #0F0;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">



<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script></div>

<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZ-W-orawyn5xVufrXry0b3FoyOGOmBAtOFQkJ66nLixjP0RFcDHLcAw49rVY55kCao_Z-XT2zmD5GGaiiGemn5PcrZ94ovAAotAdFFXGowWs5JodVrMR8g-a362MogZ-C4BhQuuMI6I/s1600/Guestbook.png" border="0" /></a>

4. Simpan dan lihat hasilnya

Jika kawan-kawan ingin Tab Image Guestbooknya melayang disamping Blog gunakan Script
yang ini :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
border:2px solid #4173af;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbcontent">

<TARUH CHATTBOXNYA DISINI>

<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script>

<div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu">
<img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbynVU0SzbWQk73zr59KZR_kxGeKhdTO2eaHDHp1GRk1HEA_RaTEcXaLoU_-0CU87Gi9tVwH0Zyf7dUGTU2ckuk__saWhnFBUd9e4OOgwvuiNltwesJ9uRzEarEb3bf6P0JC5GgaPjmd4/s1600/Guestbook.png" border="0" /></a></div>

Update : Sekarang Shoutmix sudah tidak Free Lagi jadi gunakan Chattbox saja.
Selamat mencoba

Membuat Chatbox Tersembunyi Yang Dapat dibuka-ditutup

2012-02-06T03:47:00.000-08:00

Nah pada tutorial ini aku mau sharing lagiccara masang chatbox/buku tamu di blog. Sebenarnya sudah banyak yang buat tentang tutorial ini. Tapi ya sebagai penambah daftar di google, aku buat lagi aja. Oks , tanpa banyak basa basi kita mulai sekarang.

Pertama-tama, kamu harus punya chatbox account dulu...

Pasang Chatbox Tersembunyi/dibuka-tutup Versi 1

Langkah-langkah :

1. Login Blogger.com.
2. Masuk ke Design ~> Elemen Laman
3. Tambeh Gadget
4. Pilih HTML/Javascript.
5. Masukkan kode berikut pada gadget Anda.

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #000;
background:#ffffff;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup ]</b></a></div>

Masukan Kode Chatbox anda di sini

<script src="http://www.geocities.ws/alprablog/user/js/hiddengb2.js"></script>
</td></tr></table>
</div>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i1202.photobucket.com/albums/bb372/alprablog/others/buku-tamu.png"/>
</a>
</div>

<body>

6. Simpan dan liat hasilnya.

Pasang Chatbox Tersembunyi/dibuka-tutup Versi 2

Seperti biasa :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Elemen Laman.
3. Tambah Gadget ~> HTML/Javascript
4. Masukan kode di bawah ini.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:125px;
width:30px;
float:left;
cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1251.cur), progress;
background:url('http://i1202.photobucket.com/albums/bb372/alprablog/others/buku-tamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #40d1fe;
background:#000000 repeat-y center;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Masukan Kode Chatbox anda di sini

<br />
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
<span ><a href="http://alprablog.blogspot.com/2011/06/pasang-chatbox-tersembunyi-versi-2.html" target='blank'><div style="color: rgb(68, 68, 68);">
<span style="font-size:xx-small;">Get This Gadget</span></div></a></span>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan : Ganti text yang berwarna Biru dengan kode Kode Chatbox Anda.

Membuat Tools Parse Sendiri

2012-02-06T03:19:00.000-08:00

Bagi teman-teman yang menginginkan pasang tool parse sendiri pada blogspot. Dapat membuatnya sendiri dalam blog anda.Kode yang anda paste begitu saja di blog akan menjadi kode yang terpasang dan aktif di blog, bukan kode yang tertampilkan pada postingan blog. Oleh karena itu kode tersebut harus di-parsing terlebih dahulu. Beberapa website yang menyediakan tool parse-html/html-parser/parsing-html/html-entities yang saya rasa sudah familiar di kalangan blogger yakni seperti Centricle dan Blogcrowds. Namun tentu saja cara tersebut tidak sebegitu ringkas jika anda memiliki sendiri tool tersebut yang terpasang di blog.

Sebelum membuat posting ini saya sempatkan untuk googling sejenak mencari cara memasang tool html parser di blog. Saya temukan beberapa cara yang menyediakan hal tersebut, namun terdapat link yang menuju pada website lain pada kode yang ditemukan. Hal ini tentunya mengurangi daya tarik bagi sebagian blogger.

Atas dasar tersebutlah kali ini saya akan berbagi bagaimana membuat tool parsing html dengan menggunakan kode javascript sederhana. Berikut adalah tool html parser yang saya buat. Anda pun dapat memanfaatkan tool dibawah ini untuk menampilkan kode html di blog Anda. (tool dibawah bukan iframe dari website lain)

Oke tanpa basa-basi lagi mari langsung kita simak bagaimana cara pembuatannya!

Sebelum anda beranjak ke bagian 'kode tinggal copas pasang', alangkah baiknya jika anda mengetahui cara kerja kode tersebut sehingga anda pun akan memahami kode tersebut. Cara kerja tool html-parser tersebut yakni berbasiskan pada kode javascript sederhana yang memuat fungsi replace pada kode-kode tertentu. Javascript tersebut akan mereplace kode < " & \' > menjadi < " & ' >

Mari kita lihat sejenak contoh yang saya ambil dari website pembelajaran kode pemrograman website TIZAG

JAVASCRIPT CODE
<script type="text/javascript">
var visitorName = "Chuck";
var myOldString = "Hello username! I hope you enjoy your stay username.";
var myNewString = myOldString.replace("username", visitorName);

document.write("Old string = " + myOldString);
document.write("<br />New string = " + myNewString);

</script>

HASIL REPLACE
Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay username.

Dengan melihat contoh sederhana kode diatas saya harap anda dapat mengerti dengan mudah. Baik sekarang langsung saja saya bagikan kode javascript yang memuat tool parsing html.

CODE JAVASCRIPT TOOL HTML-PARSER

<div style="text-align: center; width: 100%;">
<div style="margin: 0 auto; padding: 0; width: 100%;">
<div id="mainDiv" style="padding: 2px 0;">
<textarea cols="21" id="tarea" onfocus="code_check();" rows="10" style="font-size: 12px; height: 80%; width: 92%;"></textarea>
<div style="margin: 0 auto; padding: 5px 0; width: 95%;">
<button onclick="code_convert();" style="margin-right: 5px;" type="button">Konvert</button>
<button onclick="code_clear();" style="margin-left: 5px;" type="button">Hapus</button> </div>
</div>
</div>
</div>
<script>
function code_check(){
var focuscheck=document.getElementById('tarea');if(focuscheck.value.indexOf('Pastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog')>0)focuscheck.value='';}
function code_clear(){
var wtarea=document.getElementById('tarea');wtarea.value='';}
function code_convert(){
var ctarea=document.getElementById('tarea');var toConvert=ctarea.value;
var toConvert=toConvert.replace(/&/g,"&");
var toConvert=toConvert.replace(/'/g,"'");
var toConvert=toConvert.replace(/"/g,""");
var toConvert=toConvert.replace(/</g,"<");
var toConvert=toConvert.replace(/>/g,">");
ctarea.value=toConvert;ctarea.focus();ctarea.select();};
var x=document.getElementById('tarea');x.value='\nPastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog\n\nTool ini Meng-konversi Kode sbb:\n < " & \' >\nmenjadi\n < " & ' >\n\nCreated by Sahara Creating Websites';x.rows=gr;
</script>

Hasilnya seperti ini :

Silahkan copy-paste kode diatas pada blog atau website. Anda dapat meletakkannya pada bagian widget ataupun pada satu halaman tersendiri. silahkan Ganti dengan alamat blog anda sendiri

Semoga postingan saya kali ini bermanfaat. Bagi yang tidak sabar untuk mencobanya di blog/website masing-masing, segeralah mencobanya!

4 Situs Parse Html

2012-02-06T03:11:00.000-08:00

Mungkin banyak sekali sekali situs untuk memparse Html namun yang saya temukan baru 4 buah situs untuk memparsekan html baik itu script iklan adsense, chikita, bidvintiser, dan sederetan pay per click baik lokal maun non lokal yang akan dipasang pada blog kita. Nah sebelum dipasang ada baik diparsekan dulu dalam situs Parse tersebut yaitu :

1. http://www.blogcrowds.com/resources/parse_html.php
2. http://centricle.com/tools/html-entities/
3. http://accessify.com/tools-and-wizards/
4. http://obfuscatorjavascript.com/

Parse Tools Sendiri

Cara memasang kode Html Iklan di Atas/di Bawah di Postingan

2012-02-06T03:02:00.000-08:00

Cara memasang Code Html Iklan di atas/dibawah di Posting Blog

Saya mungkin mengpostingankan 3 blogpost dalam 1 hari ini atau bahkan lebih, karna saya sangat hobby sekali ngeblog. Dan sekarang saya ingin mempostingkan tentang cara memasang kode html iklan di tiap postingan.
mungkin pada beberapa website seperti adsensecamp.com, chikita.com, ataupun PTC, PPC situs lain yang memberikan code html atau script iklan yang akan di pasang kan di blog terjadi error.
biasanya error karena mau di terapkan pada setiap postingan.

Saya juga pernah seperti itu dulu nya. tapi saya ingin berbagi tips nya kita harus mengparse kan Html iklan kita ke situs parse html

Cara Menampilkan Iklan/Signature pada tiap postingan adalah sebagai berikut :

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget, tekan Ctrl F
5. Cari kode <div class='post-header-line-1'/> atau <data:post.body/>

6. Masukan Kode yang akan di taruh pada tiap postingan. tapi ingat kode dari iklan harus dicopypastekan/diparsekan diatas<div class='post-header-line-1'/> atau <data:post.body/>, maka Iklan akan muncul diatas Postingan Blog, begitu juga sebaliknya jika dipastekan di bawah <div class='post-header-line-1'/> atau <data:post.body/>maka Iklan akan muncul di dibawah tulisan postingan

Cara Membuat Tombol Navigasi Ke Atas, Ke Bawah dan Refresh di Kanan Bawah

2012-02-06T02:54:00.000-08:00

Cara Membuat Tombol Navigasi Ke Atas, Ke Bawah dan Refresh di Blogspot yang berada dipojok kanan bawah caranya yaitu :

1. Klik Rancangan
2. Edit HTML
3. Carai kode ]]></b:skin>
Untuk mempermudah pencarian tekan Ctrl + F atau (F3) di keyboard sobat Jika sudah ketemu

silahkan Copy kode dibawah ini dan letakkan diatasnya.

#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

Kemudian cari kode </body> dan letakkan kode berikut diatasnya.

<a name='shift-alone'/>
<div id='mangetsu'>
<table border='0'><tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQyTdynFgGbPVNP7cMzAfwbdbaFVZbLtPxFTIU07J0M_7H6Kxlil7NcGTvVDvMqK8W6LZO7v6dSe610n6gGgtX8Lo0WKvHXU6HdGhUbfljtnN0n8iJoVVIl_uXOkf9ixg44wlRoTiJLX-D/s320/home-icon.pn'/>
</a></td>
<td><a href='#' title='back to top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_w__nr572i9MPedPBWdhcHYBbesq6jeNy81r0RWk6uT6TNBgeFV5DKf35Gm7il6kIK2dJltVagbwY0LxW97tjCoF4PMQILDOBxl82RrxRGR3UVZVO5n8xjXUYxBi0Fu5SHFsmBFof7O9j/s320/up-icon.png'/>
</a></td>

<td><a href='#shift-alone' title='back to bottom'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha382KLF5p3rmkioZoPviIlhpalkRiRMWiVJykX4fxa50UtSjlByUBVJuAqtd2UbGGQto4ST3i_z0FecJo8EcuPtR0LKoKqCfjxtaRYkXWDRIzuM7Nsl0UUPGuvYxq4AxL3IntZQWV5vqh/s320/downicon.png'/>
</a></td>
<td><a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='http://i903.photobucket.com/albums/ac239/Dediekusmayadi/Refresh-32.png'/>
</a></td></tr></table>
</div>

Untuk merubah widgetnya anda bisa membuatnya di photobucket, 000webhost.com yang dapat menyimpan file.

Selamat Mencoba

Membuat Tombol suka/Face book Like Button di bawah Artikel

2012-02-06T02:41:00.000-08:00

Membuat like buton Facebook pada bawah artikel ini memungkinkan banyak pengunjung like buton ini sama dengan di bagikan jadi setiap orang yang kasih like/suka blog nya akan muncul di dinding facebook nya yang nge like jadi buat tambahan pengunjung semakin banyak yg nge like artikel semakin banyak yg berkunjung Saya langsung aja cara nya login ke bloger dengan user anda pilih dasbor klik Rancangan Edit Html klik centang dulu di expand widget template jangan lupa, lalu cari Kode

<div class='post-footer'>

untuk pencarian lebih gampang tekan citrl+f kalo sudah ketemu tambahkan kode ini di bagian kode yang warna merah

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&action=like&layout=button_count&show_faces=false&width=100&font=arial&colorscheme=dark"' frameborder='0' scrolling='yes' style='border:none; overflow:hidden; width:100px; height:21px;'/>

Lalu pastekan tepat di atas <div class='post-footer'>

Membuat Twitter Melayang di Blog (Plus Variasi)

2012-02-06T02:35:00.000-08:00

Bagi anda mungkin agak aneh mendengar nama Twitter Melayang apalagi kalau sudah sampai di beranda halamannya. Banyak yang pada bingung, buat apaan sih Widget Twitter melayang itu? Baca posting sebelumnya

Sama halnya seperti Facebook, Twitter juga termasuk social network yang sangat booming. Sampai-sampai setiap internet marketer memanfaatkannya sebagai media promosi yang sangat efektif (kecuali yang nggak ngerti gimana cara memanfaatkan Twitter).

Twitter merupakan salah satu situs jejaring sosial yang terkenal diantara para blogger dan netter. Widget untuk twitter ada banyak jenisnya dan kebanyakan dalam bentuk icon dan tombol yang bentuknya statis artinya hanya terpaku pada satu lokasi. Sekarang pada kesempatan kali ini saya mencoba memberikan informasi tentang salah satu widget twitter yang dinamis. Kalo widget ini di pasang di blog nya sobat pasti akan menambah daya tarik pengunjung yang sedang blog surfing di blognya sobat.

Widget Twitter ini berbasis plugin javascript yang akan menampilkan animasi burung twitter yang sedang terbang dan hinggap di area yang terlihat di monitor. Ketika cursor pengunjung mengenai burung twitter ini maka akan memunculkan teks "Follow Me" dan menampilkan link ke twitter sobat.

Pada postingan ini yang update untuk widget burung terbang melayang saya akan memberikan 2 Opsi penempatan animasi burung twitter yaitu sobat boleh menempatkan pada halaman utama saja atau pada semua halaman. Caranya sebagai Berikut :

Menampilkan Widget ini Hanya Pada Halaman Utama Saja

Login ke blog anda.
Klik dashboard > design > edit HTML.
Cari potongan kode xml pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser sobat untuk mempercepat pencarian).
```
</body>
```
Copy - Paste kode berikut ini tepat di bawah / di atas kode "</body>".

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- Twitter Bird Widget for Blogger edited by MonozCore -->

<script type='text/javascript' src='http://monozcore-project.googlecode.com/files/tripleflap.js'>

</script>

<script type='text/javascript'>

var birdSprite='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqqAa5yDjfSiW9W53nr69iggn2HyadtUIhSijXbY7V-lftXCpvhoyytjWbd1mpW1NRwWP-FErQDAvXES6WL8eTA2ru8dRm0RLFMTAvJ2v5e8h9KM3j2HFy97XXMubaqhn2jGiD-0Krsoc/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 = &quot;http://twitter.com/TwitterKamu&quot;;

var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;

tripleflapInit();

</script>

<!-- Twitter Bird Widget for Blogger edited by MonozCore -->

</b:if>

Kode yang berwarna biru berguna untuk pilihan animasi. Apabila sobat ingin mengganti animasi dengan Stickman sobat tinggal mengganti kode yang berwarna biru dengan kode untuk animasi Stickman.
Kode yang berwarna hijau merupakan kode untuk alamat akun twitter sobat. Silakan sobat isi sesuai dengan alamat akun twitter sobat. Caranya : ganti kode yang berwarna hijau dengan twitter.com/sobat yang mana sobat adalah alamat username twitter sobat.
Simpan kemudian lihat hasilnya.

Menampilkan Widget ini Pada Semua Halaman

Login ke blog anda.
Klik dashboard > design > edit HTML.
Cari potongan kode xml pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser sobat untuk mempercepat pencarian).
```
</body> 
```
Copy - Paste kode berikut ini tepat di bawah / di atas kode "</body>".

<!-- Twitter Bird Widget for Blogger edited by MonozCore -->

<script type='text/javascript' src='http://monozcore-project.googlecode.com/files/tripleflap.js'></script>

<script type='text/javascript'>

var birdSprite='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqqAa5yDjfSiW9W53nr69iggn2HyadtUIhSijXbY7V-lftXCpvhoyytjWbd1mpW1NRwWP-FErQDAvXES6WL8eTA2ru8dRm0RLFMTAvJ2v5e8h9KM3j2HFy97XXMubaqhn2jGiD-0Krsoc/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/TwitterKamu';

var tweetThisText = 'Twitter - Twitter kamu https://twitter.com/TwitterKamu/';

tripleflapInit();</script>

<!-- Twitter Bird Widget for Blogger edited by MonozCore -->

Kode yang berwarna biru berguna untuk pilihan animasi. Apabila sobat ingin mengganti animasi dengan Stickman sobat tinggal mengganti kode yang berwarna biru dengan kode untuk animasi Stickman.
Kode yang berwarna hijau merupakan kode untuk alamat akun twitter sobat. Silakan sobat isi sesuai dengan alamat akun twitter sobat. Caranya : ganti kode yang berwarna hijau dengan twitter.com/sobat yang mana sobat adalah alamat username twitter sobat.
Simpan kemudian lihat hasilnya.

Pilihan Animasi

1. Burung Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqqAa5yDjfSiW9W53nr69iggn2HyadtUIhSijXbY7V-lftXCpvhoyytjWbd1mpW1NRwWP-FErQDAvXES6WL8eTA2ru8dRm0RLFMTAvJ2v5e8h9KM3j2HFy97XXMubaqhn2jGiD-0Krsoc/s1600/birdsprite.png

2. Stickman Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQf7DgkBqDLYgAhujIpKkIsyN9sgi1ul7wVEO2isb8WSjVgUV6wx10UFEMLE6sKNU51bZzIZ64XLnXfUXwPS290-UD91H30BU4nQaAeKSJyMykLJe-D0FYbNJD5lqGpo5cE4dKSdeEdJQ/s1600/birdsprite_MonozCore_Stickman.png

3. Star Scream Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypNJsxH1FJaqdq6fKKm704VzuGpY8O8L9iCsysML5pC-FZr9vzoxKN236tRH1j9t6ghwniBBy7rKC7TuBeSWQPKdFuQgq3mYEkdCAtkrPMYwRDxu5yAKG50laPIvN7u46F7rGjcpw6j0/s800/MonozCore.blogspot.com_BatTwitter.png

4. SantaBird Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Zsdlc9ZRx5HJFZO-6u_dGXNQSKjiJMpEpyHAt2TIVzqGDX58iuXeiM3hyytpz11CqgNQF-klabDwv6LCwsJhsi6lEyUSxP2CvNhMXgZtNnHbouH8j2jHrZmyaKwhDGnHYO-xMK0xI9A/s800/MonozCore.blogspot.com_SantaBirdTwitter.png

5. Dragon Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Xx0lIeWiA6kpmmNZ0KyUgA0KHgsjaoIo8xZ-5GMYzjEYEj3pQ-C4qHddOxhQRo6NRNt7mXFido8Dgmzgg7moUyC4fDtHB5j3b1qSjGnI1vgjYcXLXAj9KjT656D0b2f6Mot49iNDpvg/s800/MonozCore.blogspot.com_Dragon_Twitter.png

7. DBZ Twitter

Sumber : http://situspencaridollar.blogspot.com

Membuat Cbox Muncul dari Atas /Show Hide

2012-02-06T02:14:00.000-08:00

Kenapa saya prioritaskan untuk chatbox karena shoutmix sekarang tidaklah gratis lagi

Untuk mmbuatnya Cukup Kopi paste kode berikut pada menu Rancangan, Edit Html, Tambah Gadget, dan Pilih Html/Java Script :

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#000;">



</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgER0cHtp-whM8_DU86YNNVADMOH6amqVI7tPaGLcKh3TQ2LQIfG_zaXRy8wzrVcvur4BAu0JAcpWL3KVT2cQXdpjQ0Uml9o_nX6eiSzVKNth2YsYnGBBYai7IBnRCJ_O2bDwnhrs8z2pA/s1600/CLOSE.png" alt="close" title="Click here to Close Cbox" /></a></div>

</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWoCp_KgL3p9b93ceHd683Yq69dZsDQb_rcMshpotH9RBUiwHAuGhPqgYYwKK9_cNkeiINPChYAq1YIzR6haJviZsqTjiM9mxi4jPlG2rhI3HYbFx8g16_HZktbTCYqwsWKdl8uCZRs5Q/s1600/guestbook.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

UP DATE : PAKAI CHATBOX SAJA SHOUTMIX SUDAH DITUTUP FREE ACCOUNT
Simpan........

Cara Mengganti Tulisan Beranda, Posting Lebih Baru dan Posting Lama dengan Icon

2012-02-06T02:06:00.000-08:00

Terkadang seorang blogger yang memiliki sebuah blog yang dibangun dengan Blogspot, ingin merubah tulisan Posting Lama dengan kalimat atau gambar sendiri, merubah tulisan posting baru degan kalimat atau gambar sendiri, merubah tulisan home dengan kalimat atau gambar icon punya sendiri.

Tentu saja masing-masing merka memiliki alasan tersendiri. Namun kebanyakan beralasan untuk mempercantik tampilan (kalau perubahan tersebut menggunakan gambar) dan untuk mempermudah pengertian yang lebih tepat (kalau perubahan tersebut mengunakan kalimat).

Persiapan :

Sebelum melakukan perubahan, sebaiknya back-up terlebih dahulu template Anda sebagai antisipasi kalau-kalau terjadi error.
Gunakan Ctrl+F untuk memudahkan pencarian Kode HTML
Siapkan 3 gambar kalau perubahan akan menggunakan gambar kemudain upload gambar tersebut ke Picasa Album atau ke tempat lain misalnya photobucket.com, imageshack.com, tinypic.com, dan sebaginya.
Catat seriap URL dari gambar yang bersangkutan.

Selanjutnya :

>> Login Blogger
>> Design / Rancangan
>> Html
>> Centang Expand Widget Template

Cari kode seperti ini

<data:newerPageTitle/>

lalu ganti dengan

<img src='http://i903.photobucket.com/albums/ac239/Dediekusmayadi/Left-48.png' border='0'/>

Kemudian cari lagi kode seperti ini <data:olderPageTitle/> ganti juga dengan gambar anda

<img src='http://i903.photobucket.com/albums/ac239/Dediekusmayadi/Right-48.png' border='0'/>

Cari Lagi kode seperti ini <data:homeMsg/> Ganti lagi

<img src='http://i903.photobucket.com/albums/ac239/Dediekusmayadi/Home-48.png' border='0'/>

Semoga bermanfaat...

Memasang Widget Feedback di Blogspot

2012-02-06T01:55:00.000-08:00

Memasang Widget Feedback di Blogspot caranya sbb:

1. Buat account anda di sini

2. Bila account sudah tercipta, langsung saja tuju ke menu Widgets

3. Pada halaman ini ada pilihan 4 widget yang bisa anda pilih sesuai keperluan. pilih saja salah satunya.

4. Kemudian pilih Get the code for this widget, silahkan dikupas saja semua kode.

5. Untuk cara memasangnya di blog/site sebenarnya disitu sudah ada petunjuk yang menyarankan kita meletakan kodenya sebelum tag , menurut saya lupakan cara ini, ada cara yang lebih mudah dimana kita bisa langsung meletakan semua kodenya pada Page Elements dengan menambahkan Add a Gadget.

6. Selesai, silahkan simpan pekerjaan anda dan lihat hasilnya, tidak susah bukan.

Cara membuat Tombol Icon Back to Top ( Kembali ke Atas ) di pojok kiri Blog

2012-02-06T01:25:00.000-08:00

Cara membuat Tombol Icon Back to Top ( Kembali ke Atas ) di Pojok kiri Blog caranya sebagai berikut :

Persiapan :

Sebelum melakukan perubahan, sebaiknya back-up terlebih dahulu template Anda sebagai antisipasi kalau-kalau terjadi error.
Gunakan Ctrl+F untuk memudahkan pencarian Kode HTML
Siapkan 3 gambar kalau perubahan akan menggunakan gambar kemudain upload gambar tersebut ke Picasa Album atau ke tempat lain misalnya photobucket.com, imageshack.com, tinypic.com, dan sebaginya.
Catat seriap URL dari gambar yang bersangkutan.

Halaman blog yang panjang mungkin salah satu hal yang tidak disukai oleh pembaca. Solusinya pada halaman home jangan terlalu banyak menyimpan jumlah artikel. sebaiknaya dalam halaman home mempunyai maksimal 5 - 10 artikel dan ditambah dengan pemanfaatan fungsi read more (baca selengkapnya).

Tapi kalau memang elemen blog atau artikel yang panjang bagaimana? pembaca akan lebih malas mengscroll kembali ke atas halaman page untuk mengakses menu lain. Kalau begitu silakan saja pasang "Icon Back To Top" (tombol Icon kembali ke atas) yang memungkinkan pembaca lebih mudah kembali ke atas halaman. Tombol Icon tersebut selalu terletak pada tempat atau posisi yang tetap walaupun adanya scrolling page.

Berikut kode "Icon Back To Top" (tombol Icon kembali ke atas) dan design yang dapat Anda pilih :

Cara Pertama Dengan Expand Template

Masuk ke dasbor > tata letak > edit html > Letakan kode di atas </body>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src=' Taruh alamat urlnya disini '/></a>

Cara ke dua hanya dengan Add New Gadget saja :

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="Taruh alamat urlnya disini"/></a>

Silahkan pilih menurut anda yang lebih mudah

SEMOGA BERFAEDAH

Membuat Kotak Search Engine Untuk Isi Blog Sendiri

2012-02-06T01:16:00.000-08:00

Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini adalah bagaimana Membuat Kotak Search Engine Untuk Isi Blog Sendiri.
Sebenarnya blogger telah menyediakan aplikasi ini coba lihat add gadget, edit tata letak, tambah kotak penelusurusan. Namun untuk membuat kotak penelusuran untuk tiap postingan di blog kita sendiri blogger tidak menyediakannya. Oleh karena itu banyak blogger yang menyediakan kotak search engine untuk isi hasil ngeblognya.

Adapun caranya sangat mudah, yaitu:

1. Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.

<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya

Semoga bermanfaat.

Membuat Javascript Milik Sendiri

2012-02-06T00:26:00.000-08:00

Membuat javascript milik sendiri ~ Kali ini saya akan membahas tentang cara Membuat Java Script Milik Sendiri. Manfaatnya yaitu File tersebut hanyalah milik anda pribadi dan tentunya kinerja blog anda bisa lebih optimal. Mengapa demikian ? Pernahkan ketika kita akan memasang sebuah aplikasi baik itu widget ataupun yang lainnya, lalu kita menemukan sederet Kode HTML yang harus di pasang di blog kita.

Seperti contoh kita menemukan sederet kode HTML untuk aplikasi Efek turun salju pada blog Dengan javascript debawah ini:

Perhatikan tulisan yang berkedip yang di awali dengan kode src yang berarti memanggil tulisan yang berwarna merah di akhiri dengan ekstension js yang berarti (Java Script). Coba bayangkan kalau ada 10 orang yang memasang aplikasi ini dengan kode di atas dan mereka membukanya secara bersamaan. maka tentunya blog kita akan terasa berat karena ke 10 orang tersebut hanya memanggil 1 file Java Script. Maka disinilah optimalisai blog diperlukan dengan Membuat Java Script Milik Sendiri.

Untuk itu kita harus hosting sendiri file Java Script tersebut dengan cara :

Download terlebih dahulu file Java Scriptnya dengan cara Copy Paste Link yang berwarna merah di atas Pada new tab browser lalu tekan Enter.
Maka akan muncul File Java script yang akan kita download, lalu tekan save file.
Buka File nya di folder tempat menyimpan hasil download lalu Rename dengan nama yang anda inginkan.
Setelah itu tinggal hosting file Java Script tersebut, untuk caranya bisa di lihat di postingan saya sebelumnya tentang Menghosting File Java Script Lewat Google Code.
tinggal ganti tulisan yang berkedip
dengan file Java Script hasil buatan anda sendiri.

<script src="Nama File Java Script hasil hosting anda.js" type="text/javascript"></script>
Selamat kini anda sudah bisa Membuat Java Script Milik Sendiri

Catatan : Apabila setelah kita download file Java Script pada cara no. 2 yang muncul berupa kode HTML di layar tab new browser tersebut maka tinggal di Save As

Sekian postingan kali ini semoga bisa membantu.anda sekarang bisa membuat efek pelangi pada link dan lain-lain dengan menggunakan javascript milik anda sendiri; Apabila ada yang perlu ditanyakan atau masih bingung silahkan untuk berkomentar.

Menghosting File Java Script Lewat Google Code

2012-02-06T00:24:00.000-08:00

Dalam kesempatan kali ini saya akan memberikan petunjuk untuk Menghosting File Java Script Lewat Google Code. Untuk masalah kreadibilitas Google Code ini tentu tidak akan di ragukan lagi karena memang milik google.com. Melalui Project Hosting ini kita bisa menyimpan FIle Java Script, PHP, Ajax, Flash dan lain-lain

Selain itu kabar gembiranya adalah Kapasitas yang di berikan kepada kita adalah 2 GB serta Unlimited Bandwith sehingga kita tidak perlu khawatir kehabisan Bandwith dan Layanan ini tidak berbayar sepeserpun alias gratis

Untuk Cara Menyimpan File Java Script nya yaitu :

1. Log In terlebih dahulu ke akun Google agan.
2. Setelah itu kunjungi Google Code Hosting
3. Lalu akan muncul halaman di bawah ini, Klik Create a New Project

4. Isilah data-data di bawah ini :

4. Kalau Berhasil maka akan menuju halaman Project Home, Untuk memulai download klik menu download

5. Setelah itu klik New Download

6. Setelah itu Masukkan data dan File Java Script yang akan di Upload

Summary : Tulis ringkasan File yang akan di Upload
Description : Deskripsi File, tidak di tulis juga tidak apa-apa
Browse : Mencari File yang akan di Upload

7. Setelah Isian di atas di isi Sekarang Tinggal Klik Submit File, Tunggu sampai proses Upload selesai. Lalu Klik File yang sudah kita Upload tadi untuk mendapatkan Link Location nya.

8. Klik Kanan Pada Gambar yang di beri garis kotak. lalu pilih Link Location

9. Tinggal di save deh Copy Link nya dan Selesai.

Sekian Postingan kali ini tentang Menghosting File Java Script Lewat Google Code kalau ada yang perlu ditanyakan silahkan untuk berkomentar.

Membuat Widget News Ticker dengan Tombol Close

2012-02-06T00:01:00.000-08:00

Bentuk News Ticker Dapat anda lihat seperti gambar Diatas.

Nah Tertarik untuk Membuat Widget News Ticker dengan Tombol Close ?

1. Login blogger
2. Rancangan(Design)
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Copy Kode Dibawah ini Kedalamnya:

<script type="text/javascript"> var hn_url_blog = "http://namabloganda.blogspot.com/";
var hn_jumlah_post = 10;
var hn_warna_latar = "white";
var hn_warna_garis = "black";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://postrecent.googlecode.com/files/News_ticker.js">
</script>

6. Tulisan yang saya beri Warna Merah Silahkan Ganti Dengan Url Blog Anda

7. Save Dan Lihat Hasilnya

Cara membuat Widget Recent Post Thumbnails

2012-02-05T23:53:00.000-08:00

Anda pasti sudah tidak asing lagi dengan Widget Recent Post, Yupz tepat salah satu widget yang membantu menampilkan postingan anda yang terdahulu atau yang sebelumnya. Banyak Blogger yang juga menampilkan Widget ini Blog mereka, namun kebanyakan adalah recent post dengan tulisan biasa. lantas bagaimana membuat Recent Post With Thumbnails atau dengan gambar?

1. Login blogger
2. Rancangan(Design)
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Copy Kode Dibawah ini Kedalamnya:

<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 = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://namabloganda.blogspot.com/";
</script>
<script src="http://postrecent.googlecode.com/files/Recentpostthumbnails.js" type="text/javascript"></script>

6. Jika Sudah Save Template Anda Dan Lihat Hasilnya

Pesan : Ganti Url yang saya beri warna Merah dengan Url Blog anda

Cara Membuat Navigasi Page Number/Menu Penomoran Pada Blogspot

2012-02-05T23:46:00.000-08:00

Pada tampilan Defaultnya, anda akan mendapati Gambar Seperti dibawah ini

Hanya akan ada Link Ke Postingan Lebih baru, Beranda, dan Postingan Lebih lama, lalu bagaimana cara merubah Link-link tersebut agar hanya tampil di Bagian postingan dan digantikan Dengan Navigasi Page Number di Home Page(Lihat Gambar Diatas Untuk Bentuknya)?

1. Login blogger
2. Pengaturan
3. Format
4. Setelah Itu, tentukan Dahulu Berapa Jumlah Postingan yang akan Ditampilkan Di Home Page5. Jika Sudah, beralihlah ke Rancangan(Design)

6. Edit HTML
7. Downlaod Template Lengkap dahulu untuk mengamankan template Anda
8. Centang Expand Template Widget
9. Cari Kode Di bawah ini

</body>

10. Jika Sudah Ketemu, masukkan Script Dibawah Ini Tepat Diatas Kode </body> Tersebut

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=7;
var displayPageNum=7;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>
</b:if>
</b:if>

11. Cari Kode 'data:label.url' Kemudian,

Ganti Kode Tersebut Dengan Kode Dibawah Ini



'data:label.url + &quot;?&amp;max-results=7&quot;'



12. Jika Sudah, Cari Kode  ]]></b:skin>

13. Jika Sudah ketemu Masukkan Script Dibawah ini Tepat Diatas Kode Tersebut.



 .showpageArea a {

text-decoration:underline;

background: #ffffff;

padding: 10px 10px 10px 10px;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #cccccc;

border-top: 1px solid #cccccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #cccccc;

background-color:#cccccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #cccccc;

background: #cccccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #cccccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333333;

}

14. Save Template Anda Dan Lihat Hasilnya.



* Yang Saya Beri Warna Merah, Silahkan Ganti dengan Jumlah Postingan yang telah anda atur Untuk Home Page anda....

Cara membuat Blogger Share Button Untuk Template Custom

2012-02-05T23:39:00.000-08:00

Baru-baru ini, seperti yang kita tahu, blogger mengeluarkan Fitur Share Buttonnya sendiri. Dan untuk Custom Template (Template Download) biarpun anda mengaktifkan Fitur tersebut anda tetap tidak dapat menikmatinya. Untuk itu, Jika anda tertarik untuk menikmatinya Silahkan ikuti tutorial dibawah ini.

1. Login blogger
2. Rancangan(Design)
3. Edit HTML
4. Downlaod Template Lengkap dahulu untuk mengamankan template Anda
5. Centang Expand Template Widget
6. Sampai disini Sebenarnya terserah anda mau meletakkan Script dimana saja (diatas atau dibawah Postingan), namun biasanya banyak Blogger yang meletakkannya Dibawah Postingan untuk itu, cari Kode dibawah ini

<div class='post-footer-line post-footer-line-3'>

7. jika Sudah Ketemu, Masukkan Script Dibawah ini tepat dibawah kode <div class='post-footer-line post-footer-line-3'> tersebut

<div class='post-share-buttons'> <b:include data='post' name='shareButtons'/> </div>
8. Jika sudah, Save template Anda
9. Beralihlah Ke Rancangan >> Elemen Laman Jika Sudah, Pada Bagian Posting Blog Klik Edit, Lihat gambar Dibawah ini
10. Jika Tampilan Konfigurasi Posting Blog telah Terbuka, Centang Share Button Seperti Gambar Dibawah ini

11. JIka Sudah, Scroll Kebawah Dan Simpan

12. Jika Sudah, Lihat Perubahan Pada masing-masing Postingan anda....

Cara Membuat Blog dapat dibuka Normal oleh Mobilephone

2012-02-05T23:24:00.000-08:00

Di zaman yang kemajuan Teknologinya sudah tidak diragukan lagi seperti sekarang ini, banyak orang yang lebih suka menggunakan Gadget Cellphone/Handphone untuk Mencari sesuatu via Mobile. Dan perlu anda ketahui, bahwa blog anda tidak akan terbuka secara Normal seperti dilayar PC saat dibuka melalui Handphone. Untuk itu, banyak Blogger yang membuat Alamat Blog versi Mobile mereka, tujuannya ya agar para Netter via Mobilephone tidak kesulitan mengakses Blog mereka. Namun, untuk anda yang tidak mau susah-susah mendaftar dan membuat Alamat Blog versi Mobile, anda dapat mengikuti Tutorial ini agar Blog anda dapat terlihat lebih Normal saat Di buka via Mobile phone menggunakan Handphone.

Tertarik? Silahkan Lanjutkan.....

1. Login blogger
2. Rancangan(Layout)
3. Edit HTML
4. Downlaod Template Lengkap dahulu untuk mengamankan template Anda
5. Centang Expand Template Widget
6. Cari Kode Seperti Dibawah ini

<b:include data='blog' name='all-head-content'/>
7. Jika Sudah Ketemu, Masukkan Script Dibawah Ini tepat Dibawah Kode Tersebut.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>
8. Save Template anda ...

Hasilnya akan dapat dibuka Normal oleh Mobilephone.