2yu-blog

Uber Amazing Blog Award !

2009-03-30T23:51:00.013+07:00

Akhirnya blog ini kebagian award juga dan dengan sangat senang hati saya menerima uber amazing blog Award ini dari Ibnu Kus. Terima kasih ya mas atas awardnya! Sempat penasaran apa sih uber amazing blog itu? setiap award kan berbeda-beda?!! Nah artikelnya saya baca di situs empunya award. kalian bisa lihat sendiri alamatnya di gambar award tersebut. Untuk pertama kalinya award dengan gambar hiasan pita yang cantik ini diluncurkan (jiah...gayanya) pada tanggal 10 oktober 2008. Award tersebut diberikan kepada suatu blog yang mungkin kalian anggap :

Memberikan inspirasi bagi kalian (inspiratif).
Bisa membuat kalian tersenyum dan tertawa (smile and laugh).
Amazing dalam segi informasi (complicated).
Amazing dalam segi desain templatenya.
Dan alasan lainnya, yang membuat kalian berpikir bahwa blog tersebut emang uber (super) amazing!

Teruz...apakah award ini memiliki aturan (rule) ato Pe Er? Ya iyalah, yang buat awardnya aja ngasih aturan, apalagi kita yang cuma makai awardnya untuk di bagi-bagikan ke sahabat blogger sekalian jadi harus ikuti si empunya. Aturan yang harus kita lakukan jika kita mau dan sudah siap menerima award ini kira-kira seperti di bawah ini:

Tempatkan award di sidebar atau postingan kalian yang menjelaskan award tersebut.
Bagikan sedikitnya kepada 5 blog yang kalian anggap layak untuk menerima award ini.
Biarlah mereka tahu bahwa mereka telah menerima penghargaan Amazing Uber ini dengan memberikan komentar pada blog mereka.
Buat sebuah link yang mengarah pada blog yang memberikan award.
Jika kalian ingin membagikan award ini ke blog sahabat, buatlah sebuah link yang mengarah pada blog yang menerima award tersebut di dalam postingan.

Nah bagaimana mudah bukan? silahkan kalian kopas saja postingan ini jika kalian ingin memposting tentang Uber Amazing Blog pada postingan kalian atau kalau yang mau original artikelnya silahkan kalian berkunjung di sini. Kalau sudah menerima uber amazing award ini, silahkan kalian bergabung di Uber Amazing Blogger’s Club.

Di bawah ini kode yang kalian butuhkan untuk menampilkan award pada sidebar atau postingan kalian. Jangan pernah merubah kode tersebut, saya hanya menyampaikan pesan yang membuat awardnya saja. Sayapun nggak berani merubahnya. Takut nggak masuk masterlistnya Uber Amazing Blogger’s Club, hikhikhik.

Karena di sini saya sudah siap untuk menerima award ini maka saya juga harus siap membagikan award ini kepada minimal 5 blog sahabat yang saya anggap layak menerimanya. Siap-siap ya, siapa tahu blog kalian termasuk nominasi yang akan saya umumkan sesaat lagi...hehehe

Menghiasi Blog Dengan Mini Icon

2009-03-26T23:44:00.009+07:00

Bagi sahabat blogger yang ingin menghiasi templatenya dengan tampilan icon-icon mini seperti yang kalian lihat pada blog ini, saya akan mencoba membantu kalian caranya. Untuk menambahkan beberapa icon pada blog, kalian butuh kode css yang sudah saya kategorikan masing-masing di bawah ini. Silahkan copas kode css tersebut tepat di atas kode ]]></b:skin> pada bagian "Edit HTML" template blog kalian dan kemudian simpan.

/* Mini icon Untuk label pada kolom sidebar
-----------------------------------------------
*/
#Label1 ul li {
 background: url(http://img297.imageshack.us/img297/6615/labelal6.png) left no-repeat;
 padding: 0 5px 0 20px;
 line-height:1.6em;
 }
/* Mini icon Untuk label pada kolom Footer
--------------------------------------------------
*/
.post-labels {
 background: url(http://img297.imageshack.us/img297/6615/labelal6.png) left no-repeat; 
 padding-left: 20px;
 font-family: "Times New Roman", Serif; 
 line-height:1.6em; font-size:12px;
 }
/* Mini icon Untuk arsip pada kolom sidebar
--------------------------------------------------
*/
.BlogArchive #ArchiveList ul li.archivedate  {
 border-bottom: 1px solid #EFF0F1;background: url('http://img213.imageshack.us/img213/289/v5bullets.gif') no-repeat 5px 5px;
 margin: 0 2px; 
 padding:0 5px 0 35px; 
 line-height:1.8em;
 }
span.zippy  {display:none;}

/* Mini icon Untuk tanggal terbit postingan
---------------------------------------------------
*/
.date-header {
 background: url(http://img4.imageshack.us/img4/4774/calendarmonthqz7.png) left no-repeat;
 padding:0 0 0 20px;
 }
/* Mini icon Untuk recent posts dan recent comments
---------------------------------------------------
*/
#Feed1 ul li, #Feed2 ul li  {
 border-bottom: 1px solid #EFF0F1;
 background: url('http://img213.imageshack.us/img213/289/v5bullets.gif') no-repeat 5px 5px;
 margin: 0 2px; 
 padding-bottom:2px 5px 2px 25px;
 }
/* Mini icon Untuk comments pada kolom footer
---------------------------------------------------
*/
.comment-link {
  background: url(http://img220.imageshack.us/img220/158/icocommentwfi3.png) left no-repeat; 
  padding-left: 17px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; 
  font-size:12px;
  }

/* Mini icon bonus dari duayu
---------------------------------------------------
*/
.fn {
  background: url(http://img504.imageshack.us/img504/1718/userty2.png) left no-repeat; 
  padding-left: 20px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; font-size:12px;
  }
.timestamp-link {
  background: url(http://img4.imageshack.us/img4/3465/datelx9.png) left no-repeat; 
  padding-left: 20px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; 
  font-size:12px;
  }

Jika kalian ingin mengganti icon-icon tersebut dengan milik kalian sendiri silahkan kalian ganti tulisan yang sudah saya beri warna biru dengan URL icon tempat dimana kalian mengupload icon kalian. Nah selebihnya silahkan kalian otak atik sendiri kode css-nya sesuai dengan selera kalian. Semoga ini sedikit membantu.

Twitter Widget Untuk Blogger

2009-03-24T23:34:00.026+07:00

Sebelum kalian menginstal twitter widget ini, kalian harus telah memiliki akun di twitter terlebih dahulu. Bagi sahabat blogger yang belum memiliki akun di twitter, silahkan bergabung di sini dan bagi sahabat blogger lainnya yang telah memiliki akun di twitter dan ingin menampilkan celotehan-celotehan yang ada pada twitternya sehingga dapat di lihat lewat blog silahkan instal widget twitternya di bawah ini. Tapi sebelumnya sahabat blogger sekalian harus login terlebih dahulu ke blog.

Pada kolom "username", silahkan kalian isi dengan username kalian di akun twitter kemudian klik "Update" dan dilanjutkan dengan "tambahkan ke blog". Baiklah teman semoga widget ini bermanfaat bagi kalian.

Top Komentator Widget

2009-03-23T04:36:00.027+07:00

Menampilkan Ranking top komentator pada blog adalah sebuah penghargaan yang diberikan oleh yang punya blog kepada sahabat atau orang lain yang sering meninggalkan komentarnya. Disamping itu juga yang punya blog juga dapat mengetahui siapa saja yang sering berkomentar di blognya dan dapat juga turut berperan aktif memberikan balasan komentar kepada blog sahabat tersebut jika dia memiliki blog. Kenapa ini disebut sebuah penghargaan? Karena dengan memasang widget ini di blog kalian, maka widget top komentator ini akan menampilkan nama-nama orang yang sudah berkomentar secara berperingkat (1,2,3,4,dst...). Dengan begitu kalian sudah menghargai mereka karena telah menampilkan nama-nama mereka pada halaman utama blog kalian sehingga dengan sendirinya kalian telah meletakkan link mereka pada blog. Bagi sahabat blogger yang blognya udah u comment i follow, kepalangan udah menghargai komentator sekalian aja tu diperingkatin orang-orang yang udah ngasih komentarnya ke kamu. Dengan begitu kan mereka akan lebih semangat lagi untuk berkomentar di blog kamu karena mereka dapat linkback-nya dua kali. Yang pertama dari halaman utama dan yang kedua dari halaman tempat dimana mereka berkomentar.

Nah kalau sahabat blogger berminat untuk memasang widget top komentator tersebut pada blognya, silahkan instal widgetnya di bawah ini. Tapi sebelumnya pastikan bahwa kalian telah "Login" pada blog.

Untuk kolom "Filter Namamu", silahkan masukkan nama yang kalian gunakan pada blog. Hal ini bertujuan agar nama kalian sebagai pemilik blog tidak akan ditampilkan pada top komentator widget jika kalian berkomentar pada blog kalian sendiri. Lucu kan kalau nama kamu ada di deretan top komentator tersebut. Jika sudah selesai, klik "Update" dan lanjutkan dengan meng-klik "Tambah ke Blog". Simpanlah top komentator widget tersebut dan kemudian lihat blog kalian. Baiklah teman semoga widget ini bermanfaat bagi kalian.

Encrypt HTML Source Code

2009-03-22T00:54:00.013+07:00

Tools ini hanya berguna bagi para webmaster/blogger. Karena sahabat blogger dapat menggunakan tools ini maka saya letakkan tools-nya di sini. Encrypt HTML Source Code atau mengenskripkan sumber kode HTML merupakan suatu konversi bahasa HTML menjadi Javascript yang diacak-acak sehingga nggak tahu lagi wujudnya. bayangin tu...untuk ukuran javascript yang sederhana saja butuh waktu berjam-jam memahaminya apalagi udah di acak-acak bisa keluar bola mata ente..hikhikhik. Untuk sementara saya letakkan dulu peralatan tempurnya disini entar saya sambung lagi penjelasannya mengenai fungsi dan manfaat Encrypt HTML Source Code tools tersebut masih dalam postingan ini. Habis hari ini saya lagi banyak sekali PR. kalau sahabat blogger yang sudah tahu fungsi dari tools tersebut silahkan gunakan saja tools tersebut.

Masukkan kode HTML yang akan di Acak

Kode Warna-Warni

2009-03-20T00:00:00.019+07:00

Color Picker

Silahkan sahabat klik kotak warna bagian kanan dan kode hexadesimal yang ada di bagian atas untuk memilih warna dan kode warna tersebut.

Tools untuk sahabat

Tool kode warna ini saya buat untuk memudahkan para sahabat blogger menentukan kode-kode warna dalam bahasa HTML. kode warna-warni ini sebenarnya akan mudah kalian tentukan jika menggunakan software seperti photoshop maupun dreamweaver. Akan tetapi bagaimana bagi saya dan mungkin bagi sahabat blogger lainnya yang sangat minim pengetahuan mengenai software seperti photoshop maupun dreamweaver tersebut?! Sayangnya tools ini belum bisa membantu sahabat blogger dalam memodifikasi warna untuk foto-foto ~~Rahma Azhari bugil~~, tetapi setidaknya tool kode warna-warni ini dapat sedikit membantu para sahabat blogger untuk menentukan warna-warna yang dibutuhkan dalam mengedit suatu dokumen atau template dalam HTML. Dalam bahasa HTML-nya, kode warna termasuk ke dalam ras kode hexadesimal dan perlu sahabat ketahui bahwa penulisan kode hexadesimal selalu didahului oleh tanda " # ". Sehinggga sebagai contoh kode warna akan ditulis seperti ini #0084FF dalam bahasa HTML.

Membuat Related Post

2009-03-18T23:02:00.016+07:00

Related post, artikel yang terkait, article by category, artikel berdasarkan label, pada intinya adalah sama yang menunjukkan hubungan antara konten atau isi kandungan dari suatu postingan degan postingan lainnya. Nah bagaimana membuat related post atau artikel yang berhubungan pada postingan yang memiliki kesamaan pembahasan. Untuk membuatnya, tentunya kita harus memberi label atau kategori yang sama terhadap postingan yang satu dengan postingan yang lain. di bawah ini merupakan contoh dari related post tersebut dengan kesamaan label yaitu tips dan trik blog.

Kalau kalian ingin membuat related post seperti tampilan gambar di atas dan menampilkannya pada setiap postingan yang kalian miliki, ikuti langkah-langkahnya di bawah ini.

Pada bagian "Edit HTML", kalian perlu melakukan "Expand Template Widget". Kemudian carilah kode ]]></b:skin> dan letakkan kode css tepat di atas kode ]]></b:skin> tersebut.

Kode Css

.related-post {
  border: 1px solid rgb(192, 192, 192);
  padding: 5px;
  background-color: #f0f0f0;
  -moz-border-radius:5px; 
  margin:5px;
  font-family: "Times New Roman", Serif; 
  font-size:13px;
  }
.related-post :hover {
  background-color: rgb(255, 255, 255);
  font-family: "Times New Roman", Serif; 
  font-size:13px;
  }

Langkah selanjutnya kalian harus mencari lagi kode di bawah ini.

<data:post.body/>

Jika suda kalian temukan, silahkan kalian copy (Ctrl-C) dan letakkan kode related post tepat di bawah kode <data:post.body/> tersebut.

Kode Related Post

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<h2 style='font-size:14px; text-transform:capitalize'>Artikel Terkait:</h2>
<div class='related-post'> 
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='2yu'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ol = document.createElement(&#39;ol&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t); 
a.appendChild(txt);
li.appendChild(a);
ol.appendChild(li); 
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ol);
document.getElementById(&#39;2yu&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) { 
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? 
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Langkah terakhir, simpan template dan lihat blog kalian. Nah bagaimana boss, udah kelihatan blum related post atau artikel terkaitnya? kalau sudah, kalian harus berterima kasih kepada Hoctro sebagai original authornya. Sampai di sini saja penjelasan saya semoga ini bermanfaat.

Blogumus Pada Photo Flickr

2009-03-17T23:32:00.012+07:00

Hai teman-teman! kali ini saya ada widget yang menarik buat kalian yang ingin menampilkan photo-photonya pada blogger. Namanya Blogumus Pada Photo Flickr. Contohnya seperti yang disebelah kiri ini. Why blogumus? istilah blogumus yang saya tau dari amanda, kalau dari roytanck sendiri sebagai original authornya bilang WP-Cumulus. Tapi nampaknya saya lebih tertarik dengan istilah blogumus karena lebih bersahabat dengan ~~seo~~ para blogger. Nah setelah populer dengan flash animated label cloudnya, kali ini roytanck Menerapkan blogumusnya pada photo flickr. Untuk membuat widget tersebut pastinya kalian harus telah memiliki koleksi photo di http://www.flickr.com. Kalau kalian sudah punya akun di flickr, kalian tinggal "login" dan pada halamam "home" kalian klik tulisan "Your Photostream" kira-kira contohnya seperti gambar bawah ini.

Pada halaman "Your photostream" tersebut coba kalian lihat pada bagian bawah sehingga akan tampak seperti gambar di bawah ini.

Silahkan kalian klik icon feed tersebut dan copy alamat (URL) feed tersebut. sebagai contoh kalian dapat lihat gambar di bawah ini.

Nah kalau sudah kalian copy alamat (URL) feed photo flickr kalian langkah berikutnya kalian harus letakkan atau paste URL tersebut ke http://www.roytanck.com/get-my-flickr-widget/ untuk mendapatkan kode widget blogumus pada photo flickr. Setelah kalian dapatkan kode widgetnya, letakkan kode widget blogumus photo flickr tersebut pada kolom sidebar template kalian. Baiklah teman, saya harap kalian menikmati widget blogumus pada photo flickr ini.

Flash Animated Label Cloud

2009-03-16T23:26:00.008+07:00

Mungkin kalian pernah melihat bentuk animasi seperti yang ada di sebelah kiri ini ketika kalian berkunjung pada suatu blog. Bentuk animasi tersebut dinamakan Blogumus : flash animated label cloud. Widget ini untuk pertama kali diperkenalkan oleh Roy Tanck dan sekarang widget tersebut menjadi sangat populer bagi para blogger. Keunikan dari widget flash animated label cloud ini adalah tulisan yang tampak tiga dimensi dan berputar seperti bola. Bentuk animasi tersebut merupakan widget yang menunjukkan label atau kategori pada postingan kalian. Untuk membuat flash animated label cloud tersebut, tentunya pastikan kalian telah memasang atau memberi label pada setiap postingan kalian. Nah kalau semuanya sudah kalian lakukan, langkah berikutnya mari kita mulai pekerjaan kita. Langkah-langkahnya masih seperti penjelasan-penjelasan saya sebelumnya yaitu:

Kalau kalian sudah berada pada bagian "Edit HTML", kalian harus melakukan "Expand Template Widget". Langkah selanjutnya carilah kode di bawah ini.

<b:section class='sidebar' id='sidebar' preferred='yes'>

Untuk memudahkan pencarian, gunakan Ctrl-F pada keyboard kalian. Kalau sudah kalian temukan, silahkan kalian copy (Ctrl-C) kode flash animated label cloud dan letakkan tepat dibawah kode <b:section class='sidebar' id='sidebar' preferred='yes'> tersebut.

Kode Flash Animated Label Cloud

<b:widget id='Label2' 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'>

    &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
        &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
        &lt;param name="bgcolor" value="#ffffff" /&gt;
        &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
      <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
        &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://2yu-blog.blogspot.com'&gt;Duayu&lt;/a&gt;&lt;/p&gt;
    &lt;/object&gt;


  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Coba kalian perhatikan kode di atas. Untuk tulisan yang sudah saya beri warna merah, menunjukkan tinggi dan lebar widget dalam ukuran px. Tulisan yang sudah saya beri warna biru, menunjukkan warna latar atau background dan warna huruf. berikutnya untuk tulisan yang berwarna hijau, untuk ukuran besar atau kecilnya tulisan. Kalian dapat merubahnya dan menyesuaikannya pada template yang kalian miliki.

Jika sudah selesai, langkah berikutnya simpan template dan lihat blog kalian. Nah Bagaimana boss? Semoga ini bermanfaat buat kalian.

Scrolling Marquee Pada Tab Browser

2009-03-14T23:34:00.010+07:00

Bingung ya dengan judulnya? Penjelasan mengenai marquee bisa kalian baca aritkelnya di sini. Nah bagaimana membuat scrolling marquee pada tab browser untuk ditampilkan pada blog yang kalian miliki? untuk membuatnya kita membutuhkan kode javascript di bawah ini.

Kode Scrolling Marquee

<script language='JavaScript'>
var txt='Tutorial Blogspot, Free Widget Instaler, Blogger Template Desain,';
var speed=100;var fresh=null;function move() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
fresh=setTimeout(&quot;move()&quot;,speed);}move();
</script>

Tulisan yang sudah saya beri warna merah, silahkan diganti dengan bahasa kalian masing-masing. Kebanyakan para blogger menggunakan scrolling marquee ini untuk memberikan nuansa yang menarik dengan ucapan welcome atau selamat datang yang ditujukan pada pengunjung blog. Kalian juga dapat membuat beberapa kata sebagai ucapan terimakasih kalian kepada pengunjung blog.

Nah kalau sudah kalian ganti tulisan yang berwarna merah pada kolom kode scrolling marquee di atas dengan menggunakan bahasa kalian masing-masing, langkah selanjutnya silahkan kalian letakkkan kode scrolling marquee tersebut tepat di bawah kode ]]></b:skin> pada bagian "Edit HTML" template blog kalian. Nah bagi kamu yang masih bingung tempat kode ]]></b:skin> tersebut, langkahnya seperti ini :

Untuk memudahkan pencarian, gunakan Ctrl-F pada keyboard kalian. Kalau sudah kalian letakkan kode scrolling marquee tepat dibawah kode ]]></b:skin> tersebut, langkah selanjutnya simpan template dan lihat blog kalian. Nah bagaimana teman? kalau berhasil tentunya kalian sudah mengerti apa yang saya maksud dengan scrolling marquee pada tab browser tersebut.

Membuat Resize Window Animation

2009-03-13T23:38:00.010+07:00

Bingungkan? Habis susah sih cari kata yang tepat buat judulnya. Kira-kira penjelasannya seperti ini. Mungkin kalian pernah berkunjung pada suatu blog dimana tampilan awalnya membuat window browser kamu tiba-tiba mengecil dan berputar mengelilingi setiap sudut layar monitor kemudian perlahan-lahan window browser kamu kembali ke ukuran normalnya (resize). Pada saat itu halaman blog yang kalian kunjungi tampak oleh kalian. Nah itulah yang saya sebut Resize Window Animation. Bagaimana membuat tampilan animasi resize window tersebut?

Untuk membuat resize window animation, yang kalian butuhkan adalah kode javascript di bawah ini.

Kode Resize Window Animation

<script type='text/javascript'>
//<![CDATA[

scrW=screen.availWidth
scrH=screen.availHeight
window.resizeTo(10,10)
window.focus()
for(a=0;a<80;a++){
window.moveTo(0,0)
window.resizeTo(0,scrH*a/80)
}
window.resizeTo(0,0)
for(b=0;b<80;b++){
window.moveTo(0,scrH/1)
window.resizeTo(scrW*b/80,0)
}
for(c=0;c<80;c++){
window.moveTo(scrW/1,scrH/1)
window.resizeTo(0,scrH*c/80)
}
for(d=0;d<80;d++){
window.moveTo(scrW/1,0)
window.resizeTo(scrW*d/80,0)
}
for(e=0;e<80;e++){
window.resizeTo(scrW*e/80,scrH*e/80)
}
window.moveTo(0,0)
window.resizeTo(scrW,scrH)

//]]>
</script>

Silahkan kalian copy (Ctrl-C) kode resize window animation tersebut dan letakkan tepat dibawah kode ]]></b:skin> pada bagian "Edit HTML" template blog kalian. Nah bagi kamu yang masih bingung tempat kode ]]></b:skin> tersebut, langkahnya seperti ini :

Untuk memudahkan pencarian, gunakan Ctrl-F pada keyboard kalian. Kalau sudah kalian letakkan kode resize window animation tepat dibawah kode ]]></b:skin> tersebut, langkah selanjutnya simpan template dan lihat blog kalian. Nah bagaimana teman? kalau berhasil tentunya kalian sudah mengerti apa yang saya maksud dengan resize window animation tersebut. Selamat ya !!!

Membuat Menu Horizontal Navigasi

2009-03-12T23:24:00.022+07:00

Kali ini saya mau memposting tentang bagaimana cara membuat dan menambahkan menu horizontal navigasi pada blogger template. Sebagai contohnya kalian bisa lihat seperti gambar di bawah ini. Bentuknya simpel dan hanya memainkan perpaduan warna (background-color) saja sehingga kalian dapat menyesuaikannya dengan warna template blog yang kalian miliki. Bentuk menu horizontal navigasi ini saya kasih warna hitam dan untuk menyesuaikan warna dengan template kalian, tinggal kalian ganti kode warnanya saja.

Baiklah teman mari kita mulai pekerjaan kita untuk membuat menu horizontal navigasi tersebut pada template kalian. Masih sama dengan tutorial-tutorial sebelumya, pergilah ke bagian "Edit HTML" template blog kalian dan dengan menggunakan Ctrl-F pada keyboard carilah kode ]]></b:skin> kemudian letakkan kode css di bawah ini tepat di atas kode ]]></b:skin> tersebut.

Kode Css

/*  Horizontal Navigasi
---------------------------------------------- */
#nav-wrapper {
background: #000000;
width: 100%;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #ffffff;
font-weight: bold;
margin: 0 auto;
padding: 0;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
.nav {
margin: 0px;
padding: 0px;
list-style: none;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.nav li {
float: left;
margin: 0px;
padding: 0px;
}
.nav a, .nav a:visited {
background: #222222;
color: #ffffff;
display: block;
font-weight: bold;
margin: 0;
padding: 8px 15px 8px 15px;
}
.nav a:hover {
background: #6e6d6d;
color: #ffffff;
margin: 0;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
.nav li a, .nav li a:link, .nav li a:visited {
background: #333333;
margin: 0;
padding: 7px 10px 7px 10px;
border-left: 1px solid #000000;
}
.nav li  a:hover, .nav li a:active {
background: #666666;
padding: 7px 10px 7px 10px;
}

Untuk menyesuaikan warna menu horizontal navigasi dengan warna template kalian, silahkan kalian ganti kode warna pada kolom kode css di atas yang sudah saya tandai dengan warna biru. Agar kalian tidak repot-repot lagi mencari kode warna, di bawah ini sudah saya siapkan perlengakapannya. Kalian tinggal klik warna yang kalian inginkan dan kode warna tersebut akan terlihat kemudian tinggal kalian copas saja kode warna tersebut.

Jika sudah selesai, masih di bagian yang sama yaitu pada bagian "Edit HTML" tersebut kalian cari lagi kode <div id='header-wrapper'> sehingga akan tampak tampilan kode kira-kira bentuknya seperti di bawah ini.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='2yu-blog (Header)' type='Header'/>
</b:section>
    </div>

Pada kolom kode diatas yang perlu kalian perhatikan adalah kode yang sudah saya beri warna biru karena tepat di bawah kode itulah kalian letakkan kode menu horizontal navigasi.

kode menu horizontal navigasi

<!-- Horizontal navigasi -->
<div id='nav-wrapper'>
<div class='nav'>
<ul>
<li><a href='http://2yu-blog.blogspot.com/'>Home</a></li>
<li><a href='http://www.blogger.com/profile/18304169321516590996'>My Profil</a></li>
<li><a href='http://2yu-blog.blogspot.com/search/label/Tutorial Blog'>Tutorial Blog</a></li>
<li><a href='http://2yu-blog.blogspot.com/search/label/Widget'>Widgets</a></li>
<li><a href='http://2yu-blog.blogspot.com/search/label/Tips Dan Trik Blog'>Tips Dan Trik</a></li>
<li><a href='http://www.co.cc/?id=163381'>Domain Gratis</a></li>
<li><a href='http://www.ziddu.com/register.php?referralid=(y](}Z.{5up'>File Hosting Gratis</a></li>
<li><a href='http://www.ziddu.com/register.php?referralid=(y](}Z.{5up'>Daftar Isi</a></li>
</ul>
</div>
</div><!-- Akhir dari horizontal navigasi -->

Pada kolom kode menu horizontal di atas, tulisan yang sudah saya beri warna merah silahkan kalian ganti dengan URL atau alamat yang ingin dituju dan tulisan yang berwarna biru silahkan kalian ganti dengan bahasa kalian masing-masing.

Nah kalau sudah selesai, simpan template kalian dan lihat blog. Horee..!! kalian telah berhasil membuat menu horizontal navigasi. ~ Congratulations ~

New Smiley Icons Pada Shoutmix

2009-03-11T23:34:00.024+07:00

Bagi kalian yang menggunakan widget shoutmix pada blog, kalian dapat menambahkan new smiley icons yang ada di bawah ini untuk digunakan pada shoutmix yang kalian miliki. Bagaimana cara menambahkan new smiley icon tersebut pada shoutmix? pertama-tama loginlah dengan shoutbox ID dan Password shoutmix kalian di http://www.shoutmix.com/main/login.php sehingga kalian akan melihat halaman seperti gambar di bawah ini.

Setelah kalian login, klik tulisan smileys pada kolom display. Untuk lebih jelas lihat gambar di bawah ini.

Pada halaman smiley tersebut, kalian tinggal menambahkan smiley icons kalian dengan cara memasukkan alamat (URL / Direct Link) smiley icons tersebut berada kemudian klik ADD dan Save Settings. Untuk lebih jelas lihat gambar di bawah ini.

Di bawah ini adalah smiley icons yang bisa kalian gunakan. Untuk mengetahui alamat (URL / Direct Link), silahkan kalian klik smiley icons tersebut.

HTML Code :
IMG Code :
Direct Link :

Nah bagi kalian yang menggunakan shoutmix yang sifatnya free atau layanan gratis, maka kalian hanya bisa menambahkan 10 smiley icons saja. contohnya seperti shoutmix yang ada di blog ini. Jadi nikmatilah keterbatasan yang ada. Baiklah teman sampai disini saja pembahasan kita mengenai new smiley icons pada shoutmix ini. Semoga tulisan saya ini bermanfaat bagi kalian.

Memasang Meta Tag Pada Blogspot

2009-03-10T23:17:00.018+07:00

Mengenal blog melalui meta tag dan bagaimana cara memasang meta tag pada blogspot? Pada dasarnya, meta tag adalah informasi tambahan atau metadata pada halaman web atau halaman blog dan digunakan oleh search engine untuk mecari informasi dan mengenal karakter suatu website atau blog tersebut. Bentuk meta tag tersebut seperti di bawah ini.

<meta content="isi dengan deskripsi blog Anda. jangan lebih dari 200 kata di sini" name="description"/>

<meta content="isi dengan kata kunci yg dipisah dengan koma di sini" name="keywords"/>

Bentuk meta tag di atas merupakan bentuk umum yang bisa langsung kalian pasang pada blog yang kalian miliki. Ada lagi bentuk meta tag lainnya seperti yang saya miliki ini:

<meta content="IqGuoDnSVY5lLdGvfwArDyUchoLbmnla0r6b1XtU76s=" name="verify-v1"/>

Untuk mendapatkan meta tag di atas silahkan kalian kunjungi alamat di bawah ini

http://www.google.com/webmasters/tools

Banyak manfaat yang dapat kalian peroleh jika kalian menggunakan fasilitas webmasters tools tersebut. Sedikitnya kalian akan lebih mengenal karakteristik blog kalian terhadap mesin pencarian (search engine) google. Kalau statistik search engine google belum berubah, blog ini pernah menduduki posisi teratas untuk kategori web dengan kata kunci navigasi blogger dan menempati posisi ke tiga untuk kategori blog dengan keyword yang sama. Silahkan kalian coba sendiri untuk membuktikannya. Baiklah teman mulailah bermain dengan keyword yang bersahabat dengan search engine. Untuk hal ini saya serahkan kepada kalian karena berbicara soal SEO ( Search Engine Optimization ) untuk ukuran blog dengan pagerank 0, rasanya kurang pantas bagi saya membicarakannya...karena masih banyak yang lebih ahli.

Oya hampir lupa...untuk meta tag tersebut kalian pasang diantara kode <head> dan </head> pada bagian "Edit HTML" template blog kalian. Semoga informasi ini bermanfaat.

Membuat Blogger Login Widget

2009-03-09T06:46:00.013+07:00

Bagi kalian pengguna blogger atau blogspot dan ingin membuat widget user login pada blog yang kalian miliki, saya punya caranya. Untuk membuat blogger login widget ini, kalian cukup klik tombol / button get blogger login widget code yang ada di bawah ini maka kode akan dikirim ke kolom sidebar template blog kalian.

Bagaimana? Mudah bukan! Baiklah teman semoga postingan ini bermanfaat bagi kalian.

Star Ratings Widget Pada Blog

2009-03-06T23:51:00.007+07:00

Satu lagi widget yang menarik untuk kalian pasang pada blog yang kalian miliki yaitu star ratings widget. Widget ini berfungsi sebagai pemberian rating dan rekomendasi oleh pengunjung blog tehadap aritkel atau postingan kalian. untuk menampilkan star ratings widget, tentunya kalian harus memasang kode widget tersebut ke dalam blog yang kalian miliki. Nah dimana kalian bisa mendapatkan kode star ratings widget tersebut. Ini dia link atau alamatnya yang harus kalian kunjungi. Sebelumnya pastikan terlebih dahulu bahwa kalian telah Login pada blog.

http://www.outbrain.com/

Setelah kalian berkunjung pada link atau alamat di atas, silahkan kalian klik lambang blogger bagi pengguna blogspot. kemudian kalian ikuti step 1 dan step 2, di sana sudah ada penjelasannya. Nah kalau sudah, sekarang kalian klik Get Widget Now! Maka kode Star Ratings Widget akan dikirim langsung ke blog kalian. Simpanlah kode tersebut dan lihat blog kalian. Kalau berhasil, maka akan tampak lima bintang pilihan berderet sejajar di bagian bawah pada masing-masing postingan kalian. Baiklah teman sampai di sini saja pembahasan kita mengenai star ratings widget, semoga informasi ini bermanfaat bagi kalian.

Flying Bird Widget Pada Blogger

2009-03-04T23:51:00.019+07:00

Kali ini saya punya mainan baru buat kalian yang suka menghiasi blog pada blogger / blogspot. Membuat widget efek animasi burung / flying bird widget pada blog. Ya, itu dia! Nah bagi kalian yang penasaran dengan widget efek animasi burung / flying bird widget ini, silahkan kalian klik tombol/button Get Flying Bird Widget Code di bawah ini! Maka kode widget akan langsung dikirim ke blog yang kalian miliki. Tetapi sebelumnya pastikan terlebih dahulu bahwa kalian telah Login pada blog yang kalian miliki.

Selain pada kolom sidebar, kode flying bird widget tersebut bisa juga kalian letakkan di bawah kode ]]></b:skin> pada bagian "Edit HTML" blog yang kalian miliki. Nah bagaimana gampang bukan? Baiklah teman semoga blog kalian semakin ceria dengan adanya tampilan flying bird widget ini.

Menonaktifkan Fungsi Klik Kanan Pada Mouse

2009-03-02T23:56:00.010+07:00

Kali ini saya mau memberi tahu kepada kalian bagaimana mendisfungsikan klik kanan pada mouse untuk diterapkan di blog yang kalian miliki. Ya..kira-kira contohnya seperti yang ada di blog saya ini. Nah kalau kalian ada yang bertanya mengenai buat apa kita harus mendisfungsikan klik kanan pada mouse tersebut pada blog yang kita miliki, saya sendiri juga bingung harus menjawab apa. Tapi tentunya kita mempunyai alasan tertentu untuk itu begitu juga dengan saya.

Oke boss, kita mulai saja pekerjaan kita. Pertama-tama silahkan kalian download terlebih dahulu scriptnya di http://www.ziddu.com/download/3789143/klik-kanan-off.txt.html dan kemudian buka file (.txt) tersebut dan kalian copy kodenya terus letakkan (paste) tepat di bawah kode ]]></b:skin> pada "Edit HTML" blog yang kalian miliki. Gampang bukan?

Bagi kalian yang masih bingung tempat kode ]]></b:skin> berada, langkah-langkahnya seperti ini:

Nah kalau kalian sudah berada pada bagian "Edit HTML", tinggal kalian gunakan Ctrl-F pada keyboard dan cari kode ]]></b:skin> tersebut. Oke teman saya rasa sudah cukup jelas saya menerangkannya. Selamat mencoba!

Membuat Elemen Sidebar Berada Di Kiri Dan Kanan Postingan

2009-03-01T22:22:00.012+07:00

Masih mengenai bagaimana cara mebangun template pada blogger blog, kali ini saya akan mencoba memberitahu kepada kalian tentang bagaimana membuat elemen sidebar berada di kiri dan kanan postingan. Untuk tutorial ini saya hanya mengambil satu sampel template blogger saja yaitu template "minima". Pada awalnya bentuk dasar suatu elemen halaman pada template blog adalah seperti gambar di bawah ini.

Pada gambar di atas dapat kalian lihat bahwa elemen sidebar berada di sebelah kanan postingan (elemen posting blog). Di sini kita akan mencoba menambahkan elemen sidebar dan meletakkannya di sebelah kiri postingan sehingga akan tampak seperti gambar di bawah ini.

Pada gambar di atas tampak bahwa sekarang elemen sidebar menjadi dua yaitu berada sebelah kanan dan kiri postingan (elemen posting blog). Baiklah langsung saja saya jelaskan cara membuatnya.

login-lah pada blog dan masuklah ke bagian "Tata Letak" kemudian pilihlah "Edit HTML". Sampai di sini kalian harus mencari kode ]]></b:skin> dan letakkan kode Css di bawah ini tepat di atas kode ]]></b:skin> tersebut.

Kode Css

#sidebar-wrapper2 {
  width: 220px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

.sidebar2 { 
  color: #ffffff;
  line-height: 1.5em;
 }

.sidebar2 ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar2 li {
  margin:0;
  padding-top:0;
  padding-right:0;
  padding-bottom:.25em;
  padding-left:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

.sidebar2 .widget { 
  border-bottom:1px dotted #cccccc;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

Setelah kalian masukkan kode css di atas, kalian cari lagi kode <div id='main-wrapper'> dan letakkan kode sidebar di bawah ini tepat di atas kode <div id='main-wrapper'> tersebut. Oya untuk mempercepat pencarian kalian, gunakan saja Ctrl-F pada keyboard.

Kode Sidebar

<div id='sidebar-wrapper2'>
        <b:section class='sidebar2' id='sidebar2' preferred='yes'/>
    </div>

Nah jika sudah kalian masukkan kode sidebar tersebut, simpan template dan lihatlah elemen halaman blog yang kalian miliki. Apa yang terjadi?! hehe...pastinya elemen sidebar kalian sekarang sudah menjadi 2 tetapi ini belum sempurna sobat karena kalian akan melihat tampilan elemen halaman blog yang kalian miliki seperti gambar di bawah ini.

Untuk menyempurnakannya, kalian harus menambah luas wilayah template kalian dengan cara menambah lebar (width) #outer-wrapper pada "Edit HTML". Sorry boss, saya ajak kalian bolak-balik. Pada template "Minima" lebar (width) #outer-wrapper adalah 660px. Karena ukuran sidebar2 adalah 220px, maka kalian tinggal menambahkan lebar (width) #outer-wrapper menjadi 880px (660px + 220px). Nah supaya sidebar2 tidak berdempetan dengan postingan kalian maka kalian harus memberi jarak diantara keduanya. Untuk itu kalian harus memberi margin-left:10px; pada #main-wrapper. Kalau sudah, simpan template kalian dan coba kalian lihat lagi pada "Elemen Halaman". Bagaimana? Good Job.

Cara Membuat Blog

2009-02-28T23:34:00.007+07:00

Sebelum saya menjelaskan cara membuat blog maka kita harus mengetahui terlebih dahulu apa itu blog? Istilah blog adalah bentuk singkat weblog atau web log yang merupakan wadah bagi kita untuk menulis seluruh pengalaman, pengetahuan, atau informasi yang kita miliki. Memelihara sebuah blog atau menambahkan artikel atau melakukan kegiatan tulis-menulis pada suatu blog disebut blogging. Sedangkan artikel tersebut dinamakan posting blog, posting atau masukan. Orang yang posting atau menulis suatu artikel pada blog ini disebut blogger.

Apa itu BLOG? Dan bagaimana cara Membuatnya?

Sebuah blog terdiri dari teks, hypertext, gambar, dan link (ke halaman web dan video, audio dan file lainnya). Blog menggunakan gaya dokumentasi percakapan. Banyak blog yang fokus terhadap satu objek informasi, misalnya politik, web design, olah raga dll. Tapi kebanyakan blog itu lebih seperti jurnal pribadi yang berisi informasi perjalanan dan kehidupan sehari-hari seseorang blogger. Nah lebih singkatnya adalah bahwa saat ini kalian sedang berada pada BLOG yang saya miliki. Sekarang tentunya kalian ingin tahu cara membuat blog tersebut bukan?

PASTIKAN bahwa kalian telah memiliki sebuah "EMAIL"

Karena di sini saya menggunakan fasilitas blogger atau blogspot maka saya hanya memberitahu kepada kalian cara membuat blog pada blogger atau blogspot. Baiklah teman kita mulai saja. Syarat yang paling utama dan nggak bisa ditoleransi lagi adalah pastikan bahwa kalian telah memiliki sebuah "EMAIL". Jika sudah punya silahkan kalian berkunjung ke alamat ini http://www.blogger.com/start dan kalian akan melihat tampilan halaman seperti gambar 1 di bawah ini.

gambar 1

Silahkan pilih bahasa terlebih dahulu dan kemudian kemudian lanjut ke halaman berikutnya sehingga akan tampak tampilan halaman seperti gambar 2 di bawah ini.

gambar 2

Silahkan kalian isi kolom-kolom yang kosong tersebut sesuai dengan perintahnya. Di sana sudah ada penjelasannya sendiri. Nah kalau sudah, lanjut ke halaman berikutnya sehingga akan tampak tampilan halaman seperti gambar 3 di bawah ini.

gambar 3

Pada gambar 3 di atas sudah saya kasih contoh cara mengisi kolomnya. Mengenai judul blog dan alamat (URL) blog boleh saja berbeda dan itu teserah kalian. Nah kalau sudah kalian isi sesuai dengan judul blog dan alamat blog yang kalian inginkan sekarang kita lanjut ke halaman berikutnya sehingga akan tampak tampilan halaman seperti gambar 4 di bawah ini.

gambar 4

Pada halaman ini kalian diminta untuk memilih bentuk tampilan template blog yang kalian miliki. silahkan kalian pilih salah satu dari beberapa template yang kalian sukai dengan mengisi radio button seperti yang ditunjukan oleh tanda panah pada gambar 4 di atas. Nah kalau sudah kalian pilih, lanjut ke halaman berikutnya sehingga akan tampak tampilan halaman seperti gambar 5 di bawah ini.

gambar 5

Horee...blog kalian sudah jadi, sekarang saatnya kalian blogging. Untuk tahap berikutnya, silahkan kalian mendalaminya sendiri karena kalian nantinya akan terbiasa dengan bentuk-bentuk tampilan tersebut. Beri tahu saya jika blog kalian sudah jadi karena dengan senang hati saya akan berkunjung ke blog kalian dan tentunya kita bisa bertukar informasi nantinya.

Membagi Elemen Halaman Footer Pada Blog Menjadi Tiga Bagian

2009-02-27T23:17:00.011+07:00

Bagi kalian yang sedikit-sedikit mau belajar membangun template blog kreasi sendiri seperti template yang saya miliki ini walaupun tidak terlalu bagus tetapi begitu memuaskan bukan jika kita menggunakan template hasil kreasi kita sendiri. Pada postingan kali ini saya akan memberi tahu kepada kalian bagaimana membagi elemen halaman footer menjadi tiga bagian.

Di bawah ini merupakan salah satu contoh gambar yang saya ambil dari template minima. Silahkan kalian amati sendiri perbedaannya.

Setelah kalian amati gambar di atas, mari kita mulai pekerjaan kita. Login-lah pada blog yang kalian miliki, masuk ke bagian "Tata Letak" dan pilih "Edit HTML". Pada bagian "Edit HTML", jika kalian menggunakan template minima akan tampak kode Css seperti di bawah ini.

Kode Css

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Jika kalian sudah menemukan kode di atas, Silahkan kalian hapus kode tersebut dan ganti dengan kode di bawah ini.

#footer {
  width:213px;
  margin:0;
  padding:0;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
  float:left;
  } 
#footer2 {
  width:213px;
  margin:0;
  paddingp:0;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
  float:left;
  }

#footer3 {
  width:213px;
  margin:0;
  padding:0;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
  float:left;
  }

Kemudian silahkan kalian cari lagi tampilan kode seperti di bawah ini.

</div> <!-- end content-wrapper -->
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

Jika sudah kalian temukan tampilan kode seperti di atas, tambahkan beberapa kode yang sudah saya beri warna merah sehingga bentuk tampilannya menjadi seperti di bawah ini.

</div> <!-- end content-wrapper -->
    <div style='clear:both'/>
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
      <b:section class='footer2' id='footer2'/>
      <b:section class='footer3' id='footer3'/>
    </div><div style='clear:both'/>

Setelah kalian tambahkan beberapa kode yang sudah saya beri warna merah di atas, berikutnya adalah simpan template dan lihatlah pada "Elemen halaman" blog yang kalian miliki. Oke boss pekerjaan saya cukup sampai di sini. Jika ada pertanyaan, silahkan tinggalkan komentar kalian.

Older Posts Dan Newer Posts Hanya Menampilkan Judul

2009-02-26T23:48:00.009+07:00

Jika kalian ingin menampilkan posting lama (older posts) dan posting lebih baru (newer posts) hanya berupa tampilan judul saja pada blog, berikut ini saya akan coba memberi tahu caranya kepada kalian.

Pastikanlah bahwa kalian telah login pada blog dan kemudian masuklah ke bagian "Tata Letak". Pada bagian ini pilihlah "Edit HTML" sehingga kalian menemukan sebuah kolom yang berisikan kode-kode. sampai disini kalian perlu melakukan "Expand Template Widget" untuk mencari kode di bawah ini.

<b:include data='post' name='post'/>

Untuk memudahkan pencarian kalian, gunakan Ctrl-F pada keyboard. Kemudian jika kalian telah menemukan kode di atas, langkah berikutnya adalah hapus kode tersebut dan silahkan kalian ganti dengan kode di bawah ini.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
   <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#eae9e9;color:#406a0e;"> 
         <data:post.title/></div></a>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

Langkah terakhir simpan template dan lihat blog. Nah sekarang coba kalian klik tulisan "Posting lama (Older Posts)" pada blog kalian. Bagaimana? Simpel bukan.

Menambahkan Elemen Menu Pada Halaman Template Blogger

2009-02-25T23:44:00.007+07:00

Pada waktu pertama kali kita membuat blog pada blogger, maka kita akan menggunakan template yang telah disediakan oleh blogger. Elemen halaman pada template tersebut biasanya terdiri dari header, post, sidebar, dan footer. Bentuk tampilan dari elemen halaman tersebut dapat kalian lihat di bawah ini.

Gambar di atas merupakan elemen halaman dari template blogger yang belum ditambahkan elemen menu. Sekarang kita akan mencoba menambahkan elemen menu pada halaman template blogger tersebut sehingga bentuk tampilannya akan menjadi seperti gambar di bawah ini.

Bagaimana menambahkan elemen menu tersebut pada template blogger? Baiklah saya akan mencoba memberitahu caranya kepada kalian. Simak penjelasannya di bawah ini.

Setelah kalian "Login" pada blog, masuklah ke bagian "Tata Letak" dan pilih "Edit HTML". Tambahkan kode Css di bawah ini tepat di atas kode ]]></b:skin> yang terdapat pada kolom kode "Edit HTML" blog kalian.

Kode Css

#LinkList2 h2 {
  display:none;
  }
#LinkList2 ul {
  list-style: none;
  }
#LinkList2 li {
  float: left;
  }
#LinkList2 a:link, #LinkList2 a:visited {
  padding: 5px;
  display: block;
  color:#fff;
  font-size:11px;
  font-family: "Times New Roman", Serif;
  }
#LinkList2 a:hover {
  padding: 5px;
  display: block;
  color:#ff0000;
  font-size:11px;
  font-family: "Times New Roman", Serif;
  }

Langkah Berikutnya dengan menggunkan Ctrl-F pada keyboard, carilah kode <div id='header-wrapper'> sehingga akan tampak tampilan kode sperti di bawah ini.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='judul blog(Header)' type='Header'/>
</b:section>
    </div>

Jika sudah kalian temukan, langkah berikutnya kita tambahkan kode elemen menu yang sudah saya beri warna biru sehingga tampilan kodenya akan tampak seperti di bawah ini.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList2' locked='true' title='Menu' type='LinkList'/>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
    </div>

Langkah terakhir simpan template kalian dan lihatlah pada "Elemen Halaman" template blog kalian. Nah sekarang elamen halaman blog kalian sudah bertambah dengan elemen menu. Adapun fungsi dan kegunaan dari elemen tersebut adalah kalian dapat membuat link yang ingin ditampilkan pada blog yang kalian miliki. Baiklah teman sampai di sini dulu postingan saya mengenai ini. Saya harap ini dapat bermanfaat bagi kalian.

Membuat Random Rotating Banner Pada Blogger

2009-02-24T23:49:00.013+07:00

Bagi kalian yang ingin menampilakan banner yang berbeda dalam setiap halamannya, maka kalian perlu coba cara yang satu ini. Dengan memasukkan kode di bawah ini, maka background image pada elemen "header" kalian akan ditampilkan secara acak dengan background image yang berbeda pada setiap kali browser pada halaman blog yang kalian miliki.

Random banner pertama kali diperkenalkan oleh Gabriel Lau. Dengan menggunakan script dari Ramani (Hackosphere) beliau berhasil meng-hack script tersebut untuk membuat random rotating banner pada blogger beta. Dengan tidak merubah bentuk dasarnya, di bawah ini adalah bentuk dari scriptnya.

Script Random Rotating Banner

<script type="text/javascript">

var banner= new Array()

banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

Sebelum kalian masukkan script di atas pada blog yang kalian miliki, maka kalian perlu memperhatikan terlebih dahulu kode yang sudah saya beri warna. berikut penjelasannya:

tulisan yang berwarna biru, silahkan kalian ganti dengan alamat (URL) tempat dimana kalian menyimpan gambar (image) pada webhosting image kalian.

Kalian dapat menambah atau mengurangi jumlah banner yang ingin kalian tampilkan dan sesuaikan dengan tulisan yang berwarna merah dari script di atas . misalnya:

Jika Mengurangi banner
banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
var random=Math.round(2*Math.random());

Jika Menambah banner
......
banner[5]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
banner[6]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
var random=Math.round(6*Math.random());

Setelah kalian sesuaikan scriptnya dengan mengikuti penjelasan di atas maka langkah berikutnya letakkan Script Random Rotating Banner yang sudah kalian sesuaikan tadi tepat di bawah kode ]]></b:skin> pada template blog kalian kemudian simpan template dan lihat hasilnya.

Agar bentuk tampilan banner kalian sempurna, sesuaikan ukuran banner dengan ukuran elemen header pada blog yang kalian miliki. Baiklah teman, sampai di sini saja penjelasan saya mengenai random rotating banner. Bagi kalian yang masih bingung di mana letak kode ]]></b:skin> berada, maka silahkan kalian membaca postingan-postingan saya sebelumnya.

2yu-blog

Uber Amazing Blog Award !

Menghiasi Blog Dengan Mini Icon

Twitter Widget Untuk Blogger

Top Komentator Widget

Encrypt HTML Source Code

Kode Warna-Warni

Membuat Related Post

Blogumus Pada Photo Flickr

Flash Animated Label Cloud

Scrolling Marquee Pada Tab Browser

Membuat Resize Window Animation

Membuat Menu Horizontal Navigasi

New Smiley Icons Pada Shoutmix

Memasang Meta Tag Pada Blogspot

Membuat Blogger Login Widget

Star Ratings Widget Pada Blog

Flying Bird Widget Pada Blogger

Recent Post Pada Blog (JavaScript)

Menonaktifkan Fungsi Klik Kanan Pada Mouse

Membuat Elemen Sidebar Berada Di Kiri Dan Kanan Postingan

Cara Membuat Blog

Membagi Elemen Halaman Footer Pada Blog Menjadi Tiga Bagian

Older Posts Dan Newer Posts Hanya Menampilkan Judul

Menambahkan Elemen Menu Pada Halaman Template Blogger

Membuat Random Rotating Banner Pada Blogger