IMPAGINAZIONE SU STEEMIT - GUIDA AI COMANDI AVANZATI (parte 2 di 2)

in #markdown7 years ago (edited)

impaginazione.jpg

GUIDA ALL'IMPAGINAZIONE SU STEEMIT

(parte 2 di 2)


Come promesso eccoci alla seconda parte della guida. Colgo l'occasione per ringraziare @cheftony e @alexzicky che hanno a loro volta creato degli utilissimi articoli a cui vi rimando, li trovate rispettivamente QUI e QUI in questo modo avrete ulteriori risorse per approfondire l'argomento Markdown, HTML e impaginazione.


IMMAGINI CON COLLEGAMENTO IPERTESTUALE

Le immagini su steemit generalmente vengono visualizzate con le dimensioni di 1024x768 ecco che se volete far apprezzare il vostro lavoro fotografico è sempre meglio inserire un link che rimanda alla foto per vederla in alta risoluzione.
Esempio:

lion-wild-africa-african.jpg

Per farlo dovete:

  1. Inserire la vostra immagine come fate di solito
  2. Attendere il caricamento
  3. Racchiudere tra parentesi quadrate il codice che è apparso dopo il caricamento
  4. Copiare il link che inizia per https
  5. Incollare il link appena copiato tra parentesi rotonde
    FINE

Attendere il caricamento della gif seguente
per visualizzare l'intero procedimento

🐌_____🐌_____🐌_____🐌_____🐌_____🐌_____🐌_____🐌_____🐌_____

IMAGE BUTTON.gif

A questo punto chiunque voglia ammirare la vostra immagine con una risoluzione superiore potrà farlo cliccando su di essa.
Chiaramente questa procedura si presta a molteplici applicazioni come la creazioni di bottoni interattivi che rimandano ai vostri post o ad altri siti, ma sta a voi trovare il miglior utilizzo delle immagini con collegamento ipertestuale.


TESTO A DUE COLONNE

Solitamente usato per i post in doppia lingua è una delle funzioni sulle quali ho risposto più volte sul nostro benamato gruppo Steem PostIT quindi ho pensato bene di riportare qua il codice.
Con il codice precedente inoltre otterrete un testo su due colonne giustificato, come intenderci, come quello usato nei giornali!

- codice:

<div class="pull-right">
<p><br></p>
<center>
<img src="https://steemitimages.com/DQmYdWadkc51Md5S1nQR4Qv6wuGhB11KfeNper2yM1PRaD5/Eng_Flag.gif" /></div>
</center>
<div class="text-justify">
Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui
</div>
</div>
<div class="pull-left">
<p><br></p>
<center>
<img src="https://steemitimages.com/DQmfCBB2V2Ua8SwGFfTDo5QhY9MpA2mEWMWM5ibXjRqR9Lk/Ita_Flag.gif" /></div>
</center>
<div class="text-justify">
Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui
</div>
</div>

- risultato:


Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di DESTRA qui


Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di DESTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui Inserite il vostro testo di SINISTRA qui

IMMAGINE ALLINEATA A DESTRA O SINISTRA

Con il seguente codice otterrete un'immagine che può essere posizionata a destra o a sinistra del testo. Ricordatevi di usare immagini di 512 pixel di larghezza per ottenere un risultato ottimale.

- codice:

<div class="pull-right"><img src="http://i.imgur.com/ow7sHn0.jpg" /></div>
INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI

<div class="pull-left"><img src="http://i.imgur.com/ow7sHn0.jpg" /></div>
INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI

- risultato:

INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI
INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI INSERISCI IL TESTO QUI

Spero che queste guide vi siano utili in futuro, magari inseritele tra i vostri preferiti così che quando vi serve un codice lo avrete subito reperibile.


Se vi è piaciuto questo post, upvotate, commentate seguitemi e fate resteem. Grazie per il vostro contributo!

NON DIMENTICATEVI PER FAVORE

thenightflier_steem_upvote180.gif

Sort:  

Grazie, aggiunto ai preferiti!
@remind.bot 8 hours

Mentioning and replying to you here on Thu, 03 May 2018 14:53:14 GMT to remind you of this post.
Please consider upvoting this comment to keep this service running.

Reminding @amico of this post as requested!
Please consider upvoting this comment to keep this service running.

Salvato nei preferiti...grazie mi é molto utile.
Aggiungo che per inserire un collegamento ipertestuale quando il testo è formattato su due colonne si può usare il tag html
<a href="url">link text</a>

Congratulations @thenightflier! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of posts published

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Ottimo lavoro, utilissimo come sempre!

grazie per avermi citato!
In ogni caso non ci avevo pensato al class="" per quanto riguarda la posizione del testo. Ho imparato qualcosa anche oggi :D

Ottimi tutorial! Hai semplificato tutto per noi umani 😊😀 bravo

Ottimo tutorial, utilissimo!

molto utile! Spero soltanto che in un futuro steemit dabbia uno stile più libero per scrivere un post :)

Coin Marketplace

STEEM 0.26
TRX 0.20
JST 0.038
BTC 96315.76
ETH 3565.22
USDT 1.00
SBD 3.90