Cara membuat widget baru bagi orang lain untuk menambah layout mereka (add widged API)

Fitur Layouts Blogger membuka segala macam kemungkinan baru bagi orang untuk menyesuaikan blog mereka dengan cara yang menarik. Dan bahkan lebih baik, Anda dapat merancang widget baru atau modul untuk orang lain untuk menambah blog mereka sendiri.
Berikut konsep umum: Pertama, desain widget Anda. Kemudian, pada website Anda, menciptakan suatu bentuk yang mengirimkan hasilnya ke Blogger. Dalam bentuk bahwa Anda menyertakan isi dari widget yang Anda buat, dan mungkin beberapa informasi opsional lainnya. Ketika seseorang mengklik "submit" tombol pada formulir Anda, mereka akan dibawa ke Blogger di mana mereka dapat menambahkan widget Anda ke tata letak blog mereka (seperti ini).
Mari kita lihat contoh sederhana untuk memulai dengan. Kode berikut ini memberikan pengguna dengan satu tombol, berlabel "Tambah Widget Blogger Buzz." Mengklik yang akan membiarkan mereka menambahkan widget ke tata letak mereka yang link ke blog resmi Blogger Buzz.

<form method="post" action="http://www.blogger.com/add-widget">
<Input type = "hidden" name = "widget.title"
value = "Blogger Buzz" />
<Input type = "hidden" name = "widget.content"
value = "href='http://buzz.blogger.com/'> <a Baca
Berita Terbaru Blogger </ a> "/>
<Input type = "hidden" name = "widget.template"
value = "<data:content/>" />
<Input type = "hidden" name = "infoUrl"
value = "http://buzz.blogger.com" />
<Input type = "hidden" name = "logoUrl"
value = "http://www.blogger.com/img/icon_logo32.gif" />
<input type="submit" name="go" value="Add Blogger Buzz Widget"/>
</ Form>
Anda akan melihat kami menggunakan field input tersembunyi di sini, karena kita tidak ingin pengguna untuk mengubah informasi tersebut; kami ingin semua orang mendapatkan widget yang sama. Anda bisa dengan mudah digunakan jenis lain bidang terbentuk jika, misalnya, Anda menginginkan pengguna untuk memasukkan judul untuk widget sendiri. Ini atribut nama dari kolom formulir yang penting, bukan tipe atribut.
Bagian penting dari formulir adalah sebagai berikut:
- Bentuk action = "http://www.blogger.com/add-widget" - (Diperlukan) bentuk Anda harus mengirimkan informasi ke URL ini dalam rangka agar bisa ditangani dengan baik oleh Blogger. Kami merekomendasikan menggunakan metode POST untuk mengirimkan, tetapi GET juga bekerja, jika Anda tidak memiliki terlalu banyak data dalam widget Anda.widget.title - (Opsional) Judul yang Anda tentukan akan ditampilkan pada tab Page Elements pengguna ketika mereka mengedit tata letak mereka. Hal ini juga akan ditampilkan sebagai bagian dari widget template default. Judul bisa sampai 100 karakter, dan mungkin berisi HTML well-formed.-Widget.content - (Diperlukan) Ini adalah konten yang sebenarnya dari widget Anda, yang akan ditampilkan di blog pengguna. Hal ini dapat mencakup hampir semua kode well-formed yang Anda inginkan, kecuali untuk tag <html> dan <body>. Catatan, bagaimanapun, bahwa Anda akan perlu untuk melarikan diri kode, seperti pada contoh di atas (misalnya <a> menjadi <a>)._Widget.template - (Opsional) ini harus mengikuti pedoman widget tag. Anda juga dapat menggunakan salah satu tag data yang tersedia secara global. Jika template tidak ditentukan, menggunakan <data:title/> <data:content/> sebagai default.infoURL - (Opsional) Anda dapat menggunakan ini untuk menentukan sebuah halaman di situs Anda yang menggambarkan widget Anda atau memberikan informasi lain tentang hal itu. Ini akan digunakan sebagai link "more info" pada halaman pengaturan orang melihat saat menambahkan widget Anda.logoURL - (Opsional) Anda dapat menambahkan URL gambar di sini, dan gambar akan ditampilkan di sebelah link "more info". Ini harus berukuran thumbnail (yaitu kurang dari 100x100 piksel).Sekarang kita punya ide dasar, mari kita lihat contoh yang lebih menarik.

<form method="post" action="http://www.blogger.com/add-widget">
<Input type = "hidden" name = "infoUrl"
value = "http://flickr.com" />
<Input type = "hidden" name = "logoUrl"
value = "http://www.flickr.com/images/flickr_logo_gamma.gif" />
<input type="hidden" name="widget.title" value="Puppies!"/>
<textarea name="widget.content" style="display:none;">
</ A> <div id='flickr_badge_wrapper'>
<Script type = 'text / javascript'
src = 'http://www.flickr.com/badge_code_v2.gne?show_name=1 &
count = 3 & display = terbaru & size = t & layout = x & source = all_tag &
tag = anjing '> </ script>
<span Lebih id='flickr_badge_source_txt'>
<a href='http://www.flickr.com/photos/tags/puppy/'>
Foto Flickr dengan tag anjing </ a> </ span>
<br clear='all' /> </ div> </ Textarea>
<Input type = "hidden" name = "widget.template"
value = "<data:content/> />
<input type="submit" name="go" value="Add Puppy Photos"/>
</ Form>
Dalam kasus ini, kami pergi ke Flickr.com untuk menelusuri foto tagged with "anjing." Lalu kami membuat Flickr Badge dari itu sehingga kami bisa menampilkan aliran foto terbaru dalam koleksi di blog kita. Biasanya, kita hanya akan mengambil kode lencana dan memasukkannya ke dalam HTML / Javascript widget pada blog kita sendiri dan kami akan dilakukan. Namun, di sini kami memutuskan untuk membantu orang lain yang mungkin ingin melakukan hal yang sama. Jadi kita menempatkan kode lencana ke bagian widget.content formulir ini, dan menambahkan logo dan link Flickr. Sekarang, orang lain dapat menggunakan formulir ini untuk dengan mudah menambahkan foto anjing ke blog mereka dengan mengklik tombol.
Dan itu hanya puncak gunung es. Dari sini, Anda dapat merancang apa pun yang Anda suka. Hanya menjadi kreatif, bersenang-senang, dan lihat apa yang dapat Anda datang dengan!
P.S. Jika Anda ingin sebuah tombol kecil yang menyenangkan untuk digunakan pada formulir Anda, cobalah salah satu dari ini:
http://www.blogger.com/img/add/add2blogger_sm_w.gif
http://www.blogger.com/img/add/add2blogger_sm_b.gif
http://www.blogger.com/img/add/add2blogger_lg.gif

26 Sep 2011

Cara membuat widget baru bagi orang lain untuk menambah layout mereka (add widged API)

Entri Populer

Fans Fb