cara memasang musik/lagu di blog~

cara memasang musik/lagu di blog~

Label: Tips blog Diposkan oleh Jefry Defacer Kamis, 21 Maret 2013

Cara Memasang Musik/Lagu Berputar Secara Otomatis Saat Dibuka di Blog - Sebuah blog akan terasa lebih hidup dengan adanya musik dan pengunjungpun akan lebih betah berada pada blog kita karena mereka merasa terhibur dengan adanya musik, tapi bagaimana caranya memasang musik pada sebuah blog? Mungkin bagi bloger masih ada yang belum mengerti cara pasang background lagu diblog kesayangannya. Sebenarnya memasang musik pada sebuah blog sangatlah mudah dan tidak memerlukan waktu yang lama, cukup beberapa menit sebuah musik dan player-nya akan terpasang.

Apakah anda tertarik pasang musik/lagu di blog anda ? Kalau “Iya” berikut beberapa cara yang bisa anda lakukan berdasar coba-coba saya dengan blog ini "dimana menurut saya sangat ringan untuk loading sebuah Blog", walaupun saya enggak pakai cara ini, soalnya kalau dirumah takut mberebeki tetangga-tetangga saya.

A. Musik/Lagu akan autoplay bila blog kita dibuka

1. Masuk ke http://www.divine-music.info/
2. Disitu akan ada menu berbagai macam jenis lagu pilih, klik salah satu yang diinginkan / cari lagu kesukaan kamu.
3. Setelah itu akan muncul tampilan para penyanyinya pilih sesuai kesukaan anda dan pilih juga lagu yang akan dimainkan.
4. Disitu akan ada kode EMBEDED copy kode itu dan masukkan ke kode html blog anda [Udah tau kan cara nya]
5. Selesai dan dengarkan hasilnya.

B. User memilih mau memainkan lagu atau tidak

1. Masuk ke http://musik-live.net
2. Pilihan tampilan menu Skin Mp3 Player, setelah menemukan tampilan yang sesuai dengan keinginan lalu copy dan paste kode yang diberikan dibawah tampilan musik player tersebut pada sidebar.
3. Selesai dan lihat hasilnya

Jika lebar dan tinggi dari player musik tersebut tidak sesuai dengan sidebar, kita tinggal merubah nilai Width dan Height nya saja. 

C. Memasang sendiri lagu sesuai dengan keinginan kita

1. Masuk ke http://4shared.com mestinya kita register dulu ya.
2. Selesai register login dan upload lagu kesayangan kita.
3. Setelah itu centang file lagu kita dan klik kanan mouse pilih "berbagi pakai dan keamanan". Disitu akan muncul tab, pilih tab Pasang. Copy kode yang muncul dan masukkan ke blog kita.
4. Nikmati hasilnya.

Untuk cara ini menurut saya sangat lambat waktu loading buka situs kita, karena kita perlu file hosting 4shared, Tapi kalau mau nyoba ke blog kesayangan akan lebih baik, ilmu kan harus diaplikasikan.

Moga bermanfaat buat semua ya:D mampir lagi gan ^^ Thankss

Cara Memasang Iklan Animasi Bergerak di sudut blog

Cara Memasang Iklan Animasi Bergerak di sudut blog

Cara memasang Iklan Animasi di blog merupakan trik yang digunakan para blogger untuk memasang iklan yang ditampilkan dapat menarik pengunjung blog untuk klik. Trik ini ingin mencoba membahas bagimana iklan yang dipasang  selalu berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Pemasangan iklan tidak mutlak, bisa juga gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. Langkah-langkah untuk memasang iklan animasi sebagai berikut:

1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

CODE:

#iklan_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode </body>

CODE:

<div id="iklan_pojok">
<a href=http://belajarblog.blogspot.com>
<img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>

http://belajarblog.blogspot.com adalah link. ganti dengan link kamu.
"http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.
5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.

Cara Membuat Animasi Cursor Di blog

Cara Membuat Animasi Cursor Di blog

Bosen dengan tampilan cursor biasa di website atau di blogger ini disini saya berbagi cara membuat memasang animasi cursor keren buat percantik blogger atau website anda ada banyak macam-macam animasi cursor untuk diblog saya tinggal anda pilih sesuai selera anda atau anda sukai langsung saja caranya  :

Cara untuk tampilan blogger lama :
1.Login ke blogger anda
2. Pilih Rancangan
3.klik Tambah Gadget Html/JavaScript
4.Copy & paste kan kode html mouse yang diinginkan di bawah ini
5.Terakhir Simpan 

Cara untuk tampilan blogger baru :
1.Login ke blogger anda
2. Pilih Laman
3.Pilih Tata Letak
4.klik Tambah Gadget Html/JavaScript
5.Copy & paste kan kode html mouse yang diinginkan di bawah ini
6.Terakhir Simpan 

Spongebob

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-12/too1107.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="SpongeBob SquarePants"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="SpongeBob SquarePants" style="position:absolute; top: 0px; right: 0px;" /></a> 

Mr.Crab

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-12/too1104.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="SpongeBob SquarePants Mr. Krabs"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="SpongeBob SquarePants Mr. Krabs" style="position:absolute; top: 0px; right: 0px;" /></a>

Bird

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-9/peo1020.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Catching Fire"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Catching Fire" style="position:absolute; top: 0px; right: 0px;" /></a>

Mouse Pelangi

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-1/cur18.ani), url(http://cur.cursors-4u.net/cursors/cur-1/cur18.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Wavy Tail"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Wavy Tail" style="position:absolute; top: 0px; right: 0px;" /></a> 

Cartoon

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-15/gam1440.ani), url(http://cur.cursors-4u.net/games/gam-15/gam1440.gif), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Toad Jumping Up and Down"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Toad Jumping Up and Down" style="position:absolute; top: 0px; right: 0px;" /></a>

Fire Guitar

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-15/gam1440.ani), url(http://cur.cursors-4u.net/games/gam-15/gam1440.gif), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Toad Jumping Up and Down"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Toad Jumping Up and Down" style="position:absolute; top: 0px; right: 0px;" /></a>

Love

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-6/hol512.ani), url(http://cur.cursors-4u.net/holidays/hol-6/hol512.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Valentine's Day Pumping Heart"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Valentine's Day Pumping Heart" style="position:absolute; top: 0px; right: 0px;" /></a>

Peace

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/symbols/sym-8/sym714.ani), url(http://cur.cursors-4u.net/symbols/sym-8/sym714.gif), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Different Types Of Peace Symbol"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Different Types Of Peace Symbol" style="position:absolute; top: 0px; right: 0px;" /></a>

Angel

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-9/too917.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Cute Tinkerbell"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Tinkerbell" style="position:absolute; top: 0px; right: 0px;" /></a>

Icon Moon

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-10/cur945.ani), url(http://cur.cursors-4u.net/cursors/cur-10/cur945.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Batman Begins - Diagonal Resize 2"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Batman Begins - Diagonal Resize 2" style="position:absolute; top: 0px; right: 0px;" /></a>

vegeta dragon ball

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-7/ani634.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Vegeta - Dragonball Z 2"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Vegeta - Dragonball Z 2" style="position:absolute; top: 0px; right: 0px;" /></a> 

superman

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-8/too702.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Superman"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Superman" style="position:absolute; top: 0px; right: 0px;" /></a> 

samurai x

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-1/cloud_strife.ani), url(http://cur.cursors-4u.net/special/spe-1/cloud_strife.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Final Fantasy 7 Cloud Strife"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Final Fantasy 7 Cloud Strife" style="position:absolute; top: 0px; right: 0px;" /></a>

monkey

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-2/nat192.ani), url(http://cur.cursors-4u.net/nature/nat-2/nat192.png), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="Cute Rocking Baby Monkey"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Rocking Baby Monkey" style="position:absolute; top: 0px; right: 0px;" /></a>

I love her

 <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-5/spe445.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="I Love Her"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="I Love Her" style="position:absolute; top: 0px; right: 0px;" /></a> 

I love him

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-5/spe444.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="I Love Him"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="I Love Him" style="position:absolute; top: 0px; right: 0px;" /></a>

 


lihat hasilnya cursor animasi sudah ada di blogger anda

Selamat Mencoba & Semoga bermanfaat ,follow twitter aku & klik like fanspage programm komputer ya

Cara Menambahkan Kalender di Blog

Cara Menambahkan Kalender di Blog

32 Komentar

Cara Menambahkan Jam dan Kalender di Blog  - Setelah saya memposting tentang cara membuat jam di blog sekarang saya akan menshare sedikit ilmu, Blog itu ibarat rumah kita.. Sehingga jika blog kita hanya di isi artikel2 tanpa ada pernak-pernik ibarat rumah yang tanpa hiasan.. Alias seperti rumah hantu^^.. Kalau rumah kita seperti rumah hantu tentunya hanya sedikit orang yang sudi untuk mampir ke rumah kita ( bahkan mungkin ada yang menjauhi karena takut.

Rumah ( blog ) yang indah tentunya akan mempunyai daya tarik bagi yang mengunjunginya.. Jika rumah ( blog ) kita indah, tentunya akan membuat orang2 yang mengunjunginya betah untuk berlama2 di blog kita dan mungkin kelak akan kembali ke blog kita^^..

Salah satu cara untuk menambah keindahan blog kita adalah dengan memasang jam dan kalender.. Setiap rumah tentu pasti punya jam dan kalender, bahkan hp pun ada jam dan kalendernya.. Lalu bagaimana cara menambah jam dan kalender di Blog?? Mudah kok.. Berikut caranya:

-Untuk menambah kalender:
1. Silahkan kunjungi situs ini
2. Pilih kalender yang anda suka
3. Jika sudah copy code javascript kalender
4. Login ke blogger
5. Pilih tata letak kemudian tambah gadget
6. Pilih Html/Javascript
7. Paste code kalender tadi
8. Jreng.. Jadi deh^^

Sumber : http://jembersantri.blogspot.com/2013/01/cara-menambahkan-jam-dan-kalender-di-blog.html#ixzz2dTav36Ai
Follow us: jembersantri.blogspot.com on Facebook

Cara Mengganti Gambar Background Blog di Blogger/Blogspot

Cara Mengganti Gambar Background Blog di Blogger/Blogspot

Memperindah blog ternyata juga merupakan hal yang menyenangkan, karena kustomisasi blog memang sangat diperlukan agar blog tampak lebih personal dan unik. Nah salah satu cara membuat blog tampak beda dengan yang lain adalah dengan mengubah background blog. Untuk mengganti gambar background blog seperti yang diinginkan, berikut langkah-langkahnya:

(Sebelum anda mengganti warna/gambar background dengan gambar bakcground baru, pastkan  telah menemukan/memiliki gambar background dan menghosting-nya sendiri.

1. Masuk ke dashboard > Template

2. Klik Edit HTML

3. Arahkan dan klik kursor di dalam area template editor, lalu tekan Ctrl+F

4. Cari kode CSS ini: body{ dengan cara memasukkannya ke dalam kotak pencarian dan tekan enter.

    Atau bisa juga dengan mencari kode selengkapnya/menambahkan kode setelah body { seperti berikut:

   body{background-image: url(alamat url gambar anda);

5. Ganti alamat url gambar anda dengan alamat gambar background yang telah anda host.
6. Save template

Yang perlu diperhatikan adalah ukuran gambar anda, usahakan untuk tidak menggunakan gambar dengan byte yang besar, usahakan di  bawah 50 Kb, agar tidak membuat loading berat dan lama.
Gambar memiliki ukuran pixel yang berbeda-beda. Pastikan hasil gambar background blog anda penuh dari kiri ke kanan dan dari atas ke bawah. Untuk membuat gambar background penuh diperlukan pengulangan. Gunakan tag repeat (mengulang) ke kanan/samping: repeat-x, dan ke bawah: repeat-y. Berikut contoh untuk pengulangan ke kanan/samping::

body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg

);background-position:top left;background-repeat: repeat-x; ....dst}

agar gambar juga mengisi hingga ke bawah (hingga footer halaman), tambahkan repeat-y tepat disamping repeat-x. Contoh:

body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg

);background-position:top left;background-repeat: repeat-x repeat-y; ....dst}

Jika anda tidak ingin gambar anda berulang baik ke kiri atau ke bawah, cukup gunakan kode no-repeat. Contoh:

body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg

);background-position:top left;background-repeat: ; ....dst

Yap, sekian trik simpel mengenai

Membuat Recent Post dengan Disertai Thumbnail

Membuat Recent Post dengan Disertai Thumbnail

Membuat recent post sudah pernah kita pelajari, mulai dari menampilkan recent post yang hanya judul, dengan disertai ringkasan. Sekarang kita akan belajar untuk membuat recent post dengan disertai thumbnail (gambar Mini) dan juga jumlah komentar sehingga akan terlihat akan lebih menarik :)

Cara Membuat Recent Post dengan Disertai Thumbnail adalah, Login ke Blogger > Tata Letak > Tambah Gadget > pilih "HTML/Javascript". Setelah itu masukan kode berikut ini:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 245;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 100;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://kurniasepta.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Dan berikut ini beberapa kode yang harus dan bisa kita rubah.

boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth &amp; thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://kurniasepta.blogspot.com/ (Ubah sesuai URL blog anda sendiri)

Membuat Slide Recent Post

Membuat Slide Recent Post

Banyak cara untuk menampilkan recent post atau postingan terbaru. Di blog ini saja ada banyak tutorial atau pelajaran yang membahas tentang recent post. Coba ketik saja di search box "recent post".

Sekarang kita akan belajar menampilkan recent post lebih menarik lagi. Kita membuat slide recent post, yang akan disertai thumbnail, judul terbaru, tanggal dipublish dan jumlah komentar. Ya karena slide, berarti terus bergerak dan bergantian. Widget slide recent post ini cocok dipasang di sidebar. Demonya bisa dilihat di sini

Cara Membuat Slide Recent Post
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";
imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";
imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://kurniasepta.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Sebelum kita Simpan, berikut ini yang bisa kita ubah:

• 220 dan 208 adalah lebar widget.
•  numposts = 10; adalah banyaknya postingan yg ingin kita tampilkan
• Ganti http://kurniasepta.blogspot.com/ dengan URL blog kita sendiri.

5. Simpan jika sudah selesai.

Cara Mudah Membuat Slide Show Foto di Blog

Cara Mudah Membuat Slide Show Foto di Blog

Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar daripada tulisan.

Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>

5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.

Cara Membuat dan Memasang Jam Digital di Blog

Cara Membuat dan Memasang Jam Digital di Blog. Jam digital bisa kamu pasang di blog kamu dengan bantuan Clocklink. Jam digital bisa membuat tampilan blog kamu lebih keren dan menarik. Di dalam clocklink terdapat aneka macam pilihan bentuk widget jam digital yang bisa kamu pasang. Diantara pilihan dari jam digital yang bisa kamu pasang antara lain : Animal, animation, holiday, sports dan lain lain.

Tips-mudah-ngeblog akan langsung memberikan tutorial cara memasang jam digital di blog kamu semudah mungkin untuk dimengerti. Berikut ini langkah langkah Membuat dan Memasang Jam Digital di Blog.

1. Masuk website penyedia jam digital disini Clocklink.

2. Kamu akan masuk halaman website clocklink seperti pada gambar dibawah ini.

3. Kemudian saya akan memilih jam digital dengan kategory sport, maka akan tampil seperti dibawah ini

4. Pilih atau klik view html tag (dibawah pilihan jam digital)

5. Kemudian akan masuk persetujuan dari Clocklink (pilih tombol accept) seperti pada gambar dibawah ini

6. Mengatur warna, timezone dan ukuran dari jam digital pilihan anda.

Pada gambar diatas :

• pilih warna
• untuk timezone guankan GMT +07.00 untuk wilayah Indonesia
• kemudian copy script anda di blog

Membuat Disain Logo WINDOWS MEDIA PLAYER

Membuat Disain Logo Windows mendia player

Langkah - Langkahnya:

1. Buatlah 2 buah lingkaran dengan ELLIPSE TOOL (F7)


2. Setelah itu tekan CTRL + A (Select All)
Lalu tekan CTRL + G (Group)

3. Untuk Lebih memudahkan munculkan Grid, Caranya: pada Menu Utama pilih View - Grid, Kemudian buat 2 Kotak dengan Rectangle Tool (F6) sebagai bantuan memotong 3/4 bagian lingkaran


Sambli tekan dan tahan tombol Shift ---- Klik (Lingkaran - Kotak kanan - Kotak Bawah) lalu gunakan Metode Simplify
Hasilnya:


Kemudian hapus kedia kotak dengan tombol Delete
Nah hasilnya:


4. Buang bagian lingkaran dalam dengan cara membuat lingkaran lagi dan gunakan metode Trim


Setelah di Trim (Caranya seperti pada metode simplify tadi)
Hapus yang tidak diperlukan, jadi tinggal 1/4 lingkaran ini


5. Klik bangun tersebut dan tekan tombol [+] pada keyboard sebanyak 1 X untuk menggandakan
Kemudian tekan mirror horrisontal
Hasilnya:


Gunakan Move Tool dan atur posisinya:


6. Buat 2 Buah bagian lagi sehingga menghasilkan seperti ini
Tapi kali ini pilih mirror vertical


7. Sekarang tinggal membuat tombol PLAY jadi buat segitiga dengan
Hasilnya:


Tinggal mewarnai saja, sebaiknya hilangkan Grid agar kanvas menjadi putih bersih lagi, caranya seperti mengaktifkan Grid tadi

8. Mewarnai bagian - bagian
Klik bagian yang ingin diwarnai dan pilih warna pada color pallete di sebelah kanan

Unofficial icon From Windows Media Player sudah tercipta, minta maaf loh kepada pemilik windows ini hanyalah sekedah latian saja jadi gak ada maksud apa - apa, apalagi membajak logo tersebut... hehehe... ;P


+ Tips Tambahan - Extreme Tutorial:
Untuk langkah ke 8 yaitu pewarnaan bisa menggunakan Gradien (Fountain Fill) agar lebih menarik

Pengaturan untuk warna merah

Hasilnya:


Bisa juga ditambahkan Interactive Shadow Tool
Hasilnya:


Anda bisa berkreasi sendiri dengan Tool - Tool yang ada dalam Coreldraw...
ini hasil karya alternatif dari penulis (jo - ilmugrafis)
Kalian pasti bisa berkreasi lebih hebat lagi... ;P
"I am Just Newbie who want to Share Tutorials..."

Merubah Foto Berwarna Menjadi Sketsa Warna Pensil

Merubah Foto Berwarna Menjadi Sketsa Warna Pensil

Halo pembaca yang budiman. belajar photoshop, tentunya banyak sekali hal-hal yang bisa kita lakukan. baik memanipulasikan maupun hal-hal yang lainnya.

Oleh karena itu, kini kami akan memberikan tutorial kepada anda tentang “Bagaimana cara merubah foto berwarna menjadi sketsa warna pensil.” Berikut Caranya :

1. Buka photoshopnya. Setelah itu carilah gambar yang akan dijadikan sketsa pensil. Namun kali ini, saya akan menampilkan gambar hewan anjing, Lihat gambar pertama di bawah ini:

download gambar

2. Setelah gambar pertama tertampilkan, langkah selanjutnya yaitu : Arahkan Mouse anda pada "Layer gambar hewan" dalam hal ini Background

kemudian klik kanan dan pilih "Duplicated Layer". Namakan As: "Doggy 1" tanpa tanda petik

3. Masih tetap di Layer "Doggy 1" buat Gambar menjadi Hitam putih dengan mengKlik Ctrl + Shift + U
Lihat Gambar Kedua ( 2 ) di bawah ini :


4. Setelah gambar berubah menjadi hitam putih, langkah selanjutnya yaitu :

Buatlah duplicated Layer dari "Doggy 1", caranya seperti diatas yaitu klik kanan Layer "Doggy 1" lalu pilih duplicate layer, Lalu beri nama As: "Doggy 2"
Nah sekarang kita punya layer bernama Doggy 2 - klik Ctrl + i maka gambar di Doggy 2 akan berubah menjadi gambar film
Previewnya :


5. Setelah Gambar Ketiga ( 3 ) kita dapatkan.
Selanjutnya yaitu MengBLUR Layer "Doggy 2" dengan cara Arahkan mouse Pada Filter > Blur > Gaussian Blur maka akan keluar jendela pop_up Gaussian blurnya,
setelah itu pada “Radius Pixel” berilah nilai Radius sebesar “5.0” intinya semakin Blur semakin baik cuma harus disesuaikan jangan terlalu Over Blur
kemudian Klik Ok.
Dan lihatlah hasil gambar keempat ( 4 ) di bawah ini :


6. Pada gambar keempat ( 4) jika diperhatikan, gambar tersebut tampak Tidak jelas atau juga memudar.
Namun dari gambar tersebutlah yang Menjadikan gambar lebih jelas setelah terjadinya perpindahan warna.
Oleh sebab itu, untuk langkah terakhirnya yaitu : Pada Layer "Doggy 2" Set Blending modenya ke "Color Dodge" lihat gambar di bawah ini :

Keterangan
Pada gambar disamping ini, ubahlah nama “Normal” menjadi “Color Dodge”

Setelah anda mengubah Mode “Normal” menjadi “Color Dodge” maka, gambar secara langsung akan berubah menjadi sketsa warna pensil, lihat hasil gambar penyelesaiannya di bawah ini :