Cara Mudah Membuat Postingan Slide ringan dan keren

Navigasi Info - salah satu membuat tampilan blog atau website kalian terlihat menjadi indah dan keren ialah dengan menambahkan berbagai fitur widget salah satunya dengan menambahkan fitur slide postingan selain memperindah website kita slide postingan juga dapat mengurangi bounce blog , meningkatkan visitor serta backlink internal blog kita.

Cara Mudah Membuat Postingan Slide ringan dan keren

hal-hal tersebut  dapat meningkatkan point DA maupun PA pada blog yang kita buat akan tetapi dapat mengurangi kecepatan website kita oleh sebab itu saya akan membagikan kodingan slide postingan yang cukup ringan yang mana menggunakan sistem CND yang mana tak terlalu memberatkan server website kalian contoh hasilnya dapat kalian lihat dibawah ini.

yang mana kodingan ini saya peroleh dari berbagai sumber jika kalian tertarik ingin menggunakannya kalian dapat langsung mencoba langkah-langkah pemasangan kodingan berikut ini : 

Cara Membuat Featured Post Slide di Blogger

untuk membuat slide post auto sebenarnya tidak lah sulit cukup memasukan beberapa kode script di bawah ini untuk lebih jelasnya kalian ikuti langkah-langkah berikut ini:

• Langkah awal kalian menuju dasbor blogger
• Kemudian pilih menu tata letak / layout
• Dan klik lokasi widget kalian inginkan
• pilih HTML/Javascript
• lalu kalian copy kode dibawah ini paste di dalamnya
• lalu simpan 

       

CODE FEATURED POST SLIDER

<style> #featuredpost {margin:15px auto;} #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100% ;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://1.bp.blogspot.com/-KE8w1NNKRpE/YFjLeQ-kVwI/AAAAAAAACqw/CF10Dt1f5K8cUP3cLUBBWUkml55sgs8JgCNcBGAsYHQ/s300/Navigasi%2B%25281%2529.png);background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){   #slides ul{height:600px}   #slides li:nth-child(1){width:100%;height:50%}   #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}   #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}   #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}   #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}} </style> <script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"> </script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"https://navigasi.eu.org", MaxPost:5, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:false, tagName:"Bisnis online" }); }); //]]> </script> <div id="featuredpost"></div>

keterangan kodingan : 

1. background-image:url(https://1.bp.blogspot.com/-KE8w1NNKRpE/YFjLeQ-kVwI/AAAAAAAACqw/CF10Dt1f5K8cUP3cLUBBWUkml55sgs8JgCNcBGAsYHQ/s300/Navigasi%2B%25281%2529.png) ganti dengan url gambar kalian sesuai dengan blog kalian ini berfungsi untuk postingan yang tidak bergambar gambar ini menjadi pembackup nya
2. blogURL:"https://navigasi.eu.org", url link ini kalian ganti dengan blog website kalian 
3. autoplay:false, ganti dengan true jika ingin secara otomatis melakukan slide dengan sendirinya akan tetapi jika kalian menggunakan autoplay slide SEO kalian akan menurun walau tampilannya jadi lebih keren jika DA atau PA kalian tinggi saya rasa tak masalah.
4. tagName:"Bisnis online" ini berfungsi untuk menampilkan postingan sesuai label kalian dapat menganti fengan label blog kalian ingikan akan tetapi jika ingin menampilkan postingan terbaru kalian cukup ganti dengan False 

 

selamat mencoba dan terima kasih telah berkunjung .pada blog kita

Berbagi :