-> Mendaftarkan Blog Agar Terdaftar Cepat di Google Secara Otomatis

Adapun alasan kita untuk mendaftarkan Blog kita ke Google adalah supaya blog dan isi postingan bisa terdaftar cepat atau dikenali oleh mesin pencari google. Dengan begitu ketika ada seseorang ingin mencari artikel di mesin pencari google ada kemungkinan blog kita dilihatnya. Artinya google akan menampilkan beberapa tulisan kita sesuai dengan yang dicari, biasa ini di kenal dengan nama SEO dan SERP (soal SEO dan SERP nanti kita bahas yah). Namun ingat satu hal, blog kita masih memerlukan waktu untuk bersaing dengan blog-blog lain yang sejenis. Tapi jangan berkecil hati yah, yang penting tiap kita posting blog kita sudah terpampang di google.

Mendaftarkan Blog Agar Terdaftar Cepat di Google Secara Otomatis
Syarat utama adalah dengan menggunakan gmail. Maklumlah karena menggunakan produk google kudu menggunakan gmail dari google. Bila masih menggunakan email dari produk lain, sebaiknya beralihkan ke google. Okay.
Yukk kita mulai :

1. Bukalah akun blog anda kawan.
2. Setelah masuk ke blog atau sudah di dasbor blog anda, lalu klik disini.
3. Bila sudah masuk akan ada pertanyaan silahkan masukkan password email anda. Silahkan isi passwordnya yah (bagi yang belum pernah). Yang sudah pernah tidak ditanyakan lagi passwordnya kok, atau bisa lewat Account Setting / Setelan Akun (biasa di pojok kanan atas. Selanjutnya cari Produk / Product (biasa sebelah kiri) lalu pilih lagi Webmaster Tool (bagi yang sudah pernah daftar juga hehehehe,,, ribet yah, biar lengkap saja kok tutorialnya).
Setelah semua dilakukan maka akan muncul seperti di bawah ini.

4. Lalu klik blog anda (contoh blog ini ada tulisan bos-tutorial.blogspot.com) atau klik gambar blog anda.
5. Selanjutnya pilih SITE MAP / PETA SITUS. biasanya ada disebelah kanan. (lihat gambar di bawah ini.

6.Setelah mengklik Peta Situs / Sitemap, maka mulailah menambahkah Peta Situs anda dengan mengklik Tambahkan / Uji Peta Situs (biasanya warna merah kotaknya sebelah kanan pojok dan tepat dibawah nama blog anda) lihat gambar di bawah ini.

7. Isilah Peta Situs yang Bos Tutorial sediakan di bawah ini. (lihat gambar di bawah ini)

masukkan peta situs dibawah ini (jgn pake spasi yah)

atom.xml?

atom.xml?redirect=false

feeds/posts/default?orderby=updated

atom.xml?redirect=false&start-index=1&max-results=500

Masukkan satu per satu yah.  (Jangan lupa klik Mengirim Peta Situs yah bila sudah memasukkan script yang Bos Tutorial sediakan ok). Setiap memasukkan Peta Situs di atas akan muncul seperti di bawah ini:

Pilih saja Refresh atau Tutup, Namun ingat ulangi langkah 6 dan 7 berulang-ulang sampai anda memasukkan Peta Situs itu ok.

8. Selesai sudah memasukkan Peta Situs pada Webmaster Tools anda. Dan bila Selesai akan muncul seperti ini.

Oh iya, tuh warna gambar Biru adalah jumlah konten yang kita kirimkan, dan warna merah adalah sudah masuk daftar google (index google) bagi yang baru daftar warna merah belum muncul. Jadi sabar saja yah pasti muncul kok.

9. Dah tidak adalagi langkah selanjutnya. Tutup saja Webmaster Tools anda. Hehehe, jangan dipelolotin.

Jangan lupa Baca Catatan di bawah ini yah..

Catatan:

1. Langkah di atas adalah agar halaman postingan kita terdaftar cepat secara otomatis oleh Google, jadi tiap posting artikel baru, biasa sudah muncul di layar mesin pencari google dengan mengetikkan Judul postingan kita. Biasanya bila Blog kita sudah bersaing dengan dengan blog lainnya maka Halaman kita akan di atas. Minimal di halam 1 di mesin pencarian Google.
2. Script diatas diperuntukkan hanya Jumlah postingan dibawah 500 postingan. Bila postingan / artikel anda sudah mencapai 501, masukkan Peta Situs di bawah ini:

atom.xml?redirect=false&start-index=501&max-results=500 

(jika postingan masih di bawah 1000)

atom.xml?redirect=false&start-index=1001&max-results=500 

(jika postingan sudah diatas 1000)

Read more »

Cara Membuat Widget Artikel Posting Terbaru

Widget Artikel Posting Terbaru memiliki Fungsi Menampilkan Artikel Yang baru anda buat di sidebar yang letaknya sesuai dengan kemauan anda.
Menuju ke Cara Membuat Widget Artikel Posting Terbaru langsung saja di sedot kode scriptnya dibawah ini

Kode :
<script src="https://googledrive.com/host/0B1xHV8JisQ9VU3M2cGVTUi1Hak0"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://catatankuliah-teknikunsiq.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Cara Penggunaan Widget Komentar Terbaru cukup mudah, Masuk Ke blogger anda, Buka Tata Letak dan Tambahkan Gadget, pilih Javascript/HTML, beri judul widget, dan masukan Kode Script diatas, Ganti http://catatankuliah-teknikunsiq.blogspot.com  Dengan Nama Blog Anta dan Klik Simpan.


Selamat Mencobi...semoga berhasil. amin....

Read more »

* Mengubah pointer blog dengan asma Allah-Muhammad

Pertama buka halaman dashboard blogger anda, kemudian masuk pada halaman editor layout atau "editHTML" blog anda....ingat harus blog anda, jangan blog orang lain ya...hehehe

Selanjutnya cari kode

<body>

dan paste-kan kode berikut ini dibawahnya.

<style>HTML,BODY{cursor: url("http://i271.photobucket.com/albums/jj143/iman354/gdm-login5.png"), auto;}</style>

Kemudian jangan lupa klik "SAVE TEMPLATE" dan silahkan lihat hasilnya pada halaman blog anda...

Read more »

Cara Membuat Widget Twitter Follow Us Melayang di Blogger/Blogspot

Konsep widget ini sama dengan tombol back to top melayang Blogger beberapa waktu yang lalu, yaitu dengan memberikan styling CSS: fixed position dan scrolling display pada link gambar untuk memberikan efek melayang.

Cara membuat/memasang:

1. . Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

2. Setelah pop up window muncul, pilih opsi HTML/Javascript

3. Kemudian copy kode berikut:

<br/><a style="display:scroll;position:fixed;bottom:200px;right:1px;" href="http://twitter.com/azmisurvivor target="_blank"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgV0rgxy183PDc3Pb0sPKgRAW1tdzfVPW2ZVpDK75Lb8lEhLS1Yz7VlVS5IIDc2_OTNfdRKCy1Ja2B-dPAo2c9MaqBFr9FTH4256-X695pomu1MOG6zVOGMqRDiIA-TT8QVTDNdEHemsjU/s1600/floatingtwitter.png" /></a>

Ganti azmisurvivor dengan  nama account Twitter anda. Jika anda ingin widget berada di sebelah kiri browser, ganti right dengan left.

4. Paste kode yang sudah di edit ke kolom configure HTML/Javascript.

 

5. Klik save.

6. Refresh blog dan lihat hasilnya.

Read more »

Cara Mengganti Icon Blogspot

Bagi anda para blogger yang ingin tahu cara mengganti icon blogspot akan penulis berikan tutorialnya berikut.

contoh Icon blogtegal yakni seperti terlihat pada address bar bergambar seperti

 

• pertama login ke dashboard blog anda.
  
• pilih Rancangan--Edit HTML
  
• masukan script berikut sebelum kode</head> pada template blog anda
  
• Scriptnya
  
  <link href='http://3.bp.blogspot.com/-2_iYmyVSeEc/T1cteVZE7PI/AAAAAAAAAN8/DOS-7RZ1Gxs/s1600/44px-RomanC-01.png' rel='SHORTCUT ICON'/>
• terakhir klik ''Save Template''.

oh yya ukuran gambar di sarankan berukuran 32 X 32 atau 30 X 36.
untuk ukuran yg lebih besar pun boleh,tapi itu akan memberatkan loading blog itu sendiri yg berujung pada perginya para penunjung, karena males kelamaan nunggu loading blog.

Selesai, sekarang lihat pada tab address browser anda, sudah berganti icon-nya sesuai apa yang kita inginkan.cara mengganti icon blogsot.

Read more »

Gambarnya Jatoh euy

Langkah 1 :

1. Masuk ke rancangan
2. Taro kode dibawah itu, sebelom  </head>
3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
4. Simpan deh.

Langkah 2 :

1. Masuk ke Tambah Gadget HTML/JavaScript.
2. Masukin kode yang dibawah itu

<script src=" http://kodecode.googlecode.com/files/animation1.js " type="text/javascript">

</script><script src="http://kodecode.googlecode.com/files/animation2.js" type="text/javascript"></script>

<script src="http://kodecode.googlecode.com/files/animation3.js" type="text/javascript">

</script><style type="text/css">

.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">

<img height="200" src="URL GAMBAR kamu  DI SINI" width="400" />
<img height="200" src="URL GAMBAR kamu  DI SINI" width="400" />
<img height="200" src="URL GAMBAR kamu  DI SINI" width="400" />
......................................................kalau mau ditambahin tinggal copas azh 
<img height="200" src="URL GAMBAR kamu  DI SINI" width="400" /></div>

<script type="text/javascript">

$('#ke2').cycle({fx:'scrollDown',speedIn:  2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});

</script> 
NB : 

warna merah sesuaikan dengan mau-maunya sohib.

Mau buat URL Gambar tampol disini

Lihat berhasil kah?...kalau gagal mendingan ga usah dipasang azah deh.

Read more »

Daftar Isi

langsung saja mulai:
 
<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src=http://NAMABLOGSOBAT.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc></script>


Script diatas bisa sobat pasang di halaman posting atau sobat bisa juga pasang di sidebar dengan menambahkan kode untuk scrolling yaitu seperti dibawah ini:

<div style="border: 1px solid #000000; overflow: auto; height: 300px;" margin="4px" border:1px solid#000000;">

KODE DAFTAR ISI 

</div>

Read more »

Artikel Terkait dengan Scroll

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

 

langkahnya:
1.  Masuk Blog sohib sendiri...pasti.
2.  Edit HTML dan centang Exspand Template
3.  Cari Kode ]]></b:skin> supaya gampang ketemu pake Ctrl "F"
4.  Pasang Kode dibawah ini dan letakkan persis diatas kode no. 3

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;

background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}

.rbbox:hover{background-color: rgb(255, 255, 255);}

Perhati'in :

#f0f0f0 (Kode warna) bisa diganti sesuka sohib...cari kode warna silahkan klik disini
Langkah selanjutnya :
1.  Cari kode <data:post.body/>
2.  Paste Kode dibawah ini, dan pasang persis dibawah kode no. 1
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
Yang berwarna merah bisa sohib ganti sesukanya.
Related Post: Artikel terkait dll
200 : tinggi scroll
4, 10 dan 3 bisa diganti
Pratinjau sebelum disimpan?

Read more »

Cara Praktis Membuat Scroll pada Widget Sidebar

1. Masuklah ke halamanDasborblog anda lalu klikRancangan.


2. Kemudian kliklahEditpada widget yang akan anda beri scroll (meskipun semua widget tersebut nantinya bisa diberi scroll).

3. Sisipkanlah kode di bawah ini ke dalamnya. Yang berwarna biru letakkan di bagian awal dan yang berwarna merah di bagian akhir.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

</div>

4. Sebagai tambahan: gantilah angka200untuktinggi kotak scrollyang anda ingikan. Kemudian angka10untukjarak isinyadari kiri dan atas. Lalu angka1untuk merubah ukurangaris pinggir kotaknyadan angka999999untuk merubahkode warnanya.

5. Contoh cara penyisipannya akan tampak seperti ini:

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

<center><script type="text/javascript" src="http://feedjit.com/serve/?vv=364&amp;dd=&amp;wid=cbf569f27c6e7ffb&amp;pid=0&amp;proid=0&amp;bc=EDF0F3&amp;tc=1F3055&amp;brd1=EDF0F3&amp;lnk=1F3055&amp;hc=1F3055&amp;ww=170"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript></center>

</div>

6. Jika sudah jangan lupa klikSIMPANdan tunggulah hingga proses selesai.

7. Sekarang lihatlah hasilnya dengan mengklikLihat Blog.

Read more »

Menampilkan Next Page Hanya Judul Postingan

Maksud Saya "next page" itu adalah halaman dari blog selain halaman depan itu loh! apabila Sobat mengklik link "Older post" atau "Posting lama" di main page hanya muncul judul postingnya saja.


Adapun cara memasangnya adalah sebagai berikut :

Masuk menu Layout kemudian masuk menu Edit HTML dan centang tanda "Expand widget templates"

Kemudian cari kode seperti di bawah ini :

<b:include data='post' name='post'/>

Bila sudah ketemu. Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='border: 2px outset rgb(189, 189, 189); width: 500px; padding: 10px; background-color: rgb(247, 248, 224); text-align: left;'>
<a expr:href='data:post.url'>
<data:post.title/></a></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

PERHATIAN
Untuk kode yang berwarna Merah silahkan sesuaikan dengan kehendak sobat, Mulai dari Lebar, Warna Background, dan Warna Border

Bila langkah-langkah di atas sudah selesai klik tombol SIMPAN/SAVE

Dikutip dari: http://ade-tea.blogspot.com/2011/08/menampilkan-next-page-hanya-judul.html#ixzz1rHHYsNkD

Read more »

Garuda Indonesia | Widget

Di bawah ini adalah contoh widgetnya :

Sidebar - copy this code if you want to put it on your sidebar:

<div style="text-align: center;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="150" src="https://4802375714254349729-a-1802744773732722657-s-sites.googlegroups.com/site/widgetkang/flag/Garuda Indonesia.swf?__install_id=1324" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Corner left - copy this code if you want to put it on bottom left position:

<div style="position: fixed; bottom: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="150" src="https://4802375714254349729-a-1802744773732722657-s-sites.googlegroups.com/site/widgetkang/flag/Garuda Indonesia.swf?__install_id=1324" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Corner right - copy this code if you want to put it on bottom right position:

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="150" src="https://4802375714254349729-a-1802744773732722657-s-sites.googlegroups.com/site/widgetkang/flag/Garuda Indonesia.swf?__install_id=1324" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

PERHATIAN
Kode yang berwarna Merah adalah ukuran dari widget ini. Silahkan Sobat ganti sesuai dengan keinginan.

Dikutip dari: http://ade-tea.blogspot.com/2012/03/garuda-indonesia-widget.html#ixzz1rHGbdBvj

Read more »

Background Berbeda-beda Setiap Halaman

Persiapan :

Memasang background utama :

Background utama yang kumaksud di sini adalah script backgroud yang terpasang langsung di Template blogmu, alias terpasang pada struktrur htmlnya. Ok kita lanjut yach.

1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.

body {background-image: url("http://alamat-gambar-sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}

2. Gantilah http://alamat-gambar-sobat yang berwarna merah dengan url gambar sobat.

3. Kode center no-repeat; (hijau) bisa sobat ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blog sobat, apakah mau di taruh di tengah, di kanan atau di kiri.

4. Kode no-repeat; boleh sobat hapus bila akan menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya menjadi penuh.

5. Kalau sudah selesai ngeditnya , balik lagi ke blog sobat. Cari kode seperti di bawah ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Hapus seluruh kode di atas, lalu gantikan dengan kode hasil editan sobat tadi.

6. Jika udah beres, klik SAVE

Nah sampai pada tahap ini, sobat sudah bisa melihat perubahan background blog sobat, klik aja View Blog.

Memasang background untuk halaman depan :

Halaman depan adalah halaman atau tampilan utama blog sobat. Di halaman ini sobat menempatkan berbagai widget/aksesoris yang wajib ada di halaman depan, diantaranya semisal tab menu, link para sobat kita, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.

Kerja kita kali ini agak sedikit praktis, karena css background dipasang seperti layaknya kita menambah widget/aksesoris ke sidebar blog.

Langkah pertama :

a. Copy script di bawah ini :

body {background-image: url("
<style type="text/css">
body {background-image: url("http://alamat-gambar sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed; }.bkgspc {margin-top:10px;color:#909090;font-size:10px;font-family:Arial;}.bkgspc a {color:#909090;}</style><div class="bkgspc" align="center">
Visit InfoServe for <a href="http://ade-tea.blogspot.com/" target="_blank">Blog Kang Fatur</a>.</div>

b. Edit dengan menggunakan wordpad atau document.txt.

c. Ganti http://alamat-gambar-sobat (kode yang berwarna merah ) dengan url gambar sobat

d. Ganti kode (yang berwarna biru) dengan left atau right, kode ini merupakan kode yang mengatur letak gambar sobat itu nantinya.

e. Kode no-repeat; bloeh sobat hapus kalo memakai gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan untuk bisa tampil penuh pada seluruh halaman

Langkah ke-dua :

Sekarang kita memasuki tahap kedua dimana kita akan memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa dech. Namun ngga ada salahnya kalau kang fatur uraikan kembali di sini. yuuuu ...

Seperti biasa :

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Add a Gadget.
5. Pilih HTML/JavaScript.
6. Beri nama CSS1 pada kolom titel atau kolom judul, ini hanya penamaan saja. Terserah terserah sobat dikasih nama apa. Yang jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang edit html.
7. Pastekan kode hasil editan kita tadi ke ruang conten.
8. Terus Save.

Langkah ke-tiga :

Sekarang kita masuk pada langkah ke_tiga, dimana kita akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Edit HTML
5. Conteng kotak Expand Widget Templates
6. Cari kode seperti di bawah ini : Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page.

<b:widget id='HTML20' locked='false' title='CSS1' type='HTML'>
<b:includable id='main'>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

7. Klik save, lantas klik view blog untuk melihat hasilnya.

Ok, kita sekarang sudah punya 2 buah backround berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau dilanjutkan ... yuuuuuk ...

Memasang background untuk halaman Selanjutnya :

Halaman selanjutnya adalah halaman yang akan tapil bila kita bergerak (misalnya ) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan . Kan tadi sobat udah punya kode script yang dikasi nama CSS1 ? ingat kan. Nah kode tersebut sobat ganti namanya menjadi CSS2, ini umpamanya. Untuk memudahkan pencarian kode ini nantinya.

Namun biar lebih jelas, baiknya kang fatur uraikan sedikit di bawah ini. ok coy ...

1. Ikuti langkah pertama seperti pada saat kita membuat backround untuk halaman pertama tadi, dari point a sampai d. Yaitu mengedit kodenya dengan worpad atau document txt.

2. setelah selesai di edit, pasang ke side bar seperti biasa dan beri nama widget kita ini dengan nana CSS2.

3. Ikuti langkah ke-tiga dengan penempatan kode berwarna biru yang sedikit berbeda seperti tampak pada kode di bawah ini ; perhatikan baik-baik perbedaannya.

<b:widget id='HTML21' locked='false' title='CSS2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:if>
</b:includable>
</b:widget>

4. Save dan view blog untuk melihat hasilnya.

Dikutip dari: http://ade-tea.blogspot.com/2009/08/background-berbeda-beda-setiap-halaman.html#ixzz1rFdVgJfH

Read more »

Cara Mengatur Judul Sidebar

cara "Mengatur Judul Sidebar"

Penampilan judul sidebar dapat sobat percantik dengan melengkapi kode-kode yang diperlukan agar penampilannya berbeda dengan sebelumnya (maksudnya kaya yang punya kang fatur gitu looch).

Kode awal untuk judul sidebar adalah .sidebar h2 { yang dibawahnya dapat sobat tambahkan kode-kode lain sesuai keperluan atau yang diinginkan.
O.K dech jangan ngomel-ngomel terus, yuk..sama-sama kita pelajari kode-kode yang dapat ditambahkan pada judul sidebar.
Jika para sobat ingin melalukan pengeditan pada judul sidebar, seperti biasa sobat harus melakukan langkah-langkah standar yaitu :

Masuk ke Blogger dengan ID sobat
Pilih Tata Letak
Pilih Edit HTML
Download Template Lengkap dengan tujuan jika hasil yang diharapkan tidak sesuai dengan keinginan sobat, template dapat dikembalikan pada keadaan semula.
Cari kode diatas tadi yaitu : .sidebar h2 {
Perhatikan kode tersebut pada bagian bawahnya, apakah sudah memiliki penambahan kode atau belum. Jika belum atau masih standar , coba sobat perhatikan kode sidebar dibawah ini yang telah dilengkapi dengan berbagai kode

PERHATIKAN YAA???

.sidebar h2 {

font-size:110%;

font-weight:bold;

text-transform:uppercase;

text-align:right;

border: 1px solid #000;

background:#6df466;

padding;5px;

}

Mari Kita bahas satu persatu :

• Kode font-size:110%; : berfungsi untuk mengatur besarnya huruf. Satuan yang digunakan bisa pakai % atau pixels (px). Angkanya dapat sobat ganti sesuai keinginan
• Kode font-weight:bold; : menunjukan judul yang tampil dengan huruf tebal. Kata bold dapat sobat ganti dengan normal jika penampilanya tidak ingin tebal atau ganti dengan italic jika ingin penampilan hurufnya miring.
• Kode text-transform:uppercase; : menunjukan bahwa huruf yang tampil semuanya berupa huruf kapital (besar). Sobat dapat mengganti dengan kata lowercase (semuanya huruf kecil) atau capitalize (hanya huruf depannya yang besar).
• Kode text-align:right; : Letak judul sidebar di bagian kanan. Sobat dapat mengganti dengan left jika ingin berada dikiri atau center jika ingin berada di tengah.
• Kode border: 1px solid #000; : berfungsi untuk menampilkan garis di sekeling judul sidebar. Sobat dapat mengganti ukuranya dan warna dari garis tersebut.
• Kode background:#6df466; : untuk menampilkan warna latar dari judul sidebar. Ganti kode warnanya dengan warna kesukaan sobat. Selain dengan menampilkan warna sobat juga dapat menampilkan sebuah image sebagai background judul sidebar. Perhatikan cara meletakan alamat image agar tampil sebagai background

background:url(http://www.alnect.net/blogcontest/banner_blog_contest.gif)no-repeat top left;

• Ganti alamat image diatas dengan alamat image kepunyan para sobat. Kalau para sobat belum punya gambarnya atau gak mao repot repot silahkan sobat pake aja gambar hasil karya kang fatur di bawah ini, tinggal pilih sesuai keinginan sobat.
  
  
  
  
  Alamatnya ini :
  
  http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif
  
  
  
  
  Alamatnya ini:
  
  http://i634.photobucket.com/albums/uu61/adetea/side1.gif
  
  
  
  Alamatnya ini:
  
  http://i634.photobucket.com/albums/uu61/adetea/side3.gif
  
  
  
  Alamatnya ini:
  
  http://i634.photobucket.com/albums/uu61/adetea/header.gif
• Kode padding;5px; : untuk memberi jarak antara bagian pinggir judul sidebar dengan tulisan judul sidebarnya, dengan maksud agar kelihatan tidak mepet ke bagian pinggir.
• Silahkan sobat coba untuk mengatur penampilan judul sidebar pada blog kesayangan sobat
• Jangan lupa setelah selesai klik Simpan Template.

Dikutip dari: http://ade-tea.blogspot.com/2009/07/cara-mengatur-judul-sidebar.html#ixzz1rFRmF7WC

Read more »

Membuat Multi Level Drop-Down Menu

Membuat Multi Level Drop-Down Menu Dengan CSS dan JQuery. Mungkin para sobat juga sudah banyak mendengar tentang masalah ini, dan sudah banyak para ahli yang mempostingkannya, namun saya hanya sekedar ingin berbagi sama para sobat yang masih awam seperti saya dan mudah mudahan postingan kali ini dapat bermanfaat.

Baik, untuk para pemula semuanya kalau belum tahu apa itu Multi Level drops-Down Menu di bawah ini contoh gambarnya :


Gimana tertarik?? Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery.

1. Seperti biasa Log In pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja


3. Tambahkan juga script berikut setelah script JQuery yang tadi

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->


<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template maka Hasilnya seperti pada gambar di bawah ini :


Untuk Sobat yang sudah hali dengan CSS silahkan edit sesuai selera sobat untuk kode warna silahkan klik disini.

Read more »

Menambah 3 Kolom/Elemen Halaman Widget di Bawah Header

Lagi-lagi sore ini kita akan membahas tentang Dsain Blog, tidak ada habis habisnya ya tutorial hehehe, karena demi teman yang baru gabung di dunia blogger alias yang masih awam seperti saya, makanya gak mao henti henti untuk memberikan tips dan trik kepada sobat semua. sama seperti saya kalau punya keinginan pingin cepat terkabulkan, disinilah saya akan mengabulkan keinginan-keinginan sobat, karena dulu perna salah satu sahabat saya minta di postingkan cara Nambah Elemen Halam,an Widget di bawah Header.

Sebelumnya saya pernah posting cara menambah Dua Kolom/Elemen Widget di Bawah Header, sekarang saya tambah lagi satu elemen. jadi judulnyapun menjadi Menambah 3 Kolom/Elemen Halaman Widget di Bawah Header.

Baik saya tidak akan panjang lebar lagi ngomongnya hehe, kita langsung aja ke TKP, di bawah ini gambar tampilan yang kita bahas sekarang ini :



Caranya sangat mudah dansimpel saya yakin bagi pemula juga pasti bisa OK. berikut langkah langkahnya :

1. Seperti biasa Login dulu ke blog sobat
2. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti gambar diatas.

Dikutip dari: http://ade-tea.blogspot.com/2010/11/menambah-3-kolomelemen-halaman-widget.html#ixzz1rFPXzqgQ

Read more »

Modifikasi Kotak Komentar Blogger

Dengan pertanyaan itulah saya membuat postingan ini yang berjudul Modifikasi Kotak Komentar Blogger. Selain untuk menjawab pertanyaan seri tadi mudah-mudahan tips atau postingan ini juga dapat bermanfaat bagi sobat-sobat yang lain.

Baik jika para sobat pingin liat seperti apa screenshotnya seperti di bawah ini :



Baik berhubung waktu sudah semakin siang kita lagsung aja ke langkah-langkah cara pembuatannya :

1. Seperti biasa Sobat LogIn ke blog masing-masing
2. Klik Rancangan --> Edit HTML
3. Beri tanda chacklist pada tulisan "Expand Template Widget"
4. Cari Kode berikut :

<div class='comment-form'>

5. Setelah ketemu ganti kode tersebut dengan kode seperti ini

<div id='ib-form'>

6. Kemudian tambahkan kode berikut di atas kode ]]></b:skin>
   
   

#ib-form iframe{
background:#ffffff url(http://i649.photobucket.com/albums/uu217/teaade/backroundpos.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(http://i649.photobucket.com/albums/uu217/teaade/backroundpos.gif) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}

7. Setelah semua langkah-langkah di atas selesai klik tombol Save. dan lihat hasilnya
   
   Semoga bermanfaat

Dikutip dari: http://ade-tea.blogspot.com/2011/02/modifikasi-kotak-komentar-blogger.html#ixzz1rFNtriRJ

Read more »