Tempat Tutorial Blogspot, SEO, HTML5, CSS3, Facebook, Twitter, Software, Game, Motivasi, Tips dan Trik.

Latest Post
Twitter Facebook

10:01 2 ,
Widget random posts sangat berguna agar postingan sobat yang jarang terbaca memiliki kemungkinan untuk terbaca, sekaligus menambah page-views pada postingan tersebut dan blog sobat.

LANGKAH LANGKAHnya

1. Login ke Blogger

2. pilih menu "Tata Letak"

3. Pilih "Tambahkan Gadget" => "HTML/JavaScript", dan Paste-kan kode berikut :



 
 <script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://KENAMA.BLOGSPOT.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>

Keterangan:
Ganti KENAMA.BLOGSPOT.com dengan alamat web/blog sobat

 4. Klik simpan, Dan lihat hasilnya.
Terimakasih telah mengunjungi Blog saya :D
Twitter Facebook

10:56

Hallo Sobat Blogger, kali ini saya akan share bagaimana Cara Menambahkan Emoticon Pada Blog , Emoticon Ini menggunakan konsep JQuery. Ini adalah fasilitas emoticons otomatis yang dapat merubah simbol :), :D, :P, menjadi sebuah gambar yang telah ditentukan. Oke langsung saja lihat langkah langkahnya dibawah ini : 

langkah langkah

1. Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Cari kode ]]></b:skin>, agar lebih cepat, gunakan fasilitas Find ( CTRL+F ) lalu pastekan script dibawah ini  tepat diatas kode ]]></b:skin>. 

 /* Emoticon Smiley -------------------------------------------- */ 
.emoWrap {
  background-color:#fff;
  border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}

2. Kemudian, Cari kode </head>. Lalu pastekan script dibawah ini tepat diatas kode </head>. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode.";
//]]>
</script>
<script src='https://sites.google.com/site/airalokablogspotcom/download/Emoticon%20Smiley.js' type='text/javascript'/>

3. Save/Simpan template

Selamat Mencoba :D
Twitter Facebook

10:45 ,
Facebook banyak digunakan para blogger untuk lebih memperkenalkan hasil postingan di blog/website yang dimilikinya salah satunya dengan cara membuat Fans Page blog/web itu sendiri nah sobat blogger. Kali ini Kenama akan menyajikan kepada anda bagaimana cara Membuat Facebook Slide Box Widget jQuery Effect agar Fans Page Facebook Blog/web anda dapat tampil di blog/web anda. untuk previewnya kurang lebih seperti gambar dibawah ini :

LANGKAH LANGKAHNYA

1. Seperti biasa Login dulu ke akun Blogger sobat
2. Kemudian klik "Template" Klik "Edit HTML"
3. Jangan Lupa Cetang "Expand Template Widget"
4. Cari Kode <head> Gunakan Ctrl+F untuk mempercepat pencarian
5. Copy Paste Kode JavaScript  Dibawah ini Tepat dibawah kode  <head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

6. Save Template
7. Kemudian Copy paste Kode HTML dibawah ini, Caranya ;
    a.  Klik Tata Letak
    b.  Klik Add Widget
    c.  Klik HTML/JavaScript dan taruh Kode dibawah ini :

<!-- Facebook Widget Start --><script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.rblikebox{background: url("URL GAMBAR") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}.rblikebox div{border:none;position:relative;display:block;}.rblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}.rblikebox span a{color: gray;text-decoration:none;}.rblikebox span a:hover{text-decoration:underline;}</style><div class="rblikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/kenama.blog&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div><a href='http://Kenama.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqBcEmrpNpcPoIpSUXHDITDhPT0qN8vYo3lREN0HTHh6uacExVe4qkKQE6-nkoYWuRV8yLYYKAmQhW7lDGu17z95gr0UejBssKXdomTghRUC6qJ7Yp-2ZinM2v7jKDdEcPyOA5zrA2NJ4/s1600/1x1juice.png'/></a></div><!--Realcombiz Widgets by realcombiz.com --><!-- Facebook Widget End -->

8. Save and enjoy
Note : Ganti Tulisan URL GAMBAR dengan salah satu url gambar dibawahGanti Tulisan kenama.blog dengan alamat Fans Page facebook Sobat

URl gambar



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6c5U-CfYLV8uPO_X8vO3DXGyH_Qc6SthUE_Tj7jpR3SH8CfOXa1NcgPuD6gRCMkYdClg_-lBY7ydx-ARUOh8aRRW3mbcECkEIKs9rl8KxOePH32IdY6r_hpmljR4DrYtE4QDAI35UXng/s1600/rb%20facebook%20slide%20out%20widget%201.png 




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-NGhOMuqomCXlE0-lecGr8iSr4eRke5kb4X5ZyCoPCHBbBJiNRVgyeaoLK9pE3zS_4AZr8zlyWxQh-c8oWlgdsi2hWeyOZM3THDGahbopadriGh0esZSXdFNrSDmicFivtAeB0CeqFg/s1600/rb%20facebook%20slide%20out%20widget%202.png 




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSfGWjd4BQrDSvnjtBh1fe1s7k51_01z2YUMpgJultU_WonDeKEUJVXV12PW8fkg_3mFRiVg4Krvhm2zxi5Mqeeo7XG-mdMjh4oaCCzq8QR-9CStUwHTOYo1OHk2j6DqyY-ftCdujxUg/s1600/rb%20facebook%20slide%20out%20widget%203.png
Twitter Facebook

09:27 ,

langkah langkahnya

  1. Masuk ke Blogger.com
  2. Pilih Tata Letak => Tambah Gadget
  3. Pilih HTML/JavaScript dan masukkan kode dibawah ini kedalamnya
<script src="https://sites.google.com/site/bloggerbondowosoblogspotcom/js/tripleflap.js" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_MTgl_-8zO1T_Z7krf3WtCv_SEqzUHh3Zj1ulOu0XmDCjyXecHsP3nNWwLy5M-EliUovvJ98vNIT7Hpi_PSMZwziEt_RvHQTv6d1kbhj8KWkS4i1D3rTO05sEV703VnTHwZhVnq7BLF0/s1600/yellow+bird.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/nama akun twitter anda";
var tweetThisText = "Twitter - UserID";
tripleflapInit();
</script>

Ganti kode warna Merah dengan akun twitter anda
Ganti Warna Kuning Dengan URL gambar Animasi Burung Twitter

Dibawah ini ada beberapa gambar untuk burung twitter, silahkan anda ganti gambar twitter yang berwarna biru dengan kode yang ada dibawah ini.

1. Burung Twitter Warna Putih :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Ied41D5oSowmkMNs6jKmeoeTlSmvk6pzItE6Mq-yQXg43MPpqOEejzMmYa3wJitEaaewRNOIywj8pitASomwQna_vghvipuQYl7AI5uZPsLWMMFwvgGqggZXoLVQLWg3Lnb5ll47pMc/s1600/white+bird.png


2. Burung Twitter Warna Merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhCkZRxiJYZuLk6AMLmY4RzEpnynxej7suDpFRY0xcJzkIGOmUexkt6C8T3-eetkCSVYSzNxxeKf-Ahc8TCIInd_JYJEiEhIkAoXyFSbTuvq58Oeuci7k0fwW8DbRrwzOn2saZBMX6eFs/s1600/red+bird.png


3. Burung Twitter Warna Unik 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_IhqhuedrQkW58rKVEBJG0zdo1RG2Yi-FWemCKr5Xqzm-sL8OqfhMzVfWCIR4f_54Thq4pvcbT-m_cP7c-mmOuItr3OpxNwbPQPEkt-hGLVKLthBqSfeT9k3pH0_4ga5ucr1dKM6_W-U/s1600/twitter+bird+unik.png
4. Burung Twitter Warna <b>Unik 2</b>

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPLHc2yPKgrc1S3xhmPnfC-I7dnvHWiWAJVViQz8M4RavGWeWaytOJDpdJCDgPEIsrenLbxXPzNeB-fSLM9B1Pa6Ts_lS1YS9eWrQEb97WYY83dnUwk9owgigLrXPobsIFxhzY93vJPhs/s1600/twitter-b22ird-unik.gif














































Twitter
Facebook


































08:34





,











Hallo Sobat KB, Kali ini saya akan posting tentang Cara Mempercepat Loading Blog. Silahkan simak dibawah ini :















Tips mempercepat loading blog


    

  1. Mempersingkat Tampilan awal atau home blog dengan Readmore di setiap halaman posting. Dengan begitu loading blog dihalaman awal blog akan terbuka lebih cepat.
    2. 

  2. Mengurangi atau mendelete widget yang tidak diperlukan, seperti widget jam, tanggal dan lain-lain. Jika memang tetap ingin mempertahankan widget2 tersebut, tempatkan widget di bagian footer bawah blog. Maka loading blog akan sedikit bertambah cepat, karena bagian-bagian terberat blog akan dibuka belakangan. 
    3. 

  3. Menampilkan 4 sampai 5 posting saja di halaman beranda blog. 
    4. 

  4. Jangan terlalu banyak menggunakan gambar di blog.
    5. 

  5. Kompres gambar yang akan dimasukan di blog, menggunakan Ms. Office Picture Manager atau software Compress gambar lainnya.
    6. 

  6. Menghilangkan gambar tang & obeng diblog,  yang berada di setiap bagian widget yang digunakan.
    7. 

  7. Compress Template Blog. Caranya, silakan lihat di bawah.
    8. 

  8. Menghilangkan sidebar widget pada halaman tertentu. Caranya, lihat dibawah.
    9. 

  9. Mengatur lebar gambar agar tidak melebihi halaman posting.
    10. 










TRik mempercepat loading blog



Sebelumnya, test dulu kecepatan blog agan di situs ini http://gtmetrix.com. Untuk melihat berapa skor kecepatan dari blog agan. Selanjutnya, setelah melakukan cara-cara dibawah ini, test kembali kecepatan loading blog agan di situs tersebut, untuk melihat berapa besar perbedaannya.









cara kompres TEMPLATE blog






    

  1. Login ke blog, Dari halaman dasbor pilih pengaturan template.
    2. 

  2. Edit HTML dan Copy semua kode yang ada di template kamu dari awal sampai akhir.
    3. 

  3. Selanjutnya kunjungi situs http://htmlcompressor.com/compressor.html
    4. 

  4. Dan Pastekan semua kode tadi ke kotak yang ada disitus tersebut.
    5. 

  5. Setelah itu click COMPRESS dan pilih CHANGE
    6. 
cara kompres template blog

  6. Terahir, Copy semua kode hasil compress tadi, dan pastekan ke template blog kamu. Save template, Selesai.
    7. 




Mudah-mudahan bermanfaat bagi semua :D



Source : fandra juani


















































Twitter
Facebook


































09:02











droidpluss



















    

    

    

    
BEBERAPA FITUR TEMPLATE droidpluss
    

    

      

    • Responsive cek -> disini
      • 

    • Valid HTML5 pada Homepage cek -> disini
      • 

    • Valid HTML5 pada postingan cek -> disini
      • 

    • Valid CSS3 cek -> disini
      • 

    • SEO 100% cek -> disini
      • 

    • Sticky Widget
      • 

    • Back to top
      • 

    • Customized Deleted Comment
      • 

    • Smooth scroll to comment hash
      • 

    • dll.
      • 

    

    

    

    
jika ingin menghapus credits Anda bisa membeli versi premiumnya
kepada pembuat templatenya
    

    

    
Terimakasih Telah mengunjungi blog saya Dan jangan lupa untuk berkomentar
    

    
Thanks To Kang Ismet

    

    

    

    

    

    

    

    

    


    


    

    

    


    

    

    

    



    


    



    

    

    



    

    

    





    

    

    

    MKRdezign
    

    

    

    

    

    

    

    Contact Form
    

    

    

    
Name

    


    
Email
*

    


    
Message
*

    



    

    

    

    

    

    

    


    


    

    

    

    

    





    

    

    

    

    

    

    

    

























    

    


    

    

    
Powered by Blogger.

    

    

    

    

    


    

    


    

    Javascript DisablePlease Enable Javascript To See All Widget