Obiy Shinichi Art

Membuat Ubuntu 24.04 LTS menjadi lebih Fresh dan tidak membosankan

2025-06-12T23:58:00.000-07:00

Membuat Ubuntu 24.04 LTS menjadi lebih Fresh dan tidak membosankan | Assalaamu'alaikum. Postingan ini adalah backupan Osa sendiri karena seringnya reinstall Ubuntu dengan alasan bosan dengan tampilan dan gak tau mau ngapain lagi dengan OS ini. Seperti yang kita ketahui kalau Ubuntu atau OS berbasis Linux adalah OS Open source yang jauh sangat berbeda dengan OS Windows yang bisa di install banyak aplikasi dan game yang gak membosankan.

Di Ubuntu kita benar-benar terbatas untuk itu. Tapi karena dengan kebebasan untuk merombak tampilannya, Ubuntu menjadi alasan utama Osa untuk digunakan jadi OS harian.

Tampilannya fleksibel untuk di gonta-ganti dengan tema yang kita inginkan. Dalam hal ini karena Osa masih penasaran untuk menjadikan Ubuntu seperti MacOS, akhirnya Osa temukan tema yang pas untuk itu. Ikuti cara Osa dibawah ini.

1. Download bahan (.zip) yang dibutuhkan

Download file ini dan ekstrak di directory $HOME/Downloads. Agar tidak membingungkan nanti saat proses instalasi.

Ubuntu-themes-by-Osa

2. Update system dan upgrade

Masuk ke Terimal CTRL + ALT + T dan masukkan script dibawah

sudo apt update && sudo apt dist-upgrade -y

Tunggu sampai proses update dan upgradenya selesai dan lanjut ke langkah berikutnya.

3. Install Apps and dependencies

Masih di Terminal yang tadi. Karena proses ini memerlukan Terminal jadi tidak perlu buka tutup lagi. Biarkan tetap terbuka. Copy paste script dibawah

sudo apt install curl \
	resync \
	git \
	gdebi \
	nautilus-admin
	nautilus-extension-gnome-terminal \
	sassc \
	gnome-tweaks \
	gnome-shell-extension-manager -y

4. Install GNOME Extensions

Osa asumsikan semua file yang sudah di download sudah kita letakkan di directory /Downloads

unzip -o $HOME/Downloads/gnome-extensions.zip -d $HOME/.local/share/gnome-shell/

5. Install GTK Theme

Buat directory .themes di directory Home

mkdir -p $HOME/.themes

Ekstrak GTK-themes.zip ke dalam folder $HOME/.themes

unzip -o $HOME/Downloads/GTK-Themes.zip -d $HOME/.themes

Dark Theme

ln -sf $HOME/.themes/Orchis-Dark/gtk-4.0/{assets,gtk.css,gtk-dark.css} $HOME/.config/gtk-4.0/

Light Theme

ln -sf $HOME/.themes/Orchis-Dark/gtk-4.0/{assets,gtk.css,gtk-dark.css} $HOME/.config/gtk-4.0/

6. Install GTK Theme

Buat directory icons ke dalam $HOME/.local/share

mkdir -p $HOME/.local/share/icons

Ekstrak tema icon ke dalam $HOME/.local/share/icons

unzip -o $HOME/Downloads/icon-themes.zip -d $HOME/.local/share/icons

7. Install Cursor Theme

Buat directory icons ke dalam $Home

mkdir -p $HOME/.icons

unzip -o $HOME/Downloads/cursors-theme.zip -d $HOME/.icons

8. Install Font

unzip -o $HOME/Downloads/fonts.zip -d $HOME/.local/share/

9. Install Conky Widget

sudo apt install conky-all jq curl playerctl -y

cd ~/Downloads

unzip -o ~/Downloads/conky-config.zip -d $HOME/.config

10. Install Cava

sudo apt install cava -y

unzip -o $HOME/Downloads/cava-config.zip -d $HOME/.config/

sudo apt install neofetch -y

unzip -o $HOME/Downloads/neofetch-config.zip -d $HOME/.config

11. Install Fish dan Oh My Posh

sudo apt install fish -y

chsh -s /usr/bin/fish

sudo wget https://github.com/JanDeDobbeleer/oh-my-posh/releases/latest/download/posh-linux-amd64 -O /usr/local/bin/oh-my-posh

sudo chmod +x /usr/local/bin/oh-my-posh

unzip -o $HOME/Download/fishomp-config.zip -d $HOME

chmod u+rw ~/.poshthemes/*.jsonE

12. Install Flatpak, AppImages and Add Flathub

sudo apt install gnome-software gnome-software-plugin-flatpak flatpak libfuse2 -y

Tambahkan repository Flathub

flatpak remote-add --if-not-exists flathub \
https://flathub.org/repo/flathub.flatpakrepo

13. Install Flatpak Apps

flatpak install flathub io.bassi.Amberol -y

flatpak install flathub net.agalwood.Motrix -y

flatpak install flathub com.rafaelmardojai.Blanket -y

flatpak install flathub com.github.KRTirtho.Spotube-y

flatpak install flathub com.mattjakeman.ExtensionManager -y

14. Membuat Orchis Theme agar support dengan Flatpak

sudo flatpak override --filesystem=$HOME/.home

sudo flatpak override --filesystem=$HOME/.local/share/icons

sudo flatpak override --filesystem=xdg-config/gtk-4.0

15. Install GNOME Apps

sudo apt install gnome-weather \
	gnome-maps \
	gnome-audio \
	gnome-calendar \
	gnome-clocks \
	gnome-connections \
	gnome-console \
	gnome-contacts \
	gnome-music \
	vlc \
	gnome-shell-pomodoro -y

16. Install and change Plymouth Theme

sudo apt install plymouth -y

sudo unzip -o $HOME/Downloads/plymouth-theme.zip -d /usr/share/plymouth/themes

sudo update-alternatives --install \
	/usr/share/plymouth/themes/default.plymouth default.plymouth \
	/usr/share/plymouth/themes/hexagon_dots/hexagon_dots.plymouth 100

sudo update-alternatives --config default.plymouth

Jika saat proses muncul 2 opsi, pilih 2 untuk mempertahankan config yang kita inginkan

17. Apply GNOME configuration

unzip $HOME/Downloads/ubuntu-desktop-settings.zip -d $HOME/Downloads/

dconf load / < $HOME/Downloads/ubuntu-desktop-settings.conf

18. Remove Snap Apps and services

cp -afv $HOME/snap $HOME/Downloads/

snap llist

sudo snap remove --purge firefox

sudo snap remove --purge snap-store

sudo snap remove --purge gnome-42-2204

sudo snap remove --purge gtk-common-themes

sudo snap remove --purge snapd-desktop-integration

sudo snap remove --purge firmware-updater

sudo snap remove --purge core22

sudo snap remove --purge bare

sudo snap remove --purge snapd

sudo apt autoremove --remove snapd -y

sudo rm -rf /var/cache/snapd/

echo *Package: snapd
	Pin: release a=*
	Pin-priority: -10* | sudo tee /etc/apt/preferences.d/nosnap.pref

sudo apt update

Masukkan perintah diatas satu persatu dan tekan Enter, jangan langsung semuanya

19. Install Firefox

sudo add-apt-repository -y ppa:mozillateam/ppa && sudo apt update

echo 'APT::Key::Assert-Pubkey-Algo "";' | sudo tee /etc/apt/apt.conf.d/99weakkey-warning

sudo apt update

sudo apt install -y -t 'o=LP-PPA-mozillateam' firefox

echo *Unattended-Upgrade::Allowed-Origins:: \"LP-PPA-mozillateam:$distro_codename\";" | sudo tee /etc/apt/apt.conf.d/51unattended-upgrades-firefox

echo 'Pakcage: firefox*
	Pin: release o=LP-PPA-mozillateam
	Pin-priority: 501' | sudo tee /etc/apt/preferences.d/mozillateamppa

sudo apt update

20. Install Theme Firefox

cd $HOME/Downloads

git clone https://github.com/vinceliuice/WhiteSur-firefox-theme.git

cd WhiteSur-firefox-theme

./install.sh -m

Kalau sudah semuanya kita logout atau restart agar tema yang sudah di install bisa kita terapkan semuanya.

Mengatasi Invalid SVG File pada Inkscape

2020-05-08T07:40:00.001-07:00

Mengatasi Invalid SVG File pada Inkscape | Assalaamu'alaikum sobat Osa. Tanpa kendala kita tidak mendapat pelajaran apapun. Dan inilah alasan kenapa sekarang Osa membuat tulisan lagi. Antara terurus dan tidak terurus blog ini, ketika ada Ilmu atau pesan yang akan Osa sampaikan pasti Osa akan update saat itu juga.

Dan baru-baru ini Osa mendapat sedikit kendala dengan proses save file di Inkscape. Sebelumnya Osa sudah pernah mengalaminya, namun karena tidak terlalu file tersebut jadi Osa abaikan begitu saja. Berbeda dengan saat ini, filenya beneran penting karena untuk tribute Pakde Didi Kempot.

Invalid SVG File adalah masalah yang "mungkin" terjadi karena proses penyimpanan file yang tidak sempurna a.k.a corrupted sehingga file tidak terbaca sepenuhnya. Ini Osa alami kemarin ketika terburu-buru untuk melakukan shutting down. Sesaat ketika proses saving sedang berjalan, Osa nekat shutdown paksa PC Osa (gak nekat juga sih, itu karena menurut Osa sudah tersimpan, karena gak ngeliat progressnya sudah done atau nggak).

Dan alhasil keesokannya terjadi hal yang sangat tidak Osa inginkan, file tersebut berubah menjadi seperti ini

Panik dong karena file yang sebelumnya berupa gambar tetiba saja berubah menjadi seperti itu, dah polos gitu ditambah ada tulisan merah gajelas.

Saking penasarannya dan gak ingin cepet nyerah, Osa obrak-abrik mbah google kesayangan para ummat. Dan hasilnya nihil, karena memang untuk pembahasan aplikasi Inkscape sendiri terlalu dan sangat jarang sekali ada di pencarian. Apalagi untuk masalah yang seperti ini, saat dicaripun yang tampil malah aplikasi milik tetangga sebelah, Adobe Illustrator. Itupun tidak membantu sama sekali.

Akhirnya Osa sendiri nekat dengan ide dan keinginan macam Naruto yang tidak ingin cepat menyerah. Karena SVG file adalah sebuah gambar yang disimpan dalam bentuk file XML.

Scalable Vector Graphics (SVG) adalah format gambar yang menggunakan XML sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG adalah format gambar yang dikembangkan oleh Word Wide Web Consortium sejak tahun 1999. [wikipedia]

Osa pun membuka file tersebut di aplikasi Notepad ++. Download aplikasinya disini Aplikasi notepad dengan multi-kelebihan dibanding notepad bawaan windows. Dari sini Osa menemukan sebuah script yang tidak bisa terbaca seperti ini

Hal pertama yang Osa tangkap adalah ini adalah link foto yang Osa copas langsung dari Google Chrome ke Inkscape. Karena disana ada script "image dan xlink:href". Berbekal sedikit ilmu yang dulunya juga pernah belajar XML Html dan temen-temennya, Osa coba hapus script tidak jelas ini karena memang hanya untuk menampilkan gambar saja, bukan xml vector yang sudah Osa buat.

Benar saja, awalnya yang hanya muncul lembaran kosong di media kerja Inkscape dari file tersebut, sekarang Osa sudah bisa melihat kembali hasil kerja Osa sebelumnya saat pembuatan tribute Pakde Didi Kempot.

Buat temen-temen yang punya kendala sama seperti Osa, bisa coba cara ini juga. Caranya adalah open file SVG sobat dengan klik kanan dan Pilih Edit with Notepad++ (Osa asumsikan sobat sudah menginstall aplikasi Notepad++)

<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:none"
sodipodi:insensitive="true">
<image
width="442.9881"
height="332.24106"
preserveAspectRatio="none"
xlink:href="data:image/png;base64,       
....
preserveAspectRatio="none"
height="271.01968"
width="203.34418" />
</g>

Sobat temukan code semacam ini, biasanya ada dibaris ke 120an kalau memang sama sih. Dan sobat klik di kode <g sehingga dia akan berhighlight ungu yang artinya saling terhubung dengan penutupnya. Dalam html tanda < adalah sebuah pembuka dan </ penutupnya. Dari awal <g sampai </g> yang sama-sama berhighlight ungu sobat delete semuanya, sampai benar-benar tidak ada lagi script "jorok" seperti gambar diatas.

Setelah itu, untuk berjaga-jaga sobat save as saja filenya dengan nama yang berbeda. Dan coba buka kembali file yang sudah di save as. Apakah sobat bisa melihat vector yang sudah dibuat sebelumnya?

Osa sih berhasil, kalau gak berhasil tinggalkan komentar dibawah ya. Wassalaam

[Tutorial] Cara Jailbreak iOS 12.4 dengan aplikasi 3uTools

2020-01-21T01:47:00.000-08:00

Cara Jailbreak iOS 12.4 dengan aplikasi 3uTools | Assalaamu'alaikum sobat Osa. Setelah kemarin Osa sudah update tentang Jailbreak iPhone dengan 3uTools, sekarang Osa ingin berbagi bagaimana caranya secara rinci dengan gambar. Tapi sebelum itu, kalau sobat tidak mempunyai computer/pc dan ingin yang lebih praktis, silahkan sobat coba buka beberapa situs jailbreak dengan method online dibawah ini.

Appvalley.vip

Tweakboxapp.com

Ignition.fun

Tapi sepertinya untuk yang ignition.fun sudah tidak akan bisa kita gunakan lagi. Alasannya? “Revoke”. Yups revoke adalah alasan utamanya. Bagaimana dengan yang pertama dan kedua? Terkadang akan tersedia, terkadang akan menghilang entah kemana.

Syarat pertama yang harus ada adalah PC/komputer/laptop sobat. Bisa pinjam atau ke warnet lah. Karena 3utools adalah aplikasi basis windows. Kita lanjut ke caranya :

1. Download aplikasi 3utools disini

2. Instal dan buka aplikasi 3utoolsnya

3. Nanti sobat akan melihat window seperti dibawah. Disitu terlihat seri iDevice sobat, IMEI dan lain-lainnya

4. Klik Menu Flash & JB dan pilih Jailbreak

5. Di sebelah kanan, sobat akan menemukan deretan iOS yang bisa sobat Jailbreak. Mulai dari iOS 4 sampai iOS 12.4. Tapi bagaimana kalau iOS yang sobat pakai sudah yang paling baru? Nah ini Osa belum pernah nyobain sama sekali. Di samping karena ada beberapa bug (katanya), jadi Osa pun enggan untuk update iOS ke yang terbaru.

6. Klik iOS yang sobat gunakan saat ini, dalam hal ini punya Osa masih 12.4. Jadi klik yang ios 11.4 ~ 12.4.1 Jailbreak.

7. Klik Run Jailbreak. Silahkan sobat tunggu sampai proses jailbreak selesai. Usahakan iDevice sobat dalam keadaan menyala terus ya.

8. Jika sudah completed, sobat liat di iDevicenya. Sobat akan menemukan aplikasi unc0ver yang sudah terpasang.

9. Selamat ber-jailbreak ria

Jailbreak iPhone iOS 12.4 dengan 3utools

2019-12-28T17:50:00.000-08:00

Assalaamu'alaikum sobat Osa. Sudah selang 1 tahunan Osa menggunakan iPhone 6s, dan mendapatkan impresi luar biasa selama digunakan. Mulai dari kecepatan akses aplikasinya, stabilitas OS dan lain sebagainya.

Dan yang lebih terpenting kenapa Osa memutuskan untuk menggunakan platform ini adalah karena JAILBREAK yang sangat terkenal. Jailbreak sendiri kalau pada Android adalah proses ROOTING untuk mendapat akses masuk penuh ke dalam sistem iOS.

Kenapa Jailbreak iOS 12.4 menggunakan 3utools?

Yups disini adalah permasalahan Osa selama beberapa hari lalu, tepatnya 2 ahad. Setelah 1 setengah bulanan Osa menggunakan iOS dengan jailbreak system, Osa tanpa sengaja me-restart iPhone dan baru ingat kalau jailbreak yang Osa gunakan adalah semi-Untethered. Jadi setiap kali restart maka jailbreak akan menghilang (sementara), karena ketika Osa membuka aplikasi m-banking tidak bisa terbuka dengan pesan popup kalau iPhone Osa dalam keadaan ter-Jailbreak.

Dan setelah itu, Osa tidak bisa lagi membuka lagi aplikasi "Chimera". Kenapa tidak unc0ver? Ada beberapa hal yang Osa tidak suka dari unc0ver, mulai dari tampilannya yang terlalu jadul dan ada beberapa aplikasi yang terkesan memperlambat kinerja idevice. Jadi Osa beralih saja ke Chimera. Dari tidak bisa membuka Chimera, Osa coba mencari situs jailbreak lainnya, Tweakbox, ignition dan teman-temannya. Hasilnya nihil.

Bingung nyari sana-sini, Osa putuskan mencoba kembali Cydia Impactor. Awal belajar jailbreak menggunakan tools ini sih masih bisa dan lancar tanpa kendala apa pun. Namun kali ini berbeda, katanya Apple sudah merubah Reprovision sehingga untuk melakukan jailbreak diperlukan akun Apple premium.

Osa baru ingat kalau ada sebuah aplikasi windows dengan tools yang lumayan lengkap, mulai dari Backup dan restore, Flashing bahkan sampai jailbreak juga. Akhirnya Osa putuskan untuk mencobanya dan ternyata berhasil sobat. Aplikasi itu adalah 3utools. Dari aplikasi ini juga kita bisa tahu kesehatan batre idevice kita, cycle count, IMEI muncul di aplikasi ini.

Dengan jailbreak 3utools kita akan mendapat aplikasi unc0ver (bukan Chimera). Lancar jaya dong, tinggal klik dan nunggu sebentar saja Osa sudah dapat aplikasi jailbreaknya. Jadi buat sobat Osa yang juga kebingungan untuk proses jailbreak iPhone bisa kalian coba juga 3utools.

Untuk tutorial lengkapnya akan Osa update di lain waktu, Terima kasih.

UPDATE : Jailbreak sudah bisa dilakukan tanpa PC, yaitu dengan mengunjungi situs appvalley.vip

Installed Font tidak Muncul di Inkscape 0.92.3

2019-03-02T06:06:00.000-08:00

Assalaamu'alaikum warahmatulloohi wabarokaatuh, sobat Osa. Sudah hampir 1 tahun Osa tidak membuat postingan apa-apa. Alasan utamanya karena Osa pindah tempat kerja dan ternyata lebih banyak memakan waktu sehari-hari. Alhasil terbengkalailah blog kesayangan ini. Bahkan untuk postingan Youtube yang harusnya sudah bisa Osa upload malah gak jadi juga. Subhaanallah.

Installed Font tidak muncul di Inkscape 0.92.3. Sebenarnya Osa terlalu bingung juga untuk membuat judul yang pas sehingga menjadi Buming. Yang tergambar di khayalan cuma itu aja sih. Font yang terinstal tidak tampil di aplikasi Inkscape.

Rincian Permasalahan Awal :

Masalah ini terjadi di aplikasi Inkscape dengan versi 0.92.3. Karena sebelumnya di 0.92.0 Osa belum pernah mengalami masalah ini.
Operating System yang Osa gunakan adalah Windows 10 build 17763

Menurut Forum Diskusi yang Osa baca (tulisane ala-ala bule dan ini hasil konklusi menurut sepengetahuan Osa saja), disana dikatakan kalau Inkscape 0.92.3 tidak bisa membaca keberadaan font yang terinstal pada Windows 10 yang terbaru. Jadi yang tampil hanya font bawaan windows itu sendiri. Sedangkan font yang kita pasang secara manual tidak muncul.

Lalu apa sih solusinya mengatasi masalah ini?

Mudah banget sobat. Silahkan ikuti petunjuk Osa dan beri tahu Osa di kolom komentar kalau sobat sudah sukses dengan cara ini.

Kenapa Inkscape 0.92.3 tidak bisa membaca keberadaan font yang kita instal di Windows 10 terbaru? Katanya karena fontnya pindah tempat kesini C:\Users\[username]\AppData\Local\Microsoft\Windows\Fonts dari yang sebelumnya langsung ada di C:\Windows\Fonts.

Tapi di C:\Windows\Fonts sudah ada semua loh fontnya, gimana tuh?

Osa sih kurang paham juga bagaimana masalahnya secara mendetail. Setelah mencoba cara ini Osa pastikan berhasil 100% loh sobat.

Download Inkscape 0.92.4 Terbaru

Download disini

Pertama sobat silahkan copy-paste C:\Users\[username]\AppData\Local\Microsoft\Windows\Fonts di Address bar File Explorer. Ganti username sesuai dengan username PC sobat. Nah disini sobat akan menemukan beberapa font yang sudah sobat instal.

Kedua sobat pilih semua font tersebut. Klik kanan dan Pilih Instal for All User sehingga font kesayangan sobat akan muncul di Inkscape dengan versi 0.92.3. Tunggu sampai prosesnya selesai. Tutup dan Buka kembali aplikasi Inkscape.

Kalau sudah ada yang berhasil, bisikin ke Osa melalui kolom komentar ya.

Wassalaam.

Premium Safelink Template Blogger dari Antoncabon.us

2018-03-04T17:48:00.000-08:00

Safelink converter berfungsi untuk mengkonversi atau membuat encrypted link untuk semua link dari sebuah blog agar link-link tersebut menjadi aman dengan dikonversi menjadi base64.

Itu Osa kutip dari kang Adhy Suryadi admin blog kompiajaib.com. Bahasa lainnya adalah menyembunyikan link asli dengan mengubahnya menjadi base64. Osa tertarik membuat blog safelink karena melihat tampilannya yang menarik dan terlihat seperti blog profesional yang mana ketika harus mendownload masih harus redirect ke halaman safelink.

Safelink banyak digunakan oleh blog download, baik aplikasi, movie dan yang lainnya. Ini dikarenakan potensi klik iklan yang cukup besar pada halaman safelink. Dan lagi karena hampir 100% blog download tidak bisa di approve oleh Google Adsense.

Dan kali ini Osa akan sedikit mengulas tentang Premium Safelink Template Blogger dari Antoncabon.us. Mas Anton membuat sebuah template yang sangat keren. Template safelink ini dibuat menggunakan bootstrap 4.

Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah dalam membangun tampilan web.

Karena template tersebut adalah template premium yang dibagikan secara gratis, maka ketika sobat mencoba menggunakannya dan mengedit beberapa bagian, jangan kaget kalau menjumpai beberapa script yang tidak bisa terbaca dan berupa angka-angka Hex. Hal itu memang sangat lumrah sekali kita temui pada template Free namun Premium.

Jika sobat berminat meminang versi premium dengan tanpa script yang aneh menurut Osa, Mas Anton bilang silahkan ajak beliau ngopi disini dulu. Hehehe. Osa ucapkan banyak terima kasih kepada mas Anton untuk templatenya dan izinnya yang sudah mengizinkan untuk merombak beberapa bagiannya.

Demo Casafelink Antoncabon

Seperti kata Osa, Osa sudah mendapatkan izin dari Mas Anton untuk mengubah total templatenya. Ada banyak sekali perubahan yang Osa lakukan pada template safelink (CaSafelink). Mulai dari bagian navigasi , header sampai pada tampilan random post. Agar menampilkan postingan acak ketika Osa membuat sebuah link aman.

Yang paling menegangkan adalah ketika Osa harus izin untuk mengubah bagian creditnya. Tidak etis memang, tapi yang Osa lakukan masih masuk akal. Osa mengganti link credit di bagian footer menjadi " # ". Ini beralasan karena ketika sobat menemui halaman 404 akan redirect ke blog mas Anton. Bukan ke blog Osa pribadi. Dikhawatirkan sobat Osa nanti mengira blog Osa adalah blog abal-abal, jadi Osa beranikan untuk izin langsung pada beliau. Sebagai gantinya Osa menulis lengkap alamat blog mas Anton di bagian credit.

Template gratis akan memiliki banyak kekurangan dibanding versi premiumnya. Dan jika berbicara tentang kekurangan template safelink mas Anton, yang pertama adalah fungsi tombol Copy link to clipboard tidak berfungsi dengan semestinya. Maksudnya tombol tersebut tidak mengcopy link yang sudah ter-encrypt. Dan yang kedua tidak adanya postingan ketika membuat 1 link aman. Ada 1 laman, namun hanya sebagai laman redirect saja. Sekali lagi, itu karena gratis ya.

Kalau sobat kreatif dan punya tekat untuk mengubahnya, Osa jamin templatenya akan menjadi seperti punya Osa.

Kita sudah berbicara kekurangannya (fungsi yang terbatas karena cuma-cuma), dan sekarang untuk kelebihannya.

Template Safelink yang Responsive

Ini merupakan point terpenting. Selain fungsinya sebagai encrypted, sebuah template safelink juga diharuskan untuk responsive. Agar fleksibel ketika dibuka di semua device. Dan ini terbukti pada template safelink mas Anton. Sudah Osa buka bolak-balik di smartphone dan benar-benar responsive. Selain itu juga memiliki load cukup cepat.

Tampilan Keren

Kalau Osa lihat-lihat tampilan home hampir seperti Landing page, namun dengan fungsi berbeda. Meskipun tidak menggunakan parallax pada bagian header masih bisa diadu loh soal kemolekannya.

Easy to Use

Yang terakhir adalah penggunaannya yang mudah sekali. Kita hanya tinggal mengcopy-paste link yang akan kita encrypted. Dan menekan tombol convert, saat itu juga link enkrip akan muncul dan tinggal Copy link to clipboard (kalau sobat sudah membelikan kopi buat mas Anton ya, atau jika sobat bisa mengedit tombolnya).

Hasil Oprek Safelink Template Blogger

Bukan Osa namanya kalau ada template kesukaan yang tidak tersentuh sama sekali. Memiliki hobi desain dan suka gonta-ganti template akan mendorong Osa untuk menjadikan template yang awalnya free menjadi premium. Hehehe. Dan lagi, jika suatu template masih terlihat sama dari yang sebelumnya, atau masih identik dengan yang dibuat oleh creatornya, Osa khawatir dibilang gak kreatif. Hehe.

Yang pertama kali kita lihat ketika membuka safelink template mas Anton adalah bagian header. Saat itu juga Osa langsung mengganti gambar header seperti yang sekarang ini.

Juga mengubah opacity pada navigasi yang awalnya berwarna #FFF polos. Agar terlihat sangar Osa menjadikannya #000 (hitam pekat), sesuai dengan gambarnya.

Sebelumnya pada Encrypt Link Generator terlihat terlalu monoton sehingga Osa memberi sentuhan warna pada background-color agar pembaca lebih fokus kalau area tersebut adalah tempat untuk pemasangan link yang di-encrypted.

Penambahan notif Link has been copied to clipboard. Dari yang tidak meng-copy result link sampai bisa menampilkan pesan copy link berhasil.

Oprekan yang paling lama (memakan waktu 1ahad lebih) adalah membuat random post. Osa mendapat cara ini dari beberapa blog yang juga membahas tentang safelink dengan random post. Template uji coba yang digunakan adalah punya mas Adhy, dan kebetulan isi scriptnya sangat identik, jadi masih bisa Osa contek. Meskipun sama, yang namanya template pasti ada sedikit perbedaan.

Demo Osa-felinku

Pengalaman Osa ketika mengeditnya, yang paling menjengkelkan adalah link yang berubah menjadi tulisan china. Hal itu menandakan kesalahan pada pemasangan link pada halaman atau postingan (random post). Sehingga terjadi 404.

Sekali lagi, kalau sobat berminat untuk mendapat versi premiumnya silahkan hubungi langsung mas Anton di Contact Us.

Wassalam.

Tutorial membuat Logo MBE Style menggunakan Aplikasi Inkscape

2018-02-24T04:06:00.000-08:00

Tutorial membuat Logo MBE Style menggunakan Aplikasi Inkscape – Kalau sebelumnya kita sudah belajar tentang dasar dalam membuat MBE Style, sekarang kita terapkan pengetahuan dasar kita ke dalam pengaplikasian MBE Style itu sendiri. MBE style biasanya digunakan di situs-situs kontes seperti 99design dan sribu.com. Pernah Osa coba satu kali dan mendapat rate bintang 4. Keren.

Jika sobat mencari video tutorialnya di youtube dapat dipastikan semua tutorialnya menggunakan aplikasi Adobe Illsutrator. Karena dengan Ai ini, untuk cut strokenya lebih mudah dan sangat simple sekali. Tapi itu kalau kalian menggunakan Ai (asal belinya yang original ya), Osa disini akan memfasilitasi untuk kalian yang hobi menggunakan software Free seperti Inkscape.

Ikuti tutorial bergambar Osa ini untuk hasil yang lebih maksimal dan mirip.

Langkah awal yang harus sobat buat adalah seperti gambar dibawah ini. Karena tidak ada objek yang sangat rumit, sobat tinggal mengikuti sesuai gambar.

Buat 2 lingkaran yang saling bertabrakan. Kemudian tekan CTRL + * untuk mengambil satu bagian yang bertabrakan tersebut. Sehingga kita mempunyai satu bentuk baru yang mirip kuwaci.

Dari satu bentuk baru inilah kita akan membuat leafe (daun) dan bunga untuk Logo MBE Style kita. Atur kemiringannya dan duplikat sampai terbentuk kelopak bunga yang indah.

Jangan Lupa Baca Juga :

Untuk membuat pot bunga kita hanya perlu menggunakan bezier tool saja. Atau bisa juga dimulai dengan rectangle dan sorot Menu Path – Object to Path ( SHIFT + CTRL + C ). Klik node yang akan di geser untuk membentuk seperti gambar Osa di atas.

Jika sudah mempunya bentuk pot seperti poin 1, saatnya menggunakan Cut Path untuk memotong bagian sebelah kirinya. Buat satu kotak kecil sebagai pemotong. Seleksi keduanya (bentuk pot dan rectangle kecil) dan tekan CTRL + ALT + /.

Lanjut pada pewarnaannya. Pertama kita warna pada bagian pot terlebih dahulu. Karena yang kita buat diatas hanya berupa lineart saja, untuk memberi warna kita harus membuat bentuk dengan Bezier mengikuti lineart. Dan beri warna dasar #95d86a (RGB).

Agar tidak terlihat flat dan kaku pada logo, kita tambahkan sedikit highlight gunanya agar logo lebih cerah dan berkilau. Membuatnya cukup mudah.

Khusus untuk poin A , sobat tidak perlu membuatnya 3 kali. Cukup buat satu dan beri warna #cbfdab. Selanjutnya tinggal duplikat dan mengatur kemiringannya sesuai bentuk kelopaknya. Poin B hanya tarik garis lurus biasa saja.

Final touch adalah penambahan bentuk menyerupai tanda + dan lingkaran kecil. Jangan lupa diberi nama logo dan taglinenya.

Selain untuk logo, MBE style bisa juga dimanfaatkan untuk membuat icon untuk aplikasi Android atau untuk icon e-commerce dan lainnya. Selain enak dilihat, juga sangat mudah membuatnya.

Semoga bermanfaat dan selamat belajar.

Bonus untuk sobat Osa yang ingin belajar juga sekaligus mencoba safelink Osa, bisa download dengan menekan tombol dibawah.

DOWNLOAD

Wassalam.

Memotong (Cut Path) Stroke di Inkscape

2018-02-23T00:44:00.000-08:00

Memotong (Cut Path) Stroke di Inkscape – Kalau sobat user CorelDRAW atau Adobe Illustrator, pemotongan Stroke di Inkscape caranya sama saja. Seperti yang pernah Osa tuliskan, antara Inkscape, CorelDRAW dan Illustrator memiliki banyak sekali persamaan. Dan dibalik persamaan pasti ada sedikit perbedaan. Perbedaan tersebut hanya terletak pada cara cepat mengakses shortcut dan perbedaan tampilan saja, selebihnya fungsinya sama.

Pemotongan stroke biasanya digunakan untuk membuat line putus-putus. Walau sebenarnya bisa mengubahnya di menu Stroke Style. Tapi bukan garis continue yang seperti yang kita inginkan. Terkadang ‘kan kita hanya menginginkan beberapa garis putus hanya 1 atau 2 bagian saja.

Jangan lupa Baca Juga :

Misal kita akan membuat desain MBE style. Nah pada MBE style identik sekali dengan pemotongan stroke yang rapi dan tiap bagian memiliki 1 sampai 3 potongan stroke.

Lihat contoh dibawah ini.

Karena konsep desain adalah sesuai selera, jadi selera yang lebih Osa suka adalah memotong stroke hanya di satu bagian saja. Kalau kebanyakan kayaknya kurang sedap dilihat.

Lalu bagaimana caranya memotong stroke tersebut? Ikuti tuts dari Osa ini ya.

Untuk contoh sederhana saja. Osa akan membuat sebuah garis lurus menggunakan Bezier. Contoh gambar diatas akan ada di artikel selanjutnya setelah artikel ini.

Sobat tarik garis horisontal atau vertikal dengan bezier.

Perhatikan pada bagian menu Fill and Stroke. Disitu sobat melihat Join, Cap dan Order, pada Cap sobat pilih yang Round Cap agar line kita memiliki bentuk melengkung. Lain-lainnya biarkan default saja.

Selanjutnya. Buat sebuah rectangle / kotak untuk memotong stroke dibawahnya (setiap membuat objek baru pasti akan berada diatas objek yang sudah kita buat sebelumnya, jadi tidak perlu lagi menekan tombol Home untuk membuatnya Order Front of)

Seleksi kedua objek. Pergi ke Menu Path – Cut Path atau dengan shortcut CTRL + ALT + / .

Setelah itu sobat hapus bagian objek yang sudah kita cut tadi. Lihat gambar dibawah.

Jika sudah mengetahui dasar-dasarnya seperti ini, sobat bisa berlanjut ke langkah selanjutnya untuk membuat MBE style. Tapi di lain kesempatan ya.

Wassalam.

Membuat icon Link External dengan SVG icon

2018-02-20T05:28:00.000-08:00

Membuat icon Link External dengan SVG icon - Pernah lihat penampakan link eksternal di situs-situs google seperti gambar diatas? Link eksternal adalah sebuah link yang akan mengarahkan kita pada situs lain, baik ke beranda atau ke halaman tertentu dari situs tersebut.

Awalnya Osa tidak terlalu ingin memperhatikan tampilan dari link eksternal, namun Osa sering mengintip support google dan menemukan tampilan yang eye-catching banget. Dan kembali mendapati hal yang menarik di blog favorit, kompiajaib.

Mas Adhy membuat postingan tentang link eksternal ini dengan menggunakan SVG icon. Icon kesukaan Osa banget karena basednya dari Inkscape. Hehehe.

Sobat juga bisa menerapkan icon link eksternal ini di template blog sobat sendiri. Agar terlihat lebih elegan

Simpan style dibawah ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/
.post-body a[href^="http://"]:after,
.post-body a[href^="https://"]:after {
  content: '';
  background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23F62459' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-left: 3px;
  vertical-align: -2px
}
.post-body .tr-caption-container a:after,
.post-body .separator a:after,
.post-body a[href^="http://www.obiyshinichiart.com/"]:after,
.post-body a[href^="https://www.obiyshinichiart.com/"]:after {
  content: '';
  background: 0 0;
  width: 0;
  height: 0;
  margin-left: 0
}
/*]]>*/
</style>
</b:if>

Sobat ganti kode F62459 untuk warna iconnya sesuai keinginan sobat. Dan 2 link www.obiyshinichiart.com ganti juga dengan link blog sobat.

Save dan lihat hasilnya. Semoga bermanfaat.

Wassalam.

Sumber : https://www.kompiajaib.com/2018/01/membuat-ikon-external-link-menggunakan.html

Shortcut Inkscape yang sering Osa gunakan

2018-02-19T22:41:00.001-08:00

Shortcut Inkscape yang sering Osa gunakan – Jadi ceritanya kemarin ada request dari sobat Osa yang ingin tahu apa saja shortcut pada aplikasi Inkscape yang sering kali Osa pakai. Di salah satu video youtube Osa sudah Osa tuliskan (kalau tidak salah memang ada sih, hehehe). Tapi untuk pelengkap Osa tuliskan juga di blog ini untuk menghemat kuota kalian.

Shortcut adalah cara pintas/cara cepat untuk menjalankan satu perintah pada perangkat lunak komputer. Dalam hal ini adalah Shortcut untuk perangkat lunak Inkscape. Setiap aplikasi mempunyai shortcut uniknya sendiri. Namun yang pasti, untuk shortcut new, save, save as dan copy – paste Osa rasa sama saja. Terkecuali mungkin untuk MacOS, karena Osa belum pernah sekalipun menyentuh yang namanya OS ini. Hehehe.

Sebelum membaca postingan ini sampai selesai, alangkah baiknya juga sobat jalan-jalan ke situs resmi Inkscape agar mempunyai pengetahuan lebih luas lagi tentang apa itu Inkscape. Dan siapa tau juga sobat berminat untuk memberikan donasi pada developers inkscape.

Sekarang pada pembahasan utamanya. Shortcut yang sering Osa gunakan adalah :

Yang pertama B atau SHIFT+ F6 (Draw Bezier Curves and straight lines) fungsinya untuk membuat kurva atau garis lurus. Ini biasanya Osa pakai ketika membuat lineart, coloring atau yang lainnya. Bisa dikatakan, dialah inti segalanya.

Selanjutnya CTRL + + fungsinya untuk menggabungkan dua objek atau lebih (Union). Baca juga : Menggabungkan dan memotong objek di Inkscape. Pertanyaan yang muncul di video Osa adalah Bagaimana Osa bisa cepat dalam proses pewarnaan vector? Kuncinya ada pada shortcut ini.

Vector yang Osa buat selalu memiliki warna limit. Tidak lebih dari 7 warna untuk skin. Tapi bukan berarti Osa tidak melalui proses pemilihan warna, sebelum membuat vector terlebih dahulu Osa buat sample warnanya. Jadi coloring lebih cepat apalagi dengan memanfaatkan shortcut dari Union.

CTRL + - fungsi dari shortcut ini berlawanan dengan Union. CTRL + - akan memotong objek yang berada dibawahnya.

D atau F7 adalah Pick Colors from Image. Maksudnya mengambil sample warna dari sebuah gambar. Dan inilah yang sering Osa gunakan dalam pemilihan warna. Terutama skin. Sobat bisa juga menggunakannya karena penggunaannya yang simple dan sangat mudah sekali.

Dan itulah beberapa shortcut yang sering Osa pakai ketika membuat Vector. Seperti kata Osa sebelumnya, selain 4 shortcut diatas masih banyak lagi yang bisa sobat gunakan. Jangan takut mencoba. Semoga bermanfaat.

Wassalam.

Membuat Sitemap Blog Keren Ala AMP Kompiajaib

2018-02-16T05:50:00.001-08:00

Membuat Sitemap Blog Keren Ala AMP Kompiajaib - Assalaamu'alaikum. Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. (Wikipedia)

Setelah mencari-cari dan gonta-ganti tampilan sitemap, akhirnya Osa jatuh hati pada tampilan sitemap punya mas Adhy Suryadi. Fresh and clean. Kalau dibanding dengan sitemap Osa sebelumnya kalah jauh bener. Terlihat berantakan dan mengganggu penglihatan.

Berikut ini adalah tampilan terbaru sitemap Osa. Dan 98% sama persis dengan kompiajaib.

Apakah benar-benar mirip dengan kompiajaib? Silahkan sobat berkunjung ke blognya langsung dan lihat pada halaman sitemapnya.

Untuk membuat halaman sitemap, sobat ke Blogger - Halaman - Halaman Baru. Kemudian copy kode di bawah ini di bagian HTML (bukan di Compose)

<html>
<head>
<title>Sitemap</title>
<style> /* Sitemaps */ 
#sitemap-tab{padding:10px 10px;margin:0 auto 20px}
#sitemap-tab table{width:auto;margin:0 auto}
#sitemap-tab form{font:inherit}
#sitemap-tab label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#sitemap-tab select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#sitemap-tab input{width:100%;border:1px solid #dedede;border-radius:0px;margin:0;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#sitemap-tab select{width:100%;border:1px solid #dedede;border-radius:0px;margin:0 0 5px;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} 
#sitemap-tab select option{min-height:1.4em!important;} 
#sitemap-tab input#feed-q{padding:5px 10px!important;}.news-text {font-size:14px;line-height:1.5em;} 
#sitemap-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none} 
#sitemap-container li{list-style:none;margin:0;padding:0;display:inline} 
#sitemap-container li a{text-decoration:none;color:#2C2C2C;font-weight:bold;font-size:18px} 
#sitemap-container li a:hover{text-decoration:none;color:#F62459} 
#sitemap-container li img{float:left;margin:0 15px 15px 0;padding:0;width:70px;height:50px;!important} 
#sitemap-nav{margin:10px 0 30px;text-align:center;font-weight:500;width:100%} #sitemap-nav a,#sitemap-nav span{color:#F62459;text-decoration:none;display:block;opacity:.8} #sitemap-nav a:hover,#sitemap-nav span:hover{opacity:1} 
#sitemap-nav span{cursor:wait} 
@media (max-width:600px){
#sitemap-tab table{margin:0 auto;width:100%} 
#sitemap-container,#sitemap-tab{margin:0 auto} 
#sitemap-container li .inner{margin:5px auto;height:auto;} 
#SitemaContainer li{float:none;display:block;width:auto;height:auto} 
#sitemap-container li .news-text, #sitemapContainer:after,#sitemap-container li img{display:none!important} 
</style>
</head>
<body>
<div id="sitemap-tab">
<table>
<tbody>
<tr>
<td>
<label for="feed-order">Urutkan artikel berdasarkan:</label>
</td>
<td>
<select id="feed-order">
<option selected="" value="published">Artikel terbaru</option>
<option value="updated">Artikel yang terakhir di update</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="label-sorter">Filter artikel berdasarkan kategori:</label>
</td>
<td>
<select disabled="" id="label-sorter"><option selected="">Loading....</option> </select>
</td>
</tr>
<tr>
<td>
<label for="feed-q">Cari artikel dengan kata kunci:</label>
</td>
<td>
<form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" /></form>
</td>
</tr>
</tbody>
</table>
</div>
<header id="result-desc"></header>
<ul id="sitemap-container"></ul>
<div id="sitemap-nav"></div>
<script type="text/javaScript"> document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={url:'https://www.obiyshinichiart.com/',maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizB3JqFZEXSL79fYKYC4TX_CnNILxpBUz-m2ueKcvDeyUirWuz7FBsADbVkgXDij_XfAzC-Oa7WE-aYB-Vclb2S3q0AdlSFgPvGyRKbY6bVMIYBwoBPMAO5MvRRTwcoSZzkLJg-zn7dxcE/s1100/no-thumbnail.png",loading:"<span>Memuat...</span>",counting:"<div> Memuat artikel...</div> ",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('sitemap-container'),g:el('sitemap-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.url+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');} o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div> Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div> ';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";} for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}} _h=d.createElement('li');_h.innerHTML='<div class="inner"> <img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text"> '+ _d+'&hellip;<br style="clear:both;"></div> </div> ';o.f.appendChild(_h);} _h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};} o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</option>';} b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();
</script>
<div class="clear"></div>
<div class="inline-ad"></div>
</body>
</html>

Sobat ganti link yang Osa markup merah diatas. Klik pratinjau untuk melihat hasilnya terlebih dahulu. Jika sudah sesuai bisa langsung sobat Publikasikan.

Dan itulah Cara Membuat Sitemap Blog Keren Ala AMP Kompiajaib. Semoga bermanfaat.

Wassalam.

Sumber : demangfedi.com
Referensi : kompiajaib.com

Membuat Search Form Show-Hide dengan event onClick

2018-02-15T17:28:00.000-08:00

Membuat Search Form Show-Hide onClick Event - Assalaamu'alaikum sobat Osa. Melihat ada yang baru di tampilan blog Osa tidak? Perhatikan bagian search form yang dulunya ada di bawah header atau di samping header? Yaps, sebelumnya disitu ada search form bawaan template premium Osa ini. Tapi sudah Osa tanggalkan 3hari yang lalu dengan alasan sedikit kurang responsive.

Dan beberapa waktu lalu Osa menemukan search form yang menarik seperti di blog kompiajaib. Awalnya Osa ingin mencontek langsung seperti punyanya mas Adhy Suryadi ini, namun karena menggunakan AMP HTML Osa jadi kebingungan mana saja yang harus Osa copy. Hehehe. Kalau pada template AMP mas Adhy yang kita lihat biasanya pada CSS style akan terlihat 1 baris langsung. Jadi bingung.

Sebelum menerapkan tutorial Osa di blog sobat, silahkan backup terlebih dahulu templatenya. Dan pastikan tidak ada kode dan id yang sama dengan kode-kode Osa ini. Untuk memastikan kode Osa bekerja dengan baik, sobat hapus terlebih dahulu semua CSS untuk search form sobat.

Search form show-hide ini Osa dapatkan di blog bungfrangki. Lebih tepatnya di template Mostheme. Kalau sobat juga tertarik membuatnya, ini dia kode-kode dan script yang sobat butuhkan.

Copy CSS dibawah ini di atas </style>

/* CSS Fixed Search Button */
#right-header{background:#4499f0;width:99px;height:58px;display:inline-block;float:right;position:absolute;right:0;top:0;bottom:0;z-index:9999}
#search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0.3s ease-in-out;-moz-animation:shownow 0.3s ease-in-out;animation:shownow 0.3s ease-in-out}
@keyframes shownow{0%{transform:scale(0.9)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
#search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden}
#search{border-bottom:3px solid rgba(63,63,63,.8)}
#searchform{color:#111;width:100%;margin:0 auto;overflow:hidden;position:relative;}
.search-button,.search-button:hover{clear:both;background:none;border:none;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700}
.search-button:active{border:none;outline:none;background:none;}
#search-form{background-color:transparent;width:100%;height:57px;line-height:57px;padding:0 60px 0 20px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:25px;color:#fff!important}
#search-form{-webkit-box-sizing:border-box}
#search-form:focus{border:none;outline:0;color:#fff;}
#searchform:focus{border:none;outline:0;color:#3f3f3f}
#box{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s;}
#hide span.smallbutton{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;border-radius:99em;border:3px solid #fff;float:right;overflow:hidden;display:block}
#hide span.smallbutton:hover{color:#eee;border-color:#eee}
#box p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase}
.search-icon span{font-weight:normal;width:45px; height:60px;line-height:60px;position:absolute;top:0;right:20px;cursor:pointer;font-size:22px;color:#fff}

Cari kode </body> atau scroll down sampai mentok ke bawah (biasanya berada paling bawah dari sebuah template). Dan letakkan kode dibawah ini tepat di atas </body>

<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='hide'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></span></div>
<div id='search-wrap'>
<p>Start typing and press Enter to search</p>
<div id='search'>
  <form action='/search' id='searchform'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Search here....' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>
  </div>
  </div>
</div>
</div>

Langkah selanjutnya adalah sobat membutuhkan icon search untuk memanggil form searchnya. Copy kode dibawah dan letakkan sesuai keinginan sobat. Kalau Osa lebih suka meletakkan di sebelah kanan menu navigasi. Karena memang disitulah tempat yang paling cocok. Hehehe.

<div class='right-header' id='right-header'>
<div class='search-icon'>
<div id='show'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-search'/></span></div>
</div>
  </div>

Search form ini menggunakan FontAwesome untuk membuat Search-icon. Jadi pastikan juga sudah terpasang FontAwesome di template sobat.

Save template dan lihat hasilnya. Untuk Demo bisa coba di blog Osa ini.

Kalau sobat mengalami kesulitan silahkan berbincang dengan Osa di kolom komentar. Dan itulah Membuat Search Form Show-Hide dengan event onClick. Semoga bermanfaat.

Tiger HD Wallpaper for Smartphone and Desktop

2018-02-09T16:53:00.000-08:00

Assalaamu'alaikum sobat Osa. Apa wallpaper desktop kalian hari ini? Beberapa waktu lalu Osa mendapat ide untuk membuat sebuah wallpaper keren untuk desktop dan smartphone Osa. Ide yang muncul adalah wallpaper clean, elegan dan fokus untuk dilihat.

Keinginan yang muncul adalah mirip seperti flat design. Sudah pada tahu kan apa itu flat design? Karena Osa tidak akan membahas hal tersebut. Jadi cari sendiri di Google. Hehehe.

Untuk tampilan desktop hanya Osa buat Wide Screen saja dengan alasan rata-rata layar desktop semua sudah beralih ke bentuk ini. Jadi untuk yang square bisa kalian custom sendiri.

Tiger Wallpaper HD for Smartphone

Yang pertama wallpaper untuk smartphone kesayangan kalian. Osa membuatnya dengan dimensi 1080px x 1920px. Karena ukuran rata-rata yang sering Osa jumpai di Google.

Tiger Wallpaper HD 1400px X 900px

Tiger Wallpaper HD 1366px X 768px

Tiger Wallpaper HD 1360px X 768px

Tiger Wallpaper HD 1280px X 800px

Tiger Wallpaper HD 1280px X 768px

Tiger Wallpaper HD 1280px X 720px

Silahkan sobat Save as satu persatu. Gambar diatas semuanya sudah Osa kompress agar tidak terlalu bengkak ukurannya. Namun dengan kualitas yang masih tebilang sama dengan ukuran aslinya. Meskipun terkompress sampai 80% hasilnya sama loh.

Selamat beraktifitas dan jangan lupa dhuha (10 Peb 2018 / 07:53 WIB)

Wassalam.

Bacaan setelah bangun tidur

2018-02-04T17:32:00.001-08:00

Bacaan setelah bangun tidur – Assalaamu’alaikum sobat Osa. Pagi tadi (05-02-2018) Osa membuka buku-buku simpanan Osa, mulai dari buku sekolah dari buku dari Kyai Osa. Dan Osa menemukan foto copyan yang ingin Osa bagikan pada sobat Osa semua.

Salah satu isi dari buku tersebut adalah bacaan ketika kita bangun tidur. Jadi kalau biasanya bangun tidur kita langsung bangun dan membuka notif facebook, whatsapp, bbm dan lainnya, sekarang waktunya berubah. Yang dibuka jangan notif-notif dari aplikasi sosial media, tapi blog bacaan dari Osa ini. Hehehe.

Dan bacaannya adalah sebagai berikut :

اَلْحَمدُ لله الذي أَحْيَانَابَعْدَمَا أَمَاتَنَاوَاِلَيْهِ النُّشُوْرُ . أَصْبَحْنَا وَأَصْبَحَ الْمُلْكُ لله . وَالْعَظَمَةُ وَالسُّلْطَانُ لله . وَالْعِزَّةُ وَالْقُدْرَةُ لله رَبِّ اْلعَلَمِيْن . أَصْبَحْنَا عَلَى فِطْرَةِ اْلِاسْلَام . وِعَلَى كُلِمَةِ الْإخلاص . وَعَلَى ِديْنِ نبينا محمد صلى الله عليه وسلم . وَعَلَى مِلَّةَ أَبينا إبراهيمَ حَنِيْفًا مُسْلِيْمًا . اَللَّهُمَّ بِكَ اَصْبَحْنَا . وَبِكَ اَمْسَيْنَا . وَبِكَ نَحْيَا وَبِكَ نَمُوْت . وَإِلَيْكَ النُّشُوْرُ .الحمدللهِ الَّذِي رَدَّعَلَيَّ رُوْحِي . وَعَافَانِي فِي جَسَدِي . وَأَِذن لِي بِذِكْرِهِ . الحمدلله الَّذِي خَلَقَ النَّوْمَ وَالْيَقْظَةَ . الحمد لله الَّذِيْ بَعَثَنِي سَالِمًاسَوِيًّا . أَشْهَدُ اَنَّ الله يُحْيِي المْوَْتىَ . وَهُوَعَلَى كُلِّ شَْيءٍ قَدِيْرٌ . سبحان الله . والحمدلله ولاإله إلا الله . والله اكبر ولاحول ولا قوة إلا بالله العلي العظيم . لَاإله إلا أنت سُبْحَانك اَللَّهُمَّ وَبِحَمْدِكَ أَسْتَغْفِرُكَ لِذَنْبِي . وَأَسْأَلُكَ رَحْمَتَكَ رَبِّ زِدْنِي عِلْمًاوَلَاتَزِغْ قَلْبِي بَعْدَ إِذْهَدَيْتَنيِ وَهَبْ لِي مِنْ لَدُنْكَ رَحْمَةً . إِنَّكَ أَنْتَ الْوَهَّابُ .

Jadi mulai hari ini bacaan tersebut yang kita baca setelah bangun tidur, mandi dan sholat Shubuh. Dan membaca Al-Qur’an walau cuma sebentar (kalau bisa one day one juz seperti kata Ustadz Yusuf Mansur kita terapkan). Baru setelah itu buka notif sosial medianya. Hehe.

Wassalam.

Mengatasi Komentar Disqus tidak muncul setelah ganti custom domain

2018-01-30T17:06:00.000-08:00

Mengatasi Komentar Disqus tidak muncul setelah ganti custom domain - Pada tanggal 26 Januari 2018 kemarin Osa akhirnya memastikan diri untuk segera membuat custom domain untuk blog ini. Osa percayakan pembuatan custom domain ini ke situs niagahoster dengan alasan service 24 jam dan support yang sangat ramah.

Dari tanggal tersebut Osa belum melihat ada yang aneh pada blog Osa. Tapi keesokan harinya karena Osa mendapat notifikasi kalau ada yang berkomentar di salah postingan Osa, Osa coba membuka komentar tersebut. Dan hasilnya komentar yang baru saja di kirim oleh sobat Osa itu malah tidak ada. Bingung jelas.

Coba cari-cari di blog tetangga kali aja ada yang membuat postingan seputar komentar disqus yang tidak muncul ini. Ada beberapa yang membuatnya namun itu di tahun lalu dan dengan tampilan disqus yang masih lawas. Jadi Osa tidak menemukan apa yang mereka tuliskan di postingannya.

Untuk sobat Osa yang juga mengalami kebingungan seperti Osa. Ini dia arahan dari Osa :

Mengatasi Komentar Disqus tidak muncul setelah ganti custom domain

Sobat buka halaman disqus (kalau belum login silahkan login terlebih dahulu). Tapi rasanya sobat pasti sudah login otomatis ya kalau memang menggunakan komentar disqus di blognya.

Klik Menu Admin dan sobat akan masuk pada dashboard admin seperti dibawah ini

Pada Menu Your Sites 1 sobat pilih blog sobat yang bermasalah pada komentar disqusnya. Kemudian klik Menu Settings 2 .

3 sobat ganti URL sub-domain yang sebelumnya dengan domain TLD yang sudah sobat order sebelumnya. Dan klik Learn How 4 .

Otomatis sobat akan di bawa ke Migration Tools seperti gambar diatas. Selanjutnya sobat klik Start domain migration tool.

Jika sobat melihat 2 kali next step pilih keduanya secara berurutan. Gambar diatas adalah next step yang pertama, setelah sobat klik akan ada next step selanjutnya.

Dan terakhir adalah Confirm Migration. Setelah itu sobat cek salah satu postingan sobat apakah sudah muncul semua komentar disqusnya. Jika belum (biasanya karena banyaknya komentar disqus), sobat tunggu selama kurang lebih 24 jam agar semua komentarnya di pindah ke domain TLD baru sobat.

Itulah cara Mengatasi Komentar Disqus tidak muncul setelah ganti custom domain. Semoga bisa membantu sobat yang mengalami masalah ini.

Wassalam.

Percantik tampilan Blog pager pada postingan Blog

2018-01-28T07:45:00.000-08:00

Percantik tampilan Blog pager pada postingan Blog - Untuk mengisi waktu luang Osa malam ini, sekaligus untuk membuat catatan juga agar tidak perlu mencari-carinya lagi di rumah si mbah.

Blog pager post memiliki artian next dan prev pada blog. Dan Osa akan membuat memo untuk Osa sendiri (siapa tau bisa bermanfaat juga buat kalian), mengenai mempercantik tampilan Blog pager di postingan.

Di beberapa template yang beredar, biasanya tampilannya standart atau bahkan tidak ditampilkan (seperti pada template blog Osa ini). Sebelumnya Blog pager di blog Osa di hidden oleh mas Basri Matindas.

Tampilan tersebut Osa ambil dari template mbak Arlina dengan mengubah kode warnanya saja. Menyesuaikan dengan template yang sedang Osa gunakan.

Copy kode dibawah ini dan pastekan diatas </b:skin> atau </style>

#blog-pager a.blog-pager-newer-link:hover,
#blog-pager a.blog-pager-older-link:hover{background:#30bead;color:#fff;opacity:1}#blog-pager a.home-link{background:#30bead;margin:7px 0;padding:8px 12px;line-height:normal;color:#fff;font-weight:400;font-size:13px;text-transform:uppercase;display:inline-block;overflow:hidden;text-align:center;list-style:none;border-radius:4px;opacity:.7}
#blog-pager a.home-link:hover{background:#30bead;color:#fff;opacity:1}
#blog-pager .blog-pager-older-link{float:right}
#blog-pager .blog-pager-newer-link{float:left}
#blog-pager .blog-pager-older-link span{margin-right:10px}
#blog-pager .blog-pager-newer-link span{margin-left:10px}
#blog-pager{text-align:center;padding:10px 0;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}

Sobat ganti kode warna #30bead sesuai keinginan sobat. Jika sudah, save template dan lihat hasilnya. Demonya bisa sobat lihat diakhir postingan Osa. Paling bawah diatas footer. Hehehe.

Wassalam.

Parse HTML

2018-01-28T06:55:00.000-08:00

Parse HTML - Assalaamu'alaikum sobat Osa yang budiman. Hehe. Parse HTML merupakan sebuah tool untuk mengkonversi script HTML agar bisa dipasang ke dalam script xml. Osa pikir sebelumnya tidak akan terlalu sering untuk menggunakan tools ini dikarenakan Osa sendiri juga bukan merupakan seorang yang ahli di dunia per-script-an.

Tapi semakin kesini ternyata Osa semakin senang dengan dunia yang seperti ini. Terutama yang Osa prioritaskan adalah membuat tampilan blog Osa menjadi lebih menarik. Dan semoga saja nantinya juga bisa membangun sebuah template untuk sobat semua. Aamiin. Hehehe.

Tools ini baru saja Osa dapatkan di blog mas +Adhy Suryadi Kompiajaib. Dan kebetulan juga, saat ini Osa sedang mencari tampilan yang menarik untuk Syntax Highlighter di blog Osa. Jadi semuanya Osa temukan di blog beliau. Menginspirasi banget pokoknya blog mas +Adhy Suryadi ini.

Parse HTML adalah seperti dibawah ini :

Codes copied to clipboard!

Kalau sobat juga ingin menampilkan Parse HTML ini di blog sobat, silahkan copy - paste kode dibawah ini.

<style scoped="">
.btn,.btn:active{background-image:none}
.btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px;cursor:pointer}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:300px;width:100%;padding:10px;margin:0 0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0}
.btn-sm{font-size:12px;line-height:1.5;padding:5px 10px}
.btn-xs{font-size:12px;line-height:1.5;padding:5px 10px}
.collapse{display:none}
#parser2{position:relative}
.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px} button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px;}
</style>
<div id="parser2">
<textarea id="somewhere" placeholder='Tulis/paste kode di sini lalu klik tombol Parse Codes'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
<button class='close close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button>
<h4>Codes copied to clipboard!</h4>
</div>
<br/>
<button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Codes</button>
<div class="clear"></div>
<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#somewhere' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Clear Codes</button>
</div>
<script type="text/javascript">
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/ObiyShinichi/Js/2fc3257b/parse-html.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Ingat : Untuk memasangnya, sobat beralih ke postingan HTML, bukan di postingan compose. Dan untuk melihat hasilnya, sobat klik menu di pratinjau terlebih dahulu.

Jadi nantinya Osa tidak perlu lagi membuka tab baru dan membuka blogcrowds seperti biasanya. Osa tinggal membuka blog Osa sendiri dan parse HTML di blog Osa sendiri. Semoga bermanfaat.

Wassalam,

Sumber : https://www.kompiajaib.com/

Setting Awal Sebelum Membuat Vector Portrait di Inkscape

2018-01-24T16:52:00.002-08:00

Assalaamu’alaikum sobat Osa. Sebelum memulai sesuatu memang sangat perlu untuk membuat settingan awalnya. Hanya saja kalau di inkscape Osa belum tau caranya agar settingan yang sudah kita buat menjadi settingan default kita. Jadinya harus mengulang setting tersebut setiap kali Osa akan membuat vector portrait.

Hal inilah yang mungkin dikeluhkan sobat Osa lainnya yang ingin membuat vector wajah. Untuk Osa sendiri itu bukanlah masalah besar, karena masalah tersbesarnya adalah PC mati ketika ada deadline. Hehehe.

Langsung pada permasalahan, Osa akan jabarkan dengan menggunakan gambar. Seperti dibawah ini.

Gambar diatas adalah tampilan default media kerja yang Osa inginkan. Karena sekarang menggunakan LCD wide, jadi untuk window Layer Osa bawa ke tempat yang mudah dijangkau dan tidak perlu scroll down karena salah satu layer yang tertutup.

Jika sobat ingin tampilan window-window inkscapenya seperti punya Osa bisa mengikuti arahan dari Osa ini.

1. Sobat sorot menu View dan pastikan pada menu Show/Hide seperti punya Osa. Semua tercentang.

Satu hal khusus pada sub menu tersebut yang muncul adalah pada bar Snap Controls. Biasanya ada sebagian yang sedikit terganggu dengan sudut-sudut node yang saling menyatu ketika akan membuat vector portrait karena akan mengganggu kebebasan gerak mouse kita. Seperti ini.

Sedikit tidak jelas tidak apa-apa ya. Bisa sobat zoom in. Tulisan yang muncul adalah Handle to cusp node. Hal ini muncul hanya ketika Bezier tool bertemu dengan titik node yang sudah kita buat. Selebihnya tidak akan muncul tanda tersebut.

Akan mengganggu hanya ketika kita membuat vector portrait, dan tidak mengganggu ketika sedang membuat logo. Karena itu sangat membantu untuk membuat logo yang proporsional dan simetris.

Untuk menghilangkan tanda tersebut, sobat tinggal klik snap control yang Osa beri tanda kotak merah.

Dan lihat hasilnya, pertemuan antar node tidak akan memunculkan tanda Handle to cups node lagi.

2. Menampilkan 4 window seperti punya Osa
4 window yang Osa maksud adalah di sebelah kir Bar Snap Controls. Itulah yang sering kali Osa gunakan ketika membuat vector portrait. Ikuti gambar dibawah.

Fill and Stroke untuk menampilkan pilihan warna. Baik warna solid ataupun gradasi. Dan stroke untuk mengatur ketebalan garis sesuai keinginan.

Pelajari juga cara membuat text melengkung dengan inkscape

Align and distribute untuk mengatur posisi antar 2 object atau lebih. Selengkapnya akan dibahas di lain kesempatan.

Pembahasan singkat tentang Align and Distribute. Biasanya sebelum membuat vetor portrait, Osa lebih suka mengaturnya seperti ini

Osa akan mengganti Relative to menjadi Last Selected. Alasannya kenapa? Kapan-kapan Osa jelaskan. Hihi.

Selanjutnya window Layer untuk membuat layer agar bisa bekerja lebih rapih. Tapi ada sebagian yang sama sekali tidak memerlukan tampilan layer.

Export PNG Image adalah bagian akhir dari hasil desian kita. Ditampilkan atau tidak terserah sobat saja. Kalau Osa sangat diperlukan. Hehe.

Demikian artikel Osa tentang Setting Awal Sebelum Membuat Vector Portrait di Inkscape. Kalau sobat masih bingung artikel Osa silahkan tinggal komentar kalian di kolom komentar disqus dibawah. Terima kasih.

Wassalam.

Optimasi Blog dengan skor sempurna di PageSpeed Insight

2018-01-16T20:22:00.000-08:00

Optimasi Blog dengan skor sempurna di PageSpeed Insight - Assalaamu'alaikum sobat Osa. Setelah beberapa ahad lalu Osa membeli template premium dari goomsite, Osa melakukan rombak total pada beberapa tampilan dan script di dalamnya. Dan inilah memang yang sering Osa lakukan, setiap kali berganti template pasti Osa acak-acak sehingga sesuai dengan keinginan.

Sebenarnya ada keinginan besar untuk membangun template sendiri mulai dari 0. Tapi kapan? Desain mulu adanya. Template yang Osa gunakan dari goomsite ini bernama Supermedium 1.1. Rencananya dari mas Basri (pemilik web goomsite) akan membuatkan updatenya, tapi belum waktunya.

Untuk apa Osa melakukan Optimasi pada template sebelumnya? Gambar dibawah ini adalah alasannya.

Pada tampilan mobile masih dibawah standart kalau menurut Osa. Dan mendapat skor merah di tampilan Desktop. Lantas kenapa membeli template ini? Awalnya karena memang tampilannya menarik dan ada Carousel di bawah header. Murah juga tentunya. Hehehe.

Tapi setelah membaca beberapa artikel disana-sini, bolak-balik ke beberapa situs. Carousel dikatakan tidak User friendly dan kurang SEO. Karena sudah terlanjur membelinya, akhirnya Osa hapus Carousel tersebut dan menggantinya dengan Carousel seperti punya kang Adhy di blog Kompiajaib.

Dan untuk beberapa alasan lagi, Osa hapus permanen saja Carousel tersebut. Hehehe. Biar pengunjung langsung melihat postingan Osa saja. Tanpa harus geser satu persatu.

Berawal dari kebiasaan juga, tampilan menjadi hal utama Osa. Oleh sebab itu perlahan Osa rubah sedikit demi sedikit tampilan dari template super medium.

Dan seperti sekarang inilah tampilan yang benar-benar Osa inginkan. Ringan dan responsive. Semoga kedepannya akan memiliki banyak visitor dan Osa semakin rajin membuat postingan di blog Osa.

Dengan tampilan seperti ini, Osa tidak perlu lagi mengatakan " Ah bosan, tampilannya gitu-gitu aja. " Karena Osa bebas mengganti gambar Openingnya. Hehe. Dari openingnya saja sudah membuat Osa bahagia.

Hasil optimasi blog ini banyak Osa dapatkan dari blog kodejarwo. Terima kasih kang Ozik Jarwo. Untuk sobat Osa yang juga ingin melakukan optimasi juga silahkan kunjungi situs tersebut. Dan ikuti tutorial-tutorialnya jangan sampai ada yang terlewat.

Nantinya Osa juga akan membuat postingan seputar optimasi blog sesuai pengetahuan Osa. Hihi. Yang jelas optimasinya pasti berhasil dan membuat loading blog lebih wuss.

Mendapat skor sempurna jika tidak ada pengoptimalan seputar Mengurangi waktu respon server. Domain Osa masih yang gratisan dari blogger. Jadi hal ini memang lumrah sering terjadi saat server mulai lambat. Dan inilah penampakannya ketika server sedang tidak bagus.

Penurunan skor sampai 33 dari yang awalnya 100. Masalah ini sudah dibahas juga di blog kodejarwo. Kalau penasaran apa penyebabnya langsung meluncur ke web kodejarwo.

Tidak hanya di PSI. Blog Osa juga mendapat skor yang lumayan di GTmetrix.

Harapan Osa ketika sudah mendapat template dengan kecepatan seperti sekarang ini akan meningkatkan kemauan Osa untuk terus mengupdate banyak postingan.

Postingan optimasi ini akan Osa buat di lain kesempatan. Mudah-mudahan masih ingat dan sempat.
Wassalam.

4 Web Designer Terbaik Menurut Versi Osa

2018-01-10T19:45:00.000-08:00

4 Web Designer Terbaik Menurut Versi Osa - Assalaamu'alaikum sobat Osa. Untuk kali Osa akan berbagi informasi seputar web designer yang paling Osa sukai. Dari sekian banyaknya designer web, Osa rangkum menjadi 4 saja. Biar tidak bingung memilihnya.

Karena tampilan menarik menjadi keinginan semua blogger, banyak web designer baru yang terus bermunculan. Selain tampilan, yang paling penting dari sebuah web/blog adalah kecepatan loadingnya dan juga responsive ketika digunakan di semua device. Dan dari sinilah kenapa Osa memilih 4 web designer ini.

Dari sekian template yang sudah pernah Osa instal di blog ini, hanya milik 4 orang inilah yang membuat Osa puas. Terbukti fast dan sangat responsive.

Siapa saja 4 web designer tersebut? Ini dia

1. Theme Indie

Themeindie sebenarnya masih baru Osa kunjungi, sekitar November tahun lalu. Namun template yang disediakan sangat wow. Salah satu template yang Osa gunakan adalah Mostheme. Hasil test di page speed insight bisa dibilang memuaskan, berada di angka 88/100 untuk mobile dan 88/100 untuk desktop.

Themeindie menyediakan banyak template fast loading dan responsive. Style magazine, simple dan elegan bisa sobat temukan pada situs ini. Untuk sobat yang berencana untuk berganti template, Osa sarankan untuk memilih template Perkasa, Perkasa V1 dan V2, SiMini dan Mostheme. Template yang Osa sebut adalah template simple dan sangat fast loading.

Situ ini di kelola langsung oleh bungfrangki.com. Bungfrangki.com adalah situs dia yang berisikan tutorial-tutorial seputar blog dan themeindie.com adalah situs yang menyediakan template-template untuk blog.

Itu yang Osa tau, selebihnya bisa langsung mengunjungi situs dia saja untuk lebih jelasnya. Hehehe.

2. Arlinadzgn

Jangan salah, developer juga ada yang cewek loh. Banyak pula. Programmer, developer dan semua yang ber " er " banyak juga yang cewek. Arlina Fitriyani begitu namanya pada author blog miliknya. Dia juga menjadi web designer yang Osa favouritkan. Sudah jelas, Osa pernah gonta-ganti template menggunakan templatenya. Template yang paling lama Osa gunakan adalah Invision.

Selain itu juga pernah pasang template Minima yang cukup kondang waktu itu.

Infinite AMP adalah update template terbarunya pada bulan september lalu. Sempat Osa gunakan, namun karena masih dengan template AMP, jadi Osa balik lagi ke template non AMP.

3. Mas Sugeng

Blogger yang tidak tahu nama ini Osa rasa belum bisa dikatakan blogger. Hehehe. Fastest Magz dan Evo Magz merupakan template mas Sugeng yang paling banyak digunakan. 2 template ini adalah template terbaik menurut mas Sugeng sendiri. Dengan harga Rp. 135.000 sobat bisa memilikinya, namun hanya template Evo Magz saja, karena template Fastest sudah tidak dijual lagi.

Selain mengembangkan template fast loading, melalui situs mas Sugeng Osa belajar tentang SEO, Adsense dan info menarik seputar blogging.

Rata-rata yang Osa sukai adalah web designer yang membuat template sederhana tapi mengedepankan kualitas dan kenymanan pengunjung.

4. Kompiajaib

Osa blogger bukan sih? Sebenarnya bukan. Hehehe. Yang terakhir adalah kompiajaib. Blog besutan mas Adhy Suryadi yang mengusung AMP HTML. Blog super cepat dengan konten menarik dan update. Karena sudah menggunakan template AMP jadi sudah jelas blog mas Adhy ini sangat cepat ketika di akses dengan device mobile atau desktop.

Kabar baik untuk sobat yang menginginkan template AMP disertakan tampilan yang sangat bagus, mas Adhy sudah menjual template yang dipakainya saat ini dengan harga Rp. 200.000. Murah bukan? Tentu saja akan support update dari Mas Adhy langsung. Jika sobat berminat bisa langsung menghubungi mas Adhy di blognya.

Sebenarnya masih ada lagi yang Osa sukai, seperti maskolis dan juga kang Ismet. Namun Osa tidak tahu kemanakah website beliau. Mencari info tentang beliau juga sudah tidak update terbarunya.

Dan itulah 4 Web Designer Terbaik Menurut Versi Osa. Kalau ada tambahan dari sobat Osa, silahkan tambahkan di kolom komentar, sertakan juga dengan link yang bisa kunjungi.

Wassalam.

Membuat Text Melengkung pada Inkscape

2018-01-03T22:46:00.003-08:00

Membuat text melengkung pada inkscape – Melengkapi pada postingan Membuat Simple Logo : Mountains – Let’s Go Climbing dengan Inkscape, Osa akan membahas cara membuat tulisan melengkung pada aplikasi Inkscape.

Caranya sangat mudah dan simple saja. Kita hanya tinggal membuat sebuah objek lingkaran dan text itu sendiri yang akan kita buat melengkung. Karena begitu mudahnya, jadi untuk postingan akan sangat singkat sekali isinya.

Langsung saja praktekkan bersama.

Buatlah sebuah lingkaran

Lingkaran ini akan menjadi acuan kita agar text yang kita inginkan bisa melengkung. Selain lingkaran bisa juga dengan meng-custom sendiri dengan Bezier Tool.

Text yang diinginkan

Letakkan text diatas atau dibawah lingkaran. Sesuai keinginan, mau kita letakkan dimana nantinya text tersebut.

Klik 2 Objek dan Pilih menu Text

Kalau sobat sudah membuat 2 objek yang dibutuhkan, sobat klik keduanya sambil menekan tombol SHIFT . Sehingga terseleksi 2 objek sekaligus. Jika sudah sorot Menu Text – Put on Path. Dari sini kita sudah berhasil membuat text melengkung namun tidak beraturan.

Mengatur bentuk lengkungan text

Klik objek lingkaran. Klik sampai pada bagian sudut lingkaran terdapat bentuk rotasi seperti pada gambar

Sobat drag tanda panah tersebut, gerakkan ke kanan kiri atas atau bawah.

Tulisan terbalik

Jika sobat ingin meletekkan text lengkung di bawah lingkaran, yang akan terjadi mungkin text tersebut akan terbalik. Seperti pada gambar Osa ini

Sobat klik objek lingkaran, dan temukan menu yang Osa beri tanda panah untuk flip objek yang di seleksi. Maka hasilnya seperti ini

Hapus Lingkaran

Jika langsung menghapus lingkaran tersebut maka text juga akan terhapus karena masih dalam 1 path. Untuk menghapusnya kita seleksi terlebih dahulu keduanya, dan Pilih Menu Path – Object to Path. Sekarang coba hapus lingkaran.

Dan itulah cara membuat text lengkung di Inkscape. Kalau sobat masih ada yang bingung silahkan tanyakan di kolom komentar.

Wassalam.

Membuat Simple Logo : Mountains – Let’s Go Climbing dengan Inkscape

2018-01-03T19:06:00.000-08:00

Membuat Simple Logo : Mountains – Let’s Go Climbing dengan Inkscape – Simple logo kali ini Osa akan re-make dari karya Mohamed Achraf. Logo ini terbilang sangat simple tapi masih mengusung unsur eye-catching. Ini adalah jenis logo yang sangat Osa gandrungi, enak bener dilihatnya. Sama seperti sebelumnya, Osa kembali membuat simple logo dengan software Inkcape.

Dalam pembuatan logo yang perlu kita perhatikan adalah perspektif dan presisi. Jangan biarkan logo yang kita buat terkesan panjang sebelah. Kurang ke kanan atau kurang ke kiri.

Mountains – Let’s Go Climbing

1. Buat 2 buah segitiga sempurna (sambil tekan CTRL) dan garis horizontal. Atur segitiga sehingga kita mempunyai 2 segitiga berbeda ukuran. Untuk ketebalan outline silahkan sobat samakan dengan Osa atau sobat tentukan sendiri ketebalannya. Kalau Osa outline 1 mm. Lihat gambar.

2. Dari sudut atas segitiga, sobat tarik garis lurus tak beraturan menggunakan Bezier tool.

Garis tipis berjejer di sebelah kanan segitiga bisa sobat dengan cara manual (membutuhkan waktu yang cukup lama) atau bisa menggunakan cara Osa yakni dengan Interpolate – Baca : Interpolate –

3. Selanjutnya kita membuat pepohonan di sebelah para gunung, hehehe. Buat 3 buah segitiga dengan berbeda tingginya.

Susun 3 segitiga yang sudah dibuat sehingga menyerupai gambar Osa diatas. Kemudian duplikat satu pohon yang sudah kita buat ke sisi lainnya.

4. Lanjut kita create perapian. Sudah identik kan ya dimana ada pegunungan pastilah ada perapian untuk bermalam.

Yang pertama kita buat adalah sebuah lingkaran (1) dan rectangle memanjang (2), kemudian tekan tombol N pada keyboard. Sobat akan melihat sebuah titik berbentuk lingkaran (karena ada titik berbentuk kotak juga). Tarik titik lingkaran tersebut sampai kita mempunyai rectangle tanpa sudut.

Objek ketiga kita buat menggunakan Bezier. Custom saja, sesuaikan bentuknya agar terlihat seperti kayu. Letakkan lingkaran (1) berdekatan dengan rectangle (2), tekan tombol Home pada keyboard agar lingkaran berada diatas rectangle.

Dekatkan objek ketiga pada rectangle dan seleksi keduanya dan kita Union. Selanjutnya kita group perapian kita dan duplikat. Samakan seperti pada gambar Osa.

5. Karena namanya perapian, maka kita butuh unsur api di dalamnya. Dengan bezier tool sobat kreasikan kreativitas sobat.

Jangan lupa tuliskan kata Mountains pada logo kita. Pemilihan font suka-suka kita saja. Osa lebih font Product sans atau Open Sans.

6. Untuk mendukung keberadaan kayu dan perapian kita tambahkan juga kapak di kedua sisinya. Ini menandakan kalau kita membutuhkan alat tersebut untuk mendapatkan kayu-kayu jika tidak dijumpai diatas tanah, hehehe.

Ikuti gambar Osa dibawah ini untuk membuat kapak.

7. Tambahkan ornament diatas gunung seperti kilau-kilau bintang atau yang lainnya. Kalau Osa membuat bintang dengan 4 sudut dan menambahkan rounded di bagian sudutnya.

8. Dan untuk sentuhan akhir sebagai pemanis, kita tambahkan text dengan bentuk melengkung sehingga terkesan text tersebut menutupi bagian-bagian setiap logonya.

Dan itulah gambar akhir dari Simple Logo kita. Logo tersebut Osa adopsi dari Master logo Mohamed Achraf seperti kata Osa diatas. Untuk lebih tahu lagi seperti simple-simple logo yang lainnya silahkan sobat kunjungi channel dari Mohamed Achraf.

Membuat text melengkung (melingkar) di Inkscape

NB : Pembuatan logo ini sudah mendapat izin dari authornya sendiri. Osa izin langsung via direct message Instagramnya.

Blend tool ala Inkscape dengan Interpolate

2018-01-02T17:00:00.000-08:00

Blend tool secara umum Osa gunakan untuk membuat objek berjejer atau menggandakan objek secara cepat dan konsisten. Dengan tool ini Osa tinggal membuat 2 objek dan mengklik menu blend untuk menggandakannya dengan sempurna.

Namun untuk Inkscape sendiri, kita disuguhkan dengan nama yang berbeda tapi fungsi sama saja. Interpolate merupakan nama lain untuk Blend tool jika pada CorelDRAW atau Adobe Illustrator.

Interpolate

Gambar diatas adalah penampakan dari pembuatan Interpolate. Mirip dengan CorelDRAW bukan? Dengan tool ini nantinya, Osa akan mempraktekkan untuk membuat sebuah simple logo lagi. Logo tersebut merupakan adaptasi dari master logo Mohamed Achraf.

Cara menggunakan Interpolate

Sobat buat 2 objek dengan menggunakan Bezier atau Rectangle (atau apa saja terserah sobat).
Seleksi 2 objek yang sudah dibuat.
Sorot Menu Extension – Generate from Path – Interpolate...

Menu Interpolate

Maka kita akan melihat seperti pada gambar dibawah ini

Menu Interpolate

Sobat klik Cek box pada Live Preview untuk melihat seperti apa hasil dari Interpolate yang akan kita buat, sebelum klik Apply.

Yang Osa gunakan hanya pada bagian Interpolateion method saja. Dengan mengganti angka yang kita inginkan untuk membuat Interpolate. Untuk yang lainnya Osa biarkan default.
Dan kita sudah mendapatkan Blend Tool seperti pada CorelDRAW.

Hasil Interpolate

Demikian Blend tool ala Inkscape dengan Interpolate yang biasa Osa buat. Seperti kata Osa, di postingan selanjutnya kita akan membuat simple logo dengan mengaplikasikan Interpolate pada logo tersebut. Semoga bermanfaat dan Wassalam.

3 Situs rekomendasi untuk Freelance Desain

2017-12-22T22:00:00.000-08:00

Assalaamu’alaikum. Ada beberapa situs rekomendasi Osa yang memang benar-benar membayar. Untuk kalian (dan Osa sendiri) menjadi freelancer menjadi pilihan yang cukup menyenangkan karena tidak terikat dengan seorang bos atau pimpinan perusahaan (dengan sejuta perintahnya). Freelancer adalah bos. Hehehe. Sekedar selingan saja karena kita juga butuh orang lain untuk menyambung hidup kita.

Freelance (Tenaga Lepas) adalah seseorang yang bekerja sendiri dan tidak berkomitmen kepada majikan jangka panjang tertentu. (Baca : Tenaga Lepas)

Banyak sekali sebenarnya situs penyedia jasa yang bisa kita rambah satu-persatu. Namun disini Osa hanya akan membahas yang sudah Osa gunakan situsnya dan beneran membayar. Sebelum mencoba sebuah situs, biasanya terlebih dahulu Osa cek rank di Alexa. Kalau rank-nya lumayan baru Osa main-main di situs tersebut.

3 Situs tersebut adalah

Fiverr.com

Menjelaskan fiverr secara rinci rasanya tidak perlu ya. Karena sudah banyak sobat Osa yang sudah mencairkan ratusan dollar dari situs ini. Fiverr.com sangat menjanjikan untuk kalian yang benar-benar ingin menjadi seorang freelance sejati. Hehehe.

Gambar 1 : Fiverr.com

Pada fiverr terdapat menu Buyer Request yang akan menampilkan puluhan sampai ratusan keinginan dari pencari jasa. Dari sinilah nantinya kita bisa mencari request yang sesuai dengan jasa yang akan kita kerjakan.

Untuk Osa sendiri, yang Osa cari adalah desain yang masih berhubungan dengan desain dan berbasis vector.

Gambar 2 : Bukti Payment dari Fiverr

Catatan. Fiverr adalah situs penyedia jasa online yang bisa membantu kita mencari pekerjaan secara online. Tidak hanya desain, membuat artikel, membuat video atau apapun yang masih bisa dikirim secara online bisa kalian tawarkan disini.

Dengan pajak yang lumayan tentunya. Berkisar 20% dari pendapatan kita setiap mendapat pekerjaan, akan diambil oleh fiverr.

Fivesquid

Fivesquid menjadi situs yang masih asing di pendengaran, penglihatan dan penciuman Osa. Tau situs ini setelah mencari-cari pembanding/pesaing dari situs fiverr. Cukup banyak pesaingnya, namun Osa lebih tertarik ke Fivesquid karena namanya yang juga Five. Hehehe.

Berbeda dengan fiverr dalam hal mata uang, Fivesquid menggunakan mata uang Pounsterling (£) dalam transaksinya. Dan benar, yang Osa terima adalah mata uang £. Di paypalnya loh, bukan di tangan Osa langsung.

Gambar 3 : fivesquid.com

Sama halnya dengan fiverr, kita bisa menarik hati klien melalui rayuan yang kita buat pada laman My Service. Buatlah Service semenarik mungkin agar banyak klien yang tertarik.

Gambar 4 : Bukti pembayaran fivesquid

Ini adalah buktinya, kenapa di blur kakak? Biar sobat Osa penasaran dan mencoba membuat akun fivesquid juga ya. Osa rekomendasikan 100% untuk situs Fivesquid.

Sketchmob

Kalau Osa lihat, vectorizer asal Indonesia yang sudah lama menggunakan jasa dari situs ini adalah mas Ardhie. WPAPer dari mana Osa lupa. Tapi sebelumnya Osa cukup mengagumi karya-karya beliau. Tarikan dan warnanya berbeda dari WPAPer lainnya.

Gambar 5 : sketchmob.com

Pengalaman pertama di sketchmob adalah keinginan klien yang tetiba langsung mengcopyright desain dari Osa. Tak tanggung-tanggung, menurut Osa harganya lumayan wow. $50 untuk copyright itu sendiri. Belum termasuk harga di desainnya.

Sayangnya Osa tidak bisa memperlihatkan history pembayaran sketchmob ke Osa.

Gambar 6 : Bukti pembayaran sketchmob

Entah karena alasan apa, beberapa gigs Osa malah terhapus oleh sketchmob. Dan akhirnya harus memulai dari awal banget.

Dan itulah 3 situs freelance yang bisa sobat coba untuk menambah tabungan atau uang jajan. Berikan penawaran sebaik mungkin, dan jika ada inbox dari klien sebisa mungkin balas pada waktu itu juga untuk menjaga hati klien agar tidak berpindah ke lain hati.

Selamat mencoba.

Simple Logo dengan teknik Union dan Difference pada Inkscape

2017-12-14T06:11:00.003-08:00

Melanjutkan pada postingan sebelumnya tentang Union dan Difference pada menu path, sekarang kita akan coba aplikasikan perintah tersebut ke dalam sebuah desain sederhana. Kita akan membuat 1 logo yang sangat simple namun eye catching.

Jika sobat sebelumnya belum tau apa itu Union dan Difference silahkan pelajari lebih lengkapnya di inkscape.org atau di postingan Osa ini Menggabungkan (Union) dan Memotong (Difference) bagian Objek di Inkscape

1. Membuat Objek Segitiga siku-siku

Pertama coba sobat buat satu bentuk (segitiga siku-siku) menyerupai punya Osa dibawah ini dengan menggunakan Bezier tools.

Gambar 1 : Segitiga siku-siku

Untuk membuat garis agar lurus, ketika menarik garis sobat tekan juga tombol CTRL pada keyboard.

Kalau sudah terbentuk, sobat tekan F2 untuk mengaktifkan Edit path by nodes. Seleksi nodes pada sudut teratas. Geser nodes tersebut dengan menggunakan tanda panah pada keyboard. Buat sampai mirip dengan gambar Osa.

Gambar 2 : Edit path by nodes

2. Proses Difference objek pertama

Dari sini kita sudah bisa menggunakan perintah andalan kita. Setelah terbentuk objek seperti pada gambar 2, sobat buat rectangle dan beri warna transparan agar terlihat jelas manakah nantinya objek yang akan kita hilangkan.

Gambar 3 : Gunakan perintah Difference untuk menghilang sudut segitiga siku-siku

Seleksi 2 objek yang sudah kita buat. INGAT! Pastikan objek terdepan adalah objek yang akan menghapus bagian objek yang ada dibawahnya. Masih dalam keadaan terseleksi, sobat sorot menu Path – Difference.

Baca juga : Mengenal Inkscape sebagai Aplikasi Basis Vector GRATIS

Gambar 4 : Segitiga siku-siku tidak sempurna :)

Sekarang kita mempunyai segitiga siku-siku yang sudah tidak sempurna. Hehehe.

3. Union 2 Objek

Langkah selanjutnya, bentuk objek menggunakan tool Edit path by nodes. Dengan tools ini sobat bisa langsung membuat garis lengkung sesuai keinginan sobat.

Gambar 5 : Modif bentuk segitiga menjadi sedikit melengkung

Kemudian Sobat duplicate objek yang sudah kita difference tadi dengan kombinasi tombol CTRL + D. Tekan tombol H untuk mem-flip objek duplikat yang kita buat. Geser ke kanan sehingga 2 objek tersebut saling berhadapan satu sama lain.

Pemilihan warna suka-suka sobat saja. Tanpa harus sama dengan Osa.

Gambar 6 : 2 objek yang sudah Osa Union

Karena Osa menginginkan 2 objek ini menyatu bukan dengan Group, jadi Osa gunakan perintah Union.

4. Buat 2 Objek Segitiga Siku-siku

Beri warna biru muda dan biru yang agak tua dikit. Hehehe.

Gambar 7 : Penambahan 2 segitiga siku-siku, sehingga membentuk sebuah perahu kertas

Atur transparansi warna agar terlihat lebih eye catching.

5. Tambahkan Nama pada logo

Biasanya kan logo ada nama dan tagline atau segala macam, kita bisa tambahkan juga pada contoh logo simple yang sudah kita buat ini.

Gambar 7 : Penambahan Nama pada simple logo

Lumayan keren kan ya dari pada tidak sama sekali. Hehehe. Logo ini adalah hasil remake Osa. Sebelumnya Osa menemukan logo ini di sebuah situs. Kalau tidak salah nama situs tersebut adalah medium.com.

Semoga bisa membantu dan bisa memberi manfaat juga untuk sobat Osa yang ingin mempelajari desain dengan menggunakan aplikasi Inkscape. Inkscape ringan dan keren loh.

Kalau ada yang mau ditanyakan silahkan tinggalkan komentar di kotak Disqus dibawah.

Wassalam.