Tutorial dan Free Download

Baru Di Blogger : Template Designer

Kabar gembira buat para blogger yang suka mengotak-atik template, kini blogger meluncurkan sebuah fitur baru di draft blogger yang kayaknya sudah ditunggu lama oleh para pengguna blogger yaitu "Template Designer". Apa itu "Template Designer"?. Ya "Template Designer" adalah sebuah fitur baru blogger yang memudahkan kita untuk mengotak-atik template kita tanpa melalui "Edit HTML", misalnya mengganti background, warna font/link, tata letak dan masih banyak lainya.

Bagaimana menurut Anda tentang fitur baru blogger in draft ini??

Mungkin jika Saya menjelaskan dengan detail percuma.. mendingan Anda langsung praktek aja biar lebih jelas . Hehe

Begini caranya jika mau coba untuk Anda yang belum tau caranya.

Buka Alamat http://draft.blogger.com dan Log In kemudian masuk ke menu "Layout/Tata Letak"

Nah setelah itu masuk pada bagian "Template Design"

Nah setekah Anda masuk pada "Template Design" Silahkan coba aja, dijamin menyenangkan.

Kelemahanya adalah tidak bisa bekerja pada template yang sudah di otak-atik, akan muncul pesan seperti "Not applicable for this template" atau "

This template does not allow for layout customizations" untuk bagian-bagian tertentu buat template yang sudah di otak-atik sendiri.

Nah gimana? Semakin Asyik kan nge-Blog? semakin canggih aja fitur Blogger.com.

Sekedar informasi buat Anda semoga bermanfaat.

Menambah Status Yahoo Messenger Di Gagdet Profil

Gadget profil adalah gadget dimana Anda bisa manampilkan foto, deskripsi tentang Anda dan link profil blogger Anda kedalam blog Anda. Untuk menambahkan widget ini cukup mudah yaitu dari menu "Layout/tata letak" kemudian klik "Add a gagdet" lalu pilih "Profile". Dan untuk mengedit profil dan foto Anda bisa melalui Dashboard blogger Anda dengan mengklik "Edit Profile" yang ada di sebelah kanan dashboard Anda.

Nah kali ini Saya akan membahas tentang bagaimana caranya menambah Status Yahoo Messenger kedalam gadget Anda, yang berhubungan dengan postingan Saya yang dulu tentang menambah Status Yahoo Messenger ke dalam blog.

Coba lihat contoh dari modifikasi sederhana ini :

Terlihat diatas ada tambahan status Yahoo messenger ke dalam gadget profil Saya.

Nah dibawah ini adalah caranya :

1. Langkah pertama yang Anda harus lakukan Adalah Log In ke Blogger lalu menuju bagian "Layout" kemudian masuk "Edit HTML"

2. Setelah itu centang "Expand Widget Templates"

3. Kemudian cari code dibawah ini :

4. Setelah ketemu code diatas lalu tambahkan code dibawah ini diatasnya

Code yang berwarna merah diatas ganti dengan ID YM kamu, dan angka yang berwarna hijau adalah bentuk dari lambang status YM, keterangan lebih jelasnya bisa dibaca disini.

5. Kalau sudah kemudia SAVE

Nah diatas adalah cara menambah Status Yahoo Messenger kedalam gadget profil, Anda juga bisa Status YM dengan status Camfrog, G-Talk dan lainya.

Cukup disini dulu postingan Saya. . . Semoga bermanfaat dan silahkan menuliskan komentar dibawah ini untuk tanggapan dan pertanyaan.

Widget Sederhana Twitter

Tentunya Anda sudah tau apa itu twitter dan Anda jugalah pengguna twitter untuk saat ini. Ya, Twitter adalah salah satu Social Networking yang terkenal selain Facebook yang banyak digunakan orang di seluruh penjuru dunia.

Namun kali ini Saya akan membahas tentang bagaimana caranya membuat widget Twitter yang sederhana ke dalam blog kita, dalam artian widget ini lebih simple dari pada widget yang diberikan oleh pihak twitter.

Isi dari widget ini adalah hanya tweets dan link twitter Anda, pas buat Anda yang suka hal ringkas namun bertujuan jelas. Coba lihat contoh widgetnya dibawah ini

Gambar diatas screen capture dari widget twitter sederhana di blog Saya ini. Yuk mari Saya pandu cara buat widget ini

Pertama yang Anda lakukan adalah Log In ke blogger Anda, setelah masuk Dashboard Lalu klik Link Layout / Tata Letak

Setelah masuk pada menu Layout lalu pilih tempat yang mau Anda pasangi Widget ini kemudian klik "Add a Gadget" kemudian pilih "HTML/JavaScript"

Kemudian Paste code dibawah ini

<div id="twitter_div" style="background: url(http://i725.photobucket.com/albums/ww258/anasceria/new-tuts/single-bird-icon-1.png) top left no-repeat; color:#000000; font-size:14px; padding-left: 50px;"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/anasceria">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/anasceria.json?callback=twitterCallback2&count=3" type="text/javascript"></script>

Perhatikan !! :

Ganti code yang berwarna merah diatas dengan ID Twitter Anda
Ganti Angka 3 yang berwarna biru diatas dengan jumlah angka tweet Anda yang ingin Anda Tampilkan
Code yang berwarna hijau adalah style dari widget tersebut, diantaranya ada URL gambar dari widget tersebut, sesuaikan dengan selera Anda, klik disini untuk panduan CSSnya
Text "follow me on twitter" adalah text link perintah untuk Follow Twitter Anda yang bisa Anda ganti sesuai Selera Anda

Nak demikianlah tutorial Saya hari ini untuk membuat widget sederhana twitter. Semoga bermanfaat bagi Anda dan jangan lupa Follow Twitter Saya disini untuk mengetahui update dari Saya, Terima Kasih.

Static Page - Halaman Di Blogger

Static Page - Fitur baru dari blogger yang memungkinkan para blogger bisa menambahkan halaman diluar posting, sebagai contoh adalah halaman daftar isi saya tersebut yang Saya taruh di halaman static page.

Static Page ini diresmikan oleh blogger setelah uji coba dulu di draft blogger, jadi kita bisa menggunakan Static Page ini sebagai halaman About Me, Contact me dan lain-lain seperti halnya wordpress yang sudah lebih duluan menggunakan fitur ini. Jadi intinya static page ini adalah halaman tersendiri seperti halaman posting namun dipisahkan dari halaman posting.

Coba di pahami. .

1. Langkah Anda jika ingin menggunakan Static Page adalah dari Dashboard Anda masuk ke menu "Edit Posts"

2. Setelah Anda masuk pada halaman "Edit Posts" Kemudian pilih halaman "Edit Pages"

3. Setelah Anda masuk kedalam halaman "Edit Pages" lalu klik tombol "New Page" untuk menambah halaman baru dan masukkan isi dari halaman tersebut dengan text editor seperti halnya dalam postingan.

Dan perintah "Add Page List Gadget" adalah gadget untuk menu navigasi Static Page Anda.

Diatas adalah gambaran pengaturan setelah mengklik perintah "Add Page List Gadget", Anda bisa mengatur sesuai keinginan Anda..

Sekedar informasi Aja buat Anda tentang Static Page, dan kita untuk saat ini hanya bisa menambahkan 10 pages aja, entah kapan ada pembaharuan dari pihak blogger tentang fitur ini, tunggu aja deh.

Dapet Juara II

Syukur Alhamdulillah Saya haturkan kepada Allah SWT yang telah memberikan rahmatnya kepada Saya sehingga Saya bisa mendapatkan juara 2 dalam lomba blog tingkat SLTA se-Kab Jepara yang diadakan pada tanggal 22 sampai 30 Desember 2009 Lalu.

Ucapan terima kasih Saya yang pertama kepada Orang tua Saya yang telah memberikan doanya kepada Saya, teman-teman yang mensupport Saya, Guru-guru yang telah memberikan dana komunikasi dan transportasi juga dukunganya kami ucapkan terima kasih.

Teman-teman yang udah memberikan Voting kami ucapkan terima kasih sebesar-besarnya, karena tanpa dukungan kalian Saya tidak akan mendapatkan juara 2 ini, terutama teman-teman dari Blogger, Facebook, YM, Camfrog dan social network lainya Saya ucapkan terima kasih sebesar-besarnya.

Okkelah kalo begitu :D buat yang lainya tetap berkreatifitas ya...

Salam Terima Kasih

Luqman Khoirul Anas

Minta Voting Untuk Mendukung Saya

Dalam rangka lomba Blog Se-SMA Kab. Jepara, Saya mewakili SMA Saya yaitu SMAN 1 Mayong dalam lomba blog tersebut. Blog yang Saya buat adalah http://smanmayong.blogspot.com.

Penentuan pemenang lomba blog ini salah satunya melalui Voting di blog komep. Nah maka dari itu Saya sebagai Author blog SMAN Mayong meminta dukungan dari Anda melalui voting.

Caranya

Kunjungi http://komep.blogspot.com dan di sidebar kanan ada Voting Area, Lalu pilih SMAN 1 MAYONG dan klik tombol Vote.

Saya ucapkan terima kasih sebesar-besarnya untuk yang udah Voting. Semoga perjuangan Saya akhir-akhir ini tidak sia-sia..

Ayo Voting sebelum tanggal 30 Desember 2009

Salam Blogger

Dasar CSS

Taukah Anda apa itu CSS (Cascading Style Sheet) ?, CSS adalah bahasa scripting untuk memformat tampilan website secara keseluruhan. Misalnya Anda ingin mengatur jenis dan ukuran huruf, background, posisi element dan sebagainya. Sebagai contoh kita akan memformat tag p (parapraph) keseluruhan pada satu element dengan menggunakan cara HTML seperti ini <p font="tahoma">text</p>. Akan lebih efisien lagi jika kita memformat tag p dengan menggunakan CSS agar tidak terlalu rumit. Dan Anda juga bisa menyusun element layout dengan CSS tanpa harus menggunakan table yang menurut saya terlalu rumit dalam codingnya.
CSS juga bisa di akses oleh bahasa pemrograman, misalkan javascript, PHP dll.

Pengguna'an CSS ada 3 cara yaitu

Langsung disisipkan didalam tag <head></head>. Untuk menyisipkan di dalam tag head harus diawali dengan tag <style type="text/css"></style>
Menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag <head> dengan cara seperti ini <head><link rel="stylesheet" href="css/style.css" type="text/css" /></head>
Langsung pada tag yang bersangkutan, misalkan <div style="style_nya"></div>

Ada aturan dalam penulisan CSS ini, CSS ditulis dalam bentuk block-block script yang disebut style. Dan Saya akan mencoba menerangkan lebih detail lagi dalam cara menuliskan CSS.

Menggunakan tanda # sebagai awalan style, contohnya

#gaya{
background-color:blue;
}

tanda ini berarti untuk menggunakan style ini harus menggunkana atribut id, dan setiap tag pasti memiliki atribut id, misal <div id="gaya">ini teks</div>. Sifat dari id adalah unik, tidak boleh ada elemen yang memiliki id yang sama, makanya style ini hanya bisa digunakan sekali.
Menggunakan tanda dot (.) sebagai awalan style, contohnya

.gaya{
background-color:blue;
}

tanda ini berarti untuk menggunakan style ini harus menggunakan atribut class, setiap tag pasti memiliki atribut class. Misalkan <div class="gaya">ini teks</div>. Sifat dari class adalah tidak unik, artinya dalam 1 dokumen HTML boleh memiliki lebih dari 1 class yang sama. Dengan menggunakan tag
Tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan

div{
background-color:blue;
}

artinya semua tag div akan dikenai style tersebut
Turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk.
Contohnya

#induk .anak{
background-color:red;
}
cara menggunakannya
<div id="induk">
<div class="anak">bla_bla</div>
</div>

artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja.

Penggunaan tanda # atau dot(.) tergatung pada kasus yang dihadapi, dan sangat bervariasi. Awalnya binggung cara menggunakanya, kayaknya sama saja sih, tetapi jika anda sering menggunakannya, ada saat yang tepat apakah anda akan menggunakan tanda # atau dot(.) atau malah turunan.

Sedikit tentang dasar CSS dan semoga dapat membantu Anda yang pastinya CSS tidak bisa ditinggalkan dalam pengolahan halaman web dan browser juga sudah ada yang membuat script CSS yang hanya support dengan browser tersebut misalnya Mozilla Firefox, dll.

dirangkum dari berbagai sumber dan disederhanakan. salah satunya adalah http://bimoweb.com/dasar-css-scripting.html