Cara Membuat Pojok Blog Menggulung

Sudah banyak para Blogger membahas cara membuat Pojok Halaman Blog seperti Menggulung yang dalam bahasanya mbah Google dikatakan Pagepeel, disini saya akan berbagi dengan kawan yang saya beri judul Cara Buat Pojok Blog Menggulung :z

Cara Membuatnya :

• Masuk ke Account Blogger dengan ID kawan
• Pada Dasbor pilih Template
• Cari Tag ]]></b:skin>
• Copas Script berikut dibawah ]]></b:skin>

<script type='text/javascript'>var untuk =&#39;http://Nama Blog kawan.blogspot.com/&#39;</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>

• Ganti text yang berwarna merah [Nama Blog kawan] dengan URL blog kawan
• Simpan Template kawan

screenshot

• Sekarang buka Blog kawan untuk melihat hasilnya :y 
• Kalau tak ada masalah hasilnya seperti pada Blog Demo saya itu

Karena sekarang saya sedikit ada kesibukan untuk peng-Editan lebih lanjut tunggu postingan saya berikutnya, tapi jangan lupa berikan Pendapat / Komentar / Saran kawan :r

Slide sebagai Background Blog

Tempo hari ada kawan Blogger menanyakan cara menampilkan Slide / Animasi pada background Blog, karena kesibukan saya yang paling senang utak-utik Template makanya kelupaan [kejelekan saya sering ganti Template untuk kawan jangan diikuti, karena sangat jelek search engine] :w  hehehe lupa nggak nyambung ya............!!!

Kembali ke pokok Artikel yaitu Cara Menampilkan Slide pada background Blog. :z

Sebenarnya kalau kita mau mencoba saya rasa Slide dimana saja bisa ditampilkan sebagai Background, misalnya pada latar belakang Blog, Postingan, Sidebar caranyapun sangat mudah asal sabar dan belajar dari kesalahan yang kita temui :x 

OK langsung saja ke Cara dan persiapan yang diperlukan :

• Siapkan Image / Gambar dengan ukuran minimal 1020px x 700px paling sedikit 2 Gambar untuk dijadikan Slide [atau dengan kata lain siapkan sebuah slide width=1020px; height=700px;]
• Copy Link Slide kawan pada tempat penyimpanan 
• Masuk Account Blogger ID kawan
• Pada Dasbor pilih Template - Edit HTML - lanjutkan
• Simpan Template kawan dulu untuk jaga-jaga
• Scroll kebawah pelan-pelan sampai pada  »  body {  
• Kawan bisa menempatkan Link Slide yang sudah dipersiapkan tadi pada background.

Contoh :

body {  

        color: #333;

        font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;

        font-size:13px;        

background: rgba(0,16,107,1) none repeat scroll 0 0; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0,16,107,1)', endColorstr='rgba(217,235,249,1)');background:-moz-radial-gradient(top, rgba(0,16,107,1), rgba(217,235,249,1));background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,16,107,1)), to( rgba(217,235,249,1))) no-repeat top center;
}

 atau seperti ini :

body{

margin:0 auto 0;

font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;

font-size:13px;
color: #333;

background: #236C95;

}

 Kawan cukup mengganti backgroundnya saja dengan Link Slide tadi, maka selengkapnya menjadi :

body {
margin: 0 auto 0;
        color: #333;
        font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;
        font-size:13px;
        background: url(http://2.bp.blogspot.com/-tMY2Y27rvM4/T-CCPOsXfBI/AAAAAAAAC4Q/4pt6uzJsItc/s1600/background.gif) no-repeat fixed center center;
}

• Jangan lupa simpan Template kawan

Cara membuat Tulisan Berjalan di Blog

Salam Blogger Indonesia, sekarang saya akan berbagi dengan kawan cara membuat Tulisan Berjalan yang mirip merquee yang penempatannya di Tab / tempat Judul Blog kita dan yang bisa ditaruh di sidebar Blog.

Baiklah mari kita bahas satu persatu :

Caranya :

1. Cara membuat Tulisan Berjalan di Tab.
2. Cara membuat Tulisan Berjalan di Sidebar

• Masuk ke Account Blogger dengan ID kawan 
• Pada Dasbor / Rancangan pilih tambah gadget
• Klik tanda (+) pada HTML / JavaScript
• Copas (copy paste) script berikut kedalamnya

Script No. 1



<script type="text/javascript">

//Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)

function tb8_makeArray(n){

this.length = n;

return this.length;

}

tb8_messages = new tb8_makeArray(6);

tb8_messages[0] = "SELAMAT DATANG !!!";

tb8_messages[1] = "DI TIPS-BLOGBEGO";

tb8_messages[2] = "TERIMA KASIH";

tb8_messages[3] = "KUNJUNGAN DAN";

tb8_messages[4] = "KOMENTAR ANDA";

tb8_messages[5] = "DITUNGGU....!!!";

tb8_rptType = 'infinite';

tb8_rptNbr = 5;

tb8_speed = 100;

tb8_delay = 2000;

var tb8_counter=1;

var tb8_currMsg=0;

var tb8_tekst ="";

var tb8_i=0;

var tb8_TID = null;

function tb8_pisi(){

tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);

document.title = tb8_tekst;

tb8_sp=tb8_speed;

tb8_i++;

if (tb8_i==tb8_messages[tb8_currMsg].length){

tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;

}

if (tb8_currMsg == tb8_messages.length){

if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){

clearTimeout(tb8_TID);

return;

}

tb8_counter++;

tb8_currMsg = 0;

}

tb8_TID = setTimeout("tb8_pisi()", tb8_sp);

}

tb8_pisi()

</script></div>

• Usahakan kalimatnya jangan panjang-panjang
• Angka 6 menyesuaikan dengan banyaknya baris kalimat
• Ganti Tulisan yang berwarna merah sesuai dengan selera kawan
• Banyaknya / panjangnya tulisan tanpa batas
• Demonya bisa kawan lihat disini 
• Penempatan scriptnya bisa digabung dengan script yang lainnya. 
• Kalimat / tulisan tsb akan berjalan dari kiri ke kanan.

Sedangkan yang lainnya :

• Copas script berikut pada gadget / elemen atau bisa juga digabung, 

Script No. 2



<script language="JavaScript">

var txt="SELAMAT DATANG DI BLOG ILUSTRASI.BLOGSPOT.COM - SEMOGA ANDA NYAMAN DAN PUAS - TERIMA KASIH";

var tipsblogbegotutorial=170;

var fress=null;function judulbloggerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

fress=setTimeout("judulbloggerak()",tipsblogbegotutorial);}judulbloggerak();

</script>

• Ganti Tulisan yang berwarna merah sesuai dengan selera kawan.
• Kalimat / Tulisan akan berjalan dari kanan ke kiri
• Script ini bisa juga ditaruh pada Edit HTML template kawan, yaitu tepat diatas kode </body> letaknya paling bawah.
• Demonya ; lihat pada Tab Blog ini

sedangkan tulisan yang bisa tampil di sidebar :

• Copas (copy-paste) script berikut kedalam gadget / elemen atau bisa digabung dengan script yang lainnya

Script No. 3



<script language="JavaScript">
var max=0;
function textlist()
{
max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];
}
tl=new textlist
(
" SUATU KEBANGGAAN APABILA DENGAN BERBAGI KAMI DAPAT MEMBANTU KAWAN....!!! " // Geben Sie hier den zu scrollenden Text ein
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l)
{
pos=0;
setTimeout("textticker()",1000);
x++;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",100);
}
// end -->
</script>
<script language="JavaScript">
<!--
document.write("<FORM NAME=\"tickform\">");
document.write("<INPUT TYPE=\"TEXT\" NAME=\"tickfield\" SIZE=\"90\">"); // Bei SIZE können Sie die Größe des Feldes ändern
document.write("</FORM>");
textticker();
//--></script></div></div>

• Ganti tulisan warna merah sesuai dengan selera kawan
• Angka 90 warna biru disesuaikan dengan panjangnya kalimat / tulisan yang kawan buat
• Tulisan akan tampil dari kiri ke kanan seperti kita sedang menulis
• Penempatannya bebas asal panjang tulisan disesuaikan dengan lebar tempat menaruhnya
• Demonya : silahkan lihat di atas tempat postingan

Dari ketiga Script tersebut diatas (script No.1 dan Script No. 2) tidak bisa digabung, karena tampilannya sama-sama di Tab Blog (pilih salah satu).

Oh ya simpan Blog kawan dan lihat hasilnya.

Tampilkan Iklan diatas Thread Comment

Sebelumnya saya sudah publish tentang Cara Pasang Iklan diatas Form Komentar, tapi setelah bergulirnya Thread Comment pada Blogspot maka tampilan Iklan dimaksud menjadi berpindah-pindah [kadang tampil kadang tidak atau bisa diatas maupun dibawah Form Komentar] karena Template Blog kawan sudah memakai Thread Comment :z 
Sekarang saya akan memberikan solusinya bagi kawan yang ingin menampilkan Iklan Sponsor di atas Komentar 

Caranya sangat simple :

• Siapkan script Iklan Sponsor yang sudah di Parse »  disini 
• Masuk ke account Blogger dengan ID kawan
• Untuk jaga-jaga Simpan Template kawan dulu
• Beri tanda centang disamping  Expand Template Widget
• Cari Kode  <data:post.numComments/> <data:commentLabelPlural/>   (kalau pada template kawan ada 2 atau lebih kode tersebut pakai yang pertama  :r 
• Taruh script Iklan Sponsor dibawahnya, seandainya tampilannya agak rapat diatas script Iklan Sponsor tambahkan &ltbr/&gt
  selengkapnya sebagai berikut :

 <h4>
      <b:if cond='data:post.numComments == 1'>
        1 <data:commentLabel/>:
      <b:else/>
        <data:post.numComments/> <data:commentLabelPlural/>       </b:if>
    </h4>
<br/> <a target="_blank" href="http://www.ppcindo.com/click.php?a=6963&x=TVRNd09UQTFOekExTkMweU1qSXVNVEkwTGpFMU5pNHlNekE9&d=1&adurl=296234426&url=http%3A%2F%2Fpaydotcom.net%2Fr%2F59708%2Fbnp%2F26662416%2F5%2F"><img src="http://www.omniforexsignals.com/banners/468x60.gif" width="468" height="60" border="0" style="top: 40.857074455015095px; "></a>

Teks yang berwarna biru adalah contoh script Iklan, tapi di Parse dulu  sebelum disimpan / ditaruh disana :x

Tampilan Iklan

• Jangan lupa simpan Template kawan :y

Mempercantik Border dengan CSS

Sekarang saya akan melanjutkan mempercantik Border Blog dengan css, seperti apa yang saya  posting sebelumnya, mengapa saya bahas kembali ? - karena apa yang disampaikan oleh mas Adam makin lama makin asyik saja benar adanya bagi saya secara pribadi, bagaimana kawan apa nggak tertarik seperti Menu Horizontal pada Blog saya ini. 

Kalau dilihat dari scriptnya sepertinya memusingkan kepala, karena urutan pembuatannya tidak diketahui, makanya sekarang saya akan mencoba mengupas cara pembuatannya biar jangan membingungkan atau memusingkan kepala.

Okey langsung saja, pada Dasbor kawan Klik tambah Gadget / elemen baru, tapi sebelumnya saya copas dulu di punyanya mas Adam Dasar-dasarnya yaitu seperti berikut : 

Tabel tersebut menunjukkan tampilan Blog kita biar tidak ada perubahan,  umpama di Chrome bagus tapi belum tentu bagus kelihatannya di Mozilla maupun di Internet Explorer (IE) karena disini saya anggap yang paling bikin jantung deg-degan. 

Biar pembicaraan kita tidak melebar, baiklah langsung saja ke pokok masalah : 

Selanjutkan mari kita perhatikan perbedaan - perbedaannya :

<table border="2">

<tr><td align="center">

CONTOH 

</td></tr></table>

Ini adalah bentuk table biasa, sekarang mari kita tambahkan css

<div style="border:2px solid #000000;-moz-transform: skew(32deg,12deg);-webkit-transform: skew(32deg,12deg);">

CONTOH</div>

Warna merah adalah kemiringan tabel

<div style="border:2px solid #000000;-moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius:0px 0px;border-bottom-right-radius: 10px 10px; ">CONTOH </div>

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius- bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius:10px 10px;-border-bottom-left-radius: 0px 0px;">CONTOH</div>

Coba perhatikan angkanya topleft:10px 10px artinya sudut di kiri atas melengkung sebesar 10px dan bottomleft: 0px 0px  artinya sudut di kiri bawah tidak melengkung alias lurus.

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;">CONTOH</div>

<div style="border:2px solid #000000;-moz-border radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px; ">CONTOH</div>

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px;">CONTOH </div>

Bagaimana kawan apa bisa dipahami, sedangkan untuk model yang lainnya silahkan kawan mencoba variasinya. 

Cara membuat Tulisan Berjalan di Blog

Salam Blogger Indonesia, sekarang saya akan berbagi dengan kawan cara membuat Tulisan Berjalan yang mirip merquee yang penempatannya di Tab / tempat Judul Blog kita dan yang bisa ditaruh di sidebar Blog.

Baiklah mari kita bahas satu persatu :

Caranya :

1. Cara membuat Tulisan Berjalan di Tab.


2. Cara membuat Tulisan Berjalan di Sidebar

• Masuk ke Account Blogger dengan ID kawan 


• Pada Dasbor / Rancangan pilih tambah gadget


• Klik tanda (+) pada HTML / JavaScript


• Copas (copy paste) script berikut kedalamnya

Script No. 1



<script type="text/javascript">

//Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)

function tb8_makeArray(n){

this.length = n;

return this.length;

}

tb8_messages = new tb8_makeArray(6);

tb8_messages[0] = "SELAMAT DATANG !!!";

tb8_messages[1] = "DI TIPS-BLOGBEGO";

tb8_messages[2] = "TERIMA KASIH";

tb8_messages[3] = "KUNJUNGAN DAN";

tb8_messages[4] = "KOMENTAR ANDA";

tb8_messages[5] = "DITUNGGU....!!!";

tb8_rptType = 'infinite';

tb8_rptNbr = 5;

tb8_speed = 100;

tb8_delay = 2000;

var tb8_counter=1;

var tb8_currMsg=0;

var tb8_tekst ="";

var tb8_i=0;

var tb8_TID = null;

function tb8_pisi(){

tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);

document.title = tb8_tekst;

tb8_sp=tb8_speed;

tb8_i++;

if (tb8_i==tb8_messages[tb8_currMsg].length){

tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;

}

if (tb8_currMsg == tb8_messages.length){

if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){

clearTimeout(tb8_TID);

return;

}

tb8_counter++;

tb8_currMsg = 0;

}

tb8_TID = setTimeout("tb8_pisi()", tb8_sp);

}

tb8_pisi()

</script></div>

• Usahakan kalimatnya jangan panjang-panjang


• Angka 6 menyesuaikan dengan banyaknya baris kalimat


• Ganti Tulisan yang berwarna merah sesuai dengan selera kawan


• Banyaknya / panjangnya tulisan tanpa batas


• Demonya bisa kawan lihat disini 


• Penempatan scriptnya bisa digabung dengan script yang lainnya. 


• Kalimat / tulisan tsb akan berjalan dari kiri ke kanan.

Sedangkan yang lainnya :

• Copas script berikut pada gadget / elemen atau bisa juga digabung, 

Script No. 2



<script language="JavaScript">

var txt="SELAMAT DATANG DI BLOG ILUSTRASI.BLOGSPOT.COM - SEMOGA ANDA NYAMAN DAN PUAS - TERIMA KASIH";

var tipsblogbegotutorial=170;

var fress=null;function judulbloggerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

fress=setTimeout("judulbloggerak()",tipsblogbegotutorial);}judulbloggerak();

</script>

• Ganti Tulisan yang berwarna merah sesuai dengan selera kawan.


• Kalimat / Tulisan akan berjalan dari kanan ke kiri


• Script ini bisa juga ditaruh pada Edit HTML template kawan, yaitu tepat diatas kode </body> letaknya paling bawah.


• Demonya ; lihat pada Tab Blog ini

sedangkan tulisan yang bisa tampil di sidebar :

• Copas (copy-paste) script berikut kedalam gadget / elemen atau bisa digabung dengan script yang lainnya

Script No. 3



<script language="JavaScript">

var max=0;

function textlist()

{

max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];

}

tl=new textlist

(

" SUATU KEBANGGAAN APABILA DENGAN BERBAGI KAMI DAPAT MEMBANTU KAWAN....!!! " // Geben Sie hier den zu scrollenden Text ein

);

var x=0; pos=0;

var l=tl[0].length;

function textticker()

{

document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";

if(pos++==l)

{

pos=0;

setTimeout("textticker()",1000);

x++;

if(x==max)

x=0;

l=tl[x].length;

} else

setTimeout("textticker()",100);

}

// end -->

</script>

<script language="JavaScript">

<!--

document.write("<FORM NAME=\"tickform\">");

document.write("<INPUT TYPE=\"TEXT\" NAME=\"tickfield\" SIZE=\"90\">"); // Bei SIZE können Sie die Größe des Feldes ändern

document.write("</FORM>");

textticker();

//--></script></div></div>

• Ganti tulisan warna merah sesuai dengan selera kawan


• Angka 90 warna biru disesuaikan dengan panjangnya kalimat / tulisan yang kawan buat


• Tulisan akan tampil dari kiri ke kanan seperti kita sedang menulis


• Penempatannya bebas asal panjang tulisan disesuaikan dengan lebar tempat menaruhnya


• Demonya : silahkan lihat di atas tempat postingan

Dari ketiga Script tersebut diatas (script No.1 dan Script No. 2) tidak bisa digabung, karena tampilannya sama-sama di Tab Blog (pilih salah satu).

Oh ya simpan Blog kawan dan lihat hasilnya.

Slide Daftar Isi plus thumbnails

CONTOH SIDEBAR KIRI ATAS 

Setelah sebelumnya saya berbagi dengan kawan Cara membuat Daftar Isi berisi thumbnails, sekarang mari kita kembangkan lagi Daftar Isi tersebut biar ada variasinya, yaitu menjadi spy / slide, apaladi thumbnails kawan bagus edit dikit ukurannya diperbesar biar lebih jelas persis seperti menonton layar tancap ah ah



Seperti Daftar isi sebelumnya agar kita tidak meng-update setiap saat makanya jumlah numpostnya dibuat lebih banyak dari jumlah judul artikel yang sudah kita posting, dan kawan jangan khawatir ini bisa edit ulang setiap saat.

Okey langsung saja kita ke TKP cara pembuatannya :

1. Masuk ke account dengan ID kawan. 



2. Pada Dasbor pilih tambah gadget / elemen


3. Copas (copy-paste) script berikut kedalamnya 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:208px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;

border:1px solid #ddd;

}





#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}





.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}





-->

</style>





    <script language="javascript">





imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";





showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://NamaBlogKawan.blogspot.com/";

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src="https://sites.google.com/site/tipsblogbegoku/arsip/recentpostthumbspy-min.js" type="text/javascript"></script>

Keterangan : 

Kawan bisa mengadakan edit untuk menyesuaikan dengan keadaan Blog kawan

1. Height dan Width yang berwarna Biru adalah tinggi dan lebar, 350px  adalah ukuran untuk 4 judul slide yang akan ditampilkan (umpama kalau kawan ingin menampilkan 8 judul maka 350px diganti menjadi 700px, begitu juga sebaliknya kalau ingin menampilkan 2 judul slide maka 350px diganti dengan 175px).



2. thumbwidth = 70; dan thumbheight = 70; adalah besarnya thumbnails. 


3. numposts = 10;  artinya  jumlah yang akan ditampilkan 10 - disesuaikan


4. Beri judul : menyesuaikan, maksudnya kalau kawan akan menampilkan max 10 judul sebaiknya pakai judul Artikel Terbaru atau sejenisnya begitu sebaliknya angka 10 itu kawan ganti menjadi melebihi jumlah postingan beri judul Daftar Isi atau sejenisnya (contoh 10 kawan ganti menjadi 100 sedangkan postingan kawan baru 75  judul ) dan ini akan secara otomatis judul artikel di update.


5. NamaBlogKawan ganti dengan url Blog kawan.


6. limitspy=4 adalah jumlah yang akan tampil sebanyak 4 judul, kalau kawan mau merubah caranya seperti point 1 diatas. 


7. Simpan gadget / elemen Blog dan lihat hasilnya


8. Kalau tampilannya kurang pas adakan pengeditan ulang
   
   

Cara membuat Daftar Isi berisi Thumbnails

Salam Blogger Indonesia, apa khabar kawan, apa masih enggan alias malas seperti saya pasca Tahun Baru 2011, oh ya lupa Selamat Tahun Baru 2011 semoga di tahun yang baru ini kita diberikan Kemudahan, Kesehatan dan Rejeki  yang lebih baik dari tahun-tahun sebelumnya - Amin.

Sekarang sayan akan berbagi dengan kawan cara membuat Daftar Isi Blog berisi Thumbnails yang diciptakan oleh Blogger senior Abu Farhan tapi file scriptnya yang sudah saya simpan, tujuannya untuk mengurangi beban loading, begitu juga harapan saya kalau kawan ingin memakai atau memasangnya di Blog kawan silahkan simpan file js  di site hosting kawan.

Caranya sebagai berikut : 

1. Masuk ke account Google dengan ID kawan 


2. Pada Dasbor pilih tambah Gadget


3. Copas (copy-paste) script berikut kedalamnya

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://idin.jw.lt/images/idin.png";

imgr[1] = "http://idin.jw.lt/images/idin.png";

imgr[2] = "http://idin.jw.lt/images/idin.png";

imgr[3] = "http://idin.jw.lt/images/idin.png";

imgr[4] = "http://idin.jw.lt/images/idin.png";

showRandomImg = true;

boxwidth = 300;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 25;

thumbheight = 25;

fntsize = 11;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 25;

summarFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 100;

home_page = "http://tips-blogbego.blogspot.com/";

</script>

<script src="https://sites.google.com/site/tipsblogbegoku/arsip/recentposts_thumbnail.js"type="text/javascript"></script></div>

Keterangan :

• thumbwidth = 25; thumbheight = 25;  warna violet adalah ukuran thumbnails


• numposts = 100; warna biru adalah jumlah file / judul Blog kawan akan ditampilkan, ini disesuaikan umpama jumlah postingan / artikel kawan yang sudah dibuat sebanyak 150 maka angka 100 diganti mungkin dengan 200.


• Ganti tulisan tips-blogbego warna merah dengan Nama Blog Kawan


• Simpan Gadget dan lihat hasilnya

Mempercantik Blog dengan Gradient

Salam Blogger Indonesia, jumpa lagi, setelah hampir seminggu saya bongkar pasang Blog ini tujuannya agar loading lebih ringan disamping tampilan sekarang seperti gaya WEB, ini semua berkat cbox tanggal 15 Desember 2010 yang isinya sangat simple bikin penasaran saja dalam hati "Yang ini udah Baca?" saya langsung meluncur ke Mas Adam namanya (Blogger senior dari Kalimantan), disanapun saya jadi tambah penasaran karena beliau beda dengan saya, beliau mengijinkan kita Copas tapi untuk mengembangkan kreasinya kita sendiri memolesnya, trims mas Adam, kalau anda ingin tahu lebih jauh tentang beliau bisa klik  disini  

Tempo hari saya pernah menulis Artikel tentang "Klik Label tampilkan Judulnya saja," atau kalau kawan lupa bisa baca kembali disini  

Hasil sebenarnya tidak pakai kotak, nah sekarang saya akan berbagi dengan kawan apa yang saya dapat dan saya kembangkan versi Tips Blogbego tentunya.

Sekarang yang akan saya bahas kembali adalah Klik Label menampilkan judulnya saja versi pengembangan dengan css Gardient, mari kita mulai percobaan ini :

1. Masuk ke account dengan ID kawan


2. Download / simpan template kawan dulu


3. Beri tanda centang “Expand Widget Template”


4. cari script : <b:include data='post' name='post'/> 


5. Ganti script <b:include data='post' name='post'/>  dengan script berikut :

contoh HASIL

<b:ifcond='data:blog.homepageUrl!=data:blog.url'><b:if cond='data:blog.pageType != &quot;item&quot;'><div style='float:center; padding:4px;margin:5px;border:2px solid #000000;background: #FFFFFF; fontsize:16px;text-decoration:none;line-height:normal;'><a expr:href='data:post.url' style='text-decoration:none;'><data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr: onclick='data:post.addCommentOnclick'style='text-decoration:none;'><b:if cond='data:post.numComments==1'>1<data:top.commentLabel/><b:else/><data:post.numComments/><data:top.commentLabelPlural/></b:if></a></div><b:else/><b:include data='post'name='post'/></b:if> <b:else/><b:include data='post' name='post'/> </b:if>

sekarang perhatikan script warna merah = #FFFFFF;  ganti dengan script berikut -moz-radial-gradient(left, #FFFFFF, #000000); background:-webkit-gradient(linear, left top, right bottom, from(#FFF), to ( #000)); 

maka hasilnya seperti gambar disamping

<b:ifcond='data:blog.homepageUrl!=data:blog.url'><b:if cond='data:blog.pageType !=&quot;item&quot;'><div style='float:center; padding:4px;margin:5px;border:2px solid #000000;  background: #FFFFFF; font size: 16px; text-decoration: none; line-height:normal;'><a expr:href='data:post.url' style='text-decoration:none;'> <data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr: onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

contoh HASIL 

coba perhatikan lagi script warna merah yang saya tambahkan 

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div style='float:center; padding:4px;margin:5px;border:2px solid #000000; -moz-border-radius:10px;-webkit-border-radius:10px; background:#FFFFFF; font size: 16px; text-decoration: none; line-height:normal;'> <a expr:href='data:post.url' style='text-decoration:none;'> <data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

tampilan di Mozilla

sekarang perhatikan script warna biru #FFFFFF;  ganti dengan script berikut

-moz-radial-gradient(left, #FFFFFF, #000000); background:-webkit-gradient(linear, left top, right bottom, from(#FFF), to ( #000)); maka hasilnya seperti gambar disamping

tampilan di Crome

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div style='float:center; padding:4px;margin:5px;border:2px solid #000000; -moz-border-radius:10px;-webkit-border-radius:10px; background:#FFFFFF; font size: 16px; text-decoration: none; line-height:normal;'> <a expr:href='data:post.url' style='text-decoration: none;'> <data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr: onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

• Bagaimana keren bukan, silahkan kawan mempraktekkan di Blog masing-masing, kalau seperti contoh diatas saya cuma memakai warna hitam (#000;) dan putih (#FFF;), silahkan diganti dengan warna selera masing-masing


• Kalau kawan ingin batas kanan dan kiri biar jangan terlalu bulat rubah angka 10px pada contoh script berikut menjadi lebih kecil nilainya >> -moz-border-radius:10px;-webkit-border-radius:10px; 


• Hasil yang lebih baik akan kelihatan di Mozilla Firefox 

Ekspresikan pengunjung Blog dengan.....

Salam Blogger Indonesia, apa khabar kawan, mudah-mudahan dalam keadaan sehat-sehat selalu seperti diri saya ini, yang penting tetap semangat walau kantong kita KANKER (kantong kering).

Sekarang saya akan berbagi dengan kawan untuk mempercantik Blog kita yaitu menambahkan Emoticons atau sejenisnya, bagi yang sudah pasang khususnya pada Blognya tak ada salahnya kita sharring. walaupun ini sudah lama keberadaannya para blogger memasangnya, kalau kawan tertarik dan untuk gampangnya silahkan di Copas yang saya punya, atau kalau kawan mau coba-coba cari yang lainnya seperti kawan kita Blogging_indonesia mengkoleksi aneka emoticons bisa lihat disini atau mau cari di tempat lain sangat banyak, tujuannya tiada lain agar blog kita tampil beda  beda dengan Blog teman yang lainnya.

OK biar nggak ngelantur ceritanya, langsung saja lihat emoticonsnya seperti berikut :

:10	:11	:12	:13	:14	:15	:16	:17
:18	:19	:20	:21	:22	:23	:24	:25
:26	:27	:28	:29	:30	:31	:32	:33
:34	:35	:36	:37	:38	:39	:40	:41
:42	:43	:44	:45	:46	:47	:48	:49
:50	:51	:52	:53	:54	:55	:56	:57

Kode Scriptnya sebagai berikut :

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJymIRf_2ZeVogYGENadTPw55ICLZrsGzygGgZyHKoVq4KPYO9u1HC40ilNTPjYwDaI16QWBynI_DpiNKmWlHhpsJU2P0o0HgRZNQTr3uRSetboVGUkyHsuKimlVGhiV0-5zTFpMFsd5M7/s128/t4belajarblogger36.gif" />:10

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfJou8-8ChbDDbF_Bvl1rPH4RD4xXSTUGO5uxfw9XFXJLXyCAAuk6c0vMswMbyRrT9lfYfVmYJhtYvRKLitZhtEk2Se43cH0CRmd1M4IY6R-uuM7VYQWtV53GFhUMO1ur6_xYH1gzqvrCT/s128/t4belajarblogger37.gif" />:11

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL7-1SkyRjcFxWjVFTLVNPCEQwfAJrDgzqVXoy6kr32eL0l-SKWAd2Bl_5zQ916WyXXaUtFXYg-HyqUbsNwqT8s2JGreiZq2pgtD9zrPwMxbdjEm7plqWPrEWLgzjpLQfWbXiB-Pe9w2NP/s128/t4belajarblogger38.gif" />:12

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPOsytFVZpWOACK-D-2oWEMEuIUTtuel6zIfcPHufZOfRouFiszv9jSjzMrar3zdjS1R-oDGtwAvfQ0PtOaVmlKiYPGus9ol1D6cO7pcohtZoATMTwY72ndr_hx9PLUUxeWQXgJifN_4s/s128/t4belajarblogger39.gif" />:13

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDdDxwFYSwfr30SaeoWv6DAG4076x5mJGJ3mZ80hOzGPgmIFzXDJsW0PafjqRxTsuhnRmc0_WnVAeyTGhNSX3vwx3tJOyRhqB3S9JS35TlORWk3pHnsYDH10XAsr81ffaaBJJSdnNbjprk/s128/t4belajarblogger40.gif" />:14

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcl6RNJhkCyBIEu6DSlWVYnEBjR6KqNpEjgRD_mKZxltGSkEyRz_SoiFyujz9g45YCk5NN6lA4nI1qosOGo_ZarU_-53xUKCERU55iQOO3xy-BSyHcRI6aUZ_SOt0ro39qU9EeKFL3hPvR/s128/t4belajarblogger41.gif" />:15

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg323d2_UEe5C76H3n1KnWpLrTKcFfju92OJBXMB7Ty3C6c5LH-0KAncwEw3BLTdeKGQcUeD1lb0Prrvu_KisWyMu-CV6fSLnxGVm5bO00F9CNxRYZ5LJEL-v4KX841G18Vv7gWLKBO6L2N/s128/t4belajarblogger42.gif" />:16

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ3gbluXt_-_FE4pFehdLwAaIOAPUAcMuOWu2VAXhrgv3_gkQ0TJmD-CDUQbfmqrTJ5cJs6AXYH8SdY-K0fyMdrHbxL3u0qR8KojZ2lVXi_CHy6tMSYh0RA97FS-rDgVZoASvxjM3TpGnf/s128/t4belajarblogger43.gif" />:17

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Jy-AV9LafiAi6DoooTFiETcB32WCOi0XrWaiwh_opxeIyi5G3h7ifya1czmLaMMVa3kKHqwYhuxwbR04zbK4GlvBwMgBWuITwKtB2270fLO2KBkWdVctMOhPS72PJOaEJzo4gWrRhNhW/s128/t4belajarblogger44.gif" />:18

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDxSQAf5s-oyXxBwOeMoCYdJC7GBLSjyNrCvEJaR0pEsqs2WojT_PZMmUUT0XQkUsqQy2IZEY1u2KvW90HCZ97Ld8Nk7VftYcfgTJZHpzks1mNeXFGjrhkpfz-QN4K6AS7oD3jUcUc8CBu/s128/t4belajarblogger45.gif" />:19

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIVTEy6wyFuix4uPVTbv4W3LKcb9XfALtQkFN6R3edr0jfVv5FezjJevLp6U2pPAsXobXkSLkvELV-I37s4nZq1p6glmeBfSbIAywVHfpnaHq7AlNaidQYRmHL341hYv1m4XkgYsXNlyO/s128/t4belajarblogger46.gif" />:20

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHInVLrgyo5HeKMQwRUEKwNalCTpYNGh33Q8W8i3yf_x-rUs6dPPPS9pW83ciohiSvKeFNVloXgbm_IRq5uWHi5wArq5AwhvqpetA9Kcn5zkZDmZmlWXZ4gRVxnrL6kIGzZ8QbJy1kqRmK/s128/t4belajarblogger47.gif" />:21

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPEiAV872jPx2FhdHTiRBmw4hQjYqVrYRoSIC7Pcvt8yYYbsE2tC2cCyzryE6XGV5nkxl3IMexyr2ToNOuC-9Om_HF-l7JtVwm95rWkDXocEApE5lnjjvnSg-D8NjzzoqHtAvtGacvUQx/s128/t4belajarblogger48.gif" />:22

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDZzj8D8leJb5td1P9yz5Kne_s9Opxldhy6pGqvsLP0GWCAl5_irn7ljG8EDb7kwBpFs4f0_TsaTKVrYieOoCBi2htj1xmFL7ckK1GsnHyIsCPb8kI_t1Zig9E4LpnBOD-LVjJV55Yhaa/s128/t4belajarblogger49.gif" />:23

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGNu0ofT5rTAp3bHQb7q-cJCMDboxF1PjaBmHpNLYkFWDhco6yav8l4Wi2ZfTuog_ZGTDtpUEinyM7sYowB5ZHTAPjiFM7JYuCq5jAz1pQeAhyphenhyphencpK-aJDcfusECYZtk0WQoDLzqL52mE-/s128/t4belajarblogger50.gif" />:24

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FJRX4Z-fVU4JTdVx44ltpl2CusrxDYmd6Zko26JeOp-ioWHOZ3eobYresJqdiGrupRTe99un9LY4nZWAASgc6Usd7PxVULnV8gvdBsuePsq_dQNeM37DaUHXbaXBmjryowegugFVbOc-/s128/t4belajarblogger51.gif" />:25

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNd8xlo4g10mBmcz29aeCV8HZSwFBTSGkAZBjlpRdvpxosGlhr0Dnz4myqUXQJutVx_uC-IZCauwGklB-LDr2KJg7hU3qBTbaGv9Nqa2gk3B3dLZXUrlkEiV4jRpeOI7hw9u6OH9k5zSDR/s128/t4belajarblogger52.gif" />:26

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO9YW_WcHPJ8qAjuVuDjq00Hpg5Oab4jTTcI7qIcQZRK9oVhT0cd2UkdJuNwzs1BCo4QqzgDN1iag32R4plgF6evdPkv96oBAVi_al6_SpZ7qzD-cIGNE3FRcp6p0I5pRhvaHM1kpfZrED/s128/t4belajarblogger53.gif" />:27

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeeqtBbrljHqckASMQbtjZVKRCPZEAX5KwMWNnJGWerYaUa8Uga7LG9ousE5u3bf7pY5n21tYIkDJPYUN0FLYTSbhMhyphenhyphenwAF69SzgeT-ITOggiLjw1O5EM9kZPkS9TFY0LK1_r2nOS_1HUy/s128/t4belajarblogger54.gif" />:28

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsz8C338fPiqIFSv7nATCvwByWQJgzAfbRrW-zlGYA_-AwKI8qYx-__OuEa3Uy0mC694gE1WbLCOzZsWXNT4C1XJMz9dzUlKTUN7XuWEgwvkRnWhF3tpgZb5or6Q4RG4lJnO4bmpD_ovrR/s128/t4belajarblogger55.gif" />:29

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qRPMvB6trFxdVXSOcLdDBP8WeFCAkUkwNj1eZRyAcSAV-kAB8GzT13iOhAaVKVuiGp0E2LqFi97vQ_iURuUZjUe-_Lu4mNpaQH9wnSpZwVdy93e012PgUO2Ani3qiznFLeSZq8ohyphenhyphenhHw/s128/t4belajarblogger56.gif" />:30

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_ouTk5R4d_j4XGg79Pf2p1EAwEGqRlUV4akN9V4T5I6W2hz_IFc7T9RjyMGDxmYvZfnmLRm4zKSruhtdVLL9FW6VqeP7RlVEOsky6NM7nUl2-rRwETgHGbCaxG8Q3J3_wyR116aHtIJJ/s128/t4belajarblogger57.gif" />:31

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5VfYbBqjy0fjgFyALb5-OY45hCDs5vNwl7tVJkxZz6gBafM9z4Hq7Jddc_n4jPmuwt7J0xApevwHWBlwvCM6H-bQlwip8xMsN3ZwcalzdlW9mqbmdIybBXTMwEOmO2tTlT9uaQsS20BR/s128/t4belajarblogger58.gif" />:32

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmMI1T-vmNOxWXRW1w0cZnTSuCsk7L-8rrMNPn8wqlhyphenhyphen7CbAPW_KNsax253DMLsC8GOrBN9ijZeNYBKf4TSQkc_5I5I_oKgz-WksF3z_77qzpboopqO0FZeK7iWYL0LrwaM9rYhiAi18IN/s128/t4belajarblogger59.gif" />:33

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PY4cOzpB2HUwvJcpIkBLb5MCrSrFUA6EcGkSt4JeUcG2bLXhr326TnRU6m9-1x4tLsn6xQ0i3fwfyHUKiYQQhwEl7BHI9JIeXHcelZ36roO5GsECDiZ2ExE4bKVbkv5Rg_3gtuimMmb1/s128/t4belajarblogger60.gif" />:34

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx21WFJCiYt3f0RbuxziLyMrr0BmqKtANSntfX5NuhjGVbCM-P3TPUWQOHeKYblErtQk_VtBunUzkeOakyM9_y1J4IlyzgWAgBNMYDNvIkXF0qTUq4yxCrOdNAO_3kVxoaqvo-Fov9QKZj/s128/t4belajarblogger61.gif" />:35

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3tubnOo1fwoE8tlcOa6jv09-AG0JvDZIBj2TsXDBANERxzFzHGnCWsaialZIp96M2yCcWiOvXHxs3qxm434zvtDoqK3y-aww4d-1rMMgiz8af6KOY4duNL6Mj6PWP3ayHuDo1fl_cxX1/s128/t4belajarblogger62.gif" />:36

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbb2rjeiLf3165tXTQ5wDO_VlPYBnqQkxRCwX2hxFE7xmaOF2oY0bhZcTHaZ3vyGc-G6sj87tctC1SX9Rc21Ie8_ubR3nwhlw4rOJczAfbd7t0jOaBGkgFm-PfptQL7yrYDIwX6jg9mzEd/s128/t4belajarblogger63.gif" />:37

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii5d78bRW0uO_FouENAs7M9xYghrflfUXL8mguWzRwAZbHC6F9vmGBwFhOPBVfxTy28WFOoaZOmnlT4nT1EXhQRtiFxxhBGb1Xwcrd40Ga3GgLrrCf__qRMgeTUIpqHPPtzDGtROE7tBEe/s128/t4belajarblogger64.gif" />:38

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqniLESGUr1bRNehhMBJxiVBjE566Bdq2m0OrLiiiWDFIivAVCnvSoakwUvXR7heG1E49zuCxI3AfYN-i3sWcx_W6co7t5ZSAnBRe2p2_CnOgi7jYzkIwMICw62U8jw1zi8akSc-UmjVU/s128/t4belajarblogger65.gif" />:39

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwYE_zf6RqIVAAJKn-5CktZN7nI92-b6aWoR-XSq7Dgm_4EAvW3fmIPcW_qd7kVNWi3OBNy6LVgThwHp2t7g_Aiq8IyNyLjxSzL-HHwvQLQewogZDKVL4VdwwomazvzgT7-mWHklcdWZGI/s128/t4belajarblogger66.gif" />:40

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQejSoc-EWU9HwH_a72HOsGlc51uLfe9u_eqbID3m0lm6b0gUKlKUcczylhTt7RPliGD5c1yjmV335P039VSXY07TQK82fVEGc2ADUH7fcPAhkjL78RSvuIEwO_1U9VyvMsMCYI8wt15xv/s128/t4belajarblogger67.gif" />:41

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSqfz1wWi6g3mnZwbSnPSuYxmHqMLwoti0G1e-YQMbOcSU0mYiw0FYD0pKI91bG5zmNcmXpYGq4HybTLkpbN5b84MbI_qpBdqW2eU74A0ssLxXIHtlRr0PRHXSPyfJYDUOdKvVqEbw20gh/s128/t4belajarblogger68.gif" />:42

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiceCMFtk5p3JK0J046Pp3a6Zrn_XCv1rvDfPaZndfzNtqPIb8YJjtXBYjiK-nxALy1s4SJx0Eb6lD_eBT_Fd3_hFg91_SovI-UGkSvjDew3NYu5iboPUrI5p4Shk5Bh5XFF48VDvMvEhUE/s128/t4belajarblogger69.gif" />:43

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6r1bVQb2ikM34ENX0Uwt9oiYKzwJZ_6D1JNBp_ps-znMsdCqyW434Yz65rx_xWaby_4fabTdQaKgVoI6HE4SIq5VfIFzvVrUjPQzGsuPr6FYmJBrF7WjmqE_X04xGFhr60NAQ474Br4mx/s128/t4belajarblogger70.gif" />:44

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQwhxGL0-7l7Mr-yITTEyYDzWNGS0oHW__TCU-6gyLyRbQsutRHD2IPgFhoYa4O79RBZe-g6eHWeZyG8SxoOAIj9X5yVMx4uywFv5ue9BfcIgP-MwZmTK9DHYynuGH7GsC628-Evk3Zj0/s128/t4belajarblogger71.gif" />:45

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjp6J2G7bs7Te_8F88Nh9GKUC1A7EaxFQVFPsBEtwzU0XeCQScgpnzQXCojwPJEtQ48G0BNEgASj8it_KrUkchE_vTZkciBKG9GszZlhTBX5DLNRoEdnilFfDFgIQQ0uzIxTmK60MHlsMp/s128/t4belajarblogger72.gif" />:46

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9xHHGr6ZHoxEMWxxggyU6iFfQm8q906BxD0iVltXWQaUuw7vfB80Ukj1rkpdxVT0HENFKrOP_mHhl6WNanPmwKXon9Q-SO0pvlAmcAUJlKMI8MCyjIorz3Hshh5TH_DMfWxUQiCGdUt_/s128/t4belajarblogger73.gif" />:47

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4H9wIyenFgNrH40Kf5wzXPK2B0kDb7OuXzoo2TC8CRPUERJxNDYe33z8TskauXZ3FD9SmU-rxYIsdQvcgLi-xXpJCGuxQDQF-e2BrvNsbafHuAWZFR1oMzcxt2M9eUJNfP1kNGC2TVCfK/s128/t4belajarblogger74.gif" />:48

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOrJZOcjc1plJVpWexP3Rkf9RUVgKeBaecrfevvYWCYbfQCKLpElMNoYXDQoDrduMuJZpFimef79Yn3hvhFfsi2K1nuF7hMo0BQj21YF3LVKQT9kZ-Muobctokl1zS03Rtpvie0oIPVJR/s128/t4belajarblogger75.gif" />:49

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhm-NSoKT4vb3yRaiHfm7rHDrnC3BqLJuqVCvdlaZv9AD20A1_eKaBN3u_EW8qyaK03-Nstxw5wIIFAerEmQ-p6d84g7CwhoajADOk3o2JgrRCECusnWR3NQaO2gFoezEQkxAk4hmYO0lC/s128/t4belajarblogger76.gif" />:50

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjas99zn_KngUsGrNEbHlu1x8LRVMi2CrNdpmbqX6_Ovdct1TWesPjeNi4oStNTZcfSGgkJ_x9MtJh6U89Mqw6YNzEWEFN7tbxanCuO2sWfrjzYY2qXm9lshc56nn-YUw7E-PLh5hQhSLRT/s128/t4belajarblogger77.gif" />:51

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJc7tFZ6lkEMa05laq1ADCBeMqjKZihIrR0LRT2M9zlFIi8ppb_2gy-m4L-lVjR2FF_YVjK8i9zUWmUmHcxUR_7rkunRLclOcE4u9Fm2dXq4w6ItX1b-ZO2hQ3Nx0Qu5MOwAnILXA6266X/s128/t4belajarblogger78.gif" />:52

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49guRZQDlblG7ttwoxpt4nOgZ3OliKiUL3MNFP3Ye3jqDQov1P7PCY8T0dGX-POQYVEoh3cqIpa2hpvsIXd-8m7X4uHaRBxIqUKCacxslKkTqHsnGGYVLDMGw-iKQUBT0LY9QClsyDf2z/s128/t4belajarblogger79.gif" />:53

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig9DuGyKlWoOtPJbriHhlA5IQKnIo4UikT46pxdmv4q6mwi9RcbX1OSa77tXpLIinvKZKbblecdedBqbJhIQD9h6-q2xW_FeuSEjjk9kuv-mGytg5lQLLZ-CvaV4jZnYRZa48qbdOPE89M/s128/t4belajarblogger80.gif" />:54

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvMnC8muRTJnQjjoPfnwfe1c6YMasrhL86BFiyURMYUu5u2g5poUwR9bB1auaCBRT1B37X99jQTNsspLMKEuQig6SPfWu-yDX4mTzG4HcgC2WwcvUuA1ekfqSC_qlda45ZVuc-S9JrCFR/s128/t4belajarblogger81.gif" />:55

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiNQmyUtq6CeHL7OmNICbm5STRg5PJ1dwBUXhybh7lQcsGIq2d8DPx7bx-JGQipBJ9jR6Lg5Fo-8ST11s0mvyey4Sir-qDrS_Ihn4zJg0n7fn3FUnEPDWpUghoR3KNPE-_g9VdCbzoaHE/s128/t4belajarblogger82.gif" />:56

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEF1q4wscyxtrqZ5rJWofQnJOro1iabORvo9r2naKFgA22wF_UxILPSWaIOP4PaXNLbrWanzvDTZ97U5Mi9koP4K-yx6Cq-GWoSp-iCcmR4Ko1s3v3w9OpQPlKcbEo4Yy1CM-FN1RCWZqU/s128/t4belajarblogger83.gif" />:57

Bagaimana, berminat memasangnya pada Blog kawan, kalau berminat

Caranya sebagai berikut :

• Seperti biasa masuk ke account Blogger dengan ID kawan



• Pada Dasbor pilih Rancangan - Edit HTML


• Backup / simpan template kawan dulu


• Centang kotak radio disamping Expand Template Widget


• Cari Kode script  </body> letaknya paling bawah template


• Kalau sudah ketemu copas kode berikut persis diatasnya

<script src='https://sites.google.com/site/tipsblogbegoku/fileku/emoticonplus-v2.js ' type='text/javascript'/>



























• Selanjutnya naikkan cursor keatas dikit atau cari kode ini seperti berikut ini 

                    <b:if cond='data:post.embedCommentForm'> 

• Copas (copy paste) semuanya atau dipilih sesuai selera kawan kode script emoticons diatas dan taruh persis diatas kode script ini : 
  
  

  
  
  
  
  
  <b:if cond='data:post.embedCommentForm'>  
  
  
  
  

  
  

  
  

  
  maka hasilnya seperti gambar disamping :

  
  

  
  

  
  

  
  
  
  

Kalau kawan ingin tampil beda, maksudnya lain dari yang lain atau mau naruhnya dibawah kotak komentar sebagian / semuanya dari emoticons tersebut caranya geser kebawah dikit saja atau cari kode script seperti ini : <div id='backlinks-container'>

Coba perhatikan kode script berikut :

<b:if cond='data:post.embedCommentForm'>

          <b:if cond='data:post.allowNewComments'>

            <b:include data='post' name='comment-form'/>

          <b:else/>

            <data:post.noNewCommentsText/>

          </b:if>

        <b:else/>

          <b:if cond='data:post.allowComments'>

            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

          </b:if>

</b:if>

</p>

</b:if>

Taruh disini kode script emoticons 

<div id='backlinks-container'> 

Maka hasilnya seperti gambar disamping.

Sebelum disimpan lihat Pratinjau dulu.

Kalau sudah pas save / simpan template kawan dan lihat hasilnya dengan membuka salah artikel / postingan kawan.









Catatan : Nomor urut tolong jangan dirubah - nanti tak bisa jalan

Update