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 :
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.
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.
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 :
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'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</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 :