Sedikit Info Seputar Auto Sliding Featured Post Widget for Blogger Terbaru 2017 - Hay gaes kali ini team Android Apps For Free, kali ini akan membahas artikel dengan judul Auto Sliding Featured Post Widget for Blogger, kami selaku Team Android Apps For Free telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Apps For Free. semoga isi postingan tentang Artikel trik ngeblog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Auto Sliding Featured Post Widget for Blogger Terbaru
link: Auto Sliding Featured Post Widget for Blogger

Berbagi Auto Sliding Featured Post Widget for Blogger Terbaru dan Terlengkap 2017

Assalamualaikum wr.wb

Postingan kali ini membahas Auto Sliding Featured Post Widget for Blogger. Widget ini menampilkan posting lebih maju. Silahkan cek dulu demonya :

Demo

Jika kamu suka, ini adalah cara untuk menambahkannya di blog Mas Bro. Ok langsung saja menuju ke :

Langkah 1
Pergi ke Blogger > Dashboard > Edit HTML terlebih dahulu download full template Mas Bro untuk mengantisipasi kesalahan dalam memasukkan code html >Centang Expand html.

Langkah 2
Cari (Ctrl + F) code html <body> kemudian paste kode berikut tepat dibawah tag <body>

<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/smoothscroll.js' type='text/javascript'/>
<link href='http://www.digitalbunch.com/wp-content/uploads/2011/07/smooth-slider-hacktutors.css' id='smooth_slider_css-css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/hacktutorsscript.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/jquery-hacktutors.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/slide1.js' type='text/javascript'/>
<style media='screen' type='text/css'>
#smooth_sldr {
width:560px;
height:180px;
background-color:#ffffff;
border:0px solid #999999;
}
#smooth_sldr_items {
padding:10px 18px 0px 26px;
}
#smooth_sliderc {
width:516px;
height:140px;
}
.smooth_slideri {
width:506px;
height:140px;
}
.sldr_title {
font-family:Georgia, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
font-style:normal;
color:#000000;
}
#smooth_sldr_body h2 {
line-height:17px;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
font-style:normal;
color:#000000;
margin:0px 0 5px 0;
}
#smooth_sldr_body h2 a {
color:#000000;
}
#smooth_sldr_body span {
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
font-style:normal;
color:#333333;
}
.smooth_slider_thumbnail {
float:left;
margin:0px 5px 0 0px;
width:165px;
height:120px;
border:1px solid #000000;
}
#smooth_sldr_body p.more a {
color:#000000;
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:12px;
}
#smooth_sliderc_nav li {
border:1px solid #333333;
font-size:12px;
font-family:Arial, Arial, Helvetica, sans-serif;
}
#smooth_sliderc_nav li a {
color:#000000;
}
.sldrlink {
padding-right:40px;
}
.sldrlink a {
color:#333333;
}
#slider {
background:#333;
height:205px;
display:block;
margin:22px 0 10px 10px;
width:565px;
}
</style>

jangan lupa simpan template blog.

Langka 3

Pergi ke Design > Page Element > Add a Gadget > HTML / JavaScript kemudian masukkan kode berikut.

<div id="slider">
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'smooth_sliderc', //id of carousel DIV
beltclass: 'smooth_sliderb', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'smooth_slideri', //class of panel DIVs each holding content
autostep: {enable: true, moveby:1, pause:7000},
panelbehavior: {speed:500, wraparound: false, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_prev.png', -8, 70], rightnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_next.png', 0, 70]},
statusvars: ['imageA', 'imageB', 'imageC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
onslide:function(){
  jQuery("#smooth_sliderc_nav li a").css("fontWeight", "normal");
  jQuery("#smooth_sliderc_nav li a").css("fontSize", "12px");
  var curr_slide = imageA;
     jQuery("#sldr"+curr_slide).css("fontWeight", "bolder");
  jQuery("#sldr"+curr_slide).css("fontSize", "17px");

}
})
</script>
<noscript>
</noscript>
<div id="smooth_sldr">
<div id="smooth_sldr_items">
<div id="smooth_sldr_body">
<div id="smooth_sliderc">
<div class="smooth_sliderb">
<div class="smooth_slideri">
<a href="http://www.hacktutors.info/2010/09/releasing-platinum-blogger-template.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Qe0p7MzmqhpbVp2jfynLsc4_CMVDd2g8UXj1vyJoLn5AkxmQ9N_H5KwLv9SQLFlYfp1ndSAvjJAyGKhpwg1jvVktYCo3hqK3zlFJi5Of1htzp-_hy_Vk4jAx4ouJELvsfqZSHcKfgT8/s400/Platinum+Blogger+Template.JPG" alt="Platinum Blogger Template" /></a>
<h2><a href="http://www.hacktutors.info/2010/09/releasing-platinum-blogger-template.html">Platinum Blogger Template</a></h2>
<span>I converted Platinum WordPress theme into Blogger Template. Originally, Brian Gardner designed it and I converted it for all Blogger users and make it available for absolutely free.</span>
<p class="more"><a href="http://www.hacktutors.info/2010/09/releasing-platinum-blogger-template.html">Read More</a></p>

</div>
<div class="smooth_slideri">
<a href="http://www.hacktutors.info/2011/06/google-pagerank-update-june-2011.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW61MO3HhpPoKhyphenhyphen9PfyPUTSO1EDe2S40LUxuwDZvFZfqsJBUH_03_myw_CrHw1UaTgCliiOkXxEm6KNZPj1RcqzZXUcEcarsaHrwZsD1B7eCKLPJZuxY9Ul-USx2aMR6ITQMptozJ1CU4/s1600/google-pagerank-update.png" alt="Google Page Rank Update" /></a>
<h2>
<a href="http://www.hacktutors.info/2011/06/google-pagerank-update-june-2011.html">Google Page Rank Update</a>
</h2>
<span>Google PageRank has been updated in June 2011 for the second time in this year. HackTutors got back its PR while it was 0 before. Now its PR 3.</span>
<p class="more"><a href="http://www.hacktutors.info/2011/06/google-pagerank-update-june-2011.html">Read More</a></p>

</div>
<div class="smooth_slideri">

<a href="http://www.hacktutors.info/2011/05/high-pr-backlinks-within-minute.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX29wzF0kzb-sMGj4DLZOA0N0VShk0lIdpjev8m8Y-9VlN0i_vYOwjU7m1wPsORCaHJrrRmbe39OXpHSkywuZ1Iwt8Cg6t7mU3CcURKyEB4AxS0pqF23yQiCHnucHhsBr6yo1kTz8VjkU/s1600/FinalWSOcover.png" alt="Get Thousands of High PR Backlinks Within a Minute" /></a>
<h2><a href="http://www.hacktutors.info/2011/05/high-pr-backlinks-within-minute.html">Get Thousands of High PR Backlinks Within a Minute</a></h2>
<span>Now, you can discover up to *PR 7 DoFollow Pages* to place your Backlinks instantly! Yes you don't have to wait for a minute.</span>
<p class="more"><a href="http://www.hacktutors.info/2011/05/high-pr-backlinks-within-minute.html">Read More</a></p>

</div>

</div>
</div>
</div>
</div>
<ul id="smooth_sliderc_nav">
<li><a id="sldr1" href="#" >1</a></li>
<li><a id="sldr2" href="#" >2</a></li>
<li><a id="sldr3" href="#" >3</a></li>
</ul>
<br class="sldrbr" />
<div class="sldrlink"><a href="http://www.clickonf5.org/smooth-slider" target="_blank">Smooth Slider</a></div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#smooth_sliderc_nav a').click(function() {
var id = jQuery(this).attr('id');
var step_to_slide = id.replace(/sldr/, "");
document.getElementById(id).href = "javascript:stepcarousel.stepTo('smooth_sliderc', "+step_to_slide+")";
});
});
</script>

Sekarang, ganti tulisan warna biru dengan URL post Mas Bro. Ganti tulisan warna merah dengan URL image Mas Bro . Kemudian, ganti tulisan warna hijau dengan post title dan warna pink dengan post deskripsi.
Simpan widget.

Langkah 4

tempatkan widget di atas Blog Post seperti gambar berikut

Akhirnya Mas Bro simpan dan lihat blog Mas Bro.
Perlihatkan hasil kerja Mas Bro dengan meninggalkan komentar di postingan ini, saya akan mengunjungi blog Mas Bro.

Demikian semoga bermanfaat

Wassalamualaikum wr.wb

Itulah sedikit Artikel Auto Sliding Featured Post Widget for Blogger terbaru dari kami

Semoga artikel Auto Sliding Featured Post Widget for Blogger yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Apps For Free. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Auto Sliding Featured Post Widget for Blogger

Android Apps For Free

Auto Sliding Featured Post Widget for Blogger

Berbagi Auto Sliding Featured Post Widget for Blogger Terbaru dan Terlengkap 2017

Itulah sedikit Artikel Auto Sliding Featured Post Widget for Blogger terbaru dari kami

Share this

Related Articles :

Entri Populer