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.

0 Response to "membuat Slider Widget Pada Blog dengan mudah"

Post a Comment