Sabtu, 28 Juli 2012

Cara Pasang Rating Bintang di Blog



Sebenarnya Blogger sudah mempersiapkan Rating untuk Blogspot, tapi terlihat kurang menarik dan banyak sobat blogger yang malas untuk pasangnya.Rating Bintang ini akan terlihat dalam Postingan kita, jadi berbeda dengan Membuat Rich Snippets Untuk Blogspot. Dimana Rich Snippets Ratingnya akan terlihat di mesin pencari khususnya google.

Bagi sobat blogger yang ingin pasang rating milik blogspot sendiri caranya seperti ini :
Pertama
Silahkan menuju Dasboard, lalu klik Rancangan

Kedua
Silahkan sekarang sobat klik edit pada Posting Blog :



Maka setelah terbuka Sekarang centang Reaksi dan sobat bisa ubah sendiri Format ratingnya dengan klik edit.



Ketiga :

Klik Simpan

Berhubung Kita akan Pasang Rating Bintang supaya tampil Lebih Keren silahkan ikuti cara berikut ini :

Pertama
dashboard--> layout- -> Edit HTML

Kedua
"Expand Widget Templates"
Jangan Lupa Download Template lengkap untuk menjaga kesalahan

Ketiga
Cari kode <data:post.body/>
Letakan Kode Berikut ini dibawah <data:post.body/> yang kedua jika Blog sobat menggunkan Readmore
Berukut kodenya :
<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title"></div>

Keempat
Cari kode </body>
Letakkan Script Berikut di atas </body>
<script src="http://js-kit.com/ratings.js"></script>

Contoh hasil seperti gambar dibawah ini

Minggu, 22 Juli 2012

cara membuat widget blog sharing ke social network keren

       hai sobat, bagaimana kabar kalian hari ini?? semoga baik-baik saja , kali ini saya akan membagikan tips-tips kepada teman-teman semua yang berkaitan dengan aktifitas blog.
sudah tak dipungkiri lagi bahwa social bookmarking adalah salah satu hal penting dalam meningkatkan trafic blog secara cepatbegitu pula dengan RSS feed, maka daripada itu pada hari ini kita akan belajar bagimana cara mmengoptimalkan hal tersebut dengan cara membuat  widget sharing yang indah dan menarik bagi para pengunjung blog,
agar menyukai halaman facebook anda, mengikutik akun twitter anda , menambahkan anda di google+ , atau menjadi pembaca tetap dengan RSS feed , keunggulan dari widget ini ketika dia terkena oleh kursor mouse ,  maka widget ini akan bergerak dan berubah warna


berikut script yang akan kita gunakan



<style>
/*--------Touch Me Sharing Widget ------*/.touchme a {display:block;height:50px;width:50px;padding:0 4px;float:left;background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;-webkit-transition: ease-in 0.2s all;-moz-transition: ease-in 0.2s all;-o-transition: ease-in 0.2s all;-ms-transition: ease-in 0.2s all;transition: ease-in 0.2s all;cursor:pointer;}.touchme a.googleplus {background-position: 0px -58px;}.touchme a.googleplus:hover {background-position: 0px 0px;}.touchme a.twitter {background-position: 0px -290px;}.touchme a.twitter:hover {background-position: 0px -232px;}.touchme a.facebook {background-position: 0px -406px;}.touchme a.facebook:hover {background-position: 0px -348px;}.touchme a.rss {background-position: 0px -174px;}.touchme a.rss:hover {background-position: 0px -116px;}</style><div class='touchme'><!--RSS--><a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a><!--Google Plus--><a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a><!--Facebook--><a class='facebook' href="YOUR FACEBOOK PAGE" rel='external nofollow' target='_blank'></a><!-- Twitter --><a class='twitter' href="YOUR TWITTER PAGE" rel='external nofollow' target='_blank' ></a></div>




catatan :

ganti YOUR RSS LINK dengan link RSS feed anda

ganti YOUR GOOGLE PROFILE LINK dengan link profil g+ anda

ganti YOUR FACEBOOK PAGE dengan link profil atau halaman anda

ganti YOUR TWITTER PAGE dengan link akun twitter anda

Kamis, 19 Juli 2012

Cara Mudah Membuat Teks Mengikuti Kursor


Cara membuat teks mengikuti kursor ini biasanya digunkan untuk mempercantik tampilan blog kita, tentunya dalam upaya mempercantik blog, kita tidak boleh meninggalkan aspek SEO blog. Mungkin sudah banyak artikel-artikel yang membahas tentang tutorial ini.

Sebenarnya banyak cara untuk mempercantik blog atau megoptimalkan tampilan blog. Salah satu cara mengoptimalkan tampilan blog adalah Menambah widget 2 kolom kiri dan kanan (sejajar) dibawah header dan Menambah Recent Post Slide Show. Sedangkan untuk mengoptimalkan blog dengan SEO adalah Menambahkan Navigasi Breadcrumbs

Jika anda tertarik untuk mempercantik blog anda dengan menambahkan element Teks mengikuti kursor ini, Silahkan ikuti langkah-langkah berikut ini:

  1. Copy kode HTML berikut ini:

    <style type='text/css'>
    #outerCircleText {
    font-style: italic;
    font-weight: bold;
    font-family: &#39;comic sans ms&#39;, verdana, arial;
    color: #ff840a;

    position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
    #outerCircleText div {position: relative;}
    #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

    </style>
    <script type='text/javascript'>
    //<![CDATA[

    ;(function(){

    // Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING)
    var msg = "GANTI DENGAN KALIMAT SOBAT";


    // Set font's style size for calculating dimensions
    // Set to number of desired pixels font size (decimal and negative numbers not allowed)
    var size = 25;

    // Set both to 1 for plain circle, set one of them to 2 for oval
    // Other numbers & decimals can have interesting effects, keep these low (0 to 3)
    var circleY = 0.75; var circleX = 2;

    // The larger this divisor, the smaller the spaces between letters
    // (decimals allowed, not negative numbers)
    var letter_spacing = 5;

    // The larger this multiplier, the bigger the circle/oval
    // (decimals allowed, not negative numbers, some rounding is applied)
    var diameter = 10;

    // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
    var rotation = 0.2;

    // This is not the rotation speed, its the reaction speed, keep low!
    // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
    var speed = 0.3;

    // BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //

    if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

    msg = msg.split('');
    var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
    ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
    o = document.createElement('div'), oi = document.createElement('div'),
    b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :

    document.body,

    mouse = function(e){
    e = e || window.event;
    ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
    xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
    },

    makecircle = function(){ // rotation/positioning
    if(init.nopy){
    o.style.top = (b || document.body).scrollTop + 'px';
    o.style.left = (b || document.body).scrollLeft + 'px';
    };
    currStep -= rotation;
    for (var d, i = n; i > -1; --i){ // makes the circle
    d = document.getElementById('iemsg' + i).style;
    d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +

    'px';
    d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
    };
    },

    drag = function(){ // makes the resistance
    y[0] = Y[0] += (ymouse - Y[0]) * speed;
    x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
    for (var i = n; i > 0; --i){
    y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
    x[i] = X[i] += (x[i-1] - X[i]) * speed;
    };
    makecircle();
    },

    init = function(){ // appends message divs, & sets initial values for positioning arrays
    if(!isNaN(window.pageYOffset)){
    ymouse += window.pageYOffset;
    xmouse += window.pageXOffset;
    } else init.nopy = true;
    for (var d, i = n; i > -1; --i){
    d = document.createElement('div'); d.id = 'iemsg' + i;
    d.style.height = d.style.width = a + 'px';
    d.appendChild(document.createTextNode(msg[i]));
    oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
    };
    o.appendChild(oi); document.body.appendChild(o);
    setInterval(drag, 25);
    },

    ascroll = function(){
    ymouse += window.pageYOffset;
    xmouse += window.pageXOffset;
    window.removeEventListener('scroll', ascroll, false);
    };

    o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

    if (window.addEventListener){
    window.addEventListener('load', init, false);
    document.addEventListener('mouseover', mouse, false);
    document.addEventListener('mousemove', mouse, false);
    if (/Apple/.test(navigator.vendor))
    window.addEventListener('scroll', ascroll, false);
    }
    else if (window.attachEvent){
    window.attachEvent('onload', init);
    document.attachEvent('onmousemove', mouse);
    };

    })();
    //]]>
    </script>

  2. Ganti tulisan yang berwarna merah dengan kata-kata sobat sendiri.
  3. Masuk ke Blog sobat.
  4. Kemudian Masuk ke Rancangan >> Tambah Gadget >> Pilih tambah HTML/JavaScript >> Pastekan kode HTML yang sobat Copy tadi ke dalamnya
\

cara membuat Menu Drop Down Menggunakan CSS


Pada kesempatan kali ini saya akan membuat tutorial mengenai Cara Membuat Menu Drop Down Menggunakan CSS paling mudah dipahami dan diterapkan. Sebenarnya Java Script untuk membuat Cara Membuat Menu Drop Down Menggunakan CSS ini bukan bikinan saya, tapi ada sebagian hasil dari editan saya.

  1. Masuk ke blog agan
  2. kemudian pilih "Template" 
  3. Setelah anda klik "Template" kemudian klik lagi pada "edit HTML" 
  4. Setelah itu Centang "Expand Template Widget" 
  5. Cari kode seperti ini ]]></b:skin>
  6. Setelah ketemu, silahkan letakan kode dibawah ini tepat di atas kode ]]></b:skin>
    /*Bungas Drop Down Menu */
    #bungasdropdownmenu {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmyIo-Y1I59zw-HfRAXNSbcZNJNblqhvbHYQbtlleP4Lf2PGIDI4CWWHpyy2PaboA2wrD__3LTVwy4AggIRCiuqM6AiGFxZ9Aicf6ZHck-mfVSCSxDugIuyvYZtS6NM2KetcbtOFfzC40/s1600/dark-zigzag.png) repeat-x left top;
    width:1020px;
    height:42px;
    -moz-border-radius-topleft:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomright:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    margin:0 auto
    }
    #dropdownmenu {
    margin: 0;
    padding: 0;
    }
    #dropdownmenu ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #dropdownmenu li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
    height:35px;
    }
    #dropdownmenu li a, #dropdownmenu li a:link, #dropdownmenu li a:visited {
    color: #FFF;
    display: block;
    font:16px "Ropa Sans",arial; margin: 0;
    padding: 12px 12px 10px 12px;
    text-decoration: none;


    }
    #dropdownmenu li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;


    }
    #dropdownmenu li {
    float: left;
    padding: 0;
    }
    #dropdownmenu li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 200px;
    margin: 0;
    padding: 0;
    }
    #dropdownmenu li ul a {
    width: 200px;
    }
    #dropdownmenu li ul ul {
    margin: -25px 0 0 161px;
    }
    #dropdownmenu li:hover ul ul, #dropdownmenu li:hover ul ul ul, #dropdownmenu li.sfhover ul ul, #dropdownmenu li.sfhover ul ul ul {
    left: -999em;
    }
    #dropdownmenu li:hover ul, #dropdownmenu li li:hover ul, #dropdownmenu li li li:hover ul, #dropdownmenu li.sfhover ul, #dropdownmenu li li.sfhover ul, #dropdownmenu li li li.sfhover ul {
    left: auto;
    }
    #dropdownmenu li:hover, #dropdownmenu li.sfhover {
    position: static;
    }
    #dropdownmenu li li a, #dropdownmenu li li a:link, #dropdownmenu li li a:visited {
    background: #BF0100;
    width: 200px;
    color: #FFF;
    display: block;
    font:16px "Ropa Sans",arial;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;


    }
    #dropdownmenu li li a:hover, #dropdownmenu li li a:active {
    background: #060505;
    color: #FFF;
    display: block; margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    }
  7. Jika proses nomer 6 sudah selesai, kemudian cari kode seperti ini <div id='outer-wrapper'>
  8. Letakan kode dibawah ini tepat di atas kode <div id='outer-wrapper'>
    <div id='bungasdropdownmenu'>
    <ul id='dropdownmenu'>
    <li>
    <a href='LINK'>Judul</a>
    <ul>
    <li><a href='LINK'>Judul</a></li>
    <li><a href='LINK'>Judul</a></li>
    </ul>
    </li>
    <li>
    <a href='LINK'>Judul</a>
    <ul>
    <li><a href='LINK'>Judul</a></li>
    <li><a href='LINK'>Judul</a></li>
    <li><a href='LINK'>Judul</a></li>
    </ul>
    </li>
    <li>
    <a href='LINK'>Judul</a>
    </li>
    <li>
    <a href='LINK'>Judul</a>
    <ul>
    <li><a href='LINK'>Judul</a></li>
    <li><a href='LINK'>Judul</a></li>
    <li><a href='LINK'>Judul</a></li>
    <li><a href='LINK'>Judul</a></li>
    </ul>
    </li> </ul>
    </div>
  9. Jika anda ingin meletakan Menu Drop Down di atas Header maka letakan kode di atas tepat di atas kode <div id='header-wrapper'>
  10. Ganti semua kode yang berwarna merah sesuai dengan keinginan anda dan juga ubah kode yang berwarna biru sesuai dengan lebar template sobat. Jika anda ingin merubah Backgorund Menu maka silahkan ganti kode yang berwarna hijau dengan gambar milik anda.
  11. selesai

Cara membuat Recent Post Slide Show

Recent post atau sering disebut dengan postingan artikel terbaru. Recent Post sangat penting bagi blog kita, dengan recent post maka pengunjung blog dapat mengetahui artikel-artikel terbaru di blog kita.


Recent Post bisa ditampilkan dengan banyak ragam, salah satunya dengan Recent Post Slide Show. Recent Post Slide Show ini menggunakan tampilan thumbnail atau gambar, sehingga pengunjung blog kita bisa tertarik dengan artikel terbaru di blog kita.

Saya sertakan gambar Recent Post Slide Show.
Lihat contoh gambar Recent Post tampilan Slide Show dibawah ini:

Cara membuat recent post slide show

Cara untuk membuat Recent Post Slide Show ini sangat mudah.
Tutorial untuk membuat Recent Post Slide Show dapat anda lihat dibawah ini:

  1. Login ke akun Blogger anda
  2. Klik Rancangan kemudian klik Elemen halaman
  3. Klik Tambah Gadget
  4. Pilih tamabah HTML/Javascript
  5. Terakhir masukan kode dibawah ini dan simpan. Lihat hasilnya
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:245px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:280px;
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://harinfo-blog.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Tambahan:

  • Ganti tulisan yang berwarna merah sesuai selera anda, kode merah itu merupakan lebar dan tinggi kolom.
  • Ganti tulisan yang berwarna biru dengan Url Blog anda.
  • Untuk tulisan yang berwarna hijau adalah jumlah artikel yang muncul dalam Slide Show, anda bisa mengantinya dengan keinginan anda.

Senin, 16 Juli 2012

Scroll dengan background Gambar


Walaupun bukan master, tapi ada aja yang nanyain tutorial blog ma saya.. hehehehe, tapi gak apa2 lah anggap aja berbagi..
Mau bikin scroll dengan background seperti  di bawah ini…

Contoh...
Contoh..
Contoh..
Contoh..
Contoh..
Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..Contoh..

Bagaimana? Naksirkan ! kalo sobat naksir and cinta ama yang di atas itu. Langsung aja kita terjun ke bawah...

copy paste koda di bawah ini di tempat kamu ini membuat scroll yang memiliki background

 <div style="background: url(URL_PIC_SOBAT); border: 1px solid rgb(153, 153, 153); height: 340px; overflow: auto; text-align: left; width: 270px;">TULISAN SOBAT DI SINI</div>


Keterangan:
Url background bisa sobat ganti dengan Url gambar yang diinginkan.

Height:340px itu adalah tinggi kotak.
Width:270px itu adalah lebar kotak.

Modifikasi Kotak Feed Burner/Email Subscribtion


Kadang kita merasa bosan dan ingin merubah kotak email subscribtion atau berlangganan artikel via email yang diberikan oleh feedburner. Bagi Sobat yang pusing karena tidak tau bagaimana cara untuk memodifikasinya, mari bergabung bersama saya untuk memodifikasinya bersama. Sebenarnya, untuk memodifikasinya sangat mudah. Hanya diperlukan kode-kode. Antara lain kode yang dibutuhkan adalah, kode untuk background, kode untuk tulisan, link dan lain-lain. Bagi yang sudah tidak sabar, mari kita langsung menuju ke tutorialnya saja,


Ini adalah tampilan kotak feedburner/email subscribtion/berlangganan artikel versi default.


Enter your email address:


Delivered by FeedBurner

Kode'y :

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qRnkW', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="blogspot/qRnkW" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Note : 

1. Warna ungu (yang pertama) adalah alamat FEED Sobat.
2. Warna ungu (yang kedua) adalah nama uri/ID Sobat  
3. Warna merah (yang pertama) adalah kata pembuka  
4. Warna merah (yang kedua) adalah tulisan pada tombol  
5. Yang bergaris bawah adalah kata " Delivered by FeedBurner"


    Modifikasi versi biasa

    Berlangganan artikel secara gratis.Masukkan alamat email Anda, kemudian verifikasi pada kotak masuk email



    kodenya :

    <div style="border:1px solid #ccc;padding:3px;text-align:center;background:url(http://authentikartists.com/wp-content/uploads/2009/10/feedburner.png) no-repeat top right;padding:25px 0px">
    <p>Berlangganan artikel secara gratis.Masukkan alamat email Anda, kemudian verifikasi pada kotak masuk email</p><p><form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qRnkW', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input name="email" onblur="if (this.value == '') {this.value = 'masukkan email';}" onfocus="if (this.value == 'masukkan email') {this.value = '';}" style="background: white; width: 300 px;" value="masukkan email" />
    <p><input type="submit" value="Berlangganan"/></p></form></p></div>

    Note :

    •  Kode warna hijau adalah Url gambar. Sobat bisa ganti dengan Url gambar Sobat (Lihat Stok gambar saya di sini dan di sinicara melihat url gambar ---> klik kanan pada gambar >> Copy image location/Copy image Url
    • Kode warna merah (yang pertama) adalah kata-kata pembuka, Sobat bisa menggantinya dengan kata-kataSobat sendiri.
    • Kode warna merah (yang kedua) adalah tulisan pada tombol. Sobat bisa menggantinya
    • 300 adalah lebar kotak untuk menuliskan Email.

    Modifikasi versi kedua




     Subscribe in a reader
    Atau Berlangganan gratis Via Email Di bawah ini


    Kodenya : 

    <form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:5px;text-align:left;background:#fff;color: #000000" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qRnkW'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">


    <div style="background:url(http://i622.photobucket.com/albums/tt309/kokobota/rss1.jpg)no-repeat top right;padding:10px 0px">


    <p><a href="http://feeds.feedburner.com/blogspot/qRnkW" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="vertical-align:middle;border:0"/></a>&nbsp;<a href="http://feeds.feedburner.com/blogspot/qRnkW" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></p>
    <p>Atau Berlangganan gratis Via Email Di bawah ini</p>
    <p><input name="email" onblur="if (this.value == '') {this.value = 'masukkan email';}" onfocus="if (this.value == 'masukkan email') {this.value = '';}" style="background: white; width: panjang input px;" value="masukkan email" /><input value="Langganan" type="submit" /></p><p><p><a href="http://feeds.feedburner.com/blogspot/qRnkW"><img src="http://feeds.feedburner.com/~fc/blogspot/qRnkW?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
    </p></div></form>

    Note :

    • Warna ungu (yang pertama) adalah alamat FEED Sobat. 
    • Warna ungu (yang kedua) adalah kode Chicklet Chooser
    • Kode warna hijau (yang pertama) adalah Url gambar. Sobat bisa ganti dengan Url gambar Sobat  cara melihat url gambar ---> klik kanan pada gambar >> Copy image location/Copy image Url
    • Kode warna hijau (yang kedua) adalah kode feed Count
    • Kode merah adalah kata-kata, ubah sesuai selera.
    • Yang bergaris bawah bisa Sobat ganti, antara lain
    • white = warna bacground kotak untuk menuliskan email
    • panjang input = panjang kotak untuk menuliskan email
    • langganan = tulisan pada tombol

    Related Posts Plugin for WordPress, Blogger...