This is Delphi, A free premium blogger theme for you.
Tampilkan postingan dengan label Content. Tampilkan semua postingan
Tampilkan postingan dengan label Content. Tampilkan semua postingan

10/14/2011

Pesan tampilan entri lawas adalah salah satu fasilitas yang dimiliki oleh blogger yang berfungsi untuk memunculkan semua posting yang mempunyai label yang sama. Pesan ini muncul saat kita memilih salah satu label yang ada diblog. Mungkin sebagian dari kita beranggapan bahwa tulisan tersebut sangat mengganggu. Nah, bagi teman2 yang ingin menghilangkan tulisan tersebut, ikuti langkah berikut :

Cara menghilangkan tampilan entri lawas pada blogspot :
1. Login ke Blogger
2. Pilih Rancangan
3. Klik Klik Edit HTML
4. Centang Expand Template Widget
5. Cari kode berikut :
<b:includable id='status-message'><b:if cond='data:navMessage'><div class='status-msg-wrap'><div class='status-msg-body'><data:navMessage/></div><div class='status-msg-border'><div class='status-msg-bg'><div class='status-msg-hidden'><data:navMessage/></div></div></div></div><div style='clear: both;'/></b:if></b:includable>
Ganti dengan kode berikut :
<b:includable id='status-message'><b:if cond='data:navMessage'><div></div><div style='clear: both;'/></b:if></b:includable>
6. Simpan Template

Pesan tampilan entri lawas adalah salah satu fasilitas yang dimiliki oleh blogger yang berfungsi untuk memunculkan semua posting yang mempunyai label yang sama. Pesan ini muncul saat kita memilih salah satu label yang ada diblog. Mungkin sebagian dari kita beranggapan bahwa tulisan tersebut sangat mengganggu. Nah, bagi teman2 yang ingin menghilangkan tulisan tersebut, ikuti langkah berikut :

Cara menghilangkan tampilan entri lawas pada blogspot :
1. Login ke Blogger
2. Pilih Rancangan
3. Klik Klik Edit HTML
4. Centang Expand Template Widget
5. Cari kode berikut :
<b:includable id='status-message'><b:if cond='data:navMessage'><div class='status-msg-wrap'><div class='status-msg-body'><data:navMessage/></div><div class='status-msg-border'><div class='status-msg-bg'><div class='status-msg-hidden'><data:navMessage/></div></div></div></div><div style='clear: both;'/></b:if></b:includable>
Ganti dengan kode berikut :
<b:includable id='status-message'><b:if cond='data:navMessage'><div></div><div style='clear: both;'/></b:if></b:includable>
6. Simpan Template

9/28/2011


Berbagai efek dapat tercipta berkat kode css3, seperti tutorial yang akan saya informasikan kepada anda khususnya bagi pemula.


Satu dari sekian banyak efek yang diciptakan oleh css3 yaitu dapat digunakan untuk membuat efek bayangan di sekitar gambar posting. Dalam hal ini kita akan menggunakan kode box-shadow.

Cara menerapakannya pada gambar posting agar menghasilkan Efek bayang :
1. login blogger lalu menuju edit html
2. cari kode .post-body img {
3. masukkan kode ini setelah kurung kurawal
-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;
4. jangan lupa save

Efek bayang ini akan lebih hidup jika diterapkan pada gambar  dalam keadaan mouse over (mouse mengenai gambar). Jadi dalam keadaan normal tidak terlihat efek bayangan sedangkan pada saat mouse didekatkan pada gambar baru kelihatan efek bayangnya. Menarik bukan?

Bila ingin membuat efek bayang pada gambar ketika mouse hover saja, caranya :
1.    login blogger lalu menuju edit html
2.    cari kode ]]></b:skin>
3.    masukkan kode ini di atas ]]></b:skin>
.post-body img:hover{
-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;}
4.    terakhir save

Untuk melihat contoh demonya silahkan klik disini

Selamat menikmati gambar dengan efek bayang


Berbagai efek dapat tercipta berkat kode css3, seperti tutorial yang akan saya informasikan kepada anda khususnya bagi pemula.


Satu dari sekian banyak efek yang diciptakan oleh css3 yaitu dapat digunakan untuk membuat efek bayangan di sekitar gambar posting. Dalam hal ini kita akan menggunakan kode box-shadow.

Cara menerapakannya pada gambar posting agar menghasilkan Efek bayang :
1. login blogger lalu menuju edit html
2. cari kode .post-body img {
3. masukkan kode ini setelah kurung kurawal
-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;
4. jangan lupa save

Efek bayang ini akan lebih hidup jika diterapkan pada gambar  dalam keadaan mouse over (mouse mengenai gambar). Jadi dalam keadaan normal tidak terlihat efek bayangan sedangkan pada saat mouse didekatkan pada gambar baru kelihatan efek bayangnya. Menarik bukan?

Bila ingin membuat efek bayang pada gambar ketika mouse hover saja, caranya :
1.    login blogger lalu menuju edit html
2.    cari kode ]]></b:skin>
3.    masukkan kode ini di atas ]]></b:skin>
.post-body img:hover{
-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;}
4.    terakhir save

Untuk melihat contoh demonya silahkan klik disini

Selamat menikmati gambar dengan efek bayang

Satu lagi cara membuat image reflection atau gambar dengan efek bayangan pada posting adalah dengan menambahkan kode javascript pada template blog. Kalau pada posting yang sebelumnya, di image reflection manualkita bisa membuat efek bayangan ini dengan bantuan pihak ketiga dari situs image reflection maker, maka yang ini lebih simple dan sederhana. Anda bisa membuat gambar atau image yang dipostingkan akan berbayang atau tidak. Artinya, tinggal disesuaikan dengan kebutuhan saja. Caranya dengan menambahkan perintah class="reflect" pada setiap image yang telah diupload ke posting.

Membuat image reflection otomatis pada posting

  1. Login ke blogger dengan id anda

  2. Klik Tata Letak

  3. Pilih menu Edit HTML

  4. Letakkan kode berikut di atas kode </head>
    <script type='text/javascript'>
    //<![CDATA[
    if (!document.myGetElementsByClassName) {
    document.myGetElementsByClassName = function(className) {
    var children = document.getElementsByTagName('*') || document.all;
    var elements = new Array();
    
    for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++) {
    if (classNames[j] == className) {
    elements.push(child);
    break;
    }
    }
    }
    return elements;
    }
    }
    var Reflection = {
    defaultHeight : 0.5,
    defaultOpacity: 0.5,
    
    add: function(image, options) {
    Reflection.remove(image);
    
    doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
    if (options) {
    for (var i in doptions) {
    if (!options[i]) {
    options[i] = doptions[i];
    }
    }
    } else {
    options = doptions;
    }
    
    try {
    var d = document.createElement('div');
    var p = image;
    
    var classes = p.className.split(' ');
    var newClasses = '';
    for (j=0;j<classes.length;j++) {
    if (classes[j] != "reflect") {
    if (newClasses) {
    newClasses += ' '
    }
    
    newClasses += classes[j];
    }
    }
    
    var reflectionHeight = Math.floor(p.height*options['height']);
    var divHeight = Math.floor(p.height*(1+options['height']));
    
    var reflectionWidth = p.width;
    
    if (document.all && !window.opera) {
    /* Fix hyperlinks */
    if(p.parentElement.tagName == 'A') {
    var d = document.createElement('a');
    d.href = p.parentElement.href;
    }
    
    /* Copy original image's classes & styles to div */
    d.className = newClasses;
    p.className = 'reflected';
    
    d.style.cssText = p.style.cssText;
    p.style.cssText = 'vertical-align: bottom';
    
    var reflection = document.createElement('img');
    reflection.src = p.src;
    reflection.style.width = reflectionWidth+'px';
    reflection.style.display = 'block';
    reflection.style.height = p.height+"px";
    
    reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
    reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
    
    d.style.width = reflectionWidth+'px';
    d.style.height = divHeight+'px';
    p.parentNode.replaceChild(d, p);
    
    d.appendChild(p);
    d.appendChild(reflection);
    } else {
    var canvas = document.createElement('canvas');
    if (canvas.getContext) {
    /* Copy original image's classes & styles to div */
    d.className = newClasses;
    p.className = 'reflected';
    
    d.style.cssText = p.style.cssText;
    p.style.cssText = 'vertical-align: bottom';
    
    var context = canvas.getContext("2d");
    
    canvas.style.height = reflectionHeight+'px';
    canvas.style.width = reflectionWidth+'px';
    canvas.height = reflectionHeight;
    canvas.width = reflectionWidth;
    
    d.style.width = reflectionWidth+'px';
    d.style.height = divHeight+'px';
    p.parentNode.replaceChild(d, p);
    
    d.appendChild(p);
    d.appendChild(canvas);
    
    context.save();
    
    context.translate(5,image.height-1);
    context.scale(1,-1);
    
    context.drawImage(image, 0, 0, reflectionWidth, image.height);
    
    context.restore();
    
    context.globalCompositeOperation = "destination-out";
    var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
    
    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
    gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
    
    context.fillStyle = gradient;
    context.rect(0, 0, reflectionWidth, reflectionHeight*2);
    context.fill();
    }
    }
    } catch (e) {
    }
    },
    
    remove : function(image) {
    if (image.className == "reflected") {
    image.className = image.parentNode.className;
    image.parentNode.parentNode.replaceChild(image, image.parentNode);
    }
    }
    }
    
    function addReflections() {
    var rimages = document.myGetElementsByClassName('reflect');
    for (i=0;i<rimages.length;i++) {
    var rheight = null;
    var ropacity = null;
    
    var classes = rimages[i].className.split(' ');
    for (j=0;j<classes.length;j++) {
    if (classes[j].indexOf("rheight") == 0) {
    var rheight = classes[j].substring(7)/100;
    } else if (classes[j].indexOf("ropacity") == 0) {
    var ropacity = classes[j].substring(8)/100;
    }
    }
    
    Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
    }
    }
    
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }
    addLoadEvent(function() {
    addReflections();
    });
    //]]>
    </script>

  5. Klik tombol Simpan Template

  6. Selesai

Satu lagi cara membuat image reflection atau gambar dengan efek bayangan pada posting adalah dengan menambahkan kode javascript pada template blog. Kalau pada posting yang sebelumnya, di image reflection manualkita bisa membuat efek bayangan ini dengan bantuan pihak ketiga dari situs image reflection maker, maka yang ini lebih simple dan sederhana. Anda bisa membuat gambar atau image yang dipostingkan akan berbayang atau tidak. Artinya, tinggal disesuaikan dengan kebutuhan saja. Caranya dengan menambahkan perintah class="reflect" pada setiap image yang telah diupload ke posting.

Membuat image reflection otomatis pada posting

  1. Login ke blogger dengan id anda

  2. Klik Tata Letak

  3. Pilih menu Edit HTML

  4. Letakkan kode berikut di atas kode </head>
    <script type='text/javascript'>
    //<![CDATA[
    if (!document.myGetElementsByClassName) {
    document.myGetElementsByClassName = function(className) {
    var children = document.getElementsByTagName('*') || document.all;
    var elements = new Array();
    
    for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++) {
    if (classNames[j] == className) {
    elements.push(child);
    break;
    }
    }
    }
    return elements;
    }
    }
    var Reflection = {
    defaultHeight : 0.5,
    defaultOpacity: 0.5,
    
    add: function(image, options) {
    Reflection.remove(image);
    
    doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
    if (options) {
    for (var i in doptions) {
    if (!options[i]) {
    options[i] = doptions[i];
    }
    }
    } else {
    options = doptions;
    }
    
    try {
    var d = document.createElement('div');
    var p = image;
    
    var classes = p.className.split(' ');
    var newClasses = '';
    for (j=0;j<classes.length;j++) {
    if (classes[j] != "reflect") {
    if (newClasses) {
    newClasses += ' '
    }
    
    newClasses += classes[j];
    }
    }
    
    var reflectionHeight = Math.floor(p.height*options['height']);
    var divHeight = Math.floor(p.height*(1+options['height']));
    
    var reflectionWidth = p.width;
    
    if (document.all && !window.opera) {
    /* Fix hyperlinks */
    if(p.parentElement.tagName == 'A') {
    var d = document.createElement('a');
    d.href = p.parentElement.href;
    }
    
    /* Copy original image's classes & styles to div */
    d.className = newClasses;
    p.className = 'reflected';
    
    d.style.cssText = p.style.cssText;
    p.style.cssText = 'vertical-align: bottom';
    
    var reflection = document.createElement('img');
    reflection.src = p.src;
    reflection.style.width = reflectionWidth+'px';
    reflection.style.display = 'block';
    reflection.style.height = p.height+"px";
    
    reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
    reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
    
    d.style.width = reflectionWidth+'px';
    d.style.height = divHeight+'px';
    p.parentNode.replaceChild(d, p);
    
    d.appendChild(p);
    d.appendChild(reflection);
    } else {
    var canvas = document.createElement('canvas');
    if (canvas.getContext) {
    /* Copy original image's classes & styles to div */
    d.className = newClasses;
    p.className = 'reflected';
    
    d.style.cssText = p.style.cssText;
    p.style.cssText = 'vertical-align: bottom';
    
    var context = canvas.getContext("2d");
    
    canvas.style.height = reflectionHeight+'px';
    canvas.style.width = reflectionWidth+'px';
    canvas.height = reflectionHeight;
    canvas.width = reflectionWidth;
    
    d.style.width = reflectionWidth+'px';
    d.style.height = divHeight+'px';
    p.parentNode.replaceChild(d, p);
    
    d.appendChild(p);
    d.appendChild(canvas);
    
    context.save();
    
    context.translate(5,image.height-1);
    context.scale(1,-1);
    
    context.drawImage(image, 0, 0, reflectionWidth, image.height);
    
    context.restore();
    
    context.globalCompositeOperation = "destination-out";
    var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
    
    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
    gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
    
    context.fillStyle = gradient;
    context.rect(0, 0, reflectionWidth, reflectionHeight*2);
    context.fill();
    }
    }
    } catch (e) {
    }
    },
    
    remove : function(image) {
    if (image.className == "reflected") {
    image.className = image.parentNode.className;
    image.parentNode.parentNode.replaceChild(image, image.parentNode);
    }
    }
    }
    
    function addReflections() {
    var rimages = document.myGetElementsByClassName('reflect');
    for (i=0;i<rimages.length;i++) {
    var rheight = null;
    var ropacity = null;
    
    var classes = rimages[i].className.split(' ');
    for (j=0;j<classes.length;j++) {
    if (classes[j].indexOf("rheight") == 0) {
    var rheight = classes[j].substring(7)/100;
    } else if (classes[j].indexOf("ropacity") == 0) {
    var ropacity = classes[j].substring(8)/100;
    }
    }
    
    Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
    }
    }
    
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }
    addLoadEvent(function() {
    addReflections();
    });
    //]]>
    </script>

  5. Klik tombol Simpan Template

  6. Selesai

  • Pertama,pergilah ke Dashboard
  • Selanjutnya pilih tab Edit Html
  • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates'
  • Nah,setelah itu cari kode : .post img { (Gunakan Ctrl+F) Biasanya dibawahnya akan ada kode tambahan untuk cssnya,seperti:.post img {padding:4px; border:1px solid #cccccc;}
  • Nah,tinggal ganti kode tersebut dengan kode berikut:
.post img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;}
  • Setelah itu simpan template dan lihat hasilnya :D
Specially thax for http://i30.tinypic.com/1qsh1h.jpg

  • Pertama,pergilah ke Dashboard
  • Selanjutnya pilih tab Edit Html
  • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates'
  • Nah,setelah itu cari kode : .post img { (Gunakan Ctrl+F) Biasanya dibawahnya akan ada kode tambahan untuk cssnya,seperti:.post img {padding:4px; border:1px solid #cccccc;}
  • Nah,tinggal ganti kode tersebut dengan kode berikut:
.post img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;}
  • Setelah itu simpan template dan lihat hasilnya :D
Specially thax for http://i30.tinypic.com/1qsh1h.jpg

Paling tidak ada dua cara membuat teks bergerak. Yang pertama adalah menggunakan kode html marquee. Dan yang kedua adalah menggunakan javascript. Kedua cara ini mempunyai kekurangan dan kelebihan.
Membuat teks bergerak dengan html marquee, lebih ringan daripada menggunakan javascript, jadi blog anda akan lebih mudah dibuka pada saat loading. Inilah kelebihannya. Tetapi kekurangannya, kode html ini tidak bisa dibaca oleh browser tertentu. Artinya teks ini tidak bisa bergerak (diam) di beberapa browser. Membuat teks bergerak dengan javascript keunggulannya, teks ini bergerak di semua browser utama. Kekurangannya adalah, script ini lebih berat dari cara html membuat teks bergerak. Jadi pilihannya tergantung anda.

Pertama, Cara membuat teks bergerak dengan javascrpt. Contohnya anda bisa lihat di Di Sini

Untuk membuatnya silahkan kopi paste kode di bawah ini:



Kedua, Cara membuat teks bergerak dengan html.

Contoh:


Hasilnya akan terlihat seperti ini.

Selamat Datang di http://wisencare.blogspot.com


Untuk membuat latar belakang berwarna, kita bisa membuat kode warna HTML.






Hasilnya akan kelihatan seperti ini.

Selamat Datang di http://wisencare.blogspot.com





Jika anda ingin mengubah arah pergerakan teks, ke kiri, kanan, atas atau bawah, penambahan teks direction dan kode arah pergerakan perlu dibuat.


Kode arah pergerakan:

left= ke kiri
right= ke kanan
up= ke atas
down= ke bawah


Hasilnya akan kelihatan seperti di bawah ini.

Selamat Datang di http://wisencare.blogspot.com




Untuk menjadikan teks bergerak secara bolak balik, kanan ke kiri perlu penambahan teks behavior.


Kode behavior= alternate

Contoh:



Hasilnya akan kelihatan seperti ini.

Selamat Datang Ke Maribinablog.blogspot.com


Cara membuat scrolling text yang bisa di hentikan dengan cursor mouse, penambahan teks onmouseover, onmouseout dan scrollamount perlu dibuat. Kode this.stop(), this.start () dan kecepatan pergerakan scrolling text juga perlu di masukkan.

Kode scrollamount = 1- 5 (anda dapat mengubah kecepatan sesuai angka pilihan anda, tetapi semakin tinggi nilainya semakin laju pergerakan teks tersebut.)



Hasilnya akan kelihatan seperti ini.

Selamat di http://wisencare.blogspot.com


Anda juga boleh mengubah pergerakan teks secara variasi dalam satu kotak. Penambahan teks height dan size perlu dibuat.

Contoh:


Hasilnya akan kelihatan seperti ini.

Selamat Datang http://wisencare.blogspot.com


Cara membuat scrolling text yang dengan background gambar terdapat perlu kode tambahan lagi. Untuk mengganti background berwarna kepada background bergambar gantikan teks bgcolour kepada background beserta link gambar tersebut. Ukuran background juga perlu di tambah.

Contoh:


Hasilnya akan kelihatan seperti ini:

Selamat Datang ke Wisencare.blogspot.com Semoga Ada yang manfaat buat anda.


Selamat berkreasi.

Paling tidak ada dua cara membuat teks bergerak. Yang pertama adalah menggunakan kode html marquee. Dan yang kedua adalah menggunakan javascript. Kedua cara ini mempunyai kekurangan dan kelebihan.
Membuat teks bergerak dengan html marquee, lebih ringan daripada menggunakan javascript, jadi blog anda akan lebih mudah dibuka pada saat loading. Inilah kelebihannya. Tetapi kekurangannya, kode html ini tidak bisa dibaca oleh browser tertentu. Artinya teks ini tidak bisa bergerak (diam) di beberapa browser. Membuat teks bergerak dengan javascript keunggulannya, teks ini bergerak di semua browser utama. Kekurangannya adalah, script ini lebih berat dari cara html membuat teks bergerak. Jadi pilihannya tergantung anda.

Pertama, Cara membuat teks bergerak dengan javascrpt. Contohnya anda bisa lihat di Di Sini

Untuk membuatnya silahkan kopi paste kode di bawah ini:



Kedua, Cara membuat teks bergerak dengan html.

Contoh:


Hasilnya akan terlihat seperti ini.

Selamat Datang di http://wisencare.blogspot.com


Untuk membuat latar belakang berwarna, kita bisa membuat kode warna HTML.






Hasilnya akan kelihatan seperti ini.

Selamat Datang di http://wisencare.blogspot.com





Jika anda ingin mengubah arah pergerakan teks, ke kiri, kanan, atas atau bawah, penambahan teks direction dan kode arah pergerakan perlu dibuat.


Kode arah pergerakan:

left= ke kiri
right= ke kanan
up= ke atas
down= ke bawah


Hasilnya akan kelihatan seperti di bawah ini.

Selamat Datang di http://wisencare.blogspot.com




Untuk menjadikan teks bergerak secara bolak balik, kanan ke kiri perlu penambahan teks behavior.


Kode behavior= alternate

Contoh:



Hasilnya akan kelihatan seperti ini.

Selamat Datang Ke Maribinablog.blogspot.com


Cara membuat scrolling text yang bisa di hentikan dengan cursor mouse, penambahan teks onmouseover, onmouseout dan scrollamount perlu dibuat. Kode this.stop(), this.start () dan kecepatan pergerakan scrolling text juga perlu di masukkan.

Kode scrollamount = 1- 5 (anda dapat mengubah kecepatan sesuai angka pilihan anda, tetapi semakin tinggi nilainya semakin laju pergerakan teks tersebut.)



Hasilnya akan kelihatan seperti ini.

Selamat di http://wisencare.blogspot.com


Anda juga boleh mengubah pergerakan teks secara variasi dalam satu kotak. Penambahan teks height dan size perlu dibuat.

Contoh:


Hasilnya akan kelihatan seperti ini.

Selamat Datang http://wisencare.blogspot.com


Cara membuat scrolling text yang dengan background gambar terdapat perlu kode tambahan lagi. Untuk mengganti background berwarna kepada background bergambar gantikan teks bgcolour kepada background beserta link gambar tersebut. Ukuran background juga perlu di tambah.

Contoh:


Hasilnya akan kelihatan seperti ini:

Selamat Datang ke Wisencare.blogspot.com Semoga Ada yang manfaat buat anda.


Selamat berkreasi.

9/27/2011


Masih dalam rangkaian materi Membuat Daftar Isi atau Table Of Content (TOC) . Setelah kemarin  posting cara  Membuat Daftar IsiSesuai Label atau Category , maka sesuai janji kali ini akan saya lanjutkan dengan Membuat Daftar Isi Sesuai Tanggal Posting  sebagai salah satu bentuk pelayanan prima pada pengunjung .
Sebelumnya saya benar2 mohon maaf belum bisa mengunjungi sobat2 karena benar2 sedang ada segudang kesibukan ofline hingga  jarang sekali Online dan postingan ini saya paksakan  untuk memenuhi janji  pada postingan sebelumnya.
Ok .. Cara membuat Daftar Isi berdasarkan Tanggal posting ini hasilnya bisa dilihat pada contoh disini atau silahkan sobat lihat pada navbar menu blog ini. Adapun langkah2nya adalah sbb. :
  1. Login dulu  ke    http://www.blogger.com/ 
  2. Kemudian buat sebuah Entri Baru dan pilih Edit HTML. atau kalau biasa pake Windows Live Writer (WLW) gunakan modus Source atau Sumber.
  3. Berilah judul, misalnya: Daftar Isi Berdasarkan Label.
  4. Copy Paste script dibawah ini dan ganti namasaungweb.blogspot.com dengan nama Blog anda :
    <script style="text/javascript" src=" http://saungweb.googlecode.com/files/TOCtanggal.js "></script>
    <script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> 
  5. Setelah di-paste, klik Terbitkan Entri atau publish dan lihat hasilnya
  6. Kalau artikelnya sudah banyak bisa ditambah fungsi scrol yang di pasang sebelum code no. 4 , sehingga lengkapnya akan seperti ini : (Kode warna pink silahkan sesuaikan, kalaupun mau dihapus juga silahkan) :
    <div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
    <p align="center">
    <font size="4">Daftar Isi Berdasarkan Tanggal Posting</font></p> 
    <script style="text/javascript" src=" http://saungweb.googlecode.com/files/TOCtanggal.js "></script>
    <script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    <p>
    Kalau yang ini untuk melihat <a href="
    http://saungweb.blogspot.com/2010/04/daftar-isi.html"target="_blank">Daftar isi Berdasarkan Label / Category</a></p> </div>
  7. Selanjutnya tinggal buat link yg menuju ke postingan ini  dan  bisa disimpan di navbar menu atau di sidebar dll, Untuk lebih jelasnya silahkan lihat pada postingan  sebelumnya tentang Membuat Daftar Isi Sesuai Label
Selamat mencoba untuk Membuat Daftar Isi Berdasarkan Tanggal Posting , semoga bermanfaat.
Kalau mau lihat  script aslinya yang belum diedit ada disini


Masih dalam rangkaian materi Membuat Daftar Isi atau Table Of Content (TOC) . Setelah kemarin  posting cara  Membuat Daftar IsiSesuai Label atau Category , maka sesuai janji kali ini akan saya lanjutkan dengan Membuat Daftar Isi Sesuai Tanggal Posting  sebagai salah satu bentuk pelayanan prima pada pengunjung .
Sebelumnya saya benar2 mohon maaf belum bisa mengunjungi sobat2 karena benar2 sedang ada segudang kesibukan ofline hingga  jarang sekali Online dan postingan ini saya paksakan  untuk memenuhi janji  pada postingan sebelumnya.
Ok .. Cara membuat Daftar Isi berdasarkan Tanggal posting ini hasilnya bisa dilihat pada contoh disini atau silahkan sobat lihat pada navbar menu blog ini. Adapun langkah2nya adalah sbb. :
  1. Login dulu  ke    http://www.blogger.com/ 
  2. Kemudian buat sebuah Entri Baru dan pilih Edit HTML. atau kalau biasa pake Windows Live Writer (WLW) gunakan modus Source atau Sumber.
  3. Berilah judul, misalnya: Daftar Isi Berdasarkan Label.
  4. Copy Paste script dibawah ini dan ganti namasaungweb.blogspot.com dengan nama Blog anda :
    <script style="text/javascript" src=" http://saungweb.googlecode.com/files/TOCtanggal.js "></script>
    <script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> 
  5. Setelah di-paste, klik Terbitkan Entri atau publish dan lihat hasilnya
  6. Kalau artikelnya sudah banyak bisa ditambah fungsi scrol yang di pasang sebelum code no. 4 , sehingga lengkapnya akan seperti ini : (Kode warna pink silahkan sesuaikan, kalaupun mau dihapus juga silahkan) :
    <div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
    <p align="center">
    <font size="4">Daftar Isi Berdasarkan Tanggal Posting</font></p> 
    <script style="text/javascript" src=" http://saungweb.googlecode.com/files/TOCtanggal.js "></script>
    <script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    <p>
    Kalau yang ini untuk melihat <a href="
    http://saungweb.blogspot.com/2010/04/daftar-isi.html"target="_blank">Daftar isi Berdasarkan Label / Category</a></p> </div>
  7. Selanjutnya tinggal buat link yg menuju ke postingan ini  dan  bisa disimpan di navbar menu atau di sidebar dll, Untuk lebih jelasnya silahkan lihat pada postingan  sebelumnya tentang Membuat Daftar Isi Sesuai Label
Selamat mencoba untuk Membuat Daftar Isi Berdasarkan Tanggal Posting , semoga bermanfaat.
Kalau mau lihat  script aslinya yang belum diedit ada disini

Buat temen2 yang pengen relate postnya atau artikel terkaitnya mungkin perlu tutorial yang satu ini, caranya mudah kok, kamu tinggal menambahkan kode css saja, yuk dipasang background juga biar tambah keren juga blognya,soalnya jika blog kamu enak dipandan maka pengunjungpun akan betah berlama-lama di blog kamu, asal blog kamu gk lama aja loadingnya..ha ha ha...

langsung aja ya.....buat yg sudah pasang related post or artikel terkait kawan tinggal
cari code ]]></b:skin>
trus copas code berikut ini dan taruh di atas code ]]></b:skin>

/* Related post
----------------------------------------------- */
.rbbox{border:1px solid silver;background:#e0ffff url(http://i492.photobucket.com/albums/rr288/angger07/EmoExcited.gif) no-repeat right bottom;-moz-border-radius:5px;margin:5px;padding:5px}
.rbbox:hover{background-color:#fff}

ganti alamat url (warna merah) dengan alamat url backgound sesuai yang diinginkan.

Buat temen2 yang pengen relate postnya atau artikel terkaitnya mungkin perlu tutorial yang satu ini, caranya mudah kok, kamu tinggal menambahkan kode css saja, yuk dipasang background juga biar tambah keren juga blognya,soalnya jika blog kamu enak dipandan maka pengunjungpun akan betah berlama-lama di blog kamu, asal blog kamu gk lama aja loadingnya..ha ha ha...

langsung aja ya.....buat yg sudah pasang related post or artikel terkait kawan tinggal
cari code ]]></b:skin>
trus copas code berikut ini dan taruh di atas code ]]></b:skin>

/* Related post
----------------------------------------------- */
.rbbox{border:1px solid silver;background:#e0ffff url(http://i492.photobucket.com/albums/rr288/angger07/EmoExcited.gif) no-repeat right bottom;-moz-border-radius:5px;margin:5px;padding:5px}
.rbbox:hover{background-color:#fff}

ganti alamat url (warna merah) dengan alamat url backgound sesuai yang diinginkan.

Menu Breadcrumbs adalah navigasi yang berada di atas postingan , yang mana urutan navigasi nya di mulai dari home > label > judul postingan . contoh nya bisa di lihat di atas postingan ini . apakah breadcrumbs ini penting di pasang pada blog kita ? menurut informasi yang saya dengar konon katanya Breadcrums ini salah satu teknik SEO yang sangat di anjurkan oleh para Webmaster. KarenaBreadcrums sangat membantu dalam pencarian blog kita. wahh kalau begitu tunggu apa lagi , ikuti langkah-langkah di bawah ini :

1. login ke blogger.com

2. pilih Rancangan , lalu klik Edit Html

3. backup dulu template anda untuk jaga-jaga , pilih Download Template Lengkap

4. kemudian centang Expand Template Widget

5. lalu cari kode ]]></b:skin> (gunakan CTRL + F)

6. letakan kode dibawah ini tepat di atas kode ]]></b:skin> tadi .


.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}7. kemudian cari kode <div class='post hentry uncustomized-post-template'>
dan letakan kode di bawah ini , tepat dibawah kode di atas tadi.


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>
catatan : jika kode nomor 7 tidak ketemu ,
coba cari kode <div class='post hentry'> dan letakkan dibawahnya.

8. simpan template anda , dan lihat hasil nya ^_^

Menu Breadcrumbs adalah navigasi yang berada di atas postingan , yang mana urutan navigasi nya di mulai dari home > label > judul postingan . contoh nya bisa di lihat di atas postingan ini . apakah breadcrumbs ini penting di pasang pada blog kita ? menurut informasi yang saya dengar konon katanya Breadcrums ini salah satu teknik SEO yang sangat di anjurkan oleh para Webmaster. KarenaBreadcrums sangat membantu dalam pencarian blog kita. wahh kalau begitu tunggu apa lagi , ikuti langkah-langkah di bawah ini :

1. login ke blogger.com

2. pilih Rancangan , lalu klik Edit Html

3. backup dulu template anda untuk jaga-jaga , pilih Download Template Lengkap

4. kemudian centang Expand Template Widget

5. lalu cari kode ]]></b:skin> (gunakan CTRL + F)

6. letakan kode dibawah ini tepat di atas kode ]]></b:skin> tadi .


.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}7. kemudian cari kode <div class='post hentry uncustomized-post-template'>
dan letakan kode di bawah ini , tepat dibawah kode di atas tadi.


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>
catatan : jika kode nomor 7 tidak ketemu ,
coba cari kode <div class='post hentry'> dan letakkan dibawahnya.

8. simpan template anda , dan lihat hasil nya ^_^

Untuk membuat artikel terkait atau related post, kita akan sedikit mengubek-ubek kode HTML template kita. Jadi seperti biasa saya sarankan untuk membackup template sobat terlebih dahulu sebelum membuat artikel terkait ini.

Buat blogger baru yang belum mengerti tentang artikel terkait akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau yang biasa disebut dengan label (kategori).

Artikel terkait itu biasanya yang saya tau selalu berada dalam 1 kelompok postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.
Berikut tutorial singkatnya :
Login ke Blogger.
Klik Tata Letak.
Klik tab Edit HTML.
Kemudian klik Expand Template Widgets .
Cari kode yang seperti ini :

<p><data:post.body/></p>

atau jika bingung tekan Ctrl + F kemudian ketikkan kode berikut :

<data:post.body/>
Jika sobat sudah menggunakan read more pada template sobat, maka akan terdapat 2 kode <data:post.body/>.
Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel Terkait</h3>
<br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;

 function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Kemudian Save Template.

Untuk membuat artikel terkait versi 2, silahkan sobat baca postingan saya tentang cara memasang artikel terkait di sidebar. Selamat mencoba !

Untuk membuat artikel terkait atau related post, kita akan sedikit mengubek-ubek kode HTML template kita. Jadi seperti biasa saya sarankan untuk membackup template sobat terlebih dahulu sebelum membuat artikel terkait ini.

Buat blogger baru yang belum mengerti tentang artikel terkait akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau yang biasa disebut dengan label (kategori).

Artikel terkait itu biasanya yang saya tau selalu berada dalam 1 kelompok postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.
Berikut tutorial singkatnya :
Login ke Blogger.
Klik Tata Letak.
Klik tab Edit HTML.
Kemudian klik Expand Template Widgets .
Cari kode yang seperti ini :

<p><data:post.body/></p>

atau jika bingung tekan Ctrl + F kemudian ketikkan kode berikut :

<data:post.body/>
Jika sobat sudah menggunakan read more pada template sobat, maka akan terdapat 2 kode <data:post.body/>.
Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel Terkait</h3>
<br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;

 function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Kemudian Save Template.

Untuk membuat artikel terkait versi 2, silahkan sobat baca postingan saya tentang cara memasang artikel terkait di sidebar. Selamat mencoba !

9/22/2011

Untuk membuat artikel terkait atau related post, kita akan sedikit mengubek-ubek kode HTML template kita. Jadi seperti biasa saya sarankan untuk membackup template sobat terlebih dahulu sebelum membuat artikel terkait ini.

Buat blogger baru yang belum mengerti tentang artikel terkait akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau yang biasa disebut dengan label (kategori).

Artikel terkait itu biasanya yang saya tau selalu berada dalam 1 kelompok postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.
Berikut tutorial singkatnya :
Login ke Blogger.
Klik Tata Letak.
Klik tab Edit HTML.
Kemudian klik Expand Template Widgets .
Cari kode yang seperti ini :

<p><data:post.body/></p>

atau jika bingung tekan Ctrl + F kemudian ketikkan kode berikut :

<data:post.body/>
Jika sobat sudah menggunakan read more pada template sobat, maka akan terdapat 2 kode <data:post.body/>.
Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel Terkait</h3>
<br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Kemudian Save Template.

Untuk membuat artikel terkait versi 2, silahkan sobat baca postingan saya tentang cara memasang artikel terkait di sidebar. Selamat mencoba !

Untuk membuat artikel terkait atau related post, kita akan sedikit mengubek-ubek kode HTML template kita. Jadi seperti biasa saya sarankan untuk membackup template sobat terlebih dahulu sebelum membuat artikel terkait ini.

Buat blogger baru yang belum mengerti tentang artikel terkait akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau yang biasa disebut dengan label (kategori).

Artikel terkait itu biasanya yang saya tau selalu berada dalam 1 kelompok postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.
Berikut tutorial singkatnya :
Login ke Blogger.
Klik Tata Letak.
Klik tab Edit HTML.
Kemudian klik Expand Template Widgets .
Cari kode yang seperti ini :

<p><data:post.body/></p>

atau jika bingung tekan Ctrl + F kemudian ketikkan kode berikut :

<data:post.body/>
Jika sobat sudah menggunakan read more pada template sobat, maka akan terdapat 2 kode <data:post.body/>.
Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel Terkait</h3>
<br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Kemudian Save Template.

Untuk membuat artikel terkait versi 2, silahkan sobat baca postingan saya tentang cara memasang artikel terkait di sidebar. Selamat mencoba !

9/17/2011

Cara membuat Auto Readmore otomatis :

1. Login ke Blogger
2. Klik Edit HTML centang Expand Widget Template
3. Cari code </head>
4. Copy script berikut di atas kode </head>
<script type='text/javascript'>
summary_noimg = 700;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Keterangan:
summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
img_thumb_height = tinggi gambar thumbnail (misal: 150px)
img_thumb_width = lebar gambar thumbnail (misal: 200px)

· Setelah itu carilah kode : <p><data:post.body/></p>  (Dalam beberapa template tidak memakai perintah paragraf (<p>), sehingga kodenya hanya <data:post.body/>. Jika ada 2 kode, pilih kode yang pertama.

· Ganti kode tersebut dengan kode ini:

<!-- Awal Readmore -->
<p>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</p>
<!-- Akhir Readmore -->

Catatan:
Jika ingin mengubah perataan teks ganti right dengan left, atau mengubah style huruf italic dengan normal. Tulisan Readmore... dengan kata lain atau dengan gambar.

· Simpanlah hasilnya.

Cara membuat Auto Readmore otomatis :

1. Login ke Blogger
2. Klik Edit HTML centang Expand Widget Template
3. Cari code </head>
4. Copy script berikut di atas kode </head>
<script type='text/javascript'>
summary_noimg = 700;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Keterangan:
summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
img_thumb_height = tinggi gambar thumbnail (misal: 150px)
img_thumb_width = lebar gambar thumbnail (misal: 200px)

· Setelah itu carilah kode : <p><data:post.body/></p>  (Dalam beberapa template tidak memakai perintah paragraf (<p>), sehingga kodenya hanya <data:post.body/>. Jika ada 2 kode, pilih kode yang pertama.

· Ganti kode tersebut dengan kode ini:

<!-- Awal Readmore -->
<p>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</p>
<!-- Akhir Readmore -->

Catatan:
Jika ingin mengubah perataan teks ganti right dengan left, atau mengubah style huruf italic dengan normal. Tulisan Readmore... dengan kata lain atau dengan gambar.

· Simpanlah hasilnya.

9/15/2011

Cara membuat Read more sejajar dengan paragraf adalah sbb:
Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. 
Selengkapnya

mejadi

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. Selengkapnya

Caranya :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><b>Selengkapnya.....</b></a>
</b:if>

Agar kode read more atau selengkapnya menjadi sejajar dengan postingan, anda tinggal memindahkan kode </p> yang saya cetak merah, sehingga menjadi seperti ini :


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><b>Selengkapnya.....</b></a></p>
</b:if> 

Cara membuat Read more sejajar dengan paragraf adalah sbb:
Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. 
Selengkapnya

mejadi

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. Selengkapnya

Caranya :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><b>Selengkapnya.....</b></a>
</b:if>

Agar kode read more atau selengkapnya menjadi sejajar dengan postingan, anda tinggal memindahkan kode </p> yang saya cetak merah, sehingga menjadi seperti ini :


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><b>Selengkapnya.....</b></a></p>
</b:if> 

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML", lalu cari kode : .post img {- - -; ---;----;} atau mungkin saja berbeda seperti  : .post-body img {- - -; ---;----;} 


Yang harus diganti adalah isinya yang berwarna hijau, lalu gantilah yang berwarna hijau itu sehingga menjadi serti ini :


.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}



Simpan dan lihat hasilnya.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML", lalu cari kode : .post img {- - -; ---;----;} atau mungkin saja berbeda seperti  : .post-body img {- - -; ---;----;} 


Yang harus diganti adalah isinya yang berwarna hijau, lalu gantilah yang berwarna hijau itu sehingga menjadi serti ini :


.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}



Simpan dan lihat hasilnya.

7/06/2011


Efek bayangan pada gambar diluar posting yang saya maksudkan disini adalah memberi efek bayang-bayang gelap ditepi gambar yang terpasang bukan di halaman posting melainkan gambar yang dipasang diluar area posting.  Misalnya gambar yang dipasang pada widget.  Tips ini pada prinsipnya sama dengan postingan saya dulu yang berjudul “Cara membuat Efek bayang pada gambar


Tapi tips tersebut hanya berlaku untuk gambar yang ada di dalam postingan, efek bayang akan muncul secara otomatis setiap kita mengupload gambar ke dalam posting blog.

Bila ingin memberi efek bayang pada gambar yang dipasang di tempat tertentu atau luar posting, misalnya di dalam widget maka caranya tinggal copy saja kode berikut ini ke dalam widget html.
Ini kodenya :

<style type="text/css">
.redshadow {
-webkit-box-shadow:4px 2px 7px #f46d17;
-moz-box-shadow: 4px 2px 7px #f46d17;
box-shadow : 4px 2px 7px #f46d17;}
</style>
<img  class="redshadow"  src="URLGAMBAR.jpg"  />
Lihat contohnya di halaman demo:
LIHAT DEMO


Efek bayangan pada gambar diluar posting yang saya maksudkan disini adalah memberi efek bayang-bayang gelap ditepi gambar yang terpasang bukan di halaman posting melainkan gambar yang dipasang diluar area posting.  Misalnya gambar yang dipasang pada widget.  Tips ini pada prinsipnya sama dengan postingan saya dulu yang berjudul “Cara membuat Efek bayang pada gambar


Tapi tips tersebut hanya berlaku untuk gambar yang ada di dalam postingan, efek bayang akan muncul secara otomatis setiap kita mengupload gambar ke dalam posting blog.

Bila ingin memberi efek bayang pada gambar yang dipasang di tempat tertentu atau luar posting, misalnya di dalam widget maka caranya tinggal copy saja kode berikut ini ke dalam widget html.
Ini kodenya :

<style type="text/css">
.redshadow {
-webkit-box-shadow:4px 2px 7px #f46d17;
-moz-box-shadow: 4px 2px 7px #f46d17;
box-shadow : 4px 2px 7px #f46d17;}
</style>
<img  class="redshadow"  src="URLGAMBAR.jpg"  />
Lihat contohnya di halaman demo:
LIHAT DEMO

6/11/2011

Biasanya kotak tombol cetak otomatis ditampilkan diatas postingan atau di bawah postingan. Tombol otomatis bisa berupa tautan dalam text dan gambar icon printer. Ketika seorang pengunjung halaman blog ingin langsung mencetak artikel dari layar ke printer, tidak mesti repot buka navigasi browser, tinggal klik langsung cetak. Praktis.

Anda dapat menggunakan JavaScript untuk membuat kotak dialog CETAK sehingga pengguna dapat mencetak halaman secara otomatis. Meskipun sebagian besar pengguna tahu bahwa mereka dapat melakukan sesuatu seperti "File> Print", sebuah "Cetak halaman ini" pilihan bisa menyenangkan, dan bahkan dapat membuat pengguna tertarik untuk mencetak halaman.


Cara Membuat "Print halaman ini" Dengan Javascript.

Kode berikut akan menciptakan tautan dan akan mencetak halaman blog ini secara otomatis jika diklik. Silahkan dicoba untuk demo.

Cetak Halaman Ini!

Kodenya seperti di bawah ini:

<a href="JavaScript:window.print();">Print this page</a>

Bisa dibuat ke dalam tombol gambar seperti di bawah ini:



Cara Agar Otomatis Muncul Kotak Print.

Anda dapat memanggil fungsi cetak JavaScript pada loading Printer pada versi yang mudah. Ini secara otomatis akan membuka kotak dialog cetak untuk pengguna. Cara membuat kotak print seperti di bawah ini:
  1. Salin dan sisipkan kode berikut di antara tag versi dicetak:


     <script language="Javascript1.2">
      <!--
      function printpage() {
      window.print();
      }
      //-->
    </script> 
    
  2. Tambahkan baris berikut ke tag Anda:

    onload = "printpage ()"
Jadi, tag badan Anda akan terlihat seperti ini:
<body onload="printpage()">

Membuat "Versi Cetak"

CSS dapat dirancang untuk membuat versi cetak yang berbeda dari halaman web Anda. Anda dapat menerapkan gaya yang berbeda untuk setiap pemakaian elemen HTML yang berbeda. CSS dapat melengkapi tampilan. Selain itu variasi font akan membuat style kotak cetak seperti yang anda harapkan. Selamat mencoba.

Biasanya kotak tombol cetak otomatis ditampilkan diatas postingan atau di bawah postingan. Tombol otomatis bisa berupa tautan dalam text dan gambar icon printer. Ketika seorang pengunjung halaman blog ingin langsung mencetak artikel dari layar ke printer, tidak mesti repot buka navigasi browser, tinggal klik langsung cetak. Praktis.

Anda dapat menggunakan JavaScript untuk membuat kotak dialog CETAK sehingga pengguna dapat mencetak halaman secara otomatis. Meskipun sebagian besar pengguna tahu bahwa mereka dapat melakukan sesuatu seperti "File> Print", sebuah "Cetak halaman ini" pilihan bisa menyenangkan, dan bahkan dapat membuat pengguna tertarik untuk mencetak halaman.


Cara Membuat "Print halaman ini" Dengan Javascript.

Kode berikut akan menciptakan tautan dan akan mencetak halaman blog ini secara otomatis jika diklik. Silahkan dicoba untuk demo.

Cetak Halaman Ini!

Kodenya seperti di bawah ini:

<a href="JavaScript:window.print();">Print this page</a>

Bisa dibuat ke dalam tombol gambar seperti di bawah ini:



Cara Agar Otomatis Muncul Kotak Print.

Anda dapat memanggil fungsi cetak JavaScript pada loading Printer pada versi yang mudah. Ini secara otomatis akan membuka kotak dialog cetak untuk pengguna. Cara membuat kotak print seperti di bawah ini:
  1. Salin dan sisipkan kode berikut di antara tag versi dicetak:


     <script language="Javascript1.2">
      <!--
      function printpage() {
      window.print();
      }
      //-->
    </script> 
    
  2. Tambahkan baris berikut ke tag Anda:

    onload = "printpage ()"
Jadi, tag badan Anda akan terlihat seperti ini:
<body onload="printpage()">

Membuat "Versi Cetak"

CSS dapat dirancang untuk membuat versi cetak yang berbeda dari halaman web Anda. Anda dapat menerapkan gaya yang berbeda untuk setiap pemakaian elemen HTML yang berbeda. CSS dapat melengkapi tampilan. Selain itu variasi font akan membuat style kotak cetak seperti yang anda harapkan. Selamat mencoba.

5/12/2011


Efek Thumbnail hover preview pada image, adalah sebutan berdasarkan pemahaman saya sendiri.  Maksudnya adalah efek preview yang memunculkan gambar ketika disorot mouse (hover) dengan ukuran lebih besar dari ukuran sebelumnya.


Tetapi dalam kondisi normal / tidak dalam posisi hover, hanya menampilkan gambar berukuran kecil. Lihat gambar di bawah ini :
thumbnailshover

Atau bila ingin melihat hasil jadinya, klik Live Demo.

Live Demo

Cara pembuatan Efek Thumbnail hover preview pada image :
Copy paste kode di bawah ini ke dalam gadget html atau bisa juga postingan pada postingan html :
<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>
 Catatan:
Yang diberi stabilo warna merah adalah link gambar.
Anda bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri lah… anda pasti bisa.
Selamat mencoba. 


Efek Thumbnail hover preview pada image, adalah sebutan berdasarkan pemahaman saya sendiri.  Maksudnya adalah efek preview yang memunculkan gambar ketika disorot mouse (hover) dengan ukuran lebih besar dari ukuran sebelumnya.


Tetapi dalam kondisi normal / tidak dalam posisi hover, hanya menampilkan gambar berukuran kecil. Lihat gambar di bawah ini :
thumbnailshover

Atau bila ingin melihat hasil jadinya, klik Live Demo.

Live Demo

Cara pembuatan Efek Thumbnail hover preview pada image :
Copy paste kode di bawah ini ke dalam gadget html atau bisa juga postingan pada postingan html :
<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJHolZjwBXMG1pNAoogjpsOxSvrGCeorqPgKZdDb4l37KRkLRj6OInNvrf62BAiijKdPvAQ9-WevUCOwOUMiO4MAQVFWR0ggf3EAEExbd1vldJl6YrpeeDEV0s3y0O9o8WNtfQEXIwQIX/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SEDINJ16oJGpsTxlcOzZahkhgdh3UTEK8I6eTC7e6WzZV49hZilw_OaoGzl9-g8C0LGXk-0upUgdr26XMZKlp4UFm0gCt4tMKHDbNDi0aBcek36CO5HhmWgvstI19uVpJNuvYgdVbg9i/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicH6yoFMjx576rt7AVD6jJO_hqe7zyHB5WToxcALVUpb8CtfyKw0hKlkycQJy6EDkKkTbDF5JVEcBhg4qjpvCRikEOgxAm_78RbH73McBW3YsQyb-DMsynmIGhnIuiPjoTQRUTN48SSONF/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>
 Catatan:
Yang diberi stabilo warna merah adalah link gambar.
Anda bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri lah… anda pasti bisa.
Selamat mencoba.