Tuesday, 12 March 2013

Cara Membuat Readmore Dengan Thumbail

Jump Break Blogspot
Oke jika sobat males tiap posting harus klik jump break, itu ada cara lain yaitu dengan memakai java script, oke langsung saja jika sobat ingin memakai readmore otomatis caranya silahkan ikuti tutorial blog kali ini, langkah pertama sobat login ke blogger, langsung sobat menuju ke Edit HTML dalam Tab Design, setelah itu sobat cari kode seperti ini </head> , setelah ketemu sobat masukan CSS dan JavaScript di bawah ini di atas kode </head> .

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://bloggertutorial.googlecode.com/files/readmore%20thumbail.js' type='text/javascript'/>
<style>
.button {
        float:right;
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}
.orange2 {
    color: #fef4e9;
    border: 2px solid white !important;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#faa51a&#39;, endColorstr=&#39;#f47a20&#39;);
}
.orange2:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f88e11&#39;, endColorstr=&#39;#f06015&#39;);
}
.orange2:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f47a20&#39;, endColorstr=&#39;#faa51a&#39;);
}
</style>
Setelah itu sobat simpan/save template blog nya, tidak juga tidak apa apa, langkah selanjutnya sobat cari tag/kode yang mirip atau sama dengan ini tag <data:post.body/> setelah ketemu sobat ganti tag tersebut dengan kode di bawah.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='button orange2' expr:href='data:post.url'>Read More</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
Setelah proses instalasi selesai sobat klik Save dan lihat hasilnya. oke sobat sekian dulu tutorial blog Cara Membuat Readmore Dengan Thumbail Gambar, semoga bermanfaat. Good Luck, Happy Blogging.
Posted by at No comments:
Labels:

Cara Mengganti Warna Background Dengan Tombol

Ganti background Blogspot
Oke sobat kita langsung saja ke TKP, untuk mengganti background blogger dengan warna cukup mudah dan gampang sobat tinggal ikuti saja postingan kali ini. tapi sebelumnya sobat harus mengenal dulu java sscript di bawah ini, biar sobat lebih gampang dalam merubahnya, untuk mengganti background blogger disini saya menggunakan script JavaScript, scriptnya saya ambil dari situs ini http://www.codebelly.com/ jika sobat penasaran silahkan sobat kunjungi situsnya di alamat tadi.
Code JavaSccript untuk merubah background
<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#000000';
function changeBG(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>
Nah scriptnya cuma sedikit dan gampang di hapal, terus cara penerapannya sobat bisa menggunakan seperti di bawah ini
<a haref="#" onclick="javascript:changeBG(0)"></a>
Oke sobat itu kode dasarnya, jika sobat mau kembangkan silahkan kembangkan sendiri, jika sobat mau mencoba script yang di bawah juga tidak apa apa, bebas untuk di copy paste, cara penerapan script di bawah ini cukup mudah dan gampang sobat tinggal tambahkan gadget HTML/JavaScript terus copy code di bawah dan Paste di form HTML/JavaScript. sebelum ke kode sebaiknya sobat lihat contohnya gambarnya,

Warna Untuk Background Blog
Untuk scriptnya silahkan sobat copy di bawah ini.. jika masih ada kekurangan silahkan sobat modif sendiri.
<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#000000';
backColor[1] = '#F0E68C';
backColor[2] = '#E0FFFF';
backColor[3] = '#008000';
backColor[4] = '#FF0000';
backColor[5] = '#87CEFA';
backColor[6] = '#FFDAB9';
backColor[7] = '#FFC0CB';
backColor[8] = '#E6E6FA';
backColor[9] = '#0C10F3';
backColor[10] = '#00FFFF';
backColor[11] = '#0000A0';
backColor[12] = '#800080';
backColor[13] = '#FFFF00';
backColor[14] = '#00FF00';   
backColor[15] = '#FF00FF';
backColor[16] = '#FFFFFF';
backColor[17] = '#C0C0C0';
backColor[18] = '#FFA500';
backColor[19] = '#800000';

function changeBG(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>

<style>
.tomblf {
    display: inline-block;
    zoom: 1;
    vertical-align: baseline;
    margin: 0 1px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px/100% Arial, Helvetica, sans-serif;
    padding: 2em 2em 2em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.tomblf:hover {
   text-decoration: none;
}
.tomblf:active {
    position: relative;
    top: 1px;
}
.reds {
color: #000;
border: solid 1px #000;
background: #000;
}
.kuning {
color: #F0E68C;
border: solid 1px #F0E68C;
background: #F0E68C;
}
.birumuda {
color: #E0FFFF;
border: solid 1px #E0FFFF;
background: #E0FFFF;
}
.hijau {
color: #008000;
border: solid 1px #008000;
background: #008000;
}
.merah {
color: #FF0000;
border: solid 1px #FF0000;
background: #FF0000;
}
.warna5 {
color: #87CEFA;
border: solid 1px #87CEFA;
background: #87CEFA;
}
.warna6 {
color: #FFDAB9;
border: solid 1px #FFDAB9;
background: #FFDAB9;
}
.warna7 {
color: #FFC0CB;
border: solid 1px #FFC0CB;
background: #FFC0CB;
}
.warna8 {
color: #E6E6FA;
border: solid 1px #E6E6FA;
background: #E6E6FA;
}
.warna9 {
color: #0C10F3;
border: solid 1px #0C10F3;
background: #0C10F3;
}
.warna10 {
color: #00FFFF;
border: solid 1px #00FFFF;
background: #00FFFF;
}
.warna11 {
color: #0000A0;
border: solid 1px #0000A0;
background: #0000A0;
}
.warna12 {
color: #800080;
border: solid 1px #800080;
background: #800080;
}
.warna13 {
color: #FFFF00;
border: solid 1px #FFFF00;
background: #FFFF00;
}
.warna14 {
color: #00FF00;
border: solid 1px #00FF00;
background: #00FF00;
}
.warna15 {
color: #FF00FF;
border: solid 1px #FF00FF;
background: #FF00FF;
}
.warna16 {
color: #FFFFFF;
border: solid 1px #FFFFFF;
background: #FFFFFF;
}
.warna17 {
color: #C0C0C0;
border: solid 1px #C0C0C0;
background: #C0C0C0;
}
.warna18 {
color: #FFA500;
border: solid 1px #FFA500;
background: #FFA500;
}
.warna19 {
color: #800000;
border: solid 1px #800000;
background: #800000;
}
.warna20 {
color: #254117;
border: solid 1px #254117;
background: #254117;
margin-left:300px;
}

</style>
<div class="tomblf warna20" align="center">
<a class="tomblf reds" onclick="javascript:changeBG(0)"></a>
<a class="tomblf kuning" onclick="javascript:changeBG(1)"></a>
<a class="tomblf birumuda" onclick="javascript:changeBG(2)"></a>
<a class="tomblf hijau" onclick="javascript:changeBG(3)"></a>
<a class="tomblf merah" onclick="javascript:changeBG(4)"></a>
<br/>
<a class="tomblf warna5" onclick="javascript:changeBG(5)"></a>
<a class="tomblf warna6" onclick="javascript:changeBG(6)"></a>
<a class="tomblf warna7" onclick="javascript:changeBG(7)"></a>
<a class="tomblf warna8" onclick="javascript:changeBG(8)"></a>
<a class="tomblf warna9" onclick="javascript:changeBG(9)"></a>
<br/>
<a class="tomblf warna10" onclick="javascript:changeBG(10)"></a>
<a class="tomblf warna11" onclick="javascript:changeBG(11)"></a>
<a class="tomblf warna12" onclick="javascript:changeBG(12)"></a>
<a class="tomblf warna13" onclick="javascript:changeBG(13)"></a>
<a class="tomblf warna14" onclick="javascript:changeBG(14)"></a>
<br/>
<a class="tomblf warna15" onclick="javascript:changeBG(15)"></a>
<a class="tomblf warna16" onclick="javascript:changeBG(16)"></a>
<a class="tomblf warna17" onclick="javascript:changeBG(17)"></a>
<a class="tomblf warna18" onclick="javascript:changeBG(18)"></a>
<a class="tomblf warna19" onclick="javascript:changeBG(19)"></a>
</div>
Sobat simpan Script ini di gadget HTML/JavaScript. Oke Good Luck Happy Blogging
Posted by at No comments:
Labels:

Monday, 11 March 2013

Cara Menampilkan Data Dari Tabel Dengan PHP

Bismillah.....setelah kemarin saya tulis tentang cara membuat koneksi database dengan php, pada kesempatan ini saya akan sedikit menulis tentang cara menampilkan data dari database MySQL dengan menggunakan Script PHP.
Data Dari Database Tutorial PHP Dasar
Pada postingan ini saya cuma akan memberikan contah dengan sederhana saja. langkah pertama sobat buat dulu sebuah database di PHPMyAdmin dengan nama tampil_data atau apa seja terserah sobat.
Setelah database terbentuk terus sobat buat sebuah tabel dengan nama tabel nama atau apa saja yang penting ingat, terus sobat buat 3 fields ang berisikan nama,email,alamat atau sobat copy kode di bawah ini biar mudah.
Data Di MySQL Databse
Kode Membuat Tabel

    CREATE TABLE `nama` (
      `nama` varchar(20) NOT NULL,
      `email` varchar(20) default NULL,
      `alamat` varchar(20) default NULL
    );

Setelah Tabel terbentuk terus sobat isi datanya
Setelah data tabel terisi sekarang sobat tinggal buat Script dengan PHP
Pertama sobat harus membuat dulu script untuk koneksi ke database

    $conn=mysql_connect("server", "user", "password");

Silahkan sobat isi server menggunakan server milik sobat kalo di local biasanya menggunakan localhost,terus isi user untukuser dan password database, setelah itu sobat buat script untuk memilih tabel

    mysql_select_db("nama_tabel");

Setelah itu sobat buat script untuk membaca tabel

    $hasil=mysql_query($sql);
    while($row=mysql_fetch_array($hasil)){


Setela itu sobat buat script lagi untuk menampilkan field-field dari tabel.
menampilkan field dari kolom nama

    echo "Nama : ".$row['nama'];

Menampilkan field dari kolom email

    echo "<br>Email : ".$row['email'];

Menampilkan field dari kolom Alamat

    echo "<br>Alamat : ".$row['alamat'];

Kode <hr> untuk pemisah antara data satu dengan data kedua.

    echo "<hr>";
        }
        ?>

Untuk Script lengkapnya seperti di bawah ini

    <?php
    $conn=mysql_connect("localhost", "root", "");
    mysql_select_db("tampil_data");
    $sql="select * from nama";
    $hasil=mysql_query($sql);
    while($row=mysql_fetch_array($hasil)){
    echo "Nama : ".$row['nama'];
    echo "<br>Email : ".$row['email'];
    echo "<br>Alamat : ".$row['alamat'];
    echo "<hr>";
    }
    ?>

Setelah itu sobat simpan dengan nama percobaan.php atau apa saja terserah sobat, saya cukupkan sampai disini somoga berhasil.. selamat mencoba, Good Luck Happy Nice Day..

Read more at http://lutfietutor.blogspot.com/2012/09/cara-menampilkan-data-dari-tabel-dengan.html#iG0QwYQX2I7VQ1ys.99
Posted by at 6 comments:
Labels:
Subscribe to: Posts (Atom)