Cara Membuat Auto Block Pada tag Code

Cara Membuat Auto Block Pada tag Code - Berhubung masih hari raya idul fitri saya selaku admin blog ini mengucapkan minal aidin walfaizin mohon maaf lahir dan batin :).

Postingan awal lebaran saya buat yang agak simpel bahkan sangat simpel yaitu Auto Block Pada Tag Code biasanya setiap kode diselubungi oleh tag pre namun untuk setiap kode pendek biasanya cukup ditandai dengan <code>...script...</code>.


Pemasangan Auto Block Tag Code pada blog:
Masuk ke edit template kemudian tambahkan CSS dan letakkan diatas kode ]]></b:skin>

CSS
Css disini meliputi: font, background, border dll dan dapat divariasi sesuka hati
code {
  font:normal 12px/14px Monaco,Monospace;
  background:rgba(255,255,255,.4);;
  border:1px solid #eee;
  padding:1px;
  cursor:default;
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}

Javascript
Letakkan script dibawah ini diatas kode </head>
<script type='text/javascript'>
$(function() {
    $('code').click(function() {
        var refNode = $(this)[0];
        if($.browser.msie) {
            var range = document.body.createTextRange();
            range.moveToElementText(refNode);
            range.select();
        } else if($.browser.mozilla || $.browser.opera) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(refNode);
            selection.removeAllRanges();
            selection.addRange(range);
        } else if($.browser.safari) {
            var selection = window.getSelection();
            selection.setBaseAndExtent(refNode, 0, refNode, 1);
        }
    });
});
</script>
Kemudian Simpan.

Penerapan pada posting
Tambahkan pada setiap kode pendek yang akan di block dengan script <code>...isi...</code>

Tutorial ini hanya untuk newbe semata jika ada mastah yang kurang berkenan mohon maaf, karena saya disini masih belajar :D

Sumber refrensi: Taufik Nurrahman dan jangan lupa mampir kesini

Kumpulan CSS3 Generator

Kumpulan CSS3 Generator - Terinspirasi dari membuat template yang masih saya kerjakan lalu saya coba cari tools untuk mempermudah membuat template dan sampailah pada link-link berikut, disini kita bisa membuat kerangka template ataupun membuat tombol (button) dengan CSS3 Generator tersebut dan lain-lain lah.


Semua link dibawah ini adalah hasil yang udah saya cari mulai dari google sampai gara-gara nyasar di blog tetangga, berikut link-link yang sudah saya temukan cekidot:


  1. http://csslayoutgenerator.com/
  2. http://www.webtutorialplus.com/css3-generator.aspx
  3. http://css3generator.com/
  4. http://cssload.net/
  5. http://www.joelambert.co.uk/morf/
  6. http://westciv.com/tools/boxshadows/index.html
  7. http://www.3dcsstext.com/
  8. http://www.csstextwrap.com/
  9. http://www.wordpressthemeshock.com/css-drop-shadow/
  10. http://csswarp.eleqtriq.com/
  11. http://border-radius.com/
  12. http://codefuture.co.uk/css/css3-Transform.php
  13. http://www.imgtocss.com/
  14. http://css3button.net/
  15. http://www.css3shapes.com/
  16. http://www.text-image.com/
  17. http://cssarrowplease.com/
  18. http://cssround.com/
  19. http://www.css3d.net/ribbon-generator/
  20. http://css3please.com/
  21. http://csscorners.com/
  22. http://css3.mikeplate.com/
  23. http://www.css3.me/
  24. http://css3clickchart.com/
  25. http://layerstyles.org/builder.html

Mungkin segitu saja, cuma sekedar share saja sih daripada kadaluarsa di notepad saya hehe, mungkin ada mastah yang mau nambahin silahkan :D
Jangan lupa mampir kesini

Cara Membuat Burung Twitter di Blogspot

Cara Membuat Widget Burung Twitter di Blogspot - Iseng-iseng daripada tidak posting sama sekali, maklum blogger pemula yang bisanya cuma jiplak sana-sini, ngikut sana-ngikut sini, dan copas sana-copas sini, eh... kalo copas ndak lah.

Ok kita persingkat saja tutorial yang sangat mendasar dan mudah ini, mungkin dimata para master blogging hal ini cuma sebatas postingan yang tidak terlalu berguna karena selera mereka pasti sudah lebih elegan dan lebih menantang seperti Blogazine dll.
Twitter. Image by Spoon Graphics

Twitter merupakan salah satu jejaring sosial yang populer saat ini, dan sebenarnya masih ada beberapa lagi seperti Facebook dan Google +. Tidak hanya untuk mempunyai banyak Followers, Twitter juga bisa digunakan untuk sarana menambah reader lho, karena Twitter sangat banyak penggunanya seperti jejaring sosial yang lain maka hal tersebut sangat memungkinkan untuk digunakan untuk berbagi informasi.

Karena diatas sudah kita singgung untuk mempersingkat tutorial ini maka kita langsung saja menuju tahap-tahapannya
  • Klik Layout > Add Gadget > Html/Javascript
  • Tambahkan kode dibawah ini
<!-- Floating Twitter Bird -->
<script type="text/javascript" src="https://koderator.googlecode.com/files/twitter.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClQxWyrsYkcsKHIjkG20BoJcQxc4PEaqnKEWb88H0k2OrbGRm7qBbttoqdh5xcdnqDLfL_ps_ZxiX6RkVFjwt8m69RJgaLw8Ht-TfLMjqitScIQUUlRAKeXWoXLCKX5XYz3DHC5UgR7w/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/koderator";
var tweetThisText = "Twitter - UserID http://koderator.blogspot.com/";
tripleflapInit();
</script>
  • Rubah kode yang diblok biru dengan username twittermu dan kode yang diblok merah dengan model burung yang kamu sukai
  • Simpan dan kemudian lihat hasilnya

Pilihan Model Warna Burung Twitter
  • Warna Kuning
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdymrGVDKr_EUuDY3ijxJXvvFWX-ezD-DIGeAQ3mqRgPu9JGbOOiqjwQzAJIT9iS6DoXMJHcIefgUHzQOrpLVBGVddXJa0EGcDL9wTuR0xJllzrwhvSz0m-8yyi8Z7dCgVjN135NJVJ4/s1600/yellow+bird.png
  • Warna Hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Fut0trn_dT7t0_rq94iUyQM7tD8-brwMD_bkgO4bp1UzR6CKHveBG0Ti84M4mLHGAqAdIgWdB63c399orrB9oKTGOI1sfr_rXJlC9Yhhx2rI_xKgdVe2enaPg5rvUav4o7YzRF3SPnU/s1600/black+bird.png
  • Warna Biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwvl6Q1m4YzDOs49L8rZCXKSwuXZdIknc7CTfmnYTjvSHnBafkbp2FwO_81T4eushWYsGtgEsmXTgimTe-Vo4VHfMuyYWdOoXwSbCWkGs1jRiT6iuUiqCSfpgP2ZFbVbdgfYHfoK4hzkk/s1600/Blue+bird.png
  • Warna Coklat
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoG5dbq4OJTud-D55x_Ojlob4JKjddPgkwM-ZCw-BhKHPRAFIaiSYQPBIhTYpb0lHs86nxwpMuvXNCZZw35FWPjhcZ07stGdKZYvDnzn0pvSBRAqzKskwEs_sxpoVGayOUM2kT2bQ1pzI/s1600/brown+bird.png
  • Warna Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QsgFwt5wMMp720fePCW85_pHZQ1nD6BxD8kxcOwfrPB0E-JayOFtEtdP2SG_OK2N_aSE8vJQyxFxJw7ZpmfQvNKCHqpg1uYBUqgIQDCWtIqPjJQwwhoHinLfw-_rWW8LTCHKN-APi_Q/s1600/Green+bird.png
  • Warna Ungu
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcCpetnnSHzDQXDGu8tgpvRsvN9H3YHoIy2Vs2Ev-LU8Ct83RB_8DaP6lesJuFZ4sPhcS2qufC6djwBiCQVMaR9q_H30k4By8YkR6NQCLBwhUARvm8vKNlUbg_lD2X3EcUJSf40VkKEs/s1600/purple+bird.png
  • Warna Putih
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2sfTOL3aupJls5ibMdsoCyfAipRkaDtXqxFHZOiMPBTpDhffmWbFeY_t2QxxYnJ4nC45Aes1zy-gaWBcY0xk9p2LpryYXfWlyiUUy5TB6X90zZSlXbG4uXkdrL_IIhJCDI-us1Y9HXU/s1600/white+bird.png
  • Warna Merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0H2W4nwZUUr2Mk_OO9V3O53U_kL5xkagddc7bXuKVgJJdtzVrQvdZTruzuoeK5tqT1zUgAJWkNFV2PEiMDwENGQWqPmE9c6rTc1tq0hRHdrfW01RZgeNXq6pw9J_k7Y9SQ6j9Zl111FY/s1600/red+bird.png
Selamat Mencoba.
Jangan lupa mampir kesini

Vintage Style Social Bookmark Icon

Vintage Style Social Bookmark Icon - Mengikuti arus globalisasi tidak harus menampilkan hal-hal yang moderen begitu juga dengan blog. Blog boleh terdepan namun tampilan jadul sah-sah saja, kali ini saya akan berbagi tentang Vintage Style Social Bookmark Icon. Social Bookmark kali ini berbeda dengan yang lain kenapa? karena model dari Social Bookmark ini bernuansa antik dan kalau dilihat-lihat bentuknya kayak perangko. Postingan kali ini saya mengambil refrensi dari spiceupyourblog, tidak sabar ingin lihat bagaimana bentuknya? klik disini untuk lihat demonya, atau bisa lihat penampakkannya dibawah ini.



Demo


Langkah-langkah memasangnya dalam blog anda, anda harus mengikuti tahap-tahap berikut ini:
Langkah 1
Login ke Blogger
Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 2
Masukan (copypaste) kode dibawah ini pada bagian kolom:
#0b5394 <style>
a:hover {background-color: transparent;opacity:0.7;}
</style>

<a title="Rss Feed" href="http://feeds.feedburner.com/koderator" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsaHB1pcZkJ9Nh7uf4K2zOvjvPPY3IRHyfGjogFObhyphenhyphenJPTAo3ssULtR7dYfCM35wtbqmJQ1clvYL_Vf9Q7iVtIpttE321OXnr-_zEfdzsW15TZVx1YYHIK8hP-5hyphenhyphenmPxD6g7KXW39TKgTI/s1600/rss_48x48.png" /></a>

<a title="Subscribe Via Email Rss" href="http://feedburner.google.com/fb/a/mailverify?uri=koderator&loc=en_US" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8WLqMp89ahl6B_jBA3Eon_1jAoB1JHIpr85odhrX6A4uhp4CCWVBlqAFGgaWWSmpZIE8SlAhjIIyxdeUMvujxfiEi9WoH3PUvnrQ5_JhX-D3oGOOgUz2zhXgMwbYixxMcnwdzZPUdnxuX/s1600/mailrss_48x48.png" /></a>

<a title="Follow On Twitter" href="http://twitter.com/koderator" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8WNDnVFYNRavkFzkPHGFYvjS9zRB5tGm7zhR7-9oGhKNa8ig9B3MKcOwllAunF1I7JEKQbvxpiSnnh3G9CrE-VICy7GNjJpdJF_IAPC2VbiytW2TCUITMB22LTr3CBRHIhjnbO5EPDYa3/s1600/twitter_48x48.png" /></a>

<a title="Find Us On Facebook" href="http://facebook.com/koderator" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSDAq-pOXt6NnBum0j_Yw-R00HjOHgGz7vie3LgO5Hm4l_zqQEKX30k_zj0tyqk284QKAK03LIBJCAQj1WFBLbeTxj9CDEi1-m9IKdOdAcX_H6YN0hpk8c4-3Gb2UmnR3l3iWqPzNAMR9/s1600/facebook_48x48.png" /></a>

<a title="Add To Circles" href="https://plus.google.com/u/0/111871934566975825525" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihRn1Bh-TX4POSSnkDSEeoBZ_xpSzAY9PhBqrc3oWQ4DaSTf5G-rczkxlKjCaJveGXrGnajwiXdlVVueH4-9QfXsO98yNOIHLfRhdOlI0Q1ghYqKSmxzd_MNkxfXBxYRNbhGlfKBx2cgMM/s1600/googleplus_48x48.png" /></a>
Untuk yang saya blog merah ganti dengan url jejaring sosial dan feedburner anda dan yang terakhir klik save.
Semoga bermanfaat selamat mencoba semoga berhasil.

Cara Membuat Table Sederhana Menggunakan CSS

Biasa menyelesaikan pekerjaan menggunakan Microsoft Office Exel? Mungkin yang biasa menggunakan OS Windows ataupun XP pasti tidak asing dengan software office tersebut dan tidak asing pula dengan yang namanya kotak kotak, ya kan? pasti iya. Tadi kita telah membahas CSS3 Animasi Button nah sekarang kita kembali ke tutorial Basic terlebih dahulu yah yang mudah-mudah aja, tutorial kali ini akan membahas tentang Table.


Demo


What is the Table? Table yaitu suatu molekul-molekul atom yang bersatu karena kesalahan genetik dan membentuk sudut siku-siku (90 derajat / suatu sudut yang dibangun oleh perputaran sebesar seperempat lingkaran) yang notabenya sudut adalah suatu besaran yang dibangun oleh sinar yang diputar dengan pusat perputaran suatu titik tertentu dari suatu posisi awal ke suatu posisi terminal, terminal sendiri bagi suatu OS dalam sebuah komputer seperti Linux bisa diuraikan bahwa terminal merupakan media yang sangat penting atau bisa disebut juga vital dan dari semua uraian tersebut bisa kita fahami bahwa Table itu adalah media yang sangat vital. ???

Cara Membuat Table Sederhana Menggunakan CSSCara Membuat Table HTML -Setelah kita berbincang-bincang cukup singkat pada topik diatas mari kita sudahi saja dan berpindah ke tutorial, mari simak cara-caranya dibawah ini dan untuk kode CSS letakkan diatas ]]></b:skin>

CSS

/* Table
----------------------------------------------- */
table[border="1"]{
border-collapse:collapse;margin:0px
}
table[border="1"],table[border="1"] th,table[border="1"] td{
border:1px solid #bbb;padding:2px 7px
}
td{
vertical-align:top
}
table[border="1"] th{
background-color:#fafafa;font-weight:700;text-align:left
}
.full,table.full{
width:98.8%
}
table.config{
background-color:#FFF
}
table.config td,table.config th{
border-color:#E4E4E4
}
table.config th{
background-color:#333;color:white
}

Style 1
Header TableHeader Table
kiri 1kanan 1
kiri 2kanan 2
kiri 3kanan 3
kiri 4kanan 4
kiri 5kanan 5

Style HTML 1
<table border="1" class="full config"><tbody>
<tr><th>Header Table</th><th>Header Table</th></tr>
<tr><td>kiri 1</td><td>kanan 1</td></tr>
<tr><td>kiri 2</td><td>kanan 2</td></tr>
<tr><td>kiri 3</td><td>kanan 3</td></tr>
<tr><td>kiri 4</td><td>kanan 4</td></tr>
<tr><td>kiri 5</td><td>kanan 5</td></tr>
</tbody></table>




Style 2
Header 1 Header 2
kiri 1kanan 1
kanan 2
kiri 2kanan 3
kanan 4
kiri 3 kanan 5
kanan 6
kiri 4kanan 7
kanan 8

Style HTML 2
<table border="1" class="full config"><tbody>
<tr><th>Header 1 </th><th>Header 2 </th></tr>
<tr><td rowspan="2">kiri 1</td><td>kanan 1</td></tr>
<tr><td>kanan 2</td></tr>
<tr><td rowspan="2">kiri 2</td><td>kanan 3</td></tr>
<tr><td>kanan 4</td></tr>
<tr><td rowspan="2">kiri 3 </td><td>kanan 5</td></tr>
<tr><td>kanan 6</td></tr>
<tr><td rowspan="2">kiri 4</td><td>kanan 7</td></tr>
<tr><td>kanan 8</td></tr>
</tbody></table>

Cara Memasang tags ALT dan TITLE Pada Gambar Secara Otomatis

Cara Memasang tags ALT dan TITLE Pada Gambar Secara Otomatis - Secara teknis untuk mencapai SEO pengguaan tag ALT dan TITTLE pada gambar sangatlah penting, karena jika tanpa itu robot google tidak bisa membaca gambar yang kita unggah dan untuk mengatasi masalah itu mari kita terapkan tutorial ini pada blog kita.
SEO

Cara penerapannya letakkan kode berikut diatas kode  </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script>

Scripttersebut akan langsung membuat tags alt dan title untuk foto yang sobat unggah secara otomatis, maka dari itu pastikan terlebih dahulu nama file foto sebelum di upload.

Semoga berhasil, jangan lupa mampir kesini yah :D

Advertisement