Cara Membuat Pesan Pembuka atau Alert Script di Blog

Pernah melihat sebuah blog yang saat diakses tidak akan langsung kebuka tetapi ada sebuah pesan yang muncul? Jangan heran, fasilitas itu disebut alert script. Cara membuat pesan pembuka di blog seperti itu gampang sekali.

1. Login ke blog

2. Klik Tata Letak

3. Klik Edit HTML

4. Beri centang pada kotak di samping Expand Template Widget

5. Cari kode </head> lalu pastekan skrip berikut ini di atasnya:

<script language="JavaScript">alert("SELAMAT DATANG DI BLOG SAYA");</script>

6. Simpan. Selesai

Ket:
- Ganti kata "SELAMAT DATANG DI BLOG SAYA" dengan pesan sesuai keinginan anda.
- Tanda kutip jangan dihapus.

Selamat mencoba!

Read More..

Memodifikasi Komentar dengan Tampilan Baru

Kolom komentar merupakan elemen penting pada blog. Sebab, melalui kolom itu merupakan salah satu media bagi kita untuk berinteraksi dengan pengunjung. Ingin tampilan baru pada kolom komentar dengan teknik modifikasi?
Format komentar default Blogger/Blogspot umumnya seperti ini:



Sedangkan di bawah ini salah satu tampilan baru komentar yang sudah dimodifikasi.


Keren kan? Bagaimana cara membuatnya?

1. Masuk Layout, Edit HTML, centang Expand Widget Template.

2. Cari skrip di bawah ini:

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em; }

3. Ganti skrip di atas dengan:

/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 0.75em;color: #666;}

.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: #fff;
border-bottom: 1px dotted #ddd;padding: 20px;}
.commentlist li.alt {background: #fff;}

.pane_l {float: left;display: inline;
width: 160px;min-width: 160px;max-width: 160px;
border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}

.c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 201px;}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}

4. Masih di Edit HTML, cari skrip di bawah ini:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5. Ganti semuanya dengan:

<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'><li>
<div class='pane_l'>
<div class='c_author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</div>
<div class='c_avatar'/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class='pane_r'>
<data:comment.body/>
</div>
</b:if>
<div class=' clear'/></li>
</b:loop>
</ul>

6. Simpan. Selesai.

7. Coba tes dan lihat hasilnya.

Selamat mencoba.

Read More..

Membesarkan Ukuran Huruf

Banyak cara untuk memberikan penekanan pada kata atau kalimat tertentu sebuah postingan. Misalnya dicetak tebal, miring dan sebagainya. Ada pula yang membesarkan ukuran huruf. Nah, bagaimana caranya?


Gampang sekali, tambahkan kode berikut ini. Ganti tulisan 'teks anda' dengan kata atau kalimat yang ingin anda besarkan ukurannya.

<div style="text-align: center; font-size: 80px;">teks anda</div>

Ket: Angka 80 menunjukkan ukuran huruf. Anda bisa ganti sesuai keinginan. Selamat mencoba.

Read More..

Cara Memasang Widget Google Pagerank (PR)

Beberapa waktu lalu ada pertanyaan dari Mas Bayu tentang bagaimana cara memasang widget Google Pagerank (PR) dan Alexa. Baiklah, saya jawab sekarang. Barangkali ini berguna juga buat teman-teman blogger yang blognya belum diberi widget PR.
Sebenarnya banyak widget Google PR. Tapi, yang paling populer adalah keluaran Mypagerank. Oke, langsung saja ke tutorialnya:

1. Buka situs Mypagerank.

2. Klik 'Google Pagerank Button'.


3. Masukkan URL blog anda. Misalnya: http://nyosnews.blogspot.com, lalu klik 'Check PR'.


4. Muncul pilihan model widget PR. Klik salah satu yang anda sukai.


5. Masukkan skrip di bawahnya ke blog anda.

6. Selesai.

Untuk pemasangan widget Alexa Ranking, tunggu postingan yang akan datang.

Read More..

Cara Memasang Label Cloud di Blogger / Blogspot

Salah satu ciri khas blog berplatform Wordpress adalah adanya label cloud. Konon, widget ini juga berpengaruh pada SEO. Tapi, blog berbasis blogger atau blogspot pun kini bisa ditambahi widget label cloud. Seperti yang ada di blog baru saya ini. Cara memasang label cloud sangat mudah.


1. Masuk Layout, Edit HTML (tak perlu centang expand widget template).

2. Cari kode <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'> atau yang mirip itu.

3. Tambahkan kode berikut ini di bawahnya:
<br /><strong><b:includable id='main'><br /><b:if cond='data:title'><br /><h2><data:title/></h2><br /></b:if><br /><br /><div class='widget-content'><br /><div id='labelCloud'/><br /><p align='center'><br /><script type='text/javascript'><br />var cloudMin = 1;<br />var maxFontSize = 25;<br />var maxColor = [0,255,0];<br />var minFontSize = 10;<br />var minColor = [0,0,0];<br />var lcShowCount = false;<br />// Don't change anything past this point -----------------<br />// Cloud function s() ripped from del.icio.us<br />function s(a,b,i,x){<br />if(a&gt;b){<br />var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)<br />}<br />else{<br />var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)<br />}<br />return v<br />}<br /><br /><br />var c=[];<br />var labelCount = new Array(); <br />var ts = new Object;<br /><b:loop values='data:labels' var='label'><br />var theName = &quot;<data:label.name/>&quot;;<br />ts[theName] = <data:label.count/>;<br /></b:loop><br /><br />for (t in ts){<br />if (!labelCount[ts[t]]){<br />labelCount[ts[t]] = new Array(ts[t])<br />}<br />}<br />var ta=cloudMin-1;<br />tz = labelCount.length - cloudMin;<br />lc2 = document.getElementById(&#39;labelCloud&#39;);<br />ul = document.createElement(&#39;ul&#39;);<br />ul.className = &#39;label-cloud&#39;;<br />for(var t in ts){<br />if(ts[t] &lt; cloudMin){<br />continue;<br />}<br />for (var i=0;3 &gt; i;i++) {<br />c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)<br />} <br />var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);<br />li = document.createElement(&#39;li&#39;);<br />li.style.fontSize = fs+&#39;px&#39;;<br /><br />a = document.createElement(&#39;a&#39;);<br />a.title = ts[t]+&#39; Posts in &#39;+t;<br />a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;<br />a.href = &#39;/search/label/&#39;+encodeURIComponent(t);<br />if (lcShowCount){<br />span = document.createElement(&#39;span&#39;);<br />span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;<br />span.className = &#39;label-count&#39;;<br />a.appendChild(document.createTextNode(t));<br />li.appendChild(a);<br />li.appendChild(span);<br />}<br />else {<br />a.appendChild(document.createTextNode(t));<br />li.appendChild(a);<br />}<br />ul.appendChild(li);<br />abnk = document.createTextNode(&#39; &#39;);<br />ul.appendChild(abnk);<br />}<br />lc2.appendChild(ul); <br /></script><br /></p><br /><noscript><br /><ul><br /><b:loop values='data:labels' var='label'><br /><li><br /><b:if cond='data:blog.url == data:label.url'><br /><data:label.name/><br /><b:else/><br /><a expr:href='data:label.url'><data:label.name/></a><br /></b:if><br />(<data:label.count/>)<br /></li><br /></b:loop><br /></ul><br /></noscript><br /><b:include name='quickedit'/><br /></div><br /><br /></b:includable><br /></b:widget></strong><br />

4. Cari kode ]]></b:skin>

5. Tambahkan kode ini di atasnya:
<br /><strong>#labelCloud {text-align:center;font-family:arial,sans-serif;}<br />#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br />#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}<br />#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}<br />#labelCloud a{text-decoration:none}<br />#labelCloud a:hover{text-decoration:underline}<br />#labelCloud li a{}<br />#labelCloud .label-cloud {}<br />#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}<br />#labelCloud .label-cloud li:before{content:&quot;&quot; !important}</strong><br />
6. Simpan. Selesai dan lihat hasilnya.

Selamat mencoba. Mudah-mudahan berhasil.

Read More..

Cara Membuat Link Berupa Gambar / Image

Seperti diketahui, selain berupa teks, kita bisa membuat link berupa gambar atau image. Contohnya link situs berita sepakbola (gambar Lionel Messi) di blog ini. Cara bikinnya gampang. Anda cuma butuh hosting pengupload gambar, misalnya Photobucket.

Langsung saja ke tutorialnya:
1. Siapkan gambar yang akan diisi link.
2. Upload dengan Photobucket.
3. Masukkan kode ini di tempat dimana link mau dipasang. Jika di sidebar ya masuk 'Layout', 'tambah gadget', dst.

<a href="http://ligabolaeropa.blogspot.com"><img src="http://i303.photobucket.com/albums/nn121/wawanwae/ligaeropa.jpg"></a>

Perhatikan, yang dicetak tebal adalah URL blog tujuan dan yang satunya direct link di Photobucket. Letak direct link seperti yang ada di bawah ini:


Jika ingin linknya kalau diklik muncul di window baru kodenya:
<a href="http://ligabolaeropa.blogspot.com" target="_blank"><http://i303.photobucket.com/albums/nn121/wawanwae/ligaeropa.jpg"></a>

Selamat mencoba.

Read More..

Kompetisi Fajarseraya, Ikutan Yuk..!

Tahun ini kontes blog benar-benar marak. Salah satunya Kompetisi Fajarseraya. Kontes yang diprakarsai Mas Fajar ini bertema BLOG FOR FUN. Peserta bebas membuat artikel yang ada hubungannya dengan blog. Mulai dari tips-tips, trik-trik, cerita anda tentang blog, cerita mendapatkan uang dari Blog, Pengalaman setelah menjadi blogger, dll (asalkan berhubungan dengan blog). Hal ini dilakukan agar lomba sportif sesuai dengan keahlian menulis peserta.
Hadiahnya cukup bikin ngiler.

I. Pemenang Utama
Persembahan HostingTangguh
Juara 1 : Domain .com + Paket Hosting (XII 500MB/US 1GB)
Juara 2 : Domain .com
Juara 3 : Paket Hosting (XII 500MB/US 1GB)

II. Hadiah Tambahan
Pesembahan Forum Marigaul
15 Domain .info + Hosting (100 MB)(Gratis biaya perpanjangan domain dengan memasang banner Marigaul.com)

III. Pemenang Kategori (Masing-masing domain web.id)
Persembahan PusatHosting
Pemula terbaik
Tulisan bermanfaat
Tulisan terunik
Artikel Komentar terbanyak

IV. Tambahan hadiah Hosting :
Persembahan SarangHosting (Masing-masing 2 paket hosting (US 1GB)
Artikel Tergokil
Artikel Terlucu

Wis, buruan aja daftar karena kompetisi ini akan segera ditutup, batas akhir yaitu tanggal 30 April nanti. Daftarnya via email ke : daftarkontes@yahoo.com.

Read More..