CARA MENGEDIT TOP MENU PADA TEMPLATE BLOGGER...

 ...Postingan ringan lagi.... yang merupakan pertanyaan dari sobat yunblogs.. " Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ?  " ..oke setelah dua hari libur ngeblog... now here we go again... :)

...Memang belum tersedia fitur untuk mengedit top menu pada template blogger ..belum secanggih itu... tapi mungkin mbah google suatu saat nanti  akan mendukung juga fitur untuk mengubah menu top blogger...wow hehe :D .. idak seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah...

... Untuk mengedit top menu pada template blogger kita harus sedikit mengubah kode script html template blognya... jadi perhatikan caranya berikut ini :

>> Contoh I

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga...

3. Tekan Control+F lalu cari kode " <div id='menu'> " ...kalau di kode html blog saya seperti ini.. biasanya ada sedikit perbedaan dengan kode template blog kalian.. 

4. Nanti akan terlihat kode sesudah " <div id='menu'> " yang seperti contoh dibawah ini...

<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>
   </ul>
  </div>

    </div>

Keterangan :

> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...

> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :

<div id='menu'>

   <ul>

    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><div class='gap'/></li>

    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>

    <li><div class='gap'/></li>

<li><a href='menambah menu di tengah'>Tambah Menu di tengah</a></li>

    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>

    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>

    <li><div class='gap'/></li>

    <li><a href='http://www.blogger.com/'>Login</a></li>

    <li><a href='menambah menu dibawah'>Tambah Menu dibawah</a></li>

   </ul>

  </div>

ATAU....

>> Contoh II 

1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu.. coba yang ini.. 
2. Tekan Control+F lalu cari kode " <div class='Menu'> " ...

3. Nanti akan terlihat kode sesudah " <div class='Menu'> " yang seperti contoh dibawah ini...

<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>
                <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>
                </ul>
            </div>

Keterangan :

> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...

> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Dan jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :

<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>

                <li><a href='menambah menu di tengah' title='#'><span>Tambah Menu di tengah</span></a>

</li>

                 <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>

                <li><a href='menambah menu dibawah' title='Extras'><span>Tambah Menu dibawah</span></a>

</li>

                </ul>
            </div>

...mudah bukan...

CARA MEMBUAT RELATED POST... DENGAN ATAU TANPA SCROLLING... DAN TANPA THUMBNAIL....

... Menambah tutorial lagi.. berhubung ada sahabat blogger iplock yang bertanya "oia kang,ane pngn di scroll dong yang artikel terkaitnya.

jadi ga panjang yang diblog ane ntu,ntuh digimanain ya??? ".... baiklah akan dibahas sekalian di postingan kali ini...

...Artikel Terkait (Related Post) adalah suatu daftar beberapa judul artikel yang masih ada hubungannya dengan judul artikel yang sedang dibaca pada saat itu.. dan biasanya terletak langsung dibawah artikel tersebut....

...Script Artikel Terkait yang saya gunakan mungkin berbeda dengan yang sobat blogger lain gunakan... karena memang sebenarnya ada beberapa kode script yang berbeda untuk menampilkan Artikel Terkait (Related Post)... tetapi untuk menambahkan scrolling pada artikel terkait dengan daftar yang panjang menggunakan trik script scrolling yang sama saja... masih binggung ??! ....

...Tanpa panjang lebar lagi... Pahami langkah-langkahnya berikut ini :
1. Seperti biasa Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang expand template widget )...
2. Backup dahulu template widget-nya ke notepad ( untuk antisipasi )...
3. Tekan Control+F lalu Copas kode ini " </head> " tinggal dicari dengan klik Next / Previous ( jika memakai Mozilla Firefox )...
4. Jika sudah ketemu lalu Copy kode dibawah ini diatas " </head> " ...

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

5. Paste -kan seperti contoh dibawah ini...

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

</head>

6. Kemudian Cari lagi kode ini " <data:post.body/> " seperti langkah ke- 3 diatas lalu Copy lagi kode dibawah ini sesudahnya...

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>

7. Paste seperti contoh dibawah ini...

<data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>

PERHATIKAN :
> Hitam ;
- Tutorial blogging lainnya... = Gantilah judulnya sesuai dengan keinginanmu...
- "max-results=5" = Ubah nilainya, untuk menentukan banyak artikel terkait yang akan ditampilkan..

> Biru = script ini untuk membuat border kolom pada artikel terkait.. bisa kamu ubah-ubah warnanya di backround-color.. kalau saya menggunakan warna hijau muda... bisa juga kamu atur border, moz-border-radius, dsb... atau bisa juga kamu HAPUS script border kolom ini jika tidak mau memakainya...

> Hijau = Script ini untuk fungsi SCROLLING... bisa kamu atur sesuai keinginan kamu Height, Widht, Border, serta text-align-nya... atau bisa juga kamu HAPUS script scrolling ini jika kamu tidak suka memakai scrolling...

Ket : baik kode script border kolom & kode script Scrolling ini bisa juga diterapkan di kode script related post lainnya.. maksudnya yang mungkin agak berbeda dengan kode script related post yang saya gunakan seperti diatas...

8. Jika sudah selesai.. Simpan Template & Resfresh blognya...

.... Di pahami benar2 dulu ya...

CARA MEMBUAT RECENT COMMENTS...

 ...Melengkapi tutorial blogging di blog saya ini.. kali ini saya akan membahas bagaimana membuat widget Recent Comments.. yaitu suatu widget yang berkemampuan menampilkan beberapa komentar terakhir dalam postingan di blog kita...

...Keuntungannya... ialah akan membantu kita dalam mengetahui beberapa komentar yang terbaru... kita juga mengetahui postingan mana saja yang menjadi favorit pembaca... dan apa saja tutorial yang paling dicari ?..
.. Baiklah... langsung saja mulai pembahasan membuat widget recent comments versi saya... jadi pahami baik-baik ya...

... Langkah-langkah membuatnya sebagai berikut ;
1. Seperti biasa login ke Blogger ...
2. Perhatikan kode javascript dibawah ini....

function showrecentcomments(json) {
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] = "Mei";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Ags";
monthnames[9] = "Sep";
monthnames[10] = "Okt";
monthnames[11] = "Nov";
monthnames[12] = "Des";
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, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<li>');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a>');
if (showposttitle == true) document.write(' mengomentari ' + posttitle);
if (showcommentdate == true) document.write(' bulan ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<br/>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}
else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(dan seterusnya...)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('</li>');
document.write('<span ><a href="http://ecaknyo.blogspot.com/feeds/comments/default/" target="_blank">Recent Comment ecaknyo</a></span>');
if (!standardstyling) document.write('</div>');}

Ket :
> Copy-paste kode javascript diatas ke dalam notepad..
> Lalu ubah teks yang berwarna merah sesuai keinginan kalian...
> Jika telah selesai simpan file notepad ini dengan format .js ... misalnya : recent comments_ecaknyo.js

3. Simpan (Upload) file recent comments.js ini ke google site atau ke server file lainnya... jika sudah salinlah tautan url file recent comments.js tadi...

Contoh : kalau saya menggunakan penyimpanan file di google site.. tautan url-nya seperti ini...

http://sites.google.com/site/ecaknyo/blog/bank-javascript-ecaknyo/recent-comment_ecaknyo_v2.js?attredirects=0&d=1

Ket :
> Copy hanya sampai batas .js saja ( yang saya warnai hitam diabaikan )...

4. langkah instalasi widget-nya.. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript ... lalu copas kode dibawah ini ke dalamnya..

<ul><script style="text/javascript" src="http://sites.google.com/site/ecaknyo/blog/bank-javascript-ecaknyo/recent-comment_ecaknyo_v2.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://ecaknyo.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul>

Ket :
> Biru = Gantilah dengan url file javascript ( .js ) milik kamu yang di-Upload tadi...
> Merah = Gantilah nilai angka-nya sesuai keinginanmu atau biarkan saja (default)..
- Numcomments = Menampilkan banyaknya jumlah komentar...
- Numchar = Menentukan seberapa panjang isi Recent Comment yang ingin ditampilkan...
> Hitam = Gantilah menjadi "true" jika ingin ditampilkan.. atau "false" jika ingin disembunyikan..
- showcommentdate = Menampilkan bulan & tahun...
- showposttitle = Menampilkan judul posting yang dikomentari...
> Hijau = Gantilah dengan feed comments blog kamu sendiri...

5. Jika sudah kamu atur sedemikian rupa..maka Simpan widget & Refresh blog kamu... (letakan dimana saja posisi widget-nya )...

... Selamat Mencoba ...

COLOR PICKER... ??!

...Postingan ringan kali ini.... kebenaran ada yang tanya lewat email... anonymous.. "sob ..cara buat Color Picker untuk di letakan di blog gimana sih.. tapi yang simple... ??" ..heuumm... kalau mau buat Color Picker untuk blog, saya sarankan tidak usah sob.. karena akan menambah berat loding blog (jika memakai javascript)...

telah banyak juga tutorial yang mengajarkan cara membuat Widget Color Picker untuk Blogger.. kalau mau mencoba-coba silahkan ikuti salah satu contohnya pada link sobat dibawah ini...



> Cara Membuat jQuery Color Picker Di Blogger | Riky Rizkiyana

...ini contoh widget Color Picker-nya....

...Atau jika ingin menggunakan software Color Picker untuk digunakan di PC (ini juga saya dapatkan dari salah satu blog sobat blogger tapi saya lupa nama blognya)... Download Linknya ada dibawah ini...


> HTML-COLOR-PICKER (size : 566.25 KB)




Kalau saya sih lebih suka menggunakan Color Picker Online ini... saya kira beberapa sobat blogger yang lain juga menggunakan service site ini... karena lebih mudah.. tidak di instal di blog kita.. tinggal di bookmark saja di Firefox... selesai...


...seperti dibawah ini tampilan site-nya...

...easy Color Picker...

CARA MEMBUAT TOOLTIPS DI BLOG...

...Banyak cara untuk memperkeren tampilan blog kita.. membuat perbedaan dengan blog lainnya... ini akan menjadikan blog kita mempunyai ciri khas tersendiri... salah satunya ialah dengan menambahkan efek tooltips di blog.. dimana pada saat di mouseover pada tautan URL (saya fokuskan di tautan saja) akan muncul pop-up Tooltips yang keren...

...Tooltips yang saya bahas ini merupakan hasil ekperimen saya dalam beberapa hari terakhir ini ...dari source code yang saya dapatkan via Mbah Google... Saya telah mencoba berbagai cara & kode untuk membuat Tooltips versi saya sendiri.. dan berhasil dengan ToolTips yang :
1. Gambar background yang bisa diganti-ganti...
2. Efek transparansi yang bisa diubah-ubah.. atau bisa juga tanpa transparansi...
3. Tidak memberatkan blog.. karena tidak memakai javascript (.js)...
4. Font-text nya bisa diganti-ganti...

...Ini Contoh Tooltips untuk di Postingan.. coba kalian MouseOver Link di bawah ini :

CaRa MemBuat ToolTips di bLog...

Dimana pada saat di MouseOver pada tautan URL (saya fokuskan di tautan saja) akan muncul Pop-Up Tooltips yang keren...

..tapi tooltips ini masih belum sempurna... jadi harap maklum ya.. silahkan sobat blogger sekalian memperbaruinya menjadi lebih baik lagi...

...Oke.. langsung saja kita mulai Sharing Knowledge- nya , pahami langkah-berikut ini ;

A. Kode tooltips untuk di ditempatkan di dalam Kode HTML Template Blog...
1. Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini...

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px; >
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

2. Cari kode berikut ini.. ]]></b:skin> ..dan Paste -kan kode tadi diatasnya... Seperti contoh dibawah ini...

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px;
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

]]></b:skin>

Ket :

background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna biru...

border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

-moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan kalian...

..Dan Seterusnya... silahkan kalian Modifikasi sendiri ya... banyak jika harus dijelaskan satu-persatu.. capek ngetiknya.. :)) ..saya yakin kalian mengerti kode-kode sisanya... ;)

3. Jika telah selesai.. Simpan Template Blog...


B. Kode untuk memanggil tooltips pop-up (Muncul)...
1. Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya berfungsi..

<li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>

Ket :
> Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya makan tooltips-nya tidak akan berfungsi...

...Ini Contoh Pengunaannya... yang saya gunakan pada widget HTML/Javascripts.. (bisa juga kamu gunakan pada postingan loh..)...

<li><img src="http://i466.photobucket.com/albums/rr22/wong284/arrow_DOWNLOAD.gif" /><a href="http://www.ziddu.com/downloadlink/7138173/FarmFrenzy2.rar" > GaMe Farm Frenzy 2</a><div class="TOLtip"><p>Permainan uji ketangkasan dalam mengelola lahan Pertanian...</p></div></li>

...Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian Free DownLoad di sebelah kanan Blog ini.. seperti gambar dibawah ini... :)


Note :
> Sebaiknya Kemunculan Pop-Up Tooltip-nya kalian atur munculnya dibawah Link/gambar tautan.. agar Tooltips ini bisa digunakan di seluruh area dalam blog kamu (di widget sebelah kiri/kanan atau di postingan atau di header/footer)...
> Kode Tooltips ini saya atur sedemikian rupa agar tampilannya sesuai dengan keinginan saya dan tema blog saya... makanya belum tentu akan cocok dengan blog lainnya... jadi silahkan kalian utak-atik sendiri sekreatif mungkin agar sesuai dengan tema blog/ keinginan kalian...

... Tooltips yang Simple...