Sempak Mungil XI IPS 4

Gadget ini sebenarnya bisa kita peroleh melalui widget bawaan Blogger namun bagi mereka yang suka utak-atik hal ini bisa menjadikan satu nilai plus untuk mempercantik sidebar Anda. Sidebar ini digunakan untuk menampilkan komentar dari para pembaca blog kita. Yang menarik dari sidebar komentar ini yaitu bisa menampilkan nama user yang memberi komentar dan juga isi dari komentar tersebut, sehingga kita bisa dengan cepat mengetahui siapa sahabat blogger yang sudah memberi komentar. Widget ini masih melibatkan bahasa pemrograman JSON yang memanfaatkan Feed dari blogger sehingga proses pemanggilan (loading) lebih cepat dan ringan. Mau mencoba? Silahkan lanjutkan membaca jika malas jangan di tutup blog ini cari lagi artikel lain mungkin Anda menemukan sesuatu yang menarik...!!!



Integrasi JSON Sidebar Comments Pada Template:



- Langkah 1

Login ke Blogger

- Langkah 2

Masuk ke "Rancangan - Edit HTML"

- Langkah 3

Cari kode di bawah ini:



]]></b:skin>



Langkah 4

Masukan (copy paste) kode CSS di bawah ini diatas kode ]]></b:skin>:



/* Sidebar Komentar JSON */

#komentar {

background: #3eb5da; //warna dasar

margin: 0;

padding: 0;

border: 1px solid #0971C8; //garis pinggir kotak gadget komentar

}

#komentar ul {

margin: 0;

padding: 0; //jarak ke pinggir kotak gadget komentar

}

#komentar ul li: first-child {

border-top: 0 none aqua;

}

#komentar ul li {

border-top: 1px solid #CCC; //garis sekat atas

border-bottom: 1px solid #0971C8; //garis sekat bawah

padding: 2px 0;

list-style: none;

}

#komentar ul li: last-child {

border-bottom: 0 none aqua;

}

#komentar ul li span {

background-position: 2px 2px;

float: left;

height: 16px;

margin-right: 5px;

width: 16px;

}

#komentar ul li b {

color: #ffffff; //warna huruf nama komentator

text-shadow: -1px -1px 1px #3196BA;

}

#komentar ul li: hover {

background-color: #CCC; //warna latar ketika mouse diatasnya

}

#komentar a, #komentar a: link, #komentar a: visited {

clear: both;

color: #FFF; //warna huruf isi komentar

display: block;

padding-left: 20px;

text-decoration: none;

}

#komentar a: hover {

color: #333; //warna huruf ketika mouse diatasnya

}

.komen {

background: transparent url(https: //lh5.googleusercontent.com/_xcD4JK_dIjU/TcA0b1eB4sI/AAAAAAAAFGQ/MlIzrpydae0/s800/top_rss.png) no-repeat 0 0; //icon komentar

}



- Langkah 5

Cari kode dibawah ini:

</head>

- Langkah 6

Masukan (copy paste) kode JavaScript di bawah ini di atas kode </head>:



<script type='text/javascript'>

//<![CDATA[

var jmlkomentar = 10;

var jmlkarakter = 100;

function tampilkankomentar(json) {

var entry, urlkomentar, isikomentar, lihatkomentar;

for (var i = 0; i < jmlkomentar; i++) {

entry = json.feed.entry[i];

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

urlkomentar = entry.link[k].href;

break

}

}

urlkomentar = urlkomentar.replace("#", "#comment-");

if ("content" in entry) {

isikomentar = entry.content.$t

} else if ("summary" in entry) {

isikomentar = entry.summary.$t

} else {

isikomentar = ""

}

var re = /<\S[^>]*>/g;

isikomentar = isikomentar.replace(re, "");

if (isikomentar.length > jmlkarakter) {

isikomentar = isikomentar.substring(0, jmlkarakter) + "..."

}

lihatkomentar = "<li>";

lihatkomentar += "<span class='komen'></span><b>" + entry.author[0].name.$t + "</b>";

lihatkomentar += "<a rel='nofollow' href='" + urlkomentar + "'><br/>(" + isikomentar + ")</a>";

lihatkomentar += "</li>";

document.write(lihatkomentar)

}

}

//]]>

</script>



Langkah 7

"SIMPAN TEMPLATE" dan lanjutkan...



Integrasi JSON Sidebar Comments pada Gadget



--Langkah 8

"Tambah Gadget" dengan tipe "HTML/JavaScript"

--Langkah 9

Masukan (copy paste) kode di bawah ini didalam konten dan jangan lupa beri Judul Gadget:



<div id="komentar">

<ul>

<script src="/feeds/comments/default?alt=json-in-script&callback=tampilkankomentar"></script>

</ul>

</div>



- Langkah 10

"SIMPAN" Gadget dan preview blog Anda!



Keterangan:

var jmlkomentar = 10; ubah nilai 10 untuk menentukan jumlah komentar yang ingin ditampilkan.

var jmlkarakter = 100; Ubah nilai 100 untuk menentukan jumlah karakter isi komentar yang ingin ditampilkan.



Bagaimana menurut Anda? Cantik bukan? Selamat mencoba dan semoga berhasil.

Happy Blogging!!!