Andre B'Genk: Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Selasa, 16 Juli 2013

Cara membuat Banner Iklan 125x125 di Blog

By Unknown Posted at 06.44 Widget No comments

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/AVvXsEhIQF2dpgnE9sMqrU4KKg7NA7fLn_Ro_4-YNckCwm7erxjZp-SOPZlqKXlyghhJ2cFSazBowCvUZwlBYJFwtQYJkCUooUQbhZ16r70OHdCDEPGzB1YL4KLyWff6wQVOgffgcc0kOPIyDyzB/s1600/iklan.png dengan gambar banner iklan yang anda inginkan

oke mungkin cukup sekian, Semoga Bermanfaat..!

Kamis, 27 Juni 2013

Metro UI Style Social Media Widget untuk Blogger

By Unknown Posted at 02.09 Widget No comments

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/AVvXsEhgHxgyNhQZRwARzm_DAVPTakY-s-GOYrQ4shKlDHSWFrNpEy_SKomoY0A4knRPvIh8kFD2uH14HtnOsp16Crbw8ICBE4Y8IgNqukPcGDGyAQ_g2vFr8fY2B-30iARPtCNj_f3lRduQDag/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/AVvXsEjZylWi-pLxnPQXoSCnPWg6cZnv0qqoeibFH67ZzHlmpdudKTMCVhPdCd4ZILumn8iTcZczcu8fJFheIJVXHXokEQXbOAAq3NylEddUpo29A5m7nkYawxb2fYYcRf0DAYzmNiMkX4sOmsE/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/AVvXsEidx0a_gSuwQ2CFBZ9ECvf_jthesbtdRmnhLKQRFQJcX2aWAp7HN-AQzgrM1xAZn8jQQqxtqlOfhJB-phIxeXupS0eBhrAuL1N7fVcmui0J4XxGW6QKW1DxwTW3cVPbBkLVXMu2Ar5OdRY/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/AVvXsEihvGZqM8laESyGkzjtGItLuqwtorPs4-bgu3y6MfkKFcancTvIR-uFC3Vy1TJNK7WouugnQ9KzI6CouaqCj_11Nq9u3ZaHqOCi5A5ledUQ3fo5EKoyfjKJkf0hTvXnc9TwTgHCTyRTaao/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/AVvXsEhpj9yqwXp8H17ofXbb4eagFopZTcVpIh4P62WnHZmNcPQFqBrqFWOCyaPInwP3ljDVX8clK1JkEoawiJQxdSKt8XgP2hFuxv6AbvllfMOdSoeuk2mt9UpQ3YLeN6UOnr38XFsLgxm_-Ik/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/AVvXsEh5k_WA_A7C6mVzYTjmvQHs5NenWuezem3A0PxdEdDek6f2sRzbes72m3yFvpQWtPhqp4_XP2FyxEOhzTziAvcdKuKCsCEFUpnbmYlKbzLLYwh8shucWciEsget9GGuNrbZe_-tjRxxgPY/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/AVvXsEihCMB8FjD8On5JzJsXOAYgxDzjbzmZynSLXua_ExgFN7cR4_c4l_8vSLXB0aY9dowE0KvQEeOlO7uVW0BzEG2ZHUUESnDBkJjVpGWiQ3M3JRCjg97iKpck0yxFldwrmnAVswUj0FLNLVI/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/AVvXsEiaGgoNfjddf0tvuuSwETp-6tY9fQ9IOHnviEPs_XvDZfVMhN-ht84MrfHb_XK1wy2c8sksxBbqoIdASxbyezxwMj3P_kH91LnYs4ZOv239gOdQ_Bb1WiT0aH9PDu_B_iSo7KJAy9sl9S4/s1600/bt-facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARMV-rz8XyFqm4oLMY39qqwl1WuUrwK1YcoB5tq8Qms_Vg4DdQvEbDM3MTkCze7A1L-IjTOeHS82KN8oWYOw59j7APPDkpD-Ph9SZUXCe5LBKkPd_QIRbAjVsJFFIziK5rOmcVNxvHBA/s1600/bt-twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ-QhRpwG4o5UFDiZkilX8RMWmVJHRM6MP-216dWY2SnGpkTThwV_9SaS_ohcHRzAmZFAkzuw-m5mcLPSqI2fLN6Jye1Wj7F9fP3r9kq1dT87JWAW6p0J-PgjQFuxh6lH9vWqnNR0TZlw/s1600/bt-google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0ZmGp0vD7MsGnf6FwDEjcObYmma4GQoUADD_EJB3RnzKQDM5slxG6O7F5YVKBcx4mKQpgyhoSyyQn5f4Xqk0OdU2p2W5h_4JIjQkjZccyazqnfi-ZA_ew5Hn82sRtnsjDVmNG07GqTY/s1600/bt-pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLEjx5DvObNxBLIj7O-uyb4LJ_k_WNH2XCQRVIbEfl6-GV6Qczl-S8aPb_XibeV9ovgGAUP2LAU9BHmLV6pV40kHc2ptIzshPcrBgS8jSTngtGqcuiFh_E2qLj6O5KLvOCA-EyxDPFs4/s1600/bt-linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkYPhaXPTvgQe_UnhhoxCpu7QOIeLG0xddxsWtHa-HaUf4huycILwa_V-bhB4NObE_ORO14eLQ078XX5kIRFUmrIjdOjKIJhMFkBMU9ju4AfiX4kDhQJtyeUu-6BNUeE1ROhIVltgmkAk/s1600/bt-youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVS9ik469jzRwABPMLxdf1Drk07yVpu4htaDgbT-Wcfu66H4bpUUVUHRoxw0DCEo83UMPLSe5EK8bGnPILEbtb4vOqbUe8w7Y8RLQlhimB4oaCUgCbyYrUvQCzBflv_DdGWEoQrSmK5I/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...

Rabu, 12 Juni 2013

Cara Memasang Widget Top Komentator Di Blog

By Unknown Posted at 20.50 Widget No comments

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/AVvXsEg-7Mv7V6BAcDVaHNIyNbMuQ7nM4ixzWmgraRyDl84eJ-1lZI7TfNX6qlFjrRtyBwqRGbGvDVrLP22K-5F1JdPxmxk_-9ng6c9kHhhHk_5pzBkfo0mIsqhLiUJbF3XsamTPaJVUXXRGCgs/"+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:)

Selasa, 11 Juni 2013

Cara Memasang Animasi Lucu di Blog

By Unknown Posted at 03.22 Widget No comments

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

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

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

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

Kamis, 30 Mei 2013

Search engine box cool

By Unknown Posted at 06.25 Widget No comments

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/AVvXsEgxES8-xuFrDKRtGQ371BIfpKMIYSsmaDyWFLsPC2OSykHhnuNqEJEhjvp0ZyQcAD-484N2Z7OlolAFwScjsfrhSeQIbzewvboxrC8dgESPD_oFpdWns4VFdp2rNby5FXVsZJcuXwB94Hw/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/AVvXsEi9AAuj3c7foSHvVTLN4ze_GxR6jNgShjoLm6dr9cPpLZwu4XWNjXkHBE3E3VGxHtU1Qb49GgRgLwwPXxQOYfA9F_8FYEB6_rWjuP6fXdEExwV_Nz2sucYLzCkP7o0CoiSS7MZXJJwOPVg/s1600/searchico.png' title='Search' type='image'/> 
</form></div></div>

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

Minggu, 26 Mei 2013

Cara Membuat Widget Footer Di Blog

By Unknown Posted at 21.08 Widget No comments

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...

Jumat, 24 Mei 2013

Cara membuat Scrollbar Pada Widget Entri Populer

By Unknown Posted at 22.32 Widget No comments

Cara membuat Scrollbar Pada Widget Entri Populer - mungkin sobat agak risih dengan tampilan entri populer yang panjang kebawah dan kali ini saya akan ngasih tau tips-nya nih!
tipsnya adalah dengan memberi Scrollbar pada entri populer jika anda bingung ini adalah sreenshotnya:

gemana sob? kelihatnya lebih simpel kan?
berikut adalah caranya:
1. Loggin ke akun blogger sobat

2. Klik Template

3. Cari kode <div class='widget-content popular-posts'> untuk memudahkan pencarian tekan tombol Ctrl+F
4. Kalau sudah menemukan kodenya gantikan kode tersebut dengan kode ini
<div class='widget-content popular-posts' style='overflow:auto; width: 100%; height:300px'>
5. Klik Simpan Template
6. Semoga Bermanfaat...

perhatian!
jika ukuranya tidak pas dengan blog sobat ganti tulisan yang berwarna Hijau dengan yang anda inginkan itu ukuran lebarnya
dan untuk tulisan yang berwarna biru itu untuk panjangnya aturlah sesuka hati sobat

Search engine box Css3 3D Style

By Unknown Posted at 05.51 Widget No comments

Search engine box Css3 3D Style - Pernah tidak sobat melihat kotak pencari atau yang sering di sebut search engine di blog ,pasti pernahkan sob! nah sekarang saya akan ngasih tau caranya nih
apakah penting? pastinya sangat penting dong sob!karena sangat membantu sekali bagi pengunjung yang ingin mencari artikel di blog kita, ini adalah sreenshotnya:

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 type="text/css">
.form-wrapper {
width: 270px;
padding: 8px;
margin: 10px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
width: 180px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}
.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 70px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<form class="form-wrapper" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="Search" />
    <input id="submit" type="submit" value="Search" />
</form>

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

Kamis, 16 Mei 2013

Cara pasang widget alexa di blog

By Unknown Posted at 21.36 Widget No comments

Cara pasang widget alexa di blog, Apakah alexa itu penting ? inilah yang menjadi permasalah dari setiap blogger.Apa itu alexa ? alexa adalah situs yang sangat terkenal didunia blogger.Alexa.com biasanya memberi sebuah website Rank ataupun jika submit blog dan mendaftar, akan diberikan backlink.Ternyata sudah sangat dibuktikan bahwa ALEXA ITU SANGAT PENTING.Karena alexa.com telah bekerja sama dengan search engine Google.com

Jadi tunggu apalagi pasang segera widget Alexa di blog anda. Silahkan ikuti langkah-langkah di bawah ini :

1. Pertama-tama buka http://www.alexa.com/siteowners/widgets

2. Terdapat 3 pilihan widget yang disediakan oleh Alexa sendiri. Teridir dari :

Alexa Site Stats Button : Berguna untuk menampilkan peringkat beserta jumlah link tautan menuju blog anda..
Alexa Traffic Rank Button : Yang ini hanya berguna untuk menampilkan peringkat alexa saja.
Alexa Traffic Graph : Widget ketiga ini berguna untuk menampilkan grafik yang lengkap. Tapi biasanya ukuran widget ini relatif besar.

Untuk blog ini saya menggunakan widget yang pertama maka anda dapat lihat sendiri di bagian bawah blog ini. Jadi nantinya akan muncul ranking Alexa dan jumlah link menuju website anda.

3. Setelah anda menentukan pilihan, isikan URL blog anda di kotak yang disediakan lalu klik tombol BUILD WIDGET.
4. Kemudian anda akan mendapatkan kode script HTML yang anda bisa pasang di blog anda.

Cara Memasang:

Masuk atau Login ke Blogger.

Pilih Tata Letak → Tambah Gadget → HTML / JavaScript.

masukan kode tadi disini

Klik Simpan

Semoga Bermanfaat...^_^

Jumat, 19 April 2013

Cara upload flashvortex ke blog/Cara Memasang File Swf Ke Blog

By Unknown Posted at 08.35 Widget No comments

Kali ini saya akan membahas bagaimana Cara upload flashvortex ke blog/Cara Memasang File Swf Ke Blog Pasti anda pernah DOWNLOAD flashvortex untuk menghapus bannernya tapi anda tidak tau cara uplodnya ke blog, dan kali ini saya akan memberi tau bagaimana caranya, langsung aja CEKIDOT...
1. buka ximg.us
2. Nah akan muncul tampilan seperti di bawah ini

3. Pilih browse, kemudian pilih file swf yang ada di komputer anda kemudian akan ada lokasi file anda dengan tulisan warna merah.

4. Masukan email anda jika anda pikir perlu (optional) klik tombol upload yang warnanya hijau. kemudian tunggu file di upload sebentar dan akan muncul seperti pada gambar berikut.

5. Itulah link file swf anda, langsung copy ke notepad dan simpanlah yang aman karena untuk menemukan file yang linknya hilang agak susah.

Setelah mengupload file swf kita langsung saja menuju blogger.com

1. Login ke Blog anda terlebih dahulu
2. Masuk ke Tata letak
3. Tambahkan Sebuah Gadget atau Widget
4. Pilih Widget HTML/Javascript
5. Masukan script sebagai berikut:

<embed src="masukan-link-yang-di-atas.swf" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="60" width="468"></embed>

PERHATIAN : kode yang berwarna merah ganti dengan LINK gambar anda, kode yang berwarna biru unuk ukuran gambar, maka gambar akan seperti ini: