Come creare uno slider Blogger di post casuali

Come creare un widget Blogger che mostra i post casuali in una pagina o uno slider dei post. È importante mettere in risalto i propri post, dato che quelli più datati avranno meno rilevanza. Attraverso il codice HTML è possibile modificare l'intero sito e aggiungere uno slider dei post casuali, come ti faró vedere qui sotto.

Per prima cosa apri il modello html del tuo sito Blogger.

Quindi andiamo su Blogger, sulla sinistra clicchiamo su "Tema"
Ora "modifica tema"
Clicchiamo Crtl + F (come ti ho spiegato qui) per cercare con semplicità il tag <head> e subito sotto incolliamo questo codice:

Ora inseriamo il CSS nel modello, cerchiamo quindi ]]></b:skin> e subito sopra incolliamo il seguente codice:

/* CSS post casuali */  
.mbt-random{margin:0 5px;border:0;width:100%;overflow:hidden}  
.mbt-random .slides{list-style-type:none;margin:0 auto;padding:0}  
.mbt-random li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}  
.mbt-random .flex-control-nav li{display:inline-block;margin:0 2px}  
.mbt-random .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}  
.flex-direction-nav .flex-prev{left:-50px}  
.flex-direction-nav .flex-next{right:-50px;text-align:right}  
.mbt-random .flex-control-paging{display:none}  
.flex-direction-nav{position:relative;top:-250px}  
.mbt-random .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}  
.mbt-random .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}  
.mbt-random li a{color:#0080ff;text-decoration:none}  
.mbt-random i{color:#999;padding-right:5px}  
.mbt-random .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#63a7e8;padding:3px 10px;display:inline-block}  
.mbt-random .icontent{line-height:1.5em;margin-top:5px} 
.mbt-random div span{margin:0 5px 0 0;display:inline-block;font-weight:400}  
.mbt-random .mbttitle{font-family:oswald;font-size:20px;color:#ffffff;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#329cff;padding:15px 10px;display:block}  
.mbt-random .mbttitle:hover,.mbt-random .itotal a:hover{color:#fff;text-decoration:none}  
.mbt-random .iedit a{text-decoration:none;color:#999;cursor:pointer}  
.mbt-random .iedit:before,.mbt-random .iauthor:before,.mbt-random .itag:before,.mbt-random .icomments:before,.mbt-random .idate:before,.mbt-random .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}  
.mbt-random .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}  
.mbt-random .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}  
.mbt-random .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}  
.mbt-random .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}  
.mbt-random .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}  
.mbt-random .icomments a, .mbt-random .itag a{color:#0211e2;font-family:arial;font-size:12px}  
.mbt-random .icomments a:hover, .mbt-random .itag a:hover{text-decoration:underline}  
.mbt-random .itag:before{content:'\f02c';padding:0 3px 0 7px;color:#fff}  
.mbt-random .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}  
.mbt-random .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px}  
.mbt-random .idate:before{content:'\f073';padding:0 5px;color:#fff}

Infine creiamo un widget andando su layout
Selezioniamo quindi "HTML/script" Infine incolliamo il seguente codice:

Ed ecco creato lo slider dei post casuali. Per le altre guide Blogger clicca qui.
Segui Help Tecno Blog sui canali social per rimanere aggiornato sulle ultime novità, basta un click:
-Seguici su Facebook😄
-Seguici su Twitter😀
-Seguici su YouTube😁
-Iscriviti ai Feed😏

Offerte consigliate:

Help Tecno Blog - Guide Internet

Cerca nel blog

Come creare uno slider Blogger di post casuali

Commenti

Posta un commento