Auto Read More Dengan Thumbnail No Image Di Blogger

Jumat

| 0 komentar


1. Masuk ke Account Blog sobat
2. Lalu Go to Template --> EDIT HTML
3. Kemudian Cari Kode </head>, Tekan CTRL + F untuk mempermudah Pencarian
4. Copy kode di bawah ini sebelum kode </head>

<script type='text/javascript'>
 // ganti angka dibawah untuk mengatur jumlah karakter
 summary_noimg = 350;
 summary_img = 280;

 // ganti angka dibawah untuk merubah ukuran thumbnail
 img_thumb_height = 200;
 img_thumb_width = 200;

 // ganti dengan gambar sesuai selera anda
 img_thumb_nosrc = "http://3.bp.blogspot.com/-TSC-t4b1XvQ/UHWqOo4keDI/AAAAAAAAATo/DgshIsz1IBs/s1600/default.png";
</script>

<script type='text/javascript'>
 //<![CDATA[

 function removeHtmlTag(strx,chop){
  if(strx.indexOf("<")!=-1)
  {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
     s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
   }
   strx =  s.join("");
  }
  chop = (chop < strx.length-1) ? chop : strx.length-2;
  while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
  strx = strx.substring(0,chop-1);
  return strx+'...';
 }

 function createSummaryAndThumb(pID){
  var div = document.getElementById(pID);
  var imgtag = "";
  var img = div.getElementsByTagName("img");
  var summ = summary_noimg;

  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   summ = summary_noimg;
  }

  if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
  }

  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  div.innerHTML = summary;
 }

 //]]>
</script>

5. Klik Simpan Template

Dan lihat hasilnya...
semoga bermanfaat untuk Sobat...

Floating Facebook LikeBox For Blogs

Minggu

| 0 komentar
Hari gini biigin widget  rame-rame gag level kali. Nah sekarang saya  mau bagi ilmu buat temen-temen yang belum tau maupun yang sudah tau, ali aja dah lupa hehehe. . . .
Gag pake basa basi langsung aja ikutin tutorial dibawah ini

.
LANGKAH 1 :

  1. Login ke Blogger >> Layout
  2. Add a Gadget >> HTML/JavaScript 
  3. Paste Script di bawah ini
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FProBloggertrick&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>
Catatan : - Kode warna Kuning adalah posisi gadget, anda dapat mengubahnya sesuai keinginan.
               - Kode warna Merah adalah alamat halaman blogdan anda ganti dengan alamat halaman
                  anda.

LANGKAH 2 :

  1. Tetap di Blogger >> Template
  2. Kemudian klik Edit HTML
  3. Cari kode </head> dan paste script dibawah ini tepat diatas/sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

TERIMA KASIH SUDAH BERKUNJUNG

Membuat Auto Read More Di Blogger

Jumat

| 0 komentar
Pertama-tama login dulu di akun blogger anda. Lalu backup template, agar jika nanti terjadi apa-apa dengan tampilan blog, anda tidak menuntut saya hahaha. (lihat Disini untuk cara backup template)

Setelah itu masuk menu Template >>> Edit HTML, lalu centang Expand Template Widget (sorot gambar biar jelas)


  




Lalu cari kode </head> (untuk memudahkan tekan Ctrl + F), setelah itu masukkan kode berikut tepat diatas kode </head>.

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 430;
summary_img = 430;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script src='http://bengkelozz.googlecode.com/files/Readmoressip.js' type='text/javascript'/>

Yes = jika ingin tampilan readmore ada preview gambar postingan anda.no = jika tampilan readmore hanya berisi penggalan kata saja.
summary_noimg : jumlah karakter di tampilan readmore bergambar (ganti sesuka anda)
summary_img = jumlah karakter  di tampilan readmore tanpa gambar (ganti sesuka anda)
img_thumb_height = tinggi preview gambar di tampilan readmore (ganti sesuka anda)
img_thumb_width = lebar preview gambar di tampilan readmore (ganti sesuka anda)


Kalau sudah selesai sekarang anda cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode dibawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>

Nah, tulisan read more itu bisa anda ganti dengan kalimat lain misal baca lagi, woco maneh, ngopi disik, atau terserah deh hehe. Atau anda juga bisa menggantinya dengan gambar. caranya ganti tulisan Read More itu dengan kode berikut.

 <img src=' URL gambar Read More blog anda'/>

Coba klik pratinjau, lalu klik Simpan jika tampilan readmore sudah muncul di blog anda. Mudah bukan?

 Note : usahakan menaruh gambar minimal satu saja di tiap postingan, agar readmore bergambar nampak seragam di blog anda.. Semoga bermanfaat dulur ! .kenburns img.zoom { transform: scale(2) rotate(0.1deg); }

PASANG LINK BLOG ANDA DI FERDI DIRGANTARA...MAU....???

Minggu

| 0 komentar

Dilatar belakangi keinginan untuk lebih memepererat silaturahmi diantara sesama peblogger. Ferdi Dirgantara menyediakan ruang khusus untuk para peblogger memasang link blog masing-masing dibawah postingan ini.
Jika anda berminat untuk turut serta dalam program ini, silahkan anda mengisi ruang komentar postingan ini dengan mencantumkan :
  1. Nama/Title Blog anda.
  2. Alamat / URL blog anda.
Setelah anda mengisi komentar yang dilengkapi dengan nama dan URL blog anda, maka admin Ferdi Dirgantara akan memasukan data blog anda pada kolom "BLOG SAHABAT atau Di Widget BLOG SAHABAT" sebagai koleksi terbaru link blog sahabat dan diletakan diatas link yang telah terpasang sebelumnya.
Dengan adanya program ini diharapkan persahabatan diatara sesama peblogger semakin baik.
Anda juga disarankan untuk membuat program seperti ini sebagai lambang persahabatan sesama peblogger.

Sebagai timbal balik, silahkan anda pasang link Ferdi Dirgantara pada blog anda:
Silahkan Copy-Paste kode dibawah ini :

Silakan Copy Script Berikut

Admin Ferdi Dirgantara akan mengunjungi blog anda untuk memastikan bahwa link Ferdi Dirgantara telah terpasang pada blog anda.
Jika anda tidak memasang link Ferdi Dirgantara pada blog anda,maka akan berlaku sama untuk link blog anda (tidak anak dipasang pada blog Ferdi Dirgantara )
KOLEKSI BLOG SAHABAT


BLOGNYA AJENG

AYAH BUNDAKU

Gustihana

Echa Bintang Timur

Indonesia 15

Ridwan

Bisnis Internet

Dp

jotys0k33

Ardhiansyam

Dessy Noor

Belajar Online

Directory Bengkel

TNT

MyBlog MyWorld

Download Freeall

KI YUSWA PINULUR

TOP WIDGET BLOG

Irwan Htc

Computer Word

HTC

Fun With EnglisH

Ary Blog

Suzuki Mobil Jogja

Custom Web

Ali Blogger's

ALL ABOUT KOREA

PKT Studio

Syihab Ikbal Blog

PT MUSTIKA BERLIAN MOTOR

Himansa Fansclub

Planktoon Blog

Biografiart[is]

Magazineticker 

Menambah, Merubah dan Menghapus Data MySql di phpMyAdmin – Tutorial Database

Sabtu

| 0 komentar
Menambah, Merubah dan Menghapus Data MySql di phpMyAdmin - Tutorial DatabaseHai sobat TKG, kembali lagi dalam lanjutan tutorial  database kita, setelah sebelumnya mempelajari tentang merubah struktur tabel di phpMyAdmin sekarang kita akan belajar tentang Menambah, Merubah dan Menhapus Data MySql di phpMyAdmin. Kita mulai dari menambah data:
1. Cari tabel yang kamu inginkan untuk ditambah datanya lalu klik dan kamu akan brada di tampilan seperti ini. Dan pilih tab Sisipkan.

Pilih Tabel
Pilih Tab Sisipkan
2. Berikutnya kamu akan ditujukan ke halaman berikut.
Masukkan Data
Masukkan Data
Untuk menambah data ketikkan pada kolom nilai, jika sudah selesai pilih button OK (yang dilingkari hitam). Apabila kamu ingin mengatur berapa banyak data yang ingin dimasukkan atur terlebih dahulu pada combobox yang dilingkari merah.
3. Jika sudah anda akan dibawa ke tampilan yang menunjukkan jika kamu telah berhasil memasukkan data dan kamu juga ditunjukkan code sql perintah insert-nya.
Tampilan Apabila Sukses
Tampilan Apabila Sukses
4. Dan apabila ingin melihat data yang telah kamu masukkan tadi klik tab Browse.
Berikutnya langkah-langkah untuk merubah data:
1. Pada tab Browse kalian akan mendapatkan tampilan seperti berikut.
Pilih Data Yang Ingin Dirubah
Pilih Data Yang Ingin Dirubah
Kemudian jika ingin merubah data lebih dari satu baris yang ada maka centang dulu checkbox di baris tabel yang ingin datanya dirubah dan kemudian pilih icon pensil seperti pada gambar diatas.
Apabila hanya ingin merubah satu baris saja maka kamu bisa langsung memilih icon pensil di baris yang ingin kamu rubah.
2. Setelah itu kamu bisa merubah data sesuai yang kamu inginkan. Hampir sama seperti waktu memasukkan data namun perubahan ada di yang dilingkari dalam gambar.
Rubah Isi Data
Rubah Isi Data
Setelah merubah data, yang terakhir adalah menhapus data.
1. Sama dengan merubah data, menghapus data juga diawali di tab Browse serta dengan perintah yang sama cuma untuk menghapus data yang dipilih adalah icon tanda silang.
Pilih Data Yang Ingin Di Hapus
Pilih Data Yang Ingin Di Hapus
2. Berikutnya kamu akan dialihkan kehalaman baru yang isinya dialog apakah kamu benar-benar ingin menghapus data. Jika iya tekan button Go.
Dialog Hapus Data
Dialog Hapus Data
Nah itu tadi adalah tutorial kita untuk Menambah, Merubah dan Menghapus Data MySql di phpMyAdmin. Nantikan tutorial-tutorial lainnya oleh tim TKG ya. Berikutnya adalah tutorial database tentang Eksport dan Import Database MySql di phpMyAdmin. Adios.

Sumber : http://tutorialkomputergratis.com

Followers