RSS

About

Selamat Datang di Blog Saya

Cara membuat link bewarna warni / warna warni pada blog


 
Sobat blogger sebelumnya tutorial blogger telah mengajarkan tutorial yang berjudul Cara membuat link bergoyang / bergerak pada blog nah pada siang hari kali ini Tutorial blogger akan memberi kan tutorial dengan topik yang sama yaitu Cara membuat link bewarna warni / warna warni pada blog. Efek ini memberikan kesan warna pada link jika mouse kita diamkan ke link tersebut. Hmm gimana jadinya ya? Mending sobat cicipi aja :)



1. Masuk ke Dasboard lalu klik Blog sobat
2. Pilih ke Template
3. Lalu pilih Edit HTML dan pilih lanjutkan
4. Centang Expand Template Widget
5. Cari kode <body> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
6. Setelah ketemu letakan kode berikut tepat di atas kode yang tadi

<script src='http://tutorialblogger.googlecode.com/files/rainbow-linkTutorialBlogger.js.htm'/>
7. Simpan deh Templatenya
Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya

Cukup disini Tutorial dari Tutorial Blogger tentang Cara membuat link bewarna warni / warna warni pada blog. Tunggu tutorial berikutnya....

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Cara membuat link bergoyang / bergerak pada blog

Sebelumnya Tutorial Blogger telah memberikan tutorial berupa Cara memasang burung twitter pada blog. Dan pada siang hari kali ini kita akan membahas tutorial dengan topik yang berbeda, yaitu Cara membuat link bergoyang / bergerak pada blog. Efek ini akan membuat Link bergoyang pada saat kursor menunjuk link itu. Keren gak???


Kita lanjutkan yuk tutorialnya!!

1. Masuk ke Dasboard lalu klik Blog sobat
2. Pilih ke Template
3. Lalu pilih Edit HTML dan pilih lanjutkan
4. Centang Expand Template Widget
5. Cari kode </head> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
6. Setelah ketemu letakan kode berikut tepat di atas kode yang tadi
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>
7. Simpan deh Templatenya
Bagi yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya


Keterangan:
  • Untuk kode bewarna biru adalah kelebaran link bergoyang

Cukup disini Tutorial dari Tutorial Blogger tentang Cara membuat link bergoyang / bergerak pada blog. Tunggu tutorial berikutnya.....

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Cara memasang burung twitter pada blog

Sobat kali ini Tutorial Blogger akan memberikan tutorial yang menarik, yaitu Cara memasang burung twitter pada blog. Mungkin tutorial ini sudah tidak asing lagi di mata sobat, setiap website/blog biasanya memasangkan burung twitter pada blognya. Burung twitter ini akan senantiasa terbang tanpa kelelahan, dan jika ada pengunjung burung twitter tersebut dia akan dialihkan secara otomatis ke twitter sobat. Akan tetapi secara sengaja Tutorial Blogger tidak memasangkan efek ini pada website Tutorial Blogger karena jika sobat melihat pada bagian sisi kanan atas, akan terlihat beberapa sub menu diantaranya Twitter milik Tutorial Blogger. Jadi kami tidak perlu memasangkan efek ini :)

Yuk kita mulai Tutorialnya

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget 
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi

5. Kosongkan Judul, dan isikan kode berikut pada kontennya 

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://tutorialblogger.googlecode.com/files/burungtwitterTutorialBlogger.js.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS4_w_bVVtyW4GMxvLOBmQkmKhroUwNi6D-xnXST9YWRoGA2E1O96lpQtyPG2AlHV2Lxx_7g56jmfMWURg0G5gL61Skkx_hmMGzSxHy-wk4rRrdPcs2pvAz7Q2DuZVEDhTL-HKSICGdfk/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "Alamat Twitter Sobat";
var tweetThisText = "Twitter - UserID http://rizved.blogspot.com/";
tripleflapInit();
</script>
6. Setelah Itu simpan

TAMBAHAN
  • Silahkan Ganti kode berbackground biru muda dengan alamat twitter sobat
  • Ganti kode berbackground biru dengan warna burung twitter yang kami sediakan
Warna Kuning
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKDuSTLLPVYy1KqbiT00PP0H8ihBYXxxcicJahX7YKwSfXaSgjsaDVQMeEXm7aU1LDw_Q09phlcmuVV074sLJQYfH-Wov5tIbzPJUs_4B-57EBYv0Xzq0yp6diIfQ20mJ9V2Jw7A6eMDk/s1600/yellow+bird.png
Warna Hitam
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH5Ry-yLO1AC4gdT3yljTjSu5JgGbXpY9RvtyN6Ms1S0D91jJg5uYqfbPkSq-jKOBjucouzAAnfCcxj6S_esInLgXfhaCnddbaM6j8-vzD71mmLdUvQp5AY_5Txnhd8byr4kMjw-37dmc/s1600/black+bird.png
Warna Biru
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmTsfMPRvSQGfIf8ENBV9JlecHTq6IMfGNRr3FDDbwbVKRpDBrXaWPQv_giEi5l7_bAfP-h1E5FBzHrIhBCD_xQ1YeVXQXFY8l0nYGJpECGa2qRN8ajof7Oj_cxW-F78Y5_y2pkuQe5dc/s1600/Blue+bird.png
Warna Coklat
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKWavjBiRyEcDqaKK9L0FiBm75JUTvra5T1kqnEeqMDJvyBx3-pUKGIqpAVG2aWSuw2y-nSq_HWgGKRaZxZlEaa2ipTxMXTJijfWH4Qw-rL7HW0cIfz9cU7cMtcXCYMkKYWHLhz4Tq_xs/s1600/brown+bird.png
Warna Hijau
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh0-8S6rgCS_SnwrqWEaxQTE_KI82lIsd3UHBER6gAaZmhVq9XgiyfcU-ujm7PiGDGHJWiwL6u7G-LuVfXyD_XUbA4jMfKRtt1PqmrKzukvYdgxSXjgpU3Q0bEV-IszKoC1MPUPxK8ZAQ/s1600/Green+bird.png
Warna Ungu
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirXxD7-DWUP0f78Y6KK74Og6tOh6VR8DrWiobzs_ZpYYHMS7qfNUaGOyFAH0EU-WPipgMTS7JnudXN9C6EYeaHfUU-tOgK1Pz4MmIToO6G2Q9oZC8bwFhNTk-x4T8X67Zmz74innEM264/s1600/purple+bird.png
Warna Putih
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhioa9KP2vwtmG07Hpo5UNDKOLeugnsrDQAXJSN8uxqWOeU5eG8KhhsbYDNG8qjFNNWdobs_cADmSLya6jNAaLGCNzo9q6M5-S1UehRIx6e2t5dTHjJfpdhZfACxMJvk_ZQ4lktdaxWQTQ/s1600/white+bird.png
Warna Merah
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxVZgo12cSEAfcEzbYSm-aaUpn3dvzd9XqH2RCiK_2xogouXv-6dpRE3OB8k4IzCmq6XPsvvjCNiURRoJl7U2uLZWYkC9zEM-0q3gI2hzF7tDTUjty0N_vNAW0D1lQrtdIVOBzitoUjSo/s1600/red+bird.png

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Membuat Related Post beserta read more

Sobat blogger, kali ini Tutorial Blogger akan mengajarkan tutorial yang berjudul Membuat Related Post beserta read more. Tutorial kali ini bukan melalui HTML Sobat, melainkan melalui Gadget. Jadi tutorial kali ini akan terlihat lebih mudah.Related post bisa sobat buat dengan Jquery maupun asli dari blog sobat, akan tetapi related post kali ini agak berbeda lebih sedikit. Yaitu Related Post beserta read more. Dalam arti Related post ini diikuti juga oleh read morenya. Akan tetapi related post ini hanya bisa menampilkan beberapa postingan terbaru sobat (Gak bisa semuannya), tapi bisa diatur kok berapa related post yang akan dimunculkan.

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget 
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Isikan Judul, dan isikan kode berikut pada kontennya

<div id="bp_recent"></div><div class="bp_footer"></div>
<script style='text/javascript' src='http://tutorialblogger.googlecode.com/files/recentpostTutorialBlogger.js'></script>
<script style='text/javascript'>
var numberOfPosts = 5;
var showPostDate = true;
var showSummary = true;
var summaryLength = 200;
var titleLength = 100;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'Read More';
</script>
<script src='http://rizved.blogspot.com/feeds/posts/summary?max-results=4&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
Tambahan:
Untuk kode bewarna hijau ganti dengan jumlah Related post yg akan dimunculkan
Untuk kode bewarna biru ganti dengan alamat web sobat

6. Setelah itu simpan

Bagaimana sobat Membuat Related Post beserta read more nya berhasil kan??Sekian tutorial dari Tutorial blogger tentang Membuat Related Post beserta read more. kalau berhasil akan menjadi seperti ini



  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Cara Memasang Radio Pada Blog

Sobat blogger, kali ini Tutorial Blogger akan mengajarkan tutorial yang lebih seru dan menarik untuk sobat semua. Yaitu Cara Memasang Radio Pada Blog, biasanya sih Radio ini digunakan untuk blog yang bertema musik,berita,dll. Kegunaanya cukup menguntungkan yaitu membuat blog tidak terasa sunyi, membuat blog tersebut menjadi unik, dll. Nah jika sobat tertarik dengan radio ini, Tutorial blogger akan mengajarkan kepada sobat dengan senang hati.




1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget 
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Kosongkan Judul, dan isikan kode berikut pada kontennya 
<center><embed style="margin-top: 0px;" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" autostart="true" displaysize="0" showstatusbar="1" type="application/x-mplayer2" src="http://ceriaradio.com:8000/" name="RAOCXplayer" allowscriptaccess="never" height="70" width="278"></embed></center><div style="text-align: center;"><span ></span></div>
<a href="http://rizved.blogspot.com/2012/02/cara-memasang-radio-pada-blog.html" target="_blank"> Get this widget! </a>

6. Setelah itu simpan


Nanti jadinya seperti ini, Selamat mencoba





  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Cara menghilangkan obeng pada blog

Apa sih maksud dari judul posting ini? Sebenarnya kali ini Tutorial Blogger akan mengajarkan tutorial untuk menghilangkan icon obeng. Icon tersebut biasanya akan muncul ketika kita sedang mengedit template dan melihat hasil templatenya pasti pada sudut elemen template tersebut ada icon berbentuk obeng/ tang. Contohnya pada screenshot (gambar) disamping ini. Icon ini biasanya sering disebut para blogger senior dengan Quick Edit artinya Mengedit secara cepat, akan tetapi para pengunjung tidak dapat melihat icon ini. Hanya sang pemilik blog lah yang dapat melihatnya.
Ada juga loh para blogger yang tidak senang dengan kehadirannya. Salah satunya Tutorial Blogger, alasannya cukup sedeharna. Yaitu membuat mata tidak sedap, terlihat aneh, DLL. Nah jika sobat juga berpikiran sama dengan Tutorial Blogger, Lebih baik kita hapus saja ya??

1. Masuk ke Dasboard lalu klik Blog sobat
2. Pilih ke Template
3. Lalu pilih Edit HTML dan pilih lanjutkan
4. Centang Expand Template Widget
5. Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
6. Setelah ketemu letakan kode berikut tepat di atas kode yang tadi
.quickedit{
display:none;
}
7. Simpan deh Templatenya. Bagi yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya

Coba deh sobat lihat obeng yang ada di sisi elemen template sobat?? Sekarang sudah hilangkan?? Apakah terlihat lebih keren?? Ataupun terlihat lebih buruk?? Menurut Tutorial Blogger sih nambah keren.

Sekian tutorial tentang Cara menghilangkan obeng pada blog dari Tutorial Blogger

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Membuat efek gelembung pada kursor

Kali ini saya akan mengajarkan tutorial kepada sobat berupa tutorial Membuat efek gelembung pada kursor, tentu saja efek ini berbeda dengan yang satu ini. Efek ini akan mengeluarkan segumpalan gelembung naik ke atas yang keluar dari kursor jadi kursor sobat akan terlihat lebih menarik. Tentu saja efek ini memiliki banyak keuntungan diantaranya Tidak membuat blog berat, tidak membutuhkan banyak ruang, sangat unik, dan sangat menarik. Masih kurang percaya dengan tutorial blogger? Kalau masih gak percaya di coba aja.


1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget 
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript

4. Lalu muncul halaman baru lagi
5. Kosongkan Judul, dan isikan kode berikut pada kontennya
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}


function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
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;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>
6. Setelah itu simpan

Bagaimana sobat efek gelembungnya sudah kelihatan kan?? Beri tepuk tangan dong buat tutorial blogger dan jangan sungkan-sungkan untuk memberi pujian kepada tutorial blogger, hehehe. Oh ya jangan lupa ya bersihkan sisa-sisa gelembungnya dengan kain lap!!

Tambahan:
Untuk kode yang berbackground biru adalah warna gelembung
Untuk kode yang berbackground hijau adalah jumlah gelembung yang akan muncul

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS