Diajar BLOG

<!-- Blogger Sunda by www.yoga-tc.blogspot.com -->
<script src="https://googledrive.com/host/0By9Vs49VphQqVFpvUXlfY0tQRkU" type="text/javascript"></script><script type="text/javascript"> cot("http://i.imgur.com/e13tcHD.png")</script>
<!-- End Blogger Sunda by www.yoga-tc.blogspot.com -->

Klik Zoom aja kalau mau diperbesar yaaa 

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSVCjzNeN818PRBA-hS01Y7q8wQkCxQnD430sFzZnd8S4DBxZcguMKG2tNV0a_ErRS6AFZ1t8B86RoPAAFdD2F8x962RJ2dDGeXPe70SShfpxGh0Rnya9K94ys40J2XWPoaIsAkO3Rpps/s124/SP_A4083.jpg'/>
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.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href=' http://websitepunyague.blogspot.com/2012/09/cara-membuat-kotak-tentang.html ' target='_blank'>:: Buat Widget Seperti Ini ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
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 Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
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 #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

#Label1 .widget-content{ height:150px; width:auto; overflow:auto; }

 

#PopularPosts1 .widget-content{ height:150px; width:auto; overflow:auto; }

Images Source : Yoga-Tc BLOG

• Yang pertama pastinya, anda sudah Login ke Blogger.com!
• Silahkan Masuk Ke Tata Letak / Page Element
• Silahkan klik tambahkan Gadget -> Pilih HTML/Javascript
• Lalu Masukan Kode dibawah ini

<script type = "text/javascript">
var randarray=new Array();
var l=0;
var flag;
var numofpost=5;
</script>
<script src="https://googledrive.com/host/0By9Vs49VphQqaDFNWTNZZVlMR2s" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"type="text/javascript"></script>

<!-- Start Backlink Code --><a title="SEO Links Exchanges | Blog Link Building Service" target="_blank" href="http://seo-links-exchanges.blogspot.com/"><img width="80" alt="SEO Links Exchanges, Blog Link Building Service" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdB9LvUmsvtQdxzsz1Xc1vl-s2c4JDy47q6fq5Zq9mW09Xqolv1u-35tsYyWf-IHhBlCEGtUw-mvUZZ4ZW8y_LOdY_pzAgegi_qAg5dvuvTigrTz_jhmscIcrgeaRWut2CuZEhT3Wdyho/s1600/Free+Links+04.png" height="15" /></a><!-- End Backlink Code -->  <!-- Start Backlink Code --><a title="Build Your Links For Free | Links Building Service" target="_blank" href="http://free-links-building.blogspot.com/"><img width="80" alt="Build Your Links For Free, Links Building Service" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8moEk1uVPdiz2B3gBawD7mnhtsvjT19RqrEv5unmRiZlF13E3BD_T3-vwX9BkPM3RkTKcaHMN4Yx9kphgWF9B0URSfJH7mBMELN7fBe1MMbiwtCOjx5bGo5dxyHGscWru41_V4rr0lqEr/s1600/Free+Links+03.png" height="15" /></a><!-- End Backlink Code -->  <!-- Start Backlink Code --><a title="SEO Links Attitude | Free SEO Links Building " target="_blank" href="http://free-links-exchanges.blogspot.com/"><img width="80" alt="SEO Links Attitude | Free SEO Links Building " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUcr_8ptVGf2FoOjiqJT62TDJYn914bhxqcKyPs4meu3PUJl-LtAiN8E8yKb-BzRzTnkPFApEoyCdhrfkn8_VkDYhFek2UmqdX18m4flA1PPRJ4AwhKWluxyRUvA_npGOLuXT3mBRVDAE/s1600/Free+Links+02.png" height="15" /></a><!-- End Backlink Code -->  <!-- Start Backlink Code --><a target="_blank" href="http://linux-tutor-and-tips.blogspot.com/"><img width="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yrfqCTdJXTI8e0JJpr9vuMQwEK1xKwnR8fRGXeX0BEvs644CCn_XthlP3WHnUTdlqmoQn5it3XHObKv10o6c26AEFwyw6vKubyWiF58Zcp0R8hiwdcHslasKGug6w49b-6zIyBNfbRA/s1600/Free+Links+01.png" height="15" /></a><!-- End Backlink Code --> <!-- Start backlink -->  <!-- Start Backlink Code --><a title="Free Backlink Service, Links Building 4 Free" target="_blank" href="http://free-backlink-service.blogspot.com/"><img width="80" alt="Free Backlink Service, Links Building 4 Free" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqV_HcqdrG9AgA7BYMRVsckK0VNuGT2JxsindaANsbzM2uTiqAuJyVm0t-m_3UubEy3LM8wFuhOFdH-VVtskRCPq2rDdRhynO46wnYafzTexTdSlJ4zapvhlP8_I7sPbXTlQxoEf3i8xc/s1600/Free+Links+05.png" height="15" /></a><!-- End Backlink Code -->

Apakah anda pernah melihat blog seseorang yang mempunyai peliharaan berupa burung atau burung twitter? :D

<!-- floating twitter Bird http://masgober.blogspot.com -->
<script type="text/javascript" src="http://p4r46h-blog.googlecode.com/files/twitterfloat.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvk4ek9Z8uc7LnahRRMRQbUAZhPubrE2-xY4WxhLOg5rhbMs4U1Med3xyyqE_M5b5eI9Q4_IWMmEgnrN8gdaQrxlV9A-PPqDmFmMHjrFhPhnWltbj0fwjCWli7FrJePtW3WmReMT6gcAO/s1600/original.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 = "http://twitter.com/D27399_ ";var tweetThisText = "follow me";tripleflapInit();
</script>

<a href="https://twitter.com/keheds321" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="true">Follow @keheds321</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

“<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbsederhana.id&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=417513225020019" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe>”

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href=" http://svshare7.blogspot.com/ ">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href=" http://masgober.blogspot.com/ ">Get This Widget</a></p>
</div>

• Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode </head> (kode javascript ini dengan ID #sidebar-wrapper :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Sembunyikan semua tubuh widget (tutup semua panel)
    $('#sidebar-wrapper .widget-content').hide();
    // Tambahkan class 'active' pada elemen <h2> pertama
    // kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    // Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            // Sembunyikan semua panel yang terbuka dengan efek .slideUp()
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            // Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

<!-- Sidebar Akordion dengan JQuery dari Blog Krizeer (www.yoga-tc.blogspot.com) -->
<script type='text/javascript'>
//<![CDATA[
// sidebar
$(function(){$('#sidebar-wrapper .widget-content').hide();$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');$('#sidebar-wrapper h2').css('cursor','pointer').click(function(){$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');if($(this).next().is(':hidden')){$(this).addClass('active').next().slideDown('slow')}else{$(this).removeClass('active').next().slideUp('slow')}})});
//]]>
</script>

<div id='sidebar-wrapper-2'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>

 <div id='sidebar'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>

#PopularPosts1 {width:100%;background:none;}
#PopularPosts1 .widget-content {margin: 0 !important;  }
#PopularPosts1 ul {margin: 0 !important;  padding: 0 !important;  }
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#PopularPosts1 ul li .item-title{display:none}
#PopularPosts1 li {float:left;list-style:none;}
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;width:90px;height:90px;border:none;transition:all 400ms ease-in-out;}
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

<div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>

<div class='item-thumbnail'>
                  <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                    <img alt='thumbnails' expr:src='data:post.thumbnail' expr:title='data:post.title' height='90' width='90'/>
                  </a>
                </div>

#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important;  padding: 0 !important;  }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}

<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=9;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimVrR_NT7OBP8HEsIF67Wae2P5Ivcl4jAfMsW3T0szkN27Qh7Q5hmi40mL6oV2LFWvi8r8dxY-LTqVSGqiQGa9Ue_ZEUSRkx7oWPEtv-dUF0M0RWmvg1XE9ItRvHkKGt3pZhnZFZiDgR48/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>