Ketika anda hendak menulis artikel, atau bahkan ketika anda hendak membangun sebuah blog/website baru, tentunya anda perlu untuk merancang desain style dari website/blog tersebut. Dan cara termudah untuk melakukannya adalah dengan melihat-lihat website/blog orang lain untuk mendapatkan ide atau inspirasi.
Dari situ, terkadang kita bisa bertanya-tanya, "wow, pingin niru bagian ini ah", atau "block quote blog ini keren nich, gimana cara nirunya ya?"
Artikel ini akan mencoba menjelaskan kepada anda Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah.
Perlu diketahui, bahwa semua style dan desain web terletak pada CSS. Dan jika anda melakukan pencarian search engine dengan kata kunci "cara meniru style blog orang", maka mungkin anda akan menemukan link seperti ini, atau ini.
Saya telah berusaha membaca dan mencoba teknik-teknik dari website/blog tersebut, namun saya merasa hal itu kurang praktis dan hendak mencoba caara lain. Maka, saya pun menemukan metode ini, yang menggunakan aplikasi add-on dari Chrome (anda membutuhkan browser Chrome untuk melakukan trik ini).
Nama dari add-on tersebut adalah Snappy Snippet. Silahkan anda install terlebih dahulu.
Setelah meng-install-nya, maka langkah-langkah berikutnya sebagai berikut :
1. Select Bagian Yang Hendak Anda Tiru
Di sini saya menggunakan halaman artikel ini sebagai contoh yang hendak ditiru. Klik kanan pada bagian yang hendak ditiru, lalu klik "Inspect Element", maka tampilan akan seperti ini. Di sini saya mencoba meniru tampilan warna ungu seperti pada gambar.
Pastikan pemilihan/selection nya sudah mencakup keseluruhan bagian tersebut. Ini bisa dilakukan dengan memilih bagian style yang hirarki nya lebih tinggi. Bisa dilihat di sebelah kanan, di bagian inspect element, saya memilih bagian "div" ketimbang "span", karena hirarki nya lebih tinggi, dan juga masih meliputi bagian yang hendak saya pilih.
2. Klik Snappy Snippet
Setelah itu, anda klik Snappy Snippet di sini :Maka tampilan akan seperti ini :
Setelah itu, klik :
Nampak bahwa bagian yang tadinya kosong akan terisi dengan style yang ditiru. Setelah itu silahkan anda klik :
Untuk membuka website jsfiddle, sehingga tampilannya akan seperti ini :
jsfiddle ini berguna untuk mensimulasikan tampilan snippet yang ditiru. Jika tampilannya tidak sama seperti yang anda inginkan, kemungkinan besar anda memilih inspect element yang keliru. Silahkan anda coba lagi, mungkin hirarki yang anda pilih kurang tepat.
3. Menaruh style di blogspot
Setelah itu, silahkan anda coba membuat postingan baru di blogspot, dan pilih mode "HTML" (bukan "Compose"). Lalu taruh bagian CSS tadi di bagian sebelum tulisan yang hendak anda beri style. Atau bisa anda coba taruh di CSS utama di bagian Template. Tapi maaf, saya masih belum bisa melakukan ini. Karena itulah saya taruh CSS tersebut di masing-masing postingan. Maaf jika terkesan ribet, tapi inilah metode saya.
Setelah menaruh CSS, silahkan anda coba untuk menulis seperti yang dicontohkan pada format HTML. Maka seharusnya tampilannya sudah bisa berubah seperti tampilan pada halaman aslinya. Atau seperti pada jsfiddle tadi.
Sekian tutorial ini saya buat, semoga bermanfaat dan tidak membingungkan.
Selamat mencoba ya...
Comments
Post a Comment