Pasang Jam

Untuk memasang jam ke dalam sidebar blog kita caranya gambang,  karena kita mengunakan layanan web clockklik.

Pertama

Buka  situsnya web clocklink. dalam galeri pilih model jam yang paling menarik menurut kita.

Kedua

Setelah mendapatkan tampilan jam yang di inginkan klik tulisan View Html Tag. pada jendela yang terbuka klik Accept. setelah itu dalam panelnya atur format jam, kemudian pilih salah satu kode yang ingin kita copy pastekan. yang pertama berformat javascript, sedangkan kotak yang kedua berformat file flash.

Ketiga

Setelah itu copy paste salah satu kode clocklink ini pada elemen Html Java Script. ( jika belum tahu tentang elemen Html /Java Script baca di sini )

 

Technorati tags: Blogger Tutorial, Widget

Menampilkan Recent Post Atau judul artikel dengan ajax feed Rss

" Mas saya tertarik dengan " berita online " ( recent post. red ) yang bisa berpindah-pindah gitu. gimana cara buatnya "

Demikianlah  pertanyaan saudara Anggoro, yang masuk melalui kotak komentar dan mas ini juga pernah tanya lewat shoutbox.

Jika anda bloem mengerti dengan maksud  ketertarikan mas yang bertanya itu silahkan klik saja di sini Demo.

Dan saudara akan melihat Recent Post dari judul artikel yang bergerak-gerak atau berpindah-pindah seperti memakai kode Marquee, Tapi ini lebih halus dan Ciamikkk tenan.

Untuk memasangnya ke dalam blog, kita harus mempunyai Google's Ajak Feed Api, yang bisa kita dapatkan  di group-nya google. untuk langkah-langkahnya bisa anda ikuti di bawah ini

Langkah Pertama : Daftar untuk memiliki API Key.

Buka code.google.com kemudian klik tulisan Sign up for an Api Key. ( jika ada pertanyaan untuk login, gunakan google akun milik kita )

Setelah itu terbuka jendela agreement . tandai ( cekbox ) -> kemudian masukan nama blog kita dan klik tombol Generate Api Key.

Langkah Kedua : Menyimpan kode Api Key.

Simpan di komputer kita kode Api Key. di bawah tulisan Your key is: atau untuk lengkapnya cari di kolom tulisan Here is an example web page to get you started:

Contoh na seperti  alamat Api Key yang saya miliki ini.

http://www.google.com/jsapi?key=ABQIAAAAlH2AVYF2BpHOrr
BUiKTxqhQOjbF87P1Hq2IQKvgir1U9QH77mBQf6a3JQmBlj24agls_bXW0mAUxyg

Langkah Ketiga : Memasukan Kode Css Dan JSON file.

Buka blog kita pada halaman Template pilih tab Edit Html kemudian di atas kode/ tag penutup. 

</head>

simpan kode  ini.

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>

<script src='http://jaloee.googlepages.com/gfeedfetcher.js' type='text/javascript'/>
<script src='http://jaloee.googlepages.com/gajaxscroller.js' type='text/javascript'>

/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type='text/css'>

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1{ /*Demo 1 main container*/
width: 90%;
height: 30px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
}

#example2{ /*Demo 2 main container*/
width: 600px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
}

#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}

#example3{ /*Demo 3 main container*/
width: 250px;
height: 280px;
border: 1px solid navy;
padding: 4px;
}

#example3 div p{ /*Demo 3 P element that separates each entry*/
margin-top: 0;
margin-bottom: 7px;
}

code{ /*CSS for insructions*/
color: red;
}

</style>

Kemudian ganti tulisan ini :

http://www.google.com/jsapi?key=YOUR-API-KEY

dengan alamat dan kode API KEY yang kita miliki .

Setelah beres dengan pekerjaanya Klik tab Simpan Template 

Langkah Keempat : Menambah Elemen Html/JavaScript

buka tab Elemen Halaman kemudian dalam penambahan elemen pilih elemen Html /JavaScript.

setelah itu masukan kode ini.


<script type="text/javascript">
var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new")
cssfeed.addFeed("Judul", "http://www.namakamu.blogspot.com/rss.xml ") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

a. " Judul"

merupakan tulisan yang akan kelihatan di ujung tulisan ( ganti dengan nama kita atau nama blog misal : Nyahooo

b. http://www.namakamu.blogspot.com/rss.xml

merupakan alamat feed ,  ( ganti dengan alamat feed kita alamat feed komentar atau  bisa juga alamat feed media berita seperti Detik, Republika, Atau bisa juga alamat Feed blog ini - http://catalog-tutorial.blogspot.com/rss.xml . halah promosi.

c. "Date" :

menunjukan  tanggal  yang akan ditampilkan . (  jika kita  ingin menampilkan sunber beritanya tulis "Label". dan Jika kita ingin menampilkan sumber berita, tanggal berikut waktunya tulis saja "Label Datatime"

d. 10, "date" :

menunjukan jumlah Feed yang akan di tampilkan. dan pengurutanya berdasarkan waktu/tanggal.

Cari di sumber tutorial.

Untuk menambah variasi lain dari cara menampilan feed atau judul artikel di atas kita dapat mengaksesnya di www.dynamicdrive.com

Alamat Feed KIta.

Alamat Feed yang kita miliki ada banyak.

1. http://namakamu.blogspot.com/rss.xml
2. http://namakamu,blogspot.com/atom.xml
3. http://feeds.feedburner.com/namafeedmu
4. http://namakamu.blogspot.com/feeds/comments/default?alt=rss (feed untuk komentar).

Alamat feed media berita di tanah air.

1.http://feeds.feedburner.com/detikfoto
2.http://feeds.feedburner.com/tempophoto
3.http://feeds.feedburner.com/Detikcom
4.http://feeds.feedburner.com/Kompascom
5.http://feeds.feedburner.com/Detikinet
6.http://feeds.feedburner.com/Gempa/Besar
7.http://feeds.feedburner.com/Bencana

Atau googling saja, cari feed yang lainnya.

del.icio.us tags: Recent Post, Feed, Tutorial New Blogger

Technorati tags: Recent post, feed, Tutorial new Blogger

Label Tab Ala hoctro Dan hackosphere

Setelah kemarin menulis artikel tentang Label Cloud Tampa JavaScript, sekarang saya akan  menulis alternatif lain untuk menampilkan  Label, yakni  dalam bentuk Tab Horizontal. yang diletakan posisi ideal na di bagian header, baik itu atas ,di bawah atau di samping header.
ilustrasi gam:

 

Untuk memasang atau menampilkan label seperti gambar di atas yang perlu kita  lakukan, langkah-langkahnya seperti berikut ini. 

Langkah Pertama : Menyimpan atau Memasukan kode Css menu.

Buka blog kita, dalam halaman Template buka tab Edit Html. kemudian cara kode ini.

]]></b:skin>

Setelah ketemu letakan atau masukan  di atas ]]></b:skin> tersebut.
kode css menu ini.

/*- Menu Tabs F--------------------------- */

    #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #666;
      }
    #tabsF ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("http://jaloee.googlepages.com/tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("http://jaloee.googlepages.com/tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }

ilustrasi gam :

 

Langka Kedua : Menambah Halaman Untuk Bagian Header.

Kemudian cari dan ganti angka di baris kode ini.

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

di ganti menjadi .( dari 1 menjadi 2. dari No menjadi Yes ): lihat tulisan yang di pertebal.

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

 SIMPAN TEMPLATE

 

Langkah Ketiga : Menambah Elemen Label.

Setelah beres dengan pekerjaan di atas. masukan atau simpan kode di bawah ini.

<b:widget id='Label10' locked='false' title='' type='Label'>
  <b:includable id='main'>
    <div id='tabsF'>
    <ul>
    <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
      <b:loop values='data:labels' var='label'>
        <li><a expr:href='data:label.url +
"?max-results=100"'><span><data:label.name/></span></a></li>
      </b:loop>
    </ul>
    <!-- <b:include name='quickedit'/> -->
    </div>
  </b:includable>
</b:widget>

Letakan di antara kode di bawah ini.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='2' showaddelement='Yes'>
<b:widget id='Header1' locked='true' title='SHOTOSHOP SATU (Header)' type='Header'/>

Letakan di sini

</b:section>
    </div>

Cara Lain Dari Hackosphere

Label Tab  di atas merupakan cara yang dilakuan oleh Hoctro, yang memasukan semua nama label . Sedangkan cara kedua yang di lakukan oleh blog na hackosphere membatasi jumlah label yang akan kita jadikan Label Tab-nya. - artinya kita bisa mensetting  dan mengatur jumlahnya.

 

Caranya setelah melakukan pada langkah yang kedua di atas pada langkah ketiganya masukan kode berikut ini.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home
</span></a></li>
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (labelnum++ &lt; 5) {
document.write("<li><a expr:href='data:label.url +
"?max-results=100"'><span><data:label.name/></span></a></li>");
}
</b:loop>
</script>
</ul>
</div>
</b:includable>
</b:widget>

Jika kita ingin menambah jumlah label yang akan di tampilkan ganti angka 5 di kode tersebut dengan jumlah yang kita inginkan.

Dan JIka kita ingin meng-index label  menurut jumlah yang terbanyak. ganti saja dalam elemen label  dari Alfabetik menjadi Berdasarkan Frekuensi. 

 

Pilihan Model Tab Menu.

Jika kita kurang suka dengan model tampilan Css menu-nya. kita dapat memilih dan mendonlotnya di sini. atau lihat dulu tampilannya di sini.

yang perlu kita lakukan, jika kita misalnya memilih model  TabsG maka ganti kode ini.

<div id='tabsF'>

menjadi :

<div id='tabsG'>

Technorati tags: Label Tabs, Tutorial New Blogger

del.icio.us tags: Label Tabs, Tutorial New Blogger

Kreasi Membuat Layout Ala Yahoo

PHOTOSHOP TOTO-REAL

Kreasi Membuat Layout Ala Yahoo.
Level : Untuk semua umur ( kecuali bayi ).
Bahasa : Bisu.
Format : *.swf. ( file flash / video ).
Size : 640 x 480 px.
Ukuran File : 11 Mb.
Donlot : di sini.

File pendukung :
Install Font Yahoo dan Styles Web20layerStylesv1.
Donlot : di sini.

Atau donlot file Yahoo.psd

Technorati tags: Yahoo Layout, Photoshop Tutorial

Tutorial Header : Simple Gradient White Blue

T utorial lumayan bagus tentang membuat desain header dari situs originmaker , yang di beri judul "create a simple gradient header in photoshop ". desain yang di dominasi warna biru sangat elegan.

Saya coba iseng ngikutin tutorial-nya di photoshop Cs 1, dan tak lupa saya rekam lewat program capture. Walaupun kebanyakan hasil akhirnya saya reka-reka sendiri.. hiksss.

Dan kemarin saya ngikutin tutorialnya tidak sampai tuntas, keburu sibuk dengan urusan perut.

Bagi yang mau belajar membuat header, rasanya jangan lewatkan tutorial yang bagus ini. kalau mau untuk bahan perbandingan boleh juga saudara lihat hasil  sementara yang saya buat dan di rekam lewat file video kira-kira sebesar 11 mb.

View Tutorial : originmaker.com 

Donlot Video Tutorial  : header proj 2 

Technorati tags: Header Layout, Photoshop Tutorial

Labels Cloud tampa java script

T ernyata oh ternyata. Terutama ini lebih di khususkan bagi yang mempunya kolom sidebar-nya cukup lebar, misalkan sekitar 225px ke atas, ( contohnya bisa lihat lebarnya kolom sidebar blog ini ) .

Jika mengunakan pengurutan labelnya di biarkan jatuh ke bawah , maka akan banyak space kosong yang terbuang percuma. tak enak di lihat layauuu. ( ngertikan maksudnya )

Solusinya bisa saja kita mengunakan sistem label Tag Cloud, biar tulisan labelnya memanjang secara horizontol, dan itu merupakan pilihan yang paling tepat.

Namun ada cara lain yang paling mudah dan murah walaupun tidak sebaik tag Cloud, karena cara yang akan saya uraikan ini tidak mengunakan unsur fietnah dan Java Script. ( terutama cocok sekali bagi yang tidak suka dengan Java - java timur, java tengah atau java barat ).

Sebelum kita lanjutkan inilah tes DNA perbedaan antara labels cloud yang asli dengan label cloud manuali tampa java script. ( kalau ingin lebih menarik tambahkan saja icon-icon luthu di setiap labelnya )

Baiklah untuk yang penasaran ingin mebaca tulisan ini, kita lanjutkan saja cara membuatnya.

Pertama : pasang dulu elemen label ke blog kita, beri judul atau namai label tersebut, dan inga ! inga !.

Kedua : Buka tab Edit Html kemudian tandai Expand Template Widget.

 

Ketiga : Cari kode di bawah ini. ( kalau binun cari  tulisan judul yang kita namai untuk label tersebut. gunakan find browser lihat di sini. )

<b:widget id='Label1' 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'>
    <ul>    <b:loop values='data:labels' var='label'>
      <li>        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>          </a>        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>      </li>
    </b:loop>    </ul>     <b:include name='quickedit'/>
  </div></b:includable></b:widget>

Setelah ketemu buang tulisan ini <ul> <li> </li> </ul> .

kemudian setelah itu, masukan kode di bawah ini.

<div style="background:#F0E8F1;margin:2px;
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;">

</div>

simpan pada posisi seperti tulisan yang saya pertebal.

<b:widget id='Label1' 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'>
<div style="background:#F0E8F1;margin:2px;
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;">
     <b:loop values='data:labels' var='label'>
      <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>          </span>        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>          </a>        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
    </b:loop> </div>    
<b:include name='quickedit'/>  </div></b:includable></b:widget>

Setelah itu coba tekan tulisan Pratinjau.

Jika saudara tidak suka dengan angka setelah label seperti ini:  (2), (1). buang saja dengan cara menghapus tulisan ini (<data:label.count/>).

Dan jika suka dengan tampilan barunnya klik Simpan Perubahan.

Embedded Style.

Cara di atas saya mengunakan Inline Style, yakni menerapkan langsung pada kode Html. Jika ingin menarik dan terkontrol tampilan labelnya. saya sarankan dan saya paling suka membuat dulu sintaks Css -nya atau istilahnya Embedded Style Sheet. karena dengan cara kedua ini keuntungannya kita tidak perlu menghapus tag <ul> <li> </li> </ul>. dan keuntungan lainnya kita bisa menambahkan gambar icon juga aman.

Bagaimana cara membuatnya ? tergantung kalau ada yang tertarik saya pasti tulis . ok.

Tulisan Yang Rada Nyambung.

1.blogroll scrolling dengan inline style

2.membuat kotak scroll untuk blogroll

3.mengedit mengatur dan menambah label

Technorati tags: Merubah Label, New Blogger Tutorial

del.icio.us tags: Blogger Tutorial

Blogroll Scrolling Dengan Inline Style

M elanjutkan kisah kemarin tentang membuat blogroll scrolling , yakni membuat kotak atau box  untuk link blogroll kita yang bisa di scroll. contoh na seperti blogroll My Link di blog ini.

Namun pada tulisan kali ini, kita tidak mengunakan atau membuat dulu sinstaks di halaman css -nya, tetapi langusng menerapkan properti kodenya pada elemen Html. bahasa kampung-nya Inline Style Sheet gitu lho :)

Baiklah tampa basa basi langsung saja pada penerapanya. dalam layout buka tab Edit Html .

kemudian tandai Expand Template Widget.

Setelah itu cari elemen Daftar link Blogroll kita, yaitu ber- id "linklist1". kalau di blog kita ada dua daftar link maka menjadi"linklist2" dst. atau kalau daftar link kita di beri judul semisal " My link ", "blogroll" dst. maka cari tulisan itu. ( gunakan kotak pencarian di browser ie atau firefox lihat cara mudah mencari kode css dan html di sini.)

Jika sudah ketemu masukan kode ini.

<div style="overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px;font-size: 12px; height: 200px;width: 94%;text-align: left;">

dan di tutup dengan kode ini.

</div>

Hasil penerapan kode di atas pada elemen daftar link "lisklist"  kira-kira menjadi seperti ini. ( lihat tulisan yang dipertebal )

<b:widget id='LinkList1' locked='false' title='Link Teman' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div style="overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px;font-size: 12px; height: 200px;width: 94%;text-align: left;">
<div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>  
<b:include name='quickedit'/>
</div></div>
</b:includable>
</b:widget>

Dan untuk kolom sidebarnya yang terlalu lebar seperti blog ini, atau daftar link-nya di simpan di bagian bawah ( footer ), bagusnya buang saja tag ini <ul> <li> </li> dan </ul>. biar daftar link-nya memanjang.

Penjelasan yang tidak jelas namun perlu biar jelas.

Overflow: auto; -> Mengatur batas sebuah konten atau isi. jika conten-nya melebihi batas yang telah di tentukan maka scrollbar akan di tampilkan.

height:200px; -> ukuran tinggi sebuah objek/box.

width: 94%; -> ukuran lebar sebuah objek/box. mengunakan satuan persen ( % ), untuk memudahkan bagi kita yang tidak tahu persis berapa ukuran lebar sidebar yang kita miliki. karena dengan satuan persen akan secara otomotis mengikuti ukuran sidebar yang kita miliki.

Tulisan Rada Nyambung

membuat kotak scroll untuk blogroll

Technorati tags: Blogroll Scrolling, New Blogger Tutorial

Membuat kotak Scroll untuk blogroll

S udah sama-sama mafhum kalau ngeblog tampa pertukeran link ibarat sayur tampa garam.

Namun karena seringnya melakukan pertukaran link, terkadang untuk mengurus yang satu ini menjadi sangat ribet. ada sebagian orang yang mengakalinya dengan cara membuat text berjalan ( Marquee ).

Dan dalam tulisan ini, saya ingin memberi alternatif lain untuk menangani blogroll tersebut dengan cara membuat wadag atau kotak yang bisa di scroll, atau kita sebut saja Blogroll scrolling. - yang kebetulan akhir-akhir ini mulai trend di gunakan oleh para blogger mania.

Dan Blogroll scrolling yang saya akan tunjukan, tidak akan merubah kebiasaan kita ketika menambah sebuah link baru,  tetap  mengunakan elemen linklist seperti biasanya, artinya kita tidak perlu membuat brogroll dari elemen Html/javascript, yang apabila menambah link baru, kita di harus menulis manuali seperti ini : <ul><li> alamat blog </li> </ul> di ulang-ulang sampai pegal tangan kita.. cape deeeh !!!...

Untuk membuatnya, seperti biasa dalam halaman layout kita buka
tab Edit Html. kemudian tandai kotak Expand Template widget.

Setelah itu masukan kode di bawah ke dalam halaman sintaks Css.
( atau simpan saja di atas kode ini ->  ]]></b:skin>

#scrolling {
     overflow: auto; height: 100px; width: 94%;
      background-color:#EFEFEF; border:1px solid #777;
      margin: 0px auto; padding:5px; font-size: 14px;       
      color: #999; text-align: left;
  }

oke setelah itu cari elemen blogroll yang telah kita pasang,- agar memudahkan dalam pencarianya gunakan find browser yang kita pakai, jika anda mengunakan browser firefox buka menu file Find In This page.

maka di posisi kiri bawah jendela browser akan terlihat kotak kosong seperti ini 

kemudian agar mudah mencarinya ke dalam kotak kosong tersebut masukan judul elemen blogroll kita, misalkan judulnya " link Teman ",
" Blogroll " atau " my link " dll . kemudian klik tombol Next sampai kita menemukan tulisan judul tersebut , juga sampai terlihat semua kode html elemen blogroll seperti di bawah ini ( aslinya elemen LinkList ).

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
   <ul> <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

setelah itu masukan kode Html yang sintaks Css-nya telah kita buat, yakni id = " scrolling " atau tulisan lengkapnya menjadi <div id='scrolling'> dan di akhiri dengan tag </div>.

hasil penambahan dan letak posisinya  bisa di lihat pada tulisan yang dipertebal di bawah ini.

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div id='scrolling'>
<div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Setelah itu klik tulisan Pratinjau, jika hasilnya oke klik tulisan Simpan Template.

sekarang coba masuk ke halaman elemen kemudian buka elemen blogroll tersebut dan tambahkan link baru.. hmmm ngga pegal lagi kan mengetik berulang-ulang ....enjoy aja lagi !

Begitu juga jika anda keukeuh ingin mengunakan text berjalan ( marquee ) untuk blogroll ini, lakukan saja tata cara dan upacara pada bagian tag Html seperti di atas. hasilnya seperti ini.

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<marquee behavior="alternate" direction="top" bgcolor="#33FFCC">
<div class='widget-content'>
   <ul> <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div></marquee>
</b:includable>
</b:widget>

Setelah itu klik tulisan Pratinjau, jika hasilnya oke klik tulisan Simpan Template. ( penjelasan tentang marque bisa anda lihat di sini )

sekarang coba masuk ke halaman elemen kemudian buka elemen blogroll tersebut dan tambahkan link baru.. hmmm enjoy aja lagi !

Masalah Dan Solusi

Nah sekarang bagaimana jika tampilan blogroll-nya  ingin seperti ini. memanjang secara horizontal.

Gampang saja dalam tag Html listlist di atas kita tinggal hapus tulisan ini semua : <ul> <li> </li> </ul> .. segitu saja ngga kurang ngga lebih. :).

Technorati tags: Blogroll Scrolling, New Blogger Tutorial

Text Berjalan ( marquee )

T entang marquee ini ( text berjalan ), sering di gunakan oleh para penguna blog khususnya blogger dari blogspot. tujuan yang utama mungkin untuk menyederhanakan content, baik itu blogroll dll.

Sebenarnya kodenya sangat simple sekali, di buat dengan tag <marquee> text yang akan berjalan  </marquee>.

sedangkan atribut yang sering di gunakan menyertainya ialah :

BGCOLOR="warna" - mengatur warna background text.

DIRECTION="left  \ right \ top \ down" - mengatur arah gerakan text

BEHAVIOR="scroll / slide / alternate /" - mengatur cara geraknya - bergerak berputar / bergerak sekali lalu berhenti / bergerak kiri-kanan.

TITLE="pesan" - pesan yang akan muncul saat mouse berada di atas text.

SCROLLAMOUNT="angka" - mengatur kecepatan gerakanya.

SCROLLDELAY="angka" - mengatur waktu tunda gerakan dalam milidetik.

LOOP="angka \ -1 \ infinite " - mengatur jumlah pengulangan.

WIDTH="angka" - mengatur lebar block text . baik secara pixel atau persen.

Contoh-contoh Marquee.

Simple

<marquee> simple scrolling text</marquee> simple marquee text

 

Mengunakan Background : <marquee bgcolor="#FFEFF0">mengunakan atribut bgcolor</marquee> mengunakan atribut bgcolor

 

Mengunakan atribut direction. " left " atau " right " / "top"  / "down" .

<marquee direction="right" bgcolor="#99CCFF">mengunakan atribut direction right atau dari kanan</marquee> direction right atau dari kanan

 

Mengunakan Atribut Behavior dan Direction

<marquee behavior="alternate" direction="down" bgcolor="#FFEFF0">Mengunakan Atribut Behavior dan Direction</marquee> Mengunakan Atribut Behavior dan Direction

 

Mengatur atribut Behavior, Direction dan SCROLLAMOUNT ( keceptan ).

<marquee behavior="alternate" direction="left" bgcolor="#990C13" scrollamount="2">Behavior, Direction dan SCROLLAMOUNT</marquee> Behavior, Direction dan SCROLLAMOUNT

 

Mengatur atribut Behavior, Direction , Scrollamount dan prilaku mouse.

<marquee behavior="scroll" align="middle" direction="left" bgcolor="#DF7D83" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()"><br /><br />    <a href=" http://catalog-tutorial.blogspot.com ">Nyahooo Booo</a>  <a href=" http://jaloee.blogspot.com ">Sotoshop yeuh</a> <br /><br />  </marquee>

Nyahooo Booo Sotoshop yeuh

Technorati tags: Text Marquee, New Blogger Tutorial

Page Options ala yahoo

J ika anda main ke situs yahoo betulan :). di bagian tab sebelah kanan anda akan menemukan sebauh tulisan Page Option yang fungsinya merupakan  pilihan-pilihan untuk merubah warna layout web-nya. walaupun tidak begitu penting namun cukup bagus untuk menambah situsnya lengkap dan dinamis.

Atau karena blog ini juga kepinginnya mengejar layout situs yahoo tersebut. anda juga bisa memilih warna blog di bagian tab menu sebelah kanan di atas, dengan cara menandai radio buttom. hasilnya sama dengan Page Option yang di miliki Yahoo.. ( ya rada beda -beda tipislah. hex100 ).

Cara-cara merubah warna layout ini,  saya mesti berterimakasih kepada blog PurpleMoggi, karena kebetulan saya menemukanya di sana, dan si PurpeMoggi pun mendapatkannya dari dinamicdrive.

Jika anda suka dengan template yang memiliki fitur untuk memilih perubahan warna dan tata letak layoutnya tampa perlu lagi pusing. anda bisa menemukan dan mendonlot-nya di blog  PurpleMoggi ini.

tinggal pilih-pilih templatenya saja, apa mau yang berubah warna atau berubah tata letaknya atau mau yang keduanya.

Dan seandainya anda kepingin tahu cara pembuatanya anda pun dapat mengikuti tutorilnya masih pada blog yang sama.

Technorati tags: page option, blogger Tutorial

menginstall brush

Biasanya ketika kita mendonlot sebuah brushes ada dua jenis, yang pertama berbentuk atau berformat file zip. yang ini perlu kita extrakan dulu.

dan yang kedua langsung berformat file *.Abr ( file brush berakhiran ABR ).

Untuk menambahkan atau memakai brush di dalam photoshop, ada dua cara pula.

pertama : kita copy paste file *.abr ke dalam folder direktorie preset brush. yakni :

C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Brushes

setelah di copy paste kita akan mendapatkanya langsung dalam pemilihan.

contohnya : buka program photoshop, kemudian pilih brush tool . dalam panel brushes option pilih daftar brush -nya.

 

kedua : Kita copy paste dalam folder dan drive di mana saja. misalkan kita membuat foder koleksi brush di drive D:\koleksi brush  setelah itu buka program photoshop dan pilih brush tool, dalam panel option klik tulisan Load Brushes kemudian cari file brushes dalam folder dan drive yang telah kita tentukan.

Technorati tags: Brush, Photoshop

del.icio.us tags: Brush, Photoshop Tutorial