Zuga Media: Tips Blog | Beragam Informasi untuk Kemajuan Bersama

Home » Posts filed under Tips Blog

Cara Membuat Text Area pada Blogger

Posted by Zuga Media Posted on 1:36 AM with 5 comments

Fungsi fitur ini adalah:

sebagai tempat menyimpan data dalam bentuk text maupun kode HTML/Javascript, baik di dalam postingan maupun di sidebar blog.
menghemat halaman posting agar tidak terlalu panjang

Ingin mencobanya? silahkan ikuti langkah-langkah berikut ini:

Untuk Text Area:

Contoh:

Masukan kode di bawah ini ke dalam postingan atau sidebar blog Anda.

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"></div><p style="text-align: center;"><textarea style="padding: 3px; width: 200px; height: 50px;" name="txt"> Text/kode yang ingin anda tulis</textarea></p></form>

Untuk Textbox Area:

Contoh:

KLIK "SELECT ALL" UNTUK MENANDAI SELURUH TEXT

Masukan kode di bawah ini ke dalam postingan atau sidebar blog Anda.

Keterangan:

1. Width/Cols adalah lebar Text Area/Textbox Area;
2. Height/Rows adalah tinggi Text Area/Textbox Area;
3. Untuk tulisan yang berwarna hijau: Tempat untuk menulis text atau kode HTML/Javascript

Cara Menonaktifkan Klik Kanan pada Halaman Blog Anda

Posted by Zuga Media Posted on 9:49 PM with 2 comments

Untuk menghindari Copy Paste pada Blog, banyak pemilik blog yang mematikan fungsi klik kanan pada Blog mereka. Untuk caranya? silahkan ikuti langkah langkah berikut ini:
1. Login pada akun blogger.com Anda- pilih Layout - kemudian klik Elemen halaman
2. Pilih Elemen HTML/Javascript
3. Masukan kode berikut ini

4. Simpan perubahan

Catatan:

Untuk tulisan yang berwarna hijau, bisa Anda rubah sesuai dengan keinginan Anda.

Good luck

Membuat Arsip Postingan Model Scroll pada Blogger

Posted by Zuga Media Posted on 12:06 AM with No comments

Untuk membuatnya, kita hanya perlu menambahkan kode <div style='overflow:auto; width:ancho; height:100px;'>
Dan untuk pemasangan tata letak kode tersebut, silahkan ikuti langkah-langkah berikut:

1. Login pada akun blogger.com Anda- pilih Layout - kemudian klik Elemen halaman
2. Buat widget Arsip dengan nama Arsip Blog
3. Pilih model Hirearchy untuk model ini
4. Save

5. Pilih ke Edit HTML - centang kotak Expand Template Widget
6. Cari 'Arsip Blog'. Selengkapnya begini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>

7. Sebelumnya tidak ada kode merah di template Anda. Tambahkan kode itu untuk mengaktifkan scrolling-nya
8. Simpan perubahan
9. Selesai

Good Luck

Scrolling pada Kotak Komentar

Posted by Zuga Media Posted on 6:56 AM with 1 comment

Silahkan ikuti langkah-langkah dibawah ini:

1. Login pada akun Anda di blogger.com

2. Pilih menu Layout >> Edit HTML

3. Cari kode berikut

4. Kemudian sisipkan kode berikut di atasnya

Selengkapnya akan menjadi begini:

dan jangan lupa memberi penutup tag dari div itu sendiri dengan menambahkan </div> setelah kode </dl> seperti yang tertera di blog.

5. Simpan perubahan

6. Selesai

Anda juga dapat mengatur ulang tingginya sesuai keinginan, dengan mengubah 400px pada kode diatas dengan ukuran yang Anda inginkan.

Good luck

Mengubah Tampilan Label dari Artikel Menjadi Judul Artikel Saja Jika di Klik

Posted by Zuga Media Posted on 7:29 AM with 1 comment

Kali ini saya akan berbagi informasi tentang memodifikasi tampilan label jika di-klik, yang semula menampilkan artikel menjadi judul artikel saja. Keuntungannya tampilan blog Anda lebih ringkas. Anda ingin mencobanya?Silahkan ikuti langkah langkah berikut:

1. Login pada kaun Blogger Anda
2. Pilih Menu layout/Tata Letak kemudian klik pada menu Edit HTML
3. Centang pada kotak Expand Widget
4. Cari kode yang berwarna hijau yang penempatanya seperti di bawah ini ( tekan Ctrl+F untuk memudahkan pencarian)

apabila kode berwarna hijau tersebut tidak ketemu, coba Anda cari kode berikut:

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

5. Ubah kode yang berwarna hijau tadi dengan kode di bawah ini:

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

6. Simpan perubahan
7. Selesai

Good luck

Cara Membuat Navigasi Halaman dengan Nomor

Posted by Zuga Media Posted on 7:19 AM with 9 comments

Halaman Navigasi dengan nomor adalah fitur lama yang benar-benar mengagumnkan. Anda mungkin telah melihat halaman navigasi dengan nomor pada banyak blog yang menggunakan platform wordpress (yang diciptakan oleh Lester Chan). Tapi, Muhammad Rias dari Techie Blogger telah mengembangkan suatu sistem navigasi halaman untuk blogger. Dan sekarang Abu Farhan telah menyempurnakannya dan ia telah memberikan kepada kita sistem navigasi halaman yang lebih sempurna. Di bawah ini sudah saya sediakan screenshotnya:

Untuk membuatnya, silahkan ikuti langkah-langkah berikut:
1. Login pada akun Blogger Anda
2. Klik layout kemudian klik Edit Html
3. Centang Kotak Expand Widget
4. Cari kode ]]></b:skin>(tekan Ctrl+F untuk memudahkan pencarian) kemudian letakkan kode berikut tepat di atasnya

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Kode tersebut bisa Anda rubah sesuai dengan keinginan Anda
( Catatan: Jangan merubah apabila Anda tidak mengerti kode di atas, karena bisa menimbulkan hal yang tidak ingin Anda inginkan)

5. Kemudian cari kode </body> kemudian letakkan kode berikut tepat di atasnya

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://die-silver.googlecode.com/files/blognavigasi.js' type='text/javascript'/>' type='text/javascript'/>
</b:if>
</b:if>

perhatikan kode ini var pageCount=5; Angka pada kode tersebut adalah untuk menampilkan jumlah Posting yang akan terlihat pada setiap halaman navigasi.

6. Simpan perubahan
7. Selesai

Informasi ini adalah referensi dari Ardi33

Good luck

Cara Mengganti Tulisan Read More dengan Gambar

Posted by Zuga Media Posted on 6:28 AM with 8 comments

Untuk mengganti tulisan Read More yang sudah Anda buat dengan sebuah gambar, Anda cukup menyiapkan gambar yang ingin Anda tampilkan. Caranya sangat mudah, tetapi yang paling penting, apakah Anda sudah membuat read more itu? Jika belum, anda dapat membuatnya sekarang juga, silahkan lihat caranya dengan meng-klik link berikut:

Cara Membuat Read More

Setelah Anda selesai membuat read more, silahkan ikuti langkah langkah berikut untuk menggantinya dengan gambar:

1. Login pada akun Blogger Anda dahulu
2. Kemudian klik menu Layout/Tata letak
3. Pilih Edit HTML
4. Centang kotak Expand Widget kemudian cari tulisan Read more Anda (untuk pencarian lebih cepat gunakan tombol Ctrl+F). misalnya:

<b:if cond='data:blog.pageType != "item"'>
<span style='font-weight:bold;'><a expr:href='data:post.url' target='_blank'>
<div style='float:right'><br>Read More...</br>
</div>
</a>
</span>
</b:if>

5. Ganti tulisan yang berwarna merah dengan kode berikut

Ganti tulisan yang berwarna hijau dengan url gambar yang Anda inginkan, misalnya:

Untuk gambar di bawah ini:

Url-nya:

http://3.bp.blogspot.com/_Blf4uO5xTus/S5EbYm-dkoI/AAAAAAAAATE/6zKdC8h09fw/s1600-h/Read+More.bmp

6. Simpan perubahan
7. Selesai

Good luck

Membuat Read More dengan Judul Artikel

Posted by Zuga Media Posted on 7:31 AM with 2 comments

Membuat Read More pada Blogger sudah saya bahas sebelumnya di link ini -> Cara Membuat Read More Pada Blogger, kali ini saya akan membahas tentang membuat read more dengan judul artikel. Untuk membuat tampilan read more/baca selengkapnya dengan diikuti judul artikel, silahkan ikuti langkah-langkah berikut ini:

1. Login ke Blogger
2. Klik Tata Letak/Layout kemudian klik Edit Html
3. Centang Expand Widget
4. Cari tulisan Read More/Baca Selengkapnya kemudian sisipkan kode berikut ini tepat disebelah kanan tulisan tersebut.

<data:post.title/>

5. Simpan perubahan
6. Selesai

Good Luck

Menampilkan Avatar Profile Pada Komentar Blogger

Posted by Zuga Media Posted on 8:48 AM with 4 comments

Menampilkan avatar profile pada komentar blogger ini merupakan fitur baru yang ditambahkan oleh blogger untuk memperindah tampilan komentar. Jika Anda telah menggunakan fitur ini, kemudian ada seorang pengunjung yang menulis komentar di blog Anda dengan menggunakan id blogger, avatar profil pengunjung akan muncul di samping komentar tersebut.

Ingin tahu caranya?Silakan ikuti langkah-langkah berikut ini:

Jika Anda menggunakan template blogger standar yang perlu Anda lakukan adalah:

1. Login ke blogger.com
2. Pilih menu Pengaturan >> Komentar >> pilih “Ya” pada pilihan menampilkan “Tampilkan Gambar Profil Pada Komentar”.

Jika Anda menggunakan template custom. Anda harus menambahkan beberapa kode pada template Anda , caranya adalah:

1. Login ke blogger.com

2. Pilih menu Layout >> Edit HTML (jangan lupa untuk mendownload template Anda terlebih dahulu, ini untuk berjaga-jaga apabila nanti ada kesalahan)

3. Centang kotak Expand Widget

4. Cari kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

jika Anda tidak menemukan kode tersebut, ikuti langkah berikut:
1. Cari kode <dl id='comments-block'>
2.Ganti kode tersebut dengan

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

5. Cari kode <a expr:name='data:comment.anchorName'/>

6. Ganti kode tersebut dengan

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

7. Simpan perubahan

8. Selesai

Untuk informasi yang lebih mendetail, silakan kunjungi Blogger Widgets

Good luck

Mengganti Background Halaman Posting Pada Blogger

Posted by Zuga Media Posted on 5:26 AM with 11 comments

Pasti lebih menarik jika pada saat Anda memposting sebuah artikel, Anda dapat mengubah background posting dengan warna yang berbeda/ berbackground sebuah gambar sesuai dengan keinginan Anda. Caranya, Anda cukup menambahkan sedikit kode pada isi halaman Anda.
Silakan ikuti langkah-langkah berikut:

Untuk mengganti warna background

1. Ubah posting Anda pada mode Html
2. Kode yang perlu Anda tambahkan

<div style="background:#58FAF4; padding:5px 8px 5px 8px;">Tulis text Anda disini</div>

Keterangan:

#58FAF4 : Ganti dengan warna background sesuai dengan keinginan Anda
Tulis Text Anda disini : Adalah artikel yang ingin Anda tulis

Contoh:
<div style="background:#58FAF4; padding:5px 8px 5px 8px;">Sukses adalah idaman setiap orang tetapi kadang kala banyak orang kehilangan arah tanpa motivasi dan tanpa tujuan. Hidup ini terjadi hanya sekali, maka dari itu kita harus mengoptimalkan potensi dalam diri, optimis untuk lebih maju di setiap langkah yang kita buat. Banyak belajar terhadap segala hal tidak terkecuali belajar dari kesalahan bukan malah berhenti.</div>

Hasilnya:

Untuk mengganti background dengan gambar

1. Ubah posting Anda pada mode Html
2. Kode yang perlu Anda tambahkan

<div style="background:url(http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif) no-repeat right top;">
<span style="color: #000000;">Tulis Text Anda disini</span></div>

Keterangan:

http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif : Adalah gambar background , ganti dengan url gambar yang Anda inginkan
Untuk yang tulisan no-repeat right top;, bisa diganti dengan letak sesuai keinginan Anda, misal:
1. Untuk posisi gambar background di tengah: no-repeat center top;
2. Untuk posisi gambar background di kanan atas: no-repeat right top;
3. Untuk posisi gambar background di kiri atas: no-repeat left top;
Tulis Text Anda disini : Adalah artikel yang ingin Anda tulis
#ffffff : Adalah warna tulisan, ganti warna tersebut sesuai keinginan anda

Contoh:

<div style="background:url(http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif) no-repeat center top;"><span style="color: #088A85;">
Sukses adalah idaman setiap orang tetapi kadang kala banyak orang kehilangan arah tanpa motivasi dan tanpa tujuan.
Hidup ini terjadi hanya sekali, maka dari itu kita harus mengoptimalkan potensi dalam diri, optimis untuk lebih maju di setiap langkah yang kita buat.
Banyak belajar terhadap segala hal tidak terkecuali belajar dari kesalahan bukan malah berhenti.
Masa depan Anda tergantung pada diri Anda bukan pada pada orang lain.
Seni pencarian jalan yang Anda buat, adalah sesuatu kebanggaan dan keasyikan tersendiri.

You can do it.
</span></div>

Hasilnya:

Sukses adalah idaman setiap orang tetapi kadang kala banyak orang kehilangan arah tanpa motivasi dan tanpa tujuan.
Hidup ini terjadi hanya sekali, maka dari itu kita harus mengoptimalkan potensi dalam diri, optimis untuk lebih maju di setiap langkah yang kita buat.
Banyak belajar terhadap segala hal tidak terkecuali belajar dari kesalahan bukan malah berhenti.
Masa depan Anda tergantung pada diri Anda bukan pada pada orang lain.
Seni pencarian jalan yang Anda buat, adalah sesuatu kebanggaan dan keasyikan tersendiri.

You can do it.

Cara Membuat Tab View Menu

Posted by Zuga Media Posted on 11:28 PM with No comments

Tab Menu memiliki keuntungan karena Anda bisa menghemat ruang yang ada di blog Anda. Dalam tab menu Anda bisa meletakan beberapa gadget, banner serta teks didalam halaman yang sama tetapi dipisahkan oleh kolom tersendiri. Ukuran yang relatif kecil tapi bisa memuat banyak space.
Ingin tau cara membuatnya?silakan ikuti langkah langkah berikut ini :

1. Login pada Blogger

2. Pilih Tata Letak/Layout

3. Pilih Edit HTML

4. Klik Expand Widget Template

5. Cari kode </head>, copy paste kode berikut tepat di atasnya

6. Cari kode ]]></b:skin>, kemudian copy paste kode berikut tepat di atasnya

div.Tabardi33 div.TFs
{height: 30px; overflow: hidden;}
div.Tabardi33 div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabardi33 div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabardi33 div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabardi33 div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabardi33 div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabardi33 div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

7. Simpan perubahan

8. Kemudian pilih menu Elemen Halaman

9. Tambahkan Elemen HTML/Javascript

10. Copy paste kode berikut, pada Elemen HTML/Javascript

<form action="tabardi33.html" method="get">
<div class="Tabardi33" id="Tabardi33">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page">
<div class="floor">
Text/kode yang ingin Anda tambahkan (tab1)
</div>
</div>
<div class="Page">
Text/kode yang ingin Anda tambahkan (tab2)
</div>
<div class="Page">
<div class="floor">
Text/kode yang ingin Anda tambahkan (tab3)
</div>
</div>
<div class="Page">
<div class="floor">
Text/kode yang ingin Anda tambahkan (tab4)
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">tabardi33_name('Tabardi33');</script>

Keterangan

Yang berwarna biru : Adalah judul menu, hapus text tersebut dan ganti dengan judul yang Anda inginkan
Yang berwarna merah : Adalah isi menu, hapus text tersebut dan ganti dengan text/kode yang ingin Anda pasang.

11. Simpan Elemen

12. Selesai

Good luck

Cara Mengganti Icon Pada Adress Bar (Favicon)

Posted by Zuga Media Posted on 8:41 AM with No comments

Icon blogger pada address bar adalah icon default saat Anda membuat blog pada blogger. Tetapi, icon tersebut dapat diganti dengan icon Anda sendiri.
Ingin tahu bagaimana caranya?
Silakan ikuti langkah langkah berikut ini:

1. Login pada Blogger
2. Pilih Tata Letak/Layout

3. Pilih Edit HTML

4. Klik Expand Widget

5.Cari kode </head>

6. Letakkan kode berikut sebelum kode tadi:

Ganti lokasi url gambar yang berwarna merah dengan lokasi url gambar yang sudah Anda hosting.

7. Simpan perubahan

8. Selesai

Good Luck

Memasang Gambar Berada Di Pojok Halaman

Posted by Zuga Media Posted on 5:41 AM with 7 comments

Untuk memasang gambar untuk berada di pojok halaman pada blog. Anda harus menambahkan beberapa kode pada template blog Anda. Ingin tahu?bagaimana caranya.
Silahkan ikuti langkah-langkah berikut ini:

1. Login ke blogger.com

2. Klik menu Layout kemudian klik Edit Html

3. Cari kode ]]></b:skin> kemudian copy paste kode berikut tepat di atasnya

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Keterangan :

Bottom : adalah posisi gambar berada di bagian bawah, jika Anda ingin meletakannya pada bagian atas, Anda tinggal mengganti dengan top.
Left : adalah posisi gambar berada di kiri halaman blog, jika Anda ingin meletakannya di bagian kanan, Anda tinggal merubahnya dengan right.

4. Setelah selesai cari kode </body> kemudian copy paste kode berikut tepat di atasnya

Keterangan :

http://www.zugamedia.co.cc : adalah link blog. Ganti dengan link blog Anda.
http://s.mynicespace.com/myspacepic/120/th/12084.gif : adalah lokasi url gambar. Ganti dengan lokasi url gambar Anda.

5. Jika Anda ingin memasang sebuah widget. Anda tinggal mengganti kode yang berwarna merah di atas dengan script widget yang ingin Anda pasang.

6. Simpan hasil pengeditan

7. Selesai

Good luck

Memasang Fungsi Scroll Dengan Menambah Kode Html

Posted by Zuga Media Posted on 7:01 AM with No comments

Untuk memasang fungsi Scroll, Anda cukup menambahkan sedikit kode html pada isi halaman Anda.

Kode yang perlu tambah:

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

isi halaman

</div>

Contoh:
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

</div>

Hasilnya:

Keterangan :

overflow:auto; » kode ini dapat membuat scrolling jika isi halaman tersebut melampaui batas.

width:300px; »kode ini merupakan lebar bidang yang di inginkan, angka 300 menunjukan besar ukuran lebar 300 pixel, angka tersebut bisa Anda rubah sesuai dengan keinginan Anda.

height:200px; » kode ini merupakan tinggi bidang yang di inginkan, tinggi tersebut bisa Anda sesuaikan dengan keinginan Anda dengan merubah anka tersebut.

padding:10px; » kode ini merupakan pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, Anda bisa merubah angka tersebut sesuai dengan keinginan Anda.

border:1px solid #eee » kode tersebut agar bidang terlihat seperti kotak, jika Anda tidak menginginkan ada terlihat seperti kotak, Anda bisa menghapusnya.

Good luck

Cara Membuat Read More Pada Blogger

Posted by Zuga Media Posted on 5:15 AM with No comments

Untuk membuat menu Read more Anda harus menambahkan beberapa kode HTML ke dalam template blog Anda.
Sebuah artikel yang panjang akan banyak memakan tempat di halaman utama sebuah blog, sehingga artikel lain yg ditulis sebelumnya akan jarang dibaca. Jika Anda ingin postingan Anda yang ditampilkan dihalaman utama hanya abstraksinya saja kemudian ada sebuah link Read More yang akan menuju postingan Anda apabila link tersebut di klik.
Ikuti langkah-langkah berikut untuk membuat read more:

1. Login ke blogger.com
2. Klik menu Layout kemudian pilih Edit HTML
3. Klik pada kotak Expand Widget
4. Cari kode </head> copy paste kode di bawah ini tepat di atasnya

5. Kemudian cari kode <data:post.body/> copy paste kode di bawah ini tepat di bawahnya

<b:if cond='data:blog.pageType != "item"'>
<span style='font-weight:bold;'><a expr:href='data:post.url' target='_blank'>
<div style='float:right'><br>Read More...</br>
</div>
</a>
</span>
</b:if>

Anda bisa merubah :
Warna Ungu : berfungsi untuk membuka postingan Anda pada tab baru, bisa dihilangkan kalau Anda tidak menyukainya.
Warna Biru : berfungsi agar Readmore Anda rata ke kanan, Anda juga bisa menggantinya dengan right atau center
Warna Kuning : Tulisan Readmore yang bisa diganti sesuai keinginan Anda

6. Simpan hasil pengeditan
7. Kemudian pilih menu Setting lalu klik Formatting
8. Cari kode Post Template isikan kode berikut:

10.Untuk peletakan kode pada postingan Anda: batas postingan yang mau Anda potong <span class="fullpost"> sisa postingan Anda sampai habis </span>
11. Selesai

Good luck

Cara Memposting Kode HTML Pada Artikel

Posted by Zuga Media Posted on 9:04 AM with No comments

Untuk menampilkan kode HTML pada artikel, Anda harus mengubah kodenya dahulu. Ini karena kode HTML harus diterjemahkan dahulu sebelum melakukan posting. Misalnya kode < harus diganti dengan < dan kode < harus diganti dengan &lt;.

Ikuti langkah-langkah berikut ini untuk mengubah kode HTML menjadi kode yang dapat dibaca pada artikel:

1. Buka http://centricle.com/tools/html-entities

2. Masukkan kode HTML yang ingin Anda tampilkan pada artikel dalam kotak Centricle.
Misalnya kode <div id='outer-wrapper'>.

3. Klik Encode.
Maka kode tersebut akan berubah seperti gambar di bawah ini.

4. Copy kode perubahan kemudian paste pada artikel Anda
5. Selesai

Cara Merubah Blogspot Menjadi co.cc

Posted by Zuga Media Posted on 7:16 AM with 5 comments

Mengubah alamat blog yang masih menggunakan subdomain dari blogspot.com menjadi domainanda.co.cc caranya anda harus mendaftar terlebih dahulu ke situs co.cc
. Domain co.cc dapat digunakan untuk meringkas blog kita. Dengan nama yang lebih ringkas diharapkan para pengunjung akan lebih mudah mengingat nama domain kita apabila mereka ingin berkunjung kembali.
silahkan ikuti langkah-langkah berikut untuk merubah domain blog Anda :

Login dahulu ke co.cc
Silahkan daftarkan domain sesuai keinginan anda example: domainanda.co.cc
Masuk menu Domain setting, Manage Domain, dan klik Setup
Akan tampil tiga buah pilihan (radio button) yaitu Manage DNS, Zone Records dan URL Fowarding. Pilihlah pilihan kedua yaitu Zone Record untuk menghubungkan blogger dengan co.cc
Pada pilihan ini akan disediakan beberapa isian yang harus anda isi. Untuk Host, isikan dengan alamat domain anda di co.cc (harus memakai www example : www.domainanda.co.cc).
TTL : 1 D (tidak perlu dirubah)
Untuk kolom Value isikan "ghs.google.com"
Kemudian klik Set up

Kemudian lanjutkan ke setting blogspot pada account “Blogger.com” Anda :

Login ke blogger.com
Masuk menu Setting atau Pengaturan kemudian klik menu Publishing
Klik link yang bertuliskan "Beralih ke pengaturan lanjut"atau "Switch to: • Custom Domain" untuk pengaturan lebih lanjut.
Klik “Already own a domain? Switch to advanced settings”
Kemudian isikan nama domain Anda yang baru pada kolom "Your Domain" (example : www.domainanda.co.cc).
Pilih "Tidak" pada pilihan "Gunakan host file yang hilang?"atau "Use a missing files host?" Kemudian masukkan Verifikasi Kata.
Klik "Simpan Setelan" atau "Save Setting".
Selesai

Jika anda baru mendaftar di domain co.cc, maka akan dibutuhkan waktu paling lama 48 jam agar domain bisa aktif (tetapi kadangkala domain Anda sudah aktif kurang dari 1jam).
Dalam memasukan alamat situs, Anda harus memakai awalan www.

Good luck

Menambah Emoticon Di Guestbook "SHOUTMIX"

Posted by Zuga Media Posted on 8:12 AM with 1 comment

Emoticons emang paling seru kalau dibahas. Dengan berbagi jenis emoticons yang menarik akan menambah pengunjung kita semakin tertarik dalam mengomentari, atau istilahnya memberi masukan dalam guestbook "shoutmix" di blog kita.
Mungkin diantara kalian ada yang bosan dengan tampilan smileys "shoutmix" yang cuma begitu saja, maka disini saya akan memberikan cara termudah untuk menambah atau menyisipkan emoticons baru yang kita inginkan di shoutmix.
Ingin tahu cara memasukan emoticons baru ke guest book "shoutmix" silahkan ikuti langkah-langkah berikut :

Silahkan login di account Shoutmix anda.
Pada menu display, klik smileys
Jika sudah masukan alamat emoticon baru di bawah Smiley image URL
Setelah itu klik tombol "add".
Masukan kembali alamat gambar smiley yang lain apabila anda masih ingin menambah smiley lagi, jangan lupa untuk klik kembali tombol Add nya.
Klik save settings.
Selesai, smiley baru telah di tambahkan di guest book Anda.

Anda bisa mendapatkan url smiley dari alamat berikut :

Matcuoi

Laymark

Good luck

Terpopuler