Edit Template Minima Blogger dengan Grid System : Video Tutorial

Video Tutorial Edit Template Minima Blogger ke Tiga ini lebih khusus menjelaskan bagaimana menerapkan Grid System di Template Minima.

Grid System yang Digunakan

Pada template saya yang berjudul Blogger Template dengan Grid System tersebut menggunakan 960 Grid System. Tapi pada video tutorial ini tidak menggunakan 960 Grid System, tetapi menggunakan 'CSS Grid Framework' The 1KB CSS Grid.

Apa beda diantara keduanya? Bedanya, "The 1KB CSS Grid", seperti namanya, menggunakan source yang lebih kecil, yaitu sebesar 1KB. Lebih kecil dibanding 960 Grid System dan Blue Print.

Jadi menurut saya 'Blogger Template' lebih tepat menggunakan 'Grid System' dengan The 1KB CSS Grid.

Materi Video Tutorial Edit Template Minima dengan Grid

1. Penjelasan tentang tool 'The 1KB CSS Grid'
2. Penjelasan file 'The 1KB CSS Grid' dan penggunaanya
3. Penerapan 'The 1KB CSS Grid' di 'Template Minima Blogger'
4. Mambuat 2 Kolom di Sidebar dan 4 Kolom di Footer dengan Grid.

Demo dan Download: "Template Minima Blogger dengan Grid System" setelah hasil pengembangan.

---
Video Sebelumnya:

1. Video Tutorial-1: Edit Template Minima Blogger
2. Video Tutorial-2: Edit Template Minima Blogger

Read More

Video Tutorial -2: Edit Template Minima Blogger

Video tutorial ke dua ini masih seputar 'edit template minima blogger', dan video yang berdurasi 11:57 menit ini untuk melengkapi "Main Simpel - Free Blogger Template", yaitu: bagaimana membuat tampilan pada 'index' atau 'fontpage' hanya sekedar menampilkan judul, post footer dan tanggal, serta penggunaan float: left dan float:right.

lihat juga: video tutorial-1: edit template minima blogger

Read More

Edit Template Minima Blogger : Video Tutorial

Kali ini saya mencoba membuat video tutorial untuk kali pertamanya, dan video tutorial ini sangat dasar sekali, yaitu bagaimana mengedit template minima bawaan blogger.

Pada video tutorial ini saya mencoba mengedit 'template minima' bawaan 'blogger', pada:

- lebar template,
- warna,
- membuat 3 kolom dibagian bawah,
- dan terakhir menu navigasi.

Yup ini dasar sekali, tetapi disini saya juga mencoba menggunakan firefox add-ons, yaitu 'firebug', sebagai alat bantu untuk mengedit template minima ini, jadi anda dapat melihat peran 'firebug' yang sangat membantu dalam mengedit template.

Syarat menonton video tutorial 'edit template minima blogger' ini:

1. Keraskan volume speaker anda, sekeras-kerasnya, soalnya suara saya kecil, karena ngomongnya berbisik.
2. Nontonnya mesti 'fullscreen', biar terlihat jelas tulisannya.
3. Ketika memencet play, sebaiknya di pause dulu beberapa menit, baru di play kembali, supaya lancar jalannnya.
4. Sabar, soalnya durasinya 48:52 menit :)

Silahkan menonton video tutorial ini, semoga tidak jenuh.

sip terima kasih... semoga video tutorial ini dapat membantu anda untuk membuat atau mengedit template sendiri.

---
lihat juga:

1. Video Tutorial -2: Edit Template Minima Blogger
2. Edit Template Minima Blogger dengan Grid System : Video Tutorial

Read More

Video Tutorial Konversi Photoshop ke HTML - NET TUTS+

Berikut ini video yang sangat menarik untuk dipelajari bagi kita yang ingin membuat sebuah website. Video ini membimbing kita bagaimana mengkonversi desain web yang telah kita buat di photoshop (PSD) yang kemudian kita terjemahkan ke HTML atau XHTML.

Jika anda tertarik, berikut ini Video tutorial konversi Photoshop ke HTML dari NET TUTS+.

How to Convert a PSD to XHTML

Part 1: Slicing the PSD and Creating the XHTML



Part 2: CSS



Part 3: Implementing a Bit of Javascript



video tutorial terkait cara membuat web desain dari NET TUTS + :
- Converting a Design From PSD to HTML
- Slice and Dice that PSD

lihat juga:
- Video tutorial membangun sebuah situs atau web
- Edit template Minima Blogger: Video Tutorial

Read More

Video Tutorial Membangun sebuah Blog / Web

Jika anda mulai tertarik belajar membangun sebuah template blog atau web sendiri, berikut ini video 'tutorial dasar' yang menarik dari CSS-Trick. Video tutorial ini sangat baik dalam menerangkan tahapan pembuatan sebuah template, baik itu hubungan antara CSS, HTML dan Image yang diperoleh dari Photoshop. Lewat video ini saya belajar banyak.

Video Teknik dasar HMTL dan CSS dalam membangun Situs




HTML & CSS - The VERY Basics
Running time: 32:15
As the title suggests, this video is the VERY basics of what HTML and CSS is, for the absolute beginner.

Video tutorial konvesi desain photoshop ke dalam situs



1: Converting a Photoshop Mockup (part 1 of 3)
Running time: 10:10
In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time.

2: Converting a Photoshop Mockup (part 2 of 3)
Running time: 17:10
In part two of this series on converting a Photoshop mockup to an HTML/CSS Website I continue on with the header/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some “filler” content for the main area before I end with building the footer.

3: Converting a Photoshop Mockup (part 3 of 3)
Running time: 31:53
I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML/CSS website. This one focuses on the main content area. I create the the columns including the “quick links” section. I also talk a little bit about typography.



1: Converting a Photoshop Mockup: Part Two, Episode One
Running time: 22:03
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion techniques so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!

2: Converting a Photoshop Mockup: Part Two, Episode Two
Running time: 25:45
In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and “on” states for the tabs. We then create the main content area and footer.

3: Converting a Photoshop Mockup: Part Two, Episode Three
Running time: 23:58
We wrap up the mockup conversion here in Episode Three. We create the “article area” and the “sidebar” (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.

Read More

Retouching - Video Tutorial Photoshop

Video Tutorial Photoshop ini membimbing kita untuk dapat memperbaiki atau "Retouching" beberapa bagian dari foto yang kita miliki, baik itu bagian wajah, mulut, mata dan sebagainya.

Berikut ini video tutorial photoshop yang sangat menarik:


Professional Portrait Retouching - Comparing Skin Softening Techniques from Bo Boswell on Vimeo.


Professional Photographic Retouching Tutorial (40Mins, Start-To-Finish) from Youssef Sarhan on Vimeo.


Professional Photo-Retouching Tutorial: Hair from Youssef Sarhan on Vimeo.


Portrait Retouching- Eyes from Sam Scholes on Vimeo.

Read More