Dodajemy Wykop do Bloggera

Wykop to serwis do którego możemy dodawać ciekawe strony. Każda dodana informacja jest oceniana i dyskutowana przez społeczność internautów. Od niej zależy czy dany wpis będzie popularny czy też nie. Jednym ze sposobów wzbogacenia Bloggera o możliwość dodawania wpisów do wykopu jest mój gadżet Podziel się. W tym poście przedstawię drugą możliwość. Na stronie wykopywarki mamy dostępne kilka kodów, które można umieścić bezpośrednio w szablonie naszej strony. Informacja o osobach, które również uznały nasz post za ciekawy (wykopały go) będzie na bieżąco aktualizowana. Pytanie tylko gdzie go wkleić. Możliwości jest kilka, albo na początku treści posta, albo w jego nagłówku, albo pod postem. Przyjrzyjmy zatem się standardowej wykopywarce (duża ikona z ilością wykopów). Zmodyfikujmy trochę kod tak, aby edytor Bloggera przyjął go bez zastrzeżeń.
<script language='javascript'>
var wykop_url=location.href;
var wykop_title=document.title; 
var wykop_desc=encodeURIComponent('Podaj opis');
var widget_bg='FFFFFF';
var widget_type='normal';
var widget_url='http://www.wykop.pl/widget.php?url='+(wykop_url)+'&amp;title='+(wykop_title)+'&amp;desc='+(wykop_desc)+'&amp;bg='+(widget_bg)+'&amp;type='+(widget_type);
document.write("<div style='float: right;'><iframe border='0' frameborder='0' scrolling='no' src='"+widget_url+"' style='border:none;width:72px;height:65px;overflow:hidden;margin:0;padding:0;'/></div>");
</script>
Dodałem dodatkowo umiejscowienie ikony (prawa strona - <div style='float: right;'>) oraz zamieniłem kilka znaków, które powodują błędy Bloggera. Mając już kod, spróbujmy go dodać do naszych postów, a dokładnie do tytułu posta. Logujemy się do Bloggera, wybieramy Układ/Edytuj kod HTML. Zaznaczamy Rozszerz szablony widżetów. W podglądzie źródła naszego szablonu szukamy (Ctrl+F) następującego fragmentu:
<b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template'>
Wklejamy poniżej zmodyfikowany kod wykopu. Wszystko funkcjonuje prawidłowo przy wyświetlonych pojedynczych wpisach. Na stronie głównej naszego bloga ikonka wykopu będzie niestety starała się dodać adres bloga, a nie poszczególnych postów, więc....wykorzystamy wyrażenie warunkowe, które będzie dodawało wykopywarkę tylko na stronach postów, a nie na stronie głównej.
<b:if cond='data:blog.pageType != "index"'>
 Nasz zmodyfikowany kod wykopu
</b:if>
Efekt widoczny na moim blogu. Oczywiście możemy zmienić miejsce dodania ikony jak i również jej położenie (do prawej, do lewej, na środku itd.). Na przykład dodanie ikony do treści posta, to odnalezienie w szablonie następującego kodu:
<div class='post-body entry-content'>
...i wstawienie poniżej tego co poprzednio. Sposób ten umożliwia, w zależności od naszych preferencji, dodanie ikon/linków do dowolnych serwisów (zobacz np. serwis Wyczaj to)
Jeśli nie odpowiada nam duża ikona to możemy wybrać z wykopywarki kod obsługujący wersję compact.


9 Komentarzy - Dodajemy Wykop do Bloggera

322 pisze...

u mnie nie działa

Devon pisze...

W ogóle nie działa czy dostajesz jakieś błędy? Sprawdź raz jeszcze czy wszystko poprawnie wklejasz, a jak tak to podeślij szablon bloga, zobaczę :) Działać na pewno działa (widać na blogu).

Anonimowy pisze...

a mozecie mi pomoc jak w blogerze dodać post do konkretnej strony ktora wczesniej stworzylam.
mianowicie mam kilka stron utworzonych a nie mam pojecia jak do nich dodawac posty teraz
pomozcie gg 2968033
moj blog http://estradowaorkiestra.blogspot.com
bede wdzieczna.
pozdrwawiam i czekam na info :P

InIaxD pisze...

Ja mam ten sam problem co kolega/koleżanka u góry. Pomooocy

Katarzyna Kulma pisze...

chcialam zapytac gdzie powinnam wkleic zmodyfikowany kod wykopu (
Nasz zmodyfikowany kod wykopu
), tak by polecane byly posty ze strony glownej (a nie adres blogu w ogole)?

Radek Szczepański pisze...

hej,

dodalem wszystko tak jak powyzej,

jednak button wykopu jest jakby nieaktywny,

jakis pomysl?

Radek Szczepański pisze...

sprawdzilem, ze nie dziala w chromie ale juz np w explorerze jest ok.

pozdr

Paweł Zuzelski pisze...

Dzięki! Trzeba było trochę podłubać, żeby guzik pokazywał się tam gdzie chcę. Najlepiej w JavaScripcie znaleźć po klasie konkretny element do którego chcemy doczepić guzik.

Przykładowo, w szablonie AwesomeInc dodałem coś takiego na samym końcu, tuż przed </body>:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script language='javascript'>
var wykop_url=location.href;
var wykop_title=document.title;
var wykop_desc=encodeURIComponent(&#39;Podaj opis&#39;);
var widget_bg=&#39;FFFFFF&#39;;
var widget_type=&#39;normal2&#39;;
var widget_url=&#39;http://www.wykop.pl/widget.php?url=&#39;+(wykop_url)+&#39;&amp;title=&#39;+(wykop_title)+&#39;&amp;desc=&#39;+(wykop_desc)+&#39;&amp;bg=&#39;+(widget_bg)+&#39;&amp;type=&#39;+(widget_type);
wykopstr = &quot;<div id='wykop' style='float: right;'><iframe border='0' frameborder='0' scrolling='no' src='&quot;+widget_url+&quot;' style='border:none;width:56px;height:60px;overflow:hidden;margin:0;padding:0;'/></div>&quot;;
document.getElementsByClassName(&#39;column-left-inner&#39;)[0].insertAdjacentHTML(&#39;afterbegin&#39;, wykopstr);
</script>
</b:if>

To dodaje guzik na górze posta po lewej stronie:

http://www.what-if.pl/2013/06/sekundy-przestepne.html

Zapytaj o wykop pisze...

A Zapytaja umiałbyś dodać?

Prześlij komentarz

Możesz użyć niektórych tagów HTML, takich jak <b>, <i>, <u>, <a> Nie spamuj :)

Popularne posty