Postingan Blogger Terlihat Menarik dengan JQuery

Postingan Blogger Terlihat Menarik dengan JQuery

Cara Mempercantik Postingan Blogger - Salah satu hal yang paling penting pada blog. Karena Post adalah tempat dimana semua artikel sobat dapat ditampilkan. Dengan begitu artikel yang sobat buat akan lebih cepat terlihat dan terbaca oleh pengunjung. 

Dari beberapa blog yang pernah sobat kunjungi pastinya disetiap tampilan post berbeda - beda. Sobat pasti juga berfikir Bagaimana caranya melakukan perubahan pada tampilan post agar terlihat lebih menarik pengunjung ?

Script Kode Postingan Blogspot

Pertama : Buka Blog sobat

Kedua : Klik pada menu blog dan pilih Template

Ketiga : Klik pada tombol Edit Html dan Pilih expand widget

Keempat : Cari dengan cara tekan CTRL+F pada keyboard sobat ketik atau copy kode berikut ]]></b:skin>

Jika sudah ketemu copy dan pastekan kode script berikut tepat diatas / sebelum kode ]]></b:skin>

#featured{
width:336px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:336px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:336px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPHX8tYUOS5B2yKz3Iy3IiYi59rHqgi-FE9enzfMq3QlxeNgjSCUQsD2YayxvgRz82MmNM5PNB_nIFNKMbIFTU6VxqG2m_EOiPOSvtVe0Qmx5Js9gNdHTquZkr_6wVURJckGMRSw9IKY/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2SV9HC_hzDaAEFI_sKG9P7rbUnq8UA1rsSvrxL3_h5uvlUti7Y1HVIeGBAewcqn6qDvsQk5yILWEKLrwynSSQ8xBgPPJMr8SWTbCpOv6E76c1yY2GrdXDGVrMDX-BHmoYhnTuYLm07pI/s1600/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
} 

Kelima : Lanjutkan cari kode berikut  </head>, jika sudah ketemu copy dan paste kode dibawah ini tepat diatas / sebelum kode tersebut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity:
&quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000,
true);
    });
</script>

 Jika sudah maka Simpan / save

* Pastikan kode pada langkah keempat dan kelima tersimpan di template sobat

Keenam : Setelah tersimpan klik pada menu blog sobat pilih Layout dan tambahkan Gadget sobat dengan cara Klik AddGadget dan pastekan Kode berikut ini

<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#fragment-1">
<img alt="" src="alamat-gambar1" />
<span>Cool nature</span></a></li>
<li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="alamat-gambar2" />
<span>Fresh  Fruit</span></a></li>
<li class="ui-tabs-nav-item">
<a href="#fragment-3">
<img alt="" src="alamat-gambar3" /><span>Foods</span></a></li>
<li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="alamat-gambar4" />
<span>Amzing nature</span></a></li>
          </ul>
        <!-- First Content -->
        <div id="fragment-1" style="" class="ui-tabs-panel">
            <img alt="" src="alamat-gambar1" />
             <div class="info">
                <h2><a href="#fragment-1">nama-gambar1</a></h2>
                <p>deskripsi-singkat-gambar1<a href="#">Read more</a></p>
             </div>
        </div>
        <!-- Second Content -->
        <div id="fragment-2" style="" class="ui-tabs-panel">
            <img alt="" src="alamat-gambar2" />
             <div class="info">
                <h2><a href="#fragment-2">nama-gambar2</a></h2>
                <p>deskripsi-singkat-gamabr2<a href="#">Read more</a></p>
             </div>
        </div>
        <!-- Third Content -->
        <div id="fragment-3" style="" class="ui-tabs-panel">
            <img alt="" src="alamat-gambar3" />
             <div class="info">
                <h2><a href="#fragment-3">nama-gambar3</a></h2>
                <p>deskripsi-singkat-gambar3<a href="#">Read more</a></p>
             </div>
        </div>
        <!-- Fourth Content -->
        <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="alamat-gambar4" />
             <div class="info">
                <h2><a href="#fragment-4">nama-gamabr4</a></h2>
                <p>deskripsi-singkat-gambar4<a href="#">Read more</a></p>
             </div></div>
<a href="http://www.adieteknokom.com/"><img alt="jquery post gambar" src="http://img1.blogblog.com/img/blank.gif"/>
</a></div>

Keterangan

1. Ganti tulisan alamat-gambar1-4 dengan alamat gamabr sobat yang telah di aploud

2. Gati tulisan nama-gambar1-4 dengan nama gambar sobat

3. Ganti tulisan deskripsi-singkat-gamabr1-4 dengan deskripsi keterangan gambar sobat
4. Ganti tulisan #fragment1-4 dengan alamat url postingan sobat

 
* Saran : Kode berikut tidak berlaku untuk semua jenis template, jika anda ingin menambahkan atau merubah kode template sobat sebaiknya lakukan backup terlebih dahulu.

Tetap kunjungi trus website saya jika link mati silahkan hubungi saya :

SMS / BBM : 081276222658 - 5A949876 

www.adieteknokom.com

Tolong bantu saya klik Tombol Vote ini...