Tutorial Wdesain

Kalo kita liat sebuah blog sengan baner-banner flash sangat bagus dan menarik sehingga terlihat profesional nah kali ini tutorial wdesain akan membahas tentang bagaimana cara memasang bnner flash di blogspot kamu, sebenarnya banyak penyedia layanan pembuatan banner flash gratis tapi menurut saya kurang puas bila desain tersebut bukan dari desain sendiri kalo mau tau cara membuat desain flash lihat tutorialnya disini Oke anggap saja anda telah selesai membuat desain flash anda sekarang upload hasil desain anda di hosting, nggak punya hosting? daftar di hosting gratis

Sekarang masukan script berikut script yang harus di masukan :

<embed quality="high" allowscriptaccess="always" flashvars="alink1=http://tutorial.wdesain.web.id/" type="application/x-shockwave-flash" height="60" src="http://forum.edikomputer.com/flash/promo1.swf" width="100%" wmode="transparent"></embed>

Keterangan : Ganti teks warna merah dengan url tempat anda menyimpan file flash C4

1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML

4. cari kode ]]></b:skin>
5. Silakan anda copy kode di bawah ini letakan diatas kode ]]></b:skin> :

/* ----- NAVBAR MENU ----- */
#NavbarMenu {

width: 780px;
height: 30px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtFj61MJMT5Qjdxmr3uHgm9KA-reVp_dEf7ewjK_uh1tmGLQdipkch_4oD3cnO2Hfq_UcecTXM0CaWGcwjgrZWz0I4DTW-w9bV97UlrRl2i_ukz5yZVSFLYFZHytFB0DU3g5MKbJ2bGAn9/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 14px ARIAL;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtFj61MJMT5Qjdxmr3uHgm9KA-reVp_dEf7ewjK_uh1tmGLQdipkch_4oD3cnO2Hfq_UcecTXM0CaWGcwjgrZWz0I4DTW-w9bV97UlrRl2i_ukz5yZVSFLYFZHytFB0DU3g5MKbJ2bGAn9/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 15px,;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

Kemudian Cari Kode <body> kemudian letakan kode berikut di bawahnya :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link-Kamu'>Tentang Kami</a>
<ul>
<li><a href='Link-Kamu'>Sejarah Perusahaan</a></li>
<li><a href='Link-Kamu'>Profil Perusahaan</a></li>
<li><a href='Link-Kamu'>Struktur Organisasi</a></li>
<li><a href='Link-Kamu'>Hubungi Kami</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Komputer</a></li>
<li><a href='Link-Kamu'>Hardware</a></li>
<li><a href='http://tutorial.wdesain.web.id/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://tutorial.wdesain.web.id/search/label/Anti%20Virus'>Antivirus</a></li>
<li><a href='Link-Kamu'>Download MP3</a></li>
<li><a href='Link-Kamu'>Desktop Enhancements</a></li>
<li><a href='tutorial.wdesain.web.id/2010/01/pembuat-banner-animasi-webblog.html'>Software Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://tutorial.wdesain.web.id/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='tutorial.wdesain.web.id/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='tutorial.wdesain.web.id/search/label/Utility Tool'>Peralatan</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>System Tools</a></li>
<li><a href='Link-Kamu'>Others</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Template</a>
<ul>
<li><a href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New Blogger Template</a></li>
<li><a href='Link-Kamu'>Classic Template</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='tutorial.wdesain.web.id'>Belajar Komputer</a></li>
<li><a href='tutorial.wdesain.web.id/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a href='http://tutorial.wdesain.web.id/2009/09/tutorial-mudah-blog.html'>Tutorial Mudah Blog</a></li>
</ul>
</li>
<li><a href='/feeds/posts/default'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUG5ApJIXuspnsyFa16AlMGo7geTfGeM8Zuo3SVKX8O0Uwd6T7UcOCA2OiNOGla-hpC9dBxLId70Q_8Nl4pqKPIiRubi-4H7rW9W9u0k41uAfcPJMet3eoN5UtKBzgEu2PoSQuQcKR8aI/s1600/rss.gif' style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>

</div> >
</div>

Keterangan :
1. pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan
2. pada text yang berwarna orange di atas biarkan saja C4

Oke langsung saja tanpa basa basi login ke akun blogger anda kemudian masuk ke menu rancangan add widget pilih html/javascript copy dan paste kode berikut :

<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">

</style>
<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 = 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://tutorial.wdesain.web.id/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Keterangan : Tulisan warna merah ganti dengan url blog anda kemudian klik save C4

Localhost merupakan salah satu software alternatif dalam untuk belajar membuat website dengan basic cms ini salah satu cara yang sangat banyak di gunakan bagi para pemula yang belajar tentang CMS karena kita tidak perlu online dalam membuatnya dan tidak perlu mengeluarkan banyak biaya untuk membeli hosting dan doman untuk belajar.

Oke kita langsung saja pada permasalahannya silahkan download software wamp server yang akan kita gunakan sebagai server lokal di komputer untuk membuat website CMS

DOWNLOAD WAMP Server

Setelah anda download silahkan ekstrak file tersebut menggunakan winrar
Kemudian klik Instal maka akan muncul gambar seperti di bawah ini

Klik Next Tunggu hingga proses selesain

Klik finish

Maka akan muncul di try icon lihat gambar di bawah ini

setelah selesai buka firefox tulis localhost maka akan muncul halaman seperti berikut :

Itu berarti wampserver sudah terinstal di komputer anda nah tunggu tutorial instal cms di artikel berikutnya C4

Simple portal merupakan moods yang dapat di gunakan pada smf atau kalau pada wordpress disebut juga plugins. Dengan adanya moods simple portal tampilan forum yang kita buat dengan smf akan semakin menarik karena kita dapat melihat tampilan home page berbeda dengan forum board. simple portal dikembangkan oleh www.simpleportal.net

Pada kesempatan kali ini tutorial wdesain akan membahas tentang seting simple portal pada forum smf oke langsung saja kita mulai tutorialnya

sebelum kita menginstal simple portal kita download terlebih dahulu software simple portalnya silahkan download disini Setelah anda mendownload lengkap filenya masuk ke admin cpanel pada forum smf anda kemudian pada tab main pilih menu packages lihat gambar di bawah ini :

klik gambar untuk memperbesar gambar

Setelah itu pilih menu Upload A Packages klik browse.. pilih file simple portal yang telah anda download tadi kemudian klik tombol Upload

klik gambar untuk memperbesar

Tunggu hingga loading selesai jika upload berhasil maka akan muncul tulisan package uploaded successfuly kemudian klik apply mod

klik gambar untuk memperbesar

Setelah itu klik tombol Instal Now maka setelah berhasil maka akan muncul tulisan instalation complete dan hasilnya seperti gambar di bawah ini

klik gambar untuk memperbesar

Untuk melihat demo forumnya silahkan lihat disini forum.binaummat.com C4

kalau kita ingin Membuat tulisan yang letaknya diantara dua gambar di kanan dan kiri tulisan di halaman posting WordPress sangatlah susah. Tidak hanya di WordPress, bahkan hampir disemua penyedia layanan blog baik gratis ataupun berbayar masih sangat susah. Walaupun bisa, tetap saja letak antara tulisan dengan gambar tidak rapi. Kadang sewaktu kita mengaaedit pada halaman ‘Post’ sudah terlihat rapi, namun waktu kita publish dan kemudian kita review terlihat berantakan sekali. Kita tidak akan bisa membuatnya rapi apabila kita tidak mengakalinya . Berikut tutorial wdesain akan memberikan tips cara memasang gambar dengan tulisan berada ditengahnya

Berikut cara dan kodenya :

1. Untuk itu anda klik menu ‘Post’ –> ‘Add New’ untuk membuat tulisan/posting, kemudian copy kode berikut pada mode ‘HTML’.

<table border="0" cellspacing="0" cellpadding="0" width="500">
<tbody>
<tr>
<td width="100" valign="middle">
<div align="center"><img src="url gambar 1"border="0" align="middle" class="alignright" style="border:0;"/>
</div>
</td>
<td style="text-align:justify;" valign="middle">Tulis disini . </td>
<td width="100" valign="middle">
<div align="center"><img src="url gambar 2"border="0" align="middle" class="alignleft" style="border:0;"/>
</div>
</td>
</tr>
</tbody>
</table>

2. Kalau sudah anda paste pada mode ‘HTML’, kemudian anda kembali ke mode ‘Visual’.
3. Ganti text yang berwarna merah dengan alamat gambar anda
4. Ganti Tulisan warna biru dengan tex yang anda inginkan
5. Kalau sudah selesai klik ‘Save Draft’ atau ‘Publish’. C4

Inilah beberapa alasan mengapa memilih wordpress sebagai situs web blog yang handal

WordPress sangat mudah digunakan!

Ya benar, panel-panel dalam halaman admin (dashboard) WordPress sangat mudah dipelajari bahkan bagi Anda yang baru saja belajar ngeblog. Meskipun sebagian besar pengguna WordPress Indonesia menggunakan WordPress yang berbahasa Inggris, WordPress yang menggunakan bahasa Indonesia sebenarnya juga sudah tersedia. Kalau Anda orang Jawa, WordPress bahasa Jawa juga ada lo. :D
Tampilan WordPress sangat bagus!

Memang, tampilan WordPress bisa diubah sedemikian rupa dengan mengganti Theme. Theme WordPress banyak sekali tersedia, baik yang gratis maupun berbayar. Cara menggantinya pun sangat mudah, tinggal upload, aktifkan, WordPress sudah berganti tampilannya. :)

Kemampuan SEO WordPress yang handal!

Ini dia yang menjadi favorit pengguna WordPress! SEO atau Search Engine Optimization sangat dibutuhkan oleh para blogger dan webmaster. Apa sih SEO? Kurang lebih intinya adalah pengoptimalisasian blog agar mudah tertampil di mesin pencari seperti Google, Yahoo, Bing, dan lain-lain. Apa gunanya SEO? Tau sendiri pasti, tanpa diketahui orang lain melalui mesin pencari, blog kita yang memiliki tulisan sangat berguna akan menjadi sangat tidak berguna karena tidak ada orang yang bisa menemukannya.

Optimalisasi WordPress sangat mudah dengan banyak plugin

Plugin adalah suatu alat untuk memudahkan pengguna WordPress agar bisa mengoptimalisasi blognya. Plugin ini berupa kode yang telah disusun rapi berupa file-file yang dimasukkan dalam satu folder, sehingga bisa dengan mudah diinstall, maupun uninstall. Jenis Plugin ini bermacam-macam, mulai dari plugin untuk SEO, plugin untuk social bookmarking, top post, related post, auto blog, dan lain sebagainya. Kabar baiknya, plugin ini bisa didapatkan secara gratis lo! :D

cukup sekian dulu posting kali ini, sudah dinihari. Besok dilanjutkan lagi tutorial WordPress C4

Pages

Advertise

Template Wdesain

Jasa Pembuatan Web Blog

Full Desain Free

Produk Wdesain.web.id

Memasang banner flash pada blogspot

cara membuat drop down menu

Membuat widget recent post bergerak

Instal Server di localhost

Seting simple portal pada smf

Membuat Tulisan Diantara Dua Gambar pada wordpress

Mengapa Memilih Wordpress ?

Zona Bisnis

Zona Iklan

Sponsors

Labels

Daftar Sekarang

Total Pageviews

Stats

Blog Archive

Followers

Addthis

My Blog

My Partner

Social

About Me