Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Kamis, Desember 26, 2013

Mengatur Nada Dering Email di Leptop / PC Menggunakan Microsoft Office Outlook

(Gambar 1)
Hey, let me tell you something. Akhirnya, selepas berguru pada pak cik gugel, berhasillah kita menemukan cara memasang nada dering saat menerima e-mail masuk di leptop. Hmm, selama ini saya pikir nada dering (alert tone) saat menerima email seperti itu cuma settingan film-film korea / jepang biar terkesan lucu atau canggih. Tapi rupanya kita pun bisa menggunakannya. Nada itu memudahkan mereka yang memiliki akses online 24 jam, dan tidak ingin repot-repot merefresh email untuk sekedar melihat pesana baru...

Sabtu, Juli 06, 2013

Mengatur Jarak Kanan-Kiri pada Tab Navigasi


Fiuh, setelah pencarianku yang gagal pada om google. Lalu memutuskan untuk mencari sendiri pada kode html, dan mencoba 1001 try and error (ah, lebay), ketemu juga kode untuk mengatur jarak kanan-kiri pada tab navigasi. Postingan ini sebagai pengingat saya, biar besok-besok kalau gonta ganti template gak bingung lagi nyari letak kodenya. Yang sudah tahu, monggo dilewatkan saja.

Perlu diketahui, kode ini untuk template bawaan blogger.
Langsung saja, masuk ke edit HTML anda dan temukan kode yang mirip seperti berikut :

.tabs-inner .widget li a {

display: inline-block;
padding: .6em 1em;


Jumat, Juli 13, 2012

Gambar/Icon di Samping Tab Navigasi Saat Dilalui Kursor (Hover)

Tutorial kali ini untuk menjawab pertanyaan dari seorang sobat blogger yang memiliki nick "bocahsaico". Yaitu mengenai gambar/icon di samping tab navigasi.


Gambar/icon ini akan muncul ketika kursor melewati link tab navigasi. Sebagai contohnya, lihat tab saya di atas. Saya berguru tutorial ini pada Nurmayanti Zain, meskipun sebenarnya kode template saya berbeda dengan miliknya.

Perlu diketahui bahwa saya menggunakan template bawaan blogger. Jadi jika teman-teman menggunakan template selain blogger, maka kemungkinan kode di bawah ini tidak ada.

Baiklah langung saja ya saya share caranya.

Selasa, Juni 05, 2012

Membuat Daftar Link dengan Icon

Postingan ini untuk menjawab pertanyaan dari seorang kawan blogger mba Erika Hime mengenai cara membuat list social media atau daftar link lengkap dengan icon yang diletakkan di sidebar blog.

Caranya mudah kok, berikut langkah-langkahnya :
1. Masuk ke akun blog
2. Pilih Design >> Page Element
3. Klik Add Gadget
4. Pilih Add HTML/JavaScript, lalu masukkan kode dibawah ini.

------------------------------------------------------------------------------------

<div style="float: left">
   <div id="footer1">
     <div class="footer_box" id="text-10">
<h3 class="footer_title"></h3>
            <div class="textwidget"><ul class="xoxo blogroll">

<li><a href="https://twitter.com/anistahara" title=""  target="_blank"><img src="http://www.howjoyful.com/wp-content/themes/howjoyful-blog/img/twitter.png"  border="0" /> &nbsp;  &nbsp; Twitter</a></li>

<li><a href="https://www.facebook.com/anistahara/" title=""  target="_blank"><img src="http://www.howjoyful.com/wp-content/themes/howjoyful-blog/img/facebook.png"  border="0" /> &nbsp;  &nbsp; Facebook</a></li>

<li><a href="http://facelim.com/kakros/" title=""  target="_blank"><img src="http://mob1191.photobucket.com/albums/z476/ayari_165/facelim-1.png"  border="0" /> &nbsp;  &nbsp; Facelim</a></li>

<li><a href="http://mymfb.com/ayari/" title=""  target="_blank"><img src="http://mob1191.photobucket.com/albums/z476/ayari_165/mfb.png"  border="0" /> &nbsp;  &nbsp; My MFB </a></li></ul></div></div></div></div>

------------------------------------------------------------------------------------

Keterangan :
Ganti tulisan yang berwarna biru dengan URL akun social media anda.
Ganti tulisan yang berwarna hijau dengan URL icon yang ingin digunakan.
Ganti tulisan yang berwarna merah dengan judul yang akan tampil di daftar.
Anda bisa menambah link lebih banyak lagi sesuai keinginan.

Semoga ini bisa membantu. Selamat mencoba :)

Sabtu, Mei 26, 2012

Menambahkan 2 (Dua) Kolom di atas Header (Untuk Blogger)

Tutor ini saya share di sini sebagai arsip untuk saya pribadi biar ga lupa kedepannya, dan untuk berbagi kepada pembaca yang membutuhkan.


Langsung saja ya, berikut langkahnya :
1. Login ke akun blog anda
2. Pilih Design >> Edit HTML
3. Centang Expand Template Widget

Untuk menambah 2 kolom di atas header, copy kode yang ada di dalam kotak, lalu letakkan di atas kode <header>

Untuk menambah 2 kolom di bawah header, copy kode yang ada di dalam kotak, lalu letakkan di atas kode </header> 

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Rabu, Mei 16, 2012

Mengatur Separator Line (Garis Pemisah) & Jarak Posting dari Sidebar

Perlu diketahui sebelumnya bahwa kode di bawah ini terdapat pada kode template bawaan blogger, jadi jika blog sobat pembaca menggunakan template selain dari blogger, kemungkinan kode di bawah ini tidak ada.



1. Membuat separator line (garis pemisah) antara sidebar dengan postingan :

Untuk garis pemisah sebelah kiri, temukan kode berikut pada Edit HTML :

 .fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 3px dotted #C2D6D6;


Untuk garis pemisah sebelah kanan, temukan kode berikut pada Edit HTML :


.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 3px dotted #C2D6D6;

Keterangan : 
3px            : tebalnya garis pemisah
dotted        : jenis pemisah bentuk bundaran ("solid" untuk garis lurus, "dashed" untuk garis putus-putus)
#C2D6D6 : warna garis pemisah

Mengatur letak separator line (garis pemisah) antara sidebar dengan postingan :

Untuk garis pemisah di sebelah kiri, temukan kode berikut pada Edit HTML :

 .main-inner .fauxcolumn-left-outer {
        width: 270px;


Untuk garis pemisah di sebelah kanan, temukan kode berikut pada Edit HTML :


.main-inner .fauxcolumn-right-outer {
        width: 270px;
Keterangan : 
270px : untuk mengatur letak garis pemisah

Mengatur jarak posting dari sidebar :

Temukan kode berikut pada Edit HTML :
 .post {
  margin: 0 0 $(post.margin.bottom) 0;
  padding-left: 40px;

Keterangan :
40px : untuk mengatur jarak posting
padding-left : hanya mengatur jarak sisi kiri
padding-right : hanya mengatur jarak sisi kanan
padding : mengatur jarak sisi kanan juga kiri 

Rabu, Mei 09, 2012

Membuka Blogger tampilan mobile via PC

Beberapa alasan yang membuat saya memilih untuk membuka blog tampilan mobile via PC (komputer/laptop) karena :

1. Jaringan yang very slow motion.
2. Blog yang ingin dibuka terlalu berat.
3. Saat blog sudah setengah loading, dan tampilan blog sudah muncul, tiba-tiba tampilan menjadi putih dan loadingnya ga berhenti-berhenti (sy ga tahu ini istilahnya apa, dan apa sebabnya).
4. Kotak komentar yang kadang muncul kadang hilang.

Jadi, buat kamu yang ingin tenang membalas komentar, dan blogwalking ke blog sahabat-sahabat kamu tanpa cemas loading yang terlalu lama, tampilan mobile bisa menjadi salah satu alternatif nya.

Kamu tinggal menambahkan ?m=1 dibelakang alamat situs blogger yang ingin kamu kunjungi.
Contoh : http://imajinasi-hari.blogspot.com/?m=1

Mudahkan ? Nah, selamat mencoba dan happy blogging :)

Di bawah ini adalah tampilan mobile blog saya yang saya buka melalui laptop :

Jumat, April 20, 2012

Cara Membuat Color Splash di GIMP

[Sumber gambar]

Color splash yaitu memberikan percikan warna di tempat tertentu pada foto / gambar. Misalnya kamu ingin mewarnai bagian bagian tertentu sedang dibagian lainnya hanya berwarna hitam-putih seperti pada gambar di samping kiri ini. Nah, berikut langkah-langkah yang bisa kamu gunakan :

1. Buka aplikasi GIMP (jika belum punya silahkan download di situs resminya disini)

2. Masukkan gambar yang ingin diedit. Bisa dengan cara File - Open - pergi ke folder tempat kamu menyimpan gambar

3. Gambar di bawah ini akan saya gunakan sebagai contohnya.


4. Setelah gambar anda terbuka di GIMP seperti yang ada pada gambar nomor 3 di atas, selanjutnya buatlah layer baru dengan cara klik Layer - New Layer - pilih White, lalu klik OK.

5. Kamu juga perlu membuka jendela / kotak dialog layer (lihat gambar no.3, kotak sebelah kanan) dengan menekan ctrl+L. 



6. Nah, dibawah ini adalah layer baru kamu setelah tadi ditambahkan layer yang berlatar belakang "White". Setelah itu, ganti Mode "Normal" menjadi "Color".


7. Tampilannya akan berubah menjadi hitam putih seperti gambar dibawah ini.


8. Well, tibalah saat yang paling mengasyikkan. Saatnya mewarnai ^^ ! Silahkan pilih bagian yang kamu sukai untuk diberi warna dengan cara klik icon Eraser Tool.


9. Pilihlah model yang bertanda merah, atau model manapun yang kamu sukai.


10. Nah, arahkan eraser tool mu dan mulailah mewarnai (lebih tepatnya sih menghapus warna hitam putihnya agar kembali ke warna dasar). Gambarnya saya perbesar agar lebih nyaman dan tidak lewat garis saat mewarnai.


9. Ta ~ da !!! Beginilah jadinya :)


Bagaimana ? Mudah bukan ^^
Nah, silahkan dikreasikan sesuai dengan kreatifitas masing-masing ya :)
Selamat mencoba.

Referensi lihat disini.
Photobucket

Selasa, Maret 20, 2012

Cara pasang semut muter-muter / jalan-jalan di blog

Liad semut yang sibuk muter-muter di samping blog ini kan 
Nah, kalo kamu juga pengen pasang di blog kamu, ini saya bagi caranya :

1. Log in ke akun blog kamu
2. Klik Design >> Page Elements >> Add a Gadget
3. Pilih HTML/Javascript
4. Masukkan kode di bawah ini :  

<div style="display:scroll; position:fixed; top:180px; left:30px;"><img border="0" src="http://i1217.photobucket.com/albums/dd381/funywrld/semutfuny.gif" /> </div>

Baca Keterangan !
  • Warna biru : jarak semut dari atas blog (jaraknya bisa diganti)
  • Warna pink : jarak semut dari kiri blog (jaraknya bisa diganti)
  • Warna merah : url semut (bisa diganti dengan gambar lain yang kalian suka)
  • Kalo pengen semutnya di kanan blog, tinggal ganti left jadi right.
  • Kalo semutnya pengen di bagian bawah blog, ganti top jadi bottom.

Oke, itu dia caranya, sudah jelas belum ?
Kalo belum paham, tinggalin komentar yaa :)


Sumber lihat disini
Photobucket

Kamis, Maret 08, 2012

Membuat Daftar Teman Menggunakan Menu Scroll


Pengen pasang daftar teman-teman kamu di blog, tapi kebanyakan dan kepanjangan ? Nah, menu scroll sangat membantu dalam hal ini.



Langsung saja, berikut caranya nya :

1. Log in ke akun blog anda
2. Klik Design >> Page Elements >> Add a Gadget
3. Pilih HTML/Javascript
4. Masukkan kode di bawah ini :

<div style="overflow:auto;width:150px;height:200px;padding:10px;border:1px solid #eee">
<a href="url blog teman1"> nama teman1 <br />
<a href="url blog teman2"> nama teman2 <br />
<a href="url blog teman3"> nama teman3 <br />
</div>
Kalian bisa menambahkan daftar teman sebanyak yang diinginkan.
Juga bisa mengatur, width, height, padding, dan border nya sesuka hati.

***

Referensi bisa dilihat disini
Photobucket

Sabtu, Januari 28, 2012

Cara Cepat Menghilangkan Background Gambar Menjadi Transparan Dengan GIMP

Gambar 1
GIMP adalah salah satu aplikasi linux untuk mengedit gambar. Beberapa waktu yang lalu saya sibuk mencari header yang sesuai untuk blog ini. Setelah berpetualang dan tersesat di beberapa situs penyedia template blog, saya menemukan header yang manis. Saya kemudian mengambil header dari contoh template itu, dan mengeditnya sesuai kebutuhan.

Berikut gambar header yang saya dapat :


Nah, saya ingin menghilangkan backgroundnya yang berwarna biru-putih itu. Tapi saya terkendala karna saya pengguna Linux yang otomatis tidak memiliki software Adobe Photoshop. Saya segera menanyakan solusinya pada om gugel. Dan akhirnya saya ketemu jawabannya ! Berikut langkah-langkahnya :

Sabtu, Juli 02, 2011

Mengganti Suara Login di Ubuntu 10.04


Setelah mengganti background dengan suasana baru, saya tertarik lagi untuk mengganti backsound nya. Tahapannya saya dapatkan di blog ini. Agar kedepannya saya tidak lupa, maka tahapannya saya posting di blog saya. Berikut tahapannya :

1. File yang digunakan adalah yang berformat .wav atau .ogg dan tentunya dengan suara yang singkat/pendek saja. Jika anda ingin menggunakan potongan suara dari lagu kesukaan anda, anda bisa menggunakan pemotong audio "audacity".

Mengganti Background Login Screen di Ubuntu 10.04


Karena bosan dengan latar login screen yang itu-itu saja dari dulu. Saya berniat untuk menggantinya. Setelah cari-cari di beberapa site akhirnya ketemu juga caranya. 

Sabtu, Juni 25, 2011

Update Flash Player di Firefox pada Ubuntu 10.04


Setelah sebelumnya saya mengupgrade versi terbaru dari Firefox, ada pemberitahuan dari Mozilla bahwa flash player saya sudah tidak available dengan Firefox yang baru saya update. Maka kembali saya bertanya pada Mr. Google dan akhirnya menemukan caranya disini :

Update Firefox di Ubuntu 10.4

Firefox adalah browser web gratis yang dibuat oleh Mozilla. Pada Ubuntu 10.04 kita dapat menginstallnya langsng dari Ubuntu Software Center. Hanya terkadang, yang tersedia bukanlah versi terbaru dari Firefox. Untuk mendapatkan versi terbarunya, kita harus menambahkan beberapa repositori software dari Tim Mozilla. Setelah berguru pada Mr. Google, maka saya menemukan cara yang pas disini. Nah berikut instruksinya :

Kamis, Maret 03, 2011

Input tulisan Jepang di Ubuntu 10.04


Untuk teman-teman yang sedang belajar bahasa Jepang ataupun yang pekerjaannya berhubungan dengan bahasa jepang, anda tak perlu khawatir karena di ubuntu pun dapat menulis menggunakan font/tulisan/huruf jepang. Cara pengaturannya adalah sebagai berikut :

Tidak ada suara yang terdengar pada Sound Recorder di Ubuntu 10.04


Beberapa hari yang lalu saya ke tempat service komputer, minta untuk di install kan ubuntu 10.04. Nah, setelah mengecek "Sound Recorder" yang merupakan aplikasi perekam suara, ternyata tidak ada suara yang keluar.

Nah, mungkin ada teman-teman yang mengalami masalah ini, silahkan cek input volume komputer anda. Mungkin volumenya terlalu kecil, atau ter-Mute.

Caranya :
  1. Buka System > Preferences > Sound
  2. Pilih tab "Input"
  3. Naikkan suara volume pada "Input Volume"
  4. Jika ada tanda centang pada kotak "Mute", hilangkan tanda itu
  5. Pilih "Close"
Semoga berhasil : )

Sumber gambar :
http://uncrate.com/p/2010/03/ceramic-speakers.jpg