Membuat Burung Twitter Terbang Di Blog

Membuat Burung Twitter Terbang Di Blog, lucu yah judulnya hihihi... Sebenarnya postingan yang kaya gini dah banyak beredar tapi saya mau rilis kembali di tahun 2012 ini.




Langsung aja yah, ikuti langkahnya berikut ini :

1. Dashbord > Rancangan > Tambah Gadget
2. Lalu tambahkan HTML/JavaScript
3. Kemudian letakkan kode berikut ini:
   
   
   
   

   <!-- floating twitter Bird -->
   <script type="text/javascript" src="http://dillablog.googlecode.com/files/tripleflap.js"></script>
   <script type="text/javascript">
   var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqh4Ak8Jc6U_StDNQmFS1L73DUgubjnYtlpdagT6tShyJoLIWe9ozt12EsXYmBz5fLyF7SxWGajZTYN2MBfEazW1AQbbX95WnhlqkP_J40AJqx7rlamE_Ep1i8StvaaRAaJONk3HI_MPI/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 = "http://twitter.com/Akun Twitter sobat";
   var tweetThisText = "Twitter - UserID http://www.dillablog.co.cc/";
   tripleflapInit();
   </script>

4. Kode yang berwarna biru ganti dengan akun Twitter sobat.
5. Kode yang berwarna merah ganti dengan pilihan warna burung kesayangan sobat, kalo burung saya warnanya putih donk
6. Selesai, jangan lupa disimpan dan lihat hasilnya. Ok smoga ber.....
Nah ini pilihan warna burung kesayangan sobat :

• Warna Kuning
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6RceFuK2swXbS65Y5eS1D_uMP6tYKp595ura5Ne06KYURYYqe55v50u6hNvYWTDu6qEaCnbMgzbCIbASQKxOPs6Acrsfq49_5CF0aE5udCfU3q9U0T3gZEQtJioh_89N6lONMzSty2U/s1600/yellow+bird.png
• Warna Hitam
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDuoUE_JQjFLrQnidTlf5GclaBroq9kPS5BFOpFpleRYdKBX4OS16pICE3_JUQSWfKQGBhUjD9QetmKU8gSxJEAsTiwvvudOXsi5__En3FPcoGHFkGjIfokQKmBfxlOv-2ze6yaObaMA/s1600/black+bird.png
• Warna Biru
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBlPcHazisZFL6NTAdNie1QFy60k6S38PYRP6gHsO_TpeMvYaL7t0PDXHuKJj1b05jHSi2mKiYLvQX-97ToNqxng5AdL9bGQZJdpHmiUWh0wkMySRztzgMw1WaM4vtPHtLyPZsh_0n9co/s1600/Blue+bird.png
• Warna Coklat
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTY5Uurr-LGjPSiYqsmXZ1uUXAumgIJ8LDWEcVHPp15OGavGkCZN-Gxdc-W80Y5XpuGYt4KgPPzIpOIgar0fPTZRaE7F1p5o1LPI9ZCPxzRwblJ8-lQNtKR_W0wvJsSmAcGRcsozqEcV0/s1600/brown+bird.png
• Warna Hijau
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibT4vKo4khB0U26oWqxEVhDf9GIJz1JXqouWr5celPDy31DgWjOQlJHXpM-8SFFasVAo-I2gH0BPEjX26H8_n2HXRcxqZO5Di7vk-O7kUZNwVQYTgtsLhDmMXwXpIrHGwndWZfH54DIKQ/s1600/Green+bird.png
• Warna Ungu
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw-f9Y_RkocrDCFz2f7ElJ62Q2rO-kNnqjqsyoz2wXoXm-h2UDCc4nrafT01twsIqXja2BALfCVRodMFmWAibGj4vTuvVXEc_iUbtI3kV0ML7pJMYZYJQ7o4Bwqf74hic2Pw0IVekcpLk/s1600/purple+bird.png
• Warna Putih
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboE7B0F78NxsLMtYNa41r3vcPnHzBCAuv2hgip0GXyXkMyUph8hNTRE66L9ykKSIHboF08MzJa-PE19-CMTOVIXb6vwV8mPhY2GWkdJ0mRHk0u2Dm1l5272XodGBBVHxyxMePY6cx1JA/s1600/white+bird.png
• Warna Merah
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_h92tEAVPKYvaQVwmgqfxbsVgdS1D10CEJOHr6ySHA1mv8NO-AoKrokGSNgXQNVdiGPwWcS_xm1hOqbRlZZI_Pgsm0cOkhb0g56eiaxEpcqHfzM4C2_-tL5H_jj_-sxcUgT_iQ1z2UBo/s1600/red+bird.png

Demikian caranya membuat burug twitter terbang di blog. Smoga dapat dicopas untuk kepentingan bersama.

Cara Buat 3-in-1 Box Floating

Cara Buat 3-in-1 Box Floating, kira-kira kaya gitu judulnya. Widget ini untuk menampilkan gadget Blogger Connect, gadget Twitter, dan gadget Facebok dalam satu kotak, makanya diberi judul 3-in-1 Box, dan Floatingnya itu ditempelkan pada sisi kanan template secara vertical, seperti yang ada pada blog ini.

Mau coba yang satu ini, ayo ikuti langkahnya berikut ini:

1. Dashbord > Rancangan > Tambah Gadget
2. Lalu tambahkan HTML/JavaScript
   
   
   
   
   
3. Kemudian letakkan kode berikut ini:
   

   <style type="text/css">
   
   .barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Tq9j6wVxUJYkjEDjqwpm5Ikx5ECP2WzjHvLNMj4nNiyd_VnABq9DfGuhrcF-rha71dV8QbZE6kKwd0fxx4VMg_IP-bwNUmHfmr5Wc71h6yCE0HC_RKazQf7TPLuvawI37KlM10_SKxHT/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
   .barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3aehI-nKFH1BSpjP9k3-eta7re9EoUjtfehB10_CT80enIzjqX79CpdGTLo9RechKj6iY0cHStUDGjw5JkgYxeldEbJfhjTjF-Mb7BdO9oDmdJhn6AAqEIOhGe-59HGhusZ_Gb_Fih4H/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
   .barconteblogger{margin:5px 0 0 47px}
   .barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6M253tWQe0BSIw7Kdx1iG1O2b9-791KwRoqnS0INErbmFvc_jeYZn6pGq1FQG0Q_991v18x0tGeu-F6lBixFiztd8eeiVdbv-I0tFBQjBz3rjC5-ABCQvUO6t5USY0uGb_SUGw3pBrE_a/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
   .barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGvEl6NZhLSK4aHeLpcLo5vpJ4-hO26NN7w0hR92PmPrK_f7uvBRwQuxefbMBUMAFlwJB76MBwc1Zxfi4cgqCLqkW0E67cItQHsw-N0GQmZuFAT7jGoswLhqfMD9y61rD1vrxOtjdSFwL/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
   .barcontetwitter{margin:5px 0 0 47px}
   .barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9i7xPv0Hotob51w3PcrFWZJaHssn9jBwMFBeyyZ6KL1PendKFqHyxeimPztsFS9CqHjwq2yN62NHXcINQjfUWNgzmwyQ_jZrTqeZfOuQkCrbbsVilthktkH_OXohWK1OLCGm4YX8W6nH5/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
   .barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_J9wAW8aS41wIZ_sNKggn8uV3Qgkrj5GS044W14mqeEdWvYxJn4bal2f0PnZ2cS1OOHEaXi2aC_QzDz1APzSuF_8QeUmHb3cy5B_tesxn4glxrPQE34_hc0XUH8UvWSy3NXkktI0vxpoP/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
   .barcontefacebook{margin:5px 0 0 47px}
   
   </style>
   
   <div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
   <div class="barconteblogger">
   <span style="color: red;">
   
   TEMPAT KODE BLOGGER CONNECT
   
   </span>
   </div>
   </div>
   <div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
   <div class="barcontetwitter"><br />
   <span style="color: red;">
   
   TEMPAT KODE TWITTER
   
   </span>
   
   </div>
   </div>
   <div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
   <div class="barcontefacebook">
   <span style="color: red;">
   
   TEMPAT KODE FACEBOOK
   
   </span>
   </div></div>

4. Simpan, selesai. Selamat mencoba

Demikian Cara Buat 3-in-1 Box Floating, semoga bermanfaat.

Menampilkan Komentar Facebook Di Halaman Statis

Pada postingan yang lalu Cara Buat Komentar Facebook Di Blog, itu hanya tampil pada halaman dinamis saja dan tidak tampil di halaman statis. Kali ini saya akan mencoba agar Cara Buat Komentar Facebook Di Blog itu bisa tampil di halaman statis juga.

Cara Menampilkan Komentar Facebook Di Halaman Statis:

1. Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
   
2. Download dulu template anda sebelumnya.
3. Cari kode yang mirip seperti di bawah ini:
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   <b:else/>
   

   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

   <data:post.body/>

   <b:else/>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
   <a class='more' expr:href='data:post.url'>Read More >></a>
   </b:if>
   </b:if>

   Ini merupakan kode model readmore otomatis versi 2 yang berguna untuk menampilkan halaman statis, yang pernah saya postingkan.
4. Jika sudah ketemu tambahkan kode komentar fb di bawah ini tepat di bawah kode <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <data:post.body/>
   

   <div id='fb-root'/>
   <script src=' http://connect.facebook.net/en_US/all.js#appId=246610832089539&amp;xfbml=1'/>
   <fb:comments expr:href='data:post.url' num_posts='2' width='500'/>

5. Simpan, selesai dan lihat hasilnya. Ok selamat mencoba.

Demikian cara menampilkan komentar facebook di halaman statis, semoga bermanfaat.

Cara Buat Komentar Facebook Di Blog

Kini lagi trend mencantumkan komentar facebook di blog. Dari hasil googling saya tentang cara buat komentar facebook di blog cukup bervariasi, ada yang cara sulit ada juga cara gampang. Yang pasti widget ini sudah saya coba dan hasilnya cukup memuaskan.

Mau coba, ayo ikuti langkah-langkahnya berikut ini:

1. Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
2. Download dulu template anda sebelumnya.
3. Cari kode yang mirip seperti di bawah ini:
   

   </b:includable>
   <b:includable id='status-message'>
   <b:if cond='data:navMessage'>
   <div>
   </div>
   <div style='clear: both;'/>
   </b:if>
   </b:includable>
   <b:includable id='comment-form' var='post'>
   <div class='comment-form-block'>

4. Jika sudah ketemu tambahkan kode komentar fb ini tepat di atas </b:includable> :
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
   <script src=' http://connect.facebook.net/en_US/all.js#appId=246610832089539&amp;xfbml=1'/>
   <fb:comments expr:href='data:post.url' num_posts='2' width='500'/>
   </b:if>

   nomor aplikasi id facebook appId=246610832089539  merupakan nomor aplikasi id facebook dilla blog, dan anda harus membuatnya terlebih dahulu, berikut ini tipsnya.
   
   
Tips : untuk mendapatkan AppID facebook :
1. Masuk/login ke Facebook.com
2. Kunjungi url ini: developers.facebook.com/setup
3. Isi kotak yang tersedia seperti berikut ini:
   
   
   
• App Display Name: Komentar
• App Namespace: kotakkomentar (minimal 7 karakter)
• beri centang pada "I Agree.."
• Klik Continue
• Isi verifikasi kata
• Klik Submit. Selesai.
4. Selanjutnya akan ditampilkan "App id" anda. Catat dan simpan nomor App id tersebut.
   
   
   
5. Selesai, disimpan dan lihat hasilnya.

Demikian cara menampilkan komentar facebook di blog sobat, semoga bermanfaat.

Kisah misterius Di RSCM

Ada kejadian aneh di Unit Perawatan Intensif (ICU) RSCM, dimana para pasien selalu meninggal di tempat tidur yang sama pada kamar yang sama dan selalu pada Jumat pagi tanpa peduli umur, kelamin, kondisi kesehatan mereka ataupun latar belakang kesehatan.

Hal ini sangat membingungkan para dokter dan beberapa bahkan berpikir bahwa hal ini ada hubungannya dengan supranatural. Mengapa selalu pada hari Jumat dan pada tempat tidur yang sama? Lalu para dokter memutuskan untuk menuntaskan kasus ini dan menyelidiki penyebab dari beberapa kejadian ini.

Begitu tiba hari Jumatnya, semua orang di rumah sakit tersebut dengan tegang menunggu akankah kejadian buruk itu terulang kembali. Lalu terbaringlah pasien baru rumah sakit itu di sana.

Beberapa dokter sudah memegang tasbih, quran, bible bahkan sebagian lagi memegang salib kayu dan benda-benda suci lainnya untuk menangkal iblis. Sementara sang pasien masih terbaring di sana.

Seiring waktu berputar... pukul 07:00... 07:30... tepat sebelum waktu keramat itu tiba... pintu kamar tersebut terbuka... kreoooott.

Kemudian masuklah Tukimin... part timer cleaning service untuk hari Jumat... Ia langsung mencabut kabel alat untuk bantuan pernafasan dari stop kontaknya lalu menggantinya dengan vacuum cleaner dan mulai membersihkan ruangan.

Dokter, dukun, cs : %$#$&%&^&&*_ *)%^$@$@# %*&(*().. ..

Demikian cerita kocak + misterius Di RSCM, smoga sobat berfikir untuk apa tertawa.

Cara Buat Artikel Terkait Di Sidebar

Cara Buat Artikel Terkait Di Sidebar. Mau coba buat widget yang satu ini, seperti yang ada di sidebar blog ini. Gampang-gampang susah sih, tapi asal teliti pasti berhasil. Karena yang berhasil pasang widget ini jauh lebih banyak ketimbang yang tidak berhasil. Mungkin karena agak sedikit muter-muter alias tuing-tuing cara penerapannya. Ok dicoba ajah dulu yah.

Langkah-langkahnya Cara Buat Artikel Terkait Di Sidebar :

• Login ke blog anda > Edit HTML > centang expand widget templates
• Cari kode </head>  ( gunakan CTRL + F untuk mempermudah pencarian )
• Copy kode dibawah ini dan paste di atas kode </head>
  

  <!-- Related Post -->
  <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>

• Selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'>
• Pilih salah satu saja, kemudian paste kode berikut tepat dibawahnya
  

  <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
  </b:if>
  </b:loop>
  </b:if>

• Kalau sudah silahkan simpan template
• Sekarang lanjut ke Page element > add a gadged dibagian sidebar kanan / kiri > pilih HTML / Javascript > Beri judul ' Artikel Terkait ' kemudian paste kode berikut pada gadget tersebut.
  

  <script type="text/javascript">
  removeRelatedDuplicates();
  printRelatedLabels();
  </script>

• Save
• Sekarang kembali lagi ke Edit HTML > centang expand widget template dan cari title='Artikel Terkait'
• Biasanya kodenya seperti dibawah ini :
  

  <b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
  <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <data:content/>
  </div>
  <b:include name='quickedit'/>
  </b:includable>
  </b:widget>

• Sekarang anda tambahkan kode berwarna merah dibawah ini sehingga hasilnyapun seperti dibawah ini
  

  <b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
  <b:includable id='main'>
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <data:content/>
  </div>
  <b:include name='quickedit'/>
  

  </b:if>

  </b:includable>
  </b:widget>

• Simpan template dan lihat hasilnya

Demikian cara membuat related post atau artikel terkait di sidebar, smoga bermanfaat tuh.




referensi:
http://www.bamz.us

Cara Agar Breadcrumbs Terindex Google

Cara Agar Breadcrumbs Terindex Google. Ini bukan punya saya, tapi punya sobat ichbinnabil, tujuang di copas biar gak lupa, hehee. Banyak yang masih bingung, bagaimana sih biar breadcrumb navigasi bisa terindex google?. kan keren tuh url blog kita bisa dipersingkat. agar lebih memahami mengenai breadcrumbs yang terindex google.

Pertama-tama masukan kode css untuk breadcrumbnya, taruh di atas kode ]]></b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

setelah itu cari kode <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Save template. untuk mengecek kinerja breadcrumb, silahkan anda buat artikel dengan menyertakan label yang sudah terindex oleh google (untuk cek anda tinggal copy paste url label ke google). setelah membuat artikel baru, tunggu hingga artikel tersebut terindex, dan lihat hasilnya.

Demikian, cara membuat breadcrumbs yang katanya dapat dan cepat terindex oleh google. Smoga bermanfaat.




referensi:
http://m-wali.blogspot.com

Cara Membuat dan Menambahkan Kolom Di Blog

Dari judulnya "Cara Membuat dan Menambah Kolom di Blog", sepintas terlihat sangat umum dan tidak pada substansinya. Ya!, memang maksudnya seperti itu, karena Cara Membuat dan Menambah Kolom di Blog ini sangat fleksibel. Artinya dapat digunakan untuk penambahan kolom di atas postingan maupun di bawah postingan bahkan di sisi kanan atau di sisi kiri postingan. Jadi sangat fleksibel bukan.!

Mau tau caranya Membuat dan Menambahkan Kolom Di Blog yang fleksibel, ok ikuti saja langkah-langkahnya berikut ini :

1. Login dulu ke Blogger > Klik Design -> Edit HTML
2. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.
3. Kalau sudah, cari kode ]]></b:skin>
4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
   

   #footer-column-divide {
   clear:both;
   }
   .footer-column {
   padding: 10px;
   }

   di sini anda bisa menambahkan rinciannya lagi misalnya: frame, jenis dan ukuran font, dan apa saja yang menurut anda dibutuhkan untuk kelengkapannya.
   
5. Jika sudah cari kode dibawah ini. Di sini saya beri contoh untuk membuat dan menambah kolom footer.
   

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer' showaddelement='yes'/>
   </div>
   
   atau
   
   <div id='footer'>
   <b:section class='footer' id='footer' showaddelement='yes'/>
   </div>

6. Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/>
   atau <b:section class='footer' id='footer' />, lalu disimpan dan selesai untuk membuat dan menambah kolom footer.

Catatan: Jika anda tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>. Di sinilah letak fleksibelnya Cara Membuat dan Menambahkan Kolom Di Blog yang saya maksud.

1. Jika ingin membuat footer 1 kolom. Gunakan kode berikut:
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 100%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>

   
2. Jika ingin membuat footer 2 kolom. Gunakan kode berikut:
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 50%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer2' style='width: 50%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div style='clear:both;'/>
   </div>

   
3. Membuat footer 3 kolom. Gunakan kode berikut:
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 33%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer2' style='width: 33%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer3' style='width: 33%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3'
   preferred='yes' style='float:right;'/>
   </div>
   
   <div style='clear:both;'/>
   </div>

   
4. Membuat footer menjadi 4 kolom. Gunakan kode berikut:
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 25%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer2' style='width: 25%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer3' style='width: 25%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3'
   preferred='yes' style='float:right;'/>
   </div>
   
   <div id='footer4' style='width: 25%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col4'
   preferred='yes' style='float:right;'/>
   </div>
   
   <div style='clear:both;'/>
   </div>

   

Demikian, cara membuat dan menambahkan kolom di blog dengan fleksibel, smoga dapat membantu anda.




referensi:
http://www.hermanblog.com

Cara Membuat Breadcrumb

Breadcrumb merupakan menu navigasi yang manfaatnya sebagai pentunjuk bagi para pembaca atau pengunjung yang sedang berada di blog tersebut. Disamping itu manfaat lainnya adalah sebagai tags yang terdapat dalam blog tersebut yang akan dapat dengan mudah terindex oleh google. Ini merupakan salah satu upaya untuk meningkatkan kemampuan dari SEO On Page.

Berikut ini langkah-langkah cara membuat breadcrumb:

1. Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
2. Download dulu template anda sebelumnya.
3. Gunakan Ctrl+F untuk mencari ]]></b:skin>
4. Jika sudah ketemu, letakkan (paste) kode di bawah ini sebelum kode ]]></b:skin>
   

   .breadcrumbs {
   padding:5px 5px 5px 0px;
   margin: 20px 0px 15px 15px;
   font-size:85%;
   line-height: 1.4em;
   border-bottom:3px double #e6e4e3;
   }

5. Cari kode <b:includable id='post' var='post'> (seperti biasa gunakan Ctrl+F)
6. Jika sudah ketemu, telakkan (paste) kode di bawah ini setelah kode <b:includable id='post' var='post'>
   

   <b:if cond='data:blog.homepageUrl == data:blog.url'>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='breadcrumbs'>
   You are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
   <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
   <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
   </b:loop>
   </b:if> &#187; <data:post.title/>
   </div>
   </b:if>
   </b:if>

7. Simpan template, selesai.

Demikian cara membuat breadcrumb atau menu navigasi di atas postingan, smoga bermanfaat.

Gambar Bergerak dengan Ilusi Mata

Gambar Bergerak dengan Ilusi Mata. AKA Peripheral Drift Optical Illusion dicirikan oleh gerak anomali yang dapat diamati dalam penglihatan tepi.

Peringatan !: Jika ilusi berikut ini membbuat Anda merasa mual atau pusing silahkan bergulir ke postingan berikutnya yang lebih enak dilihat dan dibaca, tapi kalau merasa puas boleh berkomentar tentang gambar ilusi mata ini.
Gaya ilusi pertama kali dibuat, dipelajari dan disempurnakan oleh Profesor Akiyoshi Kitaoka, yang melihat bahwa gambar-gambar tertentu muncul untuk bergerak bila dilihat dengan visi dengan periferal Anda.

Profesor Kitaoka adalah bukan orang pertama yang melihat gambar-gambar tertentu muncul untuk bergerak jika dilihat dalam visi periferal Anda. Tapi dia telah mempelajari efek tersebut dan menyempurnakan penciptaan ilusi optik.
Perlu diingat bahwa ini adalah gambar statis. Hal ini bukan gambar animasi ditinjau dari segi apapun. Jika pandangan anda bergerak bolak-balik daerah pusat tampaknya akan bergerak menuju (central) pusat dan tepi luar tampaknya akan bergerak menjauh (memperluas) dari pusat. Juga perlu diperlihatkan, jika mata anda terpaku pada titik di pusat dan tidak bergerak anomali gerakan ini akan berhenti.

Ilusi optik karya profesor sendiri. Lihatlah ular ini, apakah mereka berputar?. Ingat gambar ini bukan animasi.

Ilusi optik karya Herman Verwaal dari Exloo, Belanda. Berikut adalah salah satu anomali nya ilusi gerak optik. Perhatikan gerak berusaha kali ini sisi ke sisi.

Jika Anda memiliki printer berwarna ! Cetak versi besar untuk memukau keluarga atau teman.

Demikian, anda kini sudah mengetahui gambar bergerak dengan ilusi mata, smoga menjadi hiburan buat sobat.




referensi:
http://kimprung.com

6 Kotak Pencarian Yang Fresh dan Trendy

Kotak Pencarian, sobat pasti tahu manfaatnya bukan. Kotak pencarian ini selain berguna untuk mencari suatu artikel pada sebuah blog juga kalau dibuat dengan sentuhan artistik maka hasilnya pun akan lebih indah dan mempunyai nilai seni dan estetika yang juga menggambarkan si pembuatnya.

Ada 6 buah kotak pencarian yang fresh dan trendy saya kutip dari W2B, menurut saya patut dicoba, sobat bisa langsung ke sumbernya W2B atau bisa juga di blog ini.

6 Kotak Pencarian Yang Fresh dan Trendy :

contohnya seperti ini, boleh dicoba berfungsi atau tidak !

1. Kotak Pencarian Model 1
   
   

   <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhzVX-IVetUUk2DuCB0jSVnqLxmNG_QGcaG8DtDJkTsKqBBPxSu0IkuvQhAYwZHfrHLvfqrXGYXLThNL99SRQ63-d29jiIrcHeWfru4_4aDv6nU0apxfjX06Y1GoCHAvQPiyGYbSRLqwi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   <br /> <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhzVX-IVetUUk2DuCB0jSVnqLxmNG_QGcaG8DtDJkTsKqBBPxSu0IkuvQhAYwZHfrHLvfqrXGYXLThNL99SRQ63-d29jiIrcHeWfru4_4aDv6nU0apxfjX06Y1GoCHAvQPiyGYbSRLqwi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
2. Kotak Pencarian Model 2
   
   
   script kodenya seperti di bawah ini :

   <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDis0UZc4BpAgaIuhsU8W5rbUoSXs7a_h-wkF57du9GkV84m2e9Wjlhkp7c1oY3n-GafNsa1n792q5wh-Q4zwV3XDs4efNoA86q3YDEAZj9PALhe0TrqDOoVsmd8kiYgeFFu6YLMIxDNU/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   <style type="text/css"> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDis0UZc4BpAgaIuhsU8W5rbUoSXs7a_h-wkF57du9GkV84m2e9Wjlhkp7c1oY3n-GafNsa1n792q5wh-Q4zwV3XDs4efNoA86q3YDEAZj9PALhe0TrqDOoVsmd8kiYgeFFu6YLMIxDNU/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form></div>
3. Kotak Pencarian Model 3
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fqiz-H86uIK6cgpCj8ieNiASaRfobVsfhWqLBSypJJxI1hxGwuw89ueWgTgZpRLppx2-2f71q2YVeglxsU9IktJQk_5UOSiMMbQE_SDGE5O8Da-BeVUvo8Rsm5HvvlaysSAxowr-1dSZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
   form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
   form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
   form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
   </style>
   <div id="w2b-searchbox">
   <form id="w2b-searchform" action="/search" method="get">
   <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
   <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
   </form>
   </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fqiz-H86uIK6cgpCj8ieNiASaRfobVsfhWqLBSypJJxI1hxGwuw89ueWgTgZpRLppx2-2f71q2YVeglxsU9IktJQk_5UOSiMMbQE_SDGE5O8Da-BeVUvo8Rsm5HvvlaysSAxowr-1dSZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
4. Kotak Pencarian Model 4
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7-OFb54uvWscVYqABygmMJCPMIMNnFRI73Qmje2KIviQWIRB_1zne6WiPR0yAgPGH-nJq0kqqYHVD6gbyB6cS4uoRGNh9kN2jTIi88s6hLuiA-z1zI4EMEclM3_jK9oW48npI17ZAqfi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
   form#w2b-searchform{display: block;padding: 12px;margin:0;}
   form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
   form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
   </style>
   <div id="w2b-searchbox">
   <form id="w2b-searchform" action="/search" method="get">
   <input type="text" id="s" name="q" value=""/>
   <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
   </form>
   </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7-OFb54uvWscVYqABygmMJCPMIMNnFRI73Qmje2KIviQWIRB_1zne6WiPR0yAgPGH-nJq0kqqYHVD6gbyB6cS4uoRGNh9kN2jTIi88s6hLuiA-z1zI4EMEclM3_jK9oW48npI17ZAqfi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
5. Kotak Pencarian Model 5
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvMloXiL3ScdsTHM_HAySBe7JuhKhXQzs7oZ7WTJlv5jzyg5e4KpsDmuySkhbDsfjdbJkVUT0ru10HiZ6VBZ4bEH4_wrGnAO0BmUlF63aPqJWBROHfyoQmWsZjUJkaT4i4p0cyHiE731B/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
   form#w2b-searchform{display: block;padding: 12px;margin:0;}
   form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
   form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
   </style>
   <div id="w2b-searchbox">
   <form id="w2b-searchform" action="/search" method="get">
   <input type="text" id="s" name="q" value=""/>
   <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
   </form>
   </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvMloXiL3ScdsTHM_HAySBe7JuhKhXQzs7oZ7WTJlv5jzyg5e4KpsDmuySkhbDsfjdbJkVUT0ru10HiZ6VBZ4bEH4_wrGnAO0BmUlF63aPqJWBROHfyoQmWsZjUJkaT4i4p0cyHiE731B/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   
6. Kotak Pencarian Model 6
   
   
   script kodenya seperti di bawah ini :
   

   <style type="text/css">
   #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkUi9kKRa0KYza3VJJcc3aiTgmUaFndrmNPpfXggLZ0kOhaqfOxASUWoH6QSuQTpY7r0N-IFCFg2M6USYF-al_t23YHaJJvvofCeIX9WlidxhjKraWMy9kEtu5YXQT65zd-V1Lk9JDRh3/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
   form#w2b-searchform{display: block;padding: 12px;margin:0;}
   form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
   form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
   </style>
   <div id="w2b-searchbox">
   <form id="w2b-searchform" action="/search" method="get">
   <input type="text" id="s" name="q" value=""/>
   <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
   </form>
   </div>

   atau mau langsung dipasangkan widget ini, klik tombol tambah di bawah ini :
   
   
   <br /> <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkUi9kKRa0KYza3VJJcc3aiTgmUaFndrmNPpfXggLZ0kOhaqfOxASUWoH6QSuQTpY7r0N-IFCFg2M6USYF-al_t23YHaJJvvofCeIX9WlidxhjKraWMy9kEtu5YXQT65zd-V1Lk9JDRh3/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><br /> <div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /><br /> </form></div>
   

Cara menginstal Joomla di komputer (offline)

Pada postingan yang lalu pernah saya bahas tentang install Wordpress di PC. Kali ini saya ingin membahas cara instalasi Wampserver untuk media install Joomla di PC. Yang dimaksud dengan install Joomla d PC adalah instalasi secara offline pada komputer sendiri dan tidak terhubung dengan internet, yang biasa disebut juga localhost. Untuk melakukan instalasi ini diperlukan dua tahap, yaitu :

1. Instalasi perangkat lunak server. Di sini saya menggunakan Wampserver.
2. Instalasi CMS Joomla. Di sini saya menggunakan CMS Joomla 1.0.15

Berikut ini langkah-langkah untuk mengistall Wampserver pada komputer dengan sistem operasi yang digunakan Windows.

1. Yang pertama pastinya harus memiliki software Wampserver, kalau belum ada bisa download di www.wampserver.com.
2. Saya asumsikan sobat sudah memilikinya, selanjutnya kita cari file WampServer2.0f.exe yang sobat sudah download tersebut dan di klik ganda, dan akan tampil jendela seperti berikut ini.

3. Selanjutnya klik Yes untuk melanjutkan proses instalasi, dan akan tampil jendela seperti berikut

4. Pada jendela tersebut ada tombol Next, langsung saja diklik, selanjutnya akan tampil jendela berikut ini

Pada gambar di atas, merupakan jendela yang menjelaskan tentang lisensi WampServer, yaitu GNU GPL. Artinya kita diperbolehkan meng-copy dan mendistribusikannya, namun tidak boleh mengubahnya.
5. Berikutnya pada tampilan jendala di atas, sobat pastikan untuk mencentang atau mengaktifkan bagain I accpet the aggreement yang menyatakan bahwa sobat setuju dengan lisensi tersebut (diatas), kemudian klik tombol Next dan akan tampil jendela selanjutnya seperti di bawah ini.

pada jendela di atas, sobat diminta menentukan lokasi tempat penginstalasian WampServer, secara default diletakkan pada lokasi C:\wamp. Kemudian klik tombol Browse kalau sobat ingin menempatkan di lokasi lain. Tapi sebaiknya biarkan saja pada lokasi default.
6. Setelah menentukan lokasi untuk instalasi WampServer kemudian klik tombol Next, sehingga akan tampil jendela seperti berikut ini. Di sini sobat diberikan feature tambahan seperti "Create a Quick Launch Icon dan "Create a Desktop Icon, sebaiknya sobat centang kedua opsi tersebut. Pilihan ini nantinya akan memudahkan sobat untuk mengakses WampServer, yaitu ketersediaan shortcut pada desktop dan pada menu quick Lauch, yang akan memudahkan sobat untuk menjalankan WampServer nantinya, setelah itu tekan tombol Next.

7. Akan tampil jendela selanjutnya seperti di bawah ini, dan langsung saja klik tombol Install untuk melaksanakan proses instalasi.



Pada saat penginstalasian nanti, sobat akan menemukan "WARNING" dengan pesan :"KEEP BLOCKING", "UNBLOCK" dan "ASK ME LATER". Peringatan ini abaikan saja, karena sobat akan menginstallnya di localhost. Jika instalasi online maka peringatan ini harus dijawab dengan memilih opsi "UNBLOCK", jika tidak MAKA WampServer sobat akan diblok oleh firewall Windows.
8. Setelah itu klik tombol Next dan akan muncul jendela berikutnya, seperti ini

Tampilan jendela di atas menjelaskan bahwa sobat telah berhasil menginstall WampServer di localhost yaitu di PC secara offline. Kemudian klik tombol Finish untuk menutup jendela ini, dan menjalankan secara langsung WampServer sobat. Tanda WampServer aktif adalah muncul icon WampServer (simbol) berwarna putih pada bagian kanan bawah taskbar Windows sobat. Untuk menjalankan WampServer, sobat cukup meng-klik tombol icon WampServer tersebut.
9. Jika sobat mau melihat atau mengecek apakah server Apache, PHP dan Database MYSQL sudah aktif dan berjalan dengan baik, lakukan dengan cara :
   Klik menu Localhost pada menu di atas, atau bukalah browser sobat, kemudian ketikan localhost pada bagian Address. Dan pastikan halaman yang tampil seperti gambar berikut ini.
   
   

Demikian, cara menginstal Joomla di komputer (offlie), semoga bermanfaat.




referensi:
http://www.dillablog.co.cc

WordPress.org dan WordPress.com

Buat yang baru belajar (seperti saya) maupun yang sudah mengerti (seperti sobat), supaya ngga tambah bingung lagi. Perlu sobat tahu bedanya WordPress.org dan WordPress.com, yang punya dan pengembangnya sama, yaitu Matt Mullenweg dkk.

WordPress.org itu, bahasa kerennya standalone blog atau self-hosted, kalau sobat punya domain dan hosting sendiri, sobat bisa instal script khusus bernama WordPress. Script ini bisa diunduh gratis dari www.WordPress.org bagian halaman download. Jadi masih tetap script gratis, modal sobat hanya beli domain dan sewa hosting saja. Tapi kalau mau coba-coba, bisa dengan yang gratisan dulu (hosting dan domain-nya).

WordPress.com, ini Multi user blogs, yang di hosting di WordPress.com, sobat ngga perlu susah-susah beli domain dan sewa hosting, tinggal daftar di www.WordPress.com dan dalam 5 menit sobat sudah punya blog sendiri dan bisa langsung posting2, asli gratis. Aksesnya jadi seperti di subdomain : namablogsobat.wordpress.com. sama halnya di blogspot : namablogsobat.blogspot.com.

Fitur dari kedua platform ini antara lain :

Fitur	WordPress.Org	WordPress.com
Akses	Nama domain sendiri	Subdomain dari WordPress.com Bisa redirect tapi harus Upgrade (bayar)
Themes	Bebas upload/instal	ditentukan di menu Designs Bisa edit CSS tapi harus upgrade (bayar)
Plugins	bebas upload/instal	sudah diatur, tidak bisa nambah
Kode Javascript (kode iklan Adsense, etc)	Bisa	Tidak bisa
Space	sesuai hostingan anda	space file & images max 3GB bisa nambah tapi upgrade
Bandwith	sesuai hostingan anda	no limit
Upload Single File	sesuai kapasitas hosting anda	max 75MB
Forum	ada	ada
Upgrade Versi	sendiri	otomatis

Recent Comment Thumbnail With Avatar

Banyak cara dan gaya untuk menampilkan recent comment yang intinya untuk mempercantik penampilan suatu web-blog baik di blogspot maupun di wordpress. Recent comment pada umumnya ditampilkan dalam bentuk summary text saja namun ada juga yang dikombinasikan dengan thumbnail, dan biasanya thumbnail tersebut diambil dari gambar/foto blogger yang diupload melalui blogspot. Namun kali ini saya ingin memperkenalkan pada sobat membuat recent comment thumbnail dengan Avatar. Jadi tentu saja hanya bagi blogger yang mempunyai Avatar akan ditampilkan gambar/fotonya.

Ok, caranya cukup mudah. Sobat tinggal copy script di bawah ini :

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 10,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 60,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://namablog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>

Lalu tambahkan gadget dan pilih HTML/JavaScript, selanjutnya tinggal di-paste script di atas yang telah dicopy. Selesai.

Sedikit penjelasan, untuk menampilkan jumlah recent comment yang akan ditampilkan. Sobat bisa merubah nilai pada "numComments". Di atas bisa dilihat numComments = 10, ini maksudnya untuk menampilkan jumlah recent comment sebanyak 10 komentar terakhir.

Sedangkan untuk menampilkan summary teks yang akan ditampilkan pada recent comment dapat diatur pada "characters". Di atas bisa dilihat characters = 60, ini maksudnya untuk menampilkan panjang teks 60 pixel.

Ok, semoga widget ini bermanfaat.