Ayer me fad instalación del widget Destacado Post en el blog del experimento, ajuste en comprobar por qué es un lío huh? just Acabo de recordar, es debido al tema que se utiliza se realiza mediante la eliminación de la JS y CSS bundle congenital Blogger. Automatic widget Featured Post que se especializa en animación y es el widget predeterminado Blogger no se parece al usar el tema predeterminado Blogger.
< / a>Luego trato de modificar la apariencia del desordenado básico agregando el CSS y el marcado requerido, para el resultado que ves en la página principal de este blog. Bueno, para la aplicación que desea instalar Modificaciones Widget Destacado Post Blogger Innato< / b > puede seguir los sencillos pasos a continuación.
Abra el Blogger > Haga clic en el Theme > Haga clic en Edit HTML > Luego agregue el código a continuación entre la apertura <body> y el cierre </body> por ejemplo, aquí agregué el código debajo del código <div id='main-wrapper'> (personalizar con el tema de tu blog).
& lt; b:if cond='data: view.isHomepage ' >& lt;b:section class = 'featured section' id = 'FeaturedPost'maxwidgets=' 1'showaddelement='yes' ><b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost" version='1'><b:widget-setting name='showSnippet'>true & lt; / b: widget-setting & gt;& lt;b:ajustes del widget><b:widget-setting name='showPostTitle'>true & lt; / b: widget-setting & gt;<b:widget-setting name='showFirstImage'>true & lt; / b: widget-setting & gt;< b: widget-setting name = 'postId' > 2488345024379290588< / b: widget-setting & gt;< b: widget-setting name = 'useMostRecentPost'> false & lt; / b: widget-setting & gt;& lt;h2 class= 'title' & gt; & lt; data: title/></h2 & gt;& lt;/b:widget-settings>< b: includable id = 'main' >& lt;!-- Solo mostrar título si no está vacío -- & gt;& lt;b:if cond='data:title != ""'>
& lt;span class= 'thumbb' >& lt;/b:if & gt;
& lt;b:include name = 'content' />
< b: includable id = 'content' >& lt;/b:incluible>
& lt;div class= 'post-summary' >
& lt;b:if cond='data:showFirstImage y data:postFirstImage != ""'>& lt;span class='label-featurez' ><img class='image lazyload' expr:src='resizeImage(data:postFirstImage, 630,"400:200 & amp;quot;) 'height =' 320 'width =' 630 ' / & gt;& lt;span class= 'label-featured' >
& lt;svg style = 'width: 16px; height: 16px 'viewBox =' 0 0 24 24 ' >
& lt;path d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5 s-2.816.917-3.437 2.25 c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1,943-3,484 zm-6,616-3,334 l-4,334 6,5 c -.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2. 415-2.415 c -.293-.293-.293-.768 0-1. 06 s. 768 -.294 1.06 0l1.77 1.767 3.825-5.74 c. 23 -.345.696-.436 1.04-.207.346.23.44.696.21 1.04 z 'fill = ' #222' / >& lt;/svg>Recomendar
& lt;/span & gt;& lt;/span & gt;
& lt;/b:if & gt;& lt;/span & gt;
& lt;div class= 'featured-wrapp' >< b: if cond = ' data:showPostTitle and data:postTitle != ""'>& lt;h3>
< a expr: href= 'data: postUrl' >
& lt;datos:postTitle/>
< / a>
& lt;b:if cond='data:showSnippet and data:postSummary != ""'>< / h3>
& lt;/b:if & gt;
< p & gt;
& lt;datos: postSummary/>
< / p & gt;
< a expr: href= 'data: postUrl' >& lt;/b:if & gt;
& lt;div class= 'button-feature' >
Leer más
<path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/ & gt;;& lt;svg viewBox = '0 0 24 24'>
& lt;/svg>
< / a>
& lt;/div & gt;
& lt;/div & gt;
< / b: if & gt; < / pre > & lt;/div & gt;
& lt;/b:incluible>
& lt;/b:widget & gt;
& lt;/b:sección>
Luego agregue el siguiente código antes del código </head & gt;< / kbd >
& lt; b:if cond='data: view.isHomepage ' >< estilo & gt;/ * Post destacado */# FeaturedPost1 h2{display:none}#FeaturedPost1{background:#fff;position:relative;overflow:hidden;border-radius:8px;margin:20px;border:1px sólido rgba (0,0,0,0.05)}#FeaturedPost1 .thumbb{position: relative; display: inline-block}#FeaturedPost1 .thumbb img{object-fit: cover;border-radius:8px; transition:all .3s} # FeaturedPost1 .feature-wrapp{padding: 30px 20px 20px 20px}#FeaturedPost1 .feature-wrapp h3{font-size: 20px}#FeaturedPost1 .feature-wrapp h3 a{color:#222} # FeaturedPost1 .feature-wrapp h3 a: hover{color:#999} # FeaturedPost1 .feature-wrapp p{font-size: 14px; margen: 0 auto; color: # 767676; line-height: 1.5} # FeaturedPost1 .button-feature{overflow: hidden}#FeaturedPost1 .button-feature a{text-align:center;margin:20px auto 0 auto;outline:none;display:inline-block;position:relative;overflow:hidden;font-size:14px;padding:6px 14px; background: # f2f9ff; color:#2e87e7; border: 1px solid; border-radius: 99em; font-weight:500;transition: all 0.2 s cubic-bezier(0.4,0,0.2,1)}#FeaturedPost1 .button-feature a: hover{background: # fff} # FeaturedPost1 .button-feature a svg{width: 16px;height:16px;margin:0 0 0 2px; transform:rotate(180deg)}#FeaturedPost1 .botón-cuenta con un svg path{fill:#2e87e7} # FeaturedPost1 .button-feature a: hover svg path{fill:#2e87e7}#FeaturedPost1 .label-feature{position:absolute;bottom:-10px;left:0;display:inline-block;clear:both;z-index:2;font-size:0}#FeaturedPost1 .etiqueta-característica .label-featurez{background:#feca57;color:#222;text-decoration:none;overflow:hidden;margin-right:8px;font-weight:500;border:0;padding:3px 14px 3px 10px; border-radius: 0 99em 99em 0; font-size:13px; box-shadow: 0 2px 6px-2px rgba(0,0,0,0.15)}#FeaturedPost1 .etiqueta-característica .label-featurez svg {margin:0 3px 3px 0}svg{vertical-align: middle}@ media pantalla y (max-width:640px){# FeaturedPost1 .feature-wrapp h3{font-size: 16px}#FeaturedPost1 .feature-wrapp{background: # f7f9f8} # FeaturedPost1 .button-feature a{background:#fff;color:#222;border-color:transparent;margin:10px auto 0 auto;padding:6px 14px;font-size:13px;box-shadow:0 2px 6px-2px rgba(0,0,0,0.15)}#FeaturedPost1 .button-feature a svg{width:14px;height:14px}#FeaturedPost1 .button-feature a svg path{fill:#222} # FeaturedPost1 .feature-wrapp p{display: none}}</estilo & gt;
< / b: if & gt; < / pre >
< blockquote>Edite el código CSS anterior de acuerdo con las necesidades de< / blockquote >
Haga clic en el botón < b > Guardar tema
Abra el Blogger > Haga clic en el Theme > Haga clic en Edit HTML > Luego agregue el código a continuación entre la apertura <body> y el cierre </body> por ejemplo, aquí agregué el código debajo del código <div id='main-wrapper'> (personalizar con el tema de tu blog).
< / a>& lt; b:if cond='data: view.isHomepage ' >< / b: if & gt;< / pre >Luego agregue el siguiente código antes del código </head & gt;< / kbd >& lt; b:if cond='data: view.isHomepage ' >< / b: if & gt;< / pre >< blockquote>Edite el código CSS anterior de acuerdo con las necesidades de< / blockquote >Haga clic en el botón < b > Guardar tema
> Actualizar página > Ahora haga clic en el diseño o Diseño > Haga clic en Editar< / b> en la publicación destacada del widget y seleccione publicar lo que desea que aparezca en la publicación destacada del widget.