Photobucket Photobucket Photobucket Photobucket
Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan

Kamis, 01 September 2011

Download Template Blog Gratis


Berikut merupakan Daftar situs Template Blog yang ane dapatin dan ane Kumpulin dari Hasil Pencarian di Google.

Free Blogger Templates (Blogspot)
1.www.btemplates.com
2.www.bloggerbuster.com
3.wwww.blogtemplate4u.com
4.www.freeblogger-templates.blogspot.com
5.www.blogger-templates.blogspot.com
6.www.finalsense.com
7.www.ourblogtemplates.com
8.www.bloggerstyles.com
9.www.eblogtemplates.com
10.www.blogspottemplate.com
11.www.eblogtemplates.com
12.www.jackbook.com
13.www.simplebits.com
14.www.magznetwork.com
15.www.freetemplate.widarto.net

Free WordPress Templates
1. www.prowordpressthemes.com
2. www.wordpresstemplates.com
3. wordpresstemplates.name
4. www.skinpress.com
5. www.wordpress.org
6. www.topwpthemes.com
7. www.blogohblog.com
8. www.templatesbrowser.com
9. www.wpskins.org
10. www.freewordpresstheme.info

Premium WordPress Templates
1. www.wordpressthemesmarket.com
2. www.wpcandy.com
3. www.web20-templates.com
5. www.wpremix.com
6. www.ithemes.com
7. www.wp-magazine.com
8. www.studiopress.com
9. www.wp-vybe.com
10. www.premiumwp.com

Senin, 15 Agustus 2011

Ganti Font Judul Posting dengan Font Google API

Cara berikut mungkin sudah nggak asing lg, tapi gak ada salahnya kalo saya posting ulang..
Langsung aja, ikuti step-step berikut ini. cekibot :
1. Buka
Google API
2. Klik font atau jenis huruf yang anda pilih. contohnya:Mountains of Christmas
3. Klik USE.. lihat contoh gambar dibawah



4. Copy kodenya, lihat gambar dibawah



5. Nah sekarang Masuk ke dashboard blog dulu.
6. Klik Layout/rancangan » edit HTML » centang ‘Expand Templaet Widget’
7. Cari kode </head>
8. Pastekan kode Google API tadi (no.4) dibawahnya
9. Tambahkan tanda strip miring dibelakang (sebelum tanda >) hingga kodenya seperti dibawah ini:
<link href='http://fonts.googleapis.com/css?family=Mountains+of+Christmas' rel='stylesheet' type='text/css'/>
10. Balik lagi ke tab google API tadi, sekarang copy Integrate the fonts into your CSS (lihat gambar)



11.Pastekan kode tersebut di HTML blog anda,
untuk kode judul postingan biasan kodenya h3.post-title, namun tiap template berbeda², fokus pada kode h3. sebagai contoh blog ini kodenya .single h3, setelah saya pastekan menjadi seperti dibawah ini
.single h3 {
font-family: 'Mountains of Christmas', cursive;
margin-top:10px;
margin-left:12px;
font-size: 1.7em;
}
12. terakhir, klik simpan template.

cara diatas juga bisa dipake buat ngrubah font judul widget/footer.. yg penting cari aja kode HTML untuk judul widget/footer.. akhir kata... salam olahraga,,,ckckckck

Pasang REPLY di Komentar Blog


Cara Memasang Reply pada Komentar Blog :
1. login blog
2. rancangan --> edit HTML (centang "Expand Widget Templates")
3. cari kode <data:commentPostedByMsg/> atau kode <data:comment.timestamp/>
4. lalu letakkan kode dibawah ini diatas kode diatas
<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BloggerId&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=yes, width=400, height=450&quot;); return false;'>[Reply Comment]</a></span>
5. ganti tulisan BloggerId dengan id blog anda, bila anda belum tau, coba buka menu rancangan lalu perhatikan digit angka pada address bar anda, dan jangan lupa ganti dengan id blog anda. lihat contoh gambar dibawah


Lalu bila anda ingin tampilannya lebih menarik, anda bisa ganti tulisan [Reply Comment] dengan icon gambar, caranya cukup ganti tulisan [Reply Comment] diatas dengan kode gambar dibawah ini .

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGHpxeeU55WANS10p2VeT_Wosw6xoL_5s8Hmmden1G3h7e6bTlqcT9Y9gwOuqln012jDPIHUsfQiv19RlJv7tYPrD6ebhQWgZaHDdXdZMmemHIExxc9R7McRsGR5njMOvMJbyK1Ageeaws/'/>


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-dbZkXyCHqvzsIPwuhWOf5CYUOKyU9Q0Oqqe2Lx2ZRNZAxZEODCG7R8TMfI77vVZnIvHdTodN_YC099o8Vpx0JQmF9aCfFNoszdXjf3bXhrtUKQNaT00SE05c4-v0goiU1adfi-tFlmFC/'/>


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie6HMXqMCf0KvwHRkmG33QlbQPXMyIPM2_JHtQY-XE4JEFkSZrOf1V-e_25pz2-TkGScLP5nBiPtWMeujqMR3413JXrf-N0wrSev6wz8wB0KIaAqDhW_HRzOB9YKOJ7vR4GfNdTURffqjo/'/>


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqJ_YSC-nZBUMKjtdshZRQ4hB_C6jErLbXK41r9KqThRx5vKPQTb477RX2stFuJeWnEGvbOMRweceLtZqcGDoLcqPdFDLPPtkdaOFt9zzMKdT9sJ2hL5lM7zsZ4vZIkhhOQed3cnY2FKH/'/>


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ71odO_XilFa7nng49LXA1eoz1pDgjN-XTE9-StgPxyvZGhkLtxe4QqfilDi-eQw3pM4Q78gHN1-bxv9JrEWtiYO7Zs5yNDWv76dsRl9mSnIEQGtHNsyxY4mKJXPLdrMgKel-kiQfNId7/'/>

Minggu, 14 Agustus 2011

Pasang Meta Tags di Blogger



Meta Tag Description

Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar description ini bisa menjadi
kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan. Contoh penulisan meta tag description adalah sebagai berikut :
<meta name="description" content="Promosi-web.com is a search engine tutorial that explain how to get
top rangking in all major search engine and get high traffic for your web site. Available in Bahasa
Indonesia.">
Beberapa search engine seperti Nothern Light dan Google tidak memakai meta tags sebagai deskripsi hasil pencariannya. Yang mereka gunakan adalah kalimat-kalimat awal yang ada pada halaman tersebut.
Itulah sebabnya kenapa saya sarankan agar Anda menggunakan isi dari meta tag description sebagai kalimat pembuka. Dan jika bagian paling awal dari web Anda berupa sebuah menu, maka deskripsi yang
ditampilkan pada hasil pencarian Northern Light adalah seperti ini :
Home | Products and Service | Contact Us | About Us ...welcome to our online store, the best place on the
web to...

Meta Tag Keyword

Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine. Sintak dasar dari meta tag keyword adalah
sebagai berikut :
<meta name="keywords" content="keyword1 keyword2 keyword3 ...">
atau ada juga yang menulis dengan pemisah tanda koma :
<meta name="keywords" content="keyword1, keyword2, keyword3, ...>
Keduanya berfungsi sama dan tidak ada pengaruhnya pada search engine. Tujuan pemakaian tanda koma agar keyword-keyword tersebut lebih mudah dibaca. Yang perlu diperhatikan disini adalah jangan
mengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming. Contoh pemakaian meta tag keyword yang salah adalah :

<meta name="keywords" content="bali, bali hotels, travel in bali, bali island, bali weather>
Disini terlihat sekali bahwa kata "bali", diulang lebih dari 3 kali. Contoh berikut ini tidak akan dianggap spamming oleh search engine :
<meta name="keywords" content="bali hotels travel bali island bali weather">
Yang tak kalah pentingnya mengenai keyword adalah jangan membuat keyword yang tidak ada hubungannya dengan isi halaman web Anda. Hal ini juga akan dianggap spamming. Misalkan web Anda
memuat informasi mengenai pariwisata di Bali, jangan sekali-kali menambahkan "MP3" atau "Britney Spears" sebagai keyword hanya karena keyword-keyword ini merupakan keyword favorit di internet dan
banyak dicari orang.

Meta Tag Robots

Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa diindex oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu
website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine. Format dasar dari meta tag robots adalah sebagai berikut :
<meta name="robots" content="index | noindex | follow | nofollow">
Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :
<meta name="robots" content="index follow">
Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).
Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.
<meta name="robots" content="noindex nofollow">

Lalu bagaimana memasang Meta Tags di Blogger :

Untuk memasang Meta tag diBlogger caranya cukup mudah, pertama masuk ke Edit HTML kemudian copy paste  kode dibawah ini, biasanya kode meta tags diletakan dibawah kode <title><data:blog.pageTitle/></title>  dan jangan lupa merubah kode warna merah di bawah sesuai dengan deskripsi blog kamu.

<meta content=' Tulis deskirpsi disini'  name='description'/>
<meta content='
keyword1 keyword2 keyword3 ...' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>


sumber: o-om

Senin, 08 Agustus 2011

Buat Link Terbuka di tab baru / pop up

langsung aja deh,,,

•CARA BUAT LINK TERBUKA DI TAB/JENDELA BARU

kalo kita masukin link bawaan blog tanpa di edit sedikit, maka akan terbuka di tab/jendela yg sama... sbagai contoh link berikut
perlu ditambah sedikit kode, yaitu target="_blank"

jadi formatnya seperti dibawah ini
<a href="http://ku2nt.blogspot.com/" target="_blank">klik disini</a>
kita juga bisa menambah keterangan dengan menyisipkan title="keterangan"
jadi seperti dibawah ini
<a href="http://ku2nt.blogspot.com/" target="_blank" title="ku2nt, blog campur aduk">klik disini</a>
alhasil jadi seperti dibawah ini

•MEMBUAT SELURUH LINK DI BLOG TERBUKA DI JENDELA BARU

kalo ini tidak saya rekomendasikan,, soalnya apa,,, semua yg di klik terbuka di tab baru, jg gak bisa bikin buku tamu melayang ky di blog ini,,, pernah saya coba, begitu saya klik buku tamu, bukanya shoutmix yg muncul, tp malah kebuka di jendela baru,,, kurang sipp kalo menurut saya. tapi kalo sodara² ada yg pengen nyoba silahkan, caranya gampang, cari kode <head>, truz kopi kode dibawah ini, taruh tepat dibawah kode <head>
<base target='_blank'/>

•MEMBUAT LINK POP UP TANPA JAVASCRIPT

kalo yg ini jarang ada yg pakai, tp gak ada salahnya berbagi ilmu.. yg ini cocok buat bikin iklan, atau aplikasi update status FB..
sebagai contoh klik link dibawah
untuk membuat link ky diatas, silahkan masukkan kode HTML berikut ini
<a style="cursor: pointer; color: rgb(255, 0, 0);"
onclick=" window.open('http://ku2nt.blogspot.com/','',' scrollbars=yes,menubar=no,width=800, resizable=yes,toolbar=no,location=no,status=no')">
klik disini
</a>
atau bisa juga dengan kode berikut ini
<a style="CURSOR: pointer; COLOR: #ff0000"
onclick="window.open(&#39;http://ku2nt.blogspot.com/&#39;,&#39;&#39;,&#39; scrollbars=yes,menubar=no,width=800, resizable=yes,toolbar=no,location=no,status=no&#39;)">
klik disini</a>
semoga berguna tips² diatas

Kamis, 04 Agustus 2011

Cara Daftar Search Engine

Tak di sangkal bahwa tujuan utama dari membuat blog antara lain adalah agar tulisan-tulisan kita bisa di baca oleh orang lain atau pengunjung blog, semakin banyak yang berkunjung apalagi memberikan komentar pada apa yang kita posting tentunya akan membuat hati kita merasa senang dan bahagia. Akan tetapi tentunya tidak serta merta blog kita akan ramai di kunjungi, ini memerlukan usaha publikasi yang gencar dari pemilik blog apabila ingin banyak pengunjungnya.

Banyak cara yang bisa kita lakukan agar blog kita bisa dikenal dan di kunjungi, antara lain adalah dengan rajinnya kita blogwalking atau berkunjung ke blog milik orang lain, mendaftarkan ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.

Bagi blogger pemula mungkin berangggapan bahwa apabila kita membuat website atau blog akan secara otomatis terindeks atau berada pada list berbagai search engine, dan kenyataannya tidaklah demikian. Seperti halnya sebuah sekolah, agar nama kita terdaftar pada buku daftar siswa, tentunya kita harus melakukan pendaftaran terlebih dahulu ke sekolah tersebut. Sama halnya dengan mesin pencari, agar blog kita terindeks pada mesin pencari, maka kita harus terlebih dahulu mendaftarkan blog milik kita pada situs pemilik mesin pencari.

Mesin pencari tentu jumlahnya sangat banyak sekali, dan pada saat ini yang paling terkenal di dunia adalah Google, Yahoo, serta Msn. Apabila blog kita ingin terindeks pada mesin pencari mereka, maka kewajiban kita adalah mendaftarkan URL blog kita pada mesin pencari mereka. Bila ada yang belum tahu ke manakah harus mendaftarkan blognya, maka silahkan simak tulisan berikut :



  • Daftar Google

Untuk mendaftar ke google, silahkan sobat kunjungi http://www.google.com/addurl/, nah apabila sudah berada pada halaman pendaftaran ada beberapa langkah yang harus di lakukan, yaitu mengisi form yang di sediakan :


  • URL --> Isi dengan URL blog sobat.
  • Comments --> Isi dengan keyword atau kata kunci yang berhubungan dengan blog sobat
  • Isi kotak kosong dengan huruf Verifikasi yang tersedia
  • Klik tombol Add URL
  • Selesai.


Setelah sobat melakukan pendaftaran ke Google, maka tidak serta merta blog sobat terindeks pada mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog sobat bisa terindeks. Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog sobat pada mesin pencari google, apakah sudah terindeks atau belum? jika belum, coba tunggu beberapa minggu lagi, dan tuliskan kembali alamat blog sobat, Jika ternyata masih belum juga, coba deh daftarin lagi blog nya ke google seperti langkah di atas. Atau mungkin sobat tidak sabar ingin cepat terindeks, sebenarnya bisa saja ini terjadi, hanya dalam 3 atau 4 hari saja blog sobat sudah bisa terindeks di google. Ingin tahu caranya? simak saja postingan berikutnya ya, mungkin satu dua hari ke depan artikelnya selesai saya buat.



  • Daftar Yahoo!

Untuk mendaftar ke yahoo! silahkan sobat kunjungi https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo, sobat harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo) silahkan bikin dulu, bagi yang sudah punya, sobat tinggal login dengan username serta password sobat. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi kolom tersebut dengan URL sobat, kemudian klik tombol Add URL, selesai. Jika ingin memasukan alamat feed sekalian, sobat bisa memasukannya. Ingat, alamat feed di blogger hanya tinggal menambahkan atom.xml di belakang uRL blog sobat, contoh : untuk blog saya ini mempunyai alamat feed sebagai berikut :

http://ku2nt.blogspot.com/atom.xml

atau memakai www pun sama saja :

http://www.ku2nt.blogspot.com/atom.xml



  • Daftar ke Msn

Untuk daftar ke Msn, silahkan sobat kunjungi http://search.msn.com/docs/submit.aspx?FORM=WSDD2 silahkan sobat isi huruf verifikasi dan URL sobat pada kotak yang tersedia, kemudian klik tombol Submit URL, selesai.

Apabila sobat mempunyai keinginan lebih, yaitu URL blog sobat terindeks pada puluhan mesin pencari, sobat bisa menggunakan bantuan situs submitter. Coba klik saja banner dibawah ini :


Tugas sobat hanya mengisi alamat URL blog miliknya, serta menuliskan alamat email saja, kemudian klik tombol Submit Your Site.

Jika ingin lebih cepat terkenal coba lakukan ping ke bebagai agregator, silahkan klik link di bawah :


Sobat tinggal mengisi form yang di sediakan.

*copas dari blog kang rohman

Rabu, 03 Agustus 2011

buat widget follow show-hide


Follow......follow mungkin kata-kata ini sudah tidak asing lagi bagi para maniak blogger. Nah tips kali ini adalah cara membuat kotak followers anda melayang dengan mode show/hide. Jika anda mau membuat kotak follow yang lebih keren, ikuti saja langkah berikut :
1. Login ke blogger sobat
2. Klik Rancangan, kemudian sobat klik Tambah Gadget
3. Jika sudah sobat pilih HTML/Javascript
4. Kemudian copy kode berikut kemudian paste pada HTML/Javascript tadi
<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://i51.tinypic.com/rcq4b7.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">


Kode Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
Eitts tapi jangan di save dulu yah kita lanjutkan ke langkah berikut nya

5. Ambil kode widget follow nya di
http://www.google.com/friendconnect/
  • Pilih Blog yang akan di pasang widget follow
  • Klik Tambah Gadget Anggota
  • Nah atur warna, ukuran, dll sesuai selera ente
  • Jika sudah di atur sobat klik Buat Kode
  • Silahkan copy kode nya dan kita lanjut ke langkah selanjut nya
6. Paste kode widget follow yang tadi anda copy dan gantikan pada tulisan Kode Widget Follow Disini

7. Simpan
ups masih ada 1 langkah lagi nih (banyak kali langkah²nya,, pegel woe)

8. Untuk memunculkan kotak follow nya kita harus membuat tombol untuk membuka nya. masuk pada Rancangan >> Edit HTML

9. Cari kode </body> menggunakan CTRL + F dan paste kode berikut tepat diatas kode </body>
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMkpxRDprTMcLd5cLNiJCot7nLkepkz1jqxRrJS1szfa7pnbx-5gDpsd4lDqY8gvC1FquateGmD629cD7sfgnwxojCfHyg_loDhPAqrO40tTT_GiILKaIcUi50vw38B4e_0QGzu4h6F_TZ/'/></a>
10. Simpan template dan lihat hasilnya

Akhirnya selesai juga

Selasa, 02 Agustus 2011

modifikasi bloqQuote blog



Artikel yang ane cari-cari dari dulu, yaitu blockquote yang tampilannya cantik dan menarik dilihat, ane kira itu bukan blockquote melainkan text area yang diberi background, tp ternyata ane salah... hehee
Nah, karna itulah kali ini saya akan bahas cara membuat blockquote.
Seperti yang sudah kita tahu Pada blogger sendiri sudah ada fitur Blockquote , tetapi setiap tampilannya berbeda tergantung kode CSS yang ada pada tempalte blog Sobat.
Bagi Sodara² yang ingin membuat tampilan layaknya punya ane, silahkan ikuti langkah-langkah berikut :
  • Login ke akun Blogger
  • Masuk Tata Letak
  • Edit HTML
  • Beri centang pada "Expand template widget"
  • BackUp template sobat dulu, dengan cara klik "download template lengkap"
  • Cari kode Berikut : .post blockquote {
  • Berilah imbuhan, sehingga kodenya jadi seperti berikut :
.post blockquote {
background:#D7E8F0 url(http://i1123.photobucket.com/albums/l554/kukunt/quote-4.png) no-repeat scroll 0 0;
border-color: #4e3425;
border-style: dotted;
border-width: 1px 1px 1px 1px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 10px 10px 10px;
width:95%; }

.post blockquote:hover {
background:#FFFFFF url(http://i1123.photobucket.com/albums/l554/kukunt/quote-7.png) no-repeat scroll 0 0
}
Simpan Template.

Kamis, 28 Juli 2011

Cara Buat Daftar Isi Sesuai Label

Photobucket

Daftar isi merupakan bagian penting yang memegang peranan sebagai sitemap yang akan memberikan informasi tentang apa saja isi yang termuat atau ada di dalam blog kita, sehingga pembaca akan lebih mudah dalam mencari artikel atau tulisan yang sedang mereka cari didalam nya.

Jika kita membuat daftar isi berdasarkan label secara otomatis yang tidak kita tentukan sendiri labelnya dikhawatirkan terjadi duplicate content, karena ketika kita membuat posting terkadang kita memberikan lebih dari satu label dan tentunya jika label yang kita buat untuk satu posting lebih dari satu label, maka daftar isi dari beberapa label tersebut akan muncul secara bersamaan termasuk beberapa content yang terdapat dalam daftar isi blog ini. Isi yang terdapat pada label SEO, terdapat juga pada label Blogger Guide. Hal ini karena tadinya menurut Saya content yang berkaitan dengan SEO adalah bagian dari blogger guide juga dalam blog ini dan itupun memang benar sehingga Blogger Guide Saya jadikan sebagai basic label dan seo guide adalah main label-nya.

Awalnya daftar isi dalam blog ini Saya buat secara manual, tetapi hal itu agak repot. Saya ingin membuat daftar isi yang otomatis berdasarkan label. Dipikir-pikir, jika Saya buat daftar isi sesuai label otomatis maka daftar isi yang muncul akan muncul bersamaan pada tiap label yang mengandung content dari daftar isi tersebut.

Dengan munculnya judul yang sama pada label yang berbeda ini, Saya khawatir google akan menganggap hal ini sebagai duplicate content yang akan berpengaruh terhadap SEO atas content di blog Saya.

Oleh karena itu, Saya memutuskan untuk membuat daftar isi di blog ini berdasarkan label secara otomatis yang Saya tentukan sendiri sehingga judul entri yang ada dalam daftar isi hanya muncul sesuai label pilihan yang Saya inginkan saja agar pada posting selanjutnya tidak Saya masukan judul posting yang sama ke label yang berbeda yang terdapat dalam daftar isi blog ini dan menempatkan jidul posting pada main labelnya saja, tujuannya ya agar terhindar dari duplicate content kali ya!.
Nah bagi sobat yang ingin membuat daftar isi otomatis sesuai label yang ditentukan oleh Anda sendiri dapat mengikuti panduan dan tutorial berikut ini:


     Buat daftar isi Anda, terserah mau sebagai HTML/Javascript pada widget atau dihalaman posting, kemudian letakan kode javascript berikut ini:
<script style="text/javascript"> var numposts = 50; var standardstyling = true; </script>

<script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>

<ul> <script src="http://www.kukunt.co.cc/feeds/posts/default/-/Nama Label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>

Untuk menampilkan beberapa content sesuai label yang berbeda dalam daftar isi Anda, silakan ikuti contoh berikut dan tempatkan dihalaman ataw widget daftar isi blog Anda:
<b>nama label1</b><script style="text/javascript"> var numposts = 50; var standardstyling = true; </script> <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script> <ol> <script src="http://www.kukunt.co.cc/feeds/posts/default/-/nama label1?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ol>
<b>nama label 2</b><script style="text/javascript"> var numposts = 50; var standardstyling = true; </script> <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script> <ol> <script src=" http://www.kukunt.co.cc//feeds/posts/default/-/nama label 2?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol>
<b>nama label 3</b><script style="text/javascript"> var numposts = 25; var standardstyling = true; </script> <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script> <ol> <script src=" http://www.kukunt.co.cc//feeds/posts/default/-/nama label 3?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol>
<b>nama label 4</b><script style="text/javascript"> var numposts = 25; var standardstyling = true; </script> <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script> <ol> <script src=" http://www.kukunt.co.cc//feeds/posts/default/-/nama label 4?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol>

Rabu, 27 Juli 2011

Cara Membuat Text Area

Text Area atau Area Teks merupakan tempat atau area berbentuk persegi yang digunakan untuk menyimpan suatu tulisan atau teks dan membentuk area tersendiri. Biasanya text area ini dipakai untuk menyimpan kode-kode HTML serta teks-teks yang lainnya agar dapat di-copy oleh para pengunjung blog dengan mudah. Ada 2 macam text area yang akan kita bahas, yaitu text area dengan tombol highlight, satu lagi text area auto block. 
Untuk membuat text area dengan tombol highlight, silakan copy kode di bawah ini.
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 150px; width: 350px;" wrap="VIRTUAL">

Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.

</textarea></div>
</form>
</div>
Kode di atas mempunyai 2 elemen bagian. Elemen yang pertama adalah elemen kode pembentuk tombol yang bertuliskan Highlight All. Sedangkan elemen yang kedua adalah elemen kode pembentuk text area.

Keterangan untuk elemen pembentuk tombol bertuliskan Highlight All:
  • <div align="center">, kata center menunjukkan bahwa posisi tombol berada di tengah. Bila Anda ingin posisi tombol itu berada di sebelah kanan, ganti kata center dengan right. Jika ingin berada di sisi kiri, Anda ganti kata center dengan kata left.
  • input onclick="javascript:this.form.txt.focus();this.form.txt.select();", kode ini menunjukkan kalau tombol Highlight All diklik maka seluruh teks yang ada di dalam text area akan ter-highlight.
  • value="Highlight All", kata Highlight All adalah kata yang muncul di tombol. Anda dapat menggantinya dengan kata keinginan Anda.

Keterangan untuk elemen pembentuk text area:

  • <div align="center">, menunjukkan text area berada di tengah. Jika Anda ingin text area berada di kiri, ganti kata center dengan left. Sedangkan bila Anda ingin di kanan, ganti kata center dengan right.
  • width: 350px;, menunjukkan lebar dari text area sebesar 350 piksel. Jika ingin lebih lebar lagi silakan diganti angka 350 dengan angka yang lebih tinggi lagi nilainya.
  • height: 150px;, menunjukkan tinggi dari text area. Bila ingin lebih tinggi lagi, silakan ganti angka 150 dengan dengan yang lebih tinggi lagi nilainya.

Bila kode text area dengan tombol highlight di atas diletakkan di Edit HTML, maka hasilnya akan seperti ini.

Nah yang kedua text area auto block. Maksudnya, jika kita mengarahkan mouse pointer ke daerah text area, maka teksnya akan ter-block atau ter-highlight secara otomatis tanpa perlu mengkliknya. Untuk membuat text area seperti itu, kita perlu menambahkan kode onmouseover="this.form.txt.select()" readonly="readonly" sehingga secara keseluruhan kode untuk membuat text area akan menjadi seperti di bawah ini.
<div align="center">
<form name="gayamunadi">
<textarea cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 40px; width: 350px;">

Simpan tulisan atau kode HTML Anda di sini, maka teks Anda akan siap di-copy oleh para pengunjung blog Anda.

</textarea></form>
</div>
  • div align="center" menunjukkan posisi text area berada di tengah. Kalau ingin berada di kiri, center diganti dengan left, bila mau di kanan, center diubah menjadi right.
  • width: 350px; menunjukkan lebar text area sebesar 350 piksel. Bila ingin yang lebih lebar lagi, silakan ganti angka 350 dengan nilai yang lebih tinggi atau sebaliknya.
  • height: 40px; menunjukkan tinggi bidang text area sebesar 40 piksel. Jika ingin yang lebih tinggi lagi, ubah angka 40 dengan nilai yang lebih besar.
hasilnya akan seperti dibawah ini


selamat mencoba.

Selasa, 26 Juli 2011

Cara Membuat Scroll Box

Pada Tutorial blog kali ini saya akan kasih tips cara membuat Scroll Box. Scroll Box banyak digunakan di web atau blog. Scroll Box sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak artikel atau apa saja yang ingin tetap ditampilkan pada satu halaman. Scroll Box selain bisa digunakan untuk tempat artikel, banyak juga yang menggunakan Scroll Box sebagai tempat daftar isi.

Cara membuat Scroll Box sangat mudah, silahkan anda perhatikan contoh dibawah ini berikut kodenya :
JUDUL ARTIKEL
Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.

Berikut Kode untuk scroll box diatas :
<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col">JUDUL ARTIKEL</th> </tr>
<tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 250px; height: 100px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.</div></div></td></tr>
</table>
</div>

Ada juga Scroll box yg sederhana, seperti contoh dibawah ini:






Photobucket

Berikut Kode untuk scroll box diatas :
<div style="background: #AEE4E3; height: 200px; overflow: auto; padding: 5px 5px 5px 5px; width: 100%px;">
<center><b>

TULISAN ANDA

</b></center></div>

Anda bisa mengatur sendiri lebar/tinggi box.... selamat mencoba

Membuat Artiket Terbaru + Gambar

Dalam kesempatan kali ini sekarang kita akan mencoba membuat widget artikel terbaru yang di ciptakan dari JQuery, Tampilan widget artikel terbaru ni cukup apik dan rapih. selain itu terdapat banyak kelebihan di bandingkan dengan yang telah kita bahas kemarin.

Kelebihannya :
•Memiliki tampilan yang dinamis dan rapih.
•Memiliki Load yang cukup cepat
•Bisa di gunakan di Tab Menu atau New Window.
•Terdapat Informasi Jumlah komentar di masing-masing artikel yang di munculkan.
•Gambar/thumbails apik dan padat.
•dan masih banyak lagi deh yang jelas kang salman jamin sobat informasi maya bakal puas.

silakan lihat gambar di bawah ini :



Cara Membutnya :
1. Login Ke Blogger
2. Pilih Tata Letak / Rancangan
3. Klik Tambah Widget/Gedget
4. Pilih HTML/Javascript
5. Paste-kan Kode di Bawah ini ke HTML/Javascript tadi.
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summarFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://blogANDA.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
ganti yg warna merah dgn URL blog anda

6. Simpan. dan lihat hasilnya.

Cara Membuat Multi Tab

Multi tab ini berisi beberapa konten yang bisa kita isi apa saja seperti video, gambar, slide foto, daftar isi, daftar link, dll. Dengan menggunakan multitab ini, kita dapat menghemat tempat yang ada pada halaman depan blog kita. Silahkan anda bisa lihat contoh bentuk multi tab yang ada dibawah ini, disitu terdapat tiga konten : Multi Tab 1, Multi Tab 2, dan Multi Tab 3. Tapi anda bisa menambah tab sesuai kebutuhan dan disesuaikan lebar sidebar template anda tentunya.

Gambar 1

Photobucket

Gambar 2

Photobucket

Gambar 3

Photobucket
Bila anda berminat, silahkan ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode </head>, Copy kode di bawah ini dan taruh sebelum kode </head>



<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}
tabberObj.prototype.init = function(e)
{
var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {
t = this.tabs[i];
t.headingText = t.div.title;
if (this.removeTitle) { t.div.title = ''; }
if (!t.headingText) {
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}
if (!t.headingText) {
t.headingText = i + 1;
}
DOM_li = document.createElement("li");
t.li = DOM_li;
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = i;
if (this.addLinkId && this.linkIdFormat) {
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
DOM_a.id = aId;
}
DOM_li.appendChild(DOM_a);
DOM_ul.appendChild(DOM_li);
}
e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
a.blur();
if (typeof self.onClick == 'function') {
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }
rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i;
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';
return this;
};
function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;
if (!tabberArgs) { tabberArgs = {}; }
tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>
</script>

<style type='text/css'>
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#f8f8f8;
border:1px solid #DDD;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid #ddd;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin-right:5px;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid #DDD;
border-bottom:none;
background:#6c6c6c;
text-decoration:none;
color:#ffffff;
outline:none;
}
.tabbernav li a:hover {
color:#6c6c6c;
background:#ffffff;
border:1px solid #DDD;
text-decoration:none;
outline:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#6c6c6c;
border-bottom: 1px solid #ffffff;
outline:none;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #DDD;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #ddd;
margin:0 5px;
padding:2px 0 5px 0;
}
</style>
<style type="text/css">
div.scrolltutor
{
background-color:#FFFFFF;
width:100%;
height:300px;
overflow:auto;
}
</style>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman
2. Tambah Gadget
3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript
4. Copy dan paste kode dibawah ini pada gadget tersebut :
<div class='tabber'>
<div class='tabbertab' id='tab1'>
<h2>MULTI TAB-1</h2>
<div class="scrolltutor">


AREA KONTEN TAB-1


</div>
</div>


<div class='tabbertab' id='tab2'>
<h2>MULTI TAB-2</h2>
<div class="scrolltutor">


AREA KONTEN TAB-2


</div>
</div>

<div class='tabbertab' id='tab3'>
<h2>MULTI TAB-3</h2>
<div class="scrolltutor">


AREA KONTEN TAB-3


</div>
</div>
</div>
Catatan:
Silahkan anda ganti tulisan berwarna merah dengan judul tab milik anda, dan warna biru area daftar, artikel, gambar, video, atau apa saja terserah anda.

Jumat, 22 Juli 2011

Cara pasang Emotions di postingan

bingung ne mo kasih nama apa judul postingan kali ini... pokoknya ky gambar diatas dah...doh
langsung aja yuk ikuting cara²nya cool
•buka mozzila firefox
•instal addon Grease Monkey,jika belum ada silahkan
download disini
•restart firefox, lalu donwload scriptnya disini, kemudian instal script tersebut
•nah sekarang kita otak-atik kode CSS.. masuk ke menu rancangan (design) > Edit HTML > ceklist expant widgetnya cari kode berikut: ]]></b:skin>
lalu copy kode dibawah pastekan di atas kode ]]></b:skin>
img.emoticon {
padding: 0;
margin: 0;
border: 0;
}
•kalo udah, save template..
•sekarang coba cek,, buka new post,,, kalo belum muncul emotion ikuti langkah berikut.. masuk ke menu setting / pengaturan lalu cari editor entry (post editor) pilih yang lama /old dan SAVE setting anda.
•selesai....

Rabu, 13 Juli 2011

Nambah Gadget Disamping Header

Selain Menambah Gadget diatas/dibawah Header, kita juga bisa nambah gadget disamping header... mungkin sodara² sering ngelihat iklan di samping header dan ingin membuat blog sodara² seperti itu.... berikut caranya...

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Cari kode yang sama atau mirip dengan kode berikut :
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
Catatan :
Setiap template biasanya berbeda kodenya, 
yang penting perhatikan kode - kode yang ada pada bagian (/* Header)

6. Ganti kode diatas dengan kode dibawah ini :
/* Header
----------------------------------------------- */
#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
}

#header2{float:left; width:60%;}
7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode berikut :
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>
8. Ganti kode diatas dengan kode dibawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
10. Simpan Template.

Nah.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat....

Cara Membuat Tulisan Berjalan dan Berkedip

Bergerak kekanan !
Ke Kanan dan Kekiri ??
Bergerak kekanan Perlahan !
Ke Kanan dan Kekiri Dan Bisa Di stop??
Bergerak Ke Atas
Bergerak Ke Atas dan Ke bawah
TULISAN BERKEDIP

Bagaimana bikin tulisan ky diatas?? hehe, langsung aja berikut kodenya:

•Untuk Yang bergerak kekanan
<marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Bergerak kekanan !</span></marquee>
Untuk Yang Bergerak kekiri ! : Tinggal ganti kata "right" menjadi "Left"

•Untuk Yang Ke Kanan dan Kekiri
<marquee direction="left" behavior="alternate"><span style="color: rgb(255, 0, 0); font-weight: bold;">Ke Kanan dan Kekiri ??</span></marquee>

•Untuk Yang Bergerak kekanan Perlahan :
<marquee direction="right" scrolldelay="500"><span style="color: rgb(255, 255, 0); font-weight: bold;">Bergerak kekanan Perlahan !</span></marquee>
Note :
»Nilai scrolldelay menentukan cepat atau lambatnya tulisan bergerak.
»Direction = menentukan arah bergerak

•Untuk Yang Ke Kanan dan Kekiri Dan Bisa Di stop
<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color: rgb(255, 0, 0); font-weight: bold;">Ke Kanan dan Kekiri Dan Bisa Di stop??</span></marquee>

•Untuk Yang Bergerak Ke Atas
<marquee align="center" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color: rgb(0, 255, 0); font-weight: bold;">Bergerak Ke Atas</span></marquee>

•Untuk Yang Bergerak Ke Atas dan Ke bawah
<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color: rgb(255, 0, 255); font-weight: bold;">Bergerak Ke Atas dan Ke bawah</span></marquee>

Note : Anda bisa merubah warna tulisan dengan mengubah angka pada :
rgb(255,0,0)=menjadi merah
rgb(0,255,0)=menjadi Hijau
rgb(0,0,255)=menjadi Biru
Atau dikombinasi....Coba-coba aja ya....

•Untuk tulisan berkedip
<blink>TULISAN BERKEDIP</blink>
note: anda juga bisa menggabungkan tulisan berkedip dengan tulisan berjalan

kalo gambar yg bergerak?? bisa.. ini contohnya



hehe keren kan?? ini kodenya:

<marquee direction="right"><img src="http://i1123.photobucket.com/albums/l554/kukunt/ku2nt4.png" /></marquee>

ganti tulisan warna merah dgn URL gambar anda...

selamat mencoba...

Cara Membuat Recent Post Berjalan


recent post emg berperan penting dlm blog,,, pengunjung blog jd lebih mudah mencari artikel terbaru... yg akan ane bahas kali ini adalah gimana bikin recent post berjalan ky di blog ane,,, cukup mudah,, langsung aja
•Masuk ke halaman Dasboard » Tata Letak (Rancangan) » Elemen Laman
•Tambah gadget elemen HTML/JavaScript
•Copy kode dibawah dan paste pada elemen HTML/JavaScript tersebut


<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json)
{
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{
sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if( nWidth)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
}
else
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}

if( nScrollDelay)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if(sDirection)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
if(sDirection == "top" || sDirection =="bottom")
{
//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = "&nbsp;&nbsp;";
}
else
{
//For down and up directions seperate headlines by new line
sHeadlineTerminator = "\<br/\>";
}
}
if(sOpenLinkLocation =="N")
{
sPostLinkLocation = " target= \"_blank\" ";
}
else
{
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = "";
for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
{
objPost = json.feed.entry[nFeedCounter];
for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
{
if (objPost.link[nCounter].rel == 'alternate')
{
sPostURL = objPost.link[nCounter].href;
break;
}
}

sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
}
catch(exception)
{
alert(exception);
}
}
//]]>
</script>

<script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="top"; var sOpenLinkLocation="Y"; var sBulletChar="«««"; </script> <script style="text/javascript" src="http://ku2nt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

Keterangan :
•Ganti kode yang berwarna merah dengan alamat blog anda.
•var nMaxPosts = 20 adalah jumlah postingan terakhir.
•var nScrollDelay = 180 adalah kecepatan text.
•var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
•var sBulletChar="«««" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

Selasa, 12 Juli 2011

Cara Menghilangkan Tanggal Posting


Mungkin ada sebagian orang yg sependapat ma ane,, kalo tanggal di atas postingan sangat mengganggu pemandangan... cukup gampang ngilangin tanggal posting,,, langsung aja yuk...

• Masuk menu Layout kemudian masuk Edit HTML dan cari code yang mirip seperti ini:
h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
}
• Nah jika udah ketemu tambahkan code Css visibility:hidden; kedalam Css diatas sehingga menjadi seperti
h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
visibility:hidden;
}
• Kemudian Simpan pengaturanya..

Senin, 11 Juli 2011

Menambah Random Post


Mata udah 5 watt sodara²,,, tp mo tidur nanggung,,, ahhh daripada makin ngantuk mending ane bikin postingan,,,
kali ini mo posting bikin random post atau postingan acak... langsung ke TKP

1. Masuk dulu ke akun blogger anda
2. Setelah anda berada di Dashboard pilih Desaign dan anda akan diantar ke halaman Edit Layout Tepatnya Page Elements.
3. Pilih Add a Gadget -- HTML/JavaScript
4. Masukkan/Copy-Paste Kode Di Bawah Ini :
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=20;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
5. Save/Simpan Kemudian Lihat Hasilnya..
Keterangan : angka yang berwarna Merah bisa anda ganti sesuai keinginan anda, angka tersebut ialah berapa jumlah daftar postingan yang akan tampil/terlihat

Jumat, 08 Juli 2011

Nambah Gadget Diatas Header

Photobucket

Pada umumnya blog bawaan dari blogspot gak terdapat gadget diatas header, tapi pasti sodara² sering ngelihat web atau blog yg yg meletakan gadget diatas header, baik berupa iklan, gambar, animasi atau apalah... yg jd pertanyaan gmn cara nambah gadget diatas header... penasaran?? oke kita langsung ke TKP

ikuti langkah² berikut:
• login ke blogger
• klik tata letak/layout/rancangan
• klik edit HTML
• lalu cari kode berikut:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
catatan: setiap template memiliki kode berbeda, cari kode yg mirip diatas

• ganti kode diatas dengan kode berikut:
<b:section class='header' id='header' preferred='yes'>
• klik save template
• sekarang coba klik page elemen, udah bisa nambah gadget diatas header kan?? cukup mudah ternyata...Photobucket