Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Cara Membuat Like Box Valid XHTML (Like Box Mini Seperti Saya)

Hay sob...udah lama nich saya gak posting artikel.Saya udah malaz posting artikel,ini pun saya posting artikel karena terpaksa.Tadi barusan teman saya nanyak ke saya yaitu Dicky Asep Pratama "Gan,cara buat fanspage kayak punya agan itu gimana ya gan,tadi saya udah coba tapi gag jadi jadi"
Yaudah dech terpaksa saya kasih tahu dan terpaksa juga saya posting,ya gpp lah anggap ajha berbagi ilmu.
Oh ya sob kali ini saya share langsung dengan ukuran mini seperti punya saya ya.Jadi kalau template anda mirip dengan saya atau yang pakai template lutfiezone white gak usah pakek edit ukurannya  lagi karena ukurannya udah pas.Ini contoh like box valid XHTML saya :
 
Gimana tertarik membuatnya,buat yang tertarik silahkan ikuti tutorialnya di bawah ini !
1.Login ke akun blogger sobat.
2.Klik Rancangan-->Tambah Gadget-->Pilih HTML/JavaScript
3.Copy dan pastekan kode di bawah ini !
<div id="fb-root"></div>
<script type="text/javascript">
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div id="FbCont">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var fb = document.createElement('fb:like-box');
fb.setAttribute("href","http://www.facebook.com/pages/ALDI-RAYFALDO-PUTRA/115641668551019");
fb.setAttribute("show_faces","false");
fb.setAttribute("header","false");
fb.setAttribute("stream","false");
fb.setAttribute("height","95");
fb.setAttribute("width","200");
fb.setAttribute("font","segoe");
document.getElementById("FbCont").appendChild(fb);
//--><!]]>
</script>
</div>
4.Ganti kode yang berwarna merah diatas dengan url/link fans page blog anda
5.Simpan dan lihat hasilnya.

Posted By Ray Faldo07.48

Cara Membuat Widget Ganti Background Blog

Sob ini udah malem saya udah ngantuk jadi kita gak perlu basa basi lagi ya kita langsung ke tutorialnya ajha.
1.Login ke akun blogger sobat
2.Klik Rancangan-->Tambah Gadget-->Pilih HTML/JavaScript
3.Copy kode di bawah ini
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script><table width="100%" height="15px" border="1px">
<tbody><tr style="text-align: center;font-weight:bold; color:Black;">
<td onclick="bgChange('url(http://img338.imageshack.us/img338/3518/tesxa.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">V</td>
<td onclick="bgChange('url(http://img585.imageshack.us/img585/964/tesou.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">A</td>
<td onclick="bgChange('url(http://img694.imageshack.us/img694/2540/tesaz.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">R</td>
<td onclick="bgChange('url(http://img849.imageshack.us/img849/2701/tesbi.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">I</td>
<td onclick="bgChange('url(http://img192.imageshack.us/img192/4752/blog4ys.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">A</td>
<td onclick="bgChange('url(http://img542.imageshack.us/img542/7716/blog5.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">S</td>
<td onclick="bgChange('url(http://img406.imageshack.us/img406/6034/tesjb.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">I</td>
<td onclick="bgChange('url(http://img59.imageshack.us/img59/1149/tesp.jpg) repeat-x fixed top center')" bgcolor="#FFFFFF">!</td>
</tr>
</tbody></table>
4.Ganti teks yang berwarna merah sesuai background yang sobat inginkan.
5.Simpan dan lihat hasilnya.
Semoga Bermanfaat.
Like artikel ini ya gan !

Posted By Ray Faldo09.08

Cara Membuat Google Translate Bendera

Hey sobat blogger,udah lama nich saya gak mosting karena lagi sibuk (ciiiiiiiiiieeeeellahh mank gua sibuk ngapain ya?) ngakak
Oke kali ini saya akan share Cara Membuat Google Translate Bendera.
1.Pertama-tama baca doa dulu biar hasilnya 100% muncul/bagus doa
2.Login ke akun blogger sobat
3.Klik Rancangan-->Tambah Gadget-->HTML/JavaScript
4.Copy kode di bawah ini
<div class='widget-content'>
        <div id='crosscol-wrapper' style='text-align:center'>
        <br/><style>

              .google_translate img {
              filter:alpha(opacity=100);
              -moz-opacity: 1.0;
              opacity: 1.0;
              border:0;
              }
              .google_translate:hover img {
              filter:alpha(opacity=30);
              -moz-opacity: 0.30;
              opacity: 0.30;
              border:0;
              }
              .google_translatextra:hover img {
              filter:alpha(opacity=0.30);
              -moz-opacity: 0.30;
              opacity: 0.30;
              border:0;
              }
              </style>

              <div>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/UK%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/France%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/Deutschland%20Germany%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/Spain%20Espanya%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/Italy%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/Nederlands%20Netherlands%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <br/><br/>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/Russia%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://lh3.googleusercontent.com/-1-vTFifnr1I/Tjk3zNil2iI/AAAAAAAAAr4/3OLyA4EOics/Portuguese%252520Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/Japan%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://lh5.googleusercontent.com/-KJ7PRXE7apg/TjkxCjzh7pI/AAAAAAAAArc/ZUoFuAx79eI/Korea%252520Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/Arabia%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>

              <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7czh-cn&hl=en'); return false;"><img alt="Chinese" border="0" align="absbottom" title="Chinese" height="32" src="http://www.veryicon.com/icon/32/Flag/Not%20a%20Patriot/China%20Flag.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="32"/></a>
              </div> <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div></div>
        </div>
<div style="text-align:center">
    <span style="float:right; color:#000000;">Get this <a target="_blank" href="http://aldirayfaldoputra.blogspot.com/2012/06/cara-membuat-google-translate-bendera.html"> widget! </a></span>
    </div>
   
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (50-gb.offsetWidth).toString() + "px";
    </script>
5.Simpan dan lihat hasilnya
Semoga bermanfaat...

Posted By Ray Faldo23.55

Cara Memasang Widget Alexa Rank Di Blog

Hey sobat blogger,apa kabar? mudah-mudahan baik baik ajha ya.
Pada postingan kemarin aku udah ngejelasin Cara Memasang Emoticon Di Postingan Blog dan kali ini aku akan share Cara Memasang Widget Alexa Rank Di Blog.
Langsung saja kita ke TKP.
1.Masuk ke Alexa Widget atau langsung klik disini
2.Masukkan url anda ke kotak yang tersedia

3.Lalu pilih widget sesuai ukuran yang anda inginkan,seseudah itu copy dan pastekan kode itu ke notepad atau MS Word...

Cara pemasangannya ke blog,sebagai berikut
  • Masuk ke akun blogger sobat
  • Klik Rancangan-->Tambah Gadget-->HTML/JavaScript
  • Lalu copy dan pastekan lagi kode yang berada pada notepad/MS Word tadi
4.Simpan dan lihat hasilnya
5.Like artikel ini yea sob please

Posted By Ray Faldo21.40

Cara Membuat Efek Gambar Profil Keren Di Blog

1.Login ke akun blogger sobat
2.Cari kode .profile-img {
3.Lalu copy dan pastekan kode berikut tepat di samping kode {     
*Kalau udah ada kode lain setelah kode { di hapus aja terus ganti dengan kode di bawah ini !
border: 8px solid #aaa; border-radius: 6px; box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; background:transparent; float:left; margin:0 10px 5px 0; padding:0}
.profile-img:hover { opacity: 1.0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-box-shadow: 1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F; margin: 40px 0px 20px 10px; -o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s; -moz-transition: margin 1.5s ease-in 0.1s, ease-out 1.4s, opacity 1s ease-in 1s; -webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;}
.profile-data{color:red; margin:0; padding:0; letter-spacing:.1em; font-weight:bold}
.profile-datablock{margin:0}
.profile-textblock{margin:5px 0}
.profile-link{color:red; font-size:12px; letter-spacing:.1em}
 4.Maka hasilnya akan seperti ini
.profile-img {
border: 8px solid #aaa; border-radius: 6px; box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; background:transparent; float:left; margin:0 10px 5px 0; padding:0}
.profile-img:hover { opacity: 1.0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-box-shadow: 1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F; margin: 40px 0px 20px 10px; -o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s; -moz-transition: margin 1.5s ease-in 0.1s, ease-out 1.4s, opacity 1s ease-in 1s; -webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;}
.profile-data{color:red; margin:0; padding:0; letter-spacing:.1em; font-weight:bold}
.profile-datablock{margin:0}
.profile-textblock{margin:5px 0}
.profile-link{color:red; font-size:12px; letter-spacing:.1em}
5.Simpan dan lihat hasilnya
Semoga bermanfaat.... :)

Posted By Ray Faldo21.35

Cara Membuat Daftar Isi Di Sidebar Blog

 
Saya akan memposting Cara Membuat Daftar Isi Di Sidebar Blog seperti gambar yang di atas.
Untuk cara membuatnya silahkan ikuti  langkah langkah berikut ini !

1.Login ke akun blogger sobat
2.Klik Rancangan-->Tambah Gadget-->HTML/JavaScript
3.Lalu copy dan pastekan kode di bawah ini
<div style="background:#000000; no-repeat scroll 0 0; border:2px solid #FFFFFF; height:400px; overflow:auto; padding:10px; width:205px;">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 250;
</script>
<script src="http://tateluproject.googlecode.com/files/DaftarMenuOtomatis.js">
</script>
<script src="http://aldirayfaldoputra.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script></div>
4.Ganti teks yang berwarna merah di atas dengan url blog anda
5.Simpan dan lihat hasilnya

Semoga bermanfaat
:)

Posted By Ray Faldo22.19

Cara Membuat Kotak Tukaran Link (Link Exchange)

1.Login ke akun blogger sobat
2.Klik Rancangan-->Tambah Gadget-->HTML/JavaScript lalu copy dan pastekan kode di bawah ini

<a href="http://aldirayfaldoputra.blogspot.com/" target="_blank">
<img src="http://images.cooltext.com/2623692.gif" title="KLIK!" height="50" width="200" border="0" /></a>
<!------------------------------------------------------------>
<textarea rows="3" cols="16">&lt;a href="http://aldirayfaldoputra.blogspot.com/" target="_blank"&gt;&lt;br&gt;&lt;img border="0" width="200" src="http://images.cooltext.com/2623692.gif" height="34" title="KLIK!"/&gt;&lt;/a&gt;</textarea>
3.Simpan dan lihat hasilnya

Sedikit tambahan:
Teks yang berwarna merah di atas ganti dengan url blog kamu
Teks yang berwarna hijau di atas ganti dengan url gambar kamu.

Semoga bermanfaat.
:)

Posted By Ray Faldo22.04

Cara Membuat Related Post / Artikel Terkait

1.Login ke akun blogger sobat
2.Cari kode </head>
3.Copy dan pastekan kode 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>
4.Kemudian cari lagi kode <data:post.body/>
5.Copy dan pastekan kode 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>
6.Simpan dan lihat hasilnya
Semoga bermanfaat!
Jika anda merasa terbantu dengan artikel ini,tolong di like yea?

Posted By Ray Faldo07.03

Cara Membuat Recent Post Dengan Gambar Bergerak

1.Masuk ke akun blogger sobat
2.Klik Rancangan-->Tambah Gadget-->HTML/JavaScript
3.Copy dan pastekan kode berikut ini

<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://www.aldirayfaldoputra.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>
4.Ganti teks berwarna merah diatas dengan url blog anda
5.Simpan dan lihat hasilnya
:)

Posted By Ray Faldo06.32