WP Cumulus untuk Blogspot

Diposting oleh Saung Gadget on Rabu, 28 September 2011

Di sela-sela waktu yang singkat, kali ini SG akan memaparkan tutorial tentang "Cara Memasang WP Cumulus pada Blogspot/Blogger". Apa itu WP Cumulus?

WP Cumulus atau Wordpress Cumulus Plugin adalah widget yang ditemukan oleh blogger asal Belanda, Tom Tanck. Widget ini biasanya berfungsi sebagai penunjuk label/tag dalam bentuk 3D globe yang bisa di putar2. Sebenarnya Blogspot/Blogger juga mempunyai widget bawaan semacam ini, namanya Label Sphere, hanya saja tampilannya kurang 'gereget'. Seperti biasa SG hanya akan mengacu pada tutroial di Blogger Draft. Let's go to pembahasan utama yaitu cara memasang WP Cumulus.
  1. Seperti biasa sobat login terlebih dahulu ke draft Blogger.
  2. Masuk ke tab Template > Edit HTML > Proceed. Untuk jaga2 jangan lupa klik Backup / Restore
  3. Centang Expand Widget Templates, untuk memunculkan hidden script html.
  4. Cari kode di bawah ini (gunakan Ctrl+F untuk mempermudah pencarian), pada beberapa template sedikit terjadi perbedaan, cari aja yang mirip
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    atau
    <b:section-contents id='sidebar-right-1'>
  5. Jika sudah ketemu, Copy kode dibawah ini kemudian paste tepat dibawah kode <b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right-1'> tadi.
    <!--WP Columus Label for Inspiring Quotes-->
    <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(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;160&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;0xDCDCDC&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='14'><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> 
    Catatan :
    • Labels = adalah Title widget, sobat bisa menggantinya dengan title lain (misal : Category, Tags Cloud ds)
    • 240 = Width/Lebar dan 160 = Height/Tinggi widget, bisa disesuaikan dengan layout masing-masing
    • FFFFFF = warna background dan DCDCDC = warna text
    • 100 = Kecepatan pergerakan text, kecepatan bisa diubah sesuai keinginan. labih besar angka maka lebih cepat putaran textnya.
    • 14 = Ukuran text / Font Size

    6. Terakhir Save Template.

Jika tidak berhasil, coba cek script dibawah ini agar tidak terdapat duplikasi.
<b:includable id='main'><b:includable id='main'>
<b:if cond='data:title'><b:if cond='data:title'>
seharusnya yang benar adalah,
<b:includable id='main'>
<b:if cond='data:title'>
Ok selamat mencoba.

More aboutWP Cumulus untuk Blogspot

Breadcrumb Navigation

Diposting oleh Saung Gadget on Senin, 26 September 2011

Pada postingan pertama ini Saung Gadget (selanjutnya disinggkat SG) akan membahas tentang "Cara Membuat Breadcrumb Navigation". Apa itu Breadcrum navigation ?

Breadcrumb Navigation adalah navigasi halaman pada postingan atau artikel, biasanya terletak di atas postingan. Breadcrumb navigation ini akan membantu para pengunjung melihat history blog kita, tidak hanya itu widget ini juga penting sekali penggunaannya karena membantu mempermudah crawl mesin pencari, sehingga lebih SEO friendly.

Breadcrum navigation ini juga akan terlihat pada hasil pencarian yang dilakukan oleh search engine, biasanya terdapat pada blog yang memiliki pagerank 2 ke atas, tapi tidak menutup kemungkinan yang berpagerank 2 kebawahpun bisa terlihat.

Berikut cara membuat breadcrumb navigation pada panel blogger terbaru atau Blogger draft. Blogger draft ini hanya tersedia dalam bahasa inggris untuk saat ini, so butuh sedikit pemahaman, hhe :

1. Login ke Blogger dengan ID sobat

2. Pilih menu Template, terdapat pada menu di sebelah kiri bawah

3. Klik Backup / Restore kemudian klik Donwload full template, untuk jaga-jaga kalau terjadi kesalahan

4. Pilih Edit HTML yang ada pada kolom Live on Blog kemudian klik Proceed

5. Centang tanda Expand Widget Template untuk memunculkan kode html yang di hidden/disembunyikan

6. Masuk ke proses pemasangan kode. Cari kode ]]></b:skin> , untuk mempermudah pencarian gunakan tombol Ctrl + F pada keyboard sobat.

7. Copy kode dibawah ini, kemudian paste tepat di atas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
8. Selanjutnya cari kode berikut <div class='post hentry uncustomized-post-template'> dan paste kode dibawah ini tepat di bawah kode <div class='post hentry uncustomized-post-template'> tadi.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>
Catatan :  kode #187 berwarna Biru pada kode diatas adalah simbol dari karakter " , sobat bisa merubahnya dengan simbol lain seperti simbol > atau / atau simbol lainnya yang bisa sobat temukan dengan keyword "kode html ascii" . Akan tetapi saya merekomendasikan menggunakan kode > dari pada kode

9. Kemudian Save template dan klik Close.

Menu navigasi diblog sobat sudah terpasang. Selamat mencoba.




More aboutBreadcrumb Navigation