Senin, 09 Juni 2014
Gadget untuk Blogger
Di Google, gadget adalah aplikasi HTML dan JavaScript sederhana yang dapat tertanam di halaman web dan aplikasi lainnya, termasuk Blogger.
Ketika Anda membangun sebuah gadget untuk Blogger, menjadi tersedia untuk jutaan blogger aktif. Hanya mengirimkan gadget Anda kepada kami, dan akan muncul di Blogger.com di mana pengguna dapat dengan mudah mencari, mengkonfigurasi, dan menambahkan gadget ke sidebar blog mereka.
Jadi sekarang Anda tahu Blogger adalah distribusi platform yang besar untuk gadget Anda, apa yang Anda tunggu? Persiapan membangun gadget untuk Blogger sekarang!
Memulai
Panduan Pengembang 1.Gadget
Dalam bentuk yang paling sederhana, gadget untuk Blogger adalah "Google Gadgets". Jika Anda tidak akrab dengan Gadget belum, lihatlah Panduan Developer untuk memulai.
2.Accessing Blog Data dari Gadget
JSON API Blogger memberikan gadget akses ke posting blog dan data komentar, membiarkan mereka memanfaatkan konteks isi sekitarnya.
3.Best Praktek UI untuk Bloger Gadget
Praktik terbaik untuk membuat gadget Anda terlihat baik di set besar blog gaya dan layout.
Gadget 4.Example
Sebuah contoh sederhana gadget menerapkan praktik terbaik.
5.Testing gadget Anda di Blogger
Bagaimana untuk menguji gadget Anda di Blogger
6.Submit gadget Anda ke Blogger
Sekarang gadget Anda adalah bug-bebas dan indah, menceritakan kepada dunia tentang hal itu!
Mengakses Blog Data dari Gadget
Blogger menyediakan read-only akses data blog gadget. API mengambil pos publik dan data komentar untuk hosting blog gadget. Pengembang dapat memilih untuk mengambil data secara langsung di JSON Format Blogger, atau mengambil URL dari feed Atom yang mendasari untuk penggunaan masa depan.
API ini tersedia sebagai fitur google.blog; gadget yang tergantung pada data dapat memerlukan fitur ini. Jika Anda ingin gadget Anda untuk opsional akses data blog tapi masih bisa compliant dengan kontainer Google Friend Connect lain Anda dapat membuat fitur opsional.
Posting Blog
getPostsJson (callback)
Mengambil pakan dari posting terbaru untuk blog saat ini, kembali sebagai JSON ke callback.
getPostsFeedUrl ()
Mengembalikan URL dari feed Atom dari semua posting untuk blog saat ini.
Komentar Blog
getCommentsJson (callback)
Mengambil umpan komentar baru-baru ini (di semua posting di blog), kembali sebagai JSON ke callback (format didokumentasikan di sini).
getCommentsFeedUrl ()
Mengembalikan URL dari feed Atom dari semua komentar baru-baru ini.
The Blog Current Posting
Ketika gadget yang sedang ditampilkan pada halaman posting individu, metode ini mengakses data untuk pos itu. Jika gadget tidak pada halaman posting individu, ini kembali null. Anda dapat menggunakan getCurrentCommentsFeedUrl ()! = Null sebagai tes untuk menunjukkan lingkungan gadget.
getCurrentPostJson (callback)
Mengambil pos saat ini sebagai JSON, atau null jika tidak ada.
getCurrentCommentsFeedUrl ()
Mengembalikan URL dari feed Atom untuk komentar baru pada posting saat ini, atau null jika tidak ada pos saat ini.
getCurrentCommentsJson (callback)
Mengembalikan feed komentar terakhir untuk posting saat ini, kembali sebagai JSON ke callback (format didokumentasikan di sini).
Contoh cuplikan Mengakses data Blog
Potongan ini menghitung jumlah kata untuk berbagai penulis di blog berdasarkan beberapa tulisan, menggunakan masing-masing penulis OpenSocial ID sebagai kunci untuk kemudahan pencarian kemudian.
...
// Calculate wordiness of blog authors:
function onLoadFeed(data) {
if (data.rc != 200) {
w(["Error loading blog data"]);
return;
}
var feed = data.data.feed;
var word_counts = new Array();
var wordiness = new Array();
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var word_count = entry.content.$t.split(/\s/).length;
var osid = getOpenSocialId(entry.author[0]);
var author = entry.author[0].name.$t;
var authorid = getOpenSocialId(entry.author[0]);
var key = [author,authorid];
if (wordiness[key]==undefined)
wordiness[key] = word_count;
else
wordiness[key] += word_count;
}
var disp = new Array();
for (var k in wordiness) {
disp.push(k + " : " + wordiness[k] + " words");
}
w(disp);
}
// Return the OpenSocial ID for an author if available
function getOpenSocialId(person) {
var extendedProperty = person.gd$extendedProperty;
if (extendedProperty && extendedProperty.name == "OpenSocialUserId") {
return extendedProperty.value;
} else {
return null;
}
}
// Write output to a display element on the gadget
function w(arr) {
var str = "<ul>";
for (var e in arr) {
str += "<li>"+arr[e]+"</li>";
}
str += "</ul>";
document.getElementById('display').innerHTML = str;
}
Praktik UI Terbaik untuk Blogger Gadgets
Blogger ingin terlihat baik di web. Ikuti praktik terbaik sehingga gadget Anda memadukan mulus dengan banyak tema blogger menggunakan.
Dukungan A Rentang Lebar
Di Blogger, lebar tersedia untuk gadget Anda tergantung baik pada template blog, dan pada lokasi di mana gadget dimasukkan dalam blog. Sidebar di Blogger.com template berkisar dari 150px - 360px lebar, meskipun beberapa template memiliki sidebars yang mengubah ukuran menjadi lebih luas ketika jendela browser membentang. Selain itu administrator blog dapat menimpa lebar sidebar default.
Selain itu, gadget dapat ditambahkan ke side bar blog, header, atau footer daerah seperti yang ditunjukkan oleh persegi panjang oranye pada gambar di bawah.
Gadget Mengelola Tinggi
Secara default, gadget adalah 200 piksel tinggi. Anda dapat menggunakan <ModulePrefs> atribut height = "nn" untuk menentukan ketinggian statis yang lebih besar atau lebih kecil dari default. Namun kebanyakan gadget akan perlu untuk secara dinamis mengubah tinggi badan mereka. Ikuti panduan ini untuk secara dinamis mengubah ukuran ketinggian gadget Anda.
Mewarisi Style Blog ini
Fitur kulit menyediakan akses ke tombol parameter tema Blogger. Fitur ini dibagi antara Blogger dan Google Friend Connect dan parameter kulit yang sama yang digunakan pada kedua. Di Blogger, parameter secara otomatis diwariskan dari template blog, sehingga gadget dapat dengan mudah berbaur dengan tampilan dan nuansa dari halaman yang berisi. Pemilik blog juga dapat mengganti nilai kulit jika mereka ingin melakukannya.
Untuk mengakses parameter, gadget meminta fitur kulit:
<Optional feature="skins" />
kemudian dapat mengakses parameter melalui API, pengaturan gaya elemen melalui manipulasi DOM:
<$("someElement").style.borderColor = gadgets.skins.getProperty('BORDER_COLOR');
Parameter Kulit Inti
Parameter ini adalah yang paling penting untuk digunakan, dan selalu disediakan oleh wadah. Masing-masing peta ini untuk gaya CSS setara dan dapat ditambahkan ke elemen HTML.
BORDER_COLOR
Warna perbatasan gadget, atau 'transparan' jika tidak ada batas yang diinginkan. Gunakan ini untuk gaya setiap perbatasan di sekitar seluruh gadget; jangan menganggap bahwa perbatasan selalu terlihat (banyak blog tidak bingkai gadget dengan perbatasan).
CONTENT_BG_COLOR
Warna latar belakang yang akan digunakan untuk bagian utama dari gadget. Hal ini biasanya sesuai dengan warna latar belakang sidebar blog, tetapi dalam hal apapun yang dipilih oleh wadah untuk membuat gadget terlihat baik.
CONTENT_LINK_COLOR
Warna link di bagian utama dari gadget; dipilih oleh wadah untuk dapat dibaca melawan CONTENT_BG_COLOR, bekerja dengan baik dengan CONTENT_TEXT_COLOR, dan konsisten dengan link di tempat lain pada halaman.
CONTENT_TEXT_COLOR: Warna teks primer atau paling-ditampilkan dalam bagian utama dari gadget; dipilih oleh wadah untuk dapat dibaca melawan CONTENT_BG_COLOR dan konsisten dengan teks pada sisa halaman.
FONT_FACE
Font untuk digunakan secara default; dipilih untuk menjadi konsisten dengan sisa isi.
Diperpanjang Variabel Kulit
Ini dapat digunakan oleh pemilik halaman untuk lebih men-tweak penampilan pada basis per-gadget. Mereka tidak diperlukan untuk semua gadget, tetapi jika gadget Anda menggunakan konsep-konsep ini, harus memungkinkan variabel untuk mengontrol gaya mereka.
CONTENT_HEADLINE_COLOR
Warna teks untuk judul atau headline yang bertentangan dengan teks tubuh. Defaultnya CONTENT_TEXT_COLOR.
CONTENT_SECONDARY_TEXT_COLOR
Sebuah warna alternatif untuk teks sekunder yang melengkapi CONTENT_TEXT_COLOR. Defaultnya CONTENT_TEXT_COLOR.
CONTENT_SECONDARY_LINK_COLOR
Warna untuk link dalam teks sekunder. Defaultnya CONTENT_LINK_COLOR.
ENDCAP_BG_COLOR
Warna untuk bagian tutup atas dan bawah untuk gadget; defaultnya CONTENT_BG_COLOR.
ENDCAP_LINK_COLOR
Warna untuk link dalam atas / bawah bagian cap; defaultnya CONTENT_LINK_COLOR.
ENDCAP_TEXT_COLOR
Warna untuk teks dalam atas / bawah bagian cap; defaultnya CONTENT_TEXT_COLOR.
ALTERNATE_BG_COLOR
Digunakan untuk bolak baris dalam daftar besar; defaultnya CONTENT_BG_COLOR
CONTENT_VISITED_LINK_COLOR
Warna link yang dikunjungi; defaultnya CONTENT_LINK_COLOR.
Menggunakan Modus Canvas
Untuk membuat kanvas ("mode big") pandangan gadget Anda, di mana gadget mengembang horizontal untuk menjangkau seluruh daerah gadget, Anda harus menetapkan bagian untuk "kanvas" jenis tampilan, sebagai berikut:
<Content type="html" view="canvas" />
Keep it simple
Setiap elemen, gaya, atau grafis yang Anda tambahkan ke gadget Anda, adalah sesuatu yang lain yang mungkin berbenturan dengan gaya blog yang berisi itu. Anda ingin gadget Anda untuk berbaur mulus ke blog sebanyak mungkin. Hindari menambahkan elemen yang tidak dapat dikuliti dengan menggunakan parameter kulit didefinisikan di atas.
Jangan menambahkan judul ke UI gadget Anda. Blogger akan menambahkan judul secara otomatis di luar gadget dalam gaya yang sama seperti judul gadget lainnya di blog.
Yang paling penting, menguji gadget Anda pada sejumlah blog yang berbeda. Memodifikasi background warna blog, warna teks, dan font untuk memastikan gadget Anda menyatu dengan berbagai template.
Gadget Contoh
Berikut ini adalah gadget yang sangat sederhana Friend Connect bertenaga yang mengambil keuntungan Blogger JSON API. Gadget menampilkan komentar posting saat ini dan menyoroti komentar jika itu dibuat oleh teman pemirsa. Ketika gadget tertanam di blog, itu akan cocok dengan gaya blog karena mewarisi beberapa parameter kulit.
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs height="300" title="BlogSocial">
<Require feature="opensocial-0.7"/>
<Require feature="google.blog"/>
<Require feature="skins"/>
<Require feature="views"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript">
var friendProfiles = {};
var blog;
function goToCanvas() {
var view = gadgets.views.getSupportedViews()['canvas'];
gadgets.views.requestNavigateTo(view);
}
/**
* This method is called after your friend data is loaded. It parses the friend data and
* saves the profile ids of your friends, then fetches the blog data.
*/
function onLoadFriends(data) {
if (data.responseItems_.viewerFriends.data_ == null) {
document.getElementById("output").style.textAlign = "center";
if (gadgets.views.getCurrentView().getName() == "canvas") {
document.getElementById("output").innerHTML = 'Sign in using the link above';
} else {
document.getElementById("output").innerHTML =
'<a style="color:' + linkColor + '" href="javascript:void(0);"
onclick="goToCanvas();">Sign in to Friend Connect!</a>';
}
return;
}
var friends = data.responseItems_.viewerFriends.data_.array_;
for (var i = 0; i < friends.length; i++) {
var id = friends[i].fields_.id;
friendProfiles[id] = "true";
}
// Get the feed data
blog = new google.Blog(function() {
// This callback is run as part of the constructor of google.Blog to signify
// that everything was initialized. Once the constructor has
// completed and then call getCommentsJson
blog.getCommentsJson(onLoadFeed);
}, window.name);
}
/**
* This method parses the feed data that was returned by the call to fetch the blog data.
*/
function onLoadFeed(data) {
var list = document.getElementById("output");
if (!data.data) {
list.innerHTML = "An error occured fetching the feed data";
}
data = data.data;
if (!data.feed.entry || data.feed.entry.length == 0) {
list.innerHTML = "No comments on this blog!";
}
for (var i = 0; i < data.feed.entry.length; i++) {
var entry = data.feed.entry[i];
var dt = document.createElement("DT");
dt.style.paddingTop = "10px";
var dd = document.createElement("div");
var href;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
href = entry.link[j].href.replace(/#/, "#comment-");
}
}
var a = document.createElement("A");
a.style.color = linkColor;
a.setAttribute("href", href);
a.appendChild(document.createTextNode(entry.author[0].name.$t + " wrote..."));
dt.appendChild(a);
dd.appendChild(document.createTextNode(entry.content.$t));
list.appendChild(dt);
list.appendChild(dd);
// extendedProperty is Blogger's extension to ATOM 1.0 that contains the
// OpenSocial user id of the author if the author is a public follower
// of the blog. This field will not be present if the author is not a
// public follower of the blog.
var extendedProperty = entry.author[0].gd$extendedProperty;
if (extendedProperty && extendedProperty.name == "OpenSocialUserId") {
if (friendProfiles[extendedProperty.value]) {
dt.style.backgroundColor = "yellow";
dd.style.backgroundColor = "yellow";
}
}
}
}
var linkColor;
var textColor;
var backgroundColor;
function initData() {
textColor = gadgets.skins.getProperty('CONTENT_TEXT_COLOR');
document.getElementById("output").style.color = textColor;
linkColor = gadgets.skins.getProperty('CONTENT_LINK_COLOR');
document.getElementById("canvas-link").style.color = linkColor;
backgroundColor = gadgets.skins.getProperty('CONTENT_BG_COLOR');
document.body.style.backgroundColor = backgroundColor;
// Show canvas mode link if appropriate
if (gadgets.views.getCurrentView().getName() != "canvas") {
document.getElementById("canvas-link-container").style.display = "block";
}
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS', {}), 'viewerFriends');
req.send(onLoadFriends);
}
gadgets.util.registerOnLoadHandler(initData);
</script>
<div style="display:none;float:right;font-size:80%" id="canvas-link-container">
<a id="canvas-link" href="javascript:void(0);" onclick="goToCanvas();">Canvas mode</a>
</div>
<div style="clear:both"></div>
<div id="output" style="overflow:auto; height:270px;font-size:90%"></div>
]]>
</Content>
</Module>
Di Google, gadget adalah aplikasi HTML dan JavaScript sederhana yang dapat tertanam di halaman web dan aplikasi lainnya, termasuk Blogger.
Ketika Anda membangun sebuah gadget untuk Blogger, menjadi tersedia untuk jutaan blogger aktif. Hanya mengirimkan gadget Anda kepada kami, dan akan muncul di Blogger.com di mana pengguna dapat dengan mudah mencari, mengkonfigurasi, dan menambahkan gadget ke sidebar blog mereka.
Jadi sekarang Anda tahu Blogger adalah distribusi platform yang besar untuk gadget Anda, apa yang Anda tunggu? Persiapan membangun gadget untuk Blogger sekarang!
Memulai
Panduan Pengembang 1.Gadget
Dalam bentuk yang paling sederhana, gadget untuk Blogger adalah "Google Gadgets". Jika Anda tidak akrab dengan Gadget belum, lihatlah Panduan Developer untuk memulai.
2.Accessing Blog Data dari Gadget
JSON API Blogger memberikan gadget akses ke posting blog dan data komentar, membiarkan mereka memanfaatkan konteks isi sekitarnya.
3.Best Praktek UI untuk Bloger Gadget
Praktik terbaik untuk membuat gadget Anda terlihat baik di set besar blog gaya dan layout.
Gadget 4.Example
Sebuah contoh sederhana gadget menerapkan praktik terbaik.
5.Testing gadget Anda di Blogger
Bagaimana untuk menguji gadget Anda di Blogger
6.Submit gadget Anda ke Blogger
Sekarang gadget Anda adalah bug-bebas dan indah, menceritakan kepada dunia tentang hal itu!
Mengakses Blog Data dari Gadget
Blogger menyediakan read-only akses data blog gadget. API mengambil pos publik dan data komentar untuk hosting blog gadget. Pengembang dapat memilih untuk mengambil data secara langsung di JSON Format Blogger, atau mengambil URL dari feed Atom yang mendasari untuk penggunaan masa depan.
API ini tersedia sebagai fitur google.blog; gadget yang tergantung pada data dapat memerlukan fitur ini. Jika Anda ingin gadget Anda untuk opsional akses data blog tapi masih bisa compliant dengan kontainer Google Friend Connect lain Anda dapat membuat fitur opsional.
Posting Blog
getPostsJson (callback)
Mengambil pakan dari posting terbaru untuk blog saat ini, kembali sebagai JSON ke callback.
getPostsFeedUrl ()
Mengembalikan URL dari feed Atom dari semua posting untuk blog saat ini.
Komentar Blog
getCommentsJson (callback)
Mengambil umpan komentar baru-baru ini (di semua posting di blog), kembali sebagai JSON ke callback (format didokumentasikan di sini).
getCommentsFeedUrl ()
Mengembalikan URL dari feed Atom dari semua komentar baru-baru ini.
The Blog Current Posting
Ketika gadget yang sedang ditampilkan pada halaman posting individu, metode ini mengakses data untuk pos itu. Jika gadget tidak pada halaman posting individu, ini kembali null. Anda dapat menggunakan getCurrentCommentsFeedUrl ()! = Null sebagai tes untuk menunjukkan lingkungan gadget.
getCurrentPostJson (callback)
Mengambil pos saat ini sebagai JSON, atau null jika tidak ada.
getCurrentCommentsFeedUrl ()
Mengembalikan URL dari feed Atom untuk komentar baru pada posting saat ini, atau null jika tidak ada pos saat ini.
getCurrentCommentsJson (callback)
Mengembalikan feed komentar terakhir untuk posting saat ini, kembali sebagai JSON ke callback (format didokumentasikan di sini).
Contoh cuplikan Mengakses data Blog
Potongan ini menghitung jumlah kata untuk berbagai penulis di blog berdasarkan beberapa tulisan, menggunakan masing-masing penulis OpenSocial ID sebagai kunci untuk kemudahan pencarian kemudian.
...
// Calculate wordiness of blog authors:
function onLoadFeed(data) {
if (data.rc != 200) {
w(["Error loading blog data"]);
return;
}
var feed = data.data.feed;
var word_counts = new Array();
var wordiness = new Array();
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var word_count = entry.content.$t.split(/\s/).length;
var osid = getOpenSocialId(entry.author[0]);
var author = entry.author[0].name.$t;
var authorid = getOpenSocialId(entry.author[0]);
var key = [author,authorid];
if (wordiness[key]==undefined)
wordiness[key] = word_count;
else
wordiness[key] += word_count;
}
var disp = new Array();
for (var k in wordiness) {
disp.push(k + " : " + wordiness[k] + " words");
}
w(disp);
}
// Return the OpenSocial ID for an author if available
function getOpenSocialId(person) {
var extendedProperty = person.gd$extendedProperty;
if (extendedProperty && extendedProperty.name == "OpenSocialUserId") {
return extendedProperty.value;
} else {
return null;
}
}
// Write output to a display element on the gadget
function w(arr) {
var str = "<ul>";
for (var e in arr) {
str += "<li>"+arr[e]+"</li>";
}
str += "</ul>";
document.getElementById('display').innerHTML = str;
}
Praktik UI Terbaik untuk Blogger Gadgets
Blogger ingin terlihat baik di web. Ikuti praktik terbaik sehingga gadget Anda memadukan mulus dengan banyak tema blogger menggunakan.
Dukungan A Rentang Lebar
Di Blogger, lebar tersedia untuk gadget Anda tergantung baik pada template blog, dan pada lokasi di mana gadget dimasukkan dalam blog. Sidebar di Blogger.com template berkisar dari 150px - 360px lebar, meskipun beberapa template memiliki sidebars yang mengubah ukuran menjadi lebih luas ketika jendela browser membentang. Selain itu administrator blog dapat menimpa lebar sidebar default.
Selain itu, gadget dapat ditambahkan ke side bar blog, header, atau footer daerah seperti yang ditunjukkan oleh persegi panjang oranye pada gambar di bawah.
Gadget Mengelola Tinggi
Secara default, gadget adalah 200 piksel tinggi. Anda dapat menggunakan <ModulePrefs> atribut height = "nn" untuk menentukan ketinggian statis yang lebih besar atau lebih kecil dari default. Namun kebanyakan gadget akan perlu untuk secara dinamis mengubah tinggi badan mereka. Ikuti panduan ini untuk secara dinamis mengubah ukuran ketinggian gadget Anda.
Mewarisi Style Blog ini
Fitur kulit menyediakan akses ke tombol parameter tema Blogger. Fitur ini dibagi antara Blogger dan Google Friend Connect dan parameter kulit yang sama yang digunakan pada kedua. Di Blogger, parameter secara otomatis diwariskan dari template blog, sehingga gadget dapat dengan mudah berbaur dengan tampilan dan nuansa dari halaman yang berisi. Pemilik blog juga dapat mengganti nilai kulit jika mereka ingin melakukannya.
Untuk mengakses parameter, gadget meminta fitur kulit:
<Optional feature="skins" />
kemudian dapat mengakses parameter melalui API, pengaturan gaya elemen melalui manipulasi DOM:
<$("someElement").style.borderColor = gadgets.skins.getProperty('BORDER_COLOR');
Parameter Kulit Inti
Parameter ini adalah yang paling penting untuk digunakan, dan selalu disediakan oleh wadah. Masing-masing peta ini untuk gaya CSS setara dan dapat ditambahkan ke elemen HTML.
BORDER_COLOR
Warna perbatasan gadget, atau 'transparan' jika tidak ada batas yang diinginkan. Gunakan ini untuk gaya setiap perbatasan di sekitar seluruh gadget; jangan menganggap bahwa perbatasan selalu terlihat (banyak blog tidak bingkai gadget dengan perbatasan).
CONTENT_BG_COLOR
Warna latar belakang yang akan digunakan untuk bagian utama dari gadget. Hal ini biasanya sesuai dengan warna latar belakang sidebar blog, tetapi dalam hal apapun yang dipilih oleh wadah untuk membuat gadget terlihat baik.
CONTENT_LINK_COLOR
Warna link di bagian utama dari gadget; dipilih oleh wadah untuk dapat dibaca melawan CONTENT_BG_COLOR, bekerja dengan baik dengan CONTENT_TEXT_COLOR, dan konsisten dengan link di tempat lain pada halaman.
CONTENT_TEXT_COLOR: Warna teks primer atau paling-ditampilkan dalam bagian utama dari gadget; dipilih oleh wadah untuk dapat dibaca melawan CONTENT_BG_COLOR dan konsisten dengan teks pada sisa halaman.
FONT_FACE
Font untuk digunakan secara default; dipilih untuk menjadi konsisten dengan sisa isi.
Diperpanjang Variabel Kulit
Ini dapat digunakan oleh pemilik halaman untuk lebih men-tweak penampilan pada basis per-gadget. Mereka tidak diperlukan untuk semua gadget, tetapi jika gadget Anda menggunakan konsep-konsep ini, harus memungkinkan variabel untuk mengontrol gaya mereka.
CONTENT_HEADLINE_COLOR
Warna teks untuk judul atau headline yang bertentangan dengan teks tubuh. Defaultnya CONTENT_TEXT_COLOR.
CONTENT_SECONDARY_TEXT_COLOR
Sebuah warna alternatif untuk teks sekunder yang melengkapi CONTENT_TEXT_COLOR. Defaultnya CONTENT_TEXT_COLOR.
CONTENT_SECONDARY_LINK_COLOR
Warna untuk link dalam teks sekunder. Defaultnya CONTENT_LINK_COLOR.
ENDCAP_BG_COLOR
Warna untuk bagian tutup atas dan bawah untuk gadget; defaultnya CONTENT_BG_COLOR.
ENDCAP_LINK_COLOR
Warna untuk link dalam atas / bawah bagian cap; defaultnya CONTENT_LINK_COLOR.
ENDCAP_TEXT_COLOR
Warna untuk teks dalam atas / bawah bagian cap; defaultnya CONTENT_TEXT_COLOR.
ALTERNATE_BG_COLOR
Digunakan untuk bolak baris dalam daftar besar; defaultnya CONTENT_BG_COLOR
CONTENT_VISITED_LINK_COLOR
Warna link yang dikunjungi; defaultnya CONTENT_LINK_COLOR.
Menggunakan Modus Canvas
Untuk membuat kanvas ("mode big") pandangan gadget Anda, di mana gadget mengembang horizontal untuk menjangkau seluruh daerah gadget, Anda harus menetapkan bagian untuk "kanvas" jenis tampilan, sebagai berikut:
<Content type="html" view="canvas" />
Keep it simple
Setiap elemen, gaya, atau grafis yang Anda tambahkan ke gadget Anda, adalah sesuatu yang lain yang mungkin berbenturan dengan gaya blog yang berisi itu. Anda ingin gadget Anda untuk berbaur mulus ke blog sebanyak mungkin. Hindari menambahkan elemen yang tidak dapat dikuliti dengan menggunakan parameter kulit didefinisikan di atas.
Jangan menambahkan judul ke UI gadget Anda. Blogger akan menambahkan judul secara otomatis di luar gadget dalam gaya yang sama seperti judul gadget lainnya di blog.
Yang paling penting, menguji gadget Anda pada sejumlah blog yang berbeda. Memodifikasi background warna blog, warna teks, dan font untuk memastikan gadget Anda menyatu dengan berbagai template.
Gadget Contoh
Berikut ini adalah gadget yang sangat sederhana Friend Connect bertenaga yang mengambil keuntungan Blogger JSON API. Gadget menampilkan komentar posting saat ini dan menyoroti komentar jika itu dibuat oleh teman pemirsa. Ketika gadget tertanam di blog, itu akan cocok dengan gaya blog karena mewarisi beberapa parameter kulit.
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs height="300" title="BlogSocial">
<Require feature="opensocial-0.7"/>
<Require feature="google.blog"/>
<Require feature="skins"/>
<Require feature="views"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript">
var friendProfiles = {};
var blog;
function goToCanvas() {
var view = gadgets.views.getSupportedViews()['canvas'];
gadgets.views.requestNavigateTo(view);
}
/**
* This method is called after your friend data is loaded. It parses the friend data and
* saves the profile ids of your friends, then fetches the blog data.
*/
function onLoadFriends(data) {
if (data.responseItems_.viewerFriends.data_ == null) {
document.getElementById("output").style.textAlign = "center";
if (gadgets.views.getCurrentView().getName() == "canvas") {
document.getElementById("output").innerHTML = 'Sign in using the link above';
} else {
document.getElementById("output").innerHTML =
'<a style="color:' + linkColor + '" href="javascript:void(0);"
onclick="goToCanvas();">Sign in to Friend Connect!</a>';
}
return;
}
var friends = data.responseItems_.viewerFriends.data_.array_;
for (var i = 0; i < friends.length; i++) {
var id = friends[i].fields_.id;
friendProfiles[id] = "true";
}
// Get the feed data
blog = new google.Blog(function() {
// This callback is run as part of the constructor of google.Blog to signify
// that everything was initialized. Once the constructor has
// completed and then call getCommentsJson
blog.getCommentsJson(onLoadFeed);
}, window.name);
}
/**
* This method parses the feed data that was returned by the call to fetch the blog data.
*/
function onLoadFeed(data) {
var list = document.getElementById("output");
if (!data.data) {
list.innerHTML = "An error occured fetching the feed data";
}
data = data.data;
if (!data.feed.entry || data.feed.entry.length == 0) {
list.innerHTML = "No comments on this blog!";
}
for (var i = 0; i < data.feed.entry.length; i++) {
var entry = data.feed.entry[i];
var dt = document.createElement("DT");
dt.style.paddingTop = "10px";
var dd = document.createElement("div");
var href;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
href = entry.link[j].href.replace(/#/, "#comment-");
}
}
var a = document.createElement("A");
a.style.color = linkColor;
a.setAttribute("href", href);
a.appendChild(document.createTextNode(entry.author[0].name.$t + " wrote..."));
dt.appendChild(a);
dd.appendChild(document.createTextNode(entry.content.$t));
list.appendChild(dt);
list.appendChild(dd);
// extendedProperty is Blogger's extension to ATOM 1.0 that contains the
// OpenSocial user id of the author if the author is a public follower
// of the blog. This field will not be present if the author is not a
// public follower of the blog.
var extendedProperty = entry.author[0].gd$extendedProperty;
if (extendedProperty && extendedProperty.name == "OpenSocialUserId") {
if (friendProfiles[extendedProperty.value]) {
dt.style.backgroundColor = "yellow";
dd.style.backgroundColor = "yellow";
}
}
}
}
var linkColor;
var textColor;
var backgroundColor;
function initData() {
textColor = gadgets.skins.getProperty('CONTENT_TEXT_COLOR');
document.getElementById("output").style.color = textColor;
linkColor = gadgets.skins.getProperty('CONTENT_LINK_COLOR');
document.getElementById("canvas-link").style.color = linkColor;
backgroundColor = gadgets.skins.getProperty('CONTENT_BG_COLOR');
document.body.style.backgroundColor = backgroundColor;
// Show canvas mode link if appropriate
if (gadgets.views.getCurrentView().getName() != "canvas") {
document.getElementById("canvas-link-container").style.display = "block";
}
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS', {}), 'viewerFriends');
req.send(onLoadFriends);
}
gadgets.util.registerOnLoadHandler(initData);
</script>
<div style="display:none;float:right;font-size:80%" id="canvas-link-container">
<a id="canvas-link" href="javascript:void(0);" onclick="goToCanvas();">Canvas mode</a>
</div>
<div style="clear:both"></div>
<div id="output" style="overflow:auto; height:270px;font-size:90%"></div>
]]>
</Content>
</Module>