Desain Blogspot Simple – Hitam/Putih

Udah lama kayaknya saya ngga bagi-bagi tutorial desain lagi. Maklum banyak banget antrian desain alhamdulillah, jadi baru sekarang sempat menulis lagi. Saking kangennya sama ngeblog, saya pending sebentar beberapa desain hihihi. Moga aja ngga pada marah kalo pada tau saya menyisihkan waktu buat ngeblog lagi. Tutorial ini saya buat untuk temen-temen blogger yang suka desain minimalis dan rapi. Daripada menunggu antrian saya #kepedean. Lebih baik bisa mencoba tutorial saya ini yaa.

PERINGATAN : DESAIN BLOG INI HANYA DAPAT DIPERGUNAKAN UNTUK KEBUTUHAN PERSONAL SAJA, TIDAK UNTUK KOMERSIL. KALAU ADA YANG BERNIAT MEMBUATKAN DESAIN SEPERTI INI UNTUK ORANG LAIN DENGAN IMBALAN JASA SAMA SAJA DENGAN MELANGGAR HAK CIPTA SAYA. SAYA TIDAK SEGAN MENEGUR DAN MEMPUBLIKASIKAN DI SOCIAL MEDIA KALAU ADA YANG MEMANFAATKAN UNTUK KEPENTINGAN UANG SEMATA.

Nah sekarang saya mau bagi gratis lagi desain blog simple untuk blogspot. Tampilan saya bagi tiga warna yaitu dominasi putih, hitam, dan abu-abu. Tahapannya hampir sama dengan desain blog sebelumnya disini. Saya menggunakan Google Font Lily Script One, Lato, Gudea, dan Playfair Display. Fiturnya saya buat lumayan detail. Mulai dari menu yang simple dan bisa sampai 7 menu. Kolom komentar juga saya modifikasi, sampai tombol balas. Untuk sidebarnya saya lengkapi dengan social media yang khusus saya hostingkan di tempat saya (yang biasa buat klien – jadi plis yang memakai untuk komersil akan saya ganti aksesnya). Tidak lupa ada tambahan widget juga di bagian bawah. Tambahan bonus adalah quote yang berbeda warnanya. Ini cocok buat yang punya resep dan bisa di-qoute. Jadi lebih terlihat istimewa.

Buat yang penasaran bagaimana tampilan fullnya, ini dia screenshotnya :

simple-theme

SAMPLE SITE

Yuk kita mulai, seperti biasa gunakan sample site terlebih dahulu. Jangan langsung diterapkan pada blog asli yaa. Nanti kalau salah kode bisa berabe hehehe, apalagi ngga di backup. Jadi pastikan sudah hapal/mengerti langkahnya baru diterapkan pada blog yang sebenarnya. Kemungkinan salah atau error sangat kecil, kecuali tidak melakukan sesuai step by step  ;-P

Template dasar yang digunakan adalah simple template dari blogger. Saya tidak menjamin semua langkah disini akan berlaku bagi simple template jenis lainnya. Jadi pastikan menggunakan plain simple template sebagai langkah awal.

tutorial-blogLangkah pertama :

Kita pasang terlebih dahulu untuk fontnya. Masuk ke dashboard -> Template -> Edit HTML dan masukkan kode dibawah ini dibawah <head> . Tag html head akan langsung terlihat begitu membuka edit html, jadi tidak perlu mencari kemana-mana ya.

tutorial-blog1

Untuk copy kode javascript font, bisa klik View Raw yang ada di bawah lalu copy semua kodenya dan paste di bawah tag <head>. Tarik napas yaa, ngga susah kok ^^.

https://gist.github.com/shintaries/7927216.jsKalo sudah jangan lupa disimpan dan kita lanjut lagi ke langkah berikutnya. Langkah kedua : Masukkan kode CSS berikut ini di template -> customize -> Advanced -> Add CSS. Klik di kanan bawah view raw untuk mengcopy.  https://gist.github.com/shintaries/7925069.js

Kode bisa dimasukkan satu persatu untuk mengetahui bagian mana yang berubah. Yang dimaksud satu persatu adalah mulai dari /* sampai tanda kurung kurawa tutup }. Kalau ada yang tidak mau dihilangkan, kode tersebut tidak usah dimasukkan ya. Jangan lupa untuk menerapkan / apply to blog.

tutorial-blog2

Langkah ketiga :

Yuk utak atik settingan dari blogger template designer mulai dari setting lebarnya. Lebar yang sudah saya cocokkan dengan CSS nya adalah 1020px dan lebar sidebar 310px.

tutorial-blog3

Gunakan layout dengan 3 buah widget footer supaya persis sama dengan layout yang saya buat.

tutorial-blog4

Masuk ke advanced -> Links dan masukkan parameter color seperti dibawah ini :

tutorial-blog5

Masukkan parameter tabs text dan tabs background seperti dibawah ini :

tutorial-blog6

tutorial-blog7

Berikutnya masukkan parameter untuk tanggal, post footer, dan gadget seperti dibawah ini :

tutorial-blog8

tutorial-blog9

tutorial-blog10

Okey, kalo sudah semua berarti sudah selesai hehehe. Jangan lupa disave dan di lihat penampakannya seperti apa.

Langkah keempat :

Berikutnya yang terakhir adalah pemasangan social media. Untuk sosial media bisa dipasang di layout -> add gadget -> pilih HTML/Javascript. Masukkan kode berikut. Jangan lupa untuk mengganti data-data social icon yang dipunya yaa…

 

https://gist.github.com/shintaries/7926396.js

Sudah oke semua? Ada yang masih kurang sama persis? ada yang terlewat? Yuk di cek lagi tahapannya. Bisa juga cek video tutorial dibawah ini kalau belum jelas.

Tutorial ini sengaja saya buat satu – persatu daripada saya memberikan dalam bentul XML yang siap di download. Karena sistem template blogger terbaru (Desember 2013) tidak lagi menyimpan widget yang lama. Jadi begitu mengupload template baru maka widget yang sudah ada akan menjadi hilang 🙂

Warna-warna tidak terikat dengan hanya hitam putih saja. Tapi bisa dikreasikan dengan warna favorit loh. caranya dengan mengganti kode warna #FFFFFF dengan warna-warna pilihan.

Mungkin banyak yang bertanya, kok saya ngga menulis tentang slide show, drop down menu dll yang kelihatannya ribet. Begini, tutorial itu cukup banyak beredar menurut saya. Dan karena memakai kode js sebagai resource, saya ngga mau menggunakan resources milik orang lain. Jadi selama ini saya hanya memakainya untuk klien saja. Dan itupun setelah saya host ditempat sendiri jadi tidak menebeng orang lain. Takutnya server lagi down atau ngga bisa diakses jadi saya membatasi dan maap belum bisa dipakai secara gratis ^^.

Jadi sedikit bersabar yaa kalau mau ganti template ^^. Selamat libur akhir tahun yaa…

Advertisements

80 thoughts on “Desain Blogspot Simple – Hitam/Putih

  1. Mak Shinta, salam silaturahmi … saya baru pertama kesini. Eh dapet tutorial yang cihui. Lama gak otak-atik html, saya malah jadi ‘kriting’ hihi … tapi jadi inget tahun2 lalu waktu masih asik otak-atik. Tutorial disini kayaknya lebih asik, soalnya ada videonya. Oke, makasih sekali lagi ya, maak …

  2. makasih mak mau saya coba yaaaaa

    satu lagi nanya nya 😀

    cara rubah nama saya di sebelah mana ya untuk FB twitter dan lain lain ??

    apa kata “ID’ ?

  3. Pingback: Kode Warna untuk Blog
  4. Pingback: Kode Warna untuk Blog
      1. Mak, sudah aku applied ke blogku.

        Tapi kayanya ada yg salah. Ketika preview di “advanced”, font untuk judul blognya udah oke. tapi pas di save dan di view blog. Blognya kok masih pakai font defaults ya.

        Saya sudah mengikuti semua langkahnya, Mak

        Mohon pencerahannya. Makasih, Mak

  5. Manis, rapi, dan simpel, i like it. Saya ijin pake template nya ya mba. Oh iya mau tanya kalau untuk menghilangkan background di tanggalnya saja gimana y mba, tapi bakcground latar gadget gak hilang…

    1. bagian css ditambahkan kode berikut mba :

      .date-header {
      background:none;
      }

      jangan lupa ke tingkat lanjut/advanced -> header tanggal -> warna text dirubah #333333 supaya kelihatan. Karena tanggal disetting warnanya menjadi #fff/putih

      silahkan dicoba yaa

  6. Mbak, bisa ga ya sosial medianya diganti warnanya?
    Saya punya tutorial buat sosial media, tapi kok ya ikonnya satu-satu, ga seperti yang Mbak Shinta buat. Itu gimana buatnya ya? *ijin minta ilmu*

    Sekaligus mau minta ijin dimodifikasi untuk blog saya, Mbak.

    Terima kasih sebelumnya.

    1. Hehehe social media icons ini namanya CSS Sprites mak. Jadi untuk menghemat kecepatan blog dibuat satu gambar. Ini ada tekniknya tersendiri. Kapan-kapan saya share caranya yaa

  7. Wuuuuiihh.., komentarnya udah panjang aja Mak Shinta cantik. Kangen KEB Online Class. Sejak gmail merubah formatnya, belum posting blog lagi. Biasa masuk via email.

    Ha ha ha.., ketahuan banget gapteknya ya.

    Sampai sekarang belum berhasil kasih bingkai cantik di sekeliling blog. Sering terkendala jaringan lemot.

    Nanti utak-atik lagi ah, di My Sample Blog. Semoga masih mau nengok blog saya yang sederhana, Mak Shinta.:)

    http://devynadyaaulina.blogspot.com

    http://devynadyaaulina2.blogspot.com

  8. Halo mbak shinta, aku sudah nyoba mempercantik blogku dengan resep mbak hehe dan seneng banget soalnya bisa. Walaupun awalnya saya pusing dengan rumus html itu. Tapi setelah tak otak atik sesuai kebutuhan jadi juga tampilan blog minimalis idaman saya hihihi. makasih sharingnya mbak.

    1. silahkan pasang ini di css paling bawah yaa :

      h3.post-title {
      font: normal normal 22px ‘Trebuchet MS’,Trebuchet,Verdana,sans-serif;
      margin: .75em 0 0;
      text-align: center;
      }

  9. Oiya mbak, maaf ngrepotin lagi, kok habis saya pake tampilan baru tersebut, saya tidak bisa bales komen yaa?
    mohon banget pencerahannya. Makasih sebelumnya mbak 🙂

  10. Setting komentarnya harus dalam posisi tersemat
    bisa ke setelan -> pos dan komentar -> lokasi komentar -> tersemat.

    aku lihat blognya settingannya halaman penuh ^^

    1. yang bagian EDIT TAB MENU mak. Disitu ada tulisan Lato bisa diganti sama font yang mak ety mau. Tapi sebelumnya jangan lupa script fontnya di ganti dulu ya supaya fontnya berubah.

  11. salam kenal mba shinta ries. Terimakasih udah share tentang desain simple ini ya, akhirnya saya udah berhasil menerapkan desainnya di blog saya dengan beberapa modifikasi, makasih ya mak :)) blog nya udah ditempel jadinya kaya gini…

    yulrachmawati.blogspot.com :))))

  12. mau tanya dong mbak.
    cara menambahkan view post (artikel dilihat berapa kali) pada blogspot bagaimana ya cz saya cari untuk JS nya belum ketemu.

  13. Makasih mak mau saya coba nih mak . Izin ya mak .
    Oh ya mak . Saya mau nanya nih mak . Saya kan pakai logo header . Tapi header nya di kiri . Gimana cara membuat nya supaya di tengah mak . Maklum mak saya newbie hehehhehe

  14. Wah bagus banget mbak jadinya blog saya berkat tulisan di blog ini. terimakasih banyak ya mbak sudah mau berbagi! semoga selalu diberkahi kebahagiaan didalam hidup!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s