201103 ~ Percobaan

8 March 2011

a

Tuesday, March 08, 2011

Ir. Sudiyono

No comments

ajdjtktpg.ad

Tuesday, March 08, 2011

Ir. Sudiyono

No comments

Catatan : Ganti Nama Lagu Preview Dengan Judul Lagu Sebenarnya Setelah DiDownload Agar Tidak Ada Penggantian File. Disini Nama Lagu Setelah Download Sama Semua.

Iwan Fals MP3

7 March 2011

Monday, March 07, 2011

Ir. Sudiyono

No comments

<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>

<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

<data:adStart/>

<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Breadcrumb includable

<b:skin><![CDATA[/*

....

.breadcrumbs {
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Monday, March 07, 2011

Ir. Sudiyono

No comments

Fungsi Kode Untuk Mengatur Tampilan Content Blog

Do you want to share?

Do you like this story?

Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.

1. Hanya pada Halaman Utama Blog
<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>
Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Contoh penggunaan kode ini bisa anda liat pada demo blog berikut. Jika sobat membaca artikel secara keseluruhan atau mengklik kategori post, 3 kolom diatas main post akan menghilang.

2. Kategori Post dan Single Post

<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>
Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca postingan secara keseluruhan).
Contoh penggunaan kode ini bisa Anda lihat pada demo blog tadi dimana ketika sobat mengklik kategori post atau membaca postingan secara keseluruhan, widget pada kolom footer dengan judul DheTemplate.com - New Free Blogger Template Everyday baru muncul. Widget ini tidak akan muncul pada halaman utama blog.

3. Halama Utama Blog dan Kategori Post

<b:if cond='data:blog.pageType != "item"'> ... </b:if>
Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget pada sidebar kiri dengan judul New Templates. Jika sobat membaca suatu postingan secara keseluruhan atau mengklik kategori post (About dan DheTemplate pada menu navigasi), maka widget tersebut akan menghilang.

4. Single Post

<b:if cond='data:blog.pageType == "item"'> ... </b:if>
Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget sidebar kiri dengan judul Blog Template dimana saat sobat membaca suatu postingan secara keseluruhan, maka widget tersebut baru muncul.

5. Halama Utama Blog dan Kategori Post
<b:if cond='data:blog.pageType == "index"'>
Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilan Widget Blog Pada Postingan Tertentu Saja
<b:if cond='data:blog.url == "URL_POST_TERTENTU"'> ... </b:if>
Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu. Untuk lebih jelasnya silahkan sobat melihat demo blog tersebut. Lalu klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday. Anda akan melihat widget blog dengan judul Templates By DheTemplate muncul. Widget tersebut tidak akan muncul apabila sobat membaca postingan blog yang lain. Misalnya sobat membaca postingan pada demo blog tersebut dengan judul DheTemplate.com, maka widget tersebut tidak akan muncul.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != "URL_POST_TERTENTU"'> ... </b:if>

Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain. Untuk lebih jelasnya, sobat klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday dan bandingan jika sobat mengklik postingan dengan judul DheTemplate.com. Apa yang akan Anda dapat?? Widget blog dengan judul BlogList tidak muncul pada artikel postingan dengan judul DheTemplate.com - New Free Blogger Template Everyday dan widget tersebut baru muncul pada artikel postingan dengan judul DheTemplate.com. termasuk juga artikel postingan yang lain dan halaman utama dan kategori post

Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul menjadi menghilang atau menghilang kemudian muncul. Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok (mungkin pada artikel selanjutnya). Semoga bermanfaat.

Monday, March 07, 2011

Ir. Sudiyono

No comments

Search for the </head> tag.

Add the following code just before the </head> tag.

Sunday, March 06, 2011

Ir. Sudiyono

No comments

Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> .

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREH2i4KmUm3CFxdknmaa74F5UeuRuFagjaztGKcAvIO48s8_CA6fKHroBz3ICG420bGLLnGCBxqdFr8qrtaJuIGByNPe0Fnt9xO4nYfaDoakeeOpPIRD5XYqK9shCcsZs2Uwzv_qrA9I/") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>

Cari kode <p><data:post.body/></p> . Kode setiap template berbeda - beda. Biasanya kodenya bisa berupa seperti berikut <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.

Setelah mendapatkan kode <p><data:post.body/></p> . Copy-paste kode dibawah ini tepat dibawah kode tersebut.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Simpan Template anda .

Sunday, March 06, 2011

Ir. Sudiyono

No comments

Google Translate :

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Recent Post :

<p><table><tr><td><a href="http://bloggers.com" rel="dofollow" ><img src="http://bloggers.com/b//cm/img_b_01.png" title="Bloggers - Meet Millions of Bloggers" alt="Bloggers - Meet Millions of Bloggers" /></a></td><td><a href="http://www.blogcatalog.com">BlogCatalog</a></td><td></td></tr></table></p><p><table><tr><td><a href="http://www.mybloglog.com/buzz/community/sudiyono/" title="Join My Community at MyBloglog!"><img src="http://www.mybloglog.com/buzz/images/buttons/btn_c14.png" style="border: 0px none;" alt="Join My Community at MyBloglog!" /></a></td><td><a href="http://www.yousaytoo.com/sudiyono"><img src="http://www.yousaytoo.com/images/yst/button_blue.gif" alt="Make Money Blogging" border="0" /></a></td><td><a href="http://blogs.top.org/business-finance/" title="Business & Finance (Management) - TOP.ORG"><img style="border:none;" src="http://img1.top.org/toporg_31772.gif" alt="Business & Finance (Management) - TOP.ORG" /></a></td></tr></table></p><p><table><tr><td><a href="http://www.blogflare.com/business.html" title="Business Blogs"><img src="http://www.blogflare.com/flare_15382.gif" border="0" /></a><a href="http://myhealthdegree.com/nutrition_degree.html" title="Nutrition Degree"><img src="http://www.blogflare.com/world.png"border="0"/></a></td><td><a href="http://www.blogtopsites.com/business/" title="Business Blogs" target="_blank"><img style="border:none" src="http://www.blogtopsites.com/v_93490.gif" alt="Business Blogs" /></a><br /><a target="_blank" href="http://www.blogtopsites.com/business/" style="font-size:10px;"></a></td><td></td></tr></table><p></p><table><tr><td><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="Y2ZCXWZTV4RBE" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /></form></td></tr></table><p></p><table><tr><td><a href="http://www.redcounter.net" target="_blank"><img src="http://www.redcounter.net/services/imagedigits/counter.php?aut=9e1e4953fcb926915380ad9a087c145701150b60a370a44e7c066ec7d5a40eb4c91663f301bc0b8a8d7e3a1c6582dc603e2042613fca223d2039c1378aa87045bca92f79c4c5491945bfe060da018ef3" alt=" free web counter Counter Powered by RedCounter" border="0" /></a></td><td><a href="http://www.counters4u.com" target="_blank"><img src="http://www.counters4u.com/backlink.php?aut=EF60387089C968920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C1" title="free BackLink by Counters 4 U" border="0" /><img src="http://www.counters4u.com/sr.php" width="1" height="1" border="0" /></a></td></tr></table></p><p><table><tr><td><script src="http://pub.mybloglog.com/comm3.php?mblID=2010122922263715&r=widget&is=normal&o=r&ro=4&cs=blue&ww=220&wc=single&l=a"></script></td></tr></table></p>

Sunday, March 06, 2011

Ir. Sudiyono

No comments

Admin Widget

Dashboard       : http://www.blogger.com/home
Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=####
Change Layout   : http://www.blogger.com/rearrange?blogID=####
Edit Posts      : http://www.blogger.com/post.g?blogID=####
New Post        : http://www.blogger.com/post-create.g?blogID=####

Breadcrumbs for Blogger :

Scroll down through your expanded widget code and look for the following piece of code:

<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>

Ganti dengan :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
    <b:if cond='data:blog.pageType == "item"'>
       <div class='breadcrumbs'>
         Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
         <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'>
             <b:loop values='data:post.labels' var='label'>
               <b:if cond='data:label.isLast == "true"'> »
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
               </b:if>
             </b:loop>
             » <span><data:post.title/></span>
           </b:if>
         </b:loop>
       </div>
    <b:else/>
      <b:if cond='data:blog.pageType == "archive"'>
        <div class='breadcrumbs'>
          Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
        </div>
      <b:else/>
        <b:if cond='data:blog.pageType == "index"'>
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == ""'>
            Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
          <b:else/>
            Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
          </b:if>
          </div>
        </b:if>
      </b:if>
    </b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

Cari dan ganti dgn Kode dibawah <b:skin><![cdata]
<b:skin><![CDATA[/*

....

.breadcrumbs {
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Adding a favicon to your blog :

Then, edit your blog template in html-mode, and add the following lines of code to the head of your template, just below the <head>-tag for example.

<link href='youriconfile.ico' rel='shortcut icon'/>
<link href='youriconfile.ico' rel='icon'/>

Semua Feed by Feedburner :

Buka template Anda dalam mode HTML. Dekat dengan bagian atas Anda akan menemukan baris kode ini:

<b:include data='blog' name='all-head-content'/>

ganti dengan :

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='http://feeds.feedburner.com/yourblogname' rel='alternate' title='RSS' type='application/atom+xml'/>
<link rel="service.post" type="application/atom+xml" title="YourBlogName - Atom" href="http://www.blogger.com/feeds/yourblogid/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=yourblogid" />

Ganti http://feeds.feedburner.com/yourblogname dengan url untuk memberi makan feedburner Anda.

Now save your template.
Sekarang kita telah tetap bagian auto-deteksi, masih ada isu-link feed pada halaman posting Anda. Feed-link ini harus dibuat tidak terlihat, sehingga pengunjung Anda tidak memiliki pilihan lain selain mengikuti link ke feed feedburner Anda.
Para feedlink standar yang disediakan oleh Blogger adalah kelas. Feed-link.

buka template dalam HTML-mode, dan di dalam tampilan kulit untuk baris berikut:

.feed-link {

ganti dengan:

.feed-link { display:none; }

Selamat! Pengunjung Anda tidak melarikan diri dari Feedburner!

http://yourblog/search/label/?max-results=100

Sunday, March 06, 2011

Ir. Sudiyono

No comments

Breadcrumbs for Blogger

With my new Blog Skin I also introduced a "Breadcrumb Trail" to my Blog. If this doesn't ring a bell, don't worry. Remember the Hansl & Gretchen fairy-tale?

Hansl and Gretchen were 2 kids from a very poor family. The parents were so poor that they had nothing to feed their children, and between them decided to take the kids into the forest and leave them to the wild animals. Hansl and Gretchen discovered these terrible plans, and decided to take pre-emtive measures. They took with them a piece of bread, and dropped breadcrumbs along the trail in order to find their way home. As might be expected, they didn't find home and they were captured by an evil witch (the breadcrumbs were eaten by birds, I guess). But the general idea got a strong foothold in the internet world, and nowadays you can find a breadcrumb trail on many a website to find your way back to the Home Page.

On the main page of my Blog there is no breadcrumb, because that is .... Home!

But as soon as you click on a specific post title, or on a label, or on an archive entry, you will see how the breadcrumb magically appears on top of the page:

Browse » Home » Tutorials » Breadcrumbs for Blogger

Now, here is an easy piece of code to put into your template, and breadcrumbs will be yours!

Step 1: Save your template
Go to the Layout tab, and click Edit HTML.
Download your template as an XML-file and save it onto your harddisk. If anything goes wrong, upload it again and not much harm will be done.

Step 2: Expand the widget code
Now check the checkbox to display your template's XML-code. Ready to hack? Here we go!

Step 3: Add a new Includable
We are going to modify the code of the Blog-widget. The default-widget uses a so-called "includable" (a chunk of code) to display a status-message above your posts when you have selected all posts with a certain label. We will turn off this default status message, and replace it with our breadcrumbs.

Scroll down through your expanded widget code and look for the following piece of code:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>

Now we will switch off the default status-message, by putting comments-brackets around it. (You can also delete the line, but I think leaving it there and commenting it out is more elegant in case you want to track back and debug).

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <data:adStart/>

Now add the following line, that will call our breadcrumb includable:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

Immediately above this 'main' includable, insert our new breadcrumb includable:

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
  <!-- No breadcrumb on front page -->
  <b:else/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
       <div class='breadcrumbs'> 
         Browse &#187;  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 
         <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'> 
             <b:loop values='data:post.labels' var='label'> 
               <b:if cond='data:label.isLast == &quot;true&quot;'> &#187; 
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
               </b:if> 
             </b:loop> 
             &#187; <span><data:post.title/></span> 
           </b:if> 
         </b:loop>
       </div> 
    <b:else/> 
      <b:if cond='data:blog.pageType == &quot;archive&quot;'> 
        <div class='breadcrumbs'> 
          Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/> 
        </div> 
      <b:else/> 
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
          <b:else/>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='main' var='top'>

You can also download the xml-code for the includable here:
Breadcrumb includable
Right-click the link, and select "Save as..." to save the XML-file on your harddisk. You can open it with Notepad, and copy-paste the code into your template.

Step 4: Add some CSS to the skin
The basic code of your breadcrumb is now in place. You can change its looks by adding a CSS-class .breadcrumbs to the skin of your Blog.
This is just an example:

<b:skin><![CDATA[/*

....

.breadcrumbs {
  float: left;
  width: 590px;
  font-size: 11px;
  margin: 5px 10px 20px 10px;
  padding: 0px 0px 3px 0px;
  border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Step 5: Save your template
Save your template and view the results. Enjoy!

Sunday, March 06, 2011

Ir. Sudiyono

No comments

/************************************************************************/
/* Rainbow Links Version 1.03 (2003.9.20)                               */
/* Script updated by Dynamicdrive.com for IE6                           */
/* Copyright (C) 1999-2001 TAKANASHI Mizuki                             */
/* takanasi@hamal.freemail.ne.jp                                        */
/*----------------------------------------------------------------------*/
/* Read it somehow even if my English text is a little wrong! ;-)       */
/*                                                                      */
/* Usage:                                                               */
/* Insert '<script src="rainbow.js"></script>' into the BODY section, */
/* right after the BODY tag itself, before anything else.              */
/* You don't need to add "onMouseover" and "onMouseout" attributes!!   */
/*                                                                      */
/* If you'd like to add effect to other texts(not link texts), then    */
/* add 'onmouseover="doRainbow(this);"' and                            */
/* 'onmouseout="stopRainbow();"' to the target tags.                   */
/*                                                                      */
/* This Script works with IE4,Netscape6,Mozilla browser and above only, */
/* but no error occurs on other browsers.                               */
/************************************************************************/

////////////////////////////////////////////////////////////////////
// Setting

var rate = 20; // Increase amount(The degree of the transmutation)

////////////////////////////////////////////////////////////////////
// Main routine

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID

if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}

//=============================================================================
// doRainbow
// This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}

//=============================================================================
// stopRainbow
// This function stops to change a color.
//=============================================================================
function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}

//=============================================================================
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }

        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

//=============================================================================
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }

        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

//=============================================================================
// Change Color
// This function changes a color actually.
//=============================================================================
function ChangeColor()
{
    objActive.style.color = makeColor();
}

//=============================================================================
// makeColor
// This function makes rainbow colors.
//=============================================================================
function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?

    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;

        if (elmH < 60) {
            elmR = t1; elmB = t2; elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1; elmB = t2; elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1; elmR = t2; elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1; elmR = t2; elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1; elmG = t2; elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1; elmG = t2; elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }

    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;

    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;

    return '#' + elmR + elmG + elmB;
}

Sunday, March 06, 2011

Ir. Sudiyono

No comments

Membuat Menu Dropdown :

Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

&<BloggerArchives>

<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>

</BloggerArchives>

Ganti :

<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value;">

<option selected>- Archives -</option>

<BloggerArchives>

<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>

</BloggerArchives>

</select>

   6. Selesai.

Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :

   1. login dulu, tentunya dengan id anda

   2. klik LAYOUT

   3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive

   4. Klik Edit pada kotak Blog Archive tadi

   5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek

   6. Klik Save Changes

   7. Selesai

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blog Tutorial -</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih Template</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">warna & hurup</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Posting Artikel</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">Read more (1)</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Text area</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Blogger Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Yahoo!Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Download Gratis</option>

</select></form> Hasilnya akan seperti ini :

http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html

Membuat menu D'tree
Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara membuat menu yang menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini adalah sebagai referensi agar kejadian tersebut tidak terulang kembali.

Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :

pasanglah kode ini di atas kode </head> :

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila saya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil sobat akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya : copy kode sumber script ini lalu paste pada address bar browser internet sobat :

http://amen24.googlepages.com/Readmore.js

Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnya adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer sobat. Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkan saya sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan script ini mempunyai alamat :

http://juned.googlepages.com/Readmore.js

Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di atas seperti ini :

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :

<script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />

Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi script tersebut.

Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk mencuri kode milik orang lain.

Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hari agak menyulitkan pembaca, sehingga kali ini saya akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.

Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com, silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain sobat harus memahaminya, oleh karena alasan tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.

Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut :

Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

Kode di bawah ini di simpan di bagian sidebar :

<h2>Example</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">

</script>

</div>

Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin tidak usah saya terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link milik sobat dapat di pasang pada kode-kode di atas.
Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka saya akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah membuat sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya : source code dari menu yang saya buat seperti ini :

Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

Kode di bawah ini di simpan di bagian sidebar :

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">

</script>

</div>

Untuk melihat hasilnya, silahkan klik dulu di sini !

Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :

Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :

d.add(1,0
d.add(2,0
d.add(4,0
d.add(6,0
d.add(7,0

Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika sobat menginginkan menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda kemudian di belakang koma harus di susul dengan angka nol.

d.add(3,1
d.add(5,1
Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama. Akan tetapi angka di depan angka 1 (satu) adalah angka penentu bahwa menu ini akan menjadi cabang dari kode --> d.add(1,0

d.add(10,5
d.add(20,5
d.add(30,5
d.add(40,5
d.add(50,5
d.add(60,5

Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu --> d.add(5,1
begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1

Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal seperti ini :

d.add(10,3,'','','','','');

Jika di jabarkan denga isi menu, seperti ini :

d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');

isi ke 1 = adalah tulisan yang akan muncul terlihat langsung
isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan tetapi ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.
isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
isi ke 5 = adalah untuk alamat image icon yang mau di munculkan
isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5

Misal :

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
Blogroll = tulisan yang kan muncul pada menu induk
http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau dunculkan di samping tulisan Blogroll
http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini alamatnya sama, maka gambar icon seolah tidak mengalami perubahan)

dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.

Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsung bikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup data dari template sobat:

# Untuk template Klasik

   1. Sign in di blogger

   2. Klik menu Template

   3. Klik menu Edit HTML

   4. Copy seluruh kode HTML yang ada, lalu save untuk back up

   5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :

      <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
      <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

   6. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):

      <div class="dtree">

      <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

      <script type="text/javascript">
      
      </script>

      </div>

   7. Klik tombol Simpan Perubahan Template

   8. Selesai.

# Untuk Template Baru

   1. Sign in di blogger

   2. Klik menu Layout

   3. Klik menu Edit HTML

   4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman

   5. Copy paste kode berikut di atas kode </head>

      <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
      <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

   6. Klik tombol Simpan Template

   7. Klik menu Elemen Halaman yang ada di sebelah atas monitor

   8. Klik tulisan Tambahkan sebuah Elemen Halaman

   9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)

      <div class="dtree">

      <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

      <script type="text/javascript">
      
      </script>

      </div>

11. Klik tombol Simpan

Read More Versi baru :

   7. Copy kode berikut, lalu paste tepat di atas kode </head>

      <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

   8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :

      <h3 class='post-title'>
      <b:if cond='data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
      <data:post.title/>
      </b:if>
      </h3>
      </b:if>
      <div class='post-header-line-1'/>
      <div class='post-body' expr:id='"post-" + data:post.id'>
      <b:if cond='data:blog.pageType == "item"'>
      <p><data:post.body/></p>
      <b:else/>
      <style>#fullpost {display:none;}</style>
      <p><data:post.body/></p>
      <span id='showlink'>
      <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
      </span>
      <span id='hidelink' style='display:none'>
      <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
      </span>
      <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
      </b:if>
      <div style='clear: both;'/> 
      </div>
      </div>
      .... rest of template code ....

   9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

   1. Klik menu Pengaturan

   2. Klik menu Format

   3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting

      <span id="fullpost">

      </span>

   4. Klik tombol Simpan Setting

   5. Selesai.

Cara posting artikel :

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :

<span id="fullpost">

</span>

Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum kode </span>.

Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....

Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.

Perataan Posting :
Selamat mencoba !

Untuk menu Edit HTML

Bagi sobat yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini :

Rata kiri :

<div align="left">

isi artikelnya di sini

</div>

Rata kanan :

<div align="right">

isi artikelnya di sini

</div>

Rata kiri-kanan :

<div align="justify">

isi artikelnya di sini

</div>

Supaya tengah semua :

<div align="center">

isi artikelnya di sini

</div>

Agar hasilnya kelihatan, saya berikan contoh dengan mengutif isi artikel di blog ini.

Contoh cara membuatnya seperti ini :

Untuk yang rata kiri :

<div align="left">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>

Pasang Kode Tuker Link :

<a href="http://kolom-tutorial.blogspot.com" target="_blank"> <img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

Nah itu tadi merupakan contoh link untuk membuat link ke blog ini, untuk ngelink ke blog sobat ya tinggal sesuaikan saja.

Apabila kode link sudah ada, langkah selanjutnya adalah membuat text area untuk menampung seluruh kode agar nanti bisa di copy oleh pengunjung yang mau nge link ke blog sobat, kodenya seperti ini :

<textarea name="code" rows="6" cols="20">

<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</textarea>

Beberapa langkah sudah di lewati, langkah selanjutnya adalah merangkaikan kode-kode tadi, misalkan kode tukeran link ingin di bawah gambar chicklet agar tampak lebih menarik, kodenya kira-kira seperti ini :

<h2>Tukeran link</h2>
<br/><br/>
Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali
<br/><br/>
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial ">
<br/><br/>
<textarea name="code" rows="6" cols="20">
<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</textarea>

http://www.free-blog-content.com bikin Kalender

Buat daftar isi blog :

Copy paste kode CSS berikut di atas kode ]]></b:skin>

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}
Klik tombol SIMPAN TEMPLATE

Copy paste kode berikut ke dalam elemen yang muncul
<div id="toc"></div>

# Pindahkan elemen yang baru di buat tepat di atas elemen Post

# Klik tombol Simpan yang berada di sebelah atas

# Klik tulisan Tambah sebuah Elemen Halaman kembali

# Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML

# Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen

<div id="toclink"><a href="javascript:showToc();">Lihat Daftar Isi</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

# Ganti tulisan YOURBLOG dengan nama blog sobat

# Klik tombol Simpan

Cara pasang search Engine :

<form id="searchform" action="http://AlamatBlogAnda.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>

Pasang Google Talk di Blog :

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350">
</iframe><p style="margin:-8px 0"><br /><center>
<a style="text-decoration:none;font-size:60%;" href="http://kolom-tutorial.blogspot.com/2008/01/pasang-google-talk-di-blog.html">Add to your blog</a></center></p>

Tombol Google talk : jika tidak cocok dengan kode diatas :

<script src="http://talkgadget.google.com/talkgadget/button"></script>

Cara membuat Elemen Persis Di bawah Header :

#

Copy kode berikut, lalu paste di atas kode ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

#

Cari kode yang mirip dengan kode di bawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
    </div>
#

Copy kode berikut lalu paste persis di bawah kode tadi :

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

#

Klik tombol SIMPAN TEMPLATE.

Membuat Warna Link Berkedip Warna Warni:

   3.

      Uploadlah file tersebut ke server yang biasa anda gunakan, contoh ke google page creator.


   4.

      Jika sudah di upload, ambillah alamat URL file tersebut, contoh ( ini contoh saja, jangan di pakai) :


      http://kangrohman.googlepages.com/rainbow.js


   5.

      Ubahlah alamat URL tersebut menjadi seperti ini (contoh saja) :



      <script src='http://kangrohman.googlepages.com/rainbow.js'/>



Langkah Kedua :

   1. Silahkan login ke blogger dengan ID .
   2. Klik Tata Letak.
   3. Klik tab Edit HTML.
   4. Cari kode seperti ini </head>.
   5. Simpan kode scriptnya di bawah kode </head> (contoh saja).


Meta tag blogger terbaik:

Agar lebih mudah, cari kode berikut : <b:skin><![CDATA[
Paste diatasnya

<b:if cond='data:blog.pageType != "item"'>
<meta expr:content='data:blog.pageTitle + " - deskripsi"' name='description'/>
<meta expr:content='data:blog.pageTitle + ", keywords"' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - deskripsi"' name='description'/>
<meta expr:content='data:blog.pageName + ", keywords"' name='keywords'/> </b:if>

Cara Membuat Tabel di Blog
Setelah beberapa hari absen, akhirnya muncul lagi di sini. Bukannya saya tidak bisa untuk membuat tulisan baru, cuma agak sedikit males untuk menyentuh tut keyboard. Walaupun sedikit kurang semangat, saya paksain juga deh buat gelitikin si keyboard. Alasan utamanya yaitu ada sedikit rasa takut. Emang takut apaan, takut ama hantu? bukan donk! masa sudah zaman lampu neon begini masih takut sama hantu. Takut yang saya maksud adalah takut blog ini di tinggalkan sama para pembaca apabila kelamaan tidak saya update. Oh begitu ya! yups.... soalnya tidak bisa di pungkiri bahwa blog ini merupakan salah satu penyumbang dana buat saya tiap bulan nya. Ya lumayanlah... dari kedua program yang saya ikuti yaitu gabung di http://www.resepbisnis.com/?id=rohman dan di http://www.obralplus.com/?id=rohman ada saja rezeki yang saya dapat tanpa di duga-duga.

Intermezo nya tidak usah lama-lama, nanti yang baca malah kabur lagi. Baiklah, sekarang saya membicarakan topik utama yang mau saya ulas yaitu cara membuat tabel di blog/website. Pertanyaan ini di ajukan oleh salah satu sobat yang saya lupa namanya karena sudah agak lama melalui buku tamu, dan saya juga sedikit males membuka dokumen-dokumen lama di buku tamu. Bagi yang merasa menanyakan soal ini, silahkan absen saja di kotak komentar.

Untuk membuat tabel di blog, bisa kita lakukan dengan kode HTML yang khusus untuk membuat tabel tentunya. Perintah yang di pakai adalah <table> ..... </table>. Di dalam tabel, kita bisa bisa beberapa atribut di dalamnya, antara lain yaitu:

    * bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

    * align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

    * cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .

    * border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel" .

    * cellspacing
      : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .

    * height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .

    * height : untuk mengatur lebal tabel. Penempatan kodenya : height="pixel"|"%" .

Sintaks atau kode yang terbentuk yaitu seperti ini :

<table align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%">

.....................

</table>

Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).

Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).

Sintaks atau kode yang terbentuk yaitu seperti ini :

<caption align="top"|"bottom">

............................

</caption>

elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :

    * align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

    * valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"

    * bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

Sintaks atau kode yang terbentuk yaitu seperti ini :

<tr align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom">

.....................

</tr>

elemen TH(Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:

    * align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

    * valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"

    * bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

    * colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .

    * rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Sintaks atau kode yang terbentuk yaitu seperti ini :

<th align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</th>

Elemen TR(Table Row) adalah elemn untuk membuat kolom. atribut yang bisa di pakai antara lain :

    * align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

    * valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"

    * bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

    * colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .

    * rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Sintaks atau kode yang terbentuk yaitu seperti ini :

<td align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</td>

Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :

Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :

<table width="200" border="1">
<tr>
<td>

Contoh

</td>
</tr>
<table>

Hasilnya akan seperti ini :

Contoh

Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja kode align="center" pada kolomnya. misal seperti ini :

<table width="200" border="1">
<tr>
<td align="center">

Contoh

</td>
</tr>
</table>

Hasilnya akan seperti ini :

Contoh

Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :

<table width="200" border="9">
<tr>
<td align="center">

Contoh

</td>
</tr>
</table>

Hasilnya akan seperti ini :

Contoh

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :

<table width="300" border="9">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
</table>

Hasilnya akan seperti ini :

Contoh     Contoh juga denk

Kalau ingin dua baris, kira-kira kodenya seperti ini :

<table width="300" border="1">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
</table>

hasilnya seperti ini :

Contoh     Contoh juga denk
Contoh     Contoh juga denk

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :

<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
<tr bgcolor="yellow">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
</table>

hasilnya seperti ini :

Contoh     Contoh juga denk
Contoh     Contoh juga denk

Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini :

Tabel 1.1 Data Teknisi
No.     Nama
1.     Juned
2.     Jaka kelana
3.     Ibro

Kode yang di pakai bisa seperti ini :

<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Teknisi</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Juned</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>jaka kelana</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Ibro</td>
</tr>
</table>

Hasilnya kira-kira seperti ini :

Tabel 1.1 Data Teknisi
No.     Nama
1.     Juned
2.     jaka kelana
3.     Ibro

Selain untuk menempatkan tulisan, sebuah tabel pun banyak di gunakan untuk menempatkan gambar agar terlihat lebih rapih. Contoh :

<table width="300" border="1" cellpadding="20">
<tr>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>

</td>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"/></a>

</td>
</tr>
<tr>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"></a>

</td>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>

</td>
</tr>
</table>

Hasilnya akan seperti ini :

mau pinter membuat blog atau website? klik saja di sini     mau software murah tapi sangat berguna? klik saja di sini
mau software murah tapi sangat berguna? klik saja di sini     mau pinter membuat blog atau website? klik saja di sini

jika sobat beranggapan bahwa garis tabel menggangu pemandangan, maka kita bisa mensiasatinya dengan cara menghilangkan garisnya yaitu nilai borde rnya kita buat 0 (nol).
contoh :

<table width="300" border="0" cellpadding="20">
<tr>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>

</td>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"/></a>

</td>
</tr>
<tr>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat berguna? klik saja di sini"></a>

</td>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/></a>

</td>
</tr>
</table>

Hasilnya akan seperti ini :

Percobaan

Categories

Blog Archive

8 March 2011

a

a

Iwan Fals MP3

7 March 2011

Fungsi Kode Untuk Mengatur Tampilan Content Blog

Do you want to share?

Do you like this story?

related post

6 March 2011

related post

widget

beta cantik

Breadcrumbs for Blogger

rainbow js

Rahman tipos