Thursday, November 7, 2013

Cara Membuat Featured Slide

Posted on 9:00 PM by Unknown
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://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/AVvXsEhTXJPAU8shUKki3zSbNNjYIXiGEzPcK2ut2w_GbwtxlqFDKRQjCENL2MQiKSxzwvO7pLMflftoyXYv3GTpCV0ShfM-IqskGZWEedCGgsNSTs51DQTH7GIH-Ga-_50dif30A-soRJd6nQ8X/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/AVvXsEj9jBcWq7hPMuJONhmswB_jhJ6-5QQKcXzQ_yvOIkxTmmq3lkJbRvhxwd2xYrORjA4FnC-xk8r1ub8ycMRIWIp_Vc-yXUKRlKiXhtd-KaoVncSjavB2ZCYBJQbbYNuktSM2E_D0JOlFaJ5B/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/AVvXsEjSzAmD-sInF0laUY76apHmUpfCq_oIVJ-i3eSVpJthSsBs-mSyekh7NRV4s_waBiV8xtdFiPNXUa260QNacb25MOkqG1IyeQ4-3HuytHCEoVEguFwjks9g1zc-SEaf7Z2NLiqVGcizXHGC/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/AVvXsEjo57KnvhW9_TXumC_9zyvxXj8eLoq_BjIJWAYgwlB_luttzTXMlvHrjs09KyXKqALslDmbpIix9a2qYXVuTIsk7c2rVEzHWR-6WEKoN-a2S9wmYILDRVxmtGfFzMslyaTUX7oq8bYYHVSp/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://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://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://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://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://blogspot.com/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-5YXrdfTaSSunbJR3baGQCLyG1caS_3Smavu5YBNAz220rBDV4X1FkU_p9_KIdwC2iAwanKI5knYraUP-MwJx8AQFNjkqsYPHkX4W8ibelYMqa7LX9LDr6qphffY3lL_pZx07GWx7nAA/s1600/1.+Kolam+air+terjun.gif"/></a></div>
<div class=bbc-content-wrap>
<div class=bbc-content>
<h3 class=bbc-title>
<a href=http://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://blogspot.com/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFnyFoOGGMngMp3b9ddeJSgKlDGB8NhYccYD_bGDjzghr8R6Adi7EXWoAWFcvkO1EQzUAEKV50GGEoJ7zWFH4B6KhOMaIyZ8bxpnM2IXg_-mzFtBLsSy-mlvtTtx8bwPuxYtNm6evnKJg/s1600/2.+Jalan+Pegunungan.png "/></a></div>
<div class=bbc-content-wrap>
<div class=bbc-content>
<h3 class=bbc-title>
<a href=http://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://blogspot.com/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLnIr1AEysEpNi9HeCIcFnSnTt0d6e6Hv3xt319wLIOuM2szai4Cb9Ep0yPdXqf29_vIkFR0zEtalYG0rCl_h8enh763uZpTTSkr6hhWPLLVt8b0pfXJi0nkCULb3JmXTGB6xwYT8v2SI/s1600/3.+Kaca+Pecah.png "/></a></div>
<div class=bbc-content-wrap>
<div class=bbc-content>
<h3 class=bbc-title>
<a href=http://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://blogspot.com/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtc79VM8GpzgngnWLn8iAswzpq5itCUCNqlLt2uXXVM_blJm7gN0mUEcezw2G3b-28QdNvKwEj2-l3Y6nTv_K5D773S5l_ngYzCHFrZ24_JDCK_YeNj2n16RA3qAa9FGTOMKccoduSiFQ/s1600/4.+Laut+dan+langit.png "/></a>
</div>
<div class=bbc-content-wrap>
<div class=bbc-content>
<h3 class=bbc-title>
<a href=http://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://blogspot.com/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGM0RqevKk8rIbhbWSeoSIQfLZxTdmnpI6-WT97OsDE-9eMdKOS1mWVy1WySYYsJRNrAqq2PmeEMLQlIf4wdxiG8O0M6SqlGccmaeFVhWoQr6TW4RQFuVsKvjNk1aPeiqIkCztr5iuwY/s1600/5.+Panorama.png "/></a></div>
<div class=bbc-content-wrap>
<div class=bbc-content>
<h3 class=bbc-title>
<a href=http://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://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

This entry was posted in , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)