Widgetul Posturi asemanatoare cu imagini

Scopul widgetului Posturi asemanatoare

Widgetul afisaza la sfarsitul fiecarui post cateva linkuri impreuna cu imaginile aferente catre alte posturi asemanatoare de pe blogul respectiv. Este un widget foarte folositor datorita usurintei de navigare pe care o ofera vizitatorilor blogului.

Cel mai des utilizate astfel de widgeturi sunt:

• LinkWithin related posts with thumbnails si
• widgetul creat de cei de la Blogger Plugins

Widgetul Posturi asemanatoare de la LinkWithin

Pentru a beneficia de acest widget intrati pe pagina www.linkwithin.com si folositi formularul din partea dreapta. Dupa ce o sa completati toate campurile apasati "Get Widget!" si urmati indicatiile din pagina respectiva.

Cu toate ca acest widget este foarte usor de implementat, prezinta cateva dezavantaje:

• cand dai click pe unul din posturile asemanatoare din widget, o sa fi redirectionat mai intai catre pagina celor de la LinkWithin, iar de acolo catre postul respectiv, pe care ai dat click (aceasta redirectionare se face foarte rapid si este foarte posibil sa treaca neobservata);
• nu poti aduce modificari asupra aspectului sau configuratiei widgetului;

Personal prefer urmatorul widget, care este implementat si pe acest blog si il puteti vedea in "actiune".

Widgetul Posturi asemanatoare de la Blogger Plugins

Urmeaza pasii de mai jos pentru a instala acest widget.

1. Te conectezi la contul de Blogger -> Design -> Editati HTML;
2. Bifeaza Extindeti sabloanele control si cauta in sablonul blogului linia </head>;
3. Inaintea acesteia introdu codul de mai jos:
   
   
   

   01	<!--Start Widget Posturi Asemanatoare-->

   02	<!-- sterge --><b:if cond='data:blog.pageType == &quot;item&quot;'>

   03	<style type="text/css">

   04	#related-posts {

   05	float:center; text-transform:none;

   06	height:100%; min-height:100%;

   07	padding-top:5px; padding-left:5px;}

   08

   09	#related-posts h2{

   10	font-size: 1.6em; font-weight: bold;

   11	color: black;

   12	font-family: Georgia, “Times New Roman”, Times, serif;

   13	margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; }

   14	#related-posts a{color:black;}

   15	#related-posts a:hover{ color:black; }

   16	#related-posts a:hover { background-color:#d4eaf2; }

   17

   </style>

   18	<script type='text/javascript'>

   19	var defaultnoimage="http://6y.ro/ad34a3";

   20	var maxresults=5;

   21	var splittercolor="#d4eaf2";

   22	var relatedpoststitle="Posturi asemanatoare";

   23

   </script>

   24	<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

   25	<!-- sterge --></b:if>

   26	<!--End Widget Posturi Asemanatoare-->

4. Cauta in sablonul blogului linia (este posibil sa difere de la caz la caz):
   

   1	<data:post.body/>

   sau
   

   1	<div class='post-footer-line post-footer-line-1'>

   sau
   

   1	<p class='post-footer-line post-footer-line-1'>

5. Imediat dupa linia gasita anterior introdu codul:
   
   
   

   01	<!-- Start Widget Posturi Asemanatoare-->

   02	<!-- sterge --><b:if cond='data:blog.pageType == &quot;item&quot;'>

   03	<div id='related-posts'>

   04	<b:loop values='data:post.labels' var='label'>

   05	<b:if cond='data:label.isLast != &quot;true&quot;'>

   06

   </b:if>

   07	<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>

   08	<script type='text/javascript'>

   09	removeRelatedDuplicates_thumbs();

   10	printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

   11

   </script>

   12	</div><div style='clear:both'/>

   13	<!-- sterge --></b:if>

   14	<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

   15	<a href='http://www.blog-help.net/'><img style="border: 0" alt="Tutoriale Blogspot Blogger" src="http://6y.ro/132f" /></a>

   16	</b:if></b:if>

   17	<!-- End Widget Posturi Asemanatoare-->

6. Poti aduce cateva modificari widgetului:
   
   • var maxresults=5 numarul de linkuri afisate de widget;
   • var relatedpoststitle="Posturi asemanatoare" titlul widgetului;
   • var defaultnoimage="URL Imagine" atunci cand unul dintre posturi nu cuprinde si o imagine, o sa fie afisata o imagine generica, care poate fi stabilita de catre tine.
   • daca vrei ca acest widget sa apara pe toate paginile blogului tau, sterge din codul de mai sus liniile care incep cu <!-- sterge -->.

Daca ti-a fost folositor aces tutorial poti sa dai un Like sau sa lasi un comentariu mai jos!

Posted in: