Author: Kama

Membuat Slideshow atau artikel bergerak pada drupal

Cara membuat slide show pada drupal dengan menggunakan modul views slideshow. Kali ini saya akan membahas bagaimana cara membuat slide show artikel pada drupal. Sudah ngerti kan mengenai slide show, kalau belum coba liat artikel-artikel yang bergerak pada web besar di Indonesia, seperti detik, goal, okezone dll. Artikel yang bergerak dan saling berganti itulah yang dinamakan slide show. Biasanya artikel yang dijadikan slide show merupakan artikel-artikel yang lagi populer atau hot topik.

Membuat slide show di drupal kita perlu menginstal modul views dan views slide show beserta dengan modul-modul pendukungnya seperti ctools dll. Untuk yang belum mengerti cara install modul di drupal, dapat mengikuti panduannya disini. Sebenarnya banyak modul yang tersedia di drupal untuk membuat slide, sebagai contoh ddblock dll. Namun yang akan saya bahas disini dengan menggunakan module views slide show.

Berikut langkah-langkah untuk membuat slide show pada drupal

Install module slide show beserta modul-modul pendukungnya seperti modul ctools, views dan libraries dan jangan lupa untuk mendownload librarie jquery cycle untuk effect slide pada artikel nanti, dan tempatkan pada folder sites – all – libraries – jquery.cycle – jquery.cycle.all.js. Jika sudah menginstal keempat module tersebut. Kemudian masuk di konfigurasi views slide show klik menu structure – views dan klik add new views.

Buat view dengan nama slide show artikel pada kolom view name, pilihan show pilih content dengan type artikel agar hanya content artikel saja yang dijadikan slide show dan sorted by newer first (diurutkan berdasarkan artikel terbaru). Karena disini kita akan membuat slide show dalam bentuk block maka hilangkan centang pada create a page, cukup centang create a block kemudian klik continue & edit.

Sesuaikan format views seperti contoh diatas. Yang perlu dirubah adalah pada bagian format, ubah format menjadi slideshow dan klik settings. Scroll mouse kebawah hingga menemukan settingan cycle option jika menu effect tidak muncul, coba perhatikan kembali penempatan file jquery.cycle.js pada librarie. Pada pilihan effect ubah menjadi ScrollLeft, agar slide show artikel bergerak dari kanan ke kiri, namun anda dapat memilihnya sesuai dengan keinginan.

Pada awalnya pada bagian field hanya menampilkan content:title yang artinya hanya menampilkan judul pada artikel saja, namun kita akan menambahkan gambar dan sebagian deskripsi pada artikel. Klik add pada bagian field dan pilih content image dan content body. Setiap menambahkan field hilangkan label dari masing-masing field dengan menghilangkan centang create a label.

Setelah mengikuti panduan diatas, kita telah membuat slideshow artikel, tinggal bagaimana kita menempatkannya pada block tema drupal. Karena kita membuat slide show diatas dengan bentuk block, maka untuk mengaplikasikannya agar tampil di halaman web, kita harus menempatkan block slideshow tersebut dibagian region yang ada di drupal. Klik menu structure dan pililh block kemudian tempatkan pada bagian yang diinginkan, sebagai contoh saya menempatkannya pada bagian region content. Save dan kemudian lihat hasilnya pada halaman utama web drupal anda.

Lihat tutorial lengkapnya disini

July 4, 2021
Cara mengganti atau memasang favicon pada blog

Cara mengganti favicon di blog. Logo favicon standar pada blog yang kita buat dibloger adalah dengan menggunakan logo bloger, nah bagaimana caranya agar logo favicon tersebut kita ganti dengan logo blog kita sendiri agar kelihatan lebih keren hehe. Coba ikuti langkah-langkah yang akan saya jabarkan dibawah ini.

Sebelumnya buatlah terlebih dahulu logo favicon yang diinginkan dapat berupa format jpeg atau format png. Setelah membuat logo tersebut, kunjungi website layanan untuk menggenerate logo agar menjadi favicon contohnya pada web favicon generator

Pada contoh gambar diatas, klik pilih file kemudian pilih logo yang telah dibuat, disini saya membuat logo blog saya dengan format .png. klik create favicon untuk membuat icon favicon dengan secara otomatis icon favicon akan dibuat dengan ukuran 16×16 pixel.

Selanjutnya klik download the generator favicon untuk mendownload favicon yang telah dibuat.

Untuk menerapkanya di blog, ada dua cara, yaitu langsung pada menu layout yang ada di dasbor atau dengan memasang code html baru untuk favicon pada menu template edit html.

Cara pertama masuk pada dasbor bloger sobat, kemudian pilih menu layout kemudian klik edit pada favicon dan upload favicon yang telah di download tadi kemudian save. kemudian lakukan refresh pada blog dan lihat hasilnya.

Jika cara ini masih belum berhasil, selanjutnya gunakan cara kedua yaitu dengan menambahkan code html untuk membuat favicon. Masuk pada dasbor bloger anda, kemudian pilih menu template dan edit html. Cari code dibawah dengan menggunakan CTRL + F jika tidak ada, copy code dibawah dan tempatkan di bawah tag <head> ataupun di atas tag </head>

<link href=’URL-FAVICON’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/> </link>

Ganti code merah dengan alamat ulr favicon blog anda, save dan coba lakukan refresh pada blog.

Mungkin bagi pemula bingung dan bertanya dimana kita mendapatkan alamat url favicon blog, untuk mendapatkan alamat url favicon pada blog, kita harus mengupload favicon tersebut kesalah satu website penyedia upload foto, seperti photo bucketatau web-web lain yang sekarang sudah banyak di internet. Namun kita juga bisa upload favicon ke dalam blog pada saat kita membuat sebuah artikel. Nah pada saat di upluad kita tidak perlu menempatkannya pada artikel namun kita hanya mengambil alamat url favicon tersebut yang telah di upload, sebagai contoh lihat gambar dibawah :

Klik kanan pada favicon yang telah di upload dan pilih salin url gambar, nah kemudian paste url gambar tersebut kedalam code html yang berwarna merah seperti contoh diatas.

Semoga membantu J

July 4, 2021
Cara mudah modifikasi tema blog atau web dengan menggunakan firebug

Belajar modifikasi tema template blog. Kali ini saya akan share sebuah addson browser yang berfungsi untuk membantu kita dalam modifikasi tampilan blog. Kadang beberapa tema blog yang kita gunakan ada sedikit yang tidak sesuai dengan keinginan kita. Dan ketika merubahnya langsung dari dasbor bloger kita harus melakukan penyimpanan untuk melihat hasil modifikasi tersebut pada blog.

Dengan menggunakan add ons firebug yang ada pada browser, kita dapat langsung melihat hasil dari modifikasi tampilan blog tanpa harus menyimpannya terlebih dahulu. Keuntungan menggunakan add ons ini adalah kita tidak perlu takut akan tampilan blog yang salah di modifikasi karena pada saat menggunakan add ons ini code hasil modifikasi belum tersimpan dalam blog sebelum kita melakukan penyimpanan terlebih dahulu. Ketika menggunakan firebug setiap code css yang kita rubah, akan langsung dilihat hasilnya pada browser.

Baca Juga : Memasang Meta Tag Deskripsi dan Keyword di Blog

Menginstal firebug pada browser sama halnya dengan cara menginstal add ons wappalyzer yang pernah saya bahas, jadi saya akan bahas cara penggunaannya saja. Untuk menggunakan firebug cukup dengan klik icon firebug yang ada pada browser sampai muncul jendela firebug pada bagian bawah browser seperti contoh dibawah :

Ketika jendele firebug telah muncul klik icon inspect no 1 pada gambar diatas, lalu klik bagian template yang akan di modifikasi. Sebagai contoh saya akan merubah Judul blog saya yang sebelumnya berwarna putih menjadi warna merah. Ketika kita klik judul blog makan akan muncul file code css disebelah kanan yang menunjukan style dari judul blog (no 3).

Pada gambar diatas setelah kita klik judul blog, selanjutnya kita klik tag <a href…….. </a> (no 1) dan perhatikan disebelah kanan yang saya tandai dengan angka 2, terdapat code css yang menunjukan style dari h1 atau judul blog. Disitu dilihat bahwa color warna dari header h1 sudah saya ganti menjadi #ff0000 (warna merah) yang sebelumnya adalah #ffffff (warna putih).

Baca Juga : Membuat Artikel Terkait Atau Related Post di Blog

Dari contoh diatas penggunaan firebug sangatlah mudah, sehingga jika kita sudah yakin akan style yang kita terapkan tadi kita dapat langsung menggantinya di menu edit html pada blog. Sebaiknya kita juga harus paham sedikit tentang bahasa pemograman css dan html sehingga sangat mudah dalam mendesain sendiri tampilan blog kita.

Itulah cara mudah modifikasi blog dengan menggunakan firebug

July 4, 2021
Membuat animasi berputar dengan menggunakan adobe flash

Cara membuat animasi berputar menggunakan adobe flash cs6. Kali ini kita akan sama-sama belajar tentang bagaimana cara membuat animasi berputar pada adobe flash player. Animasi berputar adalah animasi dimana objek berputar pada titik poros yang telah ditentukan. Pada tutorial ini animasi yang saya buat sangatlah sederhana dan mungkin hanya sebagai panduan kita untuk belajar membuat animasi.

Untuk membuat animasi berputar pada adobe flash, ikuti langkah-langkah berikut :

– Buka lembar kerja baru pada adobe flash dengan pilihan action script 3

– Buat sebuah objek, sebagai contoh disini saya membuat tulisan freezon

– Klik kanan pada frame 1 dan pilih create motion twen maka secara otomatis frame akan terisi hingga frame 24

Klik kanan pada frame 25 dan pilih insert key -> rotation

Pada panel properties atur beberapa parameter rotation atur nilai ease anda bisa memasukkan angka 100 atau -100 untuk mengatur kecepatan objek lebih pelan diawal atau diakhir gerakan.

Pada pilihan rotation atur rotationnya 2 time(s) untuk menentukan jumlah putaran dan isi 20 derajat untuk kemiringan derajat putaran.

Setelah mengikuti semua langkah-langkah diatas, kita dapat melihat hasilnya dengan menjalankan animasi tersebut, tekan CTRL + Enter untuk menjalankan animasi.

Untuk mencari animasi berputar yang anda inginkan, anda bisa merubah nilai-nilai yang ada pada panel properties. Jika merasa kecepatan putaran terlalu cepat, maka coba ubah nilai pada fps lebih rendah dari nilai standar.

Klik pada lembar kerja kemudian ubah nilai fps di panel properties. Nilai standarnya adalah 24 ubah menjadi 10, tekan CTRL + Enter untuk melihat hasilnya.

untuk menyimpan hasil animasi dalam bentuk gif dan dapat berjalan di browser, klik file – publish settings pada pilihan other format pilih gif image dan pilihan playback ganti menjadi animated dan klik publish. save animasi dengan klik file – export – export movie dan simpan dalam bentuk format gif

selamat mencoba 🙂

July 4, 2021
Memasang Comment Facebook Pada Postingan Blogger

Cara membuat kotak komentar facebook di blogger – kali ini saya akan membahas bagaimana cara menambahkan komentar facebook pada postingan di blogger. Komentar facebook pada postingan ini sebenarnya agar mempermudah pengunjung memberikan komentar pada postingan blog kita. Karena rata-rata pengguna internet sudah memiliki account facebook.

Selain mempermudah pengunjung untuk memberikan komentar, kotak komentar juga ini dapat menambahkan traffic pada blog yang berasal dari facebook, dimana di ketahui pengguna facebook sudah sangat banyak.

Saya pernah mencari referensi di google tentang bagaimana cara menambahkan kotak komentar facebook pada tiap postingan blog, namun saya merasa kesulitan dalam penerapannya walaupun pada akhirnya selesai juga. Oke dari pada banyak basa basi mendingan kita langsung saja mulai langkah langkahnya J sebagai contoh lihat gambar dibawah, saya memasang kotak komentar facebook tepat diatas kotak komentar standar bloger

jika sobat ingin membuat komentar facebook yang berdampingan dengan komentar blog seperti yang ane gunakan di blog ini dapat lihat tutorialnya disini

Masuk ke akun bloger anda, kemudian klik blog yang akan dipasangkan kotak komentar facebook. Pilih menu template dan klik edit html. Karena disini saya memasang kotak komentar facebook tepat diatas kotak komentar bloger dan dibawah postingan, maka saya akan menempatkan code comment facebook tepat ditengah-tengah antara postingan blog dan komentar standar blog, caranya tekan CTRL + F kemudian ketikan <data:post.body/>. Kita akan menemukan beberapa tag <data:post.body/> namun di template saya, saya mencari tag <data:post.body/> yang paling bawah, nah pada awalnya disini saya selalu gagal dalam penempatan code comment facebook hingga akhirnya saya memilih tag <data:post.body/> yang berada paling bawah. Awalnya saya menempatkan codenya pas dibawah tag <data:post.body/> namun tampilan kotak komentar facebook berada diatas artikel terkait dan tombol share button (lihat no 1 pada gambar dibawah). Yang saya inginkan adalah komentar facebook tersebut tepat diatas komentar standar bloger, sehingga tampilannya lebih menarik (no 3 pada gambar)

Nah agar tampilan komentar facebook berada di no 3 contoh gambar diatas, saya menempatkan code comment facebook dibawah tag <data:post.body/> tapi lebih tepatnya diatas code komentar standar bloger, copy code comment facebook dibawah ini
<!–Comment FB–><b:if cond=’data:blog.pageType == “item”‘></p><br /> <div><fb:comments expr:href=’data:post.url’ expr:title=’data:post.title’ expr:xid=’data:post.id’ num_posts=’1′ width=’450’/></div><br /> <p></b:if><!–End of Comment FB–>
lihat contoh gambar dibawah ini

Pada gambar yang diatas angka 1 menunjukan no 4 pada gambar pertama yang diatas yaitu home dan older post, jadi saya menempatkan code commentar facebook tepat dibawah no 1 yaitu pada no 2. Sehingga kotak komentar facebook tepat berada antara navigasi home older post dan komentar standar bloger.

Contoh diatas merupakan contoh pada template blog saya , tetapi mudah-mudahan bisa menjadi referensi bagi sobat bloger untuk menambahkan komentar facebook pada postingan artikel. Pada saat saya mencoba cara diatas, sebenarnya saya sempat mengalami beberapa kegagalan, namun saya mencoba memindahkan code facebook comment diatas sehingga pas diatas komentar standar bloger.

Lihat tutorialnya di youtube

Selamat mencoba CMIIW

July 4, 2021
Membuat Kategori pada Drupal

Cara membuat kategori di cms drupal. Untuk tutorial kali ini saya akan membahas bagaimana cara membuat kategori di drupal. Istilah kategori pada cms drupal adalah taxonomy. Kategori ini sangat berguna untuk mengelompokan artikel-artikel yang kita buat, sehingga memudahkan pengunjung untuk mengakses artikel yang mempunyai kategori sama. Kategori default bawaan pada cms drupal adalah tags, yang sudah tersedia ketika kita akan membuat sebuah artikel baru.

Kategori tags ini dapat kita rubah namanya sesuai dengan keinginan kita, namun sebelumnya saya akan membahas tentang bagaimana cara membuat kategori atau taxonomy baru pada drupal.

Langkah – langkah membuat kategori atau taxonomy pada drupal. Contoh kita akan membuat kategori dengan nama olah raga dan bagian-bagiannya adalah bola, bulutangkis, basket dll. Pertama-tama masuk halaman administrator pada drupal. Klik structure dan pilih taxonomy. Kemudian klik add vocabulary untuk menambahkan kategori. Name isi dengan olahraga dan description isi dengan kategori berdasarkan olahraga kemudian klik save.

Sekarang kita akan menambahkan bagian bagian kategori olah raga dengan cara klik add terms, kemudian pada pilihan name masukkan kata ‘bola’ dan descriptionnya masukkan kalimat ‘kategori berdasarkan bola’. Untuk menambahkan kategori olahraga lain seperti bulutangkis dan basket sama prosesnya ketika kita akan menambahkan kategori bola.

Nah sampai pada tahap ini kita sudah dapat membuat kategori pada drupal. Sekarang kita coba untuk merubah nama kategori tags, sebagai contoh kategori tags akan saya rubah menjadi kategori ‘kota’. Masih dalam tampilan taxonomy. Klik edit vocabulary pada kategori tags dan rubah name-nya menjadi kota dan deskripsinya ‘kategori berdasarkan nama kota’.

semoga membantu 🙂 . CMIIW

July 4, 2021