Link-Link Blog
Tampilkan postingan dengan label Artikel. Tampilkan semua postingan
Tampilkan postingan dengan label Artikel. Tampilkan semua postingan

Senin, 09 Februari 2015

Edmodo

Pengertian Edmodo


Situs Pendidikan
Homepage Edmodo
Daftar Isi 
  • Tentang Edmodo
  • Mengapa harus Edmodo?
  • Penggunaan Edmodo   
Tentang Edmodo
Edmodo (edmodo.com) salah satu website yang menyediakan pembelajaran online antara Guru, Siswa dan Orang Tua
Tidak hanya untuk Siswa, Edmodo juga bisa digunakan untuk Orang tua dan Guru untuk memantau anak didiknya di dalam Edmodo tersebut.
Di dalam Edmodo juga tersedia sebuah Grup yang hanya bisa diakses/dimasuki bagi para user yang memiliki kodenya saja. Jadi tidak semua orang yang dapat masuk dalam Grup tersebut tapi hanya yang memiliki kode group saja. Di dalam fitur ini juga bisa digunakan untuk Kelompok Grup, Kelas, Sekolah bahkan Sekolah dalam satu Kota/Kabupaten 

Mengapa harus Edmodo ?
Beberapa kelebihan Edmodo yang dapat kita ketahui, seperti diantaranya sebagai berikut :
  1. Mirip seperti jejaring sosial Facebook.
  2. Mudah digunakan.
  3. Closed Grup Collaboration, hanya bagi orang-orang yang memiliki "Group Code" yang dapat mengikuti kelas tersebut.
  4. Free, diakses secara online serta tersedia untuk Ponsel Smartphone.
  5. Tidak memerlukan Server Sekolah.
  6. Dapat diakses dimana saja dan kapan saja yang Anda inginkan.
  7. Edmodo selalu diUpdate oleh Pengembang.
  8. Edmodo dapat digunakan oleh Siswa, Guru dan Orang tua 
  9. Edmodo juga bisa diaplikasikan dalam 1 (satu) kelas, 1 (satu) sekolah dan antar sekolah dalam 1 (satu) kota/kabupaten, 
  10. Edmodo digunakan untuk saling berkomunikasi dengan menggunakan model seperti Sosial Media, Learning Material dan Evaluasi.
  11. Terdapat notifikasi alias pemberitahuan.
  12. Edmodo mendukung model team teaching, co-teacher, dan teacher collaboration.
  13. Fitur Badge/Lencana yang dapat meningkatkan motivasi pembelajaran siswa.



Penggunaan Edmodo
  • Bagi Siswa
Jika Siswa yang telah mendaftar di dalam Edmodo, maka dapat bisa langsung mengklik Login.
  • Bagi Guru
Jika Guru yang telah mendaftar di dalam Edmodo dan akan melihat/mengamati Siswanya di dalam Edmodo, dapat menggunakan fasilitas "I'm teacher".
  • Bagi Orang Tua
Jika Orang Tua Siswa yang telah mendaftar di dalam Edmodo dan akan melihat aktivitas/kegiatan anak Anda di dalam Edmodo, dapat menggunakan fasilitas "I'm parents".

Penggunaan Edmodo layaknya Penggunaan Facebook. Hanya saja Facebook bisa berbahasa Indonesia dan di Edmodo berbahasa Inggris. Seperti :
  • Sign Up/Daftar. Jalan masuk ke dalam sebuah Jejaring Sosial Pembelajaran Edmodo untuk mulai mengikuti aktivitas yang ada di dalamnya. Dalam pendaftaran Edmodo pun, juga nampak mirip Facebook. Ya, kita harus mengisi Email Pendaftaran, Kata Sandi dan sebagainya.
  • Sign In/Log In/Masuk. Dan jika kita telah terdaftar di dalam Edmodo, Anda juga hanya perlu memasukkan Email dan Kata Sandi/Password sama halnya seperti Facebook, mudah dan dapat dimengerti.
Posted by at Tidak ada komentar:
Labels: , ,

Kamis, 31 Oktober 2013

Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog

Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog

Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog
Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog - Sobat blogger, jika sebelumnya saya ada membuat artikel mengenai Cara Membuat Efek Bintang Berjatuhan Pada Cursor Di Blog, kali ini saya akan share artikel yang sedikit berbeda dengan artikel sebelumnya, yaitu Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog.
Oke, langsung saja. Jika sobat blogger ingin menggunakannya di blog sobat, ikuti langkah-langkah berikut.

  • Login ke akun blog sobat.
  • Pilih Tata Letak =>> Add Gedget / Tambahkan Gedget.
  • Pilih HTML/Javascript.
  • Kemudian Copy kode dibawah ini, kemudian Paste di HTML/Javascript.


<script type="text/javascript">// <![CDATA[
var colours=new Array("#0000FF", "#0BE019", ":#0A0DE6", ":#FF0000", "#66FFFF"); // Warna untuk atas, kanan, bawah dan kiri border dan background gelembung
var bubbles=140; // jumlah maksimum gelembung pada layar

    var x=ox=400;
    var y=oy=200;
    var swide400;
    var shigh=300;
    var sleft=sdown=0;
    var bubb=new Array();
    var bubbx=new Array();
    var bubby=new Array();
    var bubbs=new Array();

    window.onload=function() { if (document.getElementById) {
    var rats, div;
    for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="1px";
    div.left="0px";
    div.bottom="1px";
    div.right="0px";
    div.borderLeft="1px solid "+colours[3];
    div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="0px";
    div.left="1px";
    div.right="1px";
    div.bottom="0px"
    div.borderTop="1px solid "+colours[0];
    div.borderBottom="1px solid "+colours[2];

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.left="1px";
    div.right="1px";
    div.bottom="1px";
    div.top="1px";
    div.backgroundColor=colours[4];
    div.opacity=0.5;
    if (document.all) div.filter="alpha(opacity=50)";

    document.body.appendChild(rats);
    bubb[i]=rats.style;
    }
    set_scroll();
    set_width();
    bubble();
    }}

    function bubble() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
    bubb[c].left=(bubbx[c]=x)+"px";
    bubb[c].top=(bubby[c]=y)+"px";
    bubb[c].width="3px";
    bubb[c].height="3px"
    bubb[c].visibility="visible";
    bubbs[c]=3;
    break;
    }
    }
    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
    setTimeout("bubble()", 40);
    }

    function update_bubb(i) {
    if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>0) {
    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
    bubb[i].width=bubbs[i]+"px";
    bubb[i].height=bubbs[i]+"px";
    }
    bubb[i].top=bubby[i]+"px";
    bubb[i].left=bubbx[i]+"px";
    }
    else {
    bubb[i].visibility="hidden";
    bubby[i]=0;
    return;
    }
    }
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sleft;
    x=(e)?e.pageX:event.x+sdown; }

    window.onresize=set_width;
    function set_width() {
    if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    else {
    swide=800;
    shigh=600;
    }
    }
    window.onscroll=set_scroll;
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height;
    div.style.width=width;
    div.style.overflow="hidden";
    return (div);
    }
    // ]]>
    </script>


  • Kode yang berwarna Biru adalah kode yang bisa sobat ganti untuk warna Gelembung / Bubbles. Kode yang berwarna Merah adalah kode jumlah maksimum gelembung yang ditampilkan pada layar.
  • Simpan dan lihat hasilnya.


Demikian artikel mengenai Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog. Semoga artikel ini dapat berguna dan bermanfaat. Salam blogger.

Sumber : http://adf.ly/1VR4ox
Posted by at Tidak ada komentar:
Labels: , ,

Cara Mengganti Cursor Blogger

changing+blog+cursor

Cara Mengganti Cursor Blogger





Cursor adalah tanda panah yang dipergunakan untuk memilih. Maksudnya memilih fiktur pada sebuah PC atau laptop. Kalo di PC dan di laptop, cursor biasanya berbentuk tanda panah, kadang berwarna putih atau hitam, sesuia dengan OS mereka.

Tau tidak kalo kita dapat merubah cursor bawaan milik pengunjung dengan cursor milik kita saat mereka mengunjungi blog kita ? Caranya sangatlah gampang kita hanya perlu menambahkan script pada widget baru.

Yah walaupun udah banyak orang yang udah posting tentang ini dan juga udah banyak yang tau caranya gimana, tapi gak masalah. Ok jika anda tertarik untuk mengganti cursor, anda dapat mengikuti step by stepnya dibawah ini.

Panduan Cara Mudah Mengganti Cursor Blog

1. Masuk ke akun blogger anda.
2. Masuk ke bagian Layout
3. Klik Tambah Gadget / Add A Gadget
4. Pilih Html/JavaScript
5. Lalu masukan kode dibawah ini 
<style type="text/css">body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNh7ODRBWnSF8zeMOk-U1LRZFW11bqEvi_WBKSW7QEKtoV6RSzjt-7bJ0h4Mj50vc_j8dlFzpZ0EcHiN-yGAlD-LaTxJWcZRfwBE0dyOfXrVP4RPF-bUWc0zyOgl6JXI7Nrqa1lMvIflDz/s1600/jasablogsitus-web-id.gif"), auto;}body a:hover{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNh7ODRBWnSF8zeMOk-U1LRZFW11bqEvi_WBKSW7QEKtoV6RSzjt-7bJ0h4Mj50vc_j8dlFzpZ0EcHiN-yGAlD-LaTxJWcZRfwBE0dyOfXrVP4RPF-bUWc0zyOgl6JXI7Nrqa1lMvIflDz/s1600/jasablogsitus-web-id.gif"), auto;}</style>
Keterangan: 
Silakan rubah tulisan yang saya beri warna Merah dengan url gambar cursor yang kamu suka. Untuk gambar cursor yang lainnya, anda dapat mengunjungi website ini.

5. Simpan

Beberapa koleksi kursor

Sumber : http://ujangyoyo.blogspot.com/2013/03/cara-mengganti-cursor-blogger.html
Posted by at Tidak ada komentar:
Labels: , ,

Rabu, 30 Oktober 2013

Alt Tag Pada Gambar/Image Tanpa Edit HTML V2

Alt Tag Pada Gambar/Image Tanpa Edit HTML V2

SEO, TutorialAdd comments
Alt-Tag-Pada-Gambar/Image-1-Laurencius

Alt Tag Pada Gambar/Image Tanpa Edit HTML V2. Kita kembali lagi ke artikel Optimasi SEO pada Gambar/Image.

Kenapa Laurencius menggunakan kata V2 adalah karena artikel ini kelanjutan dari Cara Memasang Alt Tag Pada Gambar/Image-Optimasi SEO Onpage.

Disamping penerapan optimasi SEO Blog Dengan PenggunaanAnchor Teks, kita dapat melakukan Optimasi SEO dengan Memasang Alt Tag pada Gambar/Image.

Untuk artikel Alt Tag Pada Gambar/Image Tanpa Edit HTML V2 ini kita membubuhkan alt tag nya tanpa mengedit HTML yang terkadang membuat kita para blogger malas untuk melakukannya, kini kita melakukannya cukup pada bagian compose saja.

Bagaimana Teman-teman tertarik melakukannya? berikut caranya :
  • Sesudah meng-upload Gambar/Image pada postingan klik gambar sehingga tampilannya seperti gambar dibawah ini

Alt-Tag-Pada-Gambar/Image-2-Laurencius

  • Kemudian klik Properties dan akan tampil halaman Image Properties seperti ini.

 Alt-Tag-Pada-Gambar/Image-3-Laurencius

    • Isi title text dan alt text pada kolom yang tersedia 
    • Kalau kita sudah selesai melakukannya dan di cek pada bagian HTML nya hasilnya seperti ini.

    Alt-Tag-Pada-Gambar/Image-4-Laurencius

    Ket :
    Title text : Deskripsi Gambar/Image kalau cursor hover ada pada Gambar/Image
    Alt text : Teks Gambar/Image yang akan tercetak dilayar

    Bagaimana teman-teman bisakan? sepertinya sekarang kita jadi mau membuat Alt tag pada Gambar/Image karena tidak repot dengan edit HTML nya.

    Mudah-mudahan artikel ini bermanfaat ya Teman-teman.

    Posted by at Tidak ada komentar:
    Labels: , ,

    Selasa, 29 Oktober 2013

    Cara Membuat Gallery Foto Pada Blogger

    Cara Membuat Gallery Foto Pada Blogger


    Karena kodenya panjang sekali maka langsung saja kita mulai membuat gallery foto pada blogger.  Dalam hal ini kita mempergunakan 16 buah foto.
    Cara pembuatan :
    1. upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
    2. dapatkan url foto yang telah diupload
    3. bikin postingan dalam mode HTML (bukan Compose)
    4. masukkan kode di bawah ini pada postingan
    5. publish dan lihat hasilnya

    membuat-galery-foto-blogspot

    <div class="snap_preview">
    <div>
    <span style="color: #0066ff;font-size: medium;">Seribu Wajah Gayus</span></div>
    <style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
    <div class="gallery snap_nopreview">

    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMQl41FwRGljUJv95pP7es7PLaWcRyVfSGrXP56tJOCEHlJm-8oSpVIiPpHGafaZ5N7nw9zN1wC9MXvuNC5vAGIPvkX0kSay767iMleheTD3Jrv2OOMY45ZaPCyYzLcemqdI3cbt-hT-Q/s320/atronout.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZnaHl_L8xtaR0GVacxEc9YXHD0aXEnwK2ZbKsO6ZFuMERk6hKdS543bO1DA9Jok3L_f8r1qzBEjUBnaOE10Uw-sIvsRbAXes9dez3Y-VOLeyG3TqKIexzd1yQTUeWe_LOyJXB_fOsTo/s320/bieeen.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSF4OwGyR3Zs2yXaQnYxwfFzR5aLsYAhJtEE0xkeO0ZbLPcnRJzJzLgLzFn16TkeFUNSbKZbxBlGHPcIHlqvX6ImQmFBZpLGs9vzzlTWJzuUBAY5BEVNboGw8veO7nCfX-7LNDGWvAN0/s320/blankon.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60j4oMWMOmt5XnyO2xlNzcYI2s8UIywB26M6yAAQxxKxiWOxMrDmGXvfA4K27r0o8jRqG1TD22na4kMPsxXK4PkOD_dp2CDQamm53pCIhc598vz5VlyBeLUTtI9a7WEU_z_FLLmrsY80/s320/boxing.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxSHSHM1_OmIWxCW-aFCWe5GDLNIm3ZqCMu8LEhSRZYs6pssEIMvsizolwisNT2I3od9cTitS7jliPpeI9vSL5OoaUG3hwzPwypqC9KeJ9ExAXDcQIBBFOQ2-vC0ISKLhXJNXlVbbBZ4/s320/duits.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMkGDvbLZhO9KnRBbfp3_1HdgJXr0n1pJOBIrulqGqvnHQfT95GAk0wTLafe4TzJ0Ixp48TbMpCfAUCkGzaXjAW5CM0uBPkVj22BvFbTopuRfKdysqnQI0GwjyBo_SJdSFL7_51Hdipe8/s320/goyang.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYJV2rPlfnxx4n3Pa_yp7Bb-6d7oPSFo6xDj_ME_NIs2B-EV9sLVQLpC1iGyFUgR2gXOqxPyZNhxPQ498s8rd0URcQLgFd2HqsrFX4cGqVYBfTqSOv_aaCy1EdCDu3cBTqfZT36omJoU/s320/hormat.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnWOBobs9R4jxMdecRY-5p2aQR4X7lb2DhLN0Xdd7oKfXcvgAw68ACrUZ7zl8_PLTGlQY39T6tzwPJnOSdnI-Vw63OSVSk0KCvHOfZQTLa_xLjb6DNdMKZj72srww8zsMmC4Pi4T1BkpQ/s320/jendr.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-hXrrgdixPG46_m0R_p6mGNnvtpjV6OTJruS23ywQrilF-G7RMFCumTnKUJlIoA2Msu_Wk-0K25BrhDztKPBG5QNOJaL-lJlz8x_8jMyzN-SsON1IPn-xU6yvGkFQO7etOuk7o9po4E/s320/koran.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDCH2Q-PVM_nfyMVUJTBxRVJGE3mdi-je2DX550QQNAaYdTMdisCkUMsRI29KxVGFT86fllVouSdgfAtmlRV8YuvZLhmNHmpNGuo6C8HqHDkkgFIv0DRFWnvQyCKh73Gr-cl_zL_3XAwk/s320/samar.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLvNZI2oiETq3UuaGzFBLIm6jvLks-BBCMaunOFPED7fspQD75Wg0ym_WzTmN2PSIw1fr5aCmiy59u-ZPeWqNw8_MqwFWDFxYl-doMVVZte8hhSS8MxDnkVSoxdoz53t5xfbw9Qw3QpoA/s320/seribu.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tCncZ6BchimcHpjGm1bfhqp19MYlC5zKz_aXFx6R07d1xvhKz_imgv1ZCOSq7SUrrWypWxtWxooCkEkhyQ7Fkbp_kHAiNVZBRb_xqBsukCGowPmx7IycZ6i1Wosvh7NyHmqUfmcPz2Y/s320/silat.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQD_6YIHwrjlXhPjT8Z5if3bPGTYZF8g97616KGNNDutmcNG9v2v_7Pnof9BwFxckhXbwsUUNcG-VuWUPfsF-QRBpfwtriiCHsqY8guERV8iXC-wmlCU8uAlsN8He45BfGJWHU-4VGnVE/s320/wig1.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLYVe81ocrxGedb2ENEQUQEr7stfmSp5SqpdSp4mNbqTbvkp8L4Eri4lflYIGlVbZmLlWpauyXxycAefYS8TyaY8ovjCenkl8e1nbY1pqN4eV4dieD_NUHyFfFUreGXlZVsAjlZmWU34/s320/tenis.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9cTisBvpXhR7khn4NqVWZ07mpwsmcdlwmOSACJBtFCD6suzT5fPmrfn3hCFVT66F-XZBMlPUQki-SeEySsQ4U-7LPIbOYMYbNVYsJRdBQkO6s2BcIWoESRtH8M8mfWnZxcAFJt9OvXTI/s320/santai.jpg" width="200" /></a>
    </dt>
    </dl>
    <dl class="gallery-item">
    <dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
    <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEX_n0ayARW-piHcivlo6L-NkBUFpd2eUi7hCfdclNW2gNJw-aqk07tVJCqHjBngPHoOsI5YUdeU_JBHgfvisNnOgd4L9d9G8qxbgz_A17Mxo5pT2O4M2uvgfaZF1LTlQAFIbdRV1s1Fw/s320/kacamata.jpg" width="200" /></a>
    </dt>
    </dl>
    </div>
    </div>
    Catatan Penting :
    1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
    2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
    3. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
    4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
    5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
    6. Kalau semuanya sudah dilakukan dengan benar, hasilnya bisa dilihat.

    Posted by at Tidak ada komentar:
    Labels: , ,

    Gallery Foto Bisa Dibikin Pakai CSS3


    Gallery Foto Bisa Dibikin Pakai CSS3


    Ada banyak versi tutorial bagaimana membuat gallery foto di blog. Terutama di blogger yang berplatform blogspot diperlukan keterampilan khusus untuk dapat memajang gallery foto di area posting.


    Selama ini yang kita tau teknik pembuatan Gallery foto hanya dengan menggunakan fungsi table, namun sekarang ada kemajuan dari pengembang blog dengan hadirnya css3.



    Meskipun belum semua browser mendukungnya namun alternative penggunaan kode css3 ini patut kita aplikasikan dalam upaya melengkapi koleksi postingan kita.



    Dalam percobaan ini disarankan anda menggunakan mozilla firefox versi baru agar hasilnya nanti dapat maksimal dan memuaskan.



    Berawal dari coba-coba menerapkan css3 untuk postingan berkolom yang saya dapat dari blog OB (http://optimasi-blog.blogspot.com/) dan berhasil.  Untuk itu lewat kesempatan yang baik ini saya ingin mengucapkan terimakasih kepadanya karena beliau telah memberikan inspirasi terhadap postingan yang saya beri title Gallery foto bisa dibikin pakai css3 ini.

    Lihat Demo

    Untuk membuat galeri foto dengan css3 caranya seperti ini :

    1. buatlah postingan baru
    2. upload semua gambar yang ingin dipajang, usahakan gambar memiliki ukuran width dan height yang sama
    3. setelah gambar terupload klik postingan mode Html (agar kode gambar terlihat)
    4. masukkan kode ini di atas kode gambar posting lalu tutup dengan </div>
    susunannya seperti ini :
    <style>
    .post-column-empat {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -khtml-column-count: 4;
    -khtml-column-gap: 10px;
    line-height:1.8em;
    }
    </style>

    <div class="post-column-empat">
    ....KODE GAMBAR POSTING....
    </div>
    Kalau semuanya sudah terpasang, preview dulu jika sudah sesuai keinginan kita maka klik publish post.

    Berikut ini contoh semua kode yang ada di halaman posting :
    <style>
    .post-column-empat {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -khtml-column-count: 4;
    -khtml-column-gap: 10px;
    line-height:1.8em;
    }
    </style>

    <div class="post-column-empat">
    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyw9AIek5iFxBn6-pL0ZVFqwnFNBwhXrG6NM9Wfr37701woMlJnAR4HWuZGiiVLumBZ2YZDIwuTM29a21eECAM8kz_iINW953FB4Ug8iFFYSOZ8zo8mksNlv6R30Gep_Y5GjHiTxYpnko/s1600/yusuf+darussalam.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyw9AIek5iFxBn6-pL0ZVFqwnFNBwhXrG6NM9Wfr37701woMlJnAR4HWuZGiiVLumBZ2YZDIwuTM29a21eECAM8kz_iINW953FB4Ug8iFFYSOZ8zo8mksNlv6R30Gep_Y5GjHiTxYpnko/s200/yusuf+darussalam.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxr79h98mWbSv3Z1Hos2HjkVvpZg2VphFfMQVM3lWo2WK5IABS530NMuKq9SAdP48eeJbNi7I9KMusvzEfbR1OrMR0lF6TuSStmDb9ar7rRgUmg2y0bcPfrlWputVUozje9FEZTM8EgNs/s1600/Agus+Riyanto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxr79h98mWbSv3Z1Hos2HjkVvpZg2VphFfMQVM3lWo2WK5IABS530NMuKq9SAdP48eeJbNi7I9KMusvzEfbR1OrMR0lF6TuSStmDb9ar7rRgUmg2y0bcPfrlWputVUozje9FEZTM8EgNs/s200/Agus+Riyanto.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ch1NJYTJnzg-kWpqPJRyvKWRz3pBjz-LVFkEGvqpuGHLMZlXj0ohFIkZ1JmAb_rLQHLZNI4ptICC8McTw4S7k3-KspQNRdiyQ7FkQma_aHyT9mbCsilhIssR1hhOCrwnwt2aZZd9gq4/s1600/Akhmad+Saputro.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ch1NJYTJnzg-kWpqPJRyvKWRz3pBjz-LVFkEGvqpuGHLMZlXj0ohFIkZ1JmAb_rLQHLZNI4ptICC8McTw4S7k3-KspQNRdiyQ7FkQma_aHyT9mbCsilhIssR1hhOCrwnwt2aZZd9gq4/s200/Akhmad+Saputro.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalpZu_FfFs6xd6FABJQrWVc-D-fhNcASWfluvzXds5NA1_JIm5QtueYUlXzwy4ACUFSH6IWQHdbEwSGCgBKNDkG473Gp9KKmtv7PPOUNiN2hyphenhyphen0QsAt2qU0kHUyHyqX-TgS3qUD-HgyrY/s1600/Anis+Khabibah.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjalpZu_FfFs6xd6FABJQrWVc-D-fhNcASWfluvzXds5NA1_JIm5QtueYUlXzwy4ACUFSH6IWQHdbEwSGCgBKNDkG473Gp9KKmtv7PPOUNiN2hyphenhyphen0QsAt2qU0kHUyHyqX-TgS3qUD-HgyrY/s200/Anis+Khabibah.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwY89XZKMDHCsTW80xjr3ciI9gmQRr19Kz6al2KGCsqbmobXfrXqe5If8jUJkf2BNAGSSOiWjm54i4_F9J45FOd42KBYXfo-tQrHmSF13O_kf59frjBR0yJtVSeDi5VTPCdtRcxFf9MAY/s1600/Diana+Fitri+Anisah.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwY89XZKMDHCsTW80xjr3ciI9gmQRr19Kz6al2KGCsqbmobXfrXqe5If8jUJkf2BNAGSSOiWjm54i4_F9J45FOd42KBYXfo-tQrHmSF13O_kf59frjBR0yJtVSeDi5VTPCdtRcxFf9MAY/s200/Diana+Fitri+Anisah.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKNWMQd4EltIdnslP3tjYE7_voeM8GqwM7BuyAXwlp0bOcbB5juUESfKFcZHM5SIuCwnnZF6wNY-jkzZJlu5p_JTD8kQMO8Mf2lvotYC6Tz4nzQhyn6DS3EwFRjItmrSz081OkyE9Fnns/s1600/M+Budiman.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKNWMQd4EltIdnslP3tjYE7_voeM8GqwM7BuyAXwlp0bOcbB5juUESfKFcZHM5SIuCwnnZF6wNY-jkzZJlu5p_JTD8kQMO8Mf2lvotYC6Tz4nzQhyn6DS3EwFRjItmrSz081OkyE9Fnns/s200/M+Budiman.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaJdDYbQtBP_bjNoYwSO18yJ9zIPPu-hRh2a9pJqfpk4C4iwb6I5gnDayzGc8wbrnj1s_zLaocAqiazRJRv_mjMhiQBWFQ2qGRCpl5Yyj4AAm4gJD6yEe7SUCAzTmfWUAaXoD4d-IRRlw/s1600/mega.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaJdDYbQtBP_bjNoYwSO18yJ9zIPPu-hRh2a9pJqfpk4C4iwb6I5gnDayzGc8wbrnj1s_zLaocAqiazRJRv_mjMhiQBWFQ2qGRCpl5Yyj4AAm4gJD6yEe7SUCAzTmfWUAaXoD4d-IRRlw/s200/mega.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpe2MhU_vLBvm46dCoyAdzXTVN_mitKXU-EUi9Wuq-ko3z_9DfzVsDOf7beldpNiyouTZcINkTq9kUrXJvhQzrkZ1XLXesEQRbPTTmn0sAUIDktFji2x1SOn7X3Sup5sBWF9W3jqCJvXM/s1600/Nurzanah.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpe2MhU_vLBvm46dCoyAdzXTVN_mitKXU-EUi9Wuq-ko3z_9DfzVsDOf7beldpNiyouTZcINkTq9kUrXJvhQzrkZ1XLXesEQRbPTTmn0sAUIDktFji2x1SOn7X3Sup5sBWF9W3jqCJvXM/s200/Nurzanah.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8KN_Z_ulaME6P8A5r9kDrAkZBs2c9M9mFcqV4LOirjbaWP_e3zldGC6JxWiU3xXH34PTdlP74-42KlweVTWvZsyWlo54hMOZd6048VEQQCFqjA6CgSAxvRbA-kOUIrDi7XXWpT1-rRww/s1600/Putra+Triyanto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8KN_Z_ulaME6P8A5r9kDrAkZBs2c9M9mFcqV4LOirjbaWP_e3zldGC6JxWiU3xXH34PTdlP74-42KlweVTWvZsyWlo54hMOZd6048VEQQCFqjA6CgSAxvRbA-kOUIrDi7XXWpT1-rRww/s200/Putra+Triyanto.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBftB80wrIWjBkPzOSXrlyiiI88wSkbl2mfKkWk4Mf1DxBNt7K6NRSMuMPgyY3Z9u79Yfn4lUnWdvW8l280E0rrnuh3pdHqn8CkhMqjGl-YvYTIMB3qwlbCswxOfHzBY0UErQpCIAveVA/s1600/Sarifudin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBftB80wrIWjBkPzOSXrlyiiI88wSkbl2mfKkWk4Mf1DxBNt7K6NRSMuMPgyY3Z9u79Yfn4lUnWdvW8l280E0rrnuh3pdHqn8CkhMqjGl-YvYTIMB3qwlbCswxOfHzBY0UErQpCIAveVA/s200/Sarifudin.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguatGPnnShw9gKw-ug4jBHx-e7RKrJIF59Dk5npJHhISTbXtlfN4av8GqFkHo0LqGiKQ2AaIIGPiLfeqSOyV9tiXSU2O-MMTFheuM8JPFWx8ZoqimKTc53pYhiawpZ592qQ3ZxACUnQPY/s1600/Siti+Sundari.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguatGPnnShw9gKw-ug4jBHx-e7RKrJIF59Dk5npJHhISTbXtlfN4av8GqFkHo0LqGiKQ2AaIIGPiLfeqSOyV9tiXSU2O-MMTFheuM8JPFWx8ZoqimKTc53pYhiawpZ592qQ3ZxACUnQPY/s200/Siti+Sundari.jpg" width="150" /></a></div>

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgURoEDDAU-AXVNehC5Oma2yZi66t254ibUWJNlgn0qlyxdhBws4HjZpgmYlkh4zsCQTbTh-_evYTD4EAywkTb4CDduF-m7JGYx43fX3ldZ1VHUyNWbCKs-DqZMfaAIrE4xrpa085PxutQ/s1600/ududz.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgURoEDDAU-AXVNehC5Oma2yZi66t254ibUWJNlgn0qlyxdhBws4HjZpgmYlkh4zsCQTbTh-_evYTD4EAywkTb4CDduF-m7JGYx43fX3ldZ1VHUyNWbCKs-DqZMfaAIrE4xrpa085PxutQ/s200/ududz.JPG" width="150" /></a></div>
    </div>

    Keterangan :
    1.    Yang berwarna merah adalah kode css3
    2.    warna biru menunjukkan kode URL Gambar posting
    3.    column-count: 4; (agar empat gambar berjajar ke kanan)
    4.    column-gap: 10px; (jarak antar kolom)
    5.    line-height:1.8em; (ialah jarak antar gambar atas dengan gambar di bawahnya)

    Sumber : http://brugkembar.blogspot.com/2011/02/gallery-foto-bisa-dibikin-pakai-css3.html
    Posted by at Tidak ada komentar:
    Labels: , ,
    Langganan: Postingan (Atom)