Posts Tagged ‘CSS
CSS Font
Pernah melihat web yang tampil dengan fontnya aneh-aneh (font tidak standar).
pada dasarnya CSS font-family standart yang biasanya di pakai di design website adalah tidak lepas dari sebagai berikut :
font-family:Arial, Helvetica, sans-serif; font-family:"Times New Roman", Times, serif; font-family:"Courier New", Courier, monospace; font-family:Georgia, "Times New Roman", Times, serif; font-family:Verdana, Arial, Helvetica, sans-serif; font-family:Geneva, Arial, Helvetica, sans-serif;
membuat toko musik dengan wordpress
setelah sedikit ulasan bagaimana membuat toko musik dan toko film pada psotingan yang lalu, Sekarang bagaimana memanfaatkan blog atau website anda yang sudah terinstall CMS WordPress agar bisa di pakai jualan musik (mp3) juga tanpa pakai modal. tanpa harus mengulang postingan yang lalu (tetang toko musik) karena prisipnya masih sama, yaitu menggunakan affiliasi dari amazon.
cukup mudah sebenarnya, cukup mengganti beberapa tag/script pada template wordpress anda dan menambahi costum field pada postingan di wordpress
setelah menambah costum field seperti diatas tambahi juga pada file single.php, atau di index.php atau juga bisa di buatkan query sendiri pada category tertentu (semisal category product). Bisa di tambahi script seperti dibawah ini
</p>
<p><script type='text/javascript'><br />
var amzn_wdgt={widget:'MP3Clips'};<br />
amzn_wdgt.tag='freetutorifre-20';<br />
amzn_wdgt.widgetType='SearchAndAdd';<br />
amzn_wdgt.title='<?php bloginfo('name'); ?> Music Player';<br />
amzn_wdgt.keywords='<?php echo get_post_meta($post->ID, 'songArtist', true); ?> - <?php echo get_post_meta($post->ID, 'songTitle', true); ?> - <?php echo get_post_meta($post->ID, 'songAlbum', true); ?>';<br />
amzn_wdgt.width='250';<br />
amzn_wdgt.height='250';<br />
amzn_wdgt.shuffleTracks='False';<br />
amzn_wdgt.maxResults='1';<br />
amzn_wdgt.marketPlace='US';<br />
</script><br />
<script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js'></p>
<p>
jangan lupa di ganti untuk affiliasinya. udah bukan!..
Sudah kah anda membuat website toko musik
membuat website toko musik dan toko film
Tidak perlu mahir PHP atau pemrograman untuk membuat webuah website itu, apa lagi sekarang ini banyak CMS (content management system) yang berkeliaran, tinggal klik sini klik sana jadi deh. pada kesempatan kali ini sedikit dibahas bagaimana membuat website toko musik dan juga toko film tanpa harus menguasai bahasa pemrograman (PHP atau ASP). cukup sedikit belajar tag-tag HTML dan sedikit belajar CSS untuk mepercantik website. tentunya nanti website toko musik dan toko film yang anda bangun bisa menghasilkan uang (lumayan buat tambahan uang saku).
Cukup dengan modal email dan domain hosting tentunya, website anda bisa di sulap sebagai website toko musik dan toko film. Dengan memanfaatkan affiliasi (program affiliasi) dari amazon, anda bisa memperoleh komisi dari hasil penjualan. Pastikan anda terdaftar dulu di amazon untuk mendapat id affiliasi trackingnya (punya saya “freetutorifre-20“).
Prinsipnya gini, pertamanya kita cari musik (mp3) dan film yang akan kita jual di widget, trus nanti dari widget itu kita embeed pada website toko musik atau toko film kita. dengan memasukkan javascript seperti dibawah ini
<script type='text/javascript'>
var amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='freetutorifre-20';
amzn_wdgt.widgetType='SearchAndAdd';
amzn_wdgt.title='My Music Blog';
amzn_wdgt.keywords='Lil Jon - Get Low - Part II';
amzn_wdgt.width='250';
amzn_wdgt.height='250';
amzn_wdgt.shuffleTracks='False';
amzn_wdgt.maxResults='1';
amzn_wdgt.marketPlace='US';
</script>
<script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US/js/swfobject_1_5.js'>
</script>
kalau pingin lapak daganannya banyak, ya embeed javascriptnya di banyakin juga. untuk affiliasi masing-masing bisa dirubah pada “amzn_wdgt.tag=’freetutorifre-20‘;” dirubah sesuai affiliasinya. mudah bukan
Bagaimana kalau kita sudah terlanjur pake CMS wordpress ? ikuti postingan selanjutnya
Sudahkah anda belajar membuat website toko musik
css table wizard
sudah pada tau definisi CSS kan,.. menurut wikipedia
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML (wikipedia)
kalau menurut saya sendiri CSS ini merupakan pelengkap pada html, kita bisa mendesign website dengan menggunakan CSS. pada kesempatan kali ini saya mencoba untuk memberikan css table wizard, jadi dimana kita bisa memodifikasi table yang akan kita buat pada website, bisa di coba wizard berikut ini dan bisa di kembangkan sesuai dengan kemampuan dan keinginan. Tertarik untuk mencobanya, silahkan meluncur ke css table wizard
highlight author comment pada wordpress
highlight author comment yang dimaksud adalah menandai dengan warna beda pada komentar ketika admin/author memberikan komentar di postingan yang dibuatnya.
pada gambar diatas nampak berbeda antara komentar yang diberikan user/orang lain dengan komentar yang diberikan oleh admin/author. Buat kalian-kalian yang pengen utak atik bentuk komentar seperti gambar diatas bisa di coba resep berikut ini (*kayak makanan saja ada resepnya). Yang pertama buka file style.css, tambahi css berikut ini
.highlight { background-color: #FFFFE0 !important;border:1px solid #E6DB55; }
untuk bentuk dan model silahkan disesuaikan dengan keinginan, misalkan menambahi background image atau warna yang beda, tinggal otak-atik cssnya
selanjutnya buka file comments.php, cari tag/code php berikut ini
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
rubah dengan tag/code php berikut ini
<li class="<?php if ($comment->user_id == 1) $oddcomment = "highlight"; echo $oddcomment; ?>">
untuk user_id sesuai dengan id user yang di buat, jika banyak user yang sebagai author, bisa disesuaikan dengan id nya, bisa di rubah-rubah sambil sedikit belajar php. Kalau sudah silahkan di amati komentar author/admin. Sudah mempunyai warna beda bukan!..
Sudahkah anda belajar php hari ini
basic design template
belajar membuat website atau desain website memang tidak ada matinya, baru saja saya membaca artikel tentang “framework css1 line CSS Grid” yang intinya dengan memanfaatkan satu baris css, bisa yang bisa dikatakan seperti template majalah (membuat desain magazine theme).
<script language="JavaScript">
.dp50 {width:50%; float:left; display: inline; *margin-right:-1px; }
</script>
Dengan satu baris css tadi bisa digunakan untuk mengisi bermacam-macam kolom. antara percaya ndak percaya silahkan di coba sendiri atau bisa dilihat disini
css box
css box ini merupakan dasar dari css untuk pembuatan website, untuk penataan tulisan dan penataan menu-menu yang lain yang ada diwebsite. Berikut ini sedikit penjelasan tentang penggunaan css box. coba amati gambar dibawah ini
Jadi untuk menghitung lebar atau tinggi dari suatu box css harus juga diperhatikan padding dan border
Width = width + padding-left + padding-right + border-left + border-right
Height = height + padding-top + padding-bottom + border-top + border-bottom
transparacy png pada IE5 dan IE6
Ketika kita menggunakan gambar Transparan dengan format PNG di browser IE5 dan IE6 biasanya sering muncul warna lain yang tidak sesuai dengan keinginan kita, hal seperti itu bisa disiasati dengan menggunakan bantuan javascript. Adapun bantuan yang di maksud adalah sebagai berikut :
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
Border Image
Sering kali kita membuat CSS untuk border image, biasanya border image dipakai/dipasang ketika mouse yang kita gerakkan berada di atas gambar yang sudah kita siapkan atau istilahnya Rollover Image. Penggunaan border yang tidak tepat bisa menyebabkan layout dari Tampilan website akan berubah.
Bagaimana caranya agar layout yang sudah kita punya tidak berubah ketika sedang rollover image :
Kasus Biasanya
<style type="text/css">
#problem-css a img, #problem-css a { border: none; float: left; }
#problem-css a:hover { border: 3px solid black; }
</style>
Solusi pakai inner border
<style type="text/css">
#inner-css a img, #inner-css a { border: none; overflow: hidden; float: left; }
#inner-css a:hover { border: 3px solid black; }
#inner-css a:hover img { margin: -3px; }
</style>
Solusi pakai outer border
<style type="text/css">
#outer-css a img, #outer-css a { border: none; float: left; }
#outer-css a { margin: 3px; }
#outer-css a:hover { outline: 3px solid black; }
</style>
** Selamat Belajar CSS **
wordpress contact form plugin
Contact from merupakan suatu halaman khusus yang ada di website, yang berfungsi sebagai sarana komunikasi oleh pembaca kepada pemilik website tersebut. Jadi ketika pembaca ingin memberikan masukkan atau menanyakan tentang suatu hal yang berkaitan dengan website tersebut, bisa langsung mengirim pesan secara private message ke pemilik website itu. Jadi si pembaca tidak perlu terlebih dulu login ke penyedia layanan email.
untuk CMS (Content Management System) WordPress, cukup dengan menambahkan plugin, dan sedikit mengatur pada option yang ada di menu dashboard wordpress. Pada kali ini plugin yang akan digunakan adalah “contact form plugin” yang bisa di download secara gratis. 
Adapun cara-cara nya adalah sebagai berikut
- Download plugin contact form
- Upload ke dalam wp-content/plugins/ bisa melalui file manager yang ada di cpanel atau juga melalui FTP
- Extract plugin tersebut
- Aktifkan plugin yang sudah diupload dan di extract di menu dashboard wordpress
- Buat page baru “misal page : Contact us”
- Tuliskan [wpcf] dan simpan / publish
- Atur alamat email yang nanti dibuat sebagai contact form di menu settings – contact form
- Simpan
- Contact form sudah siap untuk digunakan
untuk masalah costumize atau style tampilan, bisa diatur di CSS nya, seperti dibawah ini
#wpcf label {
clear: both;
display: block;
float: left;
width: 150px;
}
#wpcf input {
float: left;
width: 200px;
padding: 1px;
margin: 2px 5px 2px 0;
}
#wpcf textarea {
width: 350px;
height: 100px;
padding: 1px;
margin: 0 5px 10px 0;
}
#wpcf #contactsubmit {
margin-left: 250px;
width: 100px;
}
- -**SELAMAT BELAJAR WORDPRESS **- -
