Cara Memasang Alert Pada Blog

> Pingin buat text alert sebagai pesan pembuka blog kamu? Atau setidaknya kita dapat menggunakan fungsi text alert ini untuk salam pembuka, pesan iklan, penawaran barang, atau ucapan selamat akan hari besar yang sedang diperingati, dsb. Kalau tertasik coba deh beberapa cara yang satu ini:

<script type="text/javascript">
alert('Selamat Hari Natal & Tahun Baru')
</script>

(NB: Ganti huruf merah dengan tulisan yang kamu inginkan!! Lalu pasang di ‘add gadget’)

>Cara memasang alert berupa pertanyaan, untuk melanjutkan dalam menelusuri Blog, atau membatalkan menelusurinya!!
Dimana setiap pengunjung yang mengklik tombol ‘OK’ akan diarahkan ke link official blog Anda, dan kalo emang pengunjung membatalkannya, Anda juga dapat mengarahkan linknya!!

<script type="text/javascript">
confirm('Blog ini berisi conten dewasa. Apakah Anda yakin untuk melanjutkan?');
if (confirm('Blog ini berisi conten dewasa. Apakah Anda yakin untuk melanjutkan?')) {
window.location = "http://tips-trik-blog.blogspot.com/";
}
else {
window.location = "http://onoid.blogspot.com/";
}
</script>

(NB: Untuk text merah adalah deskripsi dari content blog Anda, sekaligus peringatan bagi pengunjung!! Lalu untuk link hijau ganti dengan 'Alamat URL' Official blog Anda (link untuk tombol 'OK'); dan link biru ganti dengan 'Alamat URL' yang Anda rekomendasikan bila pengunjung mengklik tombol "CANCEL"!! Jangan lupa, SETELAH ITU SIMPAN DI’ADD GADGET’)

> >SAPAAN PADA AWAL BLOG DENGAN BERTANYA NAMA DAN SETELAH ITU DIIKUTI DENGAN SALAM...., contohnya seperti yang ada di blog saya!!

<script type="text/javascript">
var yourName = prompt("Boleh Tahu Namanya?", "Nama Anda");
</script>
Selamat Datang <script type="text/javascript">document.write(yourName)</script>! Semoga <script type="text/javascript">document.write(yourName)</script> mau berbagi dan belajar bersama di blog COBABELAJAR ini. Buat <script type="text/javascript">document.write(yourName)</script> ditunggu kunjungan berikutnya, Terimakasih.

(NB: Untuk text warna merah ganti dengan nama blog Anda. Seandainya uraian test ingin Anda ganti dengan kata-kata sambutan lain juga bisa kok, yang urutannya harus tepat biar text dan nama pengunjung dapat match. Seperti biasa, jangan lupa simpan di 'Add Gadget')

Ok, untuk info alert, sekian dulu..., semoga bermanfaat...

Membuat Page Navigation

Cara membuat Page Navigation. Kali ini saya copas dari blog clickoverall
Kalau tertarik langsung aja Ikuti petunjuknya dibawah ini:

Langkah pertama:

Bukalah template blogspot anda, pastikan beri centang kotak kecil Expand Widget Templates
Langkah kedua:

Kemudian Carilah code didalam template anda (gunakan CTRL + F, untuk mempermudah pencarian):

Sudah ketemu? Kalau sudah copy + paste code berikut ini, persis diatas code

/** Start of CSS Page Navigaton */

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
/** End of CSS Page Navigaton */

Klik SAVE TEMPLATE untuk simpan template anda.

Langkah ketiga:

Carilah code didalam template anda seperti dibawah ini:





Untuk mempermudah pencarian code diatas pastikan pada kotak kecil Expand Widget Templates tidak diberi centang

(Gunakan CTRL + F untuk mempermudah pencarian code diatas), sudah ketemu? Kalau sudah ketemu, sisipkan code berikut ini persis dibawah .




<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount = 5;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
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+'T00%3A00%3A00%2B08%3A00&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){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
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){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
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++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

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>';

if(isPage || isFirstPage || isLablePage){
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;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>



Klik SAVE TAMPLATE, selesai.

Catatan:

Bagian code dibawah ini untuk menampilkan jumlah halaman yang akan ditampilkan, ubahlah angkanya sesuai dengan jumlah halaman yang akan ditampilkan.

var pageCount = 5;
var displayPageNum = 5;

Readmore »»

Membuat Page Navigation

Membuat Log in Blogger

Kadang kala kita merasa bahwa navbar sangatlah mengganggu pemandangan Blog. Namun disatu sisi kita merasa kurang efisien dengan menghilangkan navbar blog tersebut, karena harus kerja dua kali setiap ingin mengedit blog.
Kalau memang itu masalahnya, lebih baik kita buat login blogger sendiri di sidebar atau di footer blog.
Caranya sebagai berikut:

1. Masuk ke Tata Letak
2. KLik Add Gadget
3. Masukan kode berikut:

Please enter your email and password to log in Blogger Dasboard page!<br/><br/><form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Email: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form><span style="font-size: 80%"> <a href="">curezine</a></span>

4. Setelah itu save.......
Mudahkan...

Selamat mencoba

Readmore »»

Membuat Log in Blogger

Membuat Teks Bergerak Pada Title Bar blog

Umumnya title bar blog bersifat statis, atau dalam artian hanya diam (tidak bergerak). Namun kalau kita ingin membuat kesan berbeda, dengan membuat title bar blog tersebut bergerak, silahkan coba cara yang satu ini.

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Jangan lupa Backup dulu template Blog Anda
4. kemudian cari kode berikut:

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

5. Kalau sudah ketemu, ganti kode diatas dengan kode dibawah ini.

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak ( ) { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt (0);
segarkan=setTimeout('bergerak ( ) ",kecepatan);}bergerak( ) ;
</script>

6. Save Template

Catatan:
Kode var kecepatan= berfungsi untuk mengatus kecepatan bergerak teks. Dan angka merah tersebut dapat Anda ganti, dimana "semakin angka itu besar, semakin lambat kecepatan gerak teksnya.

Selamat Mencoba

Readmore »»

Membuat Teks Bergerak Pada Title Bar blog

Memasang bookmark di Setiap Postingan

Untuk mempersingkat waktu aja, kali ini saya akan berbagi info. Yaitu cara memasang bookmark di setiap postingan, langkah-langkahnya sebagai berikut:
1.masuk ke 'Tata Letak'
2.lalu klik 'Edit HTML',
3.jangan lupa tandai 'Expand Template widget'.
4.Setelah itu cari kode <!-- clear for photos floats -->
Kalau sudah ketemu masukan kode berikut tepat di bawah kode tadi.

<div class='addthis'>
<div align='right'>
<!-- AddThis Bookmark Button BEGIN -->
<script type='text/javascript'>
addthis_url = '<data:post.url/>';
addthis_title = '<data:post.title/>'
addthis_pub = '';
</script><script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/>
</div>
</div>

Terakhir Simpan.....

sumber: hakimtea

Readmore »»

Memasang bookmark di Setiap Postingan

Membuat Tulisan Link Berwarna-warni

Biasanya warna tulisan link hanya bisa diatur dengan satu warna saja. Nah, untuk kali ini saya akan berbagi untuk bagaimana membuat tulisan link menjadi berwarna-warni seperti di blog saya ini.

1. Masuk kr 'Tata Letak'
2. Klik 'Edit HTML'
3. Cari kode <head>
4. Kemudian taruh kode berikut ini dibawah kode <head>

<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>

5. Kemudian Simpan.

Selamat Mencoba

Readmore »»

Membuat Tulisan Link Berwarna-warni

Pasang Pemutar File Audio Pada Blog

Apakah Anda ingin membuat softwear pemutar musik di Blog Anda? Dimana orang dapat mendengar beberapa lagu yang Anda upload ke Blog.
1. kunjungi BlogAMP, disini blogamp memberikan layanan upload file mp3 hingga 25 Mb secara Gratis.
2. Anda harus register dahulu untuk membuat account di blogamp
3. Pilih 'PLAYLIST' di sidebar menu
4. Kemudian klik 'NEW UPLOAD"
5. Setelah itu masukan alamat lengkap URL file MP3 yang Anda simpan. Dan keterangan lain mengenai file musik yang akan Anda upload, dapat Anda isi dengan nama penyanyi dan judul lagu.
6. Aktifkan juga kotak cek 'Allow MP3 download' apabila Anda mengijinkan pengunjung blog Anda untuk mendownload file musik tersebut.

7. KLik 'Submit'
8. Pilih opsi PUBLISH
9. Lalu klik ikon HTML
10. Kemudian copy kodenya
11. Masuk ke Blog Anda
12. klik Tata Letak
13. Add Gadget, dan paste kode HTML tersebut.
14. selesai.

Selamat mencoba

Readmore »»

Pasang Pemutar File Audio Pada Blog

Meletakkan iklan diatas kotak komentar

Memasang iklan bisa dimana saja termasuk di postingan atau bahkan di atas kotak komentar. Lalu apa manfaatnya memasang iklan diatas komentar? Pastinya manfaatnya banyak banget..., apalagi kalau iklan yang kamu tanyangkan berhubungan dengan artikel yang kamu postkan. Untuk cara ini, saya dapat dari UDIK-NET . Sekarang saatnya mencoba.

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Centang Expand Template Widget
4. lalu cari kode berikut:

<p><data:blogCommentMessage/></p>

5. Dan masukan kode iklan kamu yang sudah di encode diantara <p> dan <data:blogCommentMessage/></p>

6. Kalau sudah di Save

Selamat Mencoba.....

Readmore »»

Meletakkan iklan diatas kotak komentar

Pasang Emoticon di Atas Kotak Komentar

Sebenarnya bukan hal yang penting tetapi hal yang sangat menarik, yaitu adanya Emoticon pada kolom koment. Karena kita bisa tahu perasaan para komentator setelah membaca postingan kita. Begitulah gunanya emoticon. Dan untuk saat ini pembahasan ini saya dapat dari ardi33 ,dimana icon smiley yang dipasang adalah Emoticon yahoo. Berikut gambarnya:
Cara memasangnya sebagai berikut:

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Centang 'Expand Template Widget'
4. Letakkan kode script berikut diatas kode </body>

<script src='http://ardi33.fileave.com/smileyyahoo.js' type='text/javascript'/>

5. Setelah itu cari kode

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

Lihat kode <p class='comment-footer'> , sekarang tugas kita adalah meletakkan kode berikut di bawah kode <p class='comment-footer'>

<b><img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04210.gif" width="40"/>
:a:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04212.gif" width="40"/>
:b:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04213.gif" width="40"/>
:c:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04219.gif" width="40"/>
:d:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04220.gif" width="40"/>
:e:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04224.gif" width="40"/>
:f:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04231.gif" width="40"/>
:g:
<br/><img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04233.gif" width="40"/>
:h:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04247.gif" width="40"/>
:i:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04235.gif" width="40"/>
:j:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04241.gif" width="40"/>
:k:<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04236.gif" width="40"/>
:l:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04217.gif" width="40"/>
:m:
<img src="http://sites.google.com/site/diesilversite/smileys/AddEmoticons04237.gif" width="40"/>
:n:
</b>

Terakhir Save Template.

Selamat Mencoba......

Readmore »»

Pasang Emoticon di Atas Kotak Komentar