Minggu, 16 Oktober 2011

Cara Upload dan buat Album Photo di Picasa

07.08  media pelajar  2 comments

Petunjuk
  • buka http://picasaweb.google.com/
  • log in dengan gmail
  • setiap insert image di blogger, maka image secara otomatis tersimpan di picasa
  • coba buka alamat di atas dan coba tekan UPLOAD
  • cari file image lalu klik ok.
  • File bisa dikelompokkan dalam album-album
  • Untuk ngambil image dari picasa masuk ke edit posting caranya:
  • Klik icon insert image (ada 4 pilihan: upload, from this blog, from picasa, from URL) 
  • Gambar di atas diambil dari picasa. Caranya pilih gambar dan klik OK

Cara membuat album photo dari picasa dan dipasang di blog, caranya:
  • buka situs picasa http://picasaweb.google.com/
  • log in kalau belum
  • pilih album dan double click
  • pada right sidebar, tekan links to this album
  • pilih “Paste HTML to embed in website”
  • copy “code embed-nya” (CTRL+A lalu CTRL+C)
  • kembali ke blog, buka blogger.com dan login kalau belum
  • buka “rancangan” lalu tambah gadget HTML/javascripts”
  • Ketikan judul misalnya “My Album” dan paste (CTRL+V) pada bagian isi
  • Hasil copy-paste code embed seperti ini:
<embed type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width=100% height="320" flashvars="host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F114146684915682695385%2Falbumid%2F5394886657701992225%3Falt%3Drss%26kind%3Dphoto%26authkey%3DGv1sRgCMbrp-mEopPq3wE%26hl%3Den_US" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  • Jangan lupa “SIMPAN”

Read More

Cara Membuat Read Me (Baca Selengkapnya)

07.07  media pelajar  No comments

Petunjuk
  • Klik “Rancangan” kemudian masuk ke ”Edit HTML”
  • Jangan lupa centang “Expand Widget Templates” untuk bisa mengedit template secara keseluruhan.
  • Cari tulisan </head> dengan find atau F3 untuk pencarian.
  • Masukkan kode skrip berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
  • Selanjutnya masukkan di bawah  <data: post.body>, skrip html berikut:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>&#187;&#187;&#160;&#160;BACA SELENGKAPNYA</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Hapus <data: post.body>
  • Jangan lupa simpan edit html
  • Contoh hasil seperti di bawah ini:

Simpan Gambar di Picasa dan buat album

Upload photo buka http://picasaweb.google.com/ log in dengan gmail setiap insert image di blogger, maka image secara otomatis tersimpan di picasa coba buka alamat di atas dan coba tekan UPLOAD cari file image lalu klik ok. File bisa dikelompokkan dalam album-album Untuk ngambil image dari picasa masuk ke edit posting caranya: Klik icon insert...


Read More

Cara mendaftar di feedburner.com

07.07  media pelajar  No comments

Petunjuk
Berikut ini langkah-langkah untuk mendaftar di feedburner:
·         Silahkan kunjungi http://www.feedburner.com.
·         Klik tulisan Register pada halaman bagian atas
Isi seluruh form yang yang ada :
1)      Username,  isi dengan username yang diinginkan
2)      Password, isi dengan password yang diinginkan
3)      Password (again), isikan kembali password yang tadi di tulis
4)      Email address, isi dengan alamat email yang sobat miliki
5)      Secret Question,  isi dengan pertanyaan rahasia
6)      Secret Answer --> isi dengan jawaban yang sesuai dengan pertanyaan
7)      Klik tombol Sigin
·         Jika berhasil, muncul ucapan selamat datang dari feedburner
·         Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog anda. Contoh : http://ict-smpypk.blogspot.com
·         Beri tanda pada radio button yang tersedia, terserah mau pilih yang mana, kemudian klik tombol Next
·         Ubah Feed Title dengan Feed Address jika mau di ubah, kalau sudah tinggal klik tombol Active Feed
·         Ada ucapan selamat, klik saja langsung tombol Next
·         Beri tanda centang pada kotak di samping tulisan Clickthroughs serta I want more ! have FeedBurner stats PRO also track (gratis)
·         Klik tombol Next
·         Klik tab Optimize
·         Silakan setting yang anda inginkan, tapi yang paling penting adalah anda harus mengaktifkan fitur SmartFeed
·         Silahkan klik SmartFeed lalu klik tombol Active
·         Klik tab Publicize, silahkan pilih fitur yang anda inginkan, tapi yang sering di gunakan adalah fitur feedCount coba klik FeedCount
·         Pilih bentuk style dari feedcount, yang biasa atau yang animasi, beri tanda pada radio button di sampingnya
·         Klik tombol Active
·         Copy kode HTML yang diberikan pada text area, paste sementara di notepad untuk nanti di pasang di blog
·         Klik Chicklet Chooser untuk memilih berbagai banner atau chicklet
·         Beri tanda pada radio button yang terletak di samping chicklet masing-masing, kemudian copy kode HTML yang di berikan yang ada pada text area, kemudian paste pada notepad. catatan : setiap sobat memberi tanda pada radio button masing-masing chicklet, maka secara otomatis kode HTML yang ada di bagian bawahpun akan berubah, jadi kesimpulannya beri tanda radio button lalu copy kode HTML nya beri tanda lagi lalu copy kodenya lagi
·         Klik Pingshot, beri tanda pada kotak di samping Ping-O-matic serta Newsgator, klik menu dropdown yang ada, lalu pilih yang diinginkan, klik tombol Add, klik lagi menu dropdownnya bila ingin di tambahkan lagi, klik Add kembali
·         Klik tombol Active
·         Klik Headline Animator untuk mendapatkan banner animasi
·         Klik menu dropdown di bawah tulisan Theme, pilih yang sesuai keinginan
·         Klik tombol Active
·         Klik menu dropdown di samping tulisan Add to, pilih Blogger blog
·         Klik tombol Next
·         Setelah muncul window baru, klik tombol Add to Blogger dan silahkan Sign in dulu di blogger
·         Pilih blog yang mau di pasang banner animasi nya, lalu klik tombol Tambah Widget maka secara otomatis banner animasi akan di tambahkan (cara ini hanya berlaku bagi yang memakai template baru).

Feedburner sudah di akuisisi sama google, maka untuk feed blogger bisa di alihkan ke feedburner. Caranya seperti ini :
  • ·         Sig in di blogger
  • ·         Klik menu Pengaturan
  • ·         Klik Feed Situs
  • ·         Di sebelah tulisan Ijinkan Feed Blog, pilih yang Penuh
  • ·         Simpan alamat feed dari feedburner pada kotak di samping tulisan posting URL Pengubahan Arah Feed. contoh alamat feed dari feed burner http://feeds.feedburner.com/belajarmembaca
  • ·         Klik tombol Simpan Pengaturan


Read More

Cara menampilkan file pdf atau word di blogspot

07.06  media pelajar  No comments

Petunjuk:
·         Satu cara yang bisa digunakan adalah dengan mengupload file pdf atau word ke scribd
·         Register/daftar dapat menggunakan gmail
·         Lakukan upload (unggah) file pdf atau word dari komputer Anda
·         Selanjutnya file yang sudah diupload tersebut bisa ditampilkan langsung di www.scribd .com atau menampilkannya di blog Anda
·         Untuk menampilkannya di blog, copy-paste code embed-nya ke blog, bisa di postingan atau gadget html/javascript.

·         Setiap file yang di-upload akan punya link dan embed code. Kalau kita copy link-nya untuk disimpan di blog, maka ketika link-nya diklik akan membuka file langsung di scribd.com. Kalau code embed yang dicopy-paste untuk dimasukan di postingan atau gadget html/javascript, maka file akan dibuka di dalam blog.
Read More

Cara Membuat Related Post Widget di Blogspot

07.05  media pelajar  1 comment

Petunjuk:
  • Klik “Rancangan” kemudian masuk ke ”Edit HTML”
  • Jangan lupa centang “Expand Widget Templates” untuk bisa mengedit template secara keseluruhan.
  • Masukkan kode skrip berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:
<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>
  • Kemudian cari kode widget seperti dibawah ini
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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 != "true"'>,</b:if>
</b:loop>
</b:if>
  • Pada Skrip diatas, tambahkan skrip yang dicetak tebal seperti dibawah ini
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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 != "true"'>,</b:if>
<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=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
  • Save template

  • kemudian buka “Rancangan” klik Element dan klik “Tambah Gadget" pilih “HTML/Javascript widget”. Beri judul/title Related Post, kemudian copy paste skrip di bawah ini pada kotak yg disediakan :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
  • Sekarang kembali lagi ke Rancangan, klik Edit HTML, centang ”Expand Widget Templates”. Kemudian  cari HTML/Javascript widget Related Post yang kita add (tambah). Tambahkan baris yang berwarna merah seperti dibawah ini :

<b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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>
  • Klik Save dan lihat hasilnya.

Read More

Menjalankan Flash di Blog

07.04  media pelajar  No comments

Petunjuk:
·         Klik “rancangan/tataletak” pilih “elemen”
·         Klik “Tambah Gadget” lalu pilih “HTML/JavaScript”
·         Isi judul misalnya dengan: “Contoh Media Flash” dan copy-paste skrip html berikut:
<center><embed pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" quality="low"  src="https://sites.google.com/site/ictsmpypk/menuguru2.swf?attredirects=0" bgcolor="white" type="application/x-shockwave-flash" width="977" height="88"></embed></center>

·         Anda tinggal mengganti alamat links dan nama links-nya disesuaikan dengan kebutuhan Anda
·         Jangan lupa klik “SIMPAN”
Contoh skrip-nya sebagai berikut:
Read More

Membuat Daftar Isi

07.03  media pelajar  No comments

Petunjuk
  • buka blogger login jika belum
  • buka rancangan
  • klik “add/tambah gadget”
  • pilih ”html/javascript”
  • Tulis judul dan masukkan skrip berikut:
<script language="JavaScript" src="http://widgets.cc/rss/scrollbox/scrollbox.php?rss=http%3A%2F%2Fict-smpypk.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Falt%3Drss&width=172&height=300&border_style=outset"></script><noscript><div style="font-size: 14px; overflow: hidden; background: #dcdcdc; border-style: outset; width: 200px; height: 300px;"><div id="rssScrollbox" style="overflow: hidden; height: 100%; width: 99%; margin-right: 5px;">JavaScript must be enabled for the <a href="http://widgets.cc/rss/scrollbox/">RSS Scrollbox Widget</a> to work.</div></div></noscript>
  • Ganti “ict-smpypk.blogpot.com”  dengan “nama blog Anda.
  • Klik “SIMPAN”
Read More

Membuat Scroll Box

07.03  media pelajar  No comments

Se Seperti halnya penggunaan textarea, scroll box juga berfungsi untuk lebih memudahkan blogger dan terutama pembaca blog saat menikmati blog yang berkaitan dengan KODE HTML. Penggunaan scroll box sedikit mempunyai nilai lebih karena dokumen yang dipostingkan di dalamnya dengan mudah dapat dilakukan beberapa perubahan seperti halnya jenis, warna dan ukuran font yang pada akhirnya akan lebih memudahkan bagi pembaca blog untuk memahami dokumen yang terposting. Selain dari hal tersebut, dalam scroll box dapat juga disertakan posting yang berupa image atau gambar. Scroll box dapat dibuat dalam bentuk yang paling sederhana hingga bentuk yang cukup kompleks dengan memadukan KODE HTML dan image hingga tercipta sebuah scroll box yang indah, dinamis dan atraktif. Dibawah ini salah satu contoh bentuk scroll box sederhana yang dapat dikembangkan menjadi bentuk yang lebih kompleks dengan menambahkan beberapa fungsi lain baik dengan menggunakan KODE CSS ataupun gambar.

·         Gunakan KODE berikut saat melakukan posting :
<div style="height:200px; width:500px; background: #66CCFF; border:2px solid #0000FF; padding: 20px 6px; overflow:scroll;overflow:auto;">
Letakkan Teks/Image/KODE HTML atau materi posting yang lain di sini
</div>

·        Bisa juga membentuk sebuah scroll box dengan menggunakan KODE CSS dengan menyimpannya di bagian head di antara tag <head> dan tag </head> (tepatnya di atas kode ]]></b:skin>). Dengan menggunakan CSS yang bersifat permanen, maka KODE lain yang dipergunakan saat melakukan posting menjadi lebih simple dan ruang posting menjadi tidak penuh sesak oleh banyaknya KODE HTML pembentuk scroll box.
  • Langkah yang harus dilakukan Klik “Rancangan” kemudian masuk ke ”Edit HTML”. Masukkan KODE CSS berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:
.postingbox {
     width: 500px; /* sesuaikan lebar dg kebutuhan atau pakailah auto - width:auto */
     background: #66CCFF url();/* Untuk background color atau image */
     border: 2px solid #555; /*tebal, jenis dan warna */
     overflow: scroll; overflow:auto;
     font-size: 12px; /* ukuran font */
     font-family: Verdana; /*atau jenis font lain */
     font-weight: 500; /* font-weight bisa juga normal atau bold */
     padding: 15px 8px; /* atas/bawah=20px, kanan/kiri=6px */
     margin:15px 5px; /silahkan atur margin bila di kehendaki */
     }

background: #66CCFF url(URL image);
Contoh :
background:#66ccff url(http://picasaweb.google.com/lh/photo/0i9tRpRmzC4SjmxNcObbFKx473hnftpwMKtX-Piw38I?feat=directlink);

  • Gunakan KODE berikut saat melakukan posting :
<div class="postingbox" style="height:300px;">
Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan
</div>
Read More

Menu Link Scrolling

06.58  media pelajar  No comments

Petunjuk:
  • buka blogger login jika belum
  • buka rancangan
  • klik “add/tambah gadget”
  • pilih ”html/javascript”
  • Tulis judul dan masukkan skrip html berikut:
<div style='overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee'><ul>
<li><a href='http://www.mediabelajarplus.com'>Media Belajar Plus</a></li>
<li><a href='http://softwarebelajar.blogspot.com'>Software Belajar</a></li>
<li><a href='http://sertifikasiprofesi.blogspot.com'>Sertifikasi Jalur Pendidikan</a></li>
<li><a href='http://www.smpypk-bontang.sch.id'>SMP YPK Bontang</a></li>
<li><a href='http://elearning.eu5.org'>elearning SMP YPK</a></li>
<li><a href='http://ict-smpypk.blogspot.com>ICT SMP YPK</a></li>
</ul>
</div>
  • Silakan alamat URL dan nama links diedit sesuai dengan links yang akan Anda buat.
  • Klik SIMPAN
Read More

Cara Membuat Links

06.57  media pelajar  No comments

  • buka blogger login jika belum
  • buka rancangan
  • klik “add/tambah gadget”
  • pilih ”html/javascript”
  • Tulis judul dan masukkan skrip html berikut:
<a href="http://softwarebelajar.blogspot.com">Links 1</a>
<a href="http://belajarmembaca.blogspot.com">Links 2</a>
  • Silakan alamat URL dan nama links diedit sesuai dengan links yang akan Anda buat.
  • Klik SIMPAN
Read More

Mengganti Template Di Blogspot

06.56  media pelajar  No comments


Sebelum anda mengubah template blog sebaiknnya Anda membackup template jika sewaktu-waktu ingin dikembalikan seperti semula. Caranya klik “Rancangan” lalu pilih edit html. Klik “download Template Lengkap” untuk menyimpan template blog Anda di komputer.

Siapkan template menarik pilihan anda. Ada banyak web penyedia template gratis, atau bahkan yang berbayar jika anda mau, seperti: Islamic Templates, eBlog Templates, BTemplates, Blogspot Templates. Caranya:
  • kunjungilah situs penyedia  template dan pilihlah salah satu template sesuai dengan selera.
  • Download template. Jika tersimpan di file  (ZIP atau RAR) maka extract file tersebut.
  • Dari menu “rancangan” pilih “Edit HTML” lalu klik “Choose File” (pilihlah nama file yang berekstensi XML) dan klik “Unggah (Upload)”.
  • Jika ada konfirmasi untuk menghapus beberapa widget, konfirmasikan saja. Adanya konfirmasi ini karena pada template tersebut masih menggunakan widget standar, seperti Labels, Blog Archieves, dan Followers. Kamu tinggal menambahkan widget baru sesuai yang kamu inginkan.

Read More

This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.