Cara Membuat Spoiler

starsplash Lama juga saya tidak membuat postingan di blog ini, gatal juga rasanya tangan pengen mencet – mencet keyboard. Tutorial kali ini, saya akan membahas tentang membuat spoiler pada blog.

 

Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak makan tempat. Sebenarnya sobat juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.

 

Spoiler ini bisa sobat letakkan di postingan, mungkin sobat gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.

 

Contoh Spoiler:
Letakkan kode script, HTML dan teks anda disini

 

 

Untuk membuat spoiler, silahkan sobat copy kode script nya dibawah ini :

 

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">


Letakkan kode script, HTML dan teks anda disini

 

<br>
</div>
</div>
</div>

 

Keterangan :

  1. Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
  2. Width : 55px untuk lebar spoiler.
  3. Font-size: 11px untuk besar tulisan pada kotak spoiler.
  4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Selamat mencoba ! Happy

Merubah Tampilan Link Ketika Mouse Diarahkan



Merubah Tampilan Link Ketika Mouse Diarahkan. Tampilan link ketika mouse diarahkan pada link tersebut bisa kita ganti. Contohnya silahkan arahka mouse anda pada link dibawah ini.

-Rumah Blogger
-Business Online Tips

Bagaimana cara membuatnya?. Sebenarnya sangat sederhana. Langkah pertama, silahkan login ke account blogger kamu. Kemudian masuk ke halaman edit html dan cari kode di bawah ini.

PageRank Button Checker

PageRank Button Checker. Pada kesempatan kali ini Tips Blogger akan memberikan Tips tentang Pagerank. Sebelumnya saya sudah pernah menjelaskan tentang bagaimana cara meningkatkan pagerank dan bagaimana cara menampilkan pagerank tersebut pada blog. Memang banyak website yang menyediakan button untuk menampilkan pagerank, diantaranya adalah mypagerank.net dan prchecker.info. Tapi kali ini saya

Pasang Avatar atau foto dalam Komentar


Pasang Avatar atau foto dalam komentar. Pada ulang tahun blogger yang ke 10, mereka banyak menambahkan fitur-fitur yang memudahkan para blogger dalam menggunakannnya. diantaranya adalah Auto read more, followers, facebook-twitter button dan lain-lain. Nah sekarang Tips blogger akan membahas salah satu dari fitur yang telah ditambahkan oleh blogger, yaitu avatar dalam komentar. saya sudah pernah

Blogger Support Read More

abstract162 Saya tidak tau pasti kapan blogger update fasilitas read more ini, seperti yang ada di wordpress, sekarang kita tidak perlu lagi menggunakan read more manual yang pernah saya bahas dulu. Jadi lupakan saja read more yang dulu pernah saya jelaskan di blog ini.

 

Karena fungsi read more dari blogger ini lebih praktis, sobat tidak perlu lagi meletakkan kode <span class=”fullpost”> setelah postingan pertama dan tidak pula harus menutupnya dengan </span> di akhir postingan.

 

Sebenarnya kode pemisah postingan yang pertama akan muncul dan yang akan muncul secara keseluruhan ini sangat simple, hanya kode <!--more-->, jadi tidak masalah jika sobat menulis menggunakan windows live writter.

Sobat masih bisa menggunakan read more ini dengan menambahkan kode <!--more--> diantara postingan yang akan tampil pertama. Oke kita tinggalkan windows live writter, sekarang tuju blogger.

 

  1. Buka blogger dengan ID sobat. 

     

  2. Pada halaman dashboard, klik Setting –> Pilih Global Setting, klik radio button Update Edittor

     

  3. Kemudian tuju halaman postingan, dan perhatikan gambar yang saya lingkari dengan warna merah di bawah ini.

     

    Halaman Post

     

    Nah tombol tersebut adalah tombol pemisah postingan yang biasa kita sebut dengan read more. Silahkan di coba menulis artikel dan pisahkan dengan kode tersebut.

     

  4. Untuk setting kata read more silahkan sobat tuju Elemen Halaman.

     

  5. Kemudian klik Edit pada Posting Blog, seperti gambar di bawah ini

     

    Post

     

  6. Pada halaman Edit tersebut, perhatikan Post Page Link Text, silahkan sobat ubah sesuai keinginan sobat, bisa dengan “read more” atau “baca selengkapnya”.

     

    Main

     

  7. Kemudian Simpan.

Selamat menulis menggunakan read more baru dari blogger. Open-mouthed

Widget Recent Posts dari Bloggertricks.com

recent posts Lagi – lagi tentang recent posts, semoga sobat tidak bosan dengan postingan saya. Sama dengan postingan yang kemarin, bedanya kalo postingan saya terdahulu, saya menulis tentang membuat recent posts dari fasilitas  yang ada di blogger, maka kali ini yang akan saya bahas adalah membuat recent posts yang di buat oleh Kranthi yang empunya bloggertricks.com.

 

Widget ini agak berbeda dari recent posts part 1, bedanya disini kita bisa atur lebar widget, warna border, ukuran font, tinggi dan lebar thumbnails, dll. Tapi kelemahan widget ini adalah tidak adanya cuplikan isi post atau preview dari postingan kita. Silahkan pilih sobat mau menggunkan yang mana.

 

Mau coba yang ini ? ayo kita lanjutkan. Jika dalam tulisan / postingan, sobat tidak pernah memasukkan gambar, maka gambar akan menjadi kotak hitam dan akan terlihat kurang bagus, jadi sebaiknya jika sobat menulis artikel, masukkanlah minimal 1 gambar agar dalam widget recent posts ini muncul gambar / thumbnails dari postingan kita. Lanjut, silahkan ikuti langkah – langkahnya berikut ini :

 

  1. Seperti biasa, loginlah ke blogger terlebih dahulu.

     

  2. Klik Tata Letak.

     

  3. Klik Elemen Halaman.

     

  4. Kemudian klik Tambah Gadget.

     

  5. Pilih yang HTML / Javascript, lalu masukkan kode scriptnya berikut ini :

     

    <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 = 298;
    cellspacing = 8;
    borderColor = "#FFFFFF";
    bgTD = "#000000";
    thumbwidth = 40;
    thumbheight = 40;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 5;
    home_page = "http://miscah.blogspot.com/";
    </script>
    <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

     

  6. Yang harus di ganti / edit:

     

       boxwidth = 298  -–> lebar kotak widget   
       cellspacing = 8  -–> ruang di antara sel   
       borderColor = "#FFFFFF"  -–> warna border / garis pada kotak
       thumbwidth = 40  --> lebar thumbnails
       thumbheight = 40  --> tinggi thumbnails 
       fntsize = 12  --> ukuran font (huruf)   
       acolor = "#666"  --> warna Judul   
       aBold = true  --> tebal huruf pada judul post (true or false)   
       numposts = 5  --> jumlah judul post yang ingin ditampilkan
      home_page = http://miscah.blogspot.com/ -–> ganti dengan alamat url blog sobat.

     

    Untuk kode warna – warna, bisa lihat disini.

     

  7. Kemudian Simpan.

Selamat berkreasi !! WaveSleepy

Memasang Total Komentar dan Total Posts

Fp037 Untuk memudahkan kita melihat jumlah makhluk yang sudah berkomentar di blog kita, sobat bisa pasang script untuk total komentar di blog sobat, script ini termasuk yang banyak di gunakan oleh blogger, selain script total post / artikel yang ada di blog kita.

 

Kalau total posts sendiri sebenarnya sobat bisa melihat di halaman dashboard blogger, namun jika sobat tertarik untuk memasangnya sekedar untuk mempelihatkan jumlah postingan yang sudah sobat buat, ya monggo disini juga ada scriptnya. Script total komentar ini ada bagusnya sobat letakkan dibawah recent comments, itu pun jika sobat telah memasangnya.

 

Dan begitupun untuk total posts sebaiknya dipasang dibawah recent posts, karena selain terlihat bagus juga agar tidak berantakkan. Coba saja jika total komentar sobat letakkan di atas header blog, kan lucu atuh, masa total komentar ada di header..pamer nih blog saya ada 10.000 komentar, huh cape’ dehh. Whew

 

Langsung praktek, berikut kode script total komentar dan total posts nya :

 

  Kode script untuk total komentar :

 

<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t +'</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

 

  Kode script untuk total posts :

 

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

 

Yang harus diganti hanya tulisan dengan warna merah saja, ganti dengan alamat blog sobat.  Untuk meletakkannya sudah tau kan ? bagi yang masih awam, silahkan ikuti langkah – langkahnya berikut ini :

 

  1. Login ke blogger dengan ID sobat.

     

  2. Klik Tata Letak.

     

  3. Klik Elemen Halaman.

     

  4. kemudian klik Tambah Gadget.

     

  5. Pilih yang HTML / Javascript, kemudian masukkan salah satu kode script diatas.

     

  6. Setelah itu Simpan.

     

Mudah kan, silahkan di coba aja biar tau.Happy

Memasang Widget Recent Post Dari Blogger

contoh Postingan terbaru atau biasa disebut recent posts merupakan informasi singkat yang menampilkan judul postingan terakhir / terbaru secara berurutan untuk memudahkan pengunjung melihat postingan terbaru kita.

 

Pada postingan saya terdahulu, sudah pernah saya bahas tentang membuat recent post dengan menggunakan feeds url kita. kalau cara seperti itu sangat mudah , namun hasil yang di dapat kurang sempurna karena tidak di tampilkannya gambar / thumbnails dan comment count (total komentar) dari postingan kita.

 

Sebenarnya jika sobat jeli, widget recent posts ini ada didalam fasilitas yang disediakan oleh blogger. Tidak usah panjang lebar, langsung saja kita menuju lokasi.

 

  1. Seperti biasa sobat login dahulu ke blogger.

     

  2. Kemudian pada Elemen Halaman klik Tambah Gadget.

     

  3. Pilih Featured.

     

    featured

     

  4. Lalu pilih Recent Posts Advanced.

     

    recent post

     

  5. Pada halaman pengaturan, silahkan sobat ganti Blog Url dengan alamat blog sobat.

     

    pengaturan

     

    Untuk Height merupakan tinggi dari widget, Number of posts to display adalah jumlah postingan yang akan ditampilkan, Summary length adalah panjang karakter isi postingan yang akan ditampilkan. Untuk yang lain – lain sobat contreng saja semua.

     

  6. Dibawahnya ada preview recent posts untuk memudahkan sobat melihat seperti apa hasilnya nanti.

     

    Preview

     

  7. Setelah itu jangan lupa Simpan.

Silahkan lihat hasilnya, mudah kan. Open-mouthed

Meningkatkan Pagerank? Join Rumah Blogger

Meningkatkan Pagerank? Join Rumah Blogger. Beberapa waktu yang lalu saya sempat menuliskan tentang cara mengingkatkan pagerank dan juga backlink gratis dari Rumah blogger. Nah sudah banyak lho blogger Indonesia yang bergabung pada Rumah Blogger. Rumah Blogger adalah blog yang saya buat untuk mempermudah para blogger untuk meningkatkan link populeriti seperti alexa rank dan google pagerank. Google

Cara Membuat Read More Otomatis

RMO Pada postingan sebelumnya sudah pernah saya bahas tentang cara membuat read more atau baca selengkapnya. Hampir sama dengan postingan saya kali ini, namun read more otomatis memiliki kelebihan yaitu postingan akan terbagi menjadi 2 bagian secara otomatis.

 

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down. 

 

Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

 

Berikut langkah – langkah dalam membuat read more otomatis :

  1. Silahkan login ke blogger terlebih dahulu.
  2. Klik Tata Letak
  3. Kemudian klik Edit HTML.
  4. Centang Expand Template Widget
  5. Letakkan kode berikut ini tepat diatas kode </head> :

    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>

    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore link script, version 2.0 (for blogspot)

    (C)2008 by Anhvo

    visit http://en.vietwebguide.com to get more cool hacks
    ********************************************/
    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>

  6. Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :
    <div class='post-header-line-1'/>
    <div class='post-body'>
    <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'>Readmore</a>
    </b:if>
    <div style='clear: both;'/>    
    sehingga sekarang hanya ada satu <data:post.body/>
  7. Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>
  8. Ganti kode tersebut dengan kode berikut ini :

    <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More … <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

     

  9. Kemudian Simpan Template.

 

Keterangan :

  • summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
  • summary_img = 360 –-> untuk tinggi postingan dengan gambar.
  • img_thumb_height = 120 –> tinggi gambar.
  • img_thumb_width = 150 –> lebar gambar.
  • Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

 

Silahkan sobat atur sesuai template sobat. Selamat berkreasi. Happy

Pentingnya Blog Dummy

Pentingnya Blog Dummy. Apa sih blog dummy itu?, blog dummy adalah sebuah blog yang dibuat untuk menyokong blog utama. Blog dummy dapat meningkatkan efektitas posisi blog utama pada search engine. Contohnya apabila kamu mengikuti sebuah kontes SEO, Kenali Dan Kunjungi Objek Wisata Di Pandeglang (kontes yang saya ikuti), pasang link kamu pada blog dummy tersebut, baik di body ataupun pada

Link Gratis Tips Blogger Bagi Yang sering berkomentar

Link Gratis Tips Blogger Bagi Yang sering berkomentar. Tips blogger akan membagi-bagikan link gratis untuk sahabat tips blogger yang sering berkomentar. Link gratis ini tentu saja sangat berguna bagi blog kamu, yaitu untuk meningkatkan google pagrank dan juga alexa rank. Dengan meningkatnya GP atau Alexa rank blog kamu, maka tentu saja dollar akan semakin mudah kamu dapatkan dari internet. Saya

Cara Membuat Multi Kolom

kolom Tutorial kali ini membahas tentang design template, multi kolom, pasti sudah banyak yang tau apa itu multi kolom, tapi saya yakin masih sedikit yang mengetahui cara membuatnya. Kali ini kita akan membuat muliti kolom tepat dibawah halaman blog kita atau biasanya letaknya dibawah kolom postingan, ambil contohnya saja yang ada di blog ini dimana saya membuat 3 kolom pada bagian bawah template. Banyak variasi yang bisa sobat buat untuk mempercantik kolom – kolom ini.

 

Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika sobat menggunakan kode ini, maka akan secara otomatis membentuk tulisan yang disertai garis putus – putus dibawah tulisan dan icon cantik yang mengawali tulisan.

 

Kali ini saya akan gunakan template yang lebarnya 1000px sehingga saya menggunakan lebar kolom 990px. Baiklah, langsung praktek aja ya biar tau.

 

  1. Seperti biasa login dulu ke blogger.

     

  2. Klik Tata Letak.

     

  3. Pilih Edit HTML dan centang Expand Template Widget. 

     

  4. Tambahkan kode berikut tepat diatas kode ]]></b:skin> :

     

    #bottom {
    width: 990px;
    position: relative;
    clear:both;
    margin: 0 auto;
    color:#000;
    float: center;
    background:transparent;
    padding: 15px 0 15px 0; }

     

    #bottom h2 {
    padding-left: 5px;
    margin: 0 0 10px 0;
    background:#0B3B0B;
    color:#fff;
    font-size: 18px;
    letter-spacing: 1px;
    border-bottom: 1px solid #000; }

     

    #bottom ul{padding:0; margin:0; color:#333}

     

    #bottom ul li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi45imq768uyPyoSBaCJvg0bt6ugVZO1c6hmANq0bHMBkwjn9aKFBeskQjUY4cXnAnqmOnmYMykS4jzUL4iFjivykHh87xgICn0wkvh01rpiVzhbCf_OcuvZZkgD14-ldmbFM1bOUup7YQ9/s320/d3.gif') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

     

    #bottom li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi45imq768uyPyoSBaCJvg0bt6ugVZO1c6hmANq0bHMBkwjn9aKFBeskQjUY4cXnAnqmOnmYMykS4jzUL4iFjivykHh87xgICn0wkvh01rpiVzhbCf_OcuvZZkgD14-ldmbFM1bOUup7YQ9/s320/d3.gif') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

     
    #bottom ul li a:hover {
    background: #B1ACB1;}

     

    #left-bottom { /* kolom kiri */
    background:#ffffff; width: 300px;
    float: left;
    margin-left:10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    }

     

    #center-bottom { /* kolom tengah */
    background:#ffffff; width: 300px;
    float: left;
    margin-left:10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    }

     

    #right-bottom { /* kolom kanan */
    background:#ffffff; width: 300px;
    float: left;
    margin: 0 5px 0 10px;
    padding:5px; /* Jarak antara text dengan garis pinggir */
    Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
    Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
    Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
    Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
    Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px
    }

     

  5. Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut :

     

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>

     

  6. Copas kode berikut ini tepat sebelum kode diatas :

     

    <div id='bottom'>

    <b:section class='bottom' id='left-bottom'/>

    <b:section class='bottom' id='center-bottom'/>

    <b:section class='bottom' id='right-bottom'/>

    </div>

     

  7. Kemudian Simpan Template sobat.

Sekarang sobat bisa lihat hasilnya, jika tidak sesuai, silahkan sobat ganti sesuai keinginan sobat.

 

Keterangan :

  • #bottom { width: 990px

     

    --> lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.

     

  • background:#0B3B0B

     

    --> latar belakang (background kolom).

     

  • color:#fff

     

    --> warna tulisan judul

     

  • #left-bottom { /* kolom kiri */ width: 300px

     

    --> lebar kolom kiri.

     

  • -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;

     

    --> garis melengkung pada setiap ujung kolom, semakin besar angkanya maka akan semakin lebar garis lengkungnya. Jika sobat enggan membuat kolom melengkung, ganti saja angka 5px dan ganti dengan 0px. Atau hapus semua kode –moz-border-radius tersebut.

     

  • Border-top: 2px solid #1B2A0A
    Border-bottom: 2px solid #1B2A0A
    Border-left: 2px solid #1B2A0A
    Border-right: 2px solid #1B2A0A

     

    --> untuk ketebalan garis pinggir masing – masing kolom, semakin besar angkanya maka akan semakin tebal garisnya. Jika sobat tidak mau memakai garis pinggir, sobat ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom. Untuk kode warna bisa di lihat disini

     

  • Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan sobat. Pilih salah satu, dan copas pada kode yang berwarna merah.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmvcVP2IzjRomBItDPfvAYAN7aAlMHPDOAo5woKzn-DruNO-bakPyyuY0fmWkOnpqmRR0d3X7ARRSZcfAWq4MlkIKhXxJ7yJuJKR9OmCL3uFli3u3DBPcGF53rSAmy9lKws8e3099IDx07/s320/z3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCW4BeuSQYFvLAXplL6GARmKIlUaom2U5oa6sE7rKY2CKW-8tpy2Oy0J2vRBlLmKk-gfx4nN63rgBdXRpOR8cD4ATZPI94MNIG0yfJRyNaB2or4NnVwQDiP2xa_c4MOOIUehjXUqMmhme/s320/z2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuI5vMuIWQRsiZ4PFMczvtRCtmvQ6iN3cB3JcQuv0ko22s9rfNtqYppGU7BWedBemEhZ7pi0gv_A9V66QAjeSMEYbvgmwULZWM6-YQOKx9WwKeI76u3r_6wlWPBmYOz1JOeUfKBG90Qbdg/s320/z1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXG5yK8UdYpetBG7moYEzNvJer_1LYkC7sri5uTdXbp7ZEkXYpZMyQ-NxLevo-8LSLspASNvpPjHXDHO6l0TJhdATeF5bKOzatSer5hngWatkFFHWk4tnaBt0Ivi6rbgTKSO1WbBySVqZ/s320/d1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjJvKObhJPmr5_iY3RHYims3AI9WcivNw5kV0qE6FAQ53ypp-QXng6pDIfXQ4hLa57dsxQ6c0pOwkyMp0F3cuHk5vaTrwySBag-SU22tZj7QPPdLkXo9z8fvIqcGYeF1oP4xQ1kiIr7ptE/s320/d2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi45imq768uyPyoSBaCJvg0bt6ugVZO1c6hmANq0bHMBkwjn9aKFBeskQjUY4cXnAnqmOnmYMykS4jzUL4iFjivykHh87xgICn0wkvh01rpiVzhbCf_OcuvZZkgD14-ldmbFM1bOUup7YQ9/s320/d3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNJb_X7VXkZEG-jIVaDYXC_10eCqlm4uvIHfFiFpF1YA8lwm4TGwWYLsBbZ2tCbIetTPkxCNxoxGDMvnsddCP1i5zk-H3U_SzKnCtkOlqfSwrJv9rg2Guy-lROQ8ujRTgwDzcidOjsOZWK/s320/c1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNAo1aruug1XqF91AnfNcec-3-AfbYr3SNmdeaVJRQTfTxciYIenaorkFBt5JdUEuDK_nwARI8WBtZQNWr9bepszG8XuPr2g7u3tLTSdGMYk1f2aH9A4LntM5Soxb9NKcC_20IHFyw4XYx/s320/c2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLg-8bpuka7zA9AFUOTqVeGAWOeF6sTSjqbBBho04ynp1112XJnVgsNDXoGAWQp1kQEaEIP9NYRZbsSjVuFce7I0KNSwlJytHtce7UeCwwG_FrBcO6hwdA0GwrRJcI7_XdlMmPu1He4JJn/s320/c3.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCRyLMaQPTfIZbfaljPJCFHRcWVm4gamACWuYxoxjjr_-hBYLUCvx05zNf5QhfPwm4PQ9AcoeLBxRlwhtNZ4P-F9DLUQQ44xzeul_Vo7au3ETK_b6ZNZ7YWGrR4pfXMg_CxQR5bo4osXo8/s320/a1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-YTAXnApxRbMimX82Wj1L_5m0KgDV6PbtAMTSzew8rDd_GW6-4Qw2mZfZNhpzG1Ok6_vQ9eUiYRBIqYAh1-cvGnMM4mx2FPj8pQhyphenhyphenwR9sa_N6CZxIz9o9gHDHpxHdY0wwLWG0VjYUNth/s320/a2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikmiZ-jzXiGMpJskmT3chdXH2QwVr26nnmZI3WO0Co_tAtHBxtrknVQMF-N7xslZBEGyLeJuNcrifDx7eFx465Ej1lBScr1pe34nROG_pTflfSJzUMOrkTwlRCNEC8DIgXXIIwP_sVhqMo/s320/a3.gif

 

Untuk melihat hasilnya, silahkan sobat pasang recent posts atau recent comments pada kolom tersebut, maka akan terlihat bentuk icon pilihan sobat. Lihat contoh yang sudah jadi disini.

Selamat berkreasi !smile_wink

Pasang Avatar Mybloglog di Kotak Komentar

Avatar Tutorial cara memasang avatar mybloglog di kotak komentar sebenarnya sudah lama, tapi dari beberapa kali saya berkunjung ke beberapa blog sobat, jarang sekali yang mengaplikasikannya.

 

Padahal menurut saya, tutorial memasang avatar di kotak komentar yang di populerkan oleh Amanda ini sangat bagus, karena kita bs melihat wajah yang memberi komentar dengan syarat telah menjadi member mybloglog. Saran saya buat sobat yang sudah ikutan mybloglog, sebelum komentar di blog saya sebaiknya ganti dulu foto yang lama dengan foto terbaik milik sobat. Laughing

 

Langsung saja, seperti biasa loginlah terlebih dahulu ke blogger.

  1. Buat yang belum mendaftar, jangan lupa untuk daftar dulu di mybloglog.

     

  2. Kemudian pada halaman blogger, klik Tata Letak.

     

  3. Pilih Edit HTML.

     

  4. Klik Download Template Lengkap, untuk jaga – jaga !

     

  5. Lalu Centang Expand Widget Template.

     

  6. Kemudian letakkan kode berikut diatas kode </head>

     

    <script type='text/javascript'>
    //<![CDATA[
    /*
    Merlinox and Napolux MyBlogLog Avatar Creator
    created by Merlinox (blog.merlinox.com)
    helped by Napolux (www.napolux.com)
    version 0.1 (20061214)
    version 0.2 (20061215)
    compatible with all blogger blog
    */
    if(typeof(myLayer)!='function'){
    function myLayer (x){
    //individuo l'oggetto
    if(document.layers){ // browser="NN4";
    lay=document.layers[x];
    }
    if(document.all){ // browser="IE";
    lay=eval("document.all." + x);
    }
    if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
    lay=document.getElementById(x);
    }
    return lay;
    }
    }
    //lo prendo da blogger
    function myBlogAvatar(codiceCommento,autore,stile){
    //scrivo lo span
    //var myBlogSpan = "myBlog-" + codiceCommento;
    //document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");
    //metto tutto minuscolo perchè indexOf è case sensitive
    if (autore != ""){
    alt="MyBlogLog: " + autore;
    myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
    //myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
    //myLayer(myBlogSpan).innerHTML = myBlog;
    document.write(myBlog);
    }
    }
    //]]>
    </script>

     

  7. Setelah itu cari kode seperti dibawah ini :

     

    <b:loop values='data:post.comments' var='comment'>

     

  8. Kemudian letakkan kode berikut tepat setelah kode <b:loop values='data:post.comments' var='comment'> :

     

    <div style='border:0;float:left;margin: 0 5px 0 0;'>
    <script>
    myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
    </script>
    </div>

     

  9. Untuk kode yang berwarna ungu adalah jarak gambar dengan garis pinggir template, silahkan di otak-atik sendiri.

 

Untuk melihat hasilnya silahkan lihat komentar sobat blogger disini. Oke sob, selamat mencoba. Happy

Labels

15 tanda baca 2 columns 2003 2012 3 columns Access Add-ons Mozilla Adsense Affiliasi AL-MASTHURIYAH Alat Pembayaran Alertpay Alexa Alexa Toolbar Alexa Widget Animasi Jam Anti Virus anti virus 2011 Antivirus antivirus portable area login BSI Artikel Blog Artikel Terkait ArtikelKu Asal Mula Kehidupan di Bumi Menurut Pandangan Al-Qur’an Avatar AVG 2011 Software Pack + key AVG 2011 Software Pack + serial number Award Background Blog Backlink BAHAYA NARKOBA BASA SUNDA Bazar Al-Masthuriyah 2011 beautifull widget Berdakwah Lewat Tulisan BERFIKIR POSITIF Berita Beside Story Bina Sarana Informatika Bina Sarana Informatika (BSI) biografi iwan fals bisnis bisnis internet bisnis mudah Bisnis Online bisnis sampingan di internet bisnis tanpa modal Blog Contest Blog Counter Blog Direktori Blog Info Blog Statistik Blog Stuff Blog Submission Blog Tool Blog Tutorial Blog Widget Blogger Blogger Hack Blogger In Draft Blogspot Blora BOLT Border Browser browser HP Browser HP Populer BSI BSI Career BSI Sukabumi Cara Nonton dan Download YouTube Gratis di BB Tanpa Paket Streaming (Tanpa Aplikasi) Catatanku ClockLink.Com Comment Comment Box CONTO PIDATO BASA SUNDA Contoh Naskah Pidato Contoh Pidato CONTOH PIDATO BAHASA SUNDA CSS CSS Tutorial Custom Domain Customize Template Daftar Kata Sulit Geografi dapat uang secara mudah di internet Dasar-Dasar deepfreeze 2010 deepfreeze terbaru + key deepfreeze7 deepfreeze7 + key delphi 7 portable DEMOKRASI PANCASILA DERET BERKALA METODE LEAST SQUARE Design Web distributor buku bogor Distributor buku pelajaran Distributor buku pelajaran daerah bogor doa sholat jenazah Domain Domain Hosting download avg 2011 download bolt download browser HP download delphi 7 portable Download Film download makalah download makalah gratis download makalah lengkap download makalah STAI Download MP3 Udin Sedunie DOWNLOAD OFFICE 2007 PORTABLE DOWNLOAD SOFTWARE 2011 Download TA Download Tugas Akhir Download Tugas Akhir Manajemen Informatika Lengkap Earth Day Ebook Edit Foto Kamera HP Efek animasi Blog Email Service Emoticons Entrepeneur Blogs Facebook Facebook Ditutup 2012 fans iwan fals Favicon Fawwaz Grosir Sukabumi Feedjit.com fenomena fenomena alam hujan kabut 2011 Filsafat Pendidikan Islam Flag Counter Followers Font Tips Free Domain Free Hit Counter Free Online Tools Free Search Box Free Template Free Templates Free Tool Free Web Directory Fungsi dan Prinsip Manajemen Gambar Gambar Animasi Gambar Kota Cepu Game Online Giovanni Schiaparelli globalisasi globetrackr.com Glosarium Geografi Glosarium Kimia Google Google Plus Google Webmaster Google.com Google+ to RSS graviola Grosir Lengkap Sukabumi Grosir Mukena Sukabumi Grosir Pakaian Sukabumi Grosir Sukabumi gudang makalah Hasil otak-atik HIDRO KARBON Hit Counter Gratis HIV AIDS Hosting Gratis hujan kabut 11 maret 2011 hujan kabut 2011 Icon Info Informasi Internet Marketing Istilah Geografi istilah istilah dalam kimia Iwan Fals Konser Sukabumi 2011 Iwan Fals Sukabumi Jadwal Imsakiyah 1432 H jawa barat jadwal imsakiyah 1432 H Jadwal Imsakiyah 1432 H / 2011 M Wilayah Sukabumi JADWAL IMSAKIYAH DEPAG Jadwal Imsakiyah Sukabumi 2011 Jadwal Konser Iwan Fals 2011 Jadwal Puasa 1432 H / 2011 jasa pembuatan blog website Java Script kampanye damai pemilu indonesia 2009 Kaspersky Virus Removal Tool 2011 Kata-Kata Mutiara kewirausahaan dalam islam key avg 2011 KIMIA KLIPING KLIPING HARDWARE KOMPUTER KLIPING KOMPUTER KLIPING MERAKIT KOMPUTER Kode HTML Kode Warna HTML Kolom komputer Konsep Pendidikan Islam Konser Iwan Fals Sukabumi konser iwan fals sukabumi 2011 Konser Sukabumi Kontes Kontes SEO Kota Cepu Kota Minyak Cepu Kota Sukabumi Label Label Cloud LANDASAN PENDIDIKAN PANCASILA layout facebook Left Sidebar Lingkungan Link Link Exchange Lirik Udin Sedunia Loading Blog Login Mahasiswa BSI Logo BSI Logo Google MA’RIFAH DZUN AL-NUN AL-MISHRI Macam-Macam Penyakit Mahasiswa BSI Mahasiswa BSI Sukabumi Mahasiswa Sukabumi Makalah MAKALAH GLOBALISASI MAKALAH Haji dan Umrah MAKALAH SEKS BEBAS DI KALANGAN REMAJA MAKALAH SISTEM POLITIK DI BERBAGAI NEGARA MAKALAH TENIS MEJA MAKALAH WANITA SHOLIHAH DALAM PENDANGAN ISLAM makalah 15 tanda baca MAKALAH Asal Mula Kehidupan di Bumi Menurut Pandangan Al-Qur’an MAKALAH ASEAN MAKALAH BAHASA INDONESIA MAKALAH BAHASA INDONESIA TANDA BACA MAKALAH Benua dan Samudra MAKALAH Berdakwah Lewat Tulisan MAKALAH BERFIKIR POSITIF Makalah Budaya Politik MAKALAH DEMOKRASI PANCASILA MAKALAH EJAAN BAHASA INDONESIA PENULISAN KATA DAN UNSUR SERAPAN makalah Fungsi dan Prinsip Manajemen MAKALAH FUNGSI MANAJEMEN PENDIDIKAN Makalah Gratis MAKALAH HIV AIDS Makalah Hubungan Pancasila dan UUD 1945 MAKALAH ILMU KALAM PEMBAGIAN TASAWUF (FALSAFI DAN AKHLAKI) Makalah Ilmu Tauhid Makalah Insan Kamil MAKALAH IPS makalah kewirausahaan MAKALAH KIMIA HIDRO KARBON MAKALAH KOMPUTER makalah Konsep Pendidikan Islam MAKALAH LANDASAN PENDIDIKAN PANCASILA MAKALAH MA’RIFAH DZUN AL-NUN AL-MISHRI makalah manajemen MAKALAH METODE BERKALA makalah Metodologi Pendidikan Agama Islam MAKALAH OLAHRAGA makalah Pendidikan Islam di Indonesia MAKALAH PENGARUH PERAN ORANG TUA TERHADAP PRESTASI ANAK makalah perawatan jenazah MAKALAH Perkembangan Pendidikan Pesantren dan Madrasah Makalah PKn makalah Sejarah Pendidikan Islam MAKALAH SEPAK BOLA MAKALAH Sholat Jenazah dan Hal-Hal yang Terkait dengan Jenazah MAKALAH TANDA BACA Makalah Tanda Baca lengkap MAKALAH TANGGUNG JAWAB AYAH SEBAGAI PENDIDIKAN DALAM KELUARGA MENURUT ILMU PENDIDIKAN ISLAM makalah wira usaha Make Money manfaat blog dan website Manfaat sirsak Marquee masuk ke area login mahasiswa BSI Maulid Nabi Muhammad SAW Memperjelas Foto dari Kamera HP mengkafani jenazah mengubah pdf ke word mengubah smadav 8.5 menjadi pro mengubah smadav 8.6 free menjadi pro mengubah smadav 8.6 menjadi pro mengubah smadav 8.7 free menjadi pro mengubah smadav 8.7 menjadi pro mengubah smadav 8.8 free menjadi pro mengubah smadav 8.8 menjadi pro mengubah smadav 8.9 free menjadi pro mengubah smadav 8.9 menjadi pro mengubah smadav 9.0 free menjadi pro mengubah smadav 9.0 menjadi pro Menu Menu Dropdown Menu Horizontal Menu Scroll Menu-Menu MERAKIT KOMPUTER merubah smadav free menjadi pro Meta Tag Meta Text Modifikasi blog Nackvision.com NARKOBA Naskah Pidato Naskah Pidato Maulid Nabi Navbar Navigasi Halaman nero 10 + keygen nero 10 full nero 2010 nero terbaru Nod32 Norton antivirus Novel NURUL HUDA obat kanker obat kanker tapa efek samping OFFICE 2007 PORTABLE oi dalbo oi dalbo cibatu OI Sukabumi Pagerank Paid Backlink Paid To Click Paid To Share Paid To Take Picture pasang iklan murah PAUD Pay Per Click Paypal pemandian jenazah pemberitahuan aja kok Pendidikan Islam dalam Keluarga PENDIDIKAN ISLAM DALAM KELUARGA MAKALAH Pengamanan pengertian globalisasi penghasilan dari blog penghasilan dari internet penghasilan dari web Penipuan Peringatan Maulid Nabi Muhammad SAW Pernak-Pernik Photo/Image photoshop PIDATO SUNDA Porseni Al-masthuriyah 2011 PORSENI tahunan Al-Masthuriyah Post Tips PPC Program Promosi Blog rahasia buah sirsak rahasia graviola Read More Recent Comment Recent Post Recent Posts Related Posts Right Sidebar Road Show Aburizal Bakrie Aburizal Bakrie Sambangi Sukabumi RSS FEED Ruang Mahasiswa BSI Salam Pembuka Search Engine Searchsignht.com Sejarah BSI Sejarah Kota Cepu Sekilas Kota Cepu Sekolah seks seks bebas Semarak PORSENI menuju 1 Abad Al-Masthuriyah 2011 SEO SEO Blogspot Seo Tips SEPAK BOLA serial number avg 2011 Sertifikat gratis sirsak Site Meter Sitemap Smadav 8.5 pro smadav 8.6 pro smadav 8.7 pro smadav 8.8 pro smadav 8.9 pro smadav 9.0 pro smadav 9.1 pro SMANSA CEPU SMK PADJADJARAN SMK TEKNIKA SMK YASTI SMKN 3 Sukabumi Social Bookmark Software STAI Al-Masthuriyah Status YM STISIP SUKABUMI STKIP PGRI students.bsi.ac.id Sub Domain Sukabumi Sukabumi Facebook SUNANULHUDA TA Manajemen Informatika TA Visual Basic 6.0 tAMAN SERIBU LAMPU CEPU TANDA BACA tanda baca lengkap telfon gratis Template Text Animasi Tiny Counter Tips BB Tips Blogging Tips dan Triks tips n trik Tips n Trik Blackberry toko buku bogor toko buku online bogor Tools Blogging Top Of Blog Top Posts Tour Pesantren Iwan Fals 2011 Trik-Tips Tugas Akhir Manajemen Informatika + Program Tugas IMK Tugas IPS Geografi Tutorial Tutorial Blog Tutorial Blogger Tutorial blogspot Tutorial Photoshop Twitter Uang dari ngeblog Udin Sedunia Udin Sedunie ulang tahun Al-Masthuriyah ke-91 Ulang Tahun AMIK BSI Sukabumi ultah bsi ultah bsi 2011 ultah bsi ke-23 ultah bsi sukabumi UserOnline.com Video Iwan Fals Sukabumi 2011 Video Konser Iwan Fals Sukabumi 2011 Video Udin Sedunia Virus Virus KO Vista WANITA SHOLEH WANITA SHOLEH MENURUT ISLAM Website BSI Widget Widget - Gadget Blog Widgets Windows 7 Transformation Pack Paling Lengkap Untuk XP Wordpress Yahoo Yahoo Messenger Yahoo Search Box Yahoo Search Engine YASMA YASPIN. STISIP SUKABUMI Youtube

Blog Archive

Popular Posts