Sharing Mie

Cara Memasang Menu Accordion di Blog

10/08/2012 02:56:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h1 class="post-title entry-title" style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-family: julee; font-size: 1.3em; line-height: 1.4em; margin: 5px; padding-right: 10px;">
</h1>
<div class="post-header">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-4742315037800597014" style="font-family: julee; font-size: 16px; line-height: 1.5em; margin: 5px;">
<div class="separator" style="background-color: white; clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNBW66O6QdEIdul8CJfq-aQSVVUmxpySxLF1YtOW7hNZfht0nMnYGZb2KsfrdMFxvDJ_JhW482cNc7tGOjcLyPuwSCAPpvLbwfcNJgTkVNG7pFv-mIoNzTUZSJX5hi2vSjZ_YaudxN23Qk/s1600/bbbbbb.png" imageanchor="1" style="clear: left; color: black; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNBW66O6QdEIdul8CJfq-aQSVVUmxpySxLF1YtOW7hNZfht0nMnYGZb2KsfrdMFxvDJ_JhW482cNc7tGOjcLyPuwSCAPpvLbwfcNJgTkVNG7pFv-mIoNzTUZSJX5hi2vSjZ_YaudxN23Qk/s320/bbbbbb.png" style="border: 1px solid rgb(204, 204, 204); padding: 4px;" width="302" /></a></div>
<b>Cara Memasang Menu Accordion di Blog</b><span style="background-color: white;"> - Cara Memasang, Membuat atau Membikin Menu Accordion di Blogspot ini adalah re-post dari posting lawas saya yang berjudul cara membuat menu accordion blogger yang nggak masuk ke hatinya om gugel. Karna itu diharapkan mudah - mudahan dengan Re-post ( posting ulang ) ini, artikel saya yang telah saya hapus tersebut bisa terindeks lagi meskipun dengan URL yang berbeda.</span><br />
<br style="background-color: white;" />
<span style="background-color: white;">Menu Accordion adalah berupa susunan menu yang di susun secara vertikal, tentulah berbeda sekali dengan menu horisontal ( baca : </span><a href="http://christiantatelu.blogspot.com/2012/01/cara-membuat-menu-horisontal-di-blog.html" style="background-color: white; color: black; text-decoration: none;" target="_blank">cara membuat menu horisontal di blog</a><span style="background-color: white;"> )yang biasa sobat jumpai, mungkin ini adalah salah satu solusi menyembunyikan widget yang terlalu banyak di halaman blog sobat.  Sobat yang tertarik pasang menu accordion di blogger, silahkan ikuti tutorial berikut.</span><br />
<br style="background-color: white;" />
<span style="background-color: white;">1. Logi ke akun blog sobat.</span><br />
<span style="background-color: white;">2. Klik rancangan --> Edit HTML</span><br />
<span style="background-color: white;">3. Kemudian letakkan kode berikut di atas kode </span><b style="background-color: white;">]]></b:skin></b><br />
<div style="background-color: #f2f2f2; border: 2px solid rgb(0, 0, 255); height: 120px; overflow: auto; padding: 15px;">
#acc{background:#666;font:13px trebuchet ms;<br />
line-height:1.2em;padding:10px;margin:0;}<br />
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;<br />
text-shadow:0px 1px 1px #fff;<br />
border-bottom:2px solid #444;}<br />
#acc h3 a{color:#555}<br />
#acc h3 a:hover{color:#000}<br />
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;<br />
border-bottom:2px solid #222;}<br />
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}<br />
#acc :target h3 a{color:#aa5500}</div>
<br style="background-color: white;" />
<span style="background-color: white;">4. Klik save template dan kita akan menuju ke penambahan gadget.</span><br />
<span style="background-color: white;">5. Klik Rancangan --> Elemen laman--> Tambah gadget--> Pilih HTML/Javascript</span><br />
<span style="background-color: white;">6. Masukkan kode berikut ke dalam kotak yang di sediakan.</span><br />
<div style="background-color: #f2f2f2; border: 2px solid rgb(0, 0, 255); height: 120px; overflow: auto; padding: 15px;">
<div id="acc"><br />
<div id="isi1"><br />
<h3><a href="#isi1"><span style="color: red;">Judul 1</span></a></h3><br />
<div class="post"><br />
<div style="color: blue;">
<b><i>Masukkan item anda disini,bisa berupa teks atau widge</i></b>t</div>
</div><br />
</div><br />
<div id="isi2"><br />
<h3><a href="#isi2"><span style="color: red;">Judul 2</span></a></h3><br />
<div class="post"><br />
<div style="color: blue;">
<i><b>Masukkan item anda disini,bisa berupa teks atau widget</b></i></div>
</div><br />
</div><br />
<div id="isi3"><br />
<h3><a href="#isi3"><span style="color: red;">Judul 3</span></a></h3><br />
<div class="post"><br />
<div style="color: blue;">
<i><b>Masukkan item anda disini,bisa berupa teks atau widget</b></i></div>
</div><br />
</div><br />
</div></div>
<br style="background-color: white;" />
<span style="background-color: white;">7. Klik save dan lihat hasilnya... Gimana?? sederhana dan mudah bukan??</span><br />
<div class="admin-tulisan" style="background-color: #f2f2f2; border: 2px solid rgb(0, 0, 0); margin: 30px 0px 10px; width: auto;">
</div>
</div>
</div>

Cara Memasang Menu Accordion di Blog - Cara Memasang, Membuat atau Membikin Menu Accordion di Blogspot ini adalah re-post dari p...

Cara Memasang Breaking News di Blog

10/08/2012 02:52:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Cara Memasang Breaking News di Blog</b><span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;"> - Ada yang baru dengan tampilan </span><b style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">Palma Hutabarat</b><span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">, blog jelek ini kini dilengkapi dengan </span><b style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">breaking news</b><span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">. Breaking news adalah widget yang dipasang dengan tujuan memperindah tampilan blog dan juga untuk  meningkatkan pageview blog. Widget ini berupa judul artikel yang ditampilkan secara bergantian yang terkadang juga di sertai dengan tanggal posting artikel tersebut.</span><br />
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">Sebenarnya postingan kali ini hampir sama dengan postingan sebelumnya ( baca : </span><a href="http://christiantatelu.blogspot.com/2012/01/memasang-headline-news-di-blog.html" style="background-color: white; color: black; font-family: julee; font-size: 16px; line-height: 24px; text-decoration: none;" target="_blank">cara membuat headline news di blog</a><span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;"> ) tapi mungkin yang ini ( breaking news ) agak sedikit lebih keren. Sobat yang tertarik memasang widget ni, silahkan ikuti tutorial berikut.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/902DH.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="81" src="http://i.imgur.com/902DH.png" width="640" /></a></div>
<div class="separator" style="background-color: white; clear: both; font-family: julee; font-size: 16px; line-height: 24px; text-align: center;">
<br /></div>
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<b style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">Cara Memasang Breaking News di Blog</b><br />
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">1. Login dulu ke akun blog sobat</span><br />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">2. Klik rancangan --> Edit HTML</span><br />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">3. Letakkan kode berikut di atas kode </span><b style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">]]></b:skin></b><br />
<div style="background-color: #f2f2f2; border: 2px solid rgb(0, 0, 255); font-family: julee; font-size: 16px; height: 150px; line-height: 24px; overflow: auto; padding: 15px;">
.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGmgEWXyHn65KubZyPVqSum9mfe0fuHFr4g9SF7cEcPonKCYzYRhJoqdhRgwz1s7bWvnspjb-ZvMtPq5b6BFLNkYLPPONKeHXOjgDdDNDKiWxRbBSfqLn1Msuvl24x5H0Z4_ebOzqOBj0/s1600/BRK+NW.png) no-repeat top left;width:<b style="color: blue;">979</b>px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}<br />
.news {width:<span style="color: blue;"> </span><b style="color: blue;">979</b>px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}<br />
.news a:link, .news a:visited{color:#000000;text-decoration:none;}<br />
.news a:hover {color:#ddd;text-decoration:underline;}</div>
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">Catatan :</span><br />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">Sesuaikan kode yang berwarna </span><b style="background-color: white; color: blue; font-family: julee; font-size: 16px; line-height: 24px;">biru</b><span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;"> dengan ukuran template blog sobat</span><br />
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">4. Kemudian letakkan kode berikut di atas kode </head> </span><br />
<div style="background-color: #f2f2f2; border: 2px solid rgb(0, 0, 255); font-family: julee; font-size: 16px; height: 150px; line-height: 24px; overflow: auto; padding: 15px;">
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};<br />
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};<br />
//]]><br />
</script><br />
<style type='text/css'><br />
.titlefield{ /*CSS for RSS title link in general*/<br />
text-decoration: none;}<br />
.labelfield{ /*CSS for label field in general*/<br />
color:#aaa;font-size: 100%;}<br />
.datefield{ /*CSS for date field in general*/<br />
color:#aaa;font:normal 14px Arial;text-transform:none;}<br />
#example1{ /*Demo 1 main container*/<br />
width: 780px;<br />
height: 14px;<br />
border: 0px solid #aaa;<br />
padding: 0px;<br />
font:bold 16px Arial;<br />
text-transform:none;<br />
text-align:left;<br />
background-color:transparent;}<br />
code{ /*CSS for insructions*/<br />
color: #fff;}<br />
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}<br />
#example1 a:hover {color:#C8D3F2;text-decoration:none;}<br />
</style></div>
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">5. Cari kode <div id='header-wrapper'> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.</span><br />
<div style="background-color: #f2f2f2; border: 2px solid rgb(0, 0, 255); font-family: julee; font-size: 16px; height: 150px; line-height: 24px; overflow: auto; padding: 15px;">
<div class='newspic'><br />
<div style='float:left;width:979px;padding:1px 0 6px 130px; position:relative; overflow:hidden;'><br />
<script type='text/javascript'><br />
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)<br />
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;<b style="color: red;">http://www.palmahutabarat.co.cc</b>/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed<br />
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields<br />
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag<br />
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date<br />
cssfeed.entries_per_page(1)<br />
cssfeed.init()<br />
</script><br />
</div><br />
<div style='clear:both;'/><br />
</div></div>
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">Catatan :</span><br />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">Ganti </span><b style="color: red; font-family: julee; font-size: 16px; line-height: 24px;">http://www.palmahutabarat.co.cc/</b><span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;"> dengan url blog sobat.</span><br />
<br style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;" />
<span style="background-color: white; font-family: julee; font-size: 16px; line-height: 24px;">6. Klik save dan lihat hasilnya.</span></div>

CSS HTML Javascript Tips'N'Trik Cara Memasang Breaking News di Blog

Cara Memasang Breaking News di Blog - Ada yang baru dengan tampilan Palma Hutabarat , blog jelek ini kini dilengkapi dengan breaking news...

Perbedaan HTML dan CSS

10/04/2012 08:56:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="text-align: center;">
<img alt="perbedaan html dengan css" height="206" src="http://www.zainalhakim.web.id/uploads/image/css-big.jpg" width="400" /></div>
Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang  
wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu  
sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah  
tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan.  
Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa 
 perbedaan html dan css? Artikel berikut ini akan membantu anda  
membedakan HTML dengn CSS dari segi fungsi serta penulisan.<br />
<h3>
<cufon alt="Apa " class="cufon cufon-canvas" style="height: 16px; width: 36px;"><cufontext>Apa </cufontext></cufon><cufon alt="itu " class="cufon cufon-canvas" style="height: 16px; width: 25px;"><cufontext>itu </cufontext></cufon><cufon alt="html?" class="cufon cufon-canvas" style="height: 16px; width: 43px;"><cufontext>html?</cufontext></cufon></h3>
HTML adalah kependekan dari Hyper Text Markup Language yang artinya 
bahasa penandaan halaman web. Elemen HTML yang disebut dengan TAG 
digunakan untuk <strong>menyusun struktur isi</strong> halaman web.<br />
HTML ditulis dengan struktur tertentu yang menginformasikan kepada 
browser tentang susunan isi halaman yang di tampilkan. Contoh :<br />
<pre><h1>Ini contoh Heading</h1>
<p>Ini adalah contoh sebuah paragraf dalam HTML</p>
</pre>
dengan tag diatas, browser akan menampilkan isi dengan baris awal 
heading 1, dan baris kedua sebuah paragraf. Heading dianggap sebagai 
sebuah kata pembuka atau judul dari halaman, sedangkan paragraf adalah 
sebagai isi halaman.<br />
HTML bisa berdiri sendiri tanpa ada pendukung lainya seperti css.<br />
<h3>
<cufon alt="Apa " class="cufon cufon-canvas" style="height: 16px; width: 36px;"><cufontext>Apa </cufontext></cufon><cufon alt="itu " class="cufon cufon-canvas" style="height: 16px; width: 25px;"><cufontext>itu </cufontext></cufon><cufon alt="css?" class="cufon cufon-canvas" style="height: 16px; width: 31px;"><cufontext>css?</cufontext></cufon></h3>
CSS adalah kependekan dari Cascading Style Sheet yang artinya pengatur gaya dokumen. CSS digunakan untuk <strong>mengatur tampilan struktur isi</strong> halaman web.<br />
Karena css digunakan untuk mengatur tampilan struktur isi maka css 
harus mengacu pada elemen tertentu dari dokumen yang diformat. Sehingga 
penulisanya :<br />
<pre>h1 { color : #000;font-size:20px; }
.tengah { text-align:center; }
</pre>
Contoh css diatas digunakan untuk mengatur format semua elemen h1 
sehinga ditampilkan dengan warna:#000 (hitam) dan font-size:20px (ukuran
 tulisan 20 pixel). Sedangkan .tengah adalah sebuah class yang dapat 
ditempelkan pada elemen tertentu seperti p, div, dll. Misal : <p 
class="tengah">..</p> sehingga furmat paragraf berubah menjadi 
rata tengah.<br />
<h3>
<cufon alt="Kemampuan " class="cufon cufon-canvas" style="height: 16px; width: 103px;"><cufontext>Kemampuan </cufontext></cufon><cufon alt="umum " class="cufon cufon-canvas" style="height: 16px; width: 54px;"><cufontext>umum </cufontext></cufon><cufon alt="CSS" class="cufon cufon-canvas" style="height: 16px; width: 31px;"><cufontext>CSS</cufontext></cufon></h3>
<ol>
<li>Memformat banyak dokumen hanya dengan satu file css</li>
<li>Mengatur susunan layout dokumen</li>
<li>Mengatur tampilan dalam berbagai format output seperti printer, layar monitor, mobile dll</li>
<li>Menambah fitur kontrol dokumen seperti show, hide, visible dll</li>
</ol>
Semoga bermanfaat<br />
good Luck</div>

Blogger CSS HTML SeputarBerita Tips'N'Trik Perbedaan HTML dan CSS

Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu ...

Karakter Dan Sibol Khusu Dalam HTML

10/04/2012 08:54:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="post-item">
<div style="text-align: center;">
<img alt="simbol dan karakter khusus dalam html" height="400" src="http://www.zainalhakim.web.id/uploads/image/kode-html.gif" width="400" /></div>
Umumnya html digunakan hanya untuk menampilkan informasi yang dapat  
dibaca yang ditampilkan dalam bentuk gambar, tulisan, atau tabel.  
Sehingga simbol ataupun karakter yang sering digunakan untuk keperluan  
menuliskan rumus biasanya akan ditampilkan dalam bentuk gambar, padahal 
 sebenarnya html sudah menyediakan karakter/simbol tersebut dengan 
pengkodean khusus. Simbol dan karakter apa saja yang bisa kita gunakan 
dalam html? Simak <a class="linkC" href="http://www.zainalhakim.web.id/posting/karakter-dan-simbol-khusus-dalam-html.html" title="http://www.zainalhakim.web.id/">artikel</a> berikut.<br />
Simbol atau karakter khusus memang jarang sekali digunakan dalam 
menyajikan sebuah informasi di halaman web, meskipun ada seringkali 
disajikan dalam bentuk gambar. Contoh untuk menyajikan rumus matematika 
maupun rumus fisika tentunya kita memerlukan kode atau karakter khusus 
tersebut. Kode dan simbol rumus memang tidak disediakan dalam susunan 
tombol keyboard, sehingga kita tidak bisa mengetiknya secara langsung. 
Alternatifnya yaitu dengan menambahkan manual kode penggantinya dalam 
dokumen html.<br />
Contoh simbol yang tidak disediakan pada keyboard :<br />
<span style="font-size: x-large;">≤ ⅛ ¼ ∑</span> dan banyak lagi lainya seperti pada tabel berikut.<br />
<h3>
<cufon alt="Kode, " class="cufon cufon-canvas" style="height: 16px; width: 49px;"><cufontext>Kode, </cufontext></cufon><cufon alt="Simbol " class="cufon cufon-canvas" style="height: 16px; width: 57px;"><cufontext>Simbol </cufontext></cufon><cufon alt="dan " class="cufon cufon-canvas" style="height: 16px; width: 35px;"><cufontext>dan </cufontext></cufon><cufon alt="karakter " class="cufon cufon-canvas" style="height: 16px; width: 69px;"><cufontext>karakter </cufontext></cufon><cufon alt="khusus " class="cufon cufon-canvas" style="height: 16px; width: 58px;"><cufontext>khusus </cufontext></cufon><cufon alt="dalam " class="cufon cufon-canvas" style="height: 16px; width: 53px;"><cufontext>dalam </cufontext></cufon><cufon alt="HTML" class="cufon cufon-canvas" style="height: 16px; width: 44px;"><cufontext>HTML</cufontext></cufon></h3>
<table border="1" cellpadding="4" cellspacing="0" style="width: 100%px;">
    <tbody>
<tr>
            <th>Tampilan</th>
            <th>Perintah Umum</th>
            <th>Kode dengan angka</th>
            <th>Kode dengan hexa</th>
            <th>Keterangan</th>
        </tr>
<tr>
            <td>−</td>
            <td></td>
            <td>&#8722;</td>
            <td>&#x2212;</td>
            <td>Minus Sign</td>
        </tr>
<tr>
            <td>+</td>
            <td>+</td>
            <td>&#43;</td>
            <td>&#x2B;</td>
            <td>Plus Sign</td>
        </tr>
<tr>
            <td>±</td>
            <td>&plusmn;</td>
            <td>&#177;</td>
            <td>&#xB1;</td>
            <td>Plus or Minus Sign</td>
        </tr>
<tr>
            <td>×</td>
            <td>&times;</td>
            <td>&#215;</td>
            <td>&#xD7;</td>
            <td>Multiplication Sign</td>
        </tr>
<tr>
            <td>÷</td>
            <td>&divide;</td>
            <td>&#247;</td>
            <td>&#xF7;</td>
            <td>Division Sign</td>
        </tr>
<tr>
            <td>%</td>
            <td>%</td>
            <td>&#37;</td>
            <td>&#x25;</td>
            <td>Percent Sign</td>
        </tr>
<tr>
            <td>‰</td>
            <td></td>
            <td>&#137;</td>
            <td>&#x2030;</td>
            <td>Per Mille Sign (per thousand)</td>
        </tr>
<tr>
            <td>=</td>
            <td>=</td>
            <td>&#61;</td>
            <td>&#x3D;</td>
            <td>Equal Sign</td>
        </tr>
<tr>
            <td>≠</td>
            <td></td>
            <td>&#8800;</td>
            <td>&#x2260;</td>
            <td>Not Equal To Sign</td>
        </tr>
<tr>
            <td>≈</td>
            <td></td>
            <td>&#8776;</td>
            <td>&#x2248;</td>
            <td>Approximately Equal Sign</td>
        </tr>
<tr>
            <td>≡</td>
            <td></td>
            <td>&#8801;</td>
            <td>&#x2261;</td>
            <td>Identical To Sign</td>
        </tr>
<tr>
            <td><</td>
            <td>&lt;</td>
            <td>&#60;</td>
            <td>&#x3C;</td>
            <td>Less Than Sign</td>
        </tr>
<tr>
            <td>></td>
            <td>&gt;</td>
            <td>&#62;</td>
            <td>&#x3E;</td>
            <td>Greater Than Sign</td>
        </tr>
<tr>
            <td>≤</td>
            <td></td>
            <td>&#8804;</td>
            <td>&#x2264;</td>
            <td>Less Than or Equal To Sign</td>
        </tr>
<tr>
            <td>≥</td>
            <td></td>
            <td>&#8805;</td>
            <td>&#x2265;</td>
            <td>Greater Than or Equal To Sign</td>
        </tr>
<tr>
            <td>∞</td>
            <td></td>
            <td>&#8734;</td>
            <td>&#x221E;</td>
            <td>Infinity Sign</td>
        </tr>
<tr>
            <td>⅛</td>
            <td></td>
            <td>&#8539;</td>
            <td>&#x215B;</td>
            <td>One Eighth Fraction</td>
        </tr>
<tr>
            <td>¼</td>
            <td>&frac14;</td>
            <td>&#188;</td>
            <td>&#xBC;</td>
            <td>One Quarter Fraction</td>
        </tr>
<tr>
            <td>⅜</td>
            <td></td>
            <td>&#8540;</td>
            <td>&#x215C;</td>
            <td>Three Eighths Fraction</td>
        </tr>
<tr>
            <td>½</td>
            <td>&frac12;</td>
            <td>&#189;</td>
            <td>&#xBD;</td>
            <td>One Half Fraction</td>
        </tr>
<tr>
            <td>⅝</td>
            <td></td>
            <td>&#8541;</td>
            <td>&#x215D;</td>
            <td>Five Eighths Fraction</td>
        </tr>
<tr>
            <td>¾</td>
            <td>&frac34;</td>
            <td>&#190;</td>
            <td>&#xBE;</td>
            <td>Three Quarters Fraction</td>
        </tr>
<tr>
            <td>⅞</td>
            <td></td>
            <td>&#8542;</td>
            <td>&#x215E;</td>
            <td>Seven Eighths Fraction</td>
        </tr>
<tr>
            <td>∫</td>
            <td></td>
            <td>&#8747;</td>
            <td>&#x222B;</td>
            <td>Integral Sign</td>
        </tr>
<tr>
            <td>∂</td>
            <td></td>
            <td>&#8706;</td>
            <td>&#x2202;</td>
            <td>Partial Differential Sign</td>
        </tr>
<tr>
            <td>∆</td>
            <td></td>
            <td>&#8710;</td>
            <td>&#x2206;</td>
            <td>Increment Sign</td>
        </tr>
<tr>
            <td>∏</td>
            <td></td>
            <td>&#8719;</td>
            <td>&#x220F;</td>
            <td>N-ary Product Sign</td>
        </tr>
<tr>
            <td>∑</td>
            <td></td>
            <td>&#8721;</td>
            <td>&#x2211;</td>
            <td>N-ary Sum Sign</td>
        </tr>
<tr>
            <td>√</td>
            <td></td>
            <td>&#8730;</td>
            <td>&#x221A;</td>
            <td>Square Root Sign</td>
        </tr>
<tr>
            <td>∟</td>
            <td></td>
            <td>&#8735;</td>
            <td>&#x221F;</td>
            <td>Right Angle Sign</td>
        </tr>
<tr>
            <td>∩</td>
            <td></td>
            <td>&#8745;</td>
            <td>&#x2229;</td>
            <td>Intersection Sign</td>
        </tr>
<tr>
            <td>∙</td>
            <td></td>
            <td>&#8729;</td>
            <td>&#x2219;</td>
            <td>Bullet Operator</td>
        </tr>
<tr>
            <td>ƒ</td>
            <td></td>
            <td>&#131;</td>
            <td>&#x83;</td>
            <td>Function Sign</td>
        </tr>
<tr>
            <td>⁄</td>
            <td></td>
            <td>&#8260;</td>
            <td>&#x2044;</td>
            <td>Fraction Slash</td>
        </tr>
</tbody>
</table>
Simbol dan karakter khusus seperti pada kolom pertama tabel diatas 
dapat ditampilkan dengan menuliskan salah satu kode yang tersedia pada 
kolom 2, 3 dan 4. Misal anda ingin menampilkan simbol <span style="font-size: large;">± </span>(plus minus), maka kita harus menuliskan <span style="font-size: medium;">&plusmn;</span> atau <span style="font-size: medium;">&#177;</span> atau <span style="font-size: medium;">&#xB1; </span>dalam kode html halaman web yang dibuat.<br />
Jangan lupa juga, tambahkan kode berikut pada bagian atas dokumen 
html yang anda buat, karena beberapa simbol tidak bisa tampil. Kode 
berikut digunakan sebagai referensi pustaka simbol-simbol diatas.<br />
<pre><meta http-equiv="content-type" content="text/html;charset=utf-8" /></pre>
Selamat moncoba, dan semoga bermanfaat<br />
<br />
<br />
<br />
<b><span style="font-family: Courier New, Courier, monospace;">Referensi :</span></b><br />
<a href="http://www.utexas.edu/learn/html/spchar.html">http://www.utexas.edu/learn/html/spchar.html</a><br />
<a href="http://webdesign.about.com/od/localization/l/blhtmlcodes-math.html" target="_blank">http://webdesign.about.com/od/localization/l/blhtmlcodes-math.htm</a><br />
<br />
<div style="text-align: right;">
<span style="font-size: xx-small;">copyright<a href="http://www.zainalhakim.web.id/posting/karakter-dan-simbol-khusus-dalam-html.html" rel="nofollow" target="_blank">@ZainalHakim</a></span></div>
</div>
</div>

HTML SeputarBerita Tips'N'Trik Karakter Dan Sibol Khusu Dalam HTML

Umumnya html digunakan hanya untuk menampilkan informasi yang dapat dibaca yang ditampilkan dalam bentuk gambar, tulisan, atau tabel....

Membuat Animasi Flash Dengan PHP

10/04/2012 08:50:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="post-item">
Anda mungkin sudah mengenal apa itu flash, 
yaitu sebuah jenis media  digital yang bisa menampilkan gambar, tulisan 
dan memutar audio. Flash  ini sering digunakan untuk membuat animasi 
yang ditampilkan di internet. Flash atau yang sering disebut animasi 
flash ini umumnya dibuat dengan aplikasi khusus seperti Adobe Flash. 
Tapi kita juga bisa membuatnya dengan php, walaupun hanya dengan 
animasi-animasi sederhana.<br />
PHP tidak hanya digunakan untuk membuat konten yang dinamis, akan 
tetapi juga bisa digunakan untuk berbagai keperluan khususnya dalam 
teknologi web. Misal dalam tulisan ini, <a class="linkC" href="http://www.zainalhakim.web.id/tentang-saya.html">saya</a>
 akan berbagi bagaimana membuat tulisan/text, membuat objek garis, dan 
menampilkan gambar dalam file flash yang dibuat dengan script php.<br />
Untuk membuat objek dalam flash dengan php, kita memerlukan sebuah 
extension yang namanya php_ming.dll. php_ming ini digunakan untuk 
membuat objek flash (SWF) seperti sprites, shape, gambar dll. Exstension
 ini biasanya sudah tersedia dalam paket php. Untuk memastikan extension
 ini sudah ada dan aktif, anda bisa cek dengan 2 <a class="linkC" href="http://www.zainalhakim.web.id/posting/membuat-file-flash-dengan-php.html">cara</a> :<br />
<ol>
<li>Cek dengan phpinfo.php (http://localhost/phpinfo.php)<br />
    <img alt="ming extension untuk flash" height="70" src="http://www.zainalhakim.web.id/uploads/image/ming-library.gif" width="449" /></li>
<li>Cek php.ini (liat dalam folder php)<br />
    <img alt="setting ming extension" height="229" src="http://www.zainalhakim.web.id/uploads/image/ming-php-ini.gif" width="487" /><br />
    Pastikan extension itu aktif (jika ada titik koma depanya dihilangkan)</li>
</ol>
Jika extension ming ini sudah aktif anda bisa coba script-script berikut<br />
<h3>
<cufon alt="Membuat " class="cufon cufon-canvas" style="height: 16px; width: 78px;"><cufontext>Membuat </cufontext></cufon><cufon alt="tulisan" class="cufon cufon-canvas" style="height: 16px; width: 51px;"><cufontext>tulisan</cufontext></cufon></h3>
Silahkan anda buat sebuah file dengan nama coba1.php, kemudian copy kode berikut :<br />
<pre><?php
$f = new SWFFont( 'Arial' );

$t = new SWFTextField();
$t->setFont( $f );
$t->setColor( 0, 0, 0 );
$t->setHeight(30);
$t->addString( 'Hello kawan' );

$m = new SWFMovie();
$m->setDimension(400,300);
$m->add( $t );

$m->save( 'coba1.swf' );
?>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="300">
<param name="movie" value="coba1.swf" /><param name="quality" value="high" />
<embed src="coba1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="300" />
</object></pre>
Dari kode diatas anda bisa atur apa jenis tulisanya (SWFFont), warna tulisan (setColor), mengatur besar tulisan (setHeight)<br />
Contoh diatas akan membuat sebuah file dengan nama coba1.swf, dan kemudian ditampilkan dengan perintah <object ....<br />
Cara lain bisa langsung dengan mengoutputkan dalam bentuk file flash dengan <a class="linkC" href="http://www.zainalhakim.web.id/posting/membuat-file-flash-dengan-php.html">cara</a> mengganti baris $m->save menjadi<br />
<pre>header( 'Content-type: application/x-shockwave-flash' );
$m->output( );
</pre>
<h3>
<cufon alt="Membuat " class="cufon cufon-canvas" style="height: 16px; width: 78px;"><cufontext>Membuat </cufontext></cufon><cufon alt="objek " class="cufon cufon-canvas" style="height: 16px; width: 47px;"><cufontext>objek </cufontext></cufon><cufon alt="garis" class="cufon cufon-canvas" style="height: 16px; width: 37px;"><cufontext>garis</cufontext></cufon></h3>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" height="300" width="400">

$s = new SWFShape();
$s->setLine( 10, 0, 0, 0 );
$s->movePenTo( 10, 10 );
$s->drawLineTo( 290, 290 );
$m->add( $s );

header( 'Content-type: application/x-shockwave-flash' );
$m->output( );
?></pre>
Dapat juga anda buat bergerak dengan kode :<br />
<pre><?php
$m = new SWFMovie();
$m->setDimension( 300, 300 );

$s = new SWFShape();
$s->setLine( 5, 0, 0, 0 );
$s->movePenTo( -100, -100 );
$s->drawLineTo( 100, 100 );
$ts = $m->add( $s );

$ts->moveTo( 150, 150 );

for( $i = 0; $i < 100; $i++ ) {
  $ts->rotate( 10 );
  $m->nextframe();
}
header( 'Content-type: application/x-shockwave-flash' );
$m->output( );
?>
</pre>
Semoga bermanfaat<br />
<br />
<br />
<br />
<b><i><span style="font-size: xx-small;">copyright<a href="http://www.zainalhakim.web.id/posting/membuat-file-flash-dengan-php.html" rel="nofollow" target="_blank">@ZainalHakim</a></span></i></b></div>
</div>

PHP SeputarBerita Tips'N'Trik Membuat Animasi Flash Dengan PHP

Anda mungkin sudah mengenal apa itu flash, yaitu sebuah jenis media digital yang bisa menampilkan gambar, tulisan dan memutar audio. F...

cara membuat database dan table mysql dengan phpmyadmin

10/04/2012 08:46:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h1 class="judulposting">
<cufon alt="phpmyadmin" class="cufon cufon-canvas" style="height: 24px; width: 145px;"><cufontext></cufontext></cufon></h1>
<div style="margin: 5px; text-align: center;">
</div>
<div style="margin: 5px; text-align: center;">
</div>
<div class="posting-detail">
<div class="post-item">
<img align="left" alt="Tips Mysql" height="128" src="http://www.zainalhakim.web.id/uploads/image/img-mysql.png" width="128" />Banyak
 aplikasi bantu untuk mengelola database mysql, diantaranya yang paling 
mudah dan banyak digunakan adalah phpmyadmin. Aplikasi phpmyadmin 
dikembangkan berbasis web sehingga sangat mudah digunakan. Biasanya 
aplikasi ini sudah terdapat dalam paket web server seperti xampp, lamp 
dll jika anda menginstall untuk dijalankan dikomputer pribadi (<a href="http://www.zainalhakim.web.id/posting/cara-installasi-php-di-lingkungan-windows.html">silahkan baca jika anda belum menginstall web server</a>). Bagi yang memiliki hosting php, biasanya juga tersedia dalam menu cpanel (caranya akan <a class="linkC" href="http://www.zainalhakim.web.id/tentang-saya.html">saya</a> bahas lain waktu).<br />
Pertama, buka browser dan jalankan phpmyadmin dengan mengetik 
http://localhost/phpmyadmin pada bagian address bar. Tunggu beberapa 
saat sampai ada tampilan seperti berikut :<br />
<img alt="Membuat database mysql" border="0" height="261" src="http://www.zainalhakim.web.id/uploads/image/phpmyadmin1.jpg" width="500" /><br />
Kolom sebelah kiri merupakan naviagasi daftar database yang sudah 
ada. Kolom kanan tempat munculnya table atau operasi2 yang dapat 
dilakukan dengan phpmyadmin.<br />
Untuk membuat database baru, ketikkan nama database pada kolom kanan 
dibawa tulisan create new database. Nama database sebaiknya ditulis 
tanpa spasi misal db_tamu, kemudian tekan tombol create. Setelah itu 
akan muncul tampilan seperti gambar berikut :<br />
<img alt="" height="190" src="http://www.zainalhakim.web.id/uploads/image/phpmyadmin2.jpg" width="500" /><br />
Kolom kiri menunjukkan database yang sedang aktif digunakan (baru 
dibuat), kolom kanan berisi menu untuk operasi yang bisa dilakukan dalam
 database aktif.<br />
Sekarang membuat tabel dalam database aktif. Caranya ketikkan nama 
tabel sebaiknya tidak menggunakan spasi contoh tb_tamu, isian jumlah 
field jika sudah diketahui boleh diisikan, jika belum bisa diisi jumlah 
perkiraan, misal diisi 3, kemudian tekan tombol go. Maka akan muncul 
tampilan seperti gambar berikut :<br />
<img alt="Membuat table dalam mysql" height="261" src="http://www.zainalhakim.web.id/uploads/image/phpmyadmin3.jpg" width="500" /><br />
Isikan nama field, tipe datanya dan panjangnya.<br />
Misal :<br />
field pertama : id, tipe int, panjang 10, index primary, autoincrement ya<br />
filed kedua : nama, tipe varchar, panjang 30<br />
field ketiga : alamat, tipe varchar, panjang 100<br />
Jika anda mau menambah field, isikan jumlah field pada kanan bawah dan tekan go. Jika sudah selesai tekan save.<br />
setelah berhasil akan muncul seperti gambar berikut :<br />
<img alt="Membuat susunan table mysql" height="261" src="http://www.zainalhakim.web.id/uploads/image/phpmyadmin4.jpg" width="500" /><br />
<br />
Semoga bermanfaat<br />
<br />
<br />
<br />
<b><i><span style="font-size: xx-small;">Copyright<a href="http://www.zainalhakim.web.id/posting/cara-membuat-database-dan-table-mysql-dengan-phpmyadmin.html" rel="nofollow" target="_blank">@Zainal_Hakim</a> </span></i></b></div>
</div>
</div>

PHP SeputarBerita SQL Tips'N'Trik cara membuat database dan table mysql dengan phpmyadmin

Banyak aplikasi bantu untuk mengelola database mysql, diantaranya yang paling mudah dan banyak digunakan adalah phpmyadmin. Apli...