linkbucks
Showing posts with label tips. Show all posts
Showing posts with label tips. Show all posts

Kode Html pada postingan

Kemaren waktu membaca komentar membaca disini, yang salah satunya bagaimana cara memasukkan kode html kedalam artikel pada blogspot.
Langkah yang pertama kita harus karakter perintah dari program html.
Karakter-karakter yang sering di gunakan yaitu seperti yang tertera pada tabel di bawah ini :





























































Karakter
Notasi
Keterangan
<
&lt;
Kurung runcing terbuka
>
&gt;
Kurung runcing tutup
&
&amp;
Tanda Dan
"
&quot;
Tanda petik ganda
±
&plusmn;
Tanda plus minus
Spasi
&nbsp;
Tanda Spasi
©
&copy;
Tanda hak cipta (copyright)
®
&reg;
Tanda terdaftar (Registered)


Read More......

Cara membuat menu dropdown (acordion) pada blogspot

Siapa bilang blogspot tidak bisa dioptimalkan n berpenampilan seperti web2 yang lain. n sapa juga yang bilang kalo menu dropdown acordion hanya bisa dipasang di joomla saja. diblogspot pun ternyata bisa kok.... Penasaran dengan adanya dropdown menu disebelah kanan blog ini. n ingin menerapkan diblogspot anda caranya cukup mudah kok.............
Berikut cara membuat dropdown menu (acordion) seperti yang di blog ini,
1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut setelah kode head

<script language='javascript' src='http://www.geocities.com/wawunx_5155/jquery.js' type='text/javascript'></script>
<script language='javascript' src='http://www.geocities.com/wawunx_5155/ddacordion.js' type='text/javascript'></script>
<script language='javascript' src='http://www.geocities.com/wawunx_5155/ddcordian2.js' type='text/javascript'></script>

kemudian klik save template

4. Lalu klik/centang Expand Widget Templates cari kode ]]> setelah ketemu copy kode CSS berikut....lalu paste diatas kode ]]>


.alert { background: #DDE4FF;
text-align: left;
padding: 10px 10px 10px 10px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}
.arrowlistmenu{
width: 320px; /*ukuran lebar dari menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://i302.photobucket.com/albums/nn120/wawunx/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://i302.photobucket.com/albums/nn120/wawunx/titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(http://i302.photobucket.com/albums/nn120/wawunx/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
Kemudian save template anda..

5. Masuk kedalam edit pageElement kemudian masukkan kode ini :



<div class="arrowlistmenu">
<h3 class="menuheader expandable">Judul Menu</h3>
<ul class="categoryitems">
<li><a href="http://wawunx.blogspot.com">Isi Menu</a></li>
<li><a href="http://wawunx.blogspot.com">Wawunx ngeblog</a></li>
</ul>

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
<li><a href="http://wawunx.blogspot.com">isi</a></li>
<li><a href="http://wawunx.blogspot.com">Wawunx ngeblog</a></li>
</ul>

</div>
Coba sekarang lihat hasilnya .....

ps:
- Jumlah Menu bisa sebanyak yang anda suka..copy yang berwarna merah..kemudian paste diatas
- Menu ini berfungsi baik pada browser ini : FF1+ IE6+ Opr9+ Crome+Flock

Read More......

Membuat Tag Clouds cumulus beranimasi

Waktu dikost iseng browsing keblog temen2 blogger ternyata aku menemukan ilmu baru namanya tag cloud.Mungkin diantara kalian sudah ga asing lagi dengan nama tag cluds. Pokoknya keren banget dech tag berbentuk flash atau animasi.
Kemudian aq browsing mencari kesana kemari akhirnya aq menemukannya. Namanya adalah tag clouds cumulus ini merupakan bikinan dari nona bloger buster.
tanpa basa basi aq langsung menerapkan blogku ini sebagai kelinci percobaan dan hasilnya.......
Tara......... dapat anda lihat hasilnya diblog ini.
Mau mencoba....
Caranya cukup mudah kok....
  1. tentunya masuk ke account blogger anda
  2. kemudian pada kontrol panel masuk kebagian tata letak atau layout kemudian edit html dan pilih expand widget.(sebelumnya backup dulu template anda)
  3. untuk mempermudah pencarian klik tombol Ctrl + F pada keyboard anda dan masukkan kode dibawah ini
<b:section class='sidebar' id='sidebar' preferred='yes'>

setelah ketemu kemudian copypaste kode dibawah ini tepat dibawahnya.

<b:widget id='labelku' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Selanjutnya klik tombol save dan refresh halaman depan anda.

NB: jika anda ingin merubah dimensi panjang dan lebar, besar font dan background, cari tag pada bagian ini kemudian diganti dengan yang anda inginkan.
  • Untuk menyesuaikan ukuran tersebut dengan desain blog anda silakan di edit pada bagian yang terlihat dibawah ini
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;)
  • jika ingin merubah background silakan edit pada bagian dibawah ini
so.addVariable("tcolor", "0x333333");

  • Jika ingin merubah besar huruf yang ditampilkan silakan edit pada bagian seperti dibawah ini
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Selamat mencoba dan berkarya :)

Read More......
 
Blogger Indonesia
eXTReMe Tracker

Followers