Powered By Blogger
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Selasa, 26 Juli 2011

Membuat Read More

Membuat readmore atau menyingkat tulisan di blog, maksudnya memberikan tanda “Read More…” Atau “Baca Selengkapnya…” atau cukup “Selengkapnya…” di bawah tulisan kita yang dipersingkat. Agar tulisan yang panjang tidak seluruhnya tampil biar tidak memakan tempat.
To the point saja, di bawah ini merupakan langkah-langkah cara menyingkat tulisan atau memasang readmore di Blogger baru (layout template):
  • Klik layout -> template -> edit HTML. Lalu beri tanda ceklis pada “Expand Widget Templates”.
  • Karena masing-masing struktur template berbeda maka pada kotak Edit Template cari salah satu kode berikut:
<div class='post-header-line-1'/>
atau <div class='post-header-line'>
atau <div class='post-body entry-content'>
Untuk mencari kode tersebut, jika Anda menggunakan browser firefox cara mencarinya cukup mudah tinggal copy salah satu kode yang akan dicari tersebut, tekan CTRL + F di tempat pencarian (di edit html blog Anda) lalu paste kode yang akan dicari di area Find: yang akan muncul setelah menekan CTRL + F dan otomatis kode yang Anda cari jika sesuai akan langsung ditemukan. Jika belum menggunakan firefox silahkan download dulu disini.
  • Kalau sudah ketemu; Tahap pertama (ada dua tahap) kita copy-paste kode berikut,
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>

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

<b:else/>

<style>.fullpost{display:none;}</style>
Paste dibawah salah satu kode berikut yang ada pada template blog Anda,
<div class='post-header-line-1'/>
atau <div class='post-header-line'>
atau <div class='post-body entry-content'>
  • Tahap kedua, copy kode berikut,
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>

</b:if>

</b:if>
Paste dibawah kode <p><data:post.body/></p>
  • Kalo petunjuk di atas sudah dilakukan, maka hasilnya akan seperti ini: (perhatikan warna biru sebagai kode tambahan)
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>

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

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read moreĆ¢�¦</a>

</b:if>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
  • Jika sudah klik SAVE TEMPLATE.
  • Dari menu TEMPLATE kita pindah menu; klik Settings (Pengaturan) >Formatting (Format). Dibagian bawah ada tulisan Post Template (Template Posting), isi kotak dipinggirnya dengan kode berikut:
<span class="fullpost">
</span>
Klik SAVE (Simpan Pengaturan).
  • Terakhir, setiap akan mempublish postingan, klik Edit HTML dan sisipkan kode tersebut diantara postingan yang akan ditampilkan dan disembunyikan. Contoh,
  • Ini merupakan paragraf pertama isi postingan Anda. <span class="fullpost"> dan ini merupakan paragraf selanjutnya postingan Anda yang tidak akan terlihat kecuali link read more di klik oleh pengunjung blog Anda.</span>
  • Kode </span> tersebut disimpan paling akhir tulisan (postingan) Anda!.

Cara Memasang Profil Facebook di Blog

Facebook adalah dunia pertemanan yang sangat luas. siapa yang tidak kenal dengan web yang satu ini. tak kalah menariknya facebook menyediakan widget khusus buat blogger. penyediaan dari widget itu adalah bertujuan untuk memperluas jaringan dunia facebook. banyak yang berpendapat dengan adanya widget ini sangat membantu. selain profile nya yang menarik dan memudah kita untuk mencari teman. Nah untuk menambah widget ini di blog anda ikuti langkah-langkah di bawah ini.

* Log in ke facebook anda
* kemudian klik menu profile
* Lihat bagian kiri bawah klik tulisan buat lencana profile
* kemudian anda bisa meng edit dengan mengklik sunting lencana ini
* disana terdapat beberapa pilihan di tata letak
tegak
mendatar
dua kolom pilih salah satunya
* kemudian di kolom isi
Foto profil
Nama
Jaringan dan seterusnya..........
pilih status yang ingin anda tampilkan
* Kemudian simpan
* setelah itu di sana terdapat beberapa pilihan untuk menambah lencana tadi ke berbagai situs di antaranya
Blogger
Typepad
other
* Pilih salah satu dengan mengkliknya. misalkan blogger.
* Setelah anda mengklik, anda akan di bawa ke blogger untuk menambah widget itu tadi. seharusnya anda login terlebih dahulu.
* Kemudian simpan dan lihat hasilnya..

Selamat mencoba.

Senin, 25 Juli 2011

Menambahkan TV Online pada Blog


Mau lihat TV sekarang tidak sulit lagi. Sudah banyak stasius televisi yang membuat TVnya menjadi streaming yang bisa dinikmati secara online. Sehingga jangkauannya akan semakin luas.Dengan internet orang dibelahan negara lain bisa menikmati acara-acara TV Indonesia. Mau menambahkan TV online di blog kita? Siapa tahu akan membuat pengunjung bisa menikmati siaran TV-TV yang sudah streaming. Mungkin dengan menambahkan TV Online ini akan membuat blog kita semakin berat. Jadi perhitungkan kembali. Juga koneksi internet yang ada di Indonesia masih terkenal sangat lambat, siarannya pun tak bisa dinikmati secara nyaman. Tapi jika koneksi internet kita cepat sekali bisa jadi kita bisa menikmati TV onlinedengan enak.Cara Menambahkan TV Online Pada Blog
1. 
Login ke blogger
2. Pilih
 Rancangan kemudian Tambah Gadget
3. Pilih 
HTML/JavaScript
4. Masukan kode script berikut ini:
<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><style>#wb_fs_tvinternetplayers{display:none;visibility:hidden;}</style><a id="wb_fs_tvinternetplayers" href="http://www.warungbebas.com/2010/12/nonton-banyak-channel-tv-online.html">TV Streaming Indonesia</a><script type="text/javascript" src="http://dns.warungbebas.com/4you/wb_fs_scriptwidget.js"></script><script type="text/javascript">wbwidget('loadtvcodeinternetplayers','calltvcodeonlineindonesia',4,2,10)</script><script type="text/javascript">fsCallListTVOnline(255,200,35,1);</script>
5. Simpan jika sudah selesai.
Kita dapat mengganti ukuran TV online yang kita tambahkan, yaitu dengan mengubah (255,200,35,0). 255 adalah lebarnya, 200 adalah tingginya 35 adalah ukuran logo TV. 

Membuat Efek Hujan Salju Pada Blog

Kali ini saya akan menerangkan bagaimana cara membuat efek hujan salju pada blog anda agar terlihat lebih menarik
Cara Membuat Hujan Salju di Blog 
1. Login ke Blog anda.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh (copy paste) kode berikut ini diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://nirav07.110mb.com/jsnow.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>
6. Simpan Template jika sudah selesai 

Membuat Menu Navigasi Horisontal di Blogspot dengan css menu

Selain menggunakan menu horisontal bercabang (drop down menu) , kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css .

Untuk membuatnya bisa lakukan posedur berikut:
1. Login ke akun blogger
Pilih Dashboard - Tata letak - Edit HTML

cari kode berikut:
]]></b:skin>
2. Di bagian atas kode tersebut masukkan kode berikut
#menu {
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background: #333 url("http://i47.tinypic.com/n1bj0j.jpg") bottom right no-repeat;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #2580a2 url("http://i49.tinypic.com/2vjbz4g.jpg") bottom center no-repeat;
color: #fff;
padding-bottom: 8px;
3.  Klik tombol "Simpan Template"
4. Buka halaman "Tata Letak -> Elemen Halaman"
5. Pada Elemen header , klik " Tambah Gadget"

Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header
6. Pilih gadget html/javascript
masukkan script berikut :
<ul id="menu">
<li><a href="#">Clothes</a></li>
<li><a href="#">Dress for man</a></li>
<li><a href="#">Women's clothes</a></li>
<li><a href="#">Summer dress</a></li>
<li><a href="#">Artikel Komputer</a></li>
</ul>
Catatan:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.
Teks Clothes , Dress for man, Women's clothes ... diganti dengan teks yang akan ditampilkan di menu
Agar script bisa berfungsi dengan baik, maka sebaiknya dicopy ke notepad atau word pad kemdian diedit sesuai kebutuhan blog anda.