Ancora una volta, e ultimamente sembra stia diventando un'abitudine, useremo JavaScript per risolvere un compito che il solo CSS sembra impossibile da realizzare.
Si tratta di inserire qualsiasi elemento in qualsiasi parte di un post (entro un certo limite) e di farlo automaticamente in modo che appaia in tutti i post allo stesso modo. Menziono una pubblicità nel titolo perché di solito è la più richiesta, ma potrebbe anche essere un pulsante social media come quello che vedete attualmente nei miei post, o qualsiasi altro contenuto. Anche un video, ovviamente.
Le limitazioni sono dovute al fatto che non useremo alcun markup HTML aggiuntivo, ma con un box con una classe o un ID creato a tale scopo e inserito manualmente in un punto specifico del post, il sistema che segue sarebbe il più preciso possibile.
Tuttavia, quello che sto cercando di fare è evitare di dover inserire manualmente del codice extra nelle voci, quindi sceglieremo semplicemente se farlo dopo un paragrafo, dopo due o dopo quanti sono necessari.
La prima cosa da fare è creare il box con ciò che vogliamo visualizzare e dargli un po' di stile.
In questo primo esempio, si tratta di un annuncio Adsense, quindi incolleremo semplicemente il codice che fornisce quel servizio. Naturalmente, inseriremo tutto quel codice in un box con un ID che potremo usare in seguito per identificarlo; in questo caso, adsense1
. Poiché vogliamo che questo codice appaia in tutti i post, lo includeremo nel template. Così non dovrete cercare un altro posto, magari più efficiente ma così personalizzato da risultare diverso in ogni caso: lo posizioneremo subito prima del </body> di chiusura , dove dovrebbe funzionare bene per tutti.
<div id='adsense1'>
<script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<!-- Blocco adattivo con caratteri jolly -->
<ins class='adsbygoogle'
style='display:block'
data-ad-client='ca-pub-XXXXXXXXXXXXXXX'
data-ad-slot='XXXXXXXXXXXX'
data-ad-format='auto'></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Il passaggio successivo, che aggiungeremo anche dopo il passaggio precedente nel modello, consiste nel formattare il box contenitore con CSS. Trattandosi di un annuncio pubblicitario di 300x250 px, le sue dimensioni saranno quelle. Lo posizioneremo a sinistra del testo e i margini saranno impostati in modo che non aderisca troppo al testo. Inizialmente, lo imposteremo su display: none in modo che non sia visibile nemmeno in fondo alla pagina. Useremo JavaScript per renderlo visibile quando necessario.
<style>
#adsense1 {
display: none;
float: left;
width: 300px;
height: 250px;
margin: 0 20px 10px 0 ;
overflow: hidden;
background: #ccc;
}
</style>
E infine, sempre da aggiungere dopo quanto sopra, la parte JavaScript.
Ho usato jQuery, quindi se non hai quella libreria nel tuo template, non dimenticare di farlo ora. Includi semplicemente una riga come questa. In Blogger, sarebbe subito dopo ]]></b:skin> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
Partendo dal presupposto che le interruzioni di riga separino i paragrafi, il funzionamento è semplice: cerca la seconda interruzione di riga ( <br/> ) che hai incluso nel contenuto di ogni post e subito dopo inserisce il blocco #adsense1 generato in precedenza . Lo rende anche visibile con il blocco in linea che vedi.
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('#adsense1').insertAfter($('br:eq(1)')).css('display','inline-block');
});
//]]></script>
In alcuni casi, dovrai impostare il valore "1" tra parentesi di eq() su 0. Questo dipenderà dal fatto che il tuo editor di post inserisca una o due interruzioni di riga per separare i paragrafi. È una questione di sperimentazione.
Per farlo dopo il secondo, il terzo o i paragrafi successivi, dovrai semplicemente aumentare quel numero, ma se hai post brevi intervallati da post più lunghi, è meglio non usare un numero troppo alto.
Fai solo attenzione a non inserire interruzioni di riga all'inizio dei tuoi articoli per evitare che il riquadro #adsense1 venga inserito dove non lo desideri.
Per un blocco di annunci diverso altrove, crea semplicemente un altro riquadro con un ID diverso ( ad esempio #adsense2 ), crea lo stile necessario e aggiungi un'altra riga identica a quella dopo $(document).ready(function() { , ma con quell'altro ID e il numero di interruzioni di riga richieste.
E ora, seguendo lo stesso sistema, che ne dici di aggiungere un pulsante social all'inizio dei post invece di un annuncio?
<style>
#networks {
display: none;
float: right;
width: 76px;
margin: 0 0 10px 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
background: #eee;
text-align: center;
}
</style>
<div id='redes'>
<!--Twitter -->
<div class='bottwi'>
<a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
<!--Facebook-->
<div class='botfac'>
<iframe src='//www.facebook.com/plugins/like.php?width&layout=box_count&action=like&show_faces=false&share=true&height=65' scrolling='no' frameborder='0' style='border:none; overflow:hidden; altezza:65px;' allowTransparency='true'></iframe>
</div>
<!-- Google +1 -->
<div class='botgoo'>
<div class='g-plusone'/>
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
</div>
</div>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('#networks').insertAfter($('br:eq(3)')).css('display','inline-block')
;
//]]></script>
So che non tutti voi arrivate alla fine di ogni post che scrivo, ma per coloro che ci riescono, questo link vi porterà a un CodePen dove potrete esercitarvi e vedere una variante per posizionare la barra dei pulsanti proprio all'inizio del post, usando come riferimento il corpo del post che tutti i post di Blogger includono.
Vogliamo dare un'occhiata a un altro post a caso, nel caso lo trovassi utile, o forse preferisci essere più sistematico e iscriverti ai nostri post via email ? Puoi anche stampare questo articolo e, naturalmente, condividerlo sui social media se ti è piaciuto.
Commenti
Posta un commento