Tip Slideshow Jquery Untuk Blogger

info-gamepc.blogspot.com - Hari ini saya akan memberikan widget slideshow yang mengagumkan & menakjubkan untuk blog Blogspot. Namun kita tahu bahwa Anda mungkin sudah tidak asing lagi dengan widget ini sebelumnya, tapi keuntungan terbesar menggunakan slide ini, tidak memerlukan waktu yang lama muncul dalam blog anda. Gadget Slide ini benar-benar dibuat dalam jquery yang terbaru dan teringan dikemas dalam bahasa scripting.

Dengan menggunakan jquery slideshow di blog Anda, dapat dengan mudah mendapatkan puluhan manfaat, Anda dapat dengan mudah menampilkan pesan-pesan terbaru & populer melalui slide blogger ini. Ada juga fitur terhitung dengan menggunakan slide jquery di blog. Sebagian besar dari para blogger mania menggunakannya untuk memperkenalkan diri mereka. Sehingga Anda dapat dengan mudah menggunakannya untuk halaman blog. Jadi dalam artikel hari ini kita akan belajar bagaimana menambahkan jquery slideshow profesional di blogger.

Fitur Slideshow Untuk Blogger Blog.

Di sini Anda akan belajar dan mengetahui semua fitur utama dengan menggunakan jquery slideshow 2.013 di blogger blog. Dengan menggunakan slider featured post slideshow di blogger blog Anda dapat dengan mudah menarik pengunjung ke posting populer Anda maupun posting lama. Selain itu, bisa membantu untuk meningkatkan tampilan halaman Anda dan mengurangi tingkat kebosanan pengunjung blog. Berikut manfaat slidshow yang mungkin anda dapatkan:

Membantu dalam meningkatkan pageviews
Menarik lebih banyak pengunjung &
Mengurangi tingkat kebosanan pengunjung blog
Beralih ke tampilan blog yang lebih elegan dan profesional
Tampilkan tulisan terpopuler

Bagaimana menambahkan Jquery Slideshow Di Blogger Blog.

Langkah 1:

Ini adalah proses yang sangat sederhana dan hanya mengikuti semua langkah di bawah ini. Saya harap Anda tidak akan mengalami kesulitan apabila Anda mengikuti semua langkah dengan benar. Mari kita pergi untuk menambahkan gadget ini ke blogger.

1. Pergi ke dashboard blogger
2. Pergi ke template / Editor:
3. Sekarang cari kode </head>
4. Sekarang download kode ini dan letakkan diatas kode </head>

Langkah kedua:

1. Pergi ke dashboard blogger
2. Pergi ke template / Editor
3. Sekarang cari kode ]]></b:skin>
4. Sekarang kopi dan paste kode di bawah ini letakkan sebelum kode ]]></b:skin>

/*-------------------- PBT jQuery Image Slider -------------*/
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnHQzO-C5GC7UtRtbJyqlDykokesuPv0MKNm5tKPxGY4jgN7S_xyM1-jEgPvQ8JC9j_8LQqTMgJNL-0zUrkaabV-aheAujhkgIh1iPkRB2qns79x-vTk64JYaU0jArpgz-xbSzdiL4KQI/s1600/featured-
pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-
indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(http://2.bp.blogspot.com/-xrvnRlI02a8
/TeDndJyHamI/AAAAAAAAHKA/VSA--b82v9w/s1600/featured-prev.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8JYOzRISjeq72AX5tvh6laAfofLF2rT_v2uw0YLl3RhrQyFBrnvbPRH6K55QBXBIHlFRO5cMZVM1-qGpX8Abnn1Shen3HBaZOXwKLd862ZXGC_VfMEVrSQt_70Ad6dvKSLQW7ORveS3I/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

Langkah 3:

Sekarang cari kode ini <div id='main-wrapper'
dan pastekan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>
<div class='fp-slides'>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='Tambahkan gambar
HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3>
<p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK
HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3>
<p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK
HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3>
<p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
</div>
<div class='fp-nav clearfix'>
<span class='fp-pager'/>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</b:if></b:if>

CATATAN:

Ganti semua TAMBAHKAN JUDUL POST - 1 , 2 , 3 , 4 , 5 SINI dengan URL halaman posting blog Anda tersebut. Ingat semua URL ini akan ditambahkan dua kali untuk setiap slide . Sekali untuk gambar dan kedua kalinya untuk judul Post.
Ganti semua TAMBAHKAN GAMBAR - 5 dengan link gambar anda . Ukuran default semua gambar-gambar ini memiliki lebar : 580px, height: 266px, Anda dapat dengan mudah mengedit ukuran gambar tersebut dengan melakukan editing lebar dan tinggi dalam kode CSS yang kita berbagi pada langkah 2 .

Ingat : Semua gambar Anda harus memiliki ukuran yang sama, jika tidak maka tidak akan bekerja dengan baik.
Ganti ini MENULIS POST TITLE HERE ... dengan judul Blog Anda sendiri
Ganti semua ini >> MENULIS POST DESCRIPTION HERE dengan deskripsi judul posting anda.
Anda dapat menulis 1 atau 2 baris posting Anda di sini dan pembaca bisa dengan mudah membaca posting lengkap dengan mengklik pada tag judul.
Jika Anda ingin mengubah ukuran keseluruhan widget slider maka cukup pada langkah # 2 perubahan berikut dua kode dan memberikan nilai-nilai Anda sendiri lebar : 608px dan height: 400px

Terakhir kita lihat percobaan kita dan lihat hasilnya