SutuL-404

Tampilkan postingan dengan label Tips dan Trik Blog. Tampilkan semua postingan

Kamis, April 12, 2012

Membuat Label Cloud Blog Menjadi warna warni

Label adalah untuk mengkategorikan dan penanda tulisan yang diposting di blog. Blogger.com sendiri sudah menyediakan gadget (widget) untuk menampilkan label dalam bentuk cloud yaitu ukuran font berbeda-beda. Label yang sudah kita buat, sesuai dengan isi postingan bisa menjadi menu di blog kita. Menu adalah sebuah navigasi untuk mempermudah penelusuran postingan.

Masih ingat dulu, blogger belum memberikan fitur Label Cloud, masih berberuk daftar atau list. Sehingga untuk menampilkan label menjadi bentuk Cloud yang biasanya sering ditemui di blog yang berplatform wordpress harus mengedit template. Bahkan untuk membuat label menjadi lebih menarik ada yang menampilkannya menjadi bentuk animasi flash atau blogumulus.

Nah sekarang, kita akan belajar untuk membuat label cloud yang warna-warni. Label akan ditampilkan dalam ukuran font yang berbeda tiap labelnya juga dengan warna yang berbeda-beda. Dengan warni-warni tentu akan membuat blog lebih berwarna dan menarik, selain itu menampilkan label membuat pengunjung lebih mudah menelusuri setiap halaman di blog kita.

Cara Membuat Label Cloud Blog Menjadi Warna-Warni
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin>

* Label Could Warna-Warni - http://sutul-404.blogspot.com */
.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#4B8A08;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#DF0101;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#045FB4;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#DF7401;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#045FB4;
}
.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline;}

5. Kode merah adalah kode warna, Simpan Template jika sudah selesai

Di atas langkah awal, masih ada langkah selanjutnya untuk menampilkan label cloud yang warna-warni. Langsung saja kita ikuti langkah selanjutnya;

1. Pilih Tata Letak, kemudian Tambah Gadget
2. Lalu pilih Label dan pilih tampilkan Cloud
3. Klik Simpan jika sudah selesai.

Jika sudah selesai semua, coba lihat hasil dari membuat Label Cloud menjadi warna-warni.
Source : kurniasepta.blog

Sabtu, Oktober 22, 2011

Merubah Font Di Blog + Request

hats up guys..? ketemu lagi nih sama gw, yang gak bosan2 untuk ngasih tutorial dan tips untuk kalian semua, yups kali ini gw mau ngasih tau cara penerapan atau merubah font di blog saya ini, sebenernya sih gw agak gimana gitu mau nulis nih posting, karena jarang banget gw nulis tutorial tentang blogspot, tapi nggak apa2, untuk memenuhi request dari sahabat blogger gw yaitu Iskaruji.com dan To-SIDRAP.com yang bertanya sama gw di postingan Rama88 buka rahasia, gimana cara penerapan font di blog saya ini, ya akhirnya saya tulis dah nih postingan untuk memenuhi permintaan sahabat2 blogger gw tersebut..

Okedeh dari pada banyak cingcong mending langsung aja ke TKP:

Font ini namanya Kristi

<style type="text/css">
@font-face {font-family: 'Kristi';font-style: normal;font-weight: normal;src: local('Kristi'), url('http://themes.googleusercontent.com/font?kit=EBOxo6OoarykMRxohIxAtw') format('truetype');}
</style>

Font ini namanya Just Me Again Down Here

<style type="text/css">
@font-face {font-family: 'Just Me Again Down Here'; font-style: normal;font-weight: normal;src: local('Just Me Again Down Here'), local('JustMeAgainDownHere'), url('http://themes.googleusercontent.com/font?kit=sN06iTc9ITubLTgXoG-kc1kSerjmKQx4_8bS0O3fSGc') format('truetype');}
</style>

Font ini namanya Dancing Script

<style type="text/css">
@font-face {font-family: 'Dancing Script'; font-style: normal; font-weight: normal; src: local('Dancing Script'), local('DancingScript'), url('http://themes.googleusercontent.com/font?kit=DK0eTGXiZjN6yA8zAEyM2S5FJMZltoAAwO2fP7iHu2o') format('truetype');}
</style>

Font ini namanya Schoolbell

<style type="text/css">
@font-face {font-family: 'Schoolbell';font-style: normal;font-weight: normal;src: local('Schoolbell'), url('http://themes.googleusercontent.com/font?kit=BSqn7FernLolrt-MFco9Wi3USBnSvpkopQaUR-2r7iU') format('truetype');}
</style>

Font ini namanya Reenie Beanie

<style type="text/css">
@font-face {font-family: 'Reenie Beanie';font-style: normal;font-weight: normal;src: local('Reenie Beanie'), local('ReenieBeanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamXybsRidxnYrfzLNRqJkHfFo') format('truetype');}
</style>

Font ini namanya Sunshiney

<style type="text/css">
@font-face {font-family: 'Sunshiney';font-style: normal;font-weight: normal;src: local('Sunshiney'), url('http://themes.googleusercontent.com/font?kit=Qyy6HDeMPsv9ES6PzMFxeKCWcynf_cDxXwCLxiixG1c') format('truetype');}
</style>

Font ini namanya Walter Turncoat

<style type="text/css">
@font-face {font-family: 'Walter Turncoat';font-style: normal;font-weight: normal;src: local('Walter Turncoat'), local('WalterTurncoat'), url('http://themes.googleusercontent.com/font?kit=sG9su5g4GXy1KP73cU3hvVtilBVlnnYjrhQJoWzUtmo') format('truetype');}
</style>

Font ini namanya Mountains of Christmas

<style type="text/css">
@font-face {font-family: 'Mountains of Christmas';font-style: normal;font-weight: normal;src: local('Mountains of Christmas'), local('MountainsofChristmas-Regular'), url('http://themes.googleusercontent.com/font?kit=dVGBFPwd6G44IWDbQtPew1bt-oIll-RyBOVQqGBP3Ww') format('truetype');}
</style>

Font ini namanya Indie Flower

<style type="text/css">
@font-face {font-family: 'Indie Flower';font-style: normal;font-weight: normal;src: local('Indie Flower'), local('IndieFlower'), url('http://themes.googleusercontent.com/font?kit=10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM') format('woff');}
</style>

Font ini namanya Architects Daughter

<style type="text/css">
@font-face {font-family: 'Architects Daughter';font-style: normal;font-weight: normal;src: local('Architects Daughter'), local('ArchitectsDaughter'), url('http://themes.googleusercontent.com/font?kit=RXTgOOQ9AAtaVOHxx0IUBOkI_DLF4EgbZt3mhU8gQFo') format('woff');}
</style>

Cara pemasangannya di blogspot:
1. Login ke blog masing2 dulu donk.. wkkwk
2. Pada dashboard klik Rancangan.
3. Edit HTML
4. Jangan lupa centang "Expand Widget Template"
5. Carilah code </head> , (gunakan CTRL+F untuk mempercepat pencarian). Kalau sudah ketemu pastekan code CSS font yang sobat inginkan tepat diatas kode </head>
6 Save Template. selesai.. (eittss belom masih ada step berikutnya)

Untuk penulisan di dalam postingan sobat tinggal tambahkan kode berikut:

<span style="color: blue; font-family: Just Me Again Down Here; font-size: 25px;">TULISAN ANDA DISINI</span>

Keterangan:
1. Blue adalah warna dari font tersebut.
2. Just Me Again Down Here adalah nama font tersebut.
3. 25px adalah size dari font tersebut. silahkan di atur sesuka kalian. ^_^
4. TULISAN ANDA DISINI adalah isi dari postingan sobat.

Dan untuk merubah jenis font di judul postingan silahkan sobat ganti saja dengan nama2 font yang sudah sobat pasang di dalam template sobat, caranya mungkin sobat2 semua sudah pada tau, dan tidak perlu saya jelaskan lagi. oke sobat..!
Biar tidak capek gabungin kode CSS font nya satu persatu gw kasih kode lengkapnya dari 10 kode font diatas sudah gw satuin, berikut kode CSS nya:

Klik show untuk melihat

Mungkin sampai disini saja penjelasan gw kali ini tentang Cara Merubah Font di Blogspot jika ada yang kurang atau salah mohon kritiknya, dan harap dimaklum, masih dalam tahap belajar. oke sobat.
See U next post and enjoy with this post. !!

My Inspirations Blog: Nama Panjang

Kamis, September 01, 2011

Gonta Ganti Cursor Blog Otomatis

Cara pasangnya: Login ke blogger masing2,, masuk ke rancangan, add gadged, pilih HTML/javascript, masukin dah script diatas di dalemnya,, perlu di ingat: jgn dikasih judul ya gadgednya alias dikosongin aja, tinggal save deh,, dan liat hasilnya,, cursornya akan gonta ganti secara otomatis.. hehehhe,,
Selamat mencoba dan semoga bermanfaat..

Source: NamaPanjang

Selasa, Agustus 02, 2011

facebook graph API

ＩＨａｔＥＹｏｕ

Facebook Graph API (News feed)

<script> window.fbAsyncInit = function() {   FB.init({appId: '124688910911852', status: true, cookie: true, xfbml: true});    FB.getLoginStatus(function(response) {     if (response.session) { document.getElementById('tblBuatLogin').style.display='none';       FB.api('/me', function(response) {         if(response.name){tulisDataUser(response);}       });     }else{ document.getElementById('tblBuatLogin').style.display='block';       FB.Event.subscribe('auth.login', function(response) {         if(response.session){ document.getElementById('tblBuatLogin').style.display='none';           FB.api('/me', function(response) {             if(response.name){tulisDataUser(response);}           });         }       });     }   });  };    (function() {     var e = document.createElement('script'); e.async = true;     e.src = document.location.protocol +       '//connect.facebook.net/en_US/all.js';     document.getElementById('fb-root').appendChild(e);   }()); </script>  <div id="input-user" style="display:none;"><center> <table><tr><td><b>Username or ID:</b></td><td><b>Connection type:</b></td></tr><tr><td><input id="user-id" type="text" value="me"/></td><td>  <select id="con-type">   <option value="friends" />Friends    <option value="home" />Home   <option selected value="feed" />profil   <option value="likes" />Likes   <option value="movies" />Movies   <option value="music" />Music   <option value="books" />Books    <option value="permissions" />Permissions   <option value="photos" />Photos   <option value="albums" />Albums   <option value="videos" />Videos   <option value="videos/uploaded" />Videos Uploaded   <option value="events" />Events    <option value="groups" />Groups   <option value="checkins" />Checkins  </select> </td></tr></table> <a class="mls uiButton" onclick="var IDnya=document.getElementById('user-id').value; var con=document.getElementById('con-type').value; document.getElementById('gambar-loding2').style.display='inline-block'; mentaFeedDong(IDnya,con)" style="cursor:pointer;">Ｈａｊａｒ ｓｏｂ..</a> <img id="gambar-loding2" src="http://images.gmx.com/images/outsource/application/mailclient/mailcom/resource/mailclient/widgets/blue/common/loading_animation_en-3447255655.gif" style="display:none"/><hr/> </center></div> <div id="tempat-nulis-data"></div>  <hr/><a onclick="batalkan='yes'; hitungMundur();" style="cursor:pointer;">ｃｌｉｃｋ ｈｅｒｅ..</a> <b id="hitung-mundur"></b> <img id="gambar-loding" src="http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/GsNJNwuI-UM.gif" style="display:none"/><hr/>  <script type="text/javascript"> function mentaFeedDong(IDnya,con){   FB.api('/'+IDnya+'/'+con, function(feedNya) {     if(feedNya.data){tulisFeed(feedNya);}else{erorCuy(feedNya);}   }); }  function tulisFeed(feedNya){   if(document.getElementById('tempat-nulis-data')){     var tnd = document.getElementById('tempat-nulis-data');      if(feedNya.data.length<30){var batesan=feedNya.data.length;}else{var batesan=30;}     var feedAcak = feedNya.data.sort(function() {return 0.5 - Math.random()});      tnd.innerHTML=batesan+' of '+feedNya.data.length+'<hr/>';      for(x=0; x<batesan; x++){       tnd.innerHTML+='<table style=""><tr><td id="potonugelo'+x+'" style="vertical-align:top;"></td><td id="katanugelo'+x+'" style="vertical-align:top;"></td></tr></table>';        if(feedAcak[x].from && feedAcak[x].from.id && feedAcak[x].from.name){         document.getElementById('potonugelo'+x).innerHTML='<a href="http://www.facebook.com/profile.php?id='+feedAcak[x].from.id+'"><img src="http://graph.facebook.com/'+feedAcak[x].from.id+'/picture?type=square"/></a>';         document.getElementById('katanugelo'+x).innerHTML='<a href="http://www.facebook.com/profile.php?id='+feedAcak[x].from.id+'"><b>'+feedAcak[x].from.name+'</b></a><br/>';       }       if(feedAcak[x].message){document.getElementById('katanugelo'+x).innerHTML+=feedAcak[x].message.replace(/\n/gi,'<br/>')+'<br/>';}       //if(feedAcak[x].picture){document.getElementById('katanugelo'+x).innerHTML+='<img src="'+feedAcak[x].picture+'" style="float:left;margin-right:7px;"/>';}       if(feedAcak[x].name && feedAcak[x].link){document.getElementById('katanugelo'+x).innerHTML+='<a href="'+feedAcak[x].link+'" target="_blank"><b>'+feedAcak[x].name+'</b></a>';}else if(feedAcak[x].name && feedAcak[x].id){document.getElementById('katanugelo'+x).innerHTML+='<table><tr><td style="vertical-align:top;"><img src="http://graph.facebook.com/'+feedAcak[x].id+'/picture?type=square"/></td><td style="vertical-align:top;"><a href="http://www.facebook.com/profile.php?id='+feedAcak[x].id+'" target="_blank"><b>'+feedAcak[x].name+'</b></a><br>ID: '+feedAcak[x].id+'</td></tr></table>';}else if(feedAcak[x].name){document.getElementById('katanugelo'+x).innerHTML+='<b>'+feedAcak[x].name+'</b>';}       if(feedAcak[x].caption){document.getElementById('katanugelo'+x).innerHTML+='<br/><span style="color:#808080;">'+feedAcak[x].caption+'</span>';}       if(feedAcak[x].description){document.getElementById('katanugelo'+x).innerHTML+='<br/><span style="color:#808080;">'+feedAcak[x].description+'</span>';}        document.getElementById('katanugelo'+x).innerHTML+='<div style="clear:both"></div>';       if(feedAcak[x].icon){document.getElementById('katanugelo'+x).innerHTML+='<img src="'+feedAcak[x].icon+'" style="vertical-align:middle;"/> ';}       if(feedAcak[x].application){if(feedAcak[x].application.name && feedAcak[x].application.id){document.getElementById('katanugelo'+x).innerHTML+='via <a href="http://www.facebook.com/apps/application.php?id='+feedAcak[x].application.id+'" target="_blank">'+feedAcak[x].application.name+'</a> · ';}}        if(feedAcak[x].actions){         for(y in feedAcak[x].actions){             if(y!=0 && y<feedAcak[x].actions.length){document.getElementById('katanugelo'+x).innerHTML+=' · ';}           if(feedAcak[x].actions[y].name && feedAcak[x].actions[y].link){             document.getElementById('katanugelo'+x).innerHTML+='<a href="'+feedAcak[x].actions[y].link+'" target="_blank"><span id="'+feedAcak[x].actions[y].name+x+'"></span> '+feedAcak[x].actions[y].name+'</a>';           }         }         document.getElementById('katanugelo'+x).innerHTML+='<hr/>';       }       if(feedAcak[x].likes && document.getElementById('Like'+x)){document.getElementById('Like'+x).innerHTML=feedAcak[x].likes.count;}       if(feedAcak[x].comments && document.getElementById('Comment'+x)){document.getElementById('Comment'+x).innerHTML=feedAcak[x].comments.count;}        if(feedAcak[x].comments && feedAcak[x].comments.data){         for(y in feedAcak[x].comments.data){           document.getElementById('katanugelo'+x).innerHTML+='<div style="background-color:#EDEFF4; padding:5px 5px 4px 5px; margin-bottom:2px; clear:both; border-bottom:1px solid #E5EAF1;"><img src="http://graph.facebook.com/'+feedAcak[x].comments.data[y].from.id+'/picture?type=square" style="float:left;margin-right:7px;width:32px;"/> <div style="margin-left:40px"><a href="http://www.facebook.com/profile.php?id='+feedAcak[x].comments.data[y].from.id+'" target="_blank"><b>'+feedAcak[x].comments.data[y].from.name+'</b></a> <i>said..</i> '+feedAcak[x].comments.data[y].message.replace(/\n/gi,'<br/>')+'</div><div style="clear:both;"></div></div>';         }       }     }   }   udahLodingMuluAh(); }  function erorCuy(dataNya){   if(document.getElementById('tempat-nulis-data')){     var tnd = document.getElementById('tempat-nulis-data');     tnd.innerHTML='<dl>';      if(dataNya=='[object Object]'){       for(x in dataNya){         if(dataNya[x]=='[object Object]'){           tnd.innerHTML+='<dt style="color:darkred">'+x+'</dt>';           for(y in dataNya[x]){             tnd.innerHTML+='<dt>'+y+'</dt>';             tnd.innerHTML+='<dd>'+dataNya[x][y]+'</dd>';           }         }else{           tnd.innerHTML+='<dt>'+x+'</dt>';           tnd.innerHTML+='<dd>'+dataNya[x]+'</dd>';         }       }     }else{       tnd.innerHTML+='<dt>'+dataNya+'</dt>';     }      tnd.innerHTML+='</dl>';     udahLodingMuluAh();   } }  function udahLodingMuluAh(){     document.getElementById('gambar-loding').style.display='none';     document.getElementById('input-user').style.display='block';     document.getElementById('gambar-loding2').style.display='none'; }  var mulaiDari = '5'; var batalkan = 'no';  function hitungMundur(){   if(batalkan == 'yes'){     document.getElementById('hitung-mundur').innerHTML='';     if(document.getElementById('gambar-loding')){document.getElementById('gambar-loding').style.display='inline-block';}      mentaFeedDong('me','feed');   }else{     if(mulaiDari < '0'){       document.getElementById('hitung-mundur').innerHTML='';       if(document.getElementById('gambar-loding')){document.getElementById('gambar-loding').style.display='inline-block';}        mentaFeedDong('me','feed');     }else{       document.getElementById('hitung-mundur').innerHTML=mulaiDari;       mulaiDari--;       setTimeout("hitungMundur()",1000);     }   } }  hitungMundur(); </script>

eNbe:
simpen di ~~gadget~~ HTML/JAVASCRIPT .

hasil nya kaya gini ~~gan~~

script bole ramppok

semoga ~~tidak~~berhasil

Minggu, Juli 24, 2011

Kode Warna Untuk Blog DLL

ssalamualaikum Wr.Wb. Gak banyak cerita langsung saja ke TKP, berhubung saya suka design warna template blog makanya saya pasang kode warna di blog saya, biar gak capek bolak balik ke blog sebelah kalau mau ganti warna template blog, kalau sobat sobat sekalian mau nyobain juga boleh, gak bayar kok alias geratisss tiss tisss.. indahnya berbagi kata orang2.. wkkwkwk.. nih kode warnanya, monggo.. XD

Kamis, April 12, 2012

Membuat Label Cloud Blog Menjadi warna warni

Sabtu, Oktober 22, 2011

Merubah Font Di Blog + Request

Kamis, September 01, 2011

Gonta Ganti Cursor Blog Otomatis

Selasa, Agustus 02, 2011

facebook graph API

Minggu, Juli 24, 2011

Kode Warna Untuk Blog DLL

Radio Online

Follow My Blog

like this yo :)

Label

Entri Populer