Cara Membuat Label Atau Kategori di Blog

Label atau Kategori ini berfungsi untuk mengelompokan artikel-artikel yang sejenis untuk mempermudah dalam pencarian. Label atau kategori ini sudah disediakan oleh blogger sobat hanya perlu menambahkannya saja.

Untuk cara membuat label atau kategori berikut ini caranya :

1. Masuk ke Blogger
2. Pilih Tata Letak
3. Klik pada Tambah Gadget / Add Gadget

4. Kemudian pilih Label

5. Sesuaikan pengaturan label yang ingin ditampilkan
6. Simpan

 7. Selanjutnya pada postingan , pilih postingan yang mau di beri nama label. tekan edit lalu tekan label di sebelah kanan di bawah setelan entri. tekan Label dan tambahkan nama Label sesuai dengan kategori atau kelompoknya atau kalau ada label baru.tekan selesai

.

8. Tekan perbaharui dan hasil nya lihat di blog.                

Cara Memasang favicon Animasi Address Bar Blog

<p>Your browser does not support iframes.</p> Cara Memasang favicon Animasi Address Bar Blog judul posting yang saya pilih kali ini , sebelum saya akan membahas lebih lanjut tentang cara pasang favicon animasi pada blog sebaik nya saya akan menjelaskan lebih dahulu sedikit tentang favicon .

Favicon adalah gambar atau icon website/blog yang muncul pada Address Bar dan pada dasar nya  favicon blogger sudah ada dengan tampilan default nya huruf B berwarna kuning , Nah itulah yang sekarang yang akan di ganti menjadi sebuah gambar animasi yang bisa bergerak di Address Bar pada saat membuka blog

Supaya favicon Animasi berfungsi sebaik nya ikuti saja langkah pasang nya sebagai berikut :

1. Login ke Blogger
2. Pilih Template
3. Klik Html Template
4. Centang dulu Expand Template Widget
5. Cari kode <b:skin><![CDATA[ (gunakan Ctrl+F untuk memudahkan pencarian)
6. Pasang kode dibawah ini tepat diatas kode <b:skin><![CDATA[

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXC6LPJDSi9DQ5Ycn-8wDsI8fsBE5QB8CPMUKNXO_SE7187c2e2wBCH3vFns9BDNLNpc4Y4GXtafgpkf6Eo2kXVRw5mb6vDQiUGDAXwXAdWzBNGKWA6grYMOvub4r5a75DMv269J_5CPmm/s1600/animated_favicon.gif' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Keterangan : 
kode yang berwarna merah ganti dengan URL gambar animasi pilihan sobat dan bisa juga dapat kan kode animasi nya DISINI

7. Simpan Template untuk melihat hasil nya
sumber:www.blog-rangga.blogspot.com

Cara Membuat Related Post /Artikel Terkait Pada Blog

Artikel terkait sangat penting juga bagi blog anda terutama pengunjung pada blog anda, jadi pengunjung bisa melihat artikel-artikel lainnya saat membuka satu artikel di blog anda. posisinya di berada di bawah halaman artikel anda, langsung aja :

Masuk ke blog anda => Rancangan => Edit html => Centang Exspand template widget

Lalu cari kode </head>

Kemudian letakan kode script di bawah ini tepat di atas kode </head> 

<script type="text/javascript">

//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

Kemudian cari kode <data:post.body/>
 Lalu letakan kode script di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>

    <b:if cond='data:blog.pageType == "item"'>
    <h4>Artikel Terkait</h4>
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>

Terakhir simpan template anda dan lihat hasilnya..selamat mencoba..
sumber:www.borneo-drive.net

Cara Membuat Widget Tweet/Follower Twitter di Blog

Cara Membuat Widget Tweet/Follower Twitter di Blog  – Membuat atau memasang widget Twitter untuk Tweet (update status) serta follower Twitter  selain untuk kebutuhan share artikel juga untuk mempercantik blog. Kalau sebelumnya saya sudah pernah memposting widget follower twitter animasi flash maka yang saya share kali ini khusus buat  update status (tweet) dan follower twitter yang boleh anda pasang di sidebar. Demo hasil widget dapat sobat lihat pada screenshoot dibawah dan scriptnya dapat langsung dicopy aja terus pasang di sidebar blog sobat dan jangan lupa ganti username twitternya.langkah-langkah nya seperti dibawah ini :

1.       Login ke dashboard blogger sobat.

2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3.       Copy dan paste script dibawah ini pada gadget baru tadi.

         <div style="background:#fff url(http://2.bp.blogspot.com/-CLBGzLyi1so/T1UPEFQD_oI       /AAAAAAAAFuI/dTa03s7vVYg/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px">

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

version: 2,

type: 'profile',

rpp: 10,

interval: 3000,

width: 285,

height: 123,

theme: {

shell: {

background: 'transparent',

color: '#000000'

},

tweets: {

background: 'transparent',

color: '#000000',

links: '#135a9e'

}

},

features: {

scrollbar: false,

loop: true,

live: true,

hashtags: true,

timestamp: true,

avatars: true,

behavior: 'default'

}

}).render().setUser('ritanonipisael').start();

</script>

</div>

<br />

<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;

align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;

lang=en&amp;link_color=&amp;screen_name=ritanonipisael&amp;show_count=&amp;

show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

4.       Simpan dan lihat hasilnya.
sumber: www.rayhanzhampiet.com

Cara Membuat Efek Bintang (Sprinkle) Pada Kursor

Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor – Pastinya sobat blogger sudah sering melihat tampilan kursor di blog lain dengan efek bintang yang bertaburan (sprinkle) dan berwarna-warni bukan ? Memang efek bintang bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog sobat, namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.

Cara membuat efek bintang bertaburan pada kursor cukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :

1.       Login ke dashboard blogger sobat.

2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3.       Copy dan paste script dibawah ini pada gadget baru tadi.

<script> // JavaScript Document<script type='text/javascript'> // <![CDATA[ var colour="red"; var sparkles=65; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>

4.       Simpan dan lihat hasilnya.

NB : Silahkan ganti warna “red” dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.

Efek bintang bertaburan pada kursor ini akan terlihat jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja yang sabar ya. Selamat mencoba sobat.

sumber:www.rayhan-zhampiet.com

Membuat Banner Animasi dan Flash

Membuat banner animasi dan flash untuk advertise sebenarnya lebih menarik dibanding dengan memasang banner yang biasa saja yang tidak memiliki efek dan daya tarik. Dengan demikian banner animasi dan flash ini banyak dijadikan oleh para pebisnis online sebagai sarana promosi dalam media periklanan atau advertise baik itu berupa produk ataupun jasa yang mereka tawarkan. Mengkin bagi mereka yang ahli dalam desagn graphic membuat banner animasi dan flash ini tedak menjadi masalah, namum bagaimana dengan kita yang awam dengan software membuat  banner animasi dan flash ini?

Tidak perlu khawatir, karena setiap masalah pasti ada jalan keluarnya, nah disini Super-Bee akan membatu menyelesaikan masalah Anda yang ingin memasang banner animasi dan flash untuk iklan yang ingin Anda pasang pada blog Anda. Lalu bagimana caranya? caranya tidak sesulit seperti yang Anda bayangkan, kita akan menggunakan layanan membuat banner animasi dan flash secara online yang akan saya jelaskan seperti berikut ini.

A. Membuat Banner Animasi

Pada umumnya image atau gambar yang digunakan untuk membuat banner animasi ini adalah image atau gambar yang file nya berbentuk "gif". Nah, untuk itu sebelum kita membuat banner animasi ini, persiapkan terlebih dahulu gambar yang akan Anda gunakan untuk membuat banner animasi. Adapun layanan online gratis yang dapat Anda gunakan untuk membuat gambar yang berekstensikan gif seperti situs dibawah ini.

• http://picasion.com
• http://www.loogix.com
• http://www.createagif.net
• http://gickr.com

Jika Anda sudah mempersiapkan gambar untuk dijadikan banner animasi yang berukuran 125 x 125px, langkah selanjutnya adalah memberikan efek gerak atau animasi pada gambar tersebut caranya perhatikan penjelasan berikut ini

1. Kunjungi situs http://picasion.com

2. Klik tombol browse untuk memasukkan gambar yang ingin kita jadikan banner animasi tadi

Lihat screnshot dibawah ini

3. Sesuaikan ukuran banner yang Anda inginkan pada opsi size

4. Kemudian pilih kecepatan afek banner pada opsi speed

5. Lalu klik tombol Create Animation
Contoh hasilnya akan menjadi seperti ini :

6. Download atau klik kanan pada banner animasi lalu pilih "save image as"

B. Membuat Banner Flash

Untuk membuat banner flash caranya juga sangat mudah, mirip dengan cara membuat banner animasi diatas. Hanya saja Anda tidak memerlukan gambar, Anda hanya mengisi text untuk banner flash tersebut. Jika Anda lebih tertarik menggunakan banner flash ini, silahkan Anda kunjungi situs ini http://www.flashvortex.com/ lalu scroll sedikit kebawah dan pilih "Banners". Untuk membuat space iklan pada blog Anda, Anda dapat membaca tutrial cara membuat kotak iklan di blog.

9

Share, like and give G+1 this article :

sumber :www.super-bee.blogspot.com

Cara Membuat Kotak Iklan di Blog

Cara membuat kotak iklan di blog sebenarnya sudah lama ingin saya posting, namun ada saja kendala yang menghambat saya untuk mempostingya sehingga postingan cara membuat kotak iklan ini menjadi tertunda. Pada kesempatan yang berbahagia ini, mumpung ada waktu luang, saya akan mempostingnya dan membagikan panduan dan cara membuat blog khususnya pada cara membuat kotak iklan ini kepada Anda yang ingin memasang kotak iklan pada blog yang Anda miliki.

Membuat space kotak iklan pada blog akan memberi peluang bagi Anda untuk mendapatkan rupiah yang Anda inginkan. Karena ketika Anda membuat space kotak iklan diblog yang Anda miliki, secara tidak langsung Anda memberi kesempatan bagi orang lain yang ingin memasang iklan pada blog Anda. Apalagi jika blog yang Anda sudah popular dan memiliki trafic serta page rank dari google yang tinggi, maka pemasang iklan akan terus berdatangan untuk memasang iklan pada blog Anda. Namun tidak ada salahnya jika blog Anda belum memiliki trafic yang tinggi juga ingin menyediakan space kota iklan, yang jelas peluang untuk mendapatkan rupiah dari iklan itu tetap ada. Mungkin saja sipemasang iklan juga ingin memasang iklannya pada blog Anda, kan lumayan uangnya bisa dikumpul buat beli peyek, hehe..

Bagi anda yang tertarik untuk membuat kotak iklan di blog, yuk sama-sama kita simak tutorial berikut ini :

1. Siapkan gambar atau image yang ingin kita pasang pada space iklan yang berukuran 125 x 125 px, agar gambar kelihatan menarik dan memiliki efek silahkan Anda baca membuat banner animasi dan flash. Kemudian simpan gambar tersebut pada hosting penyipanan gambar seperti photobucket untuk mendapatkan url gambar yang nantinya kita butuhkan.

contohnya:

2. Jika sudah, kita akan membuat space kotak iklannya, login ke account blogger Anda
3. Klik rancangan atau tataletak bagi yang menggunakan dasbor blogger baru
4. Kemudian klik Edit HTML dan cari kode ]]></b:skin> (gunakan ctrl + f ) untuk mempermudah pencarian
5. Sisipkan kode berikut ini diatas kode ]]></b:skin>

#super-beeads {margin:0px;padding:0px;text-align:center}
#super-beeads  img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#super-beeads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

Perhatikan kode yang saya beri warna, untuk warna merah merupakan jarak antara kotak iklan atas dan bawah. Sedangkan warna biru merupakan jarak kotak iklan antara kiri dan kanan. Sesuaikan dengan kebutuhan Anda.

6. Kemudian save template Anda
7. Langkah selanjutnya kembali ke Elemen laman dan klik tambah gadget > pilih HTML/Javascript
8. Copy dan paste kode berikut ini (edit terlebih dahulu untuk memasukkan link dan url gambar gambar yg ingin digunakan):

<div id="super-beeads">
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title=" Title-Iklan"><img alt="Alt/text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
</div>

space kotak iklan diatas merupakan space kotak iklan yang terdiri dari 4 bagian yaitu atas kiri, atas kanan dan bawah kiri serta bawah kanan. Jika Anda ngin mengurangi space kotak iklan, anda dapat menghapus kode  <a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a> diatas.

9. Save kerjaan Anda dan lihat hasilnya

Demikianlah cara membuat kotak iklan di blog yang dapat saya sampaikan, sampai jumpa pada tutorial berikutnya dan saya ucapkan selamat mencoba. 

sumber: www.super-bee.blogspot.com