Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan
Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan

Cara Membuat Tombol Follow Twitter disertai Jumlah followers



Cara Mudah Membuat Tombol Follow Twitter disertai Jumlah followers | Twitter follow Button
1. Masuk Blogger » Tata Letak » Tambah Gadget : HTML/JavaScript, isi dengan kode berikut :

<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=Nur_qholis&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe>

Note : Kode yang berwarna merah ganti dengan Username Twitter Anda.

2.Kemudan Simpan dan lihat hasilnya.

Recomended : Cara membuat widget update status twitter di Blog


readmore


Cara membuat widget update status twitter di Blog

Cara mudah membuat dan memasang Widget Update Status dan follow Twitter di Blog | kali ini masih terkait widget untuk Blog, saya sering posting seputar widget karena pembahasanya tak perlu membutuhkan waktu panjang, mengingat durasi koneksi yang saya punyai terbilang pendek.
 .

Langsung saja berikut Langkahnya :

1. Masuk Blogger » Tata Letak » Tambah Gadget : HTML/JavaScript, isi dengan kode berikut :
 .
<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4VbZf0IZfq0XxJHJjZc7RhaBf45S8Os7uD7LrM853UUuhxqTs2U2_t7IarhDFU3L6r65lBZ2wc8EuqTG8P6bzeO1c8Or89xQ6jzynSNM9ubkVSGduKWI3usSkafVp6gvImXAgz2tt1Ck/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(new TWTR.Widget({version:2,type:"profile",rpp:10,interval:3e3,width:285,height:118,theme:{shell:{background:"transparent",color:"#000000"},tweets:{background:"transparent",color:"#000000",links:"#B45F04"}},features:{scrollbar:true,loop:true,live:true,hashtags:true,timestamp:true,avatars:true,behavior:"default"}})).render().setUser("Nur_qholis").start()
</script>

Note : Kode yang berwarna merah ganti dengan Username Twitter Anda.

2. Kemudan Simpan dan lihat hasilnya.

Recomended : Membuat Tombol Follow Twitter disertai jumlah followers

readmore


Cara Memasang Like Fanspage Facebook Melayang di Blog keren!!

Cara mudah Membuat Like Box fanspage Facebook keren melayang di Blog dengan posisi di kanan bawah | banyak Tutorial yang sudah mengulas tutorial ini, namun tak apalah mungkin bagi anda ada yang belum tahu dan ingin mencoba tampilan pop-up dari facebook like box berikut ini, yang tampilanya menarik disertai tombol close, berikut cara memasangnya :



1. Masuk Tata Letak
2. Tambah Gadget/HTML JavaScript
3. masukkan kode berikut :


<!-- FB melayang tombol close --!>
<style type='text/css'> 
#kotak-facebook {

      position:fixed !important;

      position:absolute; /* IE6 */

      bottom:-1000px;

      right:10%;

      margin:0px 0px 0px -182px;

      width:300px;

      height:auto;

      padding:16px;

       -webkit-box-shadow: 0px 0px 7px #222;

      -moz-box-shadow: 0px 0px 7px #222;

      box-shadow: 0px 0px 7px #222;  background-color:#C2CFDF; font:normal 1em Cambria,Georgia,Serif;

      color:#111;

    -webkit-border-top-left-radius: 20px;

    -webkit-border-bottom-right-radius: 20px;

    -moz-border-radius-topleft: 20px;

    -moz-border-radius-bottomright: 20px;

    border-top-left-radius: 20px;

    border-bottom-right-radius: 20px;}

    #kotak-facebook a.close {

      position:absolute;

      top:-10px;

      right:-10px;

      background:#333;

      font:bold 16px Arial,Sans-Serif;

      text-decoration:none;

      line-height:22px;

      width:22px;

      text-align:center;

      color:#fff;

      border:2px solid #fff;

      -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

      -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

      box-shadow:0px 1px 2px rgba(0,0,0,0.4);

      -webkit-border-radius:10px;

      -moz-border-radius:10px;

      border-radius:10px;

      cursor:pointer;

    }
</style>
    <script type='text/javascript'>

    $(window).bind("load", function() {

         // animasikan nilai top saat halaman telah selesai dimuat

         $('#kotak-facebook').animate({bottom:"50px"}, 1000);

         // hilangkan kotak pesan saat tombol (x) di klik

         $('a.close').click(function() {

              $(this).parent().fadeOut();

         return false;

         });

    });

    </script>


    <div id='kotak-facebook'>

  Klik Like !
<br/>
<!-- Mulai --!>
<div id="fb-root"></div>

<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.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/pages/Nur-Sahabat-Blogs/285620244858036" data-width="290" data-height="182" data-show-faces="true" data-stream="false" data-header="false"></div>

<!-- Selesai --!>
    <a class='close' href='#'>&times;</a>

    </div>

Ganti kode yang berwarna biru dengan kode fanspage milik anda.

5. Terakhir Simpan.

readmore


Cara Membuat Widget Recent Posts Keren terbaru

Jika anda sobat blogger bosan dengan tampilan recent post yang itu itu saja, tidak salahnya mencoba tampila recent post keren berikut ini. recent post ini dilengkapi fitur Thumbnail dan Next-Previous page, saya mendapatkan widget ini dari maskolis.com. bagi anda yang tertarik untuk mencoba menggunakan recent post keren seperti gambar dibawah, berikut ini Langkah dan cara membuatnya.

DEMO recent post keren 


1. Pertama anda harus Login ke akun Blogger » Masuk ke template » Edit HTML, kemudian centang expand widget templates
2. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
3. Setelah semua langkah diatas anda lakukan, cari (ctrl + f) kode ]]></b:skin>,
 letakkan kode berikut ini diatas kode tadi :

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto} #terbaru{margin:0px} .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px} .mas-elemen img{background:#999;padding:4px;float:left;height:#70px;margin-right:8px;width:70px} .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111} .mas-elemen:hover{background-color:#c3c3c3} .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetZqhRva8Sai0YoxKqf-5SB6_1tOTs2SIpwFKHQXfDkC3HKp7tPqWUSv7wLXMD3CuhjDnlgR6-LA7fcWtWjA94hO4m9zI3SFK_czXmJV0t313yulNUMTJfgmvi481-vILTk0kf3fxU4E/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3} #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px} #mas-navigasifeed:hover{background-color:#c3c3c3} #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px} #mas-navigasifeed span{padding:5px 10px} #mas-navigasifeed .next{float:right} #mas-navigasifeed .previous{float:left} #mas-navigasifeed .home{text-align:center} #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Perhatikan kode warna merah diatas, itu adalah lebar dan tinggi thumbnail image.

4. Selanjutnya masih pada posisi Edit HTML,  cari kode </head>
    masukkan kode berikut ini diatas kode </head> :
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://javakahuripan.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDM1FRldBU0aDwyHubklSH0gYBaI6STvmGxDv2LhmE5lpQHItU_DFJ-08UNstWTUBaPmRq2tO2l_wy1c0QBG_-6lbkBusJT4tdU1vLb4T4YMTmjg2sCPx4QJ69s55yQNV04A4-i-Q-3qA/s1600/no+image.jpg";}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan :
» var numfeed = 5;  Jumlah Artikel terbaru yang akan ditampilkan.
» pada widget var urlblog = "http://javakahuripan.blogspot.com/"; = ganti dengan URL blog Anda.
» var charac = 100; = Jumlah karakter atau huruf pada setiap post.

 5. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini, Klik add gadget » HTML/Javascript masukkan kode berikut ini kedalamnya :

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

Kemudian save dan lihat hasilnya.

Sekian dulu Tutorial kali ini, terima kasih telah membaca artikel Cara membuat Recent Posts Keren di Blog, Semoga bermanfaat .

readmore


Previous Posts home