JARINGAN SHARE: Slide

Home Posts filed under Slide

Showing posts with label Slide. Show all posts

Thursday, May 2, 2013

Cara Membuat Slide Image Description For Blogger

✔ Jaringan Share 11:05:00 PM Comment

Cara Membuat Slide Image Description For Blogger - Ini adalah sebuah trik yang sangat unik untuk membuat slide image dengan deskripsi dibawahnya. Jika sobat memiliki postingan spesial yang ingin dishare, bisa menggunakan tips ini, dan letakkan di sidebar blog. Sobat bisa menggunakan imge dan dskripsi yang bisa diubah-ubah sesuka hati. Cara membuat nya pun sangatlah mudah, sobat tinggal tambahkan script berikut ke Add Gadget HTML.

Cara edit :
- width="280" height="280" = ini untuk mengatur lebar dan tinggi slide
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFS3QxPjKHiPXQ2bDhvqkr7Ne9W9MFTK9_eNqLI9jJtLvJBcA9g3FxRBBaxsftlpgLPndKe8_Cz3zPRqlbsq8UqMXWFHfpnmkFgSZXcLWU_eUje3TIoVYFJNCemxsgL5TdBL13z7ajms/s1600/3.jpg = URL image yang harus sobat ganti.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy = Deskripsi
- Post Link = Link yang akan sobat isi untuk slide

Okey, cukup sekian sob Cara Membuat Slide Image Description For Blogger. Semoga bermanfaat

Script by : www.bloggertrix.com

Friday, April 5, 2013

Slide

Cara Membuat Nivo Slider Dengan Navigasi Angka

✔ Jaringan Share 6:29:00 PM Comment

Cara Membuat Nivo Slider Dengan Navigasi Angka - Satu lagi nih sob cara membuat widget slideshow di blog, dan kali ini masih menggunakan slide dari nivo slider. Pada postingan saya sebelumnya seputar slider adalah Cara Membuat Slide Header Di Blog, kalau sobat belum membacanya silahkan dilihat siapa tahu tips sebelumnya juga berguna.

Slider kali ini memiliki beberapa keunggulan, seperti memiliki tombol angka dibagian kanan atas ,slide dan memiliki tombol next - previous slide. Untuk lebih jelas nya silahkan sobat lihat live demonya dibawah ini :

Bagaimana sob ? tertarik untuk mencoba slide ini ?..Jika tertarik tinggal sobat ikuti saja langkah-langkah dibawah ini :

1. Masukkan kode berikut diatas ]]></b:skin>

.nivoSlider {
position:relative;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKGuoVYr0cpiSSzMQ6LvbkiGHOcquZzTXtNdboSzi1v-gRykfGHZnR6At7-_rML1OVgjJb-FAMGgCaVy_OvtQFhRFU65iB2PqKfrr-o3TPNTZgXAyAfYRPaCKWR3isOJ4pygX3It4GpY/s1600/loading.gif) no-repeat 50% 50%;
width:618px; /* Samakan dengan lebar gambar */
height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

.nivoSlider a {
border:0;
display:block;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
berupa potongan-potongan gambar */

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Deskripsi setiap slide */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}

.nivo-caption p {
padding:5px 10px;
margin:0;
}

.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}

/* Navigasi 1,2,3... */
.nivo-controlNav a {
font:normal 10px Verdana,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0px 3px;
margin:0px 1px;
text-align:center;
display:inline-block;
*display:inline;
}
.nivo-controlNav a.active {
background-color:#3399ff;
}

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://3.bp.blogspot.com/-LTDk7usJ89E/Tz-256SAdGI/AAAAAAAACK4/l0-lD459yQU/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}

/* Detail caption gambar */
.nivo-caption {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

2. Masukan kode brikut diatas </head>

3. Masukan kode berikut di Widget HTML sobat:

<div class='nivoSlider'>

<a href='http://al-atsariyyah.com/wajibnya-shalat-berjamaah.html' target='_blank'><img alt='hukum shalat berjamaah' src='http://4.bp.blogspot.com/-CgG4_x14M80/UBEsU1rpqlI/AAAAAAAAB9I/mhG99GwBaXo/s1600/shalat%2Bberjamaah%2Bpelajaran%2Bblog.jpg' title='Bagaimana Hukum Shalat Berjamaah?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/10/benarkah-musiklagunyanyian-itu-haram.html' target='_blank'><img alt='musik haramkah' src='http://4.bp.blogspot.com/-2Ass6ZmUVaU/UBEr-EUwQFI/AAAAAAAAB8w/-wEvqiTK2b4/s1600/musik%2Bharam%2Bpelajaran%2Bblog.jpg' title='Benarkah Musik Itu Haram?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/12/bagaimana-hukum-cadar-niqabwajib-atau.html' target='_blank'><img alt='hukum cadar' src='http://3.bp.blogspot.com/-iy6Yaos6EsM/UBEr9JUjZHI/AAAAAAAAB8k/QO1sI7wEtPA/s1600/hukum%2Bcadar%2Bpelajaran%2Bblog.jpg' title='Hukum Jilbab dan Cadar'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2010/10/ahlussunnah-wa-al-jamaah.html' target='_blank'><img alt='ahlussunnah wal jamaah' src='http://1.bp.blogspot.com/-FVoBxLbHVg4/UBEr8_4ubNI/AAAAAAAAB8Y/0Kq-68Piiyk/s1600/ahlussunnah%2Bpelajaran%2Bblog.jpg' title='Siapakah Ahlussunnah wal Jamaah?'/></a>

</div>

<script type='text/javascript'>
$(window).load(function() {
$('div.nivoSlider').nivoSlider();
});
</script>

4. Silahkan sobat edit yang saya beri tanda merah, seperti Link gambar, URL gambar, dan Judul Gambar / Slide.

5. Klik save

Selamat sobat sudah mempunyai Nivo Slider Dengan Navigasi Angka yang sangat keren.

Tuesday, February 26, 2013

Slide

Cara Membuat Slide Header Di Blog

✔ Jaringan Share 12:09:00 AM Comment

Cara Membuat Slide Header Di Blog - Buat sobat blogger yang ingin mempercantik blog nya dengan header yang berubah-ubah atau tampilan header nya menjadi slide, bisa mengikuti tips yang satu ini. Dari segi tampilan nya cukup menarik, karena hampir menyerupai tampilan slide flash. Seperti apa demo nya silahkan sobat lihat dibawah ini.

Bagaimana sob, tertarik ingin membuat slide header ini ? Silahkan Ikuti langkah-langkah dibawah ini :

Login ke blogger.com

- Pilih template
- Kemudian pilih Edit html
- Jangan Lupa centang expand widget untuk tampilan html penuh..
- Selanjutnya cari kode </head> ,(gunakan F3 atau dengan Ctrl + F untuk memudahkan pencarian)
- Kemudian masukan code script yang ada dibawah dengan cara copy/paste diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ width: 950,height:144, navigation: false, delay: 5000 }); }); </script>

**> Keterangan : width:950,height:144 adalah ukuran lebar dan tinggi slideshow yang nantinya akan ditampilkan di blog. Tapi Untuk Ukuran ini Terserah masing-masing orang mau seberapa lebar header blog yang dimiliki.. ukuran kecilpun bisa misalkan kita mau memasangnya di sidebar.

Selanjutnya Pilih HTML/Javascript

Copy/paste script dibawah ini di area HTML/javascript

<div id='coin-slider'>

<center>
<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>
ISIKAN KETERANGAN GAMBAR DI SINI BROW
</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>
ISI KETERANGAN gambar DI SINI
</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>
ISI KETERANGAN gambar DI SINI
</span>
</a>

</center>
</div>

<div id='coin-slider'>
<center>
<a href="http://www.cobadibaca.com" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>
Hanya Mencoba untuk Coba Dibaca....
</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>
ISI KETERANGAN GAMBAR DI SINI
</span>
</a>
<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>
ISI KETERANGAN GAMBAR DI SINI
</span>
</a>

</center>
</div>

Okey, cukup sekian cara membuat slide header di blog.

Semoga Bermanfaat.

Tuesday, February 5, 2013

Slide

Cara Membuat Slider Otomatis Vertikal Image

✔ Jaringan Share 7:48:00 PM Comment

Cara Membuat Slider Otomatis Vertikal Image - Kali ini saya akan memberikan satu lagi tutorial membuat slider, yaitu slider otomatis untuk image atau gambar vertikal. Slide ini karya dari maskolis.com. Untuk apa kegunaanya dan kira-kira cocok untuk blog bertema apa ? Nanti sobat bisa lihat sendiri di demo live nya.

Slider ini sangat sederhana, dan bekerja secara otomatis berdasarkan artikel terbaru dan kategori tertentu. Untuk lebih jelas silahkan klik demo diatas, slider ini bisa diletakkan di sidebar dengan ukuran lebar 300px. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti Lasantha Bandara, Lansindu, Sameera dan lainnya, yang masih memasukkan gambar dan URL secara manual. Jika sobat pengguna template buatan mereka, dan ingin mengganti agar slider bekerja secara otomatis, silahkan simak berikut langkah-langkah pembuatannya :

Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> :

/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:400px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DsfkG_qO4ej5xKgbBFz9Jr0yD9DHUuJlHWnEETBuBQHE3HKKxkY8SEQhLm1vljJ5EgfdOxCsEFUSNdnjFdi6re1dDOZzJ8cSgBBn1pwYzeDLYi4W3T9tmv14t3lH6EG-wdZmMwleFhc/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimbALbxhAf0QDCjPZOVj1kFGtooutqvdyxiEUOBfcvKoeaXh1Ft0glXVAOQRAaNiyT292NkC51qG7_RMXPV5yAPIRRWqFDSTE-Uw-GgtQT1vWbGzjRgRz0KKqQv3ZjWkXgv4e8pvvcZpI/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNyZq7vLTRUWRLSbPEBO0ykycma0hgx47ib0nvHAMD3xmiuoNwKbxU_jdQy39r8tXwimpE2P4hwPi1c1FISliWDP4w4w580BOCIyYCfk0gI1FBLtHkGnhaJQaZyWkLPRR4TsbOES-QmrU/s1600/uj-opacity-40.png);padding:5px 10px; }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}

Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.

5. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :

Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.. numposts:6; adalah jumlah post yang tampil pada slider.

6. Sekarang sobat tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <div id='sidebar-wrapper'> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'> :

<b:if cond='data:blog.pageType == "item"'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div></b:if>

Slider diatas bisa sobat modifikasi sendiri, sobat juga bisa gunakan slider ini untuk gambar horisontal (tidak harus vertikal) berusahalah untuk lebih kreatif dengan merubah ukuran panjang dan lebarnya.

Source : www.maskolis.com

Tuesday, January 22, 2013

Slide

Cara membuat Slide Accordion Dengan CSS3

✔ Jaringan Share 5:16:00 AM Comment

Cara membuat Slide Accordion Dengan CSS3 - Menu slide yang satu ini dijamin super keren sob, selain untuk menampilkan menu blog sobat, slide ini juga bisa untuk menampilkan produk-produk yang sedang sobat promokan.

Slider ini tidak memiliki masalah kompatibilitas jika kita mengesampingkan IE. Widget ini bekerja sempurna dihampir semua browser lainnya.

Berikut daftar browser yang mendukung:
1. Chrome: v4 dan diatasx
2. Firefox: v4 dan diatasx
3. Safari: v3 dan diatasx
4. Opera v10.5 dan diatasx
5. IE: v10 dan diatasx

Baiklah cukup untuk penjelasan, sekarang melangkah pada tutorial menambahkan Slide Accordion Dengan CSS3 ke blog sobat

Seperti biasa login ke akun blogger >> Template >> Edit HTML >> Proceed

Cari kode <div id='main-wrapper'>

Setelah dapat tambahkan kode HTML berikut diatas kode no 2 tadi

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="tbi_slider">
<ul>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
</ul>
</div>
</b:if>

Catatan:

Ganti TITLE dengan judul posts (Buat Pendek Saja)
Ganti POST LINK dengan link postingan anda
Ganti IMAGE LINK dengan link gambar anda.

4. Setelah menambahkan Kode HTML sekarang tambahkan kode CSS berikut diatas kode ]]></b:skin>

/* Accordion Featured Post Slider @ TipsTrikBlogging.com */
#tbi_slider {
    overflow: hidden;
    margin: 20px auto;
    padding: 0;
    width: 805px;
    height: 320px;
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
#tbi_slider ul {
    margin: 0;
    padding: 0;
    width: 2000px;
}
#tbi_slider li {
    position: relative;
    display: block;
float: left;
    width: 160px;
    border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
    transition: all 0.5s;
}
#tbi_slider ul:hover li {
    width: 40px;
}
#tbi_slider ul li:hover {
    width: 640px;
}
#tbi_slider li img {
    display: block;
    width: 640px;
}
#tbi_title {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    width: 640px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font: bold 16px 'trebuchet MS', sans-serif;
}
#tbi_title a {
    display: block;
    color: #fff;
    text-decoration: none;
}
/* Accordion Featured Post Slider @ TipsTrikBlogging.com */

Tidak ada yang perlu diganti pada bagian ini.

5. Silahkan simpan template dan lihat hasilnya .

Source

Wednesday, January 16, 2013

Slide

Cara Membuat Slideshow Jquery New Version

✔ Jaringan Share 8:09:00 PM Comment

Cara Membuat Slideshow Jquery New Version - Selain dapat membuat tampilan blog lebih cantik, slide show juga berfungsi untuk menampilkan postingan terbaru, promosi dari suatu produk, atau berupa informasi penting lainnya dari blog yang anda kelola mupun blog lain yang memang patut ditampilan pada slide show.
Tips membuat Slide Show ini menggunakan dua file java script serta kode-kode lainnya.
Sebagai contoh coba sobat amati gambar dibawah ini :

DEMO

Cara Membuatnya :

Masuk ke Blogger
Pilih Rancangan bagian Edit HTML

Langkah Pertama :

Copy kode dibawah, kemudian paste dibawah kode : <body>

<script type="" text="" javascript="">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"judul image 1","desc":"Keterangan image 1"},{"id":"slide-img-2","client":"judul image 2","desc":"Keterangan image 2"},{"id":"slide-img-3","client":"jjudul image 3","desc":"Keterangan image 3"},{"id":"slide-img-4","client":"judul image 4","desc":"Keterangan image 4"},{"id":"slide-img-5","client":"judul image 5","desc":"Keterangan image 5"},{"id":"slide-img-6","client":"judul image 6","desc":"Keterangan image 6"},{"id":"slide-img-7","client":"judul image 7","desc":"Keterangan image 7"}];
</script>

Ganti tulisan Judul image dan keterangan image dengan tulisan yamg ingin ditampilkan

Langkah Kedua :

Copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:20px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:550px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:550px;
height:52px;
margin:22px 0 0;
}
div#top div#nav ul{
float:left;
width:550px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:550px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
}
div#header div#slide-holder{
z-index:40;
width:550px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:550px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:550px;
height:46px;
display:none;
position:absolute;
background:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZax8SMwKoI/AAAAAAAACQU/jKYyP3pkefo/s128/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZatkNZ9vdI/AAAAAAAACQE/XnxeOeqYwF8/silde-nav.png);}
div#nav ul li a{background:url(https://lh5.googleusercontent.com/_1j80TgNqd_8/TZax-eNRtRI/AAAAAAAACQY/ci4_hxU0QgM/s912/header-bg.png) no-repeat;}

Ganti seluruh ukuran width yang berwarna kuning yang disesuaikan dengan lebar tempat meletakan slide show

Langkah Ketiga

Copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script src='https://sites.google.com/site/epgstudiosite/javascript/jquery.js' type='text/javascript'/><script src='https://sites.google.com/site/epgstudiosite/javascript/scripts.js' type='text/javascript'/>

Klik Tombol Simpan Template

Langkah Keempat

Masuk ke Dasbor
Pilih Rancangan Bagian Elemen Halaman.
Klik Tambah Gadget.
Pilih HTML/Javascrpt
Copy kode dibawah ini kemudian paste pada kolom yang tersedia

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZayimDclcI/AAAAAAAACQ0/K75d647i9Bs/s912/nature-photo6.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZayfqs2MiI/AAAAAAAACQw/WJQfcd1EK-g/s912/nature-photo5.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZaycXbtn7I/AAAAAAAACQs/eFOr4ZS0EZo/s912/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZaya8bZTwI/AAAAAAAACQo/PmJHp4a1-BY/s912/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZayQFzxRqI/AAAAAAAACQk/-ZHpEai9IG8/s912/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZayM8T_5eI/AAAAAAAACQg/5Ld-3JKMqyM/s912/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZayJcVzcEI/AAAAAAAACQc/nykm8K_RVZY/s912/nature-photo.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Terakhir klik save dan lihat hasilnya.

Source : epg-studio.blogspot.com/2011/04/jquery-slide-show-1.html

Thursday, November 29, 2012

Slide

Cara Membuat Receant Post Image Dengan Efek Marquee

✔ Jaringan Share 5:10:00 PM Comment

Tips blog kali ini berguna sobat blogger yang ingin mempercantik tampilan receant post. Tampilan recent post ini lebih mantab, apalagi setiap artikel atau posting yang ada di blog sobat disertai dengan gambar. Selain itu kita bisa menampilkan seluruh artikel atau posting, dari yang masih baru hingga yang sudah lama sekalipun. Lebih cocok lagi bila sobat blogger memiliki blog yang bergerak dibidang desain inetrior - eksterior, atau gambar dan foto contoh suatu produk, atau apa sajalah sesuai kebutuhan anda, Intinya recent post ini dilengkapi dengan fitur image.

Live Demo

Cara membuat receant post image dengan efek marquee :

Cara nya sangat mudah sob, tinggal copas Kode dibawah ini dan masukkan ke Add Gadget HTML blog :

<div style="float: left;text-align: center;height:253px;padding:5px 5px 0px 5px;background-color: #E7E6E9;border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;color:#ffffff; ">
<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%" height="214px" border="1">

<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 250;
cellspacing = 10;
borderColor = "#fff";
bgTD = "#ccc";
thumbwidth =200;
thumbheight = 150;
fntsize = 11;
acolor = "#ffffff";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#ffffff";
icon2 = " ";
numposts = 100;
home_page = "GANTI DENGAN ULR BLOG ANDA";
</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 showrecentposts(json){document.write('<table width="250px' +boxwidth+'" border=0 bordercolor="#cccccc" align="left" cellspacing="10px'+cellspacing+'5px" bgcolor="#ffffff'+borderColor+'">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='yes')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<td><div style="float: left;width:200px;margin-bottom:5px;padding:0px 0px 0px 0px;background-color: rgb(204, 204, 204);border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;"><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></div><br /><div style="float: left;text-align: center;width:190px;height:45px; padding:5px 5px 0px 5px;background-color: #E7E6E9;border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;color:#ffffff; "><style="font-size: 10px; text-decoration:none; color: #ffffff;><a href="'+posturl+'">'+posttitle+'</a></div>';if(summaryPost==0){trtd='<td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write('<a href="http://www.carabuatwebgratis.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTgJfcDG9fSV3XWiKkCMxUrcIAhwXnV6Sbo2Ghwfn_gvjTZB9M6ooDz7QrRi6XdV23WgoeaPdlzhG4EjTS8zbIAMH_LdM_yzHmha0GeTMpBubR68hsu1PbajQYP3ivzJItD5oezpkxYAr/s104/Tukar+Link.jpg"/></a>');//]]></script></marquee></div>

Catatan :

numposts = 100; (Jumlah recent post yang akan ditampilkan)
home_page = "GANTI DENGAN ULR BLOG ANDA";

6. Simpan

Selamat,,sobat sudah mempunyai receant post image yang super keren.

Terima kasih telah membaca artikel Cara Membuat Receant Post Image Dengan Efek Marquee.
Semoga bermanfaat.

Source : www.carabuatwebgratis.com