Cara Membuat Featured Slide

Unknown - Selasa, 10 September 2013 - 20:34 wita
Sebelumnya saya sudah berbagi Cara Membuat Slide dengan beberapa Mode Efek, untuk menambah pembendaharaan Slide di Blog :q; yang pada umumnya sekarang setiap Template [Blog] pasti ada Slide-nya walaupun itu sangat memberatkan loading. Seperti saya katakan di awal sekarang saya akan berbagi dengan kawan Cara Membuat Featured Slide 


Cara Membuatnya :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Copas Script berikut diatas ]]></b:skin>

<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
.bbc-slider {background: none repeat scroll 0 0 #FFFFFF;height: 329px;margin-bottom: 0;margin-left: 0;margin-right: 0;overflow: hidden;padding: 0;position: relative;width: 850px;}
.bbc-slides-container {border:5px solid #999;}
.bbc-slides, .bbc-thumbnail, .bbc-prev-next, .bbc-nav {width: 630px; /*Set The Width Of Slider Here*/}
.bbc-slides, .bbc-thumbnail {height: 280px; /*Set The Height Of Images Here*/overflow: hidden;padding-top: 0;position: relative;}
.bbc-title {color: #FFFFFF;font: bold 18px Arial,Helvetica,Sans-serif;margin: 0;
padding: 0 0 2px;text-shadow: 0 1px 0 #000000;}
.bbc-title a, .bbc-title a:hover {color: #FFFFFF;text-decoration: none;}
.bbc-content {background: none repeat scroll 0 0 #111111;bottom: 0;left: 0;opacity: 0.7;overflow: hidden;padding: 10px 15px 5px;position: absolute;right: 0;}
.bbc-content p {color: #FFFFFF;line-height: 18px;margin: 0;padding: 0;text-shadow: 0 1px 0 #000000;}
.bbc-more, .bbc-more:hover {color: #FFFFFF;font-weight: bold;}
.bbc-nav {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-LFoEJjSCS8AbJp5Uzfr3Zy7FXlLQ-L3lQRnd14ULIB-DMmNCODA7_9vS56hk5BB73XMOAin1QnqNbOiEJ-yf6UKCSQIr8J1mIhDE3AUB68lz3qHbCG0sLsogVqL-m9i05eFq_cJKKUG/s1600/h2.png") repeat-x scroll 0 0 transparent;height: 12px;padding: 10px 0;text-align: center;}
.bbc-pager a {background-image: url("http://1.bp.blogspot.com/-J0WXZkvU9Fw/TwL174uF0sI/AAAAAAAACGU/3zCFSpAL1Xo/s1600/featured-pager.png");
background-position: 0 0;cursor: pointer;display: inline-block;float: none;height: 12px;line-height: 1;margin: 0 4px 0 0;opacity: 0.7;overflow: hidden;padding: 0;text-indent: -999px;width: 12px;}
.bbc-pager a:hover, .bbc-pager a.activeSlide {background-position: 0 -112px;opacity: 1;text-decoration: none;}
.bbc-prev-next-wrap {position: relative;z-index: 200;}
.bbc-prev-next {bottom: 130px;height: 37px;left: 0;position: absolute;right: 0;}
.bbc-prev {background: url("http://4.bp.blogspot.com/-q6d5ARd-gto/TwL18nZpBkI/AAAAAAAACGY/b1BSQrPbsHA/s1600/featured-prev.png") no-repeat scroll left top transparent;float: left;height: 37px;margin-left: 5px;margin-top: -100px;
opacity: 0.6;width: 37px;}
.bbc-prev:hover {opacity: 0.8;}
.bbc-next {background: url("http://2.bp.blogspot.com/-OpDIcNy43XA/TwL16dnar-I/AAAAAAAACGM/pGYlPIxfbE8/s1600/featured-next.png") no-repeat scroll right top transparent;float: right;height: 37px;margin-right: 5px;margin-top: -100px;opacity: 0.6;width: 37px;}
.bbc-next:hover {opacity: 0.8;}
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->

  • Teks yang saya beri warna merah untuk merubah ukuran Image Slide, silahkan disesuaikan 
  • Selanjutnya Copas Script berikut dibawah ]]></b:skin> atau diatas  </head>

<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.bbc-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.bbc-next',
prev: '.bbc-prev',
pager: '.bbc-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-2.js' type='text/javascript'/>
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->

  • Simpan Template kawan
  • Selanjutnya pilih Tata Letak - Tambah Gadget 
  • Pilih {+] pada HTML / JavaScript 
  • Copas Kode berikut kedalamnya

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
<div class='bbc-slider clearfix'>
<div class='bbc-slides-container clearfix'>
<div class='bbc-slides'>
<!-- Slide 1 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzum_tN59YQzIny2Ry6_wlQqzp7JJumop4mLyZXP2bPzjv2-oZE1q5GD514GY9Vko1LSYrG7sXM7ACmP7iUqy0mJLuT7M3MF6qWHJTsfyhH32oTKFGkIBWmZFRGeaPGJYPi2S_SLBH_68/s1600/1.+Kolam+air+terjun.gif"/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Panorama</a></h3>
<p> Air Terjun yang dibawahnya ada Kolam dengan air sangat jernih. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPAKD2oUDZPE83rAHbgKeBYthQ8TnUrgvqidM7WbRf7BtlE-cqPvslpiCT1Pf1szHeKYu09zUT5d32TreeRCAz7p__PMmh3jODVOVo4-mLX7gRrSfDwqUFEr-R8-yBkZ_dhKJH2QOEvjA/s1600/2.+Jalan+Pegunungan.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Alam Pegunungan </a></h3>
<p> Pemandangan di Daerah Pegunungan yang Hijau. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZjUBUKkXZj7xKg7WEAy-hE3FHS1ycniSZVyPTIKtMEP2XBoQ3MTal43s8sInc6upfFw4Q1lRm22Xy0gXEd4nqxVCoZGwwX0oD6V3ecQbN_5T1m0WMV41gBhlUTd_OC7txMvekNizbSmo/s1600/3.+Kaca+Pecah.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Seni Designer </a></h3>
<p> Kaca Pecah tapi berbentuk Seni Design Tinggi. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESdOhnS3O8tvgJAklB0TIv2bks68N8EHtneHeX4LU69KhTrr8m3eBNlJlIMMJfeHT4y__djOdG-nEklAUgKXMVqPU1vWD_B4aRHL65ok8-SK-UvvIhkHRw9sL2QdcFKxDPxJl_GG-YxM/s1600/4.+Laut+dan+langit.png "/></a>
</div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Pemandangan Tepi Laut </a></h3>
<p> Tempat untuk Defresing di Tepi Laut yang Asri. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSUvjYYpXjZJOnimZS7EM8WykZ_NBTXCRAsSXwg3PJ0VN835-jFiOX9d1j7GUtdZl0OKqjQOqnHN6TWKzdDgNCDQiFVVzzvUAl3flvOpNsF-5H4NLw2JxvbnMEqreTclopo0PByWmPe2w/s1600/5.+Panorama.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Alam Pedesaan dekat Pegunungan </a></h3>
<p> Pemandangan yang Asri, Sejuk Pedesaan di Kaki Pegunungan. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='bbc-nav'>
<span class='bbc-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!--New Featured Slider From http://blogbego-creation.blogspot.com --></div>
</b:if>
Setting / Edit terakhir :
Silahkan ganti teks yang berwarna Merah [URL Blog dan Link Image] saya dengan punya kawan
sedangkan teks yang berwarna Biru adalah Penjelasan singkat dari Image Slidenya

  • Kalau semuanya sudah selesai jangan lupa simpan Blog kawan


Berbagi Artikel :

Cara Membuat Featured Slide
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Featured Slide
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

14 Komentar pada : “Cara Membuat Featured Slide”

  1. selamt pagi terimakasaih buat info menarik nya ya http://goo.gl/LuiEKS

    BalasHapus
  2. ;;; :y; :y; :y; :x;

    BalasHapus
  3. Gan gmn sich cara bikin kotak scroll seperti punya agan yg di atas tong sharenya donk terima kasih

    BalasHapus
    Balasan
    1. kotak scroll yang mana ya yang dimaksud, apa Navigasi......
      Coba cari di Daftar Isi karena semuanya saya share :z;

      Hapus
    2. nah gan seperti gambar di bawah ini nih
      http://2.bp.blogspot.com/-E6VZCLti8hE/U1utkY6plFI/AAAAAAAAAxQ/KSHhvnU09-4/s320/Untitled-1.jpg

      Hapus
    3. Bikin gambar/image dulu seperti itu, selanjutnya upploud dan ambil Linknya disisipkan di post blockquote pada template

      Hapus
    4. blh minta kodenya gak bang....

      Hapus
    5. ini kodenya
      http://1.bp.blogspot.com/-bo5_QYs6X-I/UkCTTw0hslI/AAAAAAAAIbQ/wV1h5jS3A4A/s1600/Kertas+%5B590x240%5D.png

      Kalau yang seperti buku tulis
      http://2.bp.blogspot.com/-ekD73AyrRyE/UIpPujCa3jI/AAAAAAAAFgg/GBwtSiVP1UU/s1600/blockquote.png

      Hapus
  4. parah om, cek http://adventureofaslafa.blogspot.com/
    bantuin.. :(

    BalasHapus
    Balasan
    1. apanya yang parah kawan, itu slidenya taruh diatas posting karena lebarnya 630px, jangan disidebar :x;

      Hapus
  5. gan, yang harus dimasukin ke html/javascript entu. ane udah masukin dan ane save setelah itu gambarnya gak ada gan. di codenya juga gak ada.

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan