HTML
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Membuat Sitemap Keren di Halaman Statis

10.19 Add Comment
sitemap
kali ini saya akan men-share sitemap lagi, tetapi berbeda dengan yang sebelumnya saya bagikan

 Ok, langsung saja ke TKP sob :)

 1. Silahkan login ke blog sobat lalu menuju ke Template > Edit HTML, lalu letakkan CSS berikut
sebelum kode ]]></b:skin> atau </style>
 /*CSS Sitemap ---- http://adityava.blogspot.com/ */
#tabbed-toc{margin:0 auto;background-color:#fff;-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);overflow:hidden;position:relative;color:#FC7569}
#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 12px Tahoma,Sans-Serif;color:#F53B3B}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}
#tabbed-toc .toc-tabs{width:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Tahoma,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#FC7569;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#fff;color:black}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#F53B3B;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #F53B3B;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px Tahoma,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#2d2d2d;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#fff}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#F9F9F9;color:#FC7569;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}

2. Jika sudah, silahkan save lalu buat halaman baru untuk sitemapnya. Saya
merekomendasikan Anda untuk membuatnya dihalaman statis blog.
3. Pada halaman Statis tersebut, ubahlah kedalam mode HTML jangan Compose agar kodenya
aktif.
4. Masukkan Kode pemanggil Sitemapnya
 <div id="tabbed-toc">
<span class="loading">Loading Sitemap .. Please Wait.. :)</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://adityava.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#FC7569;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="https://googledrive.com/host/0B9aCNMbcS5BlVVpSMnlsN2FvTjA" type="text/javascript"></script>

5. Silahkan di publikasikan dan lihat hasilnya.


Keterangan :

  • Ganti http://adityava.blogspot.com/ dengan alamat blog sobat,
  • Anda dapat menentukan jumlah artikel terbaru yang ingin di tampilkan dengan
  • mengganti angka 15 pada showNew.

Membuat Halaman Member Aktif di Halaman Statis

09.50 1 Comment
member

 Kali ini saya akan share cara Membuat Halaman Member Aktif di Halaman Statis, halaman member ini berisikan visitor member yang sering mengunjungi blog sobat.

 Ok langsung saja, berikut langkah-langkahnya :

 1. Buat halaman statis
2. Ubah dari tab Compose menjadi HTML
3. Masukkan kode CSS dibawah ini ke tab HTML tadi
 <style type="text/css">
.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color: #FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}
</style>

4. Setelah itu, masukkan juga Javascript dibaah ini kedalam tab HTML tersebut
 <script type="text/javascript">
//<![CDATA[
var homepage = 'http://adityava.blogspot.com/',
  maxTopCommenters = 30,
  minComments = 1,
  numDays = 0,
  excludeMe = true,
  excludeUsers = ["Anonymous", "aditya va"],
  maxUserNameLength = 42,
  txtTopLine = '[image] [user]',
  txtNoTopCommenters = 'No top commentators at this time.',
  txtAnonymous = '',
  sizeAvatar = 80,
  cropAvatar = true,
  urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOr3PE9xl17_uj1WLiUuIhJgzzBCUnS0VsUbJmeK6PP8udhJKWDEOAk9v8Dk5IdJ8-I6ECJLb6Iqp3lT0zhLvmhZhpj8OipHi9-_tlzpLORZfsaupdWblg94VeeL8uaaUS8E2ZjImz0lg/' + sizeAvatar + '/avatar_blue_m_96.png',
  urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
  urlMyProfile = '',
  urlMyAvatar = '';
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 = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" 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 item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  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);
      var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
      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="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
    return
  }
  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
  });
  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(replaceTopCmtVars(txtTopLine, item, realcount + 1));
    realcount++
  }
  if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script>

5. Klik publikasikan dan selesai
Keterangan :
  • Ganti http://adityava.blogspot.com/ dengan url blog Anda.
  • Ubahlah nama "aditya va" dengan user name Anda.
  • Pada maxTopCommenters ganti angka 30 dengan jumlah member yang ingin Anda tampilkan.
  • Bila ingin mengatur ukuran foto avatar, silahkan ganti angka 80 pada sizeAvatar.

sumber : http://wajahilmu.blogspot.com/2015/05/cara-membuat-halaman-member-aktif-di.html

Membuat Tombol Login dan Logout Blogger di Blog

12.20 Add Comment
Berawal dari melihat sebuah blog yang menggunakan tombol Dashboard dengan menggunakan link home Blogger untuk menuju dashboard blog dan sekaligus untuk login atau logout, kemudian saya coba berpikir lain yaitu membuat tombol login dan atau tombol logout lain yang menggunakan langsung link login dan logout akun Google yang mengarah ke halaman Blogger.

login logout

 Tombol ini sangat sederhana karena hanya menggunakan CSS dengan menggunakan link yang menuju ke halaman login akun Google yang mengarah ke halaman home Blogger atau Dashboar Blog seperti gambar gif di bawah ini atau silahkan coba link demonya.
login logout

 Jika tertarik untuk mencoba tombol login dan logout Blogger ini silahkan gunakan kode-kode di bawah ini.

 Kode CSS
 #adminblog{background: #F4836A;color: #fff!important;width:60px;border:none;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 0;position:absolute;top:10px;left:10px;transition:all .4s ease-in-out;}

#layoutlogin{background:#000;opacity:.7;position:absolute;top:0;left:0;right:0;bottom:0;z-index:99999;display:none}
#login{position:absolute;width:222px;height:auto;top:30%;left:50%;margin-left:-111px;font-family:Arial;z-index:100000;display:none}
#loginbox{background:#fff;width:200px;padding:10px;display:none;position:absolute;top:62px;left:0;border:1px solid #ddd;border-radius: 2px;z-index:1;overflow:hidden;}
#loginbox .emaillogin input.email {color: #777;padding: 10px;font-size: 14px;font-family:Arial;width:89%;border:1px solid #ddd;border-radius: 2px;}
#loginbox .emaillogin input:focus {outline: none;}
#loginbox .emaillogin input.signin-btn{background: #F4836A;color: #fff!important;border:none;outline: none;width:100%;font-size: 14px;font-family:Arial;cursor:pointer;border-radius: 2px;margin-top: 10px;padding: 11px;}
#login1,#login2{color: #777;padding:5px 10px;font-size: 14px;font-family:Arial;width:38%;display:none;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:38px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
#login2{border-bottom:none;z-index:2}
#Admin1,#Admin2{color: #777;padding:5px 0;font-size: 14px;font-family:Arial;width:100%;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:0px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
.logout{background: #F4836A;color: #fff!important;width:38%;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 10px;position:absolute;top:38px;right:-1px;transition:all .4s ease-in-out;}
a.logout{text-decoration:none}
#Admin1:hover,#login1:hover{background:#eee}
.logout:hover,#adminblog:hover{background:#d56148}

Kode #adminblog adalah kode CSS untuk mengatur tampilan dan posisi tombol Admin.
Jika tombol Login terlalu ke bawah atau terlalu masuk ke Form, silahkan atur atau tambahkan angkanya pada kode top pada kode CSS #loginbox

 Kode HTML
Silahkan simpan di atas kode </body>
 <div id="adminblog" onclick="document.getElementById('login').style.display='block';layoutlogin.style.display='block';adminblog.style.display='none';">Admin</div>

<div id='login'>
<div id="Admin1" onclick="document.getElementById('login1').style.display='inline';logoutbox.style.display='inline';Admin1.style.display='none';Admin2.style.display='inline';">Silahkan Pilih</div>
<div id="Admin2" style="display:none" onclick="document.getElementById('login1').style.display='none';logoutbox.style.display='none';Admin1.style.display='inline';Admin2.style.display='none';">Silahkan Pilih</div>
<div id='login1' onclick="document.getElementById('loginbox').style.display='block';login1.style.display='none';login2.style.display='inline';logoutbox.style.display='none';">Login</div>
<div id='login2' style="display:none" onclick="document.getElementById('loginbox').style.display='none';login1.style.display='inline';login2.style.display='none';logoutbox.style.display='inline';">Login</div>
<div id='loginbox'>
<div class='emaillogin'>
<form action="https://accounts.google.com/ServiceLogin?service=blogger&amp;continue=https://www.blogger.com/home&amp;followup=https://www.blogger.com/home" method="post" target="_blank" onsubmit="onlogin()">
    <input class="email" value="Username" name="Email" onblur='if (this.value == &quot;&quot;) {this.value = &quot;Username&quot;;}' onfocus='if (this.value == &quot;Username&quot;) {this.value = &quot;&quot;;}' type="text" />
      <input class="signin-btn" value="Sign In" name="submit" type="submit" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';"/>
    </form>
   </div>
  </div>  
    <div id='logoutbox' style="display:none">
<a class='logout' href="https://accounts.google.com/Logout?service=blogger" target="_blank" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';">Logout
   </a>
  </div>
    </div>
<div style="clear:both"></div>
<div id="layoutlogin"></div>

Demo :
Selamat mencoba =)


sumber : http://www.kompiajaib.com/2014/09/membuat-tombol-login-dan-logout-blogger.html

Membuat Progress Bar di Blog Seperti Youtube

11.57 Add Comment
loading logo

 Membuat Progress Loading Bar Blog Seperti Youtube - Jika kita jeli ketika kita membuka halaman Youtube, maka kita akan melihat sebuah progress bar di paling atas situs berwarna merah dari kiri ke kanan. Cukup keren bukan? Kita pun bisa membuat pregress loading bar seperti itu di Blogger dengan bantuan javascript.
Untuk contoh progress bar Youtube bisa Anda lihat pada animasi gif di bawah ini. Dan demo penerapan nanobar progress bar pada blog bisa Anda coba pada link demo di bawahnya

 Bagaimana? Anda tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

 Silahkan copy kode javascript di bawah ini dan simpan di atas kode </body>
 <script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

Kustomisasi

 height:"2px" untuk ketebalan loading bar.
a.bg=a.bg||"#db3131" untuk warna loading bar, silahkan ganti #db3131 dengan warna yang Anda sukai.
sumber : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html

Follow Sosial Media Slide Out with Jquery

11.38 Add Comment
icon sosial media
Tentunya Anda sudah tidak asing lagi dengan template Pakdhe Johny buatan Maskolis kan? Yup... sebuah template Blogger dengan fitur-fitur yang menarik yang patut Anda coba. Pada template tersebut terdapat tombol follow social media di sisi kanan blog yang cukup menarik yang di susun dengan css dan jquery dengan menggunakan css sprite untuk image/icon sosial medianya.

 Ketika Anda meng-hover-nya, maka tombolnya akan keluar (slide out) dan akan ada efek memantul (bounce) diakhirnya, begitu pun ketika dilepas. Cukup menarik bukan? Nah kali ini saya akan sharing cara membuat sosial media seperti pada template Pakdhe Johny tersebut namun dengan css dan jquery yang berbeda tetapi tetap menghasilkan tombol yang serupa yang saya sebut dengan follow social media slide out with jquery.

 Namun untuk css sprite-nya tetap menggunakan image yang sama yang telah dibuat Maskolis. Silahkan coba, perhatikan, dan bandingkan demo di link bawah ini dengan yang ada di template Pakdhe Johny.

Untuk kode-kodenya silahkan copy dari iframe JSFiddle di bawah ini. Untuk kode javascript dan HTML-nya silahkan simpan di atas kode </body>

 Namun jangan lupa karena ini menggunakan efek toggle bounce, maka harus menambahkan jquery library dan jquery ui di templatenya seperti di bawah ini berapa pun versinya. Jika sudah ada (berapa pun versinya) maka tidak usah menambahkannya lagi. Selamat mencoba dan semoga bermanfaat...
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
Tentunya Anda sudah tidak asing lagi dengan template Pakdhe Johny buatan Maskolis kan? Yup... sebuah template Blogger dengan fitur‐fitur yang menarik yang patut Anda coba. Pada template tersebut terdapat tombol follow social media di sisi kanan blog yang cukup menarik yang di susun dengan css dan jquery dengan menggunakan css sprite untuk image/icon sosial medianya. Ketika Anda meng‐hover‐nya, maka tombolnya akan keluar (slide out) dan akan ada efek memantul (bounce) diakhirnya, begitu pun ketika dilepas. Cukup menarik bukan? Nah kali ini saya akan sharing cara membuat sosial media seperti pada template Pakdhe Johny tersebut namun dengan css dan jquery yang berbeda tetapi tetap menghasilk


sumber : http://www.kompiajaib.com/2014/08/follow-social-media-slide-out-with.html

Widget Google Followers dan Facebook Like box Sliding

11.11 Add Comment
fb dan google like
Jika sobat blogger pernah melihat ada Fb+Google Like melayang di piggir dan jika di arahkan dengan cursor akan muncul, kali ini saya akan share xD

 Langsung saja ya, Berikut langkah penerapannya :
 .socialbox{
    position:fixed;
    top:100px;
    right:-286px;
    height:250px;
    width:285px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
}
.fbicon-box{
    width:30px;
    height:35px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#405D9B;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Arial;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:2px;
}
.socialbox:hover{
    right:0;
    z-index:2;
}

.socialbox2{
    position:fixed;
    top:145px;
    right:-279px;
    height:230px;
    width:258px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
    padding:10px;
}
.gpicon-box{
    width:30px;
    height:32px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#DD4B39;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Georgia;
    font-size:20px;
    font-weight:700;
    text-align:center;
    padding-top:5px;
}
.socialbox2:hover, .socialbox2:active{
    right:0;
}

  • Kode HTML

Untuk kode HTML juga sama, jika Anda sudah memasang Sliding Facebook Like Box dari postingan sebelumnya silahkan ganti dengan kode HTML-nya dengan kode HTML di bawah ini :
 <div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/troublemaker" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
    <div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+Raditya_ID" data-source="blogger:blog:followers" data-width="260"></div>
</div>

Silahkan ganti URL profil Facebook dan profil Google+ di atas dengan URL profil Facebook dan profil Google+ Anda.

 Kemudian silahkan tambahkan javascript SDK facebook dan javascript Google+ di bawah ini. Jika ternyata di blog Anda sudah terdapat kode-kode ini silahkan lewati langkah ini.

  • Javascript Facebook

Simpan di bawah kode <body>
 <div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

  • Javascript Google+

Simpan di atas kode </body>
 <script type='text/javascript'>
 (function() {
  var po = document.createElement('script');         
  po.type = 'text/javascript';         
  po.async = true;         
  po.src = 'https://apis.google.com/js/plusone.js';         
  var s = document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(po, s);
 })(); 
</script>

Kemudian jangan lupa silahkan pastikan blog Anda sudah menggunakan jquery library seperti di bawah ini (berapa pun versinya).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script&gt;
Lihat Demo : 
sumber : http://www.kompiajaib.com/2014/04/g-followers-dan-facebook-like-box-sliding-widget.html
Langganan: Postingan (Atom)