Supado-z

Tampilkan postingan dengan label pada. Tampilkan semua postingan

Kamis, 20 Februari 2014

Efek Cloud Pada Background Foto

Salah satu efek yang ada pada Adobe Photoshop adalah Efek Cloud, Efek ini biasanya untuk membuat sebuah gambar background yang abstrak seperti pada Studio Foto.

Langkah pembuatan efek cloud pada background foto dengan Photoshop:

Pertama:
Bukalah sebuah foto dengan Photoshop. Pada foto tersebut, buatlah sebuah seleksi pada bagian model fotonya saja. (seleksi ini dapat Anda gunakan dengan brush tool, pen tool maupun yang paling sederhana dengan Lasso tool.

Kedua:
Setelah foto diseleksi, kemudian pilih menu Edit > Copy, kemudian Edit > Paste.
Bisa juga dengan melakukan Ctrl + J.

Ketiga:
Pilih / aktifkan layer background.

Kemudian tekan tombol D pada keyboard satu kali, ini untuk mereset warna background dan foreground menjadi hitam putih.
Kemudian pilih menu Filter lalu Render dan pilih Clouds. Akan didapati foto menjadi seperti gambar berikut ini.

Maka hasilnya seperti berikut:

Keempat:
Pilih menu Filter lalu Render dan pilih Lighting Effects. Pada bagian style-nya dipilih Soft Omni.

Pengaturan yang lain pada kotak dialog Lighting Effects ini bisa diatur sendiri sesuai selera Anda.

Kelima:
Masih pada layer background yang sudah diberi efek tadi, sekarang ubah warnanya dengan Image > Adjustment > Hue/Saturation. Pastikan diberi tanda cek pada Colorize, kemudian ubah nilai Hue sesuai dengan keinginan.

Berikut ini gambar yang sudah diberi efek cloud pada background-nya. Efek ini sering digunakan untuk membuat latar belakang pada foto di Studio Foto.

Selamat mencoba.....

ReadFull Article ..

Sabtu, 07 Desember 2013

Menambahkan Kolom Elemen Halaman Baru Pada Sidebar

Setelah mempublikasikan template perdana yang saya hasilkan dari belajar otodidak desain template, beberapa teman minta diajarkan cara membuat template. maka pada postingan kali ini kita akan belajar lagi bagaimana menambahkan elemen baru pada sidebar atau membuat template dua kolom menjadi tiga kolom dengan dua kolom pada sidebar kanan.
Nah langsung saja seperti biasa template yang saya jadikan tempat eksperimen kecil adalah template default minima.
Screenshot pada elemen halaman template minima seperti berikut:
preview elemen halaman minima

Hal pertama yang perlu kita ketahui, template memiliki tiga elemen yaitu elemen header, outer dan footer. Untuk elemen outer terbagi lagi menjadi dua, yaitu elemen main untuk postingan dan elemen sidebar untuk menambahkan ragam widget.
Untuk menambahkan kolom atau elemen halaman pada sidebar kanan template blogger ikuti langkah-langkah berikut:

1. Tentukan dahulu lebar kolom atau elemen baru yang ingin kita tambahkan, misalnya lebarnya 220px agar nantinya elemen yang kita tambahkan tidak melorot maka kita perlu menambahkan pula lebar elemen header, outer dan footer dengan jumlah lebar sidebar baru yang ingin kita tambahkan.
Pada template minima lebar , ketiga elemen halaman tersebutmasing-masing 660px ditambahkan dengan 220px jadinya 880px.
Untuk merubah angka masing-masing elemen halaman tersebut Pada dasbor klik tata letak=> edit HTML
cari kode berikut:

/* Header
------------------------------------------ */
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ganti lebar/ widht menjadi seperti berikut:
membuat template tiga kolom

Selanjutnya cari kode berikut:

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Ganti angka widht jadi seperti berikut:
membuat template tiga kolom

Untuk merubah lebar footer cari kode berikut:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

jadi seperti berikut:
membuat template tiga kolom

2. Sekarang kita buat kode CSS untuk sidebar baru seperti berikut:

#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

3. Cari kode berikut :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

4. Tambahkan kode elemen baru yang akan kita tambahkan dibawah kode diatas, sehingga kodenya menjadi seperti berikut:

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

5. Berikutnya adalah menambahkan kode HTML untuk elemen sidebar baru tersebut. Untuk kode HTML sidebar sebelum penambahan kolom adalah seperti ini:

<div id=sidebar-wrapper>
<b:section class=sidebar id=sidebar preferred=yes>
</b:section>
</div>

6. Untuk kode HTML sidebar baru seperti berikut:

<div id=sidebarbaru-wrapper>
<b:section class=sidebar id=sidebarbaru preferred=yes/>
</div>

7. Selanjutnya adalah menyatukan kode sidebar baru tersebut pada kode HTML sidebar yang sebelumnya, sehingga kodenya menjadi seperti ini:

<div id=sidebar-wrapper>
<b:section class=sidebar id=sidebar preferred=yes>
<b:widget id=Profile1 locked=false title=Mengenai Saya type=Profile/>
<b:widget id=BlogArchive1 locked=false title=Arsip Blog type=BlogArchive/>
</b:section>
</div>
<div id=sidebarbaru-wrapper>
<b:section class=sidebar id=sidebarbaru preferred=yes/>
</div>

8. Selesai. jangan lupa simpan template.
Sekarang untuk melihat hasilnya klik elemen halaman kalau dah ada tambahan kolom baru pada sidebar seperti screenshot berikut berarti berhasil:
menambahkan kolom halaman baru pada sidebar

menambahkan kolom halaman baru pada sidebar

Selamat mencoba! Semoga bermanfaat!
InsyaAllah postingan berikutnya cara menambahkan elemen halaman diatas dua kolom untuk menjawab pertanyaan seorang teman

ReadFull Article ..

Jumat, 08 November 2013

Membuat search engine pada blog

Tentu anda sudah tahu apa itu Search Engine Search Engine tidak boleh dipisahkan dalam dunia internet. Dengan ~~Search Engine~~ kita boleh mencari tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita masukkan Berikut adalah bagaimana caranya membuat search engine di blogger . Caranya sangat mudah:

1. Login ke blogger klik Design,pilih page elements >kemudian pilih Add Gadget
Untuk dashboard blogger baru - klik pada layout dan pilih add a gadget
2. kemudian paparan Add a gadget muncul-pilih basic.Dalam senarai tersebut pilih HTML/Javascript kemudian copy/paste script/kod berikut ini di dalam ruangan content.



 <form action="http://namabloganda.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti namabloganda dengan nama blog Anda. Angka 30 menunjukkan panjang kotak (text box)search tersebut>kemudian jangan lupa klik butang save

ReadFull Article ..

Kamis, 07 November 2013

Cara Membuat Persentase pada Scrollbar Blog

Tutorial Belajar Blog - Cara Membuat Persentase pada Scrollbar Blog - Melanjutkan tutorial sebelumnya yaitu Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog apabila pada tutorial sebelumnya membuat scroll lebih keren akan tetapi tutorial ini untuk mencoba menerapkan persentase pada scrollbar.

Sebelumnya sempat bingung asal muasal siapa yang pertama membuat tutorial tentang persentase scroll pada blog, sebab pada saat saya ( Mas Oktri ) search di mbah google ternyata banyak yang menuju ke bloggertut, semoga pembuat pertama tutorial ini dapat berkomentar supaya saya bisa tidak penasaran karena banyak blog yang share tentang tips ini.

Demo persentase pada scroll blog

Untuk membuatnya silahkan ikuti langkah-langkahnya :

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

Biasakan untuk membackup template sebelum melakukan editing pada template blog.

Langkah 2 : Simpan kode ini di bawah </head>

<div id=scroll></div>

Langkah 3 : Simpan JavaScript ini di atas </body>

<script type=text/javascript>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $(#scroll).height() / 2;
    $(#scroll)
        .css(top, distance)
        .text( ( + Math.round(progress * 100) + %))
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $(#scroll).fadeOut();
    }, 1500);
});
//]]>
</script>

Simpan Template.

Keterangan :
untuk mengganti warna background, cari background-color: #2187e7,lalu ganti warnanya, untuk mengatur jarak Scroolba Persentase dengan Scrollbar cari kode right: 20px; lalu ganti, untuk menggantinya kode 20px ganti menjadi 10px, 20px, dan selanjutnya, dan yang terakhir untuk mengubah warna teks cari kode color: #fff; dan ganti kode warna biru muda tersebut dengan kode warna yang kalian inginkan.

Demikian Tutorial persentase di samping scrollbar Semoga Bermanfaat

ReadFull Article ..

Minggu, 20 Oktober 2013

Membuat Drop Cap pada blong

Drop Cap adalah trick membuat huruf pertama pada awal artikel berupa huruf besar.
Langkah-langkahnya :

Login di blogger.com
Masuk ke menu Layout atau Tata Letak, lalu pilih Edit HTML
Cari skrip seperti di bawah ini: .post {margin:0 0 ...;}
Ketik kode HTML di bawahnya .dropcaps { float:left; color:red; font-size:70px; line head:100px: padding-top:25px; padding-right:2px; }
Lalu klik SAVE TEMPLATE

Setelah itu, di dalam postingan, di depan huruf yang ingin diperbesar, ketik: <span class="dropcaps">Huruf yang di perbesar</span> Setelah dipublish lihat hasilnya, Selamat mencoba.

ReadFull Article ..