membuat Slider Widget Pada Blog dengan mudah


 kita tahu bahwa mendapatkan lebih banyak lalu lintas di blog kita menggunakan blog lain yang populer sangat mudah . Semua dari kita akan memiliki lebih dari satu blog . Kami harus mendapatkan lebih banyak lalu lintas pada masing-masing dari mereka . Widget ini akan membantu Anda untuk mendapatkan traffic yang bagus pada Anda semua blog . Widget ini menunjukkan tulisan terbaru secara otomatis . Ini menunjukkan tulisan dalam bentuk slider . Jika Anda tidak memiliki lebih dari satu blog , Anda dapat menggunakan widget ini untuk blog Anda sendiri . Ini dapat membantu Anda untuk memiliki tingkat bouncing kurang dengan lebih pageviews . Blogging adalah cara teknis untuk membuat uang dengan blog kami melalui monetisasi . Ini membutuhkan lebih banyak tampilan halaman . Widget posting slider terbaru ini otomatis diperbarui secara otomatis ketika Anda diposting di blog Anda . Anda dapat menggunakannya untuk hanya satu blog . Anda harus menempatkan url blog Anda dari mana blog , tulisan akan ditampilkan . Anda harus memilih bagian sidebar untuk menempatkan widget ini . Ini adalah tempat yang tepat untuk menggunakannya secara efektif . Sungguh menakjubkan , diperbarui secara otomatis tulisan menampilkan blog Anda . Mari saya jelaskan bagaimana menambahkan ini menampilkan posting slider widget sidebar blog blogger .

1. Login ke akun Blogger Anda 

2. masuk ke dashboard dan pilih pada bagian Tata Letak Klik Tambah link gadget dan pilih HTML / JavaScript option




<style scoped="" type="text/css">
/*trickstoo modified widget of abt slider widget*/
ul.abt-sidebar-slider *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
ul.abt-sidebar-slider{
font:normal normal 11px embria
}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0;
padding:0;
list-style:none;
position:relative
}
ul.abt-sidebar-slider{
width:100%;
height:500px
}
ul.abt-sidebar-slider li{
height:24.5%;
position:absolute; 
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none
}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){
display:block
}
ul.abt-sidebar-slider img{
border:0;
width:100%;
height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;
height:49.5%;
margin:0 0 2px;
left:0;top:0
}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out
}
ul.abt-sidebar-slider .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
background-position:50% 50%;
background-repeat:repeat-x
}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{
border:4px solid black;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{
background-position:50% 25%
}
ul.abt-sidebar-slider .overlayx:hover{
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";
filter:alpha(opacity=10);-khtml-opacity:0.1;
-moz-opacity:0.1;opacity:0.1
}
ul.abt-sidebar-slider h4{
position:absolute;
bottom:30px;
z-index:2;
color:white;
margin:0;
width:100%;
padding:0 10px;
line-height:1.5em; 
font:embria;
font-weight:normal
}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{
font-size:150%
}
ul.abt-sidebar-slider .label_text{
position:absolute;
bottom:10px;
left:10px;
z-index:2;
color:white;
font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{
display:none
}
.buttons{
margin:5px 0 0
}
.buttons a{
display:inline-block;
text-indent:-9999px;
width:15px;
height:25px;
position:relative
}
.buttons a::before{
content:"";
width:0;
height:0;
border-width:8px 7px;
border-style:solid;
border-color:transparent #535353 transparent transparent;
position:absolute;
top:50%;
margin-top:-8px;margin-left:-10px;
left:50%
}
.buttons a.nextx::before{
border-color:transparent transparent transparent #535353;
margin-left:-3px
}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://wesuccessful.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:6000,
autoplay:true,
tagName:false
});
//]]>
</script>

_____________________________________________________________
Sebelum menyimpan widget ini , Anda harus membuat beberapa perubahan sebagai berikut .

Gantihttp://wesuccessful.blogspot.com dengan URL blog Anda . 

Anda dapat mengubah interval waktu dengan mengganti 6000 . Hal ini dalam milidetik . 

Anda dapat menghentikan auto play dengan mengganti " autoplay : true " dengan " autoplay : false "

Itu saja . Anda selesai! Akhirnya , Klik Simpan Buton tersebut .

Jika Anda mengalami masalah apapun, jangan ragu dan komentar di bawah ini untuk mendapatkan solusi. Berbagi Pengalaman Anda dengan kami dengan memberikan komentar di bawah ini.

membuat Slider Widget Pada Blog dengan mudah Rating: 4.5 Diposkan Oleh: AGUS TRI PURNOMO

0 komentar:

Post a Comment