Contoh Postingan

Aplikasi-aplikasi Android bagai madu yang menarik perhatian para lebah. Setelah RIM menyebutkan akan ada aplikasi Android di BlackBerry Playbook, kali ini "lebah" baru Windows 8 pun akan bisa menjalankan aplikasi Android.

Namun, yang menyematkan aplikasi Android di Windows 8 bukanlah resmi dari Microsoft, tetapi dari pihak ketiga. Adalah aplikasi BlueStack yang memungkinkan perangkat baik PC, laptop maupun tablet berbasis Windows 8 dapat menjalankan ribuan aplikasi dari Android Market.

Dalam ajang pameran elektronik Consumer Electronics Show 2012 di Las Vegas, pihak BlueStacks telah mengumumkan bahwa mereka akan membuat semacam App Player yang mampu menjalankan semua aplikasi Android pada perangkat dengan Windows 8, pada tahun 2012 ini.

CEO BlueStacks Rosen Sharma, memuji kecantikan tampilan antarmuka Metro User Interface (Metro UI) yang digunakan dalam Windows 8. Meski begitu, Sharma menilai jumlah aplikasi di Windows 8 masih sangat minim, mengingat Windows 8 tidak hanya diperuntukan untuk komputer saja, tetapi juga untuk smartphone dan tablet.


Atas dasar itulah BlueStacks membuat App Player Android ini yang bertujuan mengisi kekurangan aplikasi dalam Windows 8. Ini berarti akan ada 400.000 lebih aplikasi Android yang dapat dijalankan di Windows 8.

App player tersebut akan terintegrasi dengan Metro UI bergaya tile, sehingga aplikasi Android terlihat menyatu pada platform Microsoft.
BlueStacks menjanjikan App Player ini akan tersedia dalam bentuk beta pada Februari 2012. Sementara tanggal peluncuran versi finalnya belum ditentukan, namun disebutkan paling lama pertengahan tahun 2012.

Tahun lalu, BlueStacks telah merilis aplikasi bernama Apps-on-PC yang memungkinkan ribuan aplikasi Android dapat diakses melalui personal computer (PC) berbasis Windows.

Merubah Tanggal Posting dalam Bentuk Icon Kalender

Membuat blog menjadi lebih menarik merupakan kesibukan besar blogger selain aktivitas posting yang sangat menyita waktu, energy dan terutama otak. Banyak cara dilakukan untuk membuat blog terlihat semakin indah dan menarik, dimana salah satunya adalah dengan membuat tanggal posting terlihat bagai sebuah kalender meja dalam ukuran mini (Lihat di sebelah kiri judul posting!). Membuat wajah baru seperti ini dapat dilakukan dengan beberapa cara, namun dari sekian banyak yang termudah adalah dengan cara yang akan tersampaikan di bawah. Tidak banyak kode dan javascript serta kode HTML yang harus digunakan. Pemasangan dan penyimpanannyapun sangatlah simple. Perubahan yang penting dan menjadi keharusan yang harus dilakukan, selain penambahan kode adalah perubahan format tanggal posting. Format tanggal posting ini sekaligus akan menjadi penentu muncul tidaknya desain tanggal posting dalam bentuk icon kalender yang kita buat. Agar tutorial ini lebih mudah dipahami, terlebih dahulu kita akan memulai dari cara pemasangan dan penyimpanan kode yang nantinya akan kita pergunakan.

Langkah untuk Merubah Tampilan Tanggal Posting

• Lakukan login terlebih dahulu untuk mempercepat proses pembuatan bentuk tanggal posting yang baru.
  • Tulis User Alamat Email (Email Address).
  • Tulis Password.
  • KLIK "LOGIN"
• KLIK "DESIGN/RANCANGAN".
• KLIK "EDIT HTML".
• KLIK "Download Template Lengkap" untuk melakukan proses BACK-UP Templates.
  • Simpan file template di folder PC. Berikan nama yang berkaitan dengan saat perubahan desain dilakukan (contoh: dec10) untuk memudahkan saat file ini diperlukan kembali.
  • Setelah proses penyimpanan file template silahkan tetap di "EDIT HTML".
  • KLIK "Expan Widget Templates".
• Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode.
  • Setelah anda klik Ctrl+F secara bersamaan, copy-paste kode ]]></b:skin> dalam box pencarian.
  • KLIK "Find".
• Simpan javascript di bawah kode ]]></b:skin> dan Kode CSS di atas kode ]]></b:skin>.
• Lanjutkan dengan mencari kode <data:post.dateHeader/> dengan cara seperti saat mencari ]]></b:skin>, kemudian ganti kode tersebut dengan xHTML yang baru (disertakan di bawah!).
• KLIK "SAVE Templates (Simpan Templates)".

Javascript

]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</script>

Kode CSS

h2.date-header{
      margin:1.5em .5em 0.5em;
}
.kalender{
      background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/bgGreenCalendarAnima.gif) no-repeat;
      width:44px;
      margin:20px 10px 0 8px;
      float:left;
      font-weight:bold;
      height:52px;
      text-align:center;
      border:1px solid #777;
      border-radius:5px;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
      opacity:0.8;
     -o-transition:all ease-in 1s;
     -moz-transition:all ease-in 1s;
     -webkit-transition:all ease-in 1s;
      filter:alpha(opacity=80);
      padding:1px;
}
.kalender:hover{
      filter:alpha(opacity=100);
      opacity:1.0;
      border-color:red;
}
.month{
      font-size:10px;
      width:33px;
      margin:3px 2px 0 6px;
      text-transform:uppercase; 
      color:#4d010a;
      padding: 2px 0px 0px 0px;
}
.day{
      color:#555;
      font-size:27px;
      width:44px;
      margin:0;padding:0;
}

]]></b:skin>

xHTML

<div class='kalender'>
<script type='text/javascript'>
date_replace(&#39;<data:post.dateHeader/>&#39;);
</script>
</div>

Setelah semua proses selesai, lakukan perubahan format tanggal posting ke bentuk bulan.tanggal.tahun (contoh: 12.22.2010).

• KLIK "SETTINGS" (Pengaturan).
• KLIK "FORMAT".
• Lihat "Format Header Tanggal".
• Rubah format tanggal sesuai contoh di atas.
• KLIK "SAVE (Simpan).
• Buka blog dan lihat hasilnya!

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• shannenpio cloning
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin

Cara Membuat Floating Image Link dengan kode CSS dan CSS3

Jika anda sering menjelajah blog, pasti pernah menjumpai gambar/image yang terpasang di pojok kanan-bawah atau kiri bawah halaman. Gambar-gambar tersebut bisa berupa gambar berekstensi .gif, .jpg atau .png. Beberapa yang lain juga memanfaatkan gambar animasi gif dan flash. Selain berfungsi menambah keindahan, pada gambar bisa ditambahkan sebuah link hingga ketika pengunjung meng-klik gambar tersebut maka dia akan dibawa ke halaman yang baru dari blog tersebut atau ke blog/web dengan alamat berbeda. Floating image yang di dalamnya berisikan link akan memberi manfaat lebih karena sebuah link penting bisa selalu "nongkrong" tepat di sebuah gambar yang terpajang di satu bagian blog yang mudah dan selalu terlihat oleh setiap pengunjung.

Penempatan di pojok kanan-bawah atau di kiri-bawah bertujuan supaya gambar gampang terlihat tidak terlalu mengganggu bagian blog yang lain. Anda bisa menggunakan gambar dengan ukuran "sesuka hati" sepanjang blog tetap nyaman untuk dinikmati pengunjung. Karena di dalamnya sudah diselipkan sebuah link, maka selanjutnya gambar ini kita sebut sebagai floating image link yang akan selalu terlihat sekalipun halaman digulung hingga ujung terbawah.

Kita bisa membuat floating image link dengan 3 macam cara:

• Hanya menggunakan xHTML.
• Menggunakan kode CSS dan xHTML.
• Memadukan kode3 CSS dan CSS3 serta xHTML.

Contoh Floating Image Link yang dibuat hanya menggunakan xHTML dapat anda lihat di halaman ini pada ujung/pojok kanan-bawah.

Jika anda ingin melihat bagaimana sebuah Floating Image Link yang dibangun dengan menggunakan kode CSS, CSS3 transformation dan CSS3 transition serta xHTMl, silahkan klik link DEMO di bawah ini. CSS3 transition dan transformation akan membuat efek yang memperindah tampilan Floating Image Link. Perlu menjadi catatan bahwa karena menggunakan kode CSS3, maka apabila anda ingin melihat bentuk efek dan tampilannya secara sempurna, anda harus menggunakan browser yang sudah mendukung CSS3 seperti Opera 1041 hingga Opera 1063, Google Chrome, Safari dan Mozilla Firefox 4.0 beta 1 hingga beta 6.

D E M O

Kode CSS

#pojok {
        position:fixed;
        left:2px;
        bottom:2px;
}  
#pojok img {
        height:167px;
        width:20px; 
        border:3px solid #888;
        padding:1px;
        background:#aaa;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
       -o-transition:all 1.2s ease-out;
       -moz-transition:all 1.2s ease-out;
       -webkit-transition:all 1.2s ease-out;
}  
#pojok:hover img {
        z-index:99;
        background:#993300;
        border-color:#FF0000;
       -o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
       -moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
       -webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
}

]]></b:skin>

xHTMl

<div id="pojok">
<a href="http://bloggerstuars.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL-Mlo_Z1r4PhdKlmaYJ8ZxbZG9g-Y6xfkkc6rSzEjkst7DekNdAcSb5c8FcZ0BHQ8NLm0Kvo0Kch9-XarcILfFh0M2eu94aIHSsmUKgNczrRTxF2uHJ4gMVOShVvWT3ttB7I5gYL2kgEq/s200/gubhugreyot167.20.jpg" /></a>
</div>

</body>

Cara Membuat Floating Image/Floating Image Link

• Login : Login ke Blogger.
  • Tuliskan Email Address.
  • Tuliskan Password.
  • KLIK Login.
• Dasbor : Setelah login anda akan menjumpai halaman dasbor. Cari dan klik "Design/Rancangan".
• Design/Rancangan : klik "Edit HTML".
• Cari kode ]]></b:skin>, kemudian letakkan kode CSS di atasnya.
• Cari kode </body>, dan letakkan xHTML atasnya.
• KLIK SAVE Templates/Simpan Template.
• Buka blog dan lihat hasilnya.

Catatan & Keterangan:

• Rubah/ganti kode yang berwarna oranye dengan URL yang akan dipasang sebagai link.
• Ganti kode yang berwarna kuning dengan teks yang sesuai dengan URL.
• Ganti kode yang berwarna merah dengan URL image/gambar.
• Ganti nilai width dan height pada kode CSS dengan ukuran yang baru sesuai gambar yang akan ditampilkan.
• Gunakan gambar yang tidak terlalu besar agar tidak mengganggu tampilan blog dan kenikmatan pengunjung saat menjelajahi isi blog.

Jika anda ingin membuat Floating Image Link yang khusus hanya menggunakan xHTMl, silahkan buka tutorialnya dengan klik link di bawah ini:

Floating Image Link (xHTML only)

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• shannenpio cloning
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin

Cara Menggunakan Onmouseover dan Onmouseout untuk Menciptakan Hover pada Image/gambar

Hal-hal yang teramat sederhana seringkali dibutuhkan pada saat-saat tertentu. Contohnya adalah membuat atau memunculkan hover sebuah gambar. Jika pada umumnya gambar yang berbeda harus dihasilkan melalui hover dengan menggunakan kode CSS yang disimpan di halaman edit HTML atau widget, dengan memanfaatkan onmouseover dan onmouseout, maka kode CSS tak diperlukan lagi. Cara seperti ini cukup praktis untuk digunakan di halaman posting atau di bagian yang lain seperti halnya di sidebar blog.

Dua buah gambar berbeda, melalui onmouseover dan onmouseout dapat dimunculkan pada satu tempat/ruang yang sama (seperti hover image). Ketika cursor disentuhkan pada gambar maka fungsi onmouseover bekerja sehingga gambar ke-2 terlihat. Saat cursor dijauhkan dari gambar (onmouseout), maka kembali gambar pertama terlihat. Dengan menggerakkan cursor di atas gambar di bawah ini, kemudian melepaskan/menjauhkan kembali cursor dari gambar, maka anda akan melihat bagaimana onmouseover dan onmouseout bekerja.



Fungsi seperti di samping biasanya bekerja dengan cara memanfaatkan hover yang dibangun dalam bentuk kode CSS dimana syntax-nya seperti contoh berikut:

.gambar {height:..px;width:..px;background:url(...jpg) center no-repeat;padding:..px;border:...;margin:..px; ...dst;}
.gambar:hover{background:url(...jpg) center no-repeat; ... dst;}

Untuk membuat efek hover image menggunakan fungsi onmouseover dan onmouseout seperti gambar di atas, kode yang digunakan sbb:

<img onmouseover="this.src='URL-image2'" src="URL-image1" onmouseout="this.src='URL-image1'" style="float:left;margin:0 10px 5px 0;height:101px;width:80px;" />

Contoh:

<img onmouseover="this.src='http://i39.tinypic.com/mvhp1j.gif'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibySvvZy97O6u14iwROLh3z4Qs78OfHDP231z2HmQG-LZdecU70dmaokfJDQENtOP_UIATYMZTYIfVQBs0gstCQIPcussX8b4Y8H1ZN8kmFVWUhz_m6fUjd-wYgZD2dx6DV3HO0CJLSDs/s200/BloggerstuarsProfile.jpg" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibySvvZy97O6u14iwROLh3z4Qs78OfHDP231z2HmQG-LZdecU70dmaokfJDQENtOP_UIATYMZTYIfVQBs0gstCQIPcussX8b4Y8H1ZN8kmFVWUhz_m6fUjd-wYgZD2dx6DV3HO0CJLSDs/s200/BloggerstuarsProfile.jpg'" style="float:left;margin:0 10px 5px 0;height:101px;width:80px;" />

Catatan & Keterangan:

• Gunakan dua buah gambar dengan ukuran yang sama.
• Penambahkan style berfungsi untuk membentuk berbagai variasi baru serta posisi gambar (border, padding, margin, border-radius, float dan beberapa kode lain yang diperlukan termasuk height dan width).
• Jika ingin membuat posisi gambar di kiri, kanan, atau center maka bisa ditambahkan float:left;, float:right; atau display:block;margin:..px auto;
• Penggunaan margin disesuaikan dengan posisi gambar (float:left; dan float:right;)
• Width dan height disesuaikan dengan ukuran gambar.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• shannenpio cloning
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin

Cara Membuat Menampilkan Widget Label/Categories

Memahami desain blog hingga penggunaan kode html desain blog merupakan sebuah kewajiban yang harus dilakukan blogger. Pada perkembangan selanjutnya sebuah blog akan cukup banyak memerlukan penambahan widget baru, kode html yang berupa xHTML, kode CSS dan javascript serta CSS3 guna peningkatan performa blog. Terlebih pada saat ini, setiap blogger dituntut untuk mampu mengembangkan diri membangun atau memodifikasi blog hingga halaman blog terlihat rapi dan cantik dengan harapan semakin membuat pengunjung betah berlama-lama membuka halaman demi halaman dan mengikuti setiap posting yang tersaji. Anda harus yakin bahwa penampilan yang lebih menarik dapat segera diciptakan dengan catatan bahwa anda bersungguh-sungguh dan telaten untuk mencoba mempelajari titik demi titik di mana sebuah blog terbangun.

Widget adalah satu dari sekian banyak bagian penyusun dan "kosmetik" bagi blog. Beberapa widget telah disediakan oleh blogger dan anda tinggal menampilkannya di halaman blog. Beberapa widget yang lain disediakan secara gratis ataupun berbayar oleh banyak situs yang tersebar memenuhi jagad maya. Salah satu widget yang telah disediakan blogger adalah widget Label atau Categories. Widget ini berfungsi untuk menampilkan link dari sekelompok posting anda. Sekalipun widget kategori merupakan widget dalam bentuk jadi dan merupakan bawaan blogger/blogspot, nantinya anda bisa melakukan banyak modifikasi hingga widget label yang sederhana ini mampu tampil dengan lebih mempesona. Perubahan pada kode HTML menjadi kuncinya.

Untuk menampilkan sebuah widget label atau categories, ada 1 (satu) syarat khusus yang harus dipenuhi. Karena sifatnya untuk menampilkan "link" bagi sekelompok "link posting", maka anda harus membagi terlebih dahulu posting anda menjadi beberapa kelompok.

Contoh:
Misalnya posting anda berkaitan dengan binatang.
Anda akan mengelompokkan posting dalam bentuk seperti :

• Binatang Buas : Isi posting berupa segala macam binatang buas seperti : Harimau, Singa, Kucing Hutan, Beruang, Buaya dsb.
• Binatang Melata : Posting akan mengupas tentang segala jenis binatang melata seperti ular, ulat, cicak dsb.
• Hewan Memamah Biak : Ulasan posting akan berkisar semua binatang yang menggunakan cara memamah biak dalam proses pencernaan makan, seperti kerbau, sapi, kambing dsb.
• Binatang Peliharaan : Dalam posting secara khusus membicarakan/menuliskan segala macam binatang peliharaan seperti kucing, anjing, kelinci, kerbau, kuda, ular dsb.
• Hewan Menyususi : Posting akan terkelompokkan dalam beberapa judul posting yang bahasanya berputar soal binatang menyususi, seperti harimau, ikan paus, rusa, dsb.
• Hewan Amphibi : Membicarakan katak, buaya dsb.

Keterangan

• Pengelompokan berbagai jenis binatang seperti di atas akan memunculkan sebuah label/categories dari beberapa posting yang telah diterbitkan. Kategori Binatang Buas di dalamnya berisi posting tentang harimau, singa serta beberapa binatang buas lainnya. Demikian pula Binatang/Hewan Menyusui adalah 1 (satu) link label/categories yang di dalamnya terdiri dari beberapa link posting tentang hewan menyusui yang jumlahnya bisa mencapai ratusan posting.
• Pengelompokan dalam bentuk label dimaksudkan untuk mempermudah pengunjung saat ingin mencari/membaca posting sesuai spesifikasi yang dia inginkan yang tersaji di sebuah blog/web.
• Pengelompokkan seperti di atas berlaku untuk semua blog dan semua materi posting. Anda tinggal membuat jenis/nama kategori sesuai keinginan/posting yang menjadi fokus tulisan/artikel di blog anda.
• Untuk menciptakan link/kelompok kategori/label, yang nantinya secara otomatis tertampilkan di blog, anda harus mengelompokkan setiap posting dalam kategori yang berbeda dan hal ini dilakukan di halaman posting. Anda bisa melihat gambar di bawah ini:

Gambar di atas akan anda lihat saat anda membuat posting (bagian bawah). Setelah judul dibuat, tuliskan kategori posting anda seperti terlihat pada gambar. Jika anda cermati maka terlihat dalam gambar bahwa label/categori setiap posting tidak harus dibatasi dalam 1 (satu) label. Di sana terlihat CSS3, Modifikasi Blog, Modifikasi Blogger Baru yang digunakan sebagai label atau kategori posting. Hal sama akan terjadi pada contoh tentang posting binatang yang tersampaikan di atas. Ketika artikel/posting mengupas tentang harimau maka anda harus menuliskan label dalam bentuk Binatang Buas, Bintang Menyusui.

Setelah posting terkelompokkan dalam beberapa label, maka langkah terakhir adalah menampilkan widget label/categories. Caranya sebagai berikut:

• Login ke Blogger.
• Dasboard.
• KLIK Design/Rancangan.
• KLIK Add a Gadget (Tambah Gadget). Pada box dengan garis terputus-putus. Bisa di sebelah kanan atau kiri (sidebar).
• Tunggu hingga widget yang tersedia terlihat. Pilih dan klik Label.
• Pilih bentuk Label : Daftar atau Cloud.
• KLIK SAVE/Simpan.
• Buka blog dan lihat hasilnya.
• Jika anda ingin membuat/merubah kebentuk yang berbeda dari yang telah di buat, maka ulangi langkah di atas dan kembali pilih Daftar atau Cloud, baru kemudian klik SAVE/Simpan.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• shannenpio cloning
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin

Cara Membuat Elemen Baru di Bawah Footer & Outer-Wrapper

Mengapa sebuah elemen baru menjadi sangat penting untuk dibuat? Mengapa pula beberapa elemen ini juga harus dibuat di tempat-tempat tertentu yang sebelumnya tidak pernah tersediakan oleh pembuat desain blog? Sampai seberapa jauh fungsi dan kegunaannya?

Membuat sebuah atau beberapa buah elemen baru harus dilakukan oleh blogger di saat kebutuhan penempatan widget terus bertambah. Widget ini bisa berupa widget dalam bentuk jadi (yang disediakan beberapa situs tertentu termasuk blogger) ataupun widget baru yang kita buat sendiri menggunakan kode HTML yang di simpan melalui Add A Gadget. Mungkin ada suatu pertanyaan lagi? Mengapa tidak secara langsung saja kita masukkan atau simpan kode HTML baru tersebut di "halaman Edit HTML"?

Itulah arti pentingnya sebuah Elemen Baru!
Jika anda menyimpan kode HTML baru langsung di halaman Edit HTML, apabila Kode HTML tersebut berisi teks, maka teks akan selalu terlihat di Page Elements/Elemen Laman. Tentu saja ini akan menjadi gangguan serius bagi kindahan Page Elemen dan juga akan membuat tatanan Page Elements terlihat kacau. Dengan kondisi seperti ini, satu-satunya cara untuk membuat semua halaman dalam blog tetap terlihat rapi dan enak ketika digunakan adalah dengan membuat elemen baru tempat widget tersimpan.

Elemen di bawah footer ini lebih tepatnya berada di bawah outer wrapper (sering disebut juga outer-wrap dan banyak istilah lain) dan tepat di atas tag penutup </body>. Anda bisa melihat di blog ini, dimana beberapa widget yang tidak harus ditampilkan secara menonjol/fulgar bisa kita tempatkan di bagian tersebut (lihat di ujung bawah halaman blog!). Dengan adanya widget baru ini, maka widget footer bisa dimanfaatkan untuk beberapa hal yang "dikhususkan" seperti halnya yang terlihat di bawah. Widget footer ini kita gunakan untuk menempatkan "beberapa hal penting berkaitan dengan identitas blog".

Membuat elemen baru seperti yang telah anda lihat bisa dilakukan dengan sangat cepat dan mudah. Anda tinggal simpan kode CSS dan xHTML di bagian header (Kode CSS) dan di bagian body (xHTML). Jika anda ingin membuatnya, anda bisa mengikuti panduan berikut ini:

• Login ke Blogger
• Setelah Dasbor terbuka, klik Design (Rancangan).
• Kembali klik Edit HTML.
• Lakukan prosedur pengamanan template dengan Back-up Templates.
  • KLIK Download Full Template (Download Template Lengkap).
  • Simpan File Template (berikan nama khusus untuk memudahkan bila diperlukan).
• Edit HTML » klik Expand Widget Templates.
• Cari kode ]]></b:skin>.
• Copy-paste kode CSS dan letakkan di atas kode tersebut.
• Lanjutkan dengan mencari kode </body>.
• Copy paste kode xHTMl dan letakkan tepat di atasnya.
• Silahkan klik "SAVE Templates (Simpan Templates)".
• Buka Elemen Laman (Page Elements) dan periksa hasil pembuatan Elemen Baru!
• Jika Elemen Baru telah terlihat, cobalah untuk menggunakan elemen baru tersebut guna menempatkan widget. Anda bisa mencobanya dengan beberapa teks atau widget!

Kode CSS-1

#bawahfooter, #bawahfooter1 {
       margin:0;
       padding:0;
       text-align:center;
}
#bawahfooter1 {
       background:#111;
       border-top:4px solid #666;
       border-bottom:6px solid #666;
}
#bawahfooter1 widget{
       margin:2px 0;
       background:#333;    
       padding:5px;
}
#bawahfooter1 widget-content img {
       padding: 2px;
       background:#eee;
       border:2px solid #888;
       border-radius:4px;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;   
}

]]></b:skin>

Kode CSS-2

Jika kode CSS-1 telah dilengkapi dengan beberapa kode sebagai pelengkap elemen dan widget, kode CSS-2 merupakan kode CSS untuk penambah elemen baru dalam bentuk polos. Anda bisa menambahkan beberapa kode CSS baru dan xHTML untuk memberi background, border, padding dan margin serta beberapa kode pelengkap yang lain. Silahkan anda pilih salah satu di antara ke dua macam kode CSS ini. Untuk xHTML-nya tidak ada perubahan.

#bawahfooter {
       margin:0;
       padding:0;
       text-align:center;
}
#bawahfooter1 {
       margin:10px 0 10px 0;
       padding:0;
}

]]></b:skin>

xHTML

<div id='bawahfooter'>
<b:section class='bawahfooter1' id='bawahfooter1' showaddelement='yes'/>
</div>

</body>

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• shannenpio cloning
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin

Cara Membuat Drop Caps Otomatis di Posting Blog

Jika anda membuka sebuah blog dan "huruf pertama" pada posting atau di bagian yang lain selalu berupa huruf dengan ukuran yang berbeda (jauh lebih besar) dengan semua huruf di teks berikutnya, maka itulah yang kita sebut sebagai drop caps. Jadi intinya, dengan menggunakan fungsi drop caps ini maka di semua posting yang diterbitkan, huruf pertamanya akan kita buat dalam ukuran yang jauh lebih besar dari huruf selanjutnya. Cara membuatnya sangat praktis karena kita hanya perlu menambahkan kode CSS dan memanfaatkan tag DIV di pembuka posting. Jika anda ingin melihat seperti apa, sih, sebenarnya drop caps dan apakah drop caps ini akan membuat blog terlihat lebih bagus, silahkan klik link di bawah ini.
D E M O
Untuk membuat drop caps seperti yang telah anda ketahui atau lihat, sebenarnya ada dua cara yang dapat kita gunakan. yang pertama kita gunakan tag span dan yang ke dua kita gunakan tag DIV (sekalipun juga bisa kita gunakan tag p). Jika yang akan kita buat ini kita sebut sebagai Drop cpas otomatis, itu karena selain berfungsi menciptakan efek drop caps, tag DIV ini sekaligus kita manfaatkan sebagai pengatur posting dalam bentuk rata kiri atau rata kanan-kiri (text-align:left; atau text-align:justify;). Dengan kode baru yang kita gunakan, maka anda tidak perlu lagi menambahkan kode <div style="text-align:justify;"> untuk membuat posting rata kanan-kiri.

Kode CSS Drop Caps Otomatis

.post .opening:first-child:first-letter {
       font:50px/18px Georgia, Times New Roman, Times, serif;
       float:left;
       text-align:justify;    
       padding:2px 5px 0 0;
       margin-bottom:-5px;
       color:#0099FF;
       text-shadow:2px 1px 1px #FF9900;
}

]]&lgt;</b:skin>

Copy-paste dan simpan kode tersebut di atas kode ]]></b:skin> dengan cara:

• Login ke blogger.
• Setelah halaman dasbor terbuka, klik Design/Rancangan.
• Lanjutkan dengan KLIK Edit HTML.
• Back-up Templates dengan cara klik Download Full Templates/Download Template Lengkap.
• SAVE/Simpan file template di folder PC.
• Cari kode ]]></b:skin> (gunakan Ctrl+F untuk mempermudah dan mempercepat pencarian kode).
• Copy dan letakkan kode CSS Drop Caps Otomatis di atas ]]></b:skin>.
• KLIK SAVE Templates/Simpan Templates.
• Coba hasilnya dengan membuat posting menggunakan kode HTML (tag DIV) yang baru kemudian buka blog untuk mengetahu berfungsi tidaknya drop caps otomatis yang sudah terpasang.

xHTML untuk Posting

Saat anda membuat posting, gunakan xHTML berikut sebagai tag pembuka posting dan tag penutup posting

<div class="opening">Tuliskan artikel di sini!</div>

Contoh:

<div class="opening">Jika anda membuka sebuah blog dan "huruf pertama" pada posting atau di bagian yang lain selalu berupa huruf dengan ukuran yang berbeda (jauh lebih besar) dengan semua huruf di teks berikutnya, maka itulah yang kita sebut sebagai drop caps. Jadi intinya, dengan menggunakan fungsi drop caps ini maka di semua posting yang diterbitkan, huruf pertamanya akan kita buat dalam ukuran yang jauh lebih besar dari huruf selanjutnya. Cara membuatnya sangat praktis karena kita hanya perlu menambahkan kode CSS dan memanfaatkan tag DIV di pembuka posting. Jika anda .... dst</div>

Catatan & Keterangan

• Untuk merubah ukuran font drop caps, silahkan rubah nilai pada
  font:50px/18px Georgia, Times New Roman, Times, serif;
• Jika pengaturan posisi drop caps diperlukan, lakukan perubahan nilai pada :
  padding:2px 5px 0 0;
  nilai 2px untuk pengaturan naik turunnya font, 5px untuk mengatur jarak dengan huruf selanjutnya.
• text-align:justify; untuk bentuk posting rata kanan-kiri. Untuk merubah ke bentuk rata kiri ganti justify dengan left.
• Sesuaikan warna font drop caps dengan merubah warna yang terdapat di code color:#0099FF;. Anda bisa mengganti kode yang berwarna merah dengan kode warna dalam bentuk angka dan huruf atau dalam bentuk teks seperti red, blue, orange dan yang lainnya.
• Jika ingin menghilangkan text-shadow, buang kode text-shadow:2px 1px 1px #FF9900;

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• shannenpio cloning
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin