Blogger mulai berbenah diri, hal ini ditandai dengan perubahan terhadap gadget label yang lebih fleksibel. Gadget label ini telah diperbarui dengan adanya Label Cloud
Perhatikan gambar di samping.
Jika Anda mungkin memiliki lebih banyak label dan Anda tidak ingin menampilkan semua label Anda di widget? Pada pengaturan gadget label, anda dapat klik button "Selected label/ Label yang dipilih" untuk subset dari label yang akan ditampilkan dalam widget:
Secara default, label akan ditata agar sesuai dengan elemen-elemen lain di bagian yang sama. Semua label akan muncul dalam warna yang sama seperti link lainnya di daerah ini dan ukuran ditentukan oleh popularitas label, pada skala 1-5 (di mana 5 adalah yang paling populer).
Jika Anda ingin gaya label yang lebih profesional, Anda dapat menambahkan CSS untuk template Blogger Anda menggunakan kelas-kelas berikut:
.label-size-1 a /* ini untuk ukuran minimal
.label-size-5 a/* ini untuk ukuran maksimal
Berikut adalah contoh bagaimana cara menerapkannya dalam template anda :
Setelah anda login di blogger, silahkan menuju tata letak kemudian pilih edit HTML. Kemudian tambahkan kode dibawah ini di atas ]]></b:skin>
.label-size-5 a {color: #cd0000;
font-size: 2em;
text-decoration: none;
}
.label-size-5 a:hover {
text-decoration: underline;
}
Silahkan dipraktekkan dan tidak menutup kemungkinan anda bisa memodifikasinya.
Kamis, 27 Agustus 2009
Update Gadget Label Pada Blogger
Kamis, 20 Agustus 2009
Membuat Community Link Feed pada Blogger
Bila anda memperhatikan sidebar di blog ini, maka akan terlihat Community Link Feed. Tentu anda akan bertanya, bagaimana cara membuatnya. Nah, disini saya membuat Community Link Feed dengan memadukan layanan bookmarks Google feedburner (GF), Delicious (D) dan membuat form dengan Google Doc (GD).
Sebelum saya menjabarkan cara membuatnya, terlebih dahulu saya mengucapkan terima kasih kepada kang JALOE yang tidak marah karena kode CSS telah aku intip dan aku kembangkan dengan CS3 ( Cara Sluman Slumun Slamet ) dan mengamati "Piye kok iso, yo?", akhirnya aku beranikan mencoba koordinasi dengan GF, D, GD dan tentunya mengamati sumber kode milik kang Jalooe lewat tool VIEW FIREFOX.
Berikut ini langkah demi langkah cara membuatnya :
Langkah untuk menyiapkan Form "Community Link Feed"
Anda harus login di docs.google.com, setelah login di docs.google.com, anda akan masuk pada halaman dokumen. Kemudian pada toolbar silahkan klik "New" kemudian klik "Form". Anda akan dihadapkan pada lembar kerja untuk mengedit form.
- Ganti Untitled Form dengan judul forum anda, misal : Community Link Feed
- Pada "You can include any text or info that will help people fill this out" isikan keterangan tentang forum anda, yang didalamnya mengandung aturan dan tujuan dibuatnya forum ini.
- Pada "Quetion Title", masukkan pertanyaan misal : NAMA
- Pada "Help Text" apabila tidak penting, kosongkan
- Pada "Question Type" pilih "Text"
- Centang pada kotak "Make This a required question" untuk menandai bahwa kotak dengan judul "Nama" wajib diisi.
- Klik "Done"
- Klik "Save"
Langkah diatas adalah langkah membuat kotak input "nama"
Untuk membuat kotak input berikutnya, klik "Add Item" kemudian pilih "text", silahkan buat kotak input untuk "Judul Artikel" dengan langkah yang sama seperti diatas.
Buatlah kotak input berikutnya, yaitu : "URL Artikel" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Email" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Deskripsi Artikel" dengan langkah klik "Add Item" kemudian pilih "Paragraph Text", langkah selanjutnya sama.
Pada button "Theme:Plan" anda bisa memilih bentuk form yang sesuai selera anda.
Untuk button "See Responses" saya memilih "spreadsheet" kemudian setelah muncul jendela spreadsheet silahkan atur lebar dari kolomnya.
Pada button "More Actions" saya memilih "embed", maka akan muncul kode iframe yang nantinya akan anda pasang pada blog anda. Kodenya seperti ini :
<iframe src="http://spreadsheets.google.com/embeddedform?key=tfmdx4-LJdB9elutRhlAg7Q" width="500" height="578" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
Kode diatas ditambahkan saat anda membuat posting Community Link Feed di Blogger.
Langkah kedua.
Dalam tutorial ini, saya menggunakan Delicious sebagai media bookmarks.
Silahkan login apabila anda sudah bergabung dengan Delicious, bila anda belum terdaftar pada Delicious silahkan klik "Join Nows".
Pada "Enter Details" silahkan isi data sesuai yang ada pada langkah ini, kemudian klik "Register".
Anda akan masuk ke halaman kedua dan ketiga, dalam tutorial ini saya sengaja skip sehingga anda akan dibawa ke halaman, dimana tugas anda adalah meng-copy URL halaman tersebut. contoh urlnya :
http://delicious.com/coretanasal
Pada halaman yang sama coba perhatikan kalimat dibawah Ini :
To save a bookmark, click the button you installed during the registration process. This is labeled "Tag" if you installed the Add-on or "Bookmark this on Delicious" if you added the button to your bookmarks toolbar. If you need to install the bookmarking buttons again, visit Tools.
Silahkan klik .... visit "Tools", kemudian anda akan dibawa ke halaman berikutnya lalu pilihlah "Bookmark this on Delicious" dan silahkan copy kode yang ada diatas tulisan "Blog templates" bagi pengguna blogger.
<img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encode URIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>
Tools ini nantinya dipasang pada sidebar blog anda untuk memudahkan kita memasukkan artikel dari pengunjung anda yang mendaftar dalam Community Link Feed yang telah anda buat.
Langkah ketiga, yaitu memadukan URL delicious yang sudah copy tadi pada Google feedburner.
Silahkan anda login, kemudian masukkan URL delicious anda.
Setelah itu anda akan masuk pada jendela : Welcome! Let us burn a feed for you.
Silahkan anda ubah "feed Title" dan "feed address". Namun pada tutorial ini saya langsung klik NEXT.
Anda akan masuk pada jendela : "Congrats! Your FeedBurner feed is now live. Want to dress it up a little?" saya langsung klik next dan akan dibawa ke jendela "Get More Gusto From Your Feed Traffic Statistics." klik "Next" dan masuk ke halaman "You have successfully updated the feed "Delicious/coretanasal"" kemudian klik "Publicize" dan klik "BuzzBoost"
Pada BuzzBoost silahkan atur : beberapa pilihan yang ada, namun saya menentukan pada :
- Number of items to display = 5
- Open links in: New Window
- Display Item Content, pilih Plain Text dan 20 words kemudian klik "Activate"
Setelah itu silahkan copy script yang ada, seperti dibawah ini.
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Delicious/coretanasal"></a><br/>Powered by FeedBurner</p> </noscript>
Script diatas nantinya akan dipadukan pada kode CSS yang akan kita pasang pada edit HTML template kita.
Sekarang kita akan membuat kode CSS pada template kita. Silahkan login di blogger, kemudian pada "Tata Letak" klik edit HTML, kemudian tambahkan kode berikut ini diatas kode ]]></b:skin> :
/* community link feed
----------------------------------------------- */
div.feedburnerFeedBlock p.date {
color: #666;
}
div.feedburnerFeedBlock ul li div {
display: block;
}
div.feedburnerFeedBlock span.headline a {
font-weight: normal;
font-size: 12px;font-family:Georgia,"Times New Roman",Times,serif;
color: #5689AB;padding-bottom:1em;
}
div.feedburnerFeedBlock ul li {
margin-bottom: .5em;background:none;
padding-left: 0;padding-bottom:1em;
text-indent: 0;border-bottom:1px solid #ccc;
}
div.feedburnerFeedBlock ul {
list-style: none;
margin: 0;
padding: 0;
}
.feedTitle { display:none; }
#creditfooter {display:none}
.submitNews a:link, .submitNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-right:4px;
margin-left:2px;
padding:4px 5px;
text-align:center;
}
.submitNews a:hover {
background:#444444;
color:#FFFFFF;
}
.subcribNews a:link, .subcribNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-left:5px;
padding:4px 10px;
text-align:center;
}
.subcribNews a:hover {
background:#444444;
color:#FFFFFF;
}
Simpan template anda, kemudian masuk elemen halaman : klik "Tambah Gadget" pada Sidebar, pilih "HTML/Javascript" lalu tambahkan kode dibawah ini :
<div class="widget-content">
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript"></script>
<span class="submitNews"><a href="http://www.casal71.co.cc/2009/08/community-feed-link.html">Submit Artikel</a></span><span class="subcribNews"><a href="http://feeds.feedburner.com/Delicious/coretanasal" target="_blank">View subcribe</a></span><br/>
</div>
Lalu bagaimana mengetahui seseorang telah mendaftar ?
Anda harus mewajibkan para pendaftar untuk memberitahukan bahwa mereka telah mendaftarkan URL artikelnya pada kotak komentar. Kemudian anda cek pada docs.google.com dibagian spreadsheets, kemudian masukkan data yang masuk ke delicious dengan jalan mengklik widget delicious yang sudah anda pasang pada bagian sidebar.
Keterangan : Untuk kode bercetak merah merupakan kombinasi link yang kita dapatkan dari Google Feedburner, sedangkan kode bercetak biru adalah url posting Community Link Feed itu sendiri.
Semoga bermanfaat dan sekali lagi terima kasih kepada kang Jaloe yang telah memberi PR buat saya untuk memecahkan sendiri bagaimana cara membuat Community Link Feed ini. Juga saya sangat menghargai arahan singkatnya.
Bila kurang jelas silahkan tanyakan pada kotak komentar yang ada.
Sebelum saya menjabarkan cara membuatnya, terlebih dahulu saya mengucapkan terima kasih kepada kang JALOE yang tidak marah karena kode CSS telah aku intip dan aku kembangkan dengan CS3 ( Cara Sluman Slumun Slamet ) dan mengamati "Piye kok iso, yo?", akhirnya aku beranikan mencoba koordinasi dengan GF, D, GD dan tentunya mengamati sumber kode milik kang Jalooe lewat tool VIEW FIREFOX.
Berikut ini langkah demi langkah cara membuatnya :
Langkah untuk menyiapkan Form "Community Link Feed"
Anda harus login di docs.google.com, setelah login di docs.google.com, anda akan masuk pada halaman dokumen. Kemudian pada toolbar silahkan klik "New" kemudian klik "Form". Anda akan dihadapkan pada lembar kerja untuk mengedit form.
- Ganti Untitled Form dengan judul forum anda, misal : Community Link Feed
- Pada "You can include any text or info that will help people fill this out" isikan keterangan tentang forum anda, yang didalamnya mengandung aturan dan tujuan dibuatnya forum ini.
- Pada "Quetion Title", masukkan pertanyaan misal : NAMA
- Pada "Help Text" apabila tidak penting, kosongkan
- Pada "Question Type" pilih "Text"
- Centang pada kotak "Make This a required question" untuk menandai bahwa kotak dengan judul "Nama" wajib diisi.
- Klik "Done"
- Klik "Save"
Langkah diatas adalah langkah membuat kotak input "nama"
Untuk membuat kotak input berikutnya, klik "Add Item" kemudian pilih "text", silahkan buat kotak input untuk "Judul Artikel" dengan langkah yang sama seperti diatas.
Buatlah kotak input berikutnya, yaitu : "URL Artikel" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Email" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Deskripsi Artikel" dengan langkah klik "Add Item" kemudian pilih "Paragraph Text", langkah selanjutnya sama.
Pada button "Theme:Plan" anda bisa memilih bentuk form yang sesuai selera anda.
Untuk button "See Responses" saya memilih "spreadsheet" kemudian setelah muncul jendela spreadsheet silahkan atur lebar dari kolomnya.
Pada button "More Actions" saya memilih "embed", maka akan muncul kode iframe yang nantinya akan anda pasang pada blog anda. Kodenya seperti ini :
<iframe src="http://spreadsheets.google.com/embeddedform?key=tfmdx4-LJdB9elutRhlAg7Q" width="500" height="578" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
Kode diatas ditambahkan saat anda membuat posting Community Link Feed di Blogger.
Langkah kedua.
Dalam tutorial ini, saya menggunakan Delicious sebagai media bookmarks.
Silahkan login apabila anda sudah bergabung dengan Delicious, bila anda belum terdaftar pada Delicious silahkan klik "Join Nows".
Pada "Enter Details" silahkan isi data sesuai yang ada pada langkah ini, kemudian klik "Register".
Anda akan masuk ke halaman kedua dan ketiga, dalam tutorial ini saya sengaja skip sehingga anda akan dibawa ke halaman, dimana tugas anda adalah meng-copy URL halaman tersebut. contoh urlnya :
http://delicious.com/coretanasal
Pada halaman yang sama coba perhatikan kalimat dibawah Ini :
To save a bookmark, click the button you installed during the registration process. This is labeled "Tag" if you installed the Add-on or "Bookmark this on Delicious" if you added the button to your bookmarks toolbar. If you need to install the bookmarking buttons again, visit Tools.
Silahkan klik .... visit "Tools", kemudian anda akan dibawa ke halaman berikutnya lalu pilihlah "Bookmark this on Delicious" dan silahkan copy kode yang ada diatas tulisan "Blog templates" bagi pengguna blogger.
<img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encode URIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>
Tools ini nantinya dipasang pada sidebar blog anda untuk memudahkan kita memasukkan artikel dari pengunjung anda yang mendaftar dalam Community Link Feed yang telah anda buat.
Langkah ketiga, yaitu memadukan URL delicious yang sudah copy tadi pada Google feedburner.
Silahkan anda login, kemudian masukkan URL delicious anda.
Setelah itu anda akan masuk pada jendela : Welcome! Let us burn a feed for you.
Silahkan anda ubah "feed Title" dan "feed address". Namun pada tutorial ini saya langsung klik NEXT.
Anda akan masuk pada jendela : "Congrats! Your FeedBurner feed is now live. Want to dress it up a little?" saya langsung klik next dan akan dibawa ke jendela "Get More Gusto From Your Feed Traffic Statistics." klik "Next" dan masuk ke halaman "You have successfully updated the feed "Delicious/coretanasal"" kemudian klik "Publicize" dan klik "BuzzBoost"
Pada BuzzBoost silahkan atur : beberapa pilihan yang ada, namun saya menentukan pada :
- Number of items to display = 5
- Open links in: New Window
- Display Item Content, pilih Plain Text dan 20 words kemudian klik "Activate"
Setelah itu silahkan copy script yang ada, seperti dibawah ini.
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Delicious/coretanasal"></a><br/>Powered by FeedBurner</p> </noscript>
Script diatas nantinya akan dipadukan pada kode CSS yang akan kita pasang pada edit HTML template kita.
Sekarang kita akan membuat kode CSS pada template kita. Silahkan login di blogger, kemudian pada "Tata Letak" klik edit HTML, kemudian tambahkan kode berikut ini diatas kode ]]></b:skin> :
/* community link feed
----------------------------------------------- */
div.feedburnerFeedBlock p.date {
color: #666;
}
div.feedburnerFeedBlock ul li div {
display: block;
}
div.feedburnerFeedBlock span.headline a {
font-weight: normal;
font-size: 12px;font-family:Georgia,"Times New Roman",Times,serif;
color: #5689AB;padding-bottom:1em;
}
div.feedburnerFeedBlock ul li {
margin-bottom: .5em;background:none;
padding-left: 0;padding-bottom:1em;
text-indent: 0;border-bottom:1px solid #ccc;
}
div.feedburnerFeedBlock ul {
list-style: none;
margin: 0;
padding: 0;
}
.feedTitle { display:none; }
#creditfooter {display:none}
.submitNews a:link, .submitNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-right:4px;
margin-left:2px;
padding:4px 5px;
text-align:center;
}
.submitNews a:hover {
background:#444444;
color:#FFFFFF;
}
.subcribNews a:link, .subcribNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-left:5px;
padding:4px 10px;
text-align:center;
}
.subcribNews a:hover {
background:#444444;
color:#FFFFFF;
}
Simpan template anda, kemudian masuk elemen halaman : klik "Tambah Gadget" pada Sidebar, pilih "HTML/Javascript" lalu tambahkan kode dibawah ini :
<div class="widget-content">
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript"></script>
<span class="submitNews"><a href="http://www.casal71.co.cc/2009/08/community-feed-link.html">Submit Artikel</a></span><span class="subcribNews"><a href="http://feeds.feedburner.com/Delicious/coretanasal" target="_blank">View subcribe</a></span><br/>
</div>
Lalu bagaimana mengetahui seseorang telah mendaftar ?
Anda harus mewajibkan para pendaftar untuk memberitahukan bahwa mereka telah mendaftarkan URL artikelnya pada kotak komentar. Kemudian anda cek pada docs.google.com dibagian spreadsheets, kemudian masukkan data yang masuk ke delicious dengan jalan mengklik widget delicious yang sudah anda pasang pada bagian sidebar.
Keterangan : Untuk kode bercetak merah merupakan kombinasi link yang kita dapatkan dari Google Feedburner, sedangkan kode bercetak biru adalah url posting Community Link Feed itu sendiri.
Semoga bermanfaat dan sekali lagi terima kasih kepada kang Jaloe yang telah memberi PR buat saya untuk memecahkan sendiri bagaimana cara membuat Community Link Feed ini. Juga saya sangat menghargai arahan singkatnya.
Bila kurang jelas silahkan tanyakan pada kotak komentar yang ada.
Community Link Feed
Silahkan daftarkan artikel anda pada Coretan Asal dengan mengisi form Community Link Feed yang ada dibawah ini.
Sengaja saya hadirkan Community Link Feed untuk semakin meningkatkan rasa kekeluargaan di dalam komunitas blogger.
Url artikel yang masuk akan di survey dan akan dimuat dalam Community Link Feed yang ada di blog Coretan Asal.
Catatan: Apabila sudah mendaftarkan artikel anda, mohon meninggalkan pesan di kotak komentar bahwa anda telah mendaftarkan artikel anda. Terima Kasih.
Sengaja saya hadirkan Community Link Feed untuk semakin meningkatkan rasa kekeluargaan di dalam komunitas blogger.
Url artikel yang masuk akan di survey dan akan dimuat dalam Community Link Feed yang ada di blog Coretan Asal.
Catatan: Apabila sudah mendaftarkan artikel anda, mohon meninggalkan pesan di kotak komentar bahwa anda telah mendaftarkan artikel anda. Terima Kasih.
Senin, 17 Agustus 2009
Dirgahayu Indonesiaku
“Dengan Semangat Proklamasi 17 Agustus 1945, Kita Tingkatkan Kedewasaan Kehidupan Berpolitik dan Berdemokrasi serta Percepatan Pemulihan Ekonomi Nasional Menuju Indonesia yang Bersatu, Aman, Adil, Demokratis dan Sejahtera.”
Tidak terasa Indonesia, negara yang kita cintai ini genap 64 tahun menikmati suasana merdeka. Setelah 350 tahun Indonesia berkubang dalam situasi kolonialisme , kini sudah saatnya bangkit dan mulai berbenah diri guna menyongsong masa depan yang lebih cerah.
Membaca dan memetik hikmah dari kalimat dalam tanda kutip diatas, semestinya sebagai generasi penerus bangsa wajib segera merespon dengan bertindak yang positif. Bertindak berdasarkan hati nurani yang bertanggung jawab dan semangat untuk membangun negeri yang kita cintai dan kita banggakan.
Sebagai generasi penerima warisan para patriot pembela bangsa yang gugur demi Indonesia, semestinya kita segera bangkit dari buaian mimpi dan sadar untuk tidak menerima janji muluk dari pihak-pihak yang tidak ingin Indonesia maju.
Ingat !!! Peristiwa yang ada pada 17 Agustus 1945 tidak diperoleh dengan hanya 'BUBUK MANIS" tapi diperoleh dengan aliran hingga tinggal setetes darah dari para patriot bangsa, bahkan mereka tidak meneteskan air mata saat meregang nyawa demi Indonesia, tapi dengan teriakan penuh heroik "MERDEKA...... "
Jadi kalau kalian para generasi muda Indonesia ingin mati untuk Indonesia, maka matilah dengan jalan yang dilakukan oleh patriot bangsa ini. Bukan mati sia-sia yang dilakukan oleh mereka yang mengaku generasi Indonesia tapi hanyalah pecundang yang bersembunyi dibalik kata JIHAD.
Mari kita isi KEMERDEKAAN ini dengan penuh tanggung jawab.
Senin, 03 Agustus 2009
Petunjuk Install Mode H-Blogger Themes
Ditutupnya File Hosting Gratisan, membuat aku kelabakan mengingat beberapa template hasil meodifikasi minima menggunakan file Javascript yang aku simpan di Yahoo!Geocity. Untunglah aku ndak begitu lama resah, karena saat aku googling menemukan template Hybrid News yang menerapkan file Javascript pada kode templatenya.
Seperti kebiasaan sebelumnya, aku selalu tidak puas hanya sekedar menggunakan template orang kalau ndak memodifikasinya. Meskipun hasilnya tidak selalu aku gunakan untuk blogku. Kali ini saya mencoba memadukan dua template yang sangat populer baik di kalangan Blogger maupun Wordpress. Apalagi ada permintaan khusus dari rekan Herry Settings. Sebagai template utama aku menggunakan konsep Hybrid News Blogger Template dari Free Blogger Template, sedangkan modifikasinya aku menggunakan konsep pada Revolution City dari Bloganol.
Dari dua konsep template yang berbeda ini, lahirlah MODE H-BLOGGER THEME.
Mari kita belajar bersama bagaimana cara mengedit template yang telah aku modifikasi ini, berhati-hati dan gunakan CTRL + F untuk menemukan kode yang tepat untuk pencarian.
Buka Edit HTML, dan mari kita mulai .....
1. Kita mulai dari TOP Navigations, cari kode dibawah ini :
Keterangan :
- Ganti tanda # dengan masing-masing URL dari tiap menu navigasi anda.
- Ganti yang bercetak merah dengan TEXT anda.
- Kode bercetak tebal adalah menu tambahan bila anda ingin menambahkan menu yang lain
2. Untuk Navigasi yang dibawah header.
Cari kode dibawah ini :
Silahkan ubah seperti langkah pada point 1.
3. Slide Feature [Automatic update for post summary and image thumbnail]
SLIDE fitur ini bisa dikatakan sebagai recent post. menggunakan script Atom Feed dan Dinamis model. Disini, kita menggunakan 2 ATOM feed untuk dua halaman dari SLIDE SHOW. Jadi, anda dapat menampilkan dua posting terbaru anda. Namun, tidak menutup kemungkinan bisa lebih.
Langkah pengeditan :
Cari kode berikut ini :
Tugas anda hanya mengganti "namablog.blogspot.com"
Pada Script Pertama :
Pada Script Kedua :
Coba perhatikan susunannya ( aku singkat saja, terlalu panjang masalahnya ) :
pada kode :
home_page = "http://namablog.blogspot.com/feeds/posts/default";
dapat anda ubah apabila anda ingin menampilkan posting sesuai label, dengan kode berikut ini :
http://namablog.blogspot.com/feeds/posts/default/-/labelyangdikehendaki
LALU BAGAIMANA JIKA ANDA INGIN MENAMBAHKAN HALAMAN LAIN DALAM SLIDE FEATURE...?
Anda hanya menyalin kode dari <div class='feature'> hingga </div>, kemudian merubah nilai STARTPOST dan NUMPOSTS pada kode tersebut.
Dibawah ini contoh penerapannya :
4. Jika posting terbaru anda tidak menggunakan gambar, maka secara default akan muncul gambar yang telah disiapkan pada template ini. Bila anda ingin menggantinya dengan kreasi anda, silahkan cari kode URL berikut : http://i584.photobucket.com/albums/ss289/hemingways-studio/Have_Images_TEXT.png.
5. Menambahkan file feature pada masing-masing kolom CATEGORY.
Untuk dapat menampilkan penggalan posting pada Category, langkah yang harus anda kerjakan adalah sebagai berikut :
1. Untuk menambahkan gambar :
- Pada posting anda, saat anda mengupload gambar ke blogger, sebaiknya pada PILIH TATA LETAK centang Button KIRI, setelah gambar berhasil di upload masih pada posisi ruang posting, pilih edit HTML maka akan muncul kode seperti ini (saya ambil contoh sesuai yang ada di MODE H-BLOGGER THEME ):
COPAS kode tersebut dalam NOTEPAD. Kemudian buat modifikasi dari kode diatas seperti ini :
keterangan :
- http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html, ini adalah URL posting anda.
- <img id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" style="margin: 0pt 10px 0px 0pt; float: left; cursor: pointer; width: 70px; height: 70px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s320/204px-Dian_sastro_scroundbites_2007.jpg"/></a>
kode diatas adalah modifikasi dari kode gambar yg ada pada posting yang kita COPAS tadi.
(ukuran gambar 70x70 px)
- <a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html">Dian Sastro</a><br/>
Dian Sastro is an Indonesian model and actress .....
Kode diatas adalah URL posting kita yang dipasangkan pada judul posting (contoh:Dian Sastro), <br/> adalah kode agar penggalan kalimat dari posting berada dibawah judul, kemudian "Dian Sastro is an Indonesian model and actress ....." merupakan penggalan posting kita. Ingat jangan terlalu panjang, bila terlalu panjang tampilan akan berantakan.
Setelah itu, pada TATA LETAK- Eleman Halaman, anda akan menjumpai beberapa CATEGORY lengkap dengan kotak HTML/Javascript. Silahkan masukkan kode yang sudah dimodifikasi. Ingat, penambahan harus seimbang, bila CATEGORY#1 anda menambahkan 2 atau 3 kode HTML, maka pada CATEGORY#2 jumlah yang ditambahkan harus sama, Jika anda menambahkan dari masing-masing Category tidak sama, maka tampilan akan berantakan. Ini berlaku untuk yang lain.
Untuk menambahkan LINK URL pada tulisan "Read More Posts From This Category", silahkan anda Klik pada LABEL di sidebar, kemudian Copi URLnya. Lalu, masuk ke TATA LETAK - Edit HTML, kemudian cari kode seperti ini ....
Pada kode ini : <b><a href='#'>Read More Posts From This Category</a></b>
ganti # dengan URL dari Label/ kategori posting kita, sehingga akan menjadi seperti dibawah ini :
<b><a href='http://buatsobatku.blogspot.com/search/label/opini'>Read More Posts
From This Category</a></b>
Ohya, <h3>Opini</h3> silahkan ubah "Opini" sesuai dengan label posting anda.
ANDA BISA MENAMBAHKAN BEBERAPA CATEGORY, misal Category#5,6 dan seterusnya dengan cara COPAS kode
ganti : Category, HTML-nya, misal HTML101 dst yang penting belum ada di kode HTML tersebut, dan yang lain sesuai langkah diatas, kemudian tambahkan dibawah :
6. Pada DEMO MODE H-BLOGGER THEME di Sidebar terdapat recent post berdasarkan label, cara pasangnya adalah masuk pada tata letak, kemudian pada elemen halaman klik tambah gadget dan pilih HTML/Javascript. Kemudian tambahkan kode berikut ini :
Ganti http://namabloganda.blogspot.com dengan url blog anda.
NB.
- Sebaiknya terapkan pada blog baru dulu.
- Silahkan dicoba, jangan takut salah
Semoga dengan adanya tutorial ini, rekan-rekan blogger bisa menikmati template MODE H-BLOGGER THEMES.
Ingat, jangan takut untuk berexperimen, karena suatu keberhasilan tidak akan tercapai bila kita tidak berusaha untuk mencobanya.....
Anda bisa download template MODE H-BLOGGER THEME di bCOMStudio.
DEMO MODE H-BLOGGER THEMES
Seperti kebiasaan sebelumnya, aku selalu tidak puas hanya sekedar menggunakan template orang kalau ndak memodifikasinya. Meskipun hasilnya tidak selalu aku gunakan untuk blogku. Kali ini saya mencoba memadukan dua template yang sangat populer baik di kalangan Blogger maupun Wordpress. Apalagi ada permintaan khusus dari rekan Herry Settings. Sebagai template utama aku menggunakan konsep Hybrid News Blogger Template dari Free Blogger Template, sedangkan modifikasinya aku menggunakan konsep pada Revolution City dari Bloganol.
Dari dua konsep template yang berbeda ini, lahirlah MODE H-BLOGGER THEME.
Mari kita belajar bersama bagaimana cara mengedit template yang telah aku modifikasi ini, berhati-hati dan gunakan CTRL + F untuk menemukan kode yang tepat untuk pencarian.
Buka Edit HTML, dan mari kita mulai .....
1. Kita mulai dari TOP Navigations, cari kode dibawah ini :
<ul class='menu sf-menu'>
<li class='current_page_item'><a href='/'>Home</a></li>
<li class='page_item'><a href='#' title='About'>About</a></li>
<li class='page_item'><a href='#' title='Archives'>Archives</a></li>
<li class='page_item'><a href='#' title='Blog'>Blog</a></li>
<li class='page_item'><a href='#' title='Elements'>Elements</a></li>
<li class='page_item'><a href='#' title='New menu'>New Menu</a></li>
</ul>
Keterangan :
- Ganti tanda # dengan masing-masing URL dari tiap menu navigasi anda.
- Ganti yang bercetak merah dengan TEXT anda.
- Kode bercetak tebal adalah menu tambahan bila anda ingin menambahkan menu yang lain
2. Untuk Navigasi yang dibawah header.
Cari kode dibawah ini :
<ul class='menu sf-menu'>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
</ul>
Silahkan ubah seperti langkah pada point 1.
3. Slide Feature [Automatic update for post summary and image thumbnail]
SLIDE fitur ini bisa dikatakan sebagai recent post. menggunakan script Atom Feed dan Dinamis model. Disini, kita menggunakan 2 ATOM feed untuk dua halaman dari SLIDE SHOW. Jadi, anda dapat menampilkan dua posting terbaru anda. Namun, tidak menutup kemungkinan bisa lebih.
Langkah pengeditan :
Cari kode berikut ini :
Tugas anda hanya mengganti "namablog.blogspot.com"
Pada Script Pertama :
startposts = 0;
numposts = 1;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
Pada Script Kedua :
startposts = 1;
numposts = 2;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
Coba perhatikan susunannya ( aku singkat saja, terlalu panjang masalahnya ) :
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 0;
numposts = 1;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 1;
numposts = 2;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
pada kode :
home_page = "http://namablog.blogspot.com/feeds/posts/default";
dapat anda ubah apabila anda ingin menampilkan posting sesuai label, dengan kode berikut ini :
http://namablog.blogspot.com/feeds/posts/default/-/labelyangdikehendaki
LALU BAGAIMANA JIKA ANDA INGIN MENAMBAHKAN HALAMAN LAIN DALAM SLIDE FEATURE...?
Anda hanya menyalin kode dari <div class='feature'> hingga </div>, kemudian merubah nilai STARTPOST dan NUMPOSTS pada kode tersebut.
Dibawah ini contoh penerapannya :
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 0;
numposts = 1;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 1;
numposts = 2;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 2;
numposts = 3;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
4. Jika posting terbaru anda tidak menggunakan gambar, maka secara default akan muncul gambar yang telah disiapkan pada template ini. Bila anda ingin menggantinya dengan kreasi anda, silahkan cari kode URL berikut : http://i584.photobucket.com/albums/ss289/hemingways-studio/Have_Images_TEXT.png.
5. Menambahkan file feature pada masing-masing kolom CATEGORY.
Untuk dapat menampilkan penggalan posting pada Category, langkah yang harus anda kerjakan adalah sebagai berikut :
1. Untuk menambahkan gambar :
- Pada posting anda, saat anda mengupload gambar ke blogger, sebaiknya pada PILIH TATA LETAK centang Button KIRI, setelah gambar berhasil di upload masih pada posisi ruang posting, pilih edit HTML maka akan muncul kode seperti ini (saya ambil contoh sesuai yang ada di MODE H-BLOGGER THEME ):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s1600-h/204px-Dian_sastro_scroundbites_2007.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 143px; height: 232px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s320/204px-Dian_sastro_scroundbites_2007.jpg" alt="" id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" /></a>
COPAS kode tersebut dalam NOTEPAD. Kemudian buat modifikasi dari kode diatas seperti ini :
<a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html"><img id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" style="margin: 0pt 10px 0px 0pt; float: left; cursor: pointer; width: 70px; height: 70px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s320/204px-Dian_sastro_scroundbites_2007.jpg"/></a> <a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html">Dian Sastro</a><br/>
Dian Sastro is an Indonesian model and actress .....
keterangan :
- http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html, ini adalah URL posting anda.
- <img id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" style="margin: 0pt 10px 0px 0pt; float: left; cursor: pointer; width: 70px; height: 70px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s320/204px-Dian_sastro_scroundbites_2007.jpg"/></a>
kode diatas adalah modifikasi dari kode gambar yg ada pada posting yang kita COPAS tadi.
(ukuran gambar 70x70 px)
- <a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html">Dian Sastro</a><br/>
Dian Sastro is an Indonesian model and actress .....
Kode diatas adalah URL posting kita yang dipasangkan pada judul posting (contoh:Dian Sastro), <br/> adalah kode agar penggalan kalimat dari posting berada dibawah judul, kemudian "Dian Sastro is an Indonesian model and actress ....." merupakan penggalan posting kita. Ingat jangan terlalu panjang, bila terlalu panjang tampilan akan berantakan.
Setelah itu, pada TATA LETAK- Eleman Halaman, anda akan menjumpai beberapa CATEGORY lengkap dengan kotak HTML/Javascript. Silahkan masukkan kode yang sudah dimodifikasi. Ingat, penambahan harus seimbang, bila CATEGORY#1 anda menambahkan 2 atau 3 kode HTML, maka pada CATEGORY#2 jumlah yang ditambahkan harus sama, Jika anda menambahkan dari masing-masing Category tidak sama, maka tampilan akan berantakan. Ini berlaku untuk yang lain.
Untuk menambahkan LINK URL pada tulisan "Read More Posts From This Category", silahkan anda Klik pada LABEL di sidebar, kemudian Copi URLnya. Lalu, masuk ke TATA LETAK - Edit HTML, kemudian cari kode seperti ini ....
<div id='homepageleft'>
<div class='model'>
<h3>Opini</h3>
<b:section class='homepageleftwidget' id='homepageleftwidget' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#'>Read More Posts From This Category</a></b>
</div></div>
Pada kode ini : <b><a href='#'>Read More Posts From This Category</a></b>
ganti # dengan URL dari Label/ kategori posting kita, sehingga akan menjadi seperti dibawah ini :
<b><a href='http://buatsobatku.blogspot.com/search/label/opini'>Read More Posts
From This Category</a></b>
Ohya, <h3>Opini</h3> silahkan ubah "Opini" sesuai dengan label posting anda.
ANDA BISA MENAMBAHKAN BEBERAPA CATEGORY, misal Category#5,6 dan seterusnya dengan cara COPAS kode
<div id='homepageleft'>
<div class='model'>
<h3>Category #3</h3>
<b:section class='homepagebotleftwidget' id='homepagebotleftwidget' preferred='yes'>
<b:widget id='HTML85' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#'>Read More Posts From This Category</a></b>
</div></div>
<div id='homepageright'>
<div class='model'>
<h3>Category #4</h3>
<b:section class='homepagebotrightwidget' id='homepagebotrightwidget' preferred='yes'>
<b:widget id='HTML97' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#' rel='bookmark'>Read More Posts From This Category</a></b>
</div>
</div>
ganti : Category, HTML-nya, misal HTML101 dst yang penting belum ada di kode HTML tersebut, dan yang lain sesuai langkah diatas, kemudian tambahkan dibawah :
<div id='homepageright'>
<div class='featured'>
<h3>Category #4</h3>
<b:section class='homepagebotrightwidget' id='homepagebotrightwidget' preferred='yes'>
<b:widget id='HTML97' locked='false' title='' type='HTML'/>
<b:widget id='HTML96' locked='false' title='' type='HTML'/>
<b:widget id='HTML94' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#' rel='bookmark'>Read More Posts From This Category</a></b>
</div>
</div>
</div>
..... tambahkan di sini......
</b:if>
</div>
6. Pada DEMO MODE H-BLOGGER THEME di Sidebar terdapat recent post berdasarkan label, cara pasangnya adalah masuk pada tata letak, kemudian pada elemen halaman klik tambah gadget dan pilih HTML/Javascript. Kemudian tambahkan kode berikut ini :
Label: <span id="pbl_labels"></span>
<div id="pbl_posts"> Recent Posts </div>
<script type="text/javascript">
var jumlah_maksimum_post = 5;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>
<script src="http://copycat91.googlecode.com/svn/trunk/recentpostsbylabel.js">
</script>
<script src="http://namabloganda.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script>
<!-- Tolong hargai dengan tidak menghapus/mengubah link di bawah -->
<div style="text-align:right; font-size:0.75em">
Widget by:
<a href="http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html">
Info Blog
</a>
</div>
Ganti http://namabloganda.blogspot.com dengan url blog anda.
NB.
- Sebaiknya terapkan pada blog baru dulu.
- Silahkan dicoba, jangan takut salah
Semoga dengan adanya tutorial ini, rekan-rekan blogger bisa menikmati template MODE H-BLOGGER THEMES.
Ingat, jangan takut untuk berexperimen, karena suatu keberhasilan tidak akan tercapai bila kita tidak berusaha untuk mencobanya.....
Anda bisa download template MODE H-BLOGGER THEME di bCOMStudio.
DEMO MODE H-BLOGGER THEMES
Langganan:
Postingan (Atom)
