TV Online

 

Warung Bebas TV Streaming

123 Page Number Navigation for Blogger

Baru beberapa hari lalu saya menemukan artikel yang benar-benar saya cari. Adalah bagaimana cara membuat halaman berurut 123 /page 123 navigation untuk blog di blogger/blogspot.

Kode membuat halaman 123 di blogspot ini,saya dapat dari hasil karya besar Bp.Wijaya di ariawijaya.com

Anda bisa mengunjungi website dan tutorial 123 page navigation ini di situsnya langsung dalam tutorialnya 'Membuat Navigasi Page Number Blogspot', atau anda bisa langsung klik disini.

Untuk hasilnya akan seperti gambar di bawah ini:

Sedangkan contoh hasil kode navigasi berurut ini, anda bisa lihat di sini.
Bagaimana? Ingin membuatnya?

Biar pelajaran blog menjabarkan kembali cara membuat halaman 123 berurut ini.

Langkah Cara Membuat Page Navigasi Angka / Number 123dst pada Blog.

Pertama, pergilah ke dashboard blogger anda, selanjutnya, pilih tata letak, dan pilih Edit HTML.
Seperti biasa, contreng option Expand widget templates, selanjutnya cari kode berikut:

]]></b:skin>

Setelah ketemu,letakkan persis di atasnya kode css di bawah ini:

.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; }

Lalu,cari lagi kode seperti ini: </body> Jika sudah ketemu, tepat di atasnya letakkan script di bawah ini:



<b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if>

Langkah terakhir, carilah kode berikut (copi semua dengan tanda petik):

'data:label.url'

Jika sudah ketemu, hapus kode tersebut dan gantilah kode berikut (copi semua dengan tanda petik):

'data:label.url + &quot;?&amp;max-results=5&quot;'

Sekarang, simpan templates anda, dan anda bisa lihat hasilnya sekarang

Sumber: http://www.abu-farhan.com 

Cara Membuat Read More Otomatis di Blog

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?
Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.
Langkah-langkah cara membuat Read More Otomatis di Blogspot

• Login ke Blog anda
• Buka halaman design > Edit HTML > centang Expand template widget
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

<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://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian). Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.

Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah 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'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

•  Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. berikut ini adalah keterangannya data yang bisa dirubah :

1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

Sumber: http://www.bamz.us

Uchiha Obito Blogger Template Seo Friendly

Uchiha Obito Blogger Template Seo Friendly / Akatsuki Obito - Sobat penggemar berat serial anime naruto??? nah kali ini berhubung ada kesempatan, ane akan kasih template keren yang saya beri nama Obito Uchiha Template Seo Friendly. Template ini sengaja saya buat karena penasanrannya saya akan kemisteriusan karakter tokoh obito dalam serial naruto.

Template ini bisa di bilang adalah salah satu template kebanggan saya, di dalamnya telah di pasang navigasi breadcrumb, readmore otomatis, related post dan lain - lain. Background di template ini di ambil dari profilebrand.

Berikut screenshot templatenya.

sobat yang tertarik dengan Template Uchiha Obito ini silahkan di download..

DEMO / DOWNLOAD

Cara Bikin Template Blog Sendiri Bagian 3

Postingan kali ini adalah kelanjutan dari postingan sebelumnya tentang cara bikin template blog sendiri bagian 2. Kali ini kita akan memfokuskan pembahasan pada komponen lain di header. Silahkan simak tutorial berikut.

hasil template pada tutorial sebelumnya.

Kira kira seperti ini kode header secara keseluruhan.

#header-wrapper{

width:900px;

margin-bottom:10px;

border:1px solid #000000;}

#header-inner {

  background-position: center;

  margin-left: auto;

  margin-right: auto;

}

#header {

  margin: 5px;

  border: 1px solid $bordercolor;

  text-align: center; ( judul blog berada di tengah, ubah kekiri dengan menggunakan kode left )

  color:$pagetitlecolor; ( untuk mengubah warna dari judul blog, ubah dengan warna yang di sukai )

}

#header h1 {

  margin:5px 5px 0;

  padding:15px 20px .25em;

  line-height:1.2em;

  text-transform:uppercase;

  letter-spacing:.2em;

  font: $pagetitlefont; ( jenis font dari judul blog )

}

#header a {

  color:$pagetitlecolor;

  text-decoration:none;

  }

#header a:hover {

  color:$pagetitlecolor; ( efek judul blog ketika di lewati pointer )

  }

#header .description {

  margin:0 5px 5px;

  padding:0 20px 15px;

  max-width:700px;

  text-transform:uppercase;

  letter-spacing:.2em;

  line-height: 1.4em;

  font: $descriptionfont; ( jenis font dari deskripsi blog )

  color: $descriptioncolor; ( warna dari deskripsi blog )

 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

• kode berwarna biru adalah kode yang biasa di edit untuk membagi 2 kolom header serta memodifikasi konten di dalam header secara keseluruhan.
• kode berwarna ungu adalah kode untuk judul blog.
• kode berwarna merah adalah kode untuk deskripsi blog
• kode berwarna hijau adalah kode untuk efek hover pada judul blog
• kode bercetak tebal digunakan untuk mengatur tampilan image atau gambar dalam header.

ganti kode di atas dengan kode berikut.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 10px;
  border: 0px solid $bordercolor;
  text-align: left;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
font-size:16px;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

hasilnya akan seperti ini

Setelah membahas tentang header, sekarang kita masuk di Heading.

Seperti yang saya jelaskan pada cara bikin template blog bagian 1, bahwa heading adalah untuk mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.
berikut kodenya

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

ubah dengan kode berikut

h2{
margin:1.5em 0 .75em;
font:$headerfont;
line-height:1.4em;
border-bottom:1px solid $bordercolor;
text-transform:uppercase;
font-size:17px;
letter-spacing:.2em;
color:#000}

 kode bercetak tebal adalah kode yang di tambahkan.


berikut tempilannya...

Pada gambar di atas sobat sobat melihat beberapa konten di postingan dan di sidebar berada dalam satu kotak, kita akan mencoba membuat area postingan secara terpisah - pisah dengan mengedit kode berikut.

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

ganti dengan kode berikut

.post {
margin-right:px;
margin-bottom:10px;
color:#000;
background:#ffffff;
line-height:20px;
border:1px solid #222;
padding:5px;
}
.post h1{
margin:5px;
padding-right:10px;
 font-size:20px;
border-bottom:1px solid #000000;
font-weight:normal;
line-height:1.4em;
color:$titlecolor}

selesai dengan itu sekarang kita ke sidebar...

buat sidebar dalam kotak - kotak terpisah dengan mengedit kode berikut.

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

ganti dengan kode berikut

.main .widget{
border:0px solid $bordercolor;
background:#FFF;
padding:0 0 0em}

.sidebar .widget {
margin-bottom:10px;
color:#000;
background:#ffffff;
border:1px solid #222;
padding:3px 10px 10px 10px;
}

dengan kode di atas, tampilan template nya akan jadi seperti ini..

tunggu kelanjutannya di cara bikin template bagian 4..

Membuat Gambar Batman Berjalan Di Pinggir Blog

(Batman lagi jalan-jalan)

Penambahan gambar-gambar bergerak di blok akan menambah tampilan blog menjadi lebih indah dilihat, dan bisa menjadi ciri khas blog itu sendiri. Akan tetapi jangan terlalu banyak juga ya, yang ada pengunjung blog jadi ribet melihat tampilannya, dan juga penempatan gambar harus sesuai. 

Untuk membuat gambar Batman berjalan kita hanya perlu menambahkan alamat url gambar tesebut. Mungkin trik ini usang atau tidak berguna bagi para master dan para webmaster, tapi apa salahnya bagi pemula seperti saya yang awam ini, mungkin bagi sahabat bloger yang pengen tau caranya kita ikuti langkah - langkahnya  seperti dibawah ini:

Disini kita nggak perlu upload gambar lagi kok,,

1. Login ke blogger dengan ID anda 

2. Klik tata letak

3. Klik tambah gadget

4. Pilih HTML/Javascript 

5. Masukan kode dibawah ini:

 <div style="position: fixed; bottom: 25px; left: 20px;width:120px;height:135px;"><a href="http://zuazz.blogspot.com" title=""><img src="http://batman-project.googlecode.com/files/zuazz.gif.gif"/></a><small><center><a href="http://zuazz.blogspot.com" target="_blank"><span style="font-weight:bold;color:#00000;"> den zuaz </span></a></center></small></div>

Untuk kolom judul kosongin aja ya, dan untuk menentukan di sebelah mana gambar ditempatkan silahkan ganti kode berwarna merah (left / right).ganti kode berwarna biru dengan url anda sendiri atau dibiarkan saja juga tidak apa-apa kok.

6. Klik simpan dan lihat hasilnya.

Selamat mencoba...

Sumber: http://zuazz.blogspot.com

Background Sambaran Petir Di Blog

Bagi para pemula blogger contohnya seperti saya pasti banyak yang menginginkan background blognya di ganti dengan foto sendiri atau gambar yang mereka inginkan sendiri. Kali ini saya akan menulis artikel tentang 'Membuat Background Kilat Di Blog'.

Ikuti langkah berikut untuk membuat background blog :

1. login ke bloger dengan id anda

2. Lalu menuju ke 'design' -> edit HTML

3. Centang Expand Template Widget

3. Cari kode  body {

4. Tambahkan kode berikut di bawah kode ' body { ' 

background:#000000 url(http://petir-project.googlecode.com
/files/petir.gif) no-repeat center fixed; 

• Kode ungu = Kode warna di belakang background 
• Kode Biru  = Link/url background kilat / url background lain yang ingin dipasang 
• Kode merah = Jika inginkan gambar berulang-ulang hilangkan saja

5. Lalu 'Save Template' dan lihat hasilnya.

Semoga bermanfaat ya,,,!!!

Sumber:http://zuazz.blogspot.com

Tulisan Berjalan Di Buku Tamu CBOX

Sedikit berbagi pengalaman pribadi lagi nih sob,, heheheheee,,,

pada saat melihat teman-teman blogger menulis di biku tamu CBOX saya kok bisa bergerak-gerak,, sedikit rasa penasaran dan mencoba dengan kode HTML,, tapi ternyata salah,, hehehe,, jadi malu nih sob,, maklumlah masih pemula,, dan akhirnya saya cari di mbah google dan akhinya ketemu juga nih,, setelah saya coba ternyata berhasil juga,, belajar dari kesalahan memang sangat bermanfaat walaupun agak malu juga ya sob,,

Nah bagi sobat yang belum tahu bagaimana caranya biar tidak salah kayak saya disini saya berbagi sedikit ilmu. Diantaranya membuat tulisan berjalan, Berwarna, bergaris bawah, tebal dan lain sebagainya.

Nah langsung saja kita bahas, untuk membuat tulisan pada CBOX lebih terlihat menarik silahkan ikuti langkah langkah berikut :

1. Membuat Teks Berjalan di CBOX
   Apit kata-kata yang ingin dibuat berjalan dengan [scroll] dan [/scroll]
   Contoh: [scroll] Salam kenal [/scroll] hasilnya

Salam kenal

2. Membuat Teks Berukuran Besar
   Apit kata-kata yang ingin dicetak besar dengan [big] dan [/big]
   Contoh: [big] Salam kenal [/big] hasilnya adalah Salam kenal

3. Membuat Teks Miring
   Apit kata-kata yang ingin dicetak miring dengan [i] dan [/i]
   Contoh: [i] Salam kenal [/i] hasilnya Salam kenal

4. Membuat Teks Tebal
   Apit kata-kata yang ingin dicetak tebal dengan [b] dan [/b]
   Contoh: [b] Salam kenal [/b] hasilnya adalah Salam kenal

5. Membuat Teks Bergaris Bawah
   Apit kata-kata yang ingin digaris bawah dengan [u] dan [/u]
   Contoh: [u ]Salam kenal [/u] hasilnya adalah Salam kenal

6. Membuat Teks Bergaris Tengah
   Apit kata-kata yang ingin di garis tengah atau dicoret dengan [s] dan [/s]
   Contoh: [s] Salam kenal [/s] hasilnya adalah Salam kenal

7. Membuat Tulisan Berukuran Kecil
   Apit kata-kata yang ingin dicetak kecil dengan [small] dan [/small]
   Contoh: [small] Salam kenal [/small] dan hasilnya adalah Salam kenal

8. Cara Membuat Tulisan Rata Tengah (Center)
   Apit kata-kata yang ingin dibuat rata tengah dengan [center] dan [/center]
   Contoh: [center] Salam kenal [/center]

9. Membuat Tulisan Berwarna
   Apit kata-kata yang ingin diberi warna dengan [color=warna] dan [/color]
   Contoh: [color=red] Salam kenal [/color]  maka hasilnya adalah Salam kenal

10. Cara Membuat Teks yang Ber Link
   Apit kata-kata yang ingin diberi link dengan [url=alamaURL] dan [/url]
   Contoh: [url=http://zuazz.blogspot.com/] Zuaz'Z [/url] maka hasilnya adalah Zuaz'Z

Selamat mencoba ya sob,,

Sumber: http://www.thob.org

Emoticon Gundam

Nah di sini saya hanya sedikit share hasil karya dari sobat blogger CHRISTIANTATELU yaitu Emoticon Gundam Keren, barang kali di antara teman-teman yang lain ingin mendapatkan emoticon keren ini.

  :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: 

Cara Memasang Emoticon Gundam di Kotak Komentar Blog

Mungkin sobat sudah sering membaca judul yang mirip dengan judul dalam postingan ini, karena apa?? di blog ini hampir semua emoticon sudah saya posting, mulai dari emoticon skype, emoticon kaskus, emoticon onion, emoticon emo girl dan emo boy dan saat ini kita membahas cara memasang emoticon gundam di komentar blogger.

Silahkan ikuti tutorial berikut jika sobat tertarik membuat emoticon gundam di komentar blog.

Emoticon Gundam di atas Kotak Komentar Blog

1. Log in ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak Expand template widget.
3. Letakkan kode berikut di atas kode </body>

<script src='http://tateluproject.googlecode.com/files/Gundam%20emoticon.js'/>
4. Cari kode merah seperti di bawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Bila sudah ketemu letakkan kode emoticon gundam di bawah ini tepat di bawah kode <p class='comment-footer'>

<center><b><img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/14-1.gif' width='50'/> :b: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/13-1.gif' width='50'/> :c: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/12-1.gif' width='50'/> :d: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/11-1.gif' width='50'/> :e: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/10-1.gif' width='50'/> :f: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/9-1.gif' width='50'/> :g: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/8-1.gif' width='50'/> :h: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/7-1.gif' width='50'/> :i: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/6-1.gif' width='50'/> :j: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/5-1.gif' width='50'/> :k: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/4-1.gif' width='50'/> :l: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/3-1.gif' width='50'/> :m: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/2-1.gif' width='50'/> :n: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/1-1.gif' width='50'/> :o: <img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/15-1.gif' width='50'/> :p: </b></center>
5. Klik save dan lihat hasilnya...

Sumber: http://christiantatelu.blogspot.com