Nirvana Official Site: Tips dan Trik Blogging

Tampilkan postingan dengan label Tips dan Trik Blogging. Tampilkan semua postingan

Rabu, 13 April 2011

Cara membuat Readmore otomatis

Diposting oleh Admin [Hnd324] di 15.34 | Rabu, 13 April 2011 | 1 komentar

Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

KEDUA, cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template

Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

Membuat headline news pada blog

Diposting oleh Admin [Hnd324] di 15.21 | | 0 komentar

Label: Tips dan Trik Blogging

Jika anda ingin membuat tampilan blog anda lebih menarik dengan headlines judul-judul artikel blog anda pada saat yang sama membantu anda untuk menampilkan artikel-artikel anda supaya menarik perhatian pengunjung blog anda untuk membaca artikel-artikel anda, berarti anda patut untuk mencoba widget Healine News di blog anda. Caranya sangat mudah.

Caranya seperti berikut:

1. Login ke blogger
2. Klik Tata Letak
3. Tambahkan gadget anda dan pilih HTML javascript
4. Copas kode berikut ini dan paste anda gadget anda

<script type="text/javascript">
var hn_url_blog = "http://BLOGKAMU.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#EEEEEE";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://zykry.googlecode.com/files/headline-news.js">
</script>

Keterangan:
Ganti kode yang ber warna merah dengan url blog kamu
var hn_url_blog = URL blog
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan
var hn_warna_latar = warna latar belakang headline news
var hn_warna_garis = garis border headline news
var hn_posisi = posisi headline news
var hn_backlink = bila ingin backlink ditampilkan

Cara membuat judul posting berjalan

Diposting oleh Admin [Hnd324] di 09.54 | | 0 komentar

Label: Tips dan Trik Blogging

Oke langsung aja kita mulai penjelasannya :

1. Login ke Dashboard Blogger Anda
2. Klik Layout - Edit HTML. Untuk berjaga-jaga sebaiknya backup dulu template Anda, lalu klik pada Expand widget templates dan carilah kode dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

3. Kemudian pasang kode marquee sehingga kode lengkap hasil perubahan akan seperti dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3> </marquee>
</b:if>

4. Teks yang berwarna merah adalah kode yang harus Anda tambahkan. Anda dapat merubah arah dengan mengganti kode left menjadi right. Klik tombol Preview untuk melihat hasilnya, jika Anda sudah cukup puas silahkan di simpan pekerjaan Anda.

Selamat mencoba..

Cara membuat efek koran pada posting blog

Diposting oleh Admin [Hnd324] di 09.37 | | 0 komentar

Label: Tips dan Trik Blogging

Untuk membuat huruf awal di cetak lebih besar atau tulisan bergaya koran, maka Anda perlu membubuhkan kode css ke dalam style sheet nya. Karena template blogger masih terbagi dua yaitu klasik dan baru, maka untuk cara penempatan kode pun ada sedikit berbeda. Untuk itu silahkan ikuti langkah-langkah berikut ini !

Untuk Template Klasik
1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4.Copy seluruh kode template, lalu paste pada notepad kemudian save. Ini untuk berjaga-jaga apabila terjadi kesalahan melakukan editting
5.Copy paste kode berikut di antara kode <style type='text/css'> dan kode </style> dan kalau Anda merasa bingung, maka tempatkan saja di atas kode </style>

/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
6. Klik tombol Simpan Perubahan Template
7. Selesai

Untuk Template Baru
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4.Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
5.Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau jika bingung simpan saja persis di atas kode ]]></b:skin>

/* kode untuk huruf awal----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
6. Klik Tombol Simpan Template
7. Selesai.

Langkah-langkah di atas merupakan langkah pertama, langkah selanjutnya yang harus Anda lakukan adalah ketika melakukan posting harus pada posisi Edit HTML bukan pada Compose.

Simpanlah huruf awal artikel pada kode berikut <span class="awal"> huruf awal </span>. Setelah itu terserah sobat, mau tetap pada posisi Edit HTML atau berpindah ke mode Compose tidak ada masalah.

Berikut adalah ulasannya agar Anda lebih paham

/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

.awal --> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.

float:left; --> ini adalah kode agar tulisan awal di letakkan pada posisi kiri alias mepet ke kiri, jangan di ubah kalau yang ini.

color: #000000; --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika Anda ingin warna yang lain maka silahkan saja di ganti.

background:#ffffff; --> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika Anda ingin warna yang lain silahkan di ganti sesuai keinginan.

line-height:80px; --> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.

padding-top:1px; --> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya, sebaiknya jangan di ganti.

padding-right:5px; --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 5 pixel, jika Anda berniat mengganti jaraknya, silahkan ganti nilainya saja.

font-family:times; --> ini adalah kode jenis huruf, yang di pakai adalah jenis times, jika tidak suka dengan times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.

font-size:100px; --> ini adalah kode untuk besarnya huruf, jika mau di ganti silahkan ganti nilainya saja.

Nah, gimana? Bisa ga?
Oke, selamat mencoba ya….

Cara membuat efek teks marquee pada address bar

Diposting oleh Admin [Hnd324] di 09.20 | | 0 komentar

Label: Tips dan Trik Blogging

Sebenarnya untuk membuat teks berjalan (marquee) di addressbar ini hanya dibutuhkan script yang nantinya akan kita pasang di head template kita.

Scriptnya seperti di bawah ini :

<SCRIPT language='JavaScript'>
var txt="..::Nama blog kamu di sini::... ";
var kecepatan=170;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</SCRIPT>

Caranya, ganti nama blog pada script di atas dengan nama blog kamu.
Untuk cara pemasangan script di blog, seperti biasanya silahkan login dulu ke blogger. Setelah itu pilih tata letak halaman, lalu pilih edit template. Kemudian cari kode </head> dan letakkan script tadi di atas kode </head> tersebut. Jika sudah silahkan simpan template kamu dan silahkan lihat hasilnya.

Mudahkan. Semoga postingan ini berguna bagi kamu semua. Selamat mencoba dan sampai jumpa.

Selasa, 12 April 2011

Membuat tab view

Diposting oleh Admin [Hnd324] di 15.17 | Selasa, 12 April 2011 | 0 komentar

Label: Tips dan Trik Blogging

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]</b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]</b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Klik Simpan

Mengganti Icon blog

Diposting oleh Admin [Hnd324] di 14.57 | | 0 komentar

Label: Tips dan Trik Blogging

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" , kemudian kita cari kode seperti di bawah ini :

<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

Kemudian sisipkan kode di bawah ini diantara kode di atas,seperti ini :

<title><data:blog.pageTitle/></title>
<link href='http://www.indowebster.web.id/customavatars/avatar125520_20.gif' rel='shortcut icon'/>
<b:skin><![CDATA[/*

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.