Tajemniczy Ogród

Ten blog poświęcony jest... blogowaniu. Znajdziesz tu poradniki dotyczące wielu spraw technicznych, instrukcje na uzyskanie na blogu konkretnych efektów, oraz trochę lekcji przybliżających tajniki HTML i CSS. Prócz tego rozwija się dział z darmowymi efektami, są też artykuły poruszające inne kwestie. Jeśli nurtuje Cię jakaś sprawa związana z blogowym światem, odpowiedź możesz znaleźć tutaj.

Do zrobienia

  • [Tamara Malika] Dodawanie elementów bez tworzenia widżetów
  • [Julia Noemi Glacies] Gotowe kody na archiwum i etykiety, linki w prostokątach
czwartek, 2 stycznia 2014
30 komentarzy:
Powinnam dostać po uszach za ostatnią aktywność na blogu, ale mam nadzieję, że okażecie mi trochę łaski w Nowym Roku :) Magisterka mi się sama nie napisze - to praca nad nią zabiera mi najwięcej czasu i w sumie to dlatego są poślizgi z instrukcjami i odpowiedziami na Wasze pytania.

Facebook pop-up box

A teraz koniec z zanudzaniem Was moimi sprawami, przejdźmy do instrukcji. Na prośbę Eliasza prezentuję Wam, jak wstawić na swojego bloga widżet, który sprawi, że przy wyświetleniu strony pojawi się małe okienko umożliwiające polubienie profilu na Facebooku. Instrukcja jest na dobrą sprawę tłumaczeniem tekstu znalezionego w sieci, więc wszelkie podziękowania można kierować do Autora The Blog Widgets.
  1. Pierwsze, co trzeba zrobić, to wkleić odpowiedni kod w odpowiednie miejsce. Można to zrobić na trzy sposoby. Pierwszy to wejść do zakładki Szablon / Edytuj kod HTML i znaleźć tag , a następnie pod nim wklej kod:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
    <style>
    #fanback {
    display:none;
    background:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    }
    #fan-exit {
    width:100%;
    height:100%;
    }
    #fanbox {
    background:white;
    width:420px;
    height:270px;
    position:absolute;
    top:58%;
    left:63%;
    margin:-220px 0 0 -375px;
    -webkit-box-shadow: inset 0 0 50px 0 #939393;
    -moz-box-shadow: inset 0 0 50px 0 #939393;
    box-shadow: inset 0 0 50px 0 #939393;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: -220px 0 0 -375px;
    }
    #fanclose {
    float:right;
    cursor:pointer;
    background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
    height:15px;
    padding:20px;
    position:relative;
    padding-right:40px;
    margin-top:-20px;
    margin-right:-22px;
    }
    .remove-borda {
    height:1px;
    width:366px;
    margin:0 auto;
    background:#F3F3F3;
    margin-top:16px;
    position:relative;
    margin-left:20px;
    }
    #linkit,#linkit a.visited,#linkit a,#linkit a:hover {
    color:#80808B;
    font-size:10px;
    margin: 0 auto 5px auto;
    float:center;
    }
    </style>
    
    
    <script type='text/javascript'>
    //<![CDATA[
    jQuery.cookie = function (key, value, options) {
    
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
    options = jQuery.extend({}, options);
    
    if (value === null || value === undefined) {
    options.expires = -1;
    }
    
    if (typeof options.expires === 'number') {
    var days = options.expires, t = options.expires = new Date();
    t.setDate(t.getDate() + days);
    }
    
    value = String(value);
    
    return (document.cookie = [
    encodeURIComponent(key), '=',
    options.raw ? value : encodeURIComponent(value),
    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
    options.path ? '; path=' + options.path : '',
    options.domain ? '; domain=' + options.domain : '',
    options.secure ? '; secure' : ''
    ].join(''));
    }
    
    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
    };
    //]]>
    </script>
    <script type='text/javascript'>
    jQuery(document).ready(function($){
    if($.cookie('popup_user_login') != 'yes'){
    $('#fanback').delay(20000).fadeIn('medium');
    $('#fanclose, #fan-exit').click(function(){
    $('#fanback').stop().fadeOut('medium');
    });
    }
    $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
    });
    </script>
    
    <div id='fanback'>
    <div id='fan-exit'>
    </div>
    <div id='fanbox'>
    <div id='fanclose'>
    </div>
    <div class='remove-borda'>
    </div>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
    
    href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
    
    style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
    <span id="linkit"><a href="http://www.theblogwidgets.com/2013/08/facebook-popup-widget-with-lightbox.html">Facebook Like Box</a> <a href="http://www.theblogwidgets.com">Widget</a></span></center>
    </div>
    </div>
  2. Jeśli z jakiejś przyczyny nie możesz znaleźć tego tagu, albo po prostu nie chce Ci się szukać, wklej go do nowego widżetu HTML/JavaScript lub wejdź na stronę The Blog Widgets i kliknij w przycisk Dodaj do Bloggera, który tam znajdziesz.

  3. Czas na modyfikacje. Po pierwsze, widżet powinien prowadzić do wybranej przez Ciebie strony na Facebooku, więc znajdź w kodzie link http://www.facebook.com/theblogwidgets i zmień go na własny link.
  4. Widżet jest zaprojektowany tak, że pojawia się po 20 sekundach od otwarcia strony i tylko wtedy, gdy ktoś jeszcze nie był na danym blogu. Można to rzecz jasna zmienić. Aby zmienić czas, po którym pojawi się okno, znajdź w kodzie liczbę 20000 i zmień na taką liczbę sekund, jaką wybierzesz razy 1000.
  5. By widżet pojawiał się za każdym razem, gdy ktoś odwiedza Twojego bloga, usuń z kodu następującą linijkę: $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
  6. Jeśli chcesz, żeby okienko pojawiało się tylko wtedy, kiedy ktoś wejdzie na główną stronę bloga, ujmij cały kod na widżet w następujące tagi:
    <b:if cond='data:page.type == "index"'>
    KOD WIDŻETU
    </b:if>
  7. Jeśli widżet się nie pojawia, usuń ciasteczka z przeglądarki :)

Facebook floating widget

Druga część instrukcji jest na inny facebookowy widżet, ale nieco bardziej subtelny. Będzie to mała ramka, która pojawi się z boku strony i rozwinie się po najechaniu myszką. Ponownie, przepis na efekt pochodzi ze strony The Blog Widgets.
  1. Ponownie zaczynamy od wklejenia kodu. Można to zrobić gdziekolwiek, albo zwyczajnie kliknąć w przycisk Dodaj widżet na stronie The Blog Widgets.
    <!--Floating Facebook Widget by www.TheBlogWidgets.com START-->
    <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><!--Brought to you by www.TheBlogWidgets.com--><div class="theblogwidgets" style="">
    <!--Brought to you by http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--><div>
    <!-- http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftheblogwidgets&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by www.TheBlogWidgets.com--></iframe><!--Brought to you by www.TheBlogWidgets.com--><span><!--Brought to you by www.TheBlogWidgets.com--><center>
    <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html">Floating Facebook Widget</a></center>
    </span></div>
    </div>
    <!--Floating Facebook Widget by www.TheBlogWidgets.com END-->
  2. Może się okazać, że po dodaniu tego kodu widżet nie działa poprawnie. Wtedy trzeba wkleić dodatkowy kod zaraz pod tagiem w zakładce Szablon / Edytuj kod HTML: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
  3. Oczywiście musicie zmienić stronę, do której widżet jest przypisany. W tym celu zmieńcie w kodzie facebook.com%2Ftheblogwidgets na adres swojej strony na Facebooku.

Facebookowe gadżety w kolumnie

Dzięki Alice_Alis mogę ubogacić instrukcję o jeszcze jeden element, mianowicie różne związane z Facebookiem elementy, które możemy umieścić w kolumnie naszego bloga. Facebook bardzo nam tutaj ułatwia sprawę, bo po wejściu na stronę Programiści Facebooka mamy po lewej całe menu różnych elementów, które można wstawić. W okienku na środku strony zawsze wyświetla się widok takiego gadżetu, więc spokojnie można dostosować jego wygląd i funkcje jak się tylko chce. Sprawa nie jest trudna, więc nie będę się rozpisywać. Przy generowaniu kodu musicie pamiętać, żeby wybrać IFRAME, a potem wkleić go do gadżetu HTML/JavaScript i wszystko będzie śmigać. I tyle.
-------------------------------------------------------------------------------------------

Obserwatorzy

Polecam

Formularz kontaktowy

Nazwa

E-mail *

Wiadomość *