Buton automat.

Am facut cateva schimbari la blog cred ca este evident,am renuntat la a mai adauga la articole thumbnail si am trecut la sitemul de afisare direct in care poti sa vezi tot articolul fara sa mai dai click pe titlul sau vreun buton de ‘citeste tot’ ca sa vezi tot articolul.Bine eu tai articolele care sunt mai lungi pentru ca nu are rost sa vezi un articol foarte lung zic…

M-am gandit cum sa imi fac un buton sai zic automat la articol de citeste tot dupa ce tai articolul cu butonul de taiere pe care implementat wordpress-ul la scrierea unui articol…

Vezi foto:

Iata codurile pe care le am implementate in index.php care in mod normal pentru afisarea continutului avem:

[codesyntax lang=”php” container=”div”]

<?php the_content(); ?>

[/codesyntax]

dar in cazul meu trebuie sa fac cumva ca in momentul cand tai articolul sa afiseze automat butonul.

[codesyntax lang=”php”]

<?php the_content(__( '<span class="citeste-tot">Citeste tot &rarr;</span>' ) ); ?>

[/codesyntax]

Dupa cum se poate observa am adaugat cateva linii in plus si un div class ‘citeste tot’ pentru ai da in css forma vizuala dorita.

Iata codurile pentru style.css

[codesyntax lang=”css”]

.citeste-tot {
box-shadow:3px 3px 5px #aaa;
 margin-top: 5px;
position: relative;
float: right;
background-color: #ddd;
background-repeat: no-repeat;
border: solid 1px #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100px;
padding: 5px;
display: inline-block;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
text-align: center;
color: #222;

}

.citeste-tot a {color:#222;font-size:14px;}
.citeste-tot a:hover {color:#fff;}
.citeste-tot a:active{color:#aaa;}

.citeste-tot:hover {
   background-color: rgba(26,22,26,1);
   color: #fff;
   font-weight: bold;
}
.citeste-tot:active {color:#aaa;
   background-color: rgba(56,215,255,1);
   background-repeat: repeat;
}

[/codesyntax]

Asadar ori de cate ori tai articolul butonul apare automat in forma pe css pe care am dorito.Va puteti juca in css sa sa va faceti altceva mai frumos.Pentru alte nelamuriri puteti comenta si voi raspunde.

 

5 comentarii la “Buton automat.

  1. Te indrepti cu pasi repezi spre un adevarat producator de teme. Imi place foarte mult cum lucrezi, sper sa ramane valbila oferta ta si pe mai tarziu.

Faci un comentariu sau dai un răspuns?

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Alte articole din aceiasi categorie

Salut și bine ai venit pe acest blog!

Eu sunt Bucur si acesta este blogul meu in care vei gasi articole in majoritatea lor despre Programare web Front-end si un pic de back-end.

Iată cum mă poți contacta:

Ai o intrebare? nu ezita sa ma contactezi.

Vei primi un raspuns in cel mai scurt timp posibil.

    Numele tau (necesar)

    Email (necesar)

    Subiect

    Mesaj

    Prin utilizarea acestui formular sunteți de acord cu stocarea și manipularea datelor dvs. pe acest site web.

    Daca vrei Front-end in general recomand:
    https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/
    https://www.udemy.com/course/advanced-javascript-concepts/
    https://www.udemy.com/course/complete-react-developer-zero-to-mastery/
    Daca vrei doar Javascript recomand:
    https://www.udemy.com/course/the-complete-javascript-course/
    https://www.udemy.com/course/advanced-javascript-concepts/