Tempatnya Belajar dan Berbagi

Written By Unknown on Kamis, 15 Agustus 2013 | Kamis, Agustus 15, 2013

Tempatnya Belajar dan Berbagi


Membuat Efek Mirror/Reflect Pada Gambar di Blog

Posted: 14 Aug 2013 04:03 AM PDT


Tutorial kali ini saya sajikan untuk temen-temen blogger yang seneng dengan modifikasi gambar di dalam postingan. Selain membuat efek shadow pada gambar postingan, kita juga bisa memberikan efek mirror atau reflect pada gambar yang ada di postingan. Sebenarnya membuat efek mirror ini bisa juga dengan menggunakan situs-situs online, seperti  reflectionmaker.com untuk gambar dan mirrortext.net untuk membuat efek mirror pada teks atau tulisan.
Cara membuat image reflection atau gambar dengan efek bayangan pada posting adalah dengan menambahkan kode javascript pada template blog. Gambar diatas adalah salah satu contoh dari efek mirror yang saya buat dengan cara menambahkan perintah class="reflect" pada setiap image yang telah diupload ke posting. Untuk lebih jelasnya perhatikan langkah-langkah berikut ini :

Membuat image reflection otomatis pada posting

  1. Login ke blogger dengan id anda
  2. Klik Tata Letak
  3. Pilih menu Edit HTML
  4. Letakkan kode berikut di atas kode </head>
    <script type='text/javascript'>  //<![CDATA[  if (!document.myGetElementsByClassName) {  document.myGetElementsByClassName = function(className) {  var children = document.getElementsByTagName('*') || document.all;  var elements = new Array();    for (var i = 0; i < children.length; i++) {  var child = children[i];  var classNames = child.className.split(' ');  for (var j = 0; j < classNames.length; j++) {  if (classNames[j] == className) {  elements.push(child);  break;  }  }  }  return elements;  }  }  var Reflection = {  defaultHeight : 0.5,  defaultOpacity: 0.5,    add: function(image, options) {  Reflection.remove(image);    doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }  if (options) {  for (var i in doptions) {  if (!options[i]) {  options[i] = doptions[i];  }  }  } else {  options = doptions;  }    try {  var d = document.createElement('div');  var p = image;    var classes = p.className.split(' ');  var newClasses = '';  for (j=0;j<classes.length;j++) {  if (classes[j] != "reflect") {  if (newClasses) {  newClasses += ' '  }    newClasses += classes[j];  }  }    var reflectionHeight = Math.floor(p.height*options['height']);  var divHeight = Math.floor(p.height*(1+options['height']));    var reflectionWidth = p.width;    if (document.all && !window.opera) {  /* Fix hyperlinks */  if(p.parentElement.tagName == 'A') {  var d = document.createElement('a');  d.href = p.parentElement.href;  }    /* Copy original image's classes & styles to div */  d.className = newClasses;  p.className = 'reflected';    d.style.cssText = p.style.cssText;  p.style.cssText = 'vertical-align: bottom';    var reflection = document.createElement('img');  reflection.src = p.src;  reflection.style.width = reflectionWidth+'px';  reflection.style.display = 'block';  reflection.style.height = p.height+"px";    reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';  reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';    d.style.width = reflectionWidth+'px';  d.style.height = divHeight+'px';  p.parentNode.replaceChild(d, p);    d.appendChild(p);  d.appendChild(reflection);  } else {  var canvas = document.createElement('canvas');  if (canvas.getContext) {  /* Copy original image's classes & styles to div */  d.className = newClasses;  p.className = 'reflected';    d.style.cssText = p.style.cssText;  p.style.cssText = 'vertical-align: bottom';    var context = canvas.getContext("2d");    canvas.style.height = reflectionHeight+'px';  canvas.style.width = reflectionWidth+'px';  canvas.height = reflectionHeight;  canvas.width = reflectionWidth;    d.style.width = reflectionWidth+'px';  d.style.height = divHeight+'px';  p.parentNode.replaceChild(d, p);    d.appendChild(p);  d.appendChild(canvas);    context.save();    context.translate(5,image.height-1);  context.scale(1,-1);    context.drawImage(image, 0, 0, reflectionWidth, image.height);    context.restore();    context.globalCompositeOperation = "destination-out";  var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");  gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");    context.fillStyle = gradient;  context.rect(0, 0, reflectionWidth, reflectionHeight*2);  context.fill();  }  }  } catch (e) {  }  },    remove : function(image) {  if (image.className == "reflected") {  image.className = image.parentNode.className;  image.parentNode.parentNode.replaceChild(image, image.parentNode);  }  }  }    function addReflections() {  var rimages = document.myGetElementsByClassName('reflect');  for (i=0;i<rimages.length;i++) {  var rheight = null;  var ropacity = null;    var classes = rimages[i].className.split(' ');  for (j=0;j<classes.length;j++) {  if (classes[j].indexOf("rheight") == 0) {  var rheight = classes[j].substring(7)/100;  } else if (classes[j].indexOf("ropacity") == 0) {  var ropacity = classes[j].substring(8)/100;  }  }    Reflection.add(rimages[i], { height: rheight, opacity : ropacity});  }  }    function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {  window.onload = func;  } else {  window.onload = function() {  if (oldonload) {  oldonload();  }  func();  }  }  }  addLoadEvent(function() {  addReflections();  });  //]]>  </script>
  5. Klik tombol Simpan Template
  6. Selesai
Cara menggunakan perintah image reflection class="reflect"

Misalnya anda upload image saat membuat postingan di blogger. Ada dua pilihan yaitu upload dari komputer atau dari URL tertentu, maka anda tinggal menambahkan perintah class="reflect" pada kode gambar. Sebagai catatan, lakukan ini pada posisi posting pilihan Edit HTML, jangan pada posisi Compose.


Contoh pertama:
Upload gambar dari komputer seperti ini :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiRzarwym1vJCOcomJoeyBFN4LYbK9v7oyCFeQFd_0z_oDs-igoRqixlq3yxLmehDSs4lQSZCtU10ZZFY3QTE5M2Ar2pqAUUCJF2jNKbQU5hPFIXfe4HOxwp10jTZJfhEjg-i-CBZgRaX1/s1600-h/hello.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 175px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiRzarwym1vJCOcomJoeyBFN4LYbK9v7oyCFeQFd_0z_oDs-igoRqixlq3yxLmehDSs4lQSZCtU10ZZFY3QTE5M2Ar2pqAUUCJF2jNKbQU5hPFIXfe4HOxwp10jTZJfhEjg-i-CBZgRaX1/s400/hello.jpg" alt="" id="BLOGGER_PHOTO_ID_5399272130099778354" border="0" />
Tambahkan kode class="reflect" sehingga menjadi ini :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiRzarwym1vJCOcomJoeyBFN4LYbK9v7oyCFeQFd_0z_oDs-igoRqixlq3yxLmehDSs4lQSZCtU10ZZFY3QTE5M2Ar2pqAUUCJF2jNKbQU5hPFIXfe4HOxwp10jTZJfhEjg-i-CBZgRaX1/s1600-h/hello.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 175px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiRzarwym1vJCOcomJoeyBFN4LYbK9v7oyCFeQFd_0z_oDs-igoRqixlq3yxLmehDSs4lQSZCtU10ZZFY3QTE5M2Ar2pqAUUCJF2jNKbQU5hPFIXfe4HOxwp10jTZJfhEjg-i-CBZgRaX1/s400/hello.jpg" alt="" class="reflect" id="BLOGGER_PHOTO_ID_5399272130099778354" border="0" />
Contoh kedua :
Upload gambar dari URL tertentu, seperti ini :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghHW2RTwKA8VtQzSjlj530xUNVE0IpCKuHPGlqq6ZWPRXqsZqAN7zhQcdlkG-rShgv0FFQFGfskQyvDt_B6YFnlIh6RGHHJ8-FIvZAcqC4vfLHRUwK9UoBcUHkuVVrP7O4qGDGqWqdXlc/s1600/shadow+maskolis.jpg" imageanchor="1"><img alt="shadow effect maskolis" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghHW2RTwKA8VtQzSjlj530xUNVE0IpCKuHPGlqq6ZWPRXqsZqAN7zhQcdlkG-rShgv0FFQFGfskQyvDt_B6YFnlIh6RGHHJ8-FIvZAcqC4vfLHRUwK9UoBcUHkuVVrP7O4qGDGqWqdXlc/s1600/shadow+maskolis.jpg" style="margin-left: 1em; margin-right: 1em;" /></a>
Tambahkan kode class="reflect" sehingga menjadi ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghHW2RTwKA8VtQzSjlj530xUNVE0IpCKuHPGlqq6ZWPRXqsZqAN7zhQcdlkG-rShgv0FFQFGfskQyvDt_B6YFnlIh6RGHHJ8-FIvZAcqC4vfLHRUwK9UoBcUHkuVVrP7O4qGDGqWqdXlc/s1600/shadow+maskolis.jpg" imageanchor="1"><img alt="shadow effect maskolis" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghHW2RTwKA8VtQzSjlj530xUNVE0IpCKuHPGlqq6ZWPRXqsZqAN7zhQcdlkG-rShgv0FFQFGfskQyvDt_B6YFnlIh6RGHHJ8-FIvZAcqC4vfLHRUwK9UoBcUHkuVVrP7O4qGDGqWqdXlc/s1600/shadow+maskolis.jpg" class="reflect" style="margin-left: 1em; margin-right: 1em;" /></a>
Kalau sudah selesai, sekarang klik Publish Post atau terbitkan entri dan lihat hasilnya. Sekian tutorial malam ini semoga tidak ada kesulitan, selamat mencoba dan semoga bermanfaat.

Memonitor Pengunjung dengan Google Analytics

Posted: 14 Aug 2013 03:57 AM PDT


Apa temen-temen ingin mengetahui pengunjung yang mampir di blog kita? Terkadang kita dibuat penasaran siapa dan darimana saja pengunjung itu datang. Untuk mengetahuinya kita bisa memasang feedjit atau histats di blog kita. Tapi kali ini saya akan memperkenalkan kepada Anda alternatif yang perlu Anda pertimbangkan. Yang akan menjadi alternatif kali ini adalah Google Analytics. Sebuah program dari Google yang dapat Anda gunakan. Kelebihan pertama dari Google Analytics dibanding Feedjit adalah pemasangannya yang tidak memakan tempat seperti Feedjit yang harus memasang statistik yang mereka berikan, dari Google hanya perlu memasang script di blog Anda. Nah, kalau dari Google, kita akan mengetahui bagaimana blog kita akan dinilai oleh Google dari segi pengunjung yang akan mempengaruhi Alexa kita.

Langsung saja kita ke langkah-langkahnya :
  1. Pertama yang mesti anda buka Google Analytics  jangan yang lain.
  2. Sign Up dengan menggunakan email Google Anda untuk dapat mengakses Google Analyticsmaskolis Google Analytics
  3. Isilah data blog Andamaskolis Google Analytics
  4. Isi nama, kemudian cek aturan yang diberikan. Klik Create a New Account
  5. Langkah terakhir, copy kode yang diberikan dan letakkan kode tersebut di atas </body>maskolis Google Analytics
  6. Klik Save and Finish jika sudah selesai.
Akun Google Analytics Anda sudah selesai dibuat. Dengan begitu setiap hari Anda dapat memonitor berapa pengunjung perhari serta yang lain. Klik pada domain yang Anda daftarkan untuk melihat statistiknya:
maskolis
Anda akan melihat beberapa statistik seperti Diagram Garis maupun diagram Lingkaran seperti di bawah ini:
maskolis Google Analytics
Ini sekedar tips dari saya, saya sarankan temen-temen memasang Google Analytics ini pada awal pembuatan blog. Begitu blognya jadi langsung pasang Google Analytics. Jadi kita bisa memonitor blog kita sejak awal.

Upload File Themes dan Plugin Wordpress dengan FTP Filezilla

Posted: 14 Aug 2013 04:05 AM PDT


Tutorial Wordpress kali ini akan membahas mengenai cara upload file themes dan plugin Wordpress dengan menggunakan FTP Filezilla. Seperti kita ketahui, mengganti sebuah themes pada blog wordpress memang tidak semudah mengganti themes pada blog berplatform blogspot. Pada kesempatan kali ini, saya akan menggunakan metoda upload file themes dan plugin wordpress melalui FTP client yaitu Filezilla, tidak menggunakan fitur file manager dari cpanel yang disediakan pihak web hosting.

FTP atau File Transfer Protocol merupakan alat untuk mentransfer file yang biasanya dilakukan untuk mentransfer file dari 1 ip ke ip lain atau dari PC ke hosting dan sebaliknya. Namun kali ini saya lebih spesifik mengenai bagaimana menggunakan FTP untuk mentransfer file dari PC ke Hosting atau sebaliknya. Banyak software yang bisa digunakan sebagai saran FTP, Pada tutorial wordpress kali ini saya menggunakan Software FTP Client Filezilla. Selain gratis, Filezilla ini mudah digunakan dan sangat powerfull. 

Untuk lebih jelas bagaimana cara upload file theme dan plugin Wordpress dengan menggunakan FTP Filezilla adalah sebagai berikut :
  1. Pastikan software Filezilla telah terinstal di komputer anda. Jika belum anda dapat mendownload software filezilla gratis di http://filezilla.sourceforge.net. Setelah mendownload, silakan instal program tersebut.
  2. Buka program filezilla, lalu masuk ke menu site manager
  3. Kemudian klik pada New Site
  4. Isi host dengan nama domainanda, misal host: helmiikhwanul.co.cc gunakan port 21 pada logontype pilih normal lalu isi user dan password sesuai login ke cpanel anda
  5. Setelah itu klik pada menu Advanced
  6. Pada passive transfer mode setting, pastikan check pada use passive mode. Lalu klik ok Setelah selesai pengaturan klik connect
  7. Setelah terhubung ke server, maka akan tampak tampilan sebagai berikut:
  8. Kolom di sebelah kiri adalah directori pada komputer anda, sedang di sebelah kanan adalah directori pada server hosting website anda. Untuk upload anda tinggal mencari file pada komputer anda yang hendak diupload, lalu pindahkan dengan men-drug file tersebut ke kolom sebelah kanan ke folder yang sesuai. Agar bisa diakses oleh pengunjung pastikan file yang anda upload berada pada folder public_html.
  9. Setelah selasai anda tinggal menutup program tersebut, maka otomatis akan disconnect
Itu tadi tutorial wordpress pada hari ini, jika anda mengalami kesulitan isi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Membuat Kategori Di WordPress

Posted: 14 Aug 2013 04:04 AM PDT


Sudah lama saya tidak menulis tentang tutorial Wordpress, walaupun pengetahuan saya tentang modifikasi Wordpress tidak begitu bagus, saya akan tetep berusaha untuk memberikannya kepada teman-teman semua. Kali ini saya akan membahas tentang cara membuat kategori di Wordpress. Kategori pada wordpress adalah pengelompokan artikel atau posting berdasarkan nama kategori itu sendiri. Dengan adanya kategori maka pencarian akan artikel tertentu dapat lebih mudah, misal posting anda akan di kategorikan sebagai kategori berita, politik, ekonomi, entertainment, dan lain sebagainya.

Untuk membuat kategori post ada dua cara, yaitu melalui Categories yang ada pada menu Posts, yang kedua adalah melalui menu Categories ketika anda melakukan posting artikel. Dalam kategori ada istilah Parent Category (kategori induk/kategori utama) ada juga yang dinamakan Child Category (kategori anak /kategori cabang). Parent Category atau kategori induk atau kategori utama adalah kategori yang berdiri sendiri, contoh kategori induk seperti : Olah raga. Child Kategori atau kategori anak atau kategori cabang adalah merupakan bagian dari kategori induk. Misal apabila kategori induk adalah Olah raga, maka kategori anak atau kategori cabangnya bisa Sepak bola, Bulu tangkis, Moto JP, Tinju, Basket dan lain sebagainya.

Baiklah, langsung saja pada cara-cara pembuatannya :

Cara Pertama
  1. Alihkan perhatian ke sebelah kiri atas monitor, klik pada menu Posts, lalu klik sub menu Categories.
    maskolis wordpress kategori
  2. Masukan nama kategori yang diinginkan pada form Name, misal : Olah Raga
    maskolis nama kategori
  3. Untuk form slug bisa anda isi atau bisa juga di kosongkan. Ini adalah nama untuk alamat yang muncul pada address. Apabila dikosongkan maka category-slug (nama untuk alamat kategori) akan secara otomatis menggunakan nama kategori tersebut, Jika nama Kategorinya adalah Olah Raga, maka category-slug akan otomais menjadi olah-raga. Misalkan, untuk kategory Olah Raga, alamat yang muncul nantinya jadi seperti berikut : http://idtutorial.com/category/olah-raga/, Apabila anda menginginkan category-slug yang lain, anda bisa mengisi form Slug dengan nama yang di inginkan, misal nama kategori nya adalah Olah Raga namun slug nya adalah sport, maka contoh alamatnya menjadi : http://idtutorial.com/category/sport/
  4. maskolis category slug
  5. Untuk Parent, disana terdapat menu drop down untuk bisa anda pilih. Apabila kategori yang sedang anda buat adalah kategori induk, maka pilih None. Apabila kategori yang sedang anda buat adalah kategori cabang, maka pilihlah kategori induk nya, namun untuk membuat sebuah kategori cabang sebelumnya anda harus terlebih dahulu membuat kategori induk.
    maskolis kategori utama
  6. Untuk form deskripsi bisa anda isi atau kosongkan. Deskripsi dari sebuah kategori hanya muncul pada theme-theme tertentu saja.
  7. Apabila sudah yakin, klik tombol Add New Category.
  8. Selesai.
Cara Kedua
  1. Diasumsikan bahwa anda sedang membuat sebuah posting.
  2. Alihkan perhatian pada sebelah kanan monitor, disana terdapat menu Categories.
  3. Klik tulisan Add New Category. Isi form yang ada dengan nama kategori, jika ingin membuat kategori anak, maka pilih kategori induknya. Akhiri dengan klik tombol Add New Category
  4. maskolis membuat kategori
  5. Selesai.
Catatan
Buatlah nama kategori yang informatif  demi memudahkan pengunjung blog anda untuk membaca artikel yang mereka ingin baca. Pengkategorian atau pengelompokan artikel bisa sebagai salah satu cara agar pengunjung blog anda nyaman dan betah untuk berlama-lama pada blog anda.

Demikian tadi sedikit pengetahuan saya tentang membuat kategori di Wordpress, selamat mencobat dan semoga bermanfaat.

0 komentar:

Posting Komentar