RIYAN KEMAL SEFTIAYANA: BLOGGING | www.riyanghifar.blogspot.com

Tampilkan postingan dengan label BLOGGING. Tampilkan semua postingan

Membuat Label Bergerak (Blogumulus) di Blogspot

Tahukah temen-temen apa itu blogumulus? Blogumulus itu adalah label widget yang dibuat dengan basis flash animation. Widget ini akanb eraksi kalo pointer mouse dideketin ke widget ini. Pertama kali Blogumulus diciptakan oleh Roy Tankc tapi cuma terbatas untuk kaum pengguna Wordpress dan ngga mungkin untuk di pakai didalam Blogger. Tapi sekarang Amanda Fazani udah menyempurnakan widget ini sehingga bisa dipake di dalam blogger.

Ok..! langsung saja sebelum kita mengenal label itu saya ingin mengucapkan terima kasih kepada Roy Tanck karena hasil karyanyalah label ini tercipta. Bagi yang belum mengetahui nama label tersebut saya akan memberitahukan label itu bernama Blogumulus atau sebagian orang mengucapkannya Blogumus itu..? Blogumulus itu awalnya diciptakan untuk pengguna Wordpress yang bernama Tag-Cumulus widget ini yang berbasis flash sehingga bisa dianimasikan. dan karena untuk saat ini sudah bisa dipakai di BLOGGER berkat kreatifitas Amanda Fazani, sebagai pengguna mesin blogger kita bisa memasang widget tersebut di blog kita. Thank's to Amanda Fazani atas kreatifitasnya. maka dirubahlah namanya menjadi Blogumulus Untuk melihat seperti apa label animasi ini, Oke, bagi anda yang tertarik untuk memasang label animasi atau label flash ini, kita langsung menuju pada langkah-langkahnya.

Login ke blogger dengan ID anda.
Klik Tata Letak.
KLik tab Edit HTML.
Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman.
Cari kode yang mirip dengan kode di bawah ini :

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

6. Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah 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://halotemplates.s3.amazonaws.com/wp-cumulus-example/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> Posted by <a href='http://adesyams.blogspot.com/'>Ade'S Tricks</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/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>

7. Kemudian Save Template anda.

Note : Agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal: Merubah lebar, tinggi dan warna background. Variable untuk lebar dan tinggi ada pada baris script berikut,

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

240 menunjukkan lebar widget. 300 menunjukkan tinggi widget. #ffffff menjukkan warna background. 100 menunjukkan kecepatan putaran. Merubah warna text. Variable untuk lebar dan tinggi ada pada baris script berikut,

so.addVariable("tcolor", "0x333333");

"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja. Merubah ukuran font. Variable untuk lebar dan tinggi ada pada baris script berikut,

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>");

12 menujukan ukuran font yang digunakan. ~> bila anda menginginkan background yang transparan, maka anda tinggal menghapus tanda // dari script di atas

//so.addParam("wmode", "transparent");

Referensi klik DISINI

Memasang Translate Gambar Bendera di Blog

Kebanyakan blog menggunakan bahasa internasional, yaitu bahasa Inggris dengan tujuan agar blognya dapat dimengerti oleh semua orang diseluruh dunia. Namun jangan khawatir apabila blog yang kita miliki berbahasa Indonesia, dengan menggunakan tambahan widget google translate maka blog kita yang berbahasa Indonesia akan dapat diterjemahkan ke dalam beberapa bahasa yang digunakan di dunia, seperti bahasa Inggris, Perancis, Italia, Jerman, Brazilia, Portugal, Yunani, Jepang, Cina, Korea, maupun bahasa Arab.

Pada kesempatan kali ini saya akan memberikan tutorial kepada teman-teman tentang cara memasang translate yang berupa gambar bendera. Tips ini baru saya dapatkan dari o-om. Baik, langsung saja pada langkah-langkahnya :

Pertama login ke blogger terlebih dahulu
Klik Tata Letak
Klik tab Elemen Halaman
Klik Tambah Gadget
Pilih Tambah HTML/JavaScriptCopy pastekan code translate di bawah kedalam kolom yang tersedia.

Tampilan Ke-1

Copas Code Dibawah

Tampilan Ke-2

Copas Code Dibawah

Temen-temen bisa menambah negara mana lagi yang mau ditampilkan, silahkan dicoba. Semoga bermanfaat

Cara Membuat Related Post Dengan Fungsi Scroll Di Bawah Postingan

Untuk tutorial blog kali ini membahas bagaimana cara membuat related posts / artikel terkait bawah posting dengan scroll. Dengan memasang artikel terkait atau related posts di blog tentunya akan membuat atau memudahkan pengunjung untuk melihat artikel anda yang lainnya dan efeknya untuk blog anda akan menambah / meningkatkan pageview blog.

Cara Memasang Artikel Terkait di bawah postingan blog dengan fungsi scroll :

Login ke blogger.com
Pada dasboard silahkan pilih Template
Lalu pilih Edit HTMl
Centang kotak expand template widget
Tekan Ctrl+F dan cari kode <data:post.body/> atau <p><data:post.body/></p> lalu letakkan kode berikut dibawahnya
Apabila menemukan kode <data:post.body/> sebanyak 2 atau 3 buah silahkan pilih yang nomor 2 saja

<b:if cond='data:blog.pageType == "item"'><br/><br/><H2>Related Posts</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('ardi33').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script> </div> </b:if>

7. Lalu cari kode ]]></b:skin> dan letakkan kode berikut diatasnya (kode ini untuk memberi efek Hover)

.rbbox{border: 1px solid rgb(192, 192, 192); padding: 5px;background-color: #f0f0f0; -moz-border-radius:5px; margin:5px; } .rbbox:hover{ background-color: rgb(255, 255, 255); }

8. Simpan Template dan lihat hasil dari related post blog anda yang baru dibuat

Selamat mencoba, semoga bermanfaat.!!!

Cara Membuat Kotak Admin di Bawah Postingan

Cara Membuat Kotak Admin di Bawah Postingan. Ya, tepat sekali bukan ! Anda sudah mendahului lihat gambarnya di atas. Jadi, tidak salah yang Anda cari adalah Cara Membuat Kotak Admin di Bawah Postingan. Kotak Admin di Bawah Postingan Secara Otomatis ini memang keren untuk dicantumkan di blog Anda.
Mungkin awal tertariknya Anda terhadap ini, karena Anda melihat blog teman kita setiap akhir/di bawah postingan selalu ada kotak adminnya. Nah, itulah ...makanya disebut otomatis, karena kita cukup satu kali mencantumkan, hasilnya untuk semua postingan. Kotak admin di bawah postingan ini biasanya berisi sebagai berikut :

Masuk ke akun blogger Anda,
Klik Rancangan ---> Edit HTML ---> klik “expand template widget”
Jika perlu “download template lengkap”. Untuk antisipasi jika ada kesalahan.
Cari kode ]]></b:skin> Gunakan tombol Ctrl+F.
Jika sudah ketemu, masukkan kode berikut di atas kode ]]></b:skin>

.admin-tulisan{
    display:block;
    width:auto;
    background:#FFFFFF;
    border:2px solid #000000;
    box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
    padding:0;
    margin:30px 0 10px 0;
    font:normal 12px Comic Sans Ms;
    color:#222;
    }
    .admin-tulisan .kontainer{padding:5px;}
    .admin-tulisan h4{
    background:#0000FF;
    border:none;
    border-bottom:2px solid #000000;
    color:#fff;
    text-transform:normal;
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
    font:bold 12px Comic Sans Ms;
    padding:5px 10px;
    margin:0 0 0 0;
    display:block;
    }
    .admin-tulisan h4 a{color:#FEEA83;}
    .admin-tulisan img{
    width:70px;
    height:70px;
    margin:0 10px 0 0;
    float:left;
    border:1px solid #000000;
    padding:2px;
    background:#000000;
    box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
    }

      6. Jika sudah, silahkan klik simpan dahulu atau dilanjutkan juga tidak apa-apa tanpa disimpan dulu,
      7. Cari lagi kode : <div class='post-footer>
      8. Lalu masukkan kode berikut tepat di atas kode : <div class='post-footer>

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Di Posting Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a>www.riyanghifar.com</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7w25vf5CWG_HaIbcwU2D5LtIaeHVPG6NGsMB294nw6NE-UE8u-atH09FXaMo7fqvV11z5SJmEBRHImXT38K8f4sYzN_LVVNaosgspQhuBRCAN6dK8gFo6uFpDmdDJtsX5dABUcK155Q/s1600/Untitled-1.png'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat Anda sampaikan melalui kotak komentar. Semoga Artikel <data:post.title/> ini bermanfaat.
<p><span style='float:Center;font:bold 12px Comic Sans Ms;'><a href='http://www.riyanghifar.com/2013/05/cara-membuat-kotak-admin-di-bawah.html' target='_blank'><b><blink>Silahkan Klik Untuk Memasang Widget Ini!</blink></b></a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Catatan : Silahkan tulisan yang berwarna merah Anda ganti sesuai keinginan Anda sendiri. www.riyanghifar.com Anda ganti dengan URL blog Anda. Kemudian https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7w25vf5CWG_HaIbcwU2D5LtIaeHVPG6NGsMB294nw6NE-UE8u-atH09FXaMo7fqvV11z5SJmEBRHImXT38K8f4sYzN_LVVNaosgspQhuBRCAN6dK8gFo6uFpDmdDJtsX5dABUcK155Q/s1600/Untitled-1.png ganti dengan URL photo Anda. Widget ini mengandung link langsung ke blog ini, dengan segala hormat jika berkenan mohon jangan diganti !

9. Jika selesai pengeditan, klik simpan template. Selesai

Semoga Bermanfaat.!!!! www.riyanghifar.com

Cara Membuat Widget Subscription Box Menarik Untuk Blogger

Memiliki jumlah visitor yang tinggi adalah impian tiap Blogger sehingga membuat mereka berusaha sekuat tenaga untuk itu. Banyak cara sebenarnya untuk meningkatkan pelanggan blog Anda misalnya aktif di jejaring sosial, memasang widget facebook fan box, memasang tombol follow twitter, dan juga memasang kotak berlangganan untuk pengunjung. Nah, pada kesempatan kali ini saya akan berbagi tutorial tentang bagaimana cara membuat kotak Subscription yang menarik sehingga akan mengingatkan pengunjung Anda untuk berlangganan artikel Anda. Dengan hanya memasukkan script sederhana di bawah ini maka subscription box yang menarik akan tampil di blog Anda. Baiklah langsung saja kita kerjakan!

Memasang Subscription Box di Blogger

Login ke akun Blogger Anda dan masuk ke Layout
Klik Add a Gadget
Pilih HTML/JavaScript
Masukkan kode di bawah ini

Ganti RiyanKemalSeftiayana dengan nama Feedburner Anda
Ganti yang berwarna orange dengan username twitter dan Google + Anda
Anda dapat mengganti kode yang ditulisan Berlangganan Via Email, Free..!! dengan kalimat sesuka Anda
Simpan widget Anda dan lihat perubahannya

Setelah semua selesai maka akan terlihat seperti gambar ini:

Segitu saja tutorial kali ini, untuk tutorial yang lainnya tunggu di postingan selanjutnya. Salam Blogger..:)

Source klik DISINI

Beriklan Disini

Mau berikalan Disini.?!!! Silahkan hubungi admin

Call or Sms 0857 2222 9747

Email : riyankemalseftiayana@ymail.com

Facebook @ www.facebook.com/riyankemaleftiayana

Twitter @ www.twitter.com/riyankemal_s

@Twitter

Search

Wikipedia

Membuat Label Bergerak (Blogumulus) di Blogspot

Memasang Translate Gambar Bendera di Blog

Copas Code Dibawah

Tampilan Ke-2

Copas Code Dibawah

Cara Membuat Related Post Dengan Fungsi Scroll Di Bawah Postingan

Cara Membuat Kotak Admin di Bawah Postingan

Cara Membuat Widget Subscription Box Menarik Untuk Blogger

Memasang Subscription Box di Blogger

Beriklan Disini

New Post

Random

Teman

My Label

Like Mas Bro

open by one

STATISTIK

DAFTAR ISI

KOMENTAR

TRANSLATE

KODE WARNA

Pengikut