Pages

Ads 468x60px

Featured Posts

Jumat, 02 November 2012

Cara Membuat Label Berputar di Blog | Label Could Berpu

Cara Membuat Label Berputar Bulat - Label Could Berputar - dalam postingan ini Zams Site akan share tutorial Cara Membuat Label Could Berputar, apa yang di maksut label berputar? anda tahu Bumi (ya tau lah), bentuk dari Label Berputar ini menyerupai skema Bumi yang berprinsip Berputar, dan saat kita mengarahkan mouse ke Label Berputar, Label itu akan memfokuskan Labe yang kita inginkan, dan cara untuk mengganti Label Berputar adalah dengan cara menggeser Mouse Di Label Berputar, sungguh menarik bukan Cara Membuat Label Could Berputar? bagi yang ingin memasang Label Berputar di blog, silahkan ikuti Tutorial Cara Membuat Label Berputar Di Blog.Sumber Zams Site

1. Pertama-tama Login dulu di Blogger.com 

2. Pilih TAB " Rancangan / Edit Tata Letak " lalu pindah ke TAB " Edit HTML "

3. Centeng " Expand Widget " nya dulu.

4. Cari Kode Seperti ini


<b:section class='sidebar' id='sidebar' preferred='yes'>

5.Copy kode di bawah ini, dan letakan Code di bawah ini tepat setelah kode di atas.

<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://vikrymadz.blogspot.com/'>vikrymadz</a></div>
    <script type='text/javascript'>
    var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
    // uncomment next line to enable transparency
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
    so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
    so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
    so.addVariable(&quot;distr&quot;, &quot;true&quot;);
    so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
    so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
    so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
    so.write(&quot;flashcontent&quot;);
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

6. Simpan dan lihat hasilnya, kalau Copy/Paste artikel ini sertakan Sumber Zamrudblog.blogspot.com, tidak memberi sumber tidak menghargai kerja keras kami!!
7. Terimakasih telah membaca artikel Cara Membuat Label Berputer Di Blog

Rabu, 31 Oktober 2012

Cara Membuat/Memasang Favicon & Animated Favicon di Blog

favicon
Favicon adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan wordpress dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.
Gambar yang digunakan sebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya (dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg, tif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon  anda dapat menggunakan file gambar berformat gif.

Berikut langkah-langkah pembuatannya:
1. Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon gratis. Gunakan keyword "free favicon/animated favicon image" di Google.
2. Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.
3. Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak mensupport upload gambar berformat ico. Lihat list situs terbaik untuk hosting gambar ico dan gif  ini untuk mengupload favicon anda.
4. Copy terlebih dahulu direct link dari gambar yang telah diupload.
5. Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head> di template HTML anda. Saya sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser namun tidak mengganggu meta.
Untuk favicon file ico:
<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Untuk animated favicon file gif:
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:
<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
6. Preview dan save.
7. Done!

Update:
Blogger kini telah memiliki fitur Blogger Custom Favicon yg dapat menambahkan Favicon secara otomatis dengan cara yg lebih mudah. Silahkan coba.

9 Situs Upload dan Hosting Gambar ICO (Favicon) Gratis Terbaik

favicon image hosting
Seperti kita ketahui Blogger/blogspot tidak mengijinkan penggunanya untuk mengupload dan menghosting gambar favicon berformat ico. Jadi bagi anda yang ingin memasang favicon harus agak ribet diperlukan hosting eksternal untuk memuat file ico tersebut. Bagi anda yang ingin mengetahui langkah-langkah memasang favicon silakan kunjungi "cara membuat/memasang favicon dan animated favicon" terlebih dahulu

Namun, sayangnya tidak semua situs hosting gambar juga mensupport format gambar .ico. Memang gampang-gampang susah sih mencarinya. But don't worry, akhirnya saya dapat mengumpulkan dan mendapatkan beberapa situs yang dapat mensupport ico maupun gif (untuk animated favicon). Semuanya telah dites dan memiliki kualitas yang baik alias servernya tidak lemot dan file cepat terdownload oleh browser.

Berikut listnya: 

1. Picturestack.Support: jpg, jpeg, tiff, png, gif, bmp, tiff, ico. Max: 4092 Kb.

2. HostAnyImage. Support: jpg, jpeg, gif, ico, bmp, png. Max: 10420 Kb.

3. HostAnyPic. Support: jpg, jpeg, bmp, gif, tiff, tif, png, ico, psd, swf. Max: 10420 Kb.

4. Qfqy. Support: jpg, jpeg, gif, png, ico. Max: 2048 Kb.

5. MyImageHost. Support: jpeg, jpg, gif, bmp, ico, png. Max: 25600 Kb.

6. ImageHosting.gr. Support: jpeg, jpg, bmp, png, gif, ico, tif, tiff, psd, swf. Max: 2355 Kb.

7. MyUpload.org. Support: jpg, jpeg, gif, png, ico. Max: 10240 Kb.

8. Image.Computersteroids. Support: jpeg, jpg, bmp, png, gif, ico, tif, tiff, psd, swf, psp, art. Max: 10240 Kb.

9.  FreeImageHosting.in. Support: jpeg, jpg, gif, png, ico. Max: 2048.

Give it a try then, mates.

Update:
Blogger kini telah memiliki fitur Blogger Custom Favicon yg dapat menambahkan Favicon secara otomatis dengan cara yg lebih mudah. Silahkan coba

Fitur Baru: Blogger Custom Favicon dan Cara Membuat-nya


Blogger baru saja memperkenalkan fitur baru "Blogger Custom Favicon" yang akhirnya memberi kemudahan baru bagi anda pengguna Blogger/Blogspot untuk membuat favicon pribadi blog. Kita tidak perlu repot-repot lagi mengupload file .ico ke hosting lain dan memasang script-nya melalui edit HTML. Cukup siapkan file ico sebagai favicon yang telah dibuat dan dipersiapkan untuk favicon blog blogger anda, dan upload melalui fitur "edit favicon".

Cara mengakses dan membuat "Blogger Custom Favicon":
Note:
Jika belum memiliki gambar favicon berformat .ico, convert terlebih dahulu file gambar (jpg/png) secara online dengan menggunakan ICO converter. Download file ico yang telah terbuat di komputer.
1. (update: fitur ini sekarang sudah dapat diakses langsung melalui dashboard Blogger)
2. Klik Design/Rancangan.
3. Di halaman page elements, di bagian atas editor akan ditemui fitur Edit favicon seperti gambar berikut, dengan default favicon bergambar logo Blogger di sebelah kiri:
4. Klik "edit" di sebelah kanan tulisan "Favicon".
5. Kemudian akan muncul pop-up window:
6. Klik Browse dan cari folder dimana anda menyimpan file .ico yang telah dipersiapkan, klik open. Tunggu sampai favicon terupload dengan hasil gambar seperti di bawah ini:
7. Setelah favicon terupload, klik save.
8. Di bagian design/page elements, favicon akan muncul menggantikan favicon berlogo Blogger:
9. Custom Favicon telah tampil di Blog anda.
10. Done!

Note:
Paling tidak butuh waktu 1 hari untuk Blogger melakukan generating favicon. Jadi, sobat akan melihat hasil tampilan favicon baru di browser setelah proses itu.

Cara Membuat & Memasang Twitter Follow Button (Official)

witter Follow Button yg dirilis secara official oleh twitter kini semakin memiliki fitur yg canggih. Meskipun hanya ditampilkan dalam bentuk button dan link sederhana, sebenarnya ada beberapa hal yg dapat dilakukan hanya dengan sekali klik, tidak seperti twitter follow widget yg sebelumnya. "Dengan klik button, pengunjung dapat langsung melakukan follow tanpa harus masuk ke twitter." Link yg berada di sebelah button juga berfungsi untuk mengetahui profil serta update terbaru (tweet) nya. Jadi, memasang twitter follow button di blog kini dapat memberikan efek jauh besar bagi perkembangan dan popularitas blog serta pemilik blog.

Cara Membuat Twitter Follow Button

1. Masuk ke halaman follow button
2. Perhatikan gambar berikut:
cara pasang follow button
A. Kolom untuk mengisi nama account twitter. Isikan akun twitter blog atau akun twitter pribadi yg ingin dibuatkan button follow-nya.
B. Background. Sesuaikan dengan background blog dimana button akan dipasang. Jika terang, pilih "Light. Sebaliknya, jika gelap pilih "Dark".
C. Fitur untuk menampilkan / tidak menampilkan jumlah twitter followers. Pilih "No" jika tidak ingin menampilkan.
D. Bahasa. Klik menu dropdown pilih bahasa yg diinginkan, tersedia fitur Bahasa Indonesia.
E. Preview tampilan button.
F. Script/Kode twitter follow button. Setelah selesai melakukan setting, copy kode/scriptnya.

Cara Memasang Twitter Follow Button di Blog/Web

Button dapat dipasang di bagian manapun dari blog/web di dalam tag <body> seperti ketika anda memasang menampilkan link.

Untuk blog berplatform blogger:
a. Button dapat dipasang di dalam gadget (sebagai widget).
1. Buka dashboard > design/layout > klik "add a gadget/tambahkan gadget > Pilih HTML/Javascript > Masukkan kode ke dalam kolom > save.
2. Drag/geser gadget di halaman design/layout ke posisi yg diinginkan. Save lagi.

b. Opsi lain untuk memasang widget follow button adalah di bagian posting, yaitu di bawah judul posting atau di bawah posting/artikel:
1. Perhatikan script berikut:
<div style='float:right;margin-right:5px;'>Kode Twtter Button</div>
Copy script di atas. Ganti Kode Twtter Button dengan kode button yg telah dicopy  tadi. 
1. Masuk ke Edit HTML/Edit Template, centang "Expand Widget templates".
2. Untuk memasang di atas posting, cari <div class="post-header-line-1">. Jika tidak ketemu cari <data:post.body/>. Letakkan kode tepat di bawah <div class="post-header-line-1"> atau di atas <data:post.body/>.
3. Bagi yg ingin memasang button di bawah posting/artikel, cari <data:post.body/>, letakkan kode tepat di bawahnya.
4. Save & done.
Hasilnya akan seperti ini [sekalian follow ya :-) ]

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)

Facebook like, tweet, Google +1 buttons
Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook, Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.
buka rahasia blogspot
Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian posting ketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:
a.  Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.
b. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)
Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:
1. Copy script/kode berikut:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="bukarahasiablog">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>
Ganti bukarahasiablog dengan nama akun twittermu.
2. Buka halaman edit HTML/Edit Template:
Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 
2. Jika ingin memasang di bawah judul posting:
Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> lalu letakkan script/kode tepat di ATASnya.
3. Jika ingin memasang di bawah posting/artikel:
Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.
4. Save template 'n lihat hasilnya.
5. Done.

Good luck n enjoy your blog's share buttons (Facebook Like, Tweet Button, & Google +1 Button).

Cara Memasang Fitur Blogger Star Rating di Posting Blog

Star Rating Blogger
Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:
1. Masuk ke dashboard Blogger.
2. Buka halaman layout (page elements).
3. Klik "edit" pada bagian badan posting (blog posts).
blogger
4. Klik/centang "Show Star Ratings"
blogger
5. Setelah itu save.
Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.