Picasaweb Retired

Well...welll... Picasaweb retired.
Hmmm... cukup pusing juga karena beberapa web saya desain dengan sistem slidesshow embedded.
Dan alhasil harus mengutak ngatik beberapa programnya. Ya tak mengapalah... mengasah kembali ngeblog setelah vakum. Ntar juga kalau sudah diperbaiki webnya, vakum lagi hahahhaha.

Widget to show your posting randomly

Ini dia widget yang ntah darimana saya temukan dan apa namanya tapi nyekrip ini saya pakai untuk menampilkan postingan berita yang ada di blog ini secara acak. Seperti di sidebar kiri atas blog ini

Berikut ini petunjuk cara menggunakannya.
1. Seperti biasa, login dan masuk ke dalam "Blogger Dashboard". Buka "Layout" dan "add a gadget" dimana widget ini akan ditempatkan.
2. Scroll down dan cari "HTML/Java Script". Pilih option itu

Where is the Messenger Yahoo Emoticon

Ergggghhhh... teganya emoticon messenger yahoo hilang dari link yang biasa saya pasang di bookmark. Loh kemana larinya si doi? Rupanya Yahoo messenger sudah lama mengupdate aplikasi messengernya. Dengan kata lain, saya yang masih gagal move on teknologi


Maka untuk kepentingan rakyat blogger yang lebih luas (khususnya untuk kepentingan saya sendiri) maka saya copy kan icon-icon messenger yahoo yang masih bisa saya pakai di blog ini. smoga yang masih membutuhkan silahkan copy linknya disini.

Add widget Google Translate

Yo..yo..yo...
Buat kamu yang situsnya sering di walk blogging (WB) sama negara-negara lain, ya walaupun yang WB orang indonesia juga sih, yang lagi jadi TKI di negeri orang, ada baiknya kamu pasang nih tools google translate yang sudah disediakan sama om google.

Cara pasang widget ini,  gampil abis...

1. Buka link : https://translate.google.com/manager/website/add , tentunya login dulu di gmail ya.

2. Setelah itu kamu akan diminta memasukkan alamat url yang ingin dipasang google translate. Contohnya saya memakai alamat url blog : nhirany.blogspot.com.

How to make threaded comment

Blog ini dikembangkan manual, tambal sulam dari beberapa tutorial yang ada di mbah google. Dulu tampilan komentar di blog ini seperti sebelah kiri gambar dibawah ini (TANPA THREADED). SEtelah browsing kemana-mana, saya ketemu teknik membuat threaded comment di blog dari websitenya kang ismet. Nuhun kang.

HTML code table

Penting buat saya untuk menuliskan sintak-sintak ASCII ini kedalam tulisan web. Berlaku untuk semua browser.

Semoga bermanfaat.

Widget Recent Comments untuk blogger

Menampilkan komen yang ditinggalkan komentator pada posting di blog terkadang perlu dipantau bagi si penulis blog. WHY?
Agar bila komentar itu penting untuk direspon, akan memudahkan si penulis untuk melihatnya karena tampil pada setiap halaman, dalam bentuk widget.
Sayangnya blogger tidak memberikan widget recent comment yang oke.
Berikut ini salah satu widget yang saya temukan dari hasil googling dan dipakai pada blog saya.

Berikut ini petunjuk cara menggunakannya.
1. Seperti biasa, login dan masuk ke dalam "Blogger Dashboard". Buka "Layout" dan "add a gadget" dimana widget ini akan ditempatkan.
2. Scroll down dan cari "HTML/Java Script". Pilih option itu

API v1 twitter retirement

Sejak twitter secara resmi mengumumkan bahwa API v1 per 7 Mei 2013 sudah dipensiunkan alias dimatikan alias diganti dengan versi 1.1 maka tulisan saya tentang memodifikasi-tampilan twitter otomatis tak bisa di pake lagi. Hancur sudah

Sudah dicoba mengikuti discussion tentang versi baru ini di diskusi API v.1.1 dan diutak-atik, ahhh, tetap saja tidak muncul. Singkat cerita akhirnya widget twitter saya kembalikan sesuai versi resmi twitter di  widget twitter.
Silahkan ikuti petunjuk disana , mudah kok.
Ntar klo ada lagi saya kabari ya hehehe

Tulisan arab di Blog ? Gak masyalah

Hai sobbers,
Tulisan kali ini khusus buat kamu yang mengungkapkan sesuatu dalam bahasa arab seperti:

الله
سبحان الله
بِسْمِ اللَّهِ الرَّحْمَنِ

Ternyata ada keyboard arabic yang online loh sob,

1. Buka Tool Arabic Keybord di Arabic keyboard
2. Tulis huruf arab yang kamu kehendaki pada keyboard ini. Tampilannya seperti ini

Memodifikasi tampilan twitter gadget

Hi..hi.. bloggers,
Pengen ubah tampilan twitter kamu seperti dibawah ini?

Cukup tambahkan kode html ini di LAYOUT blog kamu ya.

Mengatur snippet deskripsi dan thumbnail pada posting blog di Facebook

Well, kasus ini saya temukan bukan diblog saya, tapi diblog sahabat yang saya admini.
Semua tentunya pada tau dong, terkadang kita pengen share suatu news atau di status FB pengen nulis alamat link/url. Nah secara default , FB akan menampilkan deskripsi atau narasi pendek tentang link/url tersebut beserta 3 pilihan thumbnail atau foto mini.

Gbr.1 Tampilan awal sebelum diperbaiki 

Ada yang baru di tampilan edit html blogger

Yo..yo..yo, tentunya yang suka ngeblog akan familiar dengan dengan tampilan diatas. Tapi tau kah guys? Ada yang baru dari blogspotnya google. Tampilan "edit HTML" saat di klik akan berubah dramatis seperti gambar dibawah ini. Tak perlu lagi klik "Expand All" Oh..my God, saya sampai loncat melihat tampilan keren ini ...

Menambah emoticon di comment

Kadang buat lucu-lucuan, menambah ekspresi wajah pada comment membuat seru komentar yang dibuat. Kayak di kaskus gitu loh... Setelah surfing di berbagai blog, hati saya jatuh pada blog ini. Ternyata walau diikuti petunjuknya ternyata tidak langsung berhasil. Alhasil, buat newbie blogger kayak saya bisa mengerti kesalahannya dimana. Jadi saya sempurnahkan langkahnya sesuai yang saya alami ya. Smoga bermanfaat. Berikut langkah-langkahnya. 1. Buka dashboard blogger  - Template - Edit HTML - Proceed

New Layout in Blogspot

Menarik sekali ,
Akhirnya blogspot melauching format baru dari cara mendesign blog.
Menu  "Layout" diubah menjadi "Design".

Menurut gw , pola ini cocok untuk para newbie didunia blogger. Tampilan layoutnya bisa kita ubah.
Misalkan kita pilih template yang sudah jadi template disini

Setelah itu, layoutnya bisa diubah sesuai keinginan. Ada banyak menu layout yang bisa divariasikan

Pola ini sedikit berbeda dengan sebelumnya.

Ayo para newbie blogger, tidak perlu menguasai XML. Coba ini aja...  Ngubah tampilan blog mu lebih menarik. !!!

Selamat mencoba ya ....

numbered page navigation for blogger

page navigation adalah panduan buat pembaca untuk memudahkan mereka melihat artikel dalam blog layaknya sebuah buku. Ada halamannya. Berikut ini cara membuat page navigation :
1. Copy paste sintak dibawah ini sebelum </b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Sintak diatas adalah CSS untuk warna page navigation. Anda dapat menggantinya sesuai dengan warna desain blog yang dimiliki.

how to make a marquee effect

Marquee? makhluk apakah itu?
Marquee merupakan salah satu kode HTML yang membuat objek seperti tulisan dapat bergerak dari kiri, dari kanan, dari atas, atau dari bawah. Pada blog ini, saya menampilkannya dalam "blog sahabat" dan "quote".

Sebelum membuat sebuah marquee ada baiknya Anda mengenal atribut yang dimiliki oleh marquee.

a flash animated cloud "blogumulus" for blogger

"Blogumus" adalah widget tag berbasis flash yang didesain oleh Roy Tanck sebagai plug-in di wordpress. Bagaimana untuk tampilan di blogspot? Sebenarnya di blogspot sudah ada plug-in widget yang merupakan bawaan blogspot, tetapi tanpa animasi. Nah, Saya mendapatkan cara menginstalkan blogumulus ini dari Amanda, dan akan saya share untuk Anda. Blogumus ini merupakan kombinasi javascript dan flash. Oleh karena itu, pastikan dikomputermu terinstall java dan flash, agar Anda bisa melihat animasinya.

Cara menginstalnya

1. Anda masuk Layout -> Edit HTML -> Kasih tanda centang pada menu "expand widget template". 2. Temukan sintak <b:section class='sidebar' id='sidebar' preferred='yes'> dan copas sintak berikut ini : <b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/></h2> </b:if> <div class='widget-content'> <script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/> <div id='flashcontent'> Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div> <script type='text/javascript'> var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>  
2. Tekan "Save".

Customizing

Variables yang bisa di setting adalah

• Width = =240px
• Height = 300px;
• Background color = white
• Test color = grey
• Font size ="12"

Jika Anda ingin memperkecil ukuran, mengganti warna skema, dsb, maka edit lah kode dibawah diatas sesuai dengan yang Anda inginkan. var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); Secara default nya, warna text adalah dark grey (#333333). Anda bisa mengubahnya dengan warna lain dengan menggantikan angka 333333 dengan angka hex yang diinginkan. so.addVariable("tcolor", "0x333333"); Mengganti ukuran font, tinggal mengubah angka 12 seperti contoh dibawah ini : so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><expr:href='data:label.url' style='12'><data:label.name/></a></b:loop><tags>");

Selamat mencoba ....

put an image on your title posting.

Perhatikan setiap judul artikel yang saya posting di blog ini. Selalu ada image ukuran mini di sebelah kirinya. Caranya mudah banget.

1. Upload foto yang diinginkan, bisa menggunakan fasilitas google melalui picassa atau ke photobucket.
2. Copas sintak dibawah ini dibawah <b:if cond='data:post.url'><img border='0' src='copasAlamatURLgambarygdiinginkan' style='float:left;'/>
Anda bisa menggantikan float:left dengan float:right bila gambar ingin diletakkan di sebelah kanan.

Mudah kan.... Selamat mencoba

make sharing easy in your blog

Berbagi informasi ke banyak orang sungguh perbuatan menyenangkan buatku. Di blog ini, Anda akan menemukan icon share pada setiap akhir artikel. Caranya mudah saja, Anda bisa melihat sintaknya di situs addthis.com

1. Seperti biasa, Anda masuk Layout -> Edit HTML -> Kasih tanda centang pada menu "expand widget template". Temukan <DIV class='post-footer-line post-footer-line-1'> dan letakkan script addthis dibawah ini : <!-- AddThis Button BOOKMARK BEGIN --> <div align='right'><script type='text/javascript'>var addthis_pub="49fa8ab37ca42af4";</SCRIPT> <a expr:id='data:post.url' expr:name='data:post.title' onclick='return addthis_sendto()' onmouseout='addthis_close()' onmouseover='return addthis_open(this, "", this.id, this.name);'><img alt='Bookmark and Share' height='16' src='http://s7.addthis.com/static/btn/lg-share-en.gif' style='border:0' width='125'/></A><script src='http://s7.addthis.com/js/200/addthis_widget.js' type='text/javascript'/></SCRIPT></DIV><!-- AddThis Button END --> 2. Setelah itu "save".

Nah coba deh balik lagi ke blogmu, dan lihat apa yang terjadi ....

how to write READ MORE in blogspot

Read more sering digunakan agar tampilan tulisan pada home tidak terlalu banyak. Di wordpress sangat mudah menampilkan read more, tetapi untuk blogspot ada beberapa hal yang harus dikerjakan sebelum tulisan read more ini dimunculkan.

Pada blog ini, saya menggantikan read more dengan see more. Anda bisa menggunakan kata lain, seperti "baca selengkapnya .... , lihat lebih jauh ..., see more this article dsb".

Ada dua cara untuk membuat read more di blogger / blogspot baru (tanda Blogger Baru adalah di admin memakai layout / tata letak dan page element / elemen halaman).
Tetapi saya hanya menampilkan cara yang dibawah ini saja, karena cara yang satunya sedikit lebih rumit.
Berikut ini petunjuk cara menggunakannya.
1. Buka template -> Edit HTML -> Kasih tanda tik pada menu "expand widget template"
2. Letakkan kode berikut persis di atasnya kode </head> <style> <b:if cond='data:blog.pageType == "item"'> span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;} </b:if> </style> 3. Kemudian temukan kode di bawah ini <p><data:post.body/></p> dan copas sintak ini. <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> Read More..</a> </b:if> 4. Klik Simpan. Selesai.
Untuk memunculkan tulisan ini pada berita yang di POSTING, maka letakkan dibagian yang tulisan yang ingin dipotong oleh kata READ MORE ... <span class="fullpost"> </span> Contohnya pada posting artikel "how to write READ more in blogspot", saya meletakkan tulisan fullpost dibawah kalimat 1. Buka template -> Edit HTML -> Kasih tanda tik pada menu "expand widget tempate"

CATATAN : Penulisan sintak "fullpost" hanya satu kali saja dalam satu artikel. Sehingga </span> diletakkan pada akhir artikel. Jangan lupa klik SIMPAN PENGATURAN.