468x60 Ads

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/AVvXsEgrJAV4yEc6moYsxrvmCQ489dvyeFdgsu5sDPX7m8OkGA4-4cTW6_v45pDCJLb7F8ea9SfuKMiD_cBwUGyLdpi12ulrXAyHDSY4Pznj1m3D0U-DrhMv_EyoIJWiXK3h93UIfi00Nz0bvj6L/s1600/h2.png") repeat-x scroll 0 0 transparent;height: 12px;padding: 10px 0;text-align: center;}
.bbc-pager a {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEintU9D5WVwg-ZaH8QZxjVOY3SaoAD4p1WjWDqUVt58mhFKYvkWCxNHqLfy0TrBDWMo-aUAkU18QxHTAOpJNbVmCVKWaEzV-lW-haM4pboEeiLr1S0iAT2WuBnnM7CDt09SXb_1ujIDKZeW/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4czvJGDRWI7GskHMq1nIRRaDJQfWlZy937gYjW1jtLjIEmimcJfTlVYOADLgwrPSnWnl229tGHCSdwwa9lhfY7B2bt926AFNC2V9bYKBdE63G0F9d8CCp5Y6Eqh-TGEY5032CITeSs31E/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ObtT3qBJLi45kgIyNFuFdeHhj5QZXpEFMFPPkbHYN1sR6xwfXfwGnE9S5wLONU49sv2jS5tZFw6sDicz2LTuD3ZsryljatNcTN3A18ADO9rVs6zqGniJ8v1UM2jTN4uEVlnG5HGPlqvC/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/AVvXsEiSRhNJwPkTfrbi3fX0RXiDGaDC0wur609m2y7puNp1Ser7aeGTrAJt14k2VPJZjmIZYXXRnIfiw2JinlQNpJ42e4T8soDm_fPS2arDHj7ippNYvxS0EomuPHtGbaORBZ8KaHQ8EvVzrAM/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/AVvXsEj-7Ae0_SWd1ZXUyH2A1as8QpF87WxRpwZj10rUT7ulHryGBlVft8q-Ty7Z6Q3XEgykyPMQ6Is7v2mwQV3IZmj2wBPvm19eyb0_D5null4oUMdcjY8kTWQ1puCzdwfhe84cGpGCLXoh6z4/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/AVvXsEjAbiu9BmgkKwI7_pnEBBdgiyHPEWVE5FGMgSZ2piGu8wVpXBPgrsSXiaAyfaD93EwJ-m1LezcEzB-eZMSNrhEKEIJ-ZtHdtszEjNOxGumH8o2BYhOBFM-sFL_nZWOSMAstn2eqvUhxLcA/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/AVvXsEg5AMYfZjhupy9_uece3uXlOV7jF8c0fJ8VnPgVttDC0kuo3bszixaklkC6hTY7iSBZwt0wdA16564ISYO6SoGPnp8eRDQ5M2dlsf8mF2k_T6cIhebTFMqtRFwyg7YOdBNU-8YjlVBCaCw/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/AVvXsEipu01kgiIMnMyU5A5uPQpONJmgxIqLcY9vHyYwHEeVSfC2k7f4DjNfDgmo9wAPtdsps4MXc9imUbc_-IKEcDU6VAisB6SM71b6UDxPLzXnicnEHIxbbaEr7Uhpmvr3JdLYStY18sjwY9g/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

0 comments:

Post a Comment