Tampilkan postingan dengan label iProgrammer. Tampilkan semua postingan
Tampilkan postingan dengan label iProgrammer. Tampilkan semua postingan

Pada trik kali ini, saya akan mengajak anda untuk membuat Text Shadow / text ada bayangannya

CSS :
text-shadow :  1px 1px 1px #000000;
agak males mbahas langsung ke akar nich, saya mau nulis pemula dulu aj, ini saya lanjutkan setelah membahas pendahuluan mulai dari apa itu CSS, Macam-macam selector Dst, tapi kalau anda tidak sabar, bisa langsung buka di :

0 komentar


Secara default, Blogger memberikan tampilan sama pada setiap posting dalam sebuah blog. Dalam kelompok blog, Anda dapat menggunakan fitur ini untuk membuat penampilan yang berbeda untuk posting yang ditulis oleh pengguna yang berbeda. Sebagai contoh, satu user bisa posting dengan tampilan judul blog berwarna hitam, hijau atau dengan tampilan warna lainnya, dan juga posting mereka bisa memiliki warna latar belakang yang berbeda. Apa pun yang dapat Anda lakukan dalam CSS, anda dapat menentukan untuk posting dari pengguna tertentu. Berikut adalah contoh sederhana yang melibatkan warna.


Katakanlah kita memiliki dua pengguna berbagi blog dalam satu situs, dan nama-nama mereka adalah Ipoelnet dan Dicky. Biasanya ketika mereka posting, entri mereka terlihat sama, seperti dibawah ini:
11:30:00 AM
Kategori: iBlogger, iProgrammer, XML
Penulis : Dicky

3:04:00 AM
Kategori: Tugas Siswa
Penulis : Ipoelnet
Jika kita ingin membedakan agar warna postingan Ipoelnet berwarna biru dan warna postingan Dicky berwarna merah, langsung saja kita ke TKP ;)

1. Masuk ke Dasbor -> Tata Letak -> Edit HTML
2. Cari tag <$ BlogItemBody $> (untuk template classic) atau tag <data:post.body/> (untuk template Layout) yang ada pada XML script anda. Setelah ketemu, anda bisa menambahkan tag <span>, untuk menandainya dan jangan lupa beri tag span tersebut properti class atau id, mengapa demikian?? karena nantinya properti class atau id yang akan dituliskan merupakan berdasarkan nama class yang berhubungan dengan CSS, dalam contoh ini class berdasarkan nama penulis, ini cuman contoh dan andapun bisa mengganti dengan yang lain :

Untuk template classic
<span class="<$BlogItemAuthorNickname$>">
   <$BlogItemBody$>
</span>
Untuk layout
<span class="<data:post.author/>">
   <data:post.body/>
</span>
nah, sekarang kita tinggal menambahkan class CSS-nya, untuk membedakan antara milik Ipoelnet dan Dicky, contoh CSS-nya :
.Ipoelnet {color:blue;}
.Dicky {color:red;}
3. Simpan template anda dan lihat hasilnya, secara langsung akan menghasilkan seperti dibawah ini :
11:30:00 AM
Kategori: iBlogger, iProgrammer, XML
Penulis : Dicky
3:04:00 AM
Kategori: Tugas Siswa
Penulis : Ipoelnet

Selamat mencoba,

2 komentar


If / Else

Seperti promrograman lain, fungsi if/else untuk persyaratan pada keadaan tertentu. format umum pada blogspot di tandai dengan script :
<b:if cond='condition'>
   [content to display if condition is true]
<b:else/>
   [content to display if condition is false]
</b:if>
 
tag b:else itu adalah optional, jika kita menginginkan pilihan persyaratan lain, maka tag b:else adalah solusinya, jika tanpa tag b:else berarti akan tampil satu pilihan saja. dan untuk tag b:if ini sangat diperlukan dalam tiap kasus, dan kode penutup </b:if> itu wajib ada jika anda menggunakan fungsi tag b:if. contoh penggunaan tag b:if disini .

0 komentar


Menampilkan tanggal posting :
<b:if cond='data:post.dateHeader'>
<data:post.dateHeader/>
</b:if>
Menampilkan Jam Posting :
<b:if cond='data:post.url'>
<data:post.timestamp/>
</b:if>

Menampilkan Label/kategori Posting :
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
</b:loop>
</b:if>

0 komentar


Sebenarnya secara default saat kita membangun sebuah blooger, secara otomatis search enggine sudah ada dalam blogger kita, bagi teman-teman yang ingin memindah tempatnya , dibloggernya masih belum ada atau mungkin tempat pencariannya hilang saat mengganti template baru, nah... kode minimal HTML serach enggine di blogger kita yaitu :

<form action="/search" method="get">
<input maxlength="20" name="q" size="15" type="text" />
<input type="submit" value="GO" />   
</form>
kode diatas merupakan minimal yang ada tanpa model-model tertentu, letakkan saja langsung pada template HTML anda dimanapun anda mau, tapi seyogyanya ya ditempat yang di lihat nyaman dong.
Jika memaang pingin Search enggine dari gadget, coba cari seperti http://www.pax.com/ seperti milik friend saya disini.

0 komentar


Apa sih funsi memasang Recent Comments di blog kamu ? Recent comments artinya komentar terbaru yang dilakukan oleh pengunjung blog kamu. Dengan adanya Recent comments ini kamu akan tahu dan segera bisa memberi reply atau balasan pada pengunjung tadi baik untuk menjawabpertanyaan yang diajukan atau sekedar merespon kunjungan mereka, sehingga kamu senang pengunjungpun juga senang. Gimana mau coba gak ? gini caranya :

  1. Masuk ke account blogger kamu
  2. Pilih layout/tata letak – page element
  3. Kemudian klik add a gadget (tambah gadget)
  4. Pilih Html/Java Script, Kemudian copy dan paste aja kode di bawah ini :
<script style="text/javascript" src="http://kendhin.890m.com/comments.js"></script>
<script style="text/javascript">var a_rc=8;var m_rc=false;var n_rc=true;var o_rc=40;</script>
<script src="http://ipoelnet.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>

Lihat tulisan merah itu nama blog saya, dan harus diganti dengan nama blog kamu biar gak nyasar kemana-mana. Kemudian Klik save
Dibawah ini code alternative jika kamu sudah menggunakan kode di atas ternyata erorr gunakan kode di bawah ini
<div style="overflow:auto;width:140px;height:500px;padding:10px;border:1px solid #eee">
<script style="text/javascript" src="http://anas.ku93.googlepages.com/comments.js"></script>
<script style="text/javascript">
    var numcomments = 10;
    var showcommentdate = true;
    var showposttitle = true;
    var numchars = 100;
    var standardstyling = true;
</script>
<script src="http://ipoelnet.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>
Pada kode warna merah bagian atas berfungsi untuk mengatur lebar dan tinggi scroll dan bisa kamu rubah sendiri sesuai layout blog kamu jangan lupa ganti juga url blog saya.
  • numcomments = 10 artinya jumlah komentar yang ditampilkan.
  • numchars = 100 artinya karakter setiap komentar , tinggal kamu ganti sendiri
Silahkan posting komentar untuk pertanyaaan, jika anda mengalami kesulitan.. trims friends.

0 komentar


  1. Modal awal untuk belajar pemrograman adalah motivasi. Kalau motivasi Anda untuk belajar motivasi besar, Selamat… Anda adalah calon seorang programmer handal. Fokus selanjutnya adalah mengasah skill Anda untuk belajar pemrograman. Terus pertahankan motivasi yang telah Anda miliki. Jangan sampai motivasi ini pupus ketika menemui kegagalan.
  2. Jangan mudah menyerah. Memang… belajar pemrograman adalah tidak mudah. Butuh perjuangan, kerja keras, serta pengalaman (jam terbang). Jangan mudah menyerah ketika banyak error yang muncul ketika membuat program.
  3. Jangan sekali-kali menganggap pemrograman itu adalah sepenuhnya pelajaran ‘Menghapal’. Memang betul, menghapal juga diperlukan yaitu ketika menghapalkan sintaks dan aturan penulisan dalam program. Tapi secara prinsip, pemrograman adalah pelajaran cara berpikir dan logika bagaimana menyelesaikan masalah.
  4. Jangan hanya menjadi tukang ketik. Ketika dosen Anda memberikan contoh program di kelas atau ketika praktikum, jangan hanya memandang setiap barisan kode program tersebut sebagai angin lalu dan hanya Anda pindahkan ke kertas atau komputer. Kalau hanya demikian, sama halnya Anda belajar menjadi tukang ketik. Coba pahami setiap baris kode dan alur program yang dituliskan guru atau dosen Anda. Kalau sudah paham, coba tulis program menurut versi Anda sendiri ke buku atau komputer Anda. Apabila hal ini Anda lakukan, maka secara tidak sadar Anda telah melatih logika berpikir Anda dan belajar menuangkan logika berpikir ke dalam bentuk program.
  5. Untuk mendukung belajar Anda, coba cari orang yang mau mengajari Anda ketika menemui masalah dalam belajar pemrograman. Bisa teman dekat, teman di internet atau bahkan guru dan dosen yang dekat dengan Anda.
  6. Jangan mengandalkan tatap muka di kelas. Materi pemrograman sangatlah luas. Apa yang diberikan dosen ketika kuliah itu sangatlah kecil cakupannya dibandingkan keseluruhan ilmu pemrograman. Cobalah eksplorasi sendiri segala hal tentang pemrograman. Ada banyak referensi di internet yang membahas tentang tips dan trik serta teknik dalam pemrograman.
  7. Carilah komunitas yang fokus dengan pemrograman. Di internet ada banyak forum diskusi via web atau mailing list yang membahas tentang pemrograman. Ingat… bahwa orang yang sering bergaul dengan penjual minyak wangi maka dia akan ikut menjadi wangi… So… kita adopsi hal ini. Banyak-banyaklah bergaul dengan orang dalam komunitas yang sama-sama interest dengan pemrograman.
  8. Sangat disarankan Anda memiliki komputer sendiri di rumah atau di kost. Seperti yang telah saya jelaskan di atas bahwa untuk menguasai pemrograman butuh pengalaman dan jam terbang yang banyak dalam membuat progam. Kalau Anda tidak memiliki komputer sendiri, bagaimana bisa menambah jam terbangnya? Untuk belajar pemrograman tidaklah harus membutuhkan komputer dengan spesifikasi tinggi. Cukup komputer Pentium III saja itu sudah bisa, kecuali Anda belajar program yang memang butuh spesifikasi besar misalnya programan berbasis visual. Oya… jangan sekali-kali mengandalkan jam praktikum di laboratorium karena waktu penggunaannya sangat-sangat terbatas. Anggap saja ketika Anda beli komputer adalah sebagai investasi jangka panjang. Yakinlah suatu saat modal Anda untuk membeli komputer itu akan balik kembali, atau malah akan memberikan return of investment yang jauh lebih besar.
  9. Jangan hanya mengandalkan catatan atau modul yang diberikan oleh dosen. Isi modul yang ditulis oleh dosen itu rata-rata masih sedikit kontennya. Berusahalah mencari referensi sendiri terkait dengan pemrograman. Toh… saat ini sudah banyak buku-buku yang mengulas tentang pemrograman. Kalau Anda ingin yang gratis, coba cari referensi di internet karena tersedia banyak free ebook yang bisa didownload.
  10. Jangan hanya asal copy paste. Rata-rata orang yang asal copy paste program itu tidak berusaha memahami program yang dia copy. Coba pahami dahulu program yang Anda peroleh terutama pada algoritmanya, kalau bisa tulis kembali program tersebut menurut versi Anda. Boleh sih copy paste.. asal Anda juga berusaha memahami makna program di dalamnya. Syukur-syukur kalau Anda memodifikasi kode programnya.

source : http://www.bimakab.go.id

0 komentar


Pernah lihat gambar seperti ini pada blogspot ?
Itu adalah Numbered Page Navigation. Yang berfungsi buat navigasi halaman blog berdasarkan nomor.

Gimana cara buatnya:


# Langkah Pertama:
Copy kode dibawah ini lalu paste ke blog kamu. caranya:
Cari kode XML dibawah ini (di bagian Edit HTML kamu):

]]></b:skin>
Setelah dapat silahkan copy kode CSS yang ada dibawah ini, terus taruh kodenya tsb tepat diatas kode ]]></b:skin>].
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
# Langkah Kedua

Cari kode XML dibawah ini (di bagian Edit HTML kamu):
<!-- Untuk Prev / Postingan Baru -->
<b:if cond='data:newerPageUrl'>
  <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
  </span>
</b:if>
<!-- letakkan sini -->
<!-- unutuk Next Postingan Lama -->
<b:if cond='data:olderPageUrl'>
  <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
  </span>
</b:if>
Kemudian setelah ketemu tarus kode ini di bawah kata <!-- letakkan sini -->
<!-- Page Navigation -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
        var pageCount=5;
        var displayPageNum=5;
        var upPageWord ='Prev';
        var downPageWord ='Next';
    </script>
    <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

Alhasil, Simpan Template lalu lihat hasilnya, seperti pada blog saya itu tu... :D

Perhatikan:
  • Var pageCount=5; -> angka 5 artinya, ada 5 postingan yang tampil perhalaman, silahkan diganti menurut kamu, Ingat : sesuaikan dengan nilai pada saat kamu setting gadget, nilai defaultnya adalah 5 entri perhalaman.
  • Var displayPageNum=5; ->angka 5 juga bisa diganti sesuka kamu.
  • Var upPageWord ='Previous'; -> kata previous kata yg muncul di blog bisa diganti, misalnya "sebelumnya", atau apapun yg kamu mau.
  • Var downPageWord ='Next'; -> kata next kata yg muncul di blog bisa diganti, misalnya "berikutnya", atau apapun yg kamu mau.
 Silahkan posting komentar untuk pertanyaaan, jika anda mengalami kesulitan.. trims friends.

0 komentar

Langganan: Postingan (Atom)

Beta Blogs

Situs ini masih dalam pengembangan, dikit-dikit ajalah....
Tadi malem nemu nemu script baru dan hasilnya di Gallery tapi lom sampai dini, admin masih ngoprek lagi.....

Twitter Module

Show users what you're up to! The YOOtweet module is the neatest way to display your Twitter entries directly on your website. New YOOtweet module! For more details take a look at the YOOtweet page...