-->

Pages

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Jumat, 15 April 2011

tukar link di blog

1. Login ke www.blogspot.com
2. Setelah login anda klik Layout.
3. Kalau anda belum memiliki widget blogroll silahkan tambahkan dahulu dengan mengklik "tambah elemen halaman" dan ikuti langkah berikut :
  • Cari Daftar Link
  • Klik tulisan tambahkan ke blog
4. Setelah dua langkah di atas, maka anda akan mendapatkan kolom yang perlu diisi.
5. Kolom yang menjadi perhatian hanya 3 yaitu : Kolom Judul, Url situs baru, dan nama situs baru
  • Kolom judul anda isi dengan Tukar Link
  • Kolom Url situs baru anda isi dengan : Tukar Link dan Promosi Website
  • Kolom Nama Situs Baru anda isi dengan : http://www.webkios.info/direktori
  • Kemudian klik Tambah tautan kemudian klik Simpan perubahan.
6. Selesai!
7. Kalau widget sudah ditambahkan maka yang perlu anda lakukan hanyalah mengedit. Klik edit pada daftar link atau tukar link widget tsb kemudian lanjutkan ke langkah 5 hanya saja perhatian anda kini tertuju pada 2 kolom yaitu Kolom Url situs baru dan Kolom Nama Situs Baru.
Siap untuk bertukar link? silahkan klik http://www.webkios.info/direktori
Saat anda sudah melakukan langkah di atas maka anda tinggal mengisi kolom Link kami ditaruh di * dengan alamat blog anda. Bukahkah anda baru saja menambahkan website kami di blog anda!

Jumat, 08 April 2011

MEnambah Fungsi Read More di postingan

Mendengarkan permintaan banyak penggunanya, pengelola Blogger secara resmi akhirnya mengeluarkan fitur terbaru mereka yaitu Post Summaries dengan Read More (apaan tuh? Singkatnya – potongan artikel dengan penggunaan link berupa teks ‘baca lanjutan’ yang akan memperpendek posting di halaman utama). Dengan adanya fitur ini kita tidak lagi membutuhkan trik penggubah template untuk menampilkan post summaries dan penggunaan read more jadi-jadian di halaman utama.

Blogger memperkenalkan apa yang disebut Jump Breaks (Lompatan patah-patah? Yang jelas bukan goyang poco-poco, heheheh…). Jump Breaks adalah tag special yang bisa diletakkan dimanapun di halaman post dengan menggunakan text editor Blogger. Jika anda memasukkan Jump Breaks ke dalam post maka bagian atas dari post (atau bagian sebelum Jump Breaks) akan menjadi bagian potongan atau penggalan artikel.

Gimana tuh cara memasukkan Jump Breaks? Jika anda menggunakan text editor versi baru, anda bisa dengan mudah memasukkan Jump Breaks melalui text editor dengan langsung klik tombolnya. Tapi jika anda menggunakan text editor versi lama maka anda harus mengetikkan tag jump break secara manual ke dalam post. Caranya mudah saja, letakkan <!-- more --> pada post untuk memenggal artikel (Perhatikan bahwa  ada tambahan spasi setelah kata more).

Sayangnya jika anda menggunakan template mutakhir versi lama yang sudah diutak-atik sedemikian rupa sehingga, kemungkinan anda akan mengalami masalah. Mungkin dengan penyelesaian berikut masalah bisa diatasi: masuk ke halaman layout blogger anda. Pilih edit HTML dan centang expand Widget templates. Lalu cek kode berikut:

<data:post.body/>


Kalau sudah anda temukan, masukkan kode berikut di bawah kode yang tertera di atas.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Lalu coba untuk memenggal post terbaru anda dan cek halaman depan. Taraaa… post anda sudah terpotong dan muncul kalimat Read More yang berisi link menuju halaman post. Tunggu-tunggu… "Read More"? Bisa diganti nggak tuh... saya ingin menggantinya menjadi "Okelah Kalau Begitu"? Oho! Mudah sekali, masuk ke halaman Layout Blogger, pilih menu Page Elements. Edit bagian Blog Post pada kolom Post Page Link Text dan anda bisa memasukkan kata yang anda pilih di sana.

Bagaimana kalau kata Read More diganti dengan menggunakan gambar? Bisakah? Bisa juga… anda bisa mengganti dengan pilihan gambar. Kode berikut bisa dicoba:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src="ganti_dengan_url_gambar_anda" border="0" alt="keterangan gambar" /></a>
</div>
</b:if >

Tentunya anda harus mengubah kalimat "ganti_dengan_url_gambar_anda" dengan url gambar anda dan  "keterangan gambar" dengan keterangan tambahan untuk gambar.


Mudah-mudahan berhasil!

Bahasan tentang Post Summaries dan Read More ini masih belum selesai, tapi berhubung saya belum sarapan – saya cari makan dulu. Disambung di post berikutnya yaa? Hihihi…

Sabtu, 26 Maret 2011

Script Jendela Browser Berputar

Agak sulit menuliskan judulnya… sebaiknya lihat aja deh contohnya disini : http://ajoarlis.blogspot.com/
Ketika anda membuka blog tsb ..maka jendela browser anda akan berputar2 sejenak sebelum akhirnya jendela blog terbuka.

di Google saya lihat ada beberapa postingan yang membahas hal serupa dengan topik :
Membuat desktop anda berputar 360 derajat (ariesre.wordpress.com)
Membuat Efek Spin Opening Window (www.yudhaime.co.cc)
Nah gimana sih caranya ??
Untuk blogspot : Masuk ke Dashbor editor blog , lalu ke Layout, lalu ke edit HTML, kemudian Copy kode javascript berikut ini dan tempatkan sebelum persis dibawah tag <head> . Dan ini kodenya :
<script type='text/javascript'>

//<![CDATA[
scrW=screen.availWidth
scrH=screen.availHeight
window.resizeTo(10,10)
window.focus()
for(a=0;a<80;a++){
window.moveTo(0,0)
window.resizeTo(0,scrH*a/80)
}
window.resizeTo(0,0)
for(b=0;b<80;b++){
window.moveTo(0,scrH/1)
window.resizeTo(scrW*b/80,0)
}
for(c=0;c<80;c++){
window.moveTo(scrW/1,scrH/1)
window.resizeTo(0,scrH*c/80)
}
for(d=0;d<80;d++){
window.moveTo(scrW/1,0)
window.resizeTo(scrW*d/80,0)
}
for(e=0;e<80;e++){
window.resizeTo(scrW*e/80,scrH*e/80)
}
window.moveTo(0,0)
window.resizeTo(scrW,scrH)
//]]>
</script>
Catatan :  di blog dengan wordpress.com tidak bisa..karena selain tidak diizinkannya memasukkan kode javascript.. juga tidak leluasanya kita mengutak2 atik editor HTML.  Sedangkan Untuk blogspot..bisa
Demikian.. semoga bermanfaat
Update : 11 November 2010
Karena banyak yang gagal dalam mencoba , maka saya coba meneliti , dan mencoba sendiri. Ah rupanya mungkin cara penulisannya agak berbeda. Nah diatas sudah saya tambahkan untuk memudahkan.  Tinggal copy script nya lalu pastekan persis dibawah tag <head>. Untuk  contoh previewnya bisa lihat disini :  http://caramembuatblogs.blogspot.com/
Semoga berhasil deh ya…
Sumber : ??
Sumber image : ajoeka.blogspot.com

Kode Warna

Buat sobat blogger yang mau mencari kode HTML warna bisa cari di sini.....










































































































































































































Kode warna :
Selamat Mencoba!!!!

Menu Navigasi

Kegunaan dari menu navigasi ini adalah memudahkan pengunjung untuk menuju ke sebuah kategori dalam blog kita..
Dan berguna untuk memperindah tampilan blog..

Gimana sih caranya???
Ikuti langkah berikut ::

1. Log in dahulu ke account blogspot sobat.

2. KLik "Page Element" & Klik "Edit HTML"

3. Centangkan "Expand Widget Templates"

4. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>





.glossymenu{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(http://www.dynamicdrive.com/cssexamples/media/menub_bg.gif) repeat-x; /*tab background image path*/
    height: 46px;
    list-style: none;
}

.glossymenu li{
    float:left;
}

.glossymenu li a{
    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;   
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(http://www.dynamicdrive.com/cssexamples/media/menub_hover_left.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(http://www.dynamicdrive.com/cssexamples/media/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>


5. Lalu copy code di bawah ini dan letakkan tepat di atas kode <div id='content-wrapper'>


<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Kamu'><b>Home</b></a></li>

<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>

</ul>



Pada teks yang berwarna Biru sobat isi url tujuan yang di inginkan.
Pada teks yang berwarna Merah sobat isi dengan judul sesuai dari tujuan dari link tersebut.

6. Simpan Lalu lihat hasilnya

7. Selesai




Selamat Mencoba...

Membuat Anddres Bar Bergerak

Buat sobat yang mau judul blognya bergerak seperti punya ku...
ikutin cara berikut ini ya...

1. Log in dahulu ke account blogspot sobat.

2. KLik "Page Element" & Klik "Edit HTML"

3. Centangkan "Expand Widget Templates"

4. Cari kode/script berikut:


<title><data:blog.pageTitle/></title>

Ganti kode diatas dengan

<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

dan yang perlu diedit adalah <data:blog.pageTitle/> kamu bisa ganti dengan teks sesuka hatimu... truz 100, angka ini menunjukkan kecepatan pergerakan, kamu juga bisa menggantinya sesukamu..



Selamat Mencoba....