infoinaja.net: Widget

Home / Widget

Showing posts with label Widget. Show all posts

Tuesday, July 16, 2013

Cara membuat Banner Iklan 125x125 di Blog

Cara membuat Banner Iklan 125x125 di Blog-2 hari yang lalu ada orang bertanya kepada saya dia adalah M Raffi

yang ini juga keren gan menunya, kalau cara buat kotak iklan di sidebar gemana ya gan?

Terus saya menjawab:

di tunggu aja tutorial berikutnya, thank's sob kunjunganya :)

dan malem ini saya akan menempati janji saya yaitu cara buat kotak iklan di sidebar atau yang sering kita dengar Cara membuat Banner Iklan 125x125 di Blog, dari pada sobat pada bingung di bawah ini adalah screenshotnya:

Berikut Cara membuat Banner Iklan 125x125 di Blog:

1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

Lalu copy kode di bawah ini tepat di atas kode tadi

/* Kotak Iklan----------------------------------------------- */
.kotak_iklan {text-align: center;margin-top:10px;margin-bottom:8px;background:#ddd;padding-top:11px}
.kotak_iklan img {margin: 0px 0px 4px 6px;padding: 5px;text-align: center;border: 1px solid #cecece;background:white}
.kotak_iklan img:hover {border: 1px solid #999}
.kotak_iklan300 {text-align: center;margin-top:0px;}

7. Sekarang kita menuju ke layout

8. Klik Tambahkan Gadget dan pilih 'HTML/Javascript

9. Letakan script html di bawah ini di kolom yang disediakan

Klik Simpan!

catatan:

Ganti tulisan link-anda dengan link tujuan yang anda inginkan

Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJmnJeWgLK63tl_xqJC3bVc9ZcWwZoot6KjiO-vOvjOZQNyPi78afsqez8gsNWWA0rzNn7p1o4aWdcsCCRvmKTTIwPlfSkDJeSkkI0Xlt_KP4HovNjqBk1xNRtQMBSZN1wv0zcsyjaURd/s1600/iklan.png dengan gambar banner iklan yang anda inginkan

oke mungkin cukup sekian, Semoga Bermanfaat..!

Pada 9:44 PM 54 Komentar

Thursday, June 27, 2013

Metro UI Style Social Media Widget untuk Blogger

Hari ini, saya akan membagikan info seputaran widget blog. Widget kali ini berhubungan dengan masalah sosial media. Widget kali ini diberi nama "Metro UI Style Social Media Widget untuk Blogger". Widget ini terinpirasi dari Windows 8 dimana tampilannya berupa kotak-kotak. di bawah ini adalah screenshotnya:

Oke langsung aja nih caranya:
1. login ke akun blog sobat

2. Klik Tambahkan Gadget dan klik 'HTML/Javascript

3.Masukan kode di bawah tepat di dalam kolom HTML/Javascript

<style>
.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj6ytC57hLPEu_HOE9B80v4A-H61OgaHVxzH8E8njDUkPHC4P87BkGhp5-WdZQBEoKRCKf8tbhfNVssbW0cTHMFvbDVchvMuikPj3dqwy6jju1Z23gD8_YVZYKYmWWuFVtjrDuTtgqYoU/s1600/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrS8vyhZZBXqbWudwZFc-6Oy3Z8yyV0Md7817IoJozHY-pA60mSwH22xNkclPgnO5QCpBry6NhNTxcxpyOcSUz50fn6igHgGvmkNtADroAecFpBHbkS34iT26IDRSL23FgsFw7mm-4QqA/s1600/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCoFFZ_tNfr2NpBQ0IWL7mUNN7mbm8unD0Up2T66MRc77HnKTCxECPAY-fwciSbl7SGEfQCVClPT30Maf_ves3jCPRqTPPtmMR2GYCt0VrHNUP0eGJZbgNb5K6l6PAWb4ZAP95kyQb7A/s1600/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUR4XiiezatpSVASF8sYDRd_fJ5nRNfoHxzVDpWEqiz_iH-XCebqfsA6bpjfnurj1Sb3Vl1FOgViHjOpudYhHr_CBe7ukfUhRUQEOMhyphenhyphenP5hHDok7yMubYxajcK5AxDRMW3hJg9XtTdHXA/s1600/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVq2v57Byg2WiIyg3pyWD6uWwwwLdZZhHlhAE8rRYtSO_QK_4WTeluYPzSA7Y9uMVVDriTzmOAWBNxXu4kRuHnla_wM_9HICwClUiBkxW4DuWqxUnjmbCGjJHNri-_N0-bdE-19nOu-2A/s1600/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioQiMLkycV9RXjZLCMrvNlN6x-lWQO8b-l6KlGW_iht-8R1ocflLgyXBbQrQgfuzQcKXMNE2mT_Mp1cpfbp8F7lmsFogJT_Iis9Swpoy486FXGwEKF6HmX2UuibgNAF_jdyv27QMCBohA/s1600/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjacqV0-Smhi5EB55CG1GJ-eQhXzkC6LCeNac_tCeoCVUGfELF_BgEuejgLFSNVIV9hl3y5jOreYdaNbHBTWneclbtweqpN3BuZzauVpIwZUa4VewkdE9MX6QzRdyycWBEpgINAAyzH8EY/s1600/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0IcQ_Qbjyr75Vy_rHht_DUdKY8J3Qj4D_yOfOL8u9aTzX0MbRQKR9xCkon7uecY4xsqcyghX4eo0cN1a3L0cwjzkJV8lXhyphenhyphensG_Ayqwfug_FEbf5yMY3zrUWYtPWpL9rSJb1OWD-i_dog/s1600/bt-facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0hPytx1jkPzzj70-KdZAV6_OW2GRY430p8mnkXyQTsjoNssbp4kl9sZF662LYWZAWBRPe3xykQ7mX6pjP57By0_TwoKpk7uRUzGWyBz2obDVotJHCD4yu6bFxJIgRkUmapm4lqYFT6E/s1600/bt-twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPc8xi20kmkTXb9GnWbj8QdD-OW7LxAgEpgZ4FVi7f0puOtpn8p5B-VJImZ0PwdLWrX56dAEJLhGwygAiWE-qcBmeRNmlmFMw5f7bx3KZ9Z9FRdz0AeWd_KgyPJbfRVFgOlyeTzGOkhSs/s1600/bt-google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5cdzViaQ9IwfXatlfhUSvPYFslXmVJXjxqsih6iBnNGpLvb7p4DnsFcWWd7wobKUTGjtd5pTHH6PxCZXMdBFugMQzsEzKrT40zM4XN3M4-85U7RfcxMxevGgaFcJh9MaEDclHRdrZAKg/s1600/bt-pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZTmhMOtM1UOTSiz4dqcYNyvCESjI_ZCymVtar1qekTeQV-5aAjKprB2-4GlT0ESP_0Urks17iOBnoSMe-tcFOh4MtTV4qYTb7b240O-PsxsZwJOcyPQG-LQ3xnHdMRES-ioNi-KjXC_o/s1600/bt-linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSew1rv7d6OLWpbvhLmesCaRVvW7RK7HDSONOodhroH4cj2gFd9e9oYRHJlEhs4GI6nPZoxw2RkEP60jVa3Y0AKa5XZ_K0MTEvv7eN3C-5j3RrV_s4km2hGGSwQAJNHZ39pC6Xp_hXXZ4/s1600/bt-youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXGIeMjuK1g8Gwk3fUSwq_ALfqjppZt8YMpdsNmlGxjy4YE6Y-lWQQXJrhvoQwIfnzxgJ_E94DGsdsrVZ_Lp2CYyvytKXWLWSiH-nPd2By4yG9X1ydJTu-o4dvn3VH5DThthuMUEICzQ/s1600/bt-feed.png) no-repeat center center #e9a01c}
</style>

<div class="metro-social">
<br />
<li><a class="facebookbt" href="http://www.facebook.com/henry.dwiseptian1"></a></li>
<li><a class="twitterbt" href="https://twitter.com/heennryy"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/u/0/114710454551954318308"></a></li>
<li><a class="pinterestbt" href="http://pinterest.com/Henryds1"></a></li>
<li><a class="linkedinbt" href="https://www.linkedin.com/username"></a></li>
<li><a class="youtubebt" href="http://www.youtube.com/username"></a></li>
<li><a class="rssbt" href="http://feeds.feedburner.com/henry"></a></li>
</div>

Perhatian :
Ganti henry.dwiseptian1 dengan nama pengguna Facebook Anda

Ganti heennryy dengan Twitter Nama

Ganti 114710454551954318308 Dengan Google ditambah profil ID

Ganti Henryds1 dengan ID Pinterest Anda

Ganti username dengan LinkedIn ID

Ganti username dengan ID Youtube Anda

Ganti henry dengan Feedburner ID

4.Klik Save dan lihat hasilnya, Semoga Bermanfaat...

Pada 5:09 PM 6 Komentar

Thursday, June 13, 2013

Cara Memasang Widget Top Komentator Di Blog

Blog Widget

Membuat Widget Top Komentator di Blogger - Widget top komentator berguna untuk menampilkan para komentator di blog kita dari mulai yang terbanyak komentarnya. Dengan menampilkan link komentator, maka mereka akan lebih giat lagi untuk memberikan komentar di blog kita.

Seperti gambar diatas, adalah gambar widget di blog ini. Tampilannya saya poloskan agar tidak membuat berat blog. Ketika ada pengunjung dengan komentar terbanyak, langsung akan masuk ke list tanpa harus diedit lagi. Atau bisa dibilang otomatis.

Langsung saja saya berikan tutorial yang kode HTMLnya saya ketahui dari Luhurfatah10 Blogz tentang

Bagi sahabat yang ingin menampilkan Widget Top Komentator, silahkan simak langkah mudahnya :

1. Login ke Dasbor Blogger
2. Tambahkan widget HTML/JavaScript, simpan kode ini :

<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
margin-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;}
.top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;}
.top-commenter-avatar {vertical-align:middle;width:30px;height:30px;
}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "Henry Dwi.s"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user]';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEqvpIqkZS0AOdD6rh44Wx0l9XBVZvPypsMpZASWsAaUShxo9k7rOg3Tm8pR_-co3EMjwooYbmMZ12mcZr_t0GMpD-AOKh0KWBjMjYJprU-1UTvt72Exkp4UuO9Vjho0Sa7FijOBYPqE8/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Untuk kostumisasi, silahkan lihat CONFIG pada script di atas. Jangan lupa ganti "Henry Dwi.s" dengan nama sobat, supaya komentar sobat tidak masuk pada top komentator.

Terakhir, jika sudah di edit seperti pada keterangan diatas, klik simpan/save
oke, happy blogging:)

Pada 11:50 AM 3 Komentar

Tuesday, June 11, 2013

Cara Memasang Animasi Lucu di Blog

Widget

hai sob:) udah seminggu lebih nih gak posting , sekarang saya akan posting Cara Memasang Animasi di Blog Lucu ada beberapa widget yang biasa di pasang sebagai hiasan diblog, ada yang memasang kalender, ada yang memasang lagu di blog, memasang animasi di blog dan masih banyak lagi. Namun kali ini, kita khusus membahas cara memasang widget animasi lucu di blog
Widget ini bisa sobat tempatkan dimana saja tapi umumnya di letakkan di sudut blog seperti kanan atas, kanan bawah, kiri atas dan kiri bawah blog,oke sob langsung aja nih liat koleksi animasinya:
Cara Memasang Animasi di Blog

1.Tuyul ketawa
Click to get more.

Script:

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" alt="animasi blog" /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

2. Tuyul baring

Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

3. Helikopter

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

4.Gajah loncat

Script:

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

5.Boneka joget
Click to get more.

Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" alt="animasi blog" /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

6. Panda main bola
Click to get more.

Script :

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" alt="animasi blog" /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

7.Anjing laut

Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

8.Lumba-lumba

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

9.Pinguin

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

10. Panah

Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

11.Kucing tidur

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

12.Ikan

Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

13. Pintu

Script:

<div style="position: fixed; bottom: 0px; right: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203D1.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

14.Berteriak

Script:

<div style="position: fixed; bottom: 0px; right: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020309.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

15.Terkurung

Script:

<div style="position: fixed; bottom: 0px; right: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002020A.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

16.Menangis

Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020461.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

17.Champion Ship

Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/0002068C.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

18. Sundul Bola

Script:

<div style="position: fixed; bottom: 0px; right: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/000203CF.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

19. Telur Ayam Menetas

Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020540.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/target="_blank">Animasi Blog</a></center></small></div>

20.Ayam Bertelur

Script:

<div style="position: fixed; bottom: 0px; right: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020541.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

21.Kiper Gawang

Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020686.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

22. Bayi Kejepit alat vital nya

Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://4.bp.blogspot.com/-63qclaiJwuw/UIwopTWGpVI/AAAAAAAACZs/246gqtPBUm8/s1600/186650_0_Animasi_Lucu_225.gif" title="Click to get more." /></a><small><center><a href="http://henry-multimedia-informasi.blogspot.com/" target="_blank">Animasi Blog</a></center></small></div>

Cara Pemasangan :

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML Javascript.
3. Masukkan script ke dalam kotak yang di sediakan.
4. Kemudian klik save.

Catatan :

Untuk mengubah posisi animasi dari kanan ke kiri, tinggal mengubah kode right dengan left. begitu juga sebaliknya.
Untuk mengubah posisi animasi dari bawah ke atas, sobat tinggal merubah kode bottom dengan kode Top

Pada 6:22 PM 5 Komentar

Thursday, May 30, 2013

Search engine box cool

Search Box Widget

Search engine box cool - Selamat malam sob,kali ini saya akan berposting tentang mesin pencari atau yang sering di sebut dengan search engine, search engine kali ini lebih terlihat sederhana namun terlihat keren penampilanya

oke sob, ini adalah di bawah ini adalah search engine-nya:

aduh billing warnetnya mau habis hehehe, oke langsung aja deh caranya
1. login ke akun blog sobat

2. Klik Tambahkan Gadget dan klik 'HTML/Javascript

3.Masukan kode di bawah tepat di dalam kolom HTML/Javascript

<style type="text/css">
#search{width:268px; border:1px solid #E0DFD9;margin: 0 0 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_sUfJWtFVHW3oRMJWNxwoETkPcjaegL5G7A7kh5d0gQwyBVbXo-rmcPKlaMskWtQKS_Douo48gE8dAi9tTDqh3QmlG-E6qyMv5Y_uQaZIFu8r4xo05iA-xLYWS2gUTnzt0YjGGal4Jb8/s1600/search-bgg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden} 
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left} 
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px} 
#search-wrap{padding:15px 0} 
.topsearch #search{margin-top:0;margin-bottom:10px}
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px} 
</style>   
<div class='topsearch'> 
<div class='clerfix' id='search'> 
<form action='/search' id='searchform' method='get'> 
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/> 
<input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaokA69GFkc5SFHkitFkM0Ct-HejFVZMPx5ZEv2tVya5z1NrU3skeEbLZIqvHIlpz9Gn6Nx1YfBQNWVeN56F65e49JYTKemqvB53DaNwg5-NddVVn0lBe-jcTPJZLklf3VEUH1VG4bvo/s1600/searchico.png' title='Search' type='image'/> 
</form></div></div>

4.Klik Save dan lihat hasilnya, Semoga Bermanfaat...

Pada 9:25 PM 4 Komentar

Monday, May 27, 2013

Cara Membuat Widget Footer Di Blog

Blog Widget

Cara Membuat Widget Footer Di Blog-mungkin dari anda ada yang tau footer dan juga ada yang tidak mengetahuinya jika anda bingung ini adalah contoh gambarnya:

Footer terletak di bawah, di bawah postingan tentunya gunanya adalah untuk meletakan widget histats maupun widget alexa dan bisa juga di gunakan untuk meletakan widget yang lain, oke langsung aja caranya

Login ke blog sobat
Pilih Template
Klik Edit HTML
Silahkan copy code di bawah ini , kemudian langsung diletakkan di atas ]]></b:skin>

#footer-coloumn-baru {clear:both;}

.footer-column {padding:10px};

Kemudian sobat blogger cari code seperti di bawah ini ( gunakan Ctrl+F atau F3 untuk mempermudah mencari )

Memang setiap template tidaklah sama, tapi sobat bisa berpatokan dari kata outer ataupun footer tersebut

Setelah ketemu sobat letakkan script di bawah ini tepat di bawah  tersebut.(menambahkan 3 column baru)

Klik Simpan Template

Perhatian:
Jika anda tidak menemukan code  carilah code yang mirip kata kuncinya adalah end
Oke cukup sekian, Semoga Bermanfaat...

Pada 12:08 PM 8 Komentar

Tuesday, July 16, 2013

Cara membuat Banner Iklan 125x125 di Blog

Thursday, June 27, 2013

Metro UI Style Social Media Widget untuk Blogger

Thursday, June 13, 2013

Cara Memasang Widget Top Komentator Di Blog

Tuesday, June 11, 2013

Cara Memasang Animasi Lucu di Blog

Thursday, May 30, 2013

Search engine box cool

Monday, May 27, 2013

Cara Membuat Widget Footer Di Blog

Follow us

Partner

Comments

Recent Posts

Cloud Label

Random Posts