tutorial lanjutt

Cursor Comel Untuk Blog

Dah jemu dengan bentuk cursor biasa? Terdapat pelbagai cursor comel yang korang boleh pilih sebenarnya. Contoh seperti di bawah :

Caranya :
1) Pergi ke sini
2) Pilih cursor dan copy kod
3) Pergi ke akaun blogger korang, klik Dashboard >> Design >> Add A Gadget >> HTML / Javascript
4) Paste kod cursor tadi di ruangan HTML / Javascript
5) Klik Save dan lihat hasilnya

Button Like Facebook Pada Sidebar Blog

Button like ini boleh diletakkan untuk anda mengetahui berapa banyak like yang anda dapat untuk blog anda atau apa sahaja topik yang ingin ajukan pada button like tersebut .

Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://url-bloganda.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>

Nota : Gantikan perkataan yang dihighligtkan merah di atas dengan url blog anda. Letakkan topik yang ingin anda ajukan pada ruang title

4) Save dan lihat hasilnya.

Salji Dalam Blog

Inginkan suasana blog yang bersalji? Sila ikuti tutorial di bawah:

1) Login akaun blogger > Dashboard > Design > Add A Gadget > HTML/Javascript

2) Copy paste kod salji berikut ke dalam ruangan HTML/Javascript tadi

Salji putih:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowwhite.js"></script>

Salji pink:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowred.js"></script>

Salji purple:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowpurple.js"></script>

Salji biru:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowblue.js"></script>

Salji hitam:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowblack.js"></script>

3) Save dan lihat hasilnya. Selamat mencuba! :)

* Untuk menjadikan salji muncul penuh dalam blog, drag element html ke bahagian header.

Menu Horizontal Untuk Blog

Disamping menampakkan kelainan pada rupa blog anda, dengan adanya menu horizontal ini, blog akan lebih mudah di explore oleh pelawat. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod Menu Horizontal pada ruang Html / Javascript tadi.

<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>

# - url untuk setiap menu ( cth: http://jombinabelog.blogspot.com/2012/01/menu-horizontal-pada-blog.html)
Link 1 - 7 - nama menu yang korang nak letak ( cth home, about me, contact dll)


* Terdapat 9 pilihan style menu horizontal untuk anda pilih. Just copy kod yang disediakan:

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcW-5LIu-ayuILuK0_lpa2kfXi3sEQIWlPV_FjnJPxTaKCU1D2VzEshndYYiiKaMW8_Y3TnSmooPEq_O_qtOrrdTMeN3NF7I-SkL70XtveDEtmcU6RDYXOJmi79hvdeNSOjAaQzOcYFI/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVxZ4NxtWSPeQ67P4FmI740LwaipnjKyQACSduh7QET8_r8EP_YdUzSrZMY3S0-DAetzGF3o-uqYgzs29l-2lZXL2ooXk_-cjyAsH3QhKntWpij8SgV4vpT9yzkv3px8QtrgzlbW-r7E/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXblQMm5BWrXTC7IABK39O6ltwt9hh3IWry2aIJX05QuZZa9gQ0IwcDi2lGbdMEx3G86LZrX8YOcTl-XQQb98tSfousyRSPjn-72Zk8bU2VYSL9yaka5NDUZIzub4ViR3VBp-4cXfGos/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNfvn8zPPHrUf9UBOfPQPTkAQBq5U7OkZiw8U97n8cFlBfIyLG4hjW6m23mfXhj_30E23qBMX18PEtIAPtcaK3GMs57h1Z2CWrYWdOuIlHsglDeMN51WX9wFkeJRhbIIAXr635xIbJccc/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbuwAO9HiejyFNDyL6tO9R5tW4fDD5v7dDOpIby36_Cf0Rf3rK6oXZuQzrDxa7NHgZ7uG_KpKQh6Jnq9cC0jk28w5iLF9NkC5LkSi4QUnSa3pvKXCZq1opkX-28NdXt0Y8xxcdeHrYOAQ/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQurQ4VMjuHLa3_ZHoPDvEwJbNHUDsYxWu_oWgxzaXOPuzWsOfONOa7fkfm8-QPv9IJJz2pOqNmmoGiHZFwxAoTHgHYTq4PnJI8GDyFM5V5BJlctqJbH3EG2HL-L-__QH9gSoX5JGKPM/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>





<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3V4WGzmT0IXtxwomI-B_iADrU9ClkI9iFhyiqWOwYCgSu78GfJtHiKGmBrNbxTOruD_3I6csQP5Oaf-wu9nbnOP4SFy-wS4re1PWg7koG4XVWQMCS6630xM7E8Ndz1CcfhGi6Vkls2y4/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8mHzNjslovQiMIgo9_RyBi3k76_WJrOGTzJ4yvf3WtoUsjvQ1L243Sy7lfBXCK46Yz84zy607I5j2VhyphenhyphenLU05RVUkS-n6nwUojR4GkDZUwc2dqKTTOknsCndcDOUgKrSuJ-JFBkHb4LKY/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO5ivj1tZZZc6NAvbmb9OnMkJjOlQt-KJUlHFQrXB9QlqS4iVXL1ctsM_TtdJbxSBARxjHZFB45xIP3kxni5SEml3wIpuO_CE5kg9uy_GKaiwQSZjaATDF0T1iHZvxP28yrRRGLGS2uts/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd447X9sldknVilb-sEUd_ol3Sg4-qgwCyx0JM_fN7D0TUNePIgwTjk3bbXb97xKu-qtkhT2_BL39BLMmo6dVh4yUZDC_5rsBQs2kLR6lXyMBoSUPXQFDMUMTLDrqpAdo33K6klSJXXeQ/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB-mQxXSYieeygnrbh__dZa5Fc0XXqpwYjBbDKx0Mq-lvoHQZyeKPKzg70zRyfseUl2qHOeimovF7__C2CIiexjkliP1KxcjFHDKS45dX6fqgGtXwK0rU99BReH-9E2w5r3pc9d6pgVP0/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5shoyLldnddssRy_kWFEBGAPE51TQ8YQ0ewdJtLrCwt51Im1phX1Wu91cxePrckf-cVFvbtYZ23fzU9dGqz5QzYRnTiSD-vVtIbpXHulRvc1bcLIAXyblIvThT9judSW2rKXRzPz_aSw/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgEXnDmezHnBdOFb18SuhtnnYABc30Q8CcbYrk0F8knsGuKdPEuvqxson67mEIqBpk9lLumAyCSgrASLAI8iRfnYS_-3GF4ZzGz3ziIXtzwvCS-jmMbj8foPXvfjViXFhNjESHmdNNeo/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDVXkvK5rlotRpdbuK0WUwQIAsbaF760dVMo1PvjD-kxLzGAuSprANrcbjmqtmip7TGDz2cx7iIJA1Tk0-xpX4wj6QXLKdm-cil-XgM82JYr39ESeBPJKIRQa0tWNcPvqNb6ZF0VD2F8/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm5YOTK7Qhyphenhyphenx56ohEBN4ewdeYL4_J0p8ENw-etabDZnVmtkp5Q9XjzCsgxIr7D11A1n6W7r6ZO_aPxrdi6dEomyDDwgHtmkm3PTuEZ4EfdO-sAinOGW1qgNmDJ-3uWZamG9PFf3TkCcNQ/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"><ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

4) Dah selesai klik save dan lihat hasilnya.

Semogaa Beramanfaat :D
sumber : jombinabelog.blogspot.com/

tutorial tuee

Back To Top Button

Blogger biasanya menggunakan button "back to top" untuk memudahkan pelawat jump ke bahagian atas blog semula tanpa perlu scroll tepi bar. Button ini sesuai diletakkan pada blog yang biasanya mempunyai entry yang panjang ditambah pula dengan komen yang banyak.

Berikut adalah tutorial untuk meletakkan button "Back To Top" dalam blog.

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar button"></a>

Nota: pada url gambar button dalam kod di atas, gantikan dengan url button pilihan anda. Di bawah ada disediakan pelbagai jenis button "back to top" untuk anda pilih. Just copy url dan letakkan pada url gambar button.

Contoh:

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="http://img205.imageshack.us/img205/7824/74211510.gif"></a>

Url button (Selain dari button-button ini, terdapat banyak lagi pilihan button yang boleh anda cari, search je  dekat google)

http://img205.imageshack.us/img205/7824/74211510.gif

http://img196.imageshack.us/img196/6670/49238758.png

http://img266.imageshack.us/img266/3325/81258407.png

http://img13.imageshack.us/img13/5533/20610818.png

http://img543.imageshack.us/img543/5941/62667078.png

http://img267.imageshack.us/img267/7242/36935517.png

http://img857.imageshack.us/img857/4428/12543870.png

http://img17.imageshack.us/img17/3190/51122514.png

http://img31.imageshack.us/img31/9105/57461251.png

http://img811.imageshack.us/img811/5130/38543106.png

http://img26.imageshack.us/img26/2135/83340054.png

http://img859.imageshack.us/img859/7859/17455371.png

http://img842.imageshack.us/img842/6354/35069921.png

http://img853.imageshack.us/img853/6601/14069169.png

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/12.gif

4) Save dan lihat hasilnya.

Selamat mencooba!! :)


sumber : http://jombinabelog.blogspot.com/2011/12/

Belajar Photoshop

Tehnik Dasar Edit Foto yang biasa dipake Fotografer

Ada banyak cara yang dipake oleh fotografer untuk memperindah foto hasil jepretannya salah satu nya adalah mengganti background supaya sesuai dengan skenario yang dirancang nya. Atau ada juga yang sudah sesuai skenario baik itu background, pencahayaan atau pose nya , ini sih tinggal edit gelap terang dan tajam lembut nya saja.

Tutorial sekarang ini pake 3 gambar, background, objek dan pernak pernik nya. .

Cara mendownload gambar-gambar diatas, klik untuk memperbesar > klik kanan save image

Pertama buka gambar Objek nya :


Seleksi Objek menggunakan pen tool


Kalo udah semua terseleksi, Klik kanan > make selection = 0


Hasilnya akan seperti ini :


Sekarang buka Background nya ( cari yang sesuai dengan dimensi foto )


Drag Foto objek yang udah terseleksi tadi ke background dan atur posisinya.

Si objek keliatan ngambang dan gak napak ke tanah..
Buat layer baru di bawah layer Objek. Gunakan Brush warna hitam untuk membuat bayangan.

Sekarang gak keliatan ngambang kan ?
Buat layer baru lagi di atas layer bayangan, ini untuk membuat bayangan yang gak terlalu gelap.
Brush dengan warna hitam lagi di sekitar tanah, Opacity di set sekitar 50%.

Untuk memperhalus potongan atau hasil crop objek, gunakan smudge tool Strength 40% , soft round.
Drag pelan-pelan disekitar tepi objek yang kurang bagus.

Kalo udah keliatan ok, sekarang kita sesuaikan warna objek dengan background nya.
Masih di layer Objek. Klik Image >Adjustment > Hue/saturation, kurangi warna nya.

Klik Image > Adjustment > Color Balance
bagian ini  nanti disesuaikan dengan background nya.. untuk background yang kita pake sekarang, settingan nya seperti ini :




Buat layer baru di bawah layer objek. Brush dengan warna putih disekitar objek.


Klik FILTER > Blur > Gaussian Blur


Set Opacity menjadi 20%

Buka File Stars.jpg, Drag ke belakang layer objek dan atur posisinya.


Klik Image > Adjustment > Color balance


Ganti Layer Effect menjadi Screen dan Set Opacity menjadi 50%


Hasilnya :



Selamat mencoba ..Semoga Bermanfaat
sumber : ilmuphotoshop.com