• Posted by : Unknown 10 Nisan 2012 Salı

    Genel manasıyla sosyalleştrilmiş bir çevrimiçi pano diyebileceğimiz Pinterst, 2012 ile birlikte tüm dünyada olduğu gibi ülkemizde de hızla yaygınlaşarak sosyal medyanın yeni fenomeni olma yolunda ilerlemeye devam ediyor.

     

    Blog yazarları ( özellikle bayanlar ), Pinterest’e çabuk ayak uydurmuşlar gibi gözüküyor.Oluşturdukları panolarda kendi bloglarında ki ve internette dolaşırken beğendikleri görsel öğeleri takipçileriyle paylaşıyorlar.

     

    Pinterest Widget

     

    Pinterst bu kadar yaygınlaşmışken hala bir kod yazarının Blogger için Pinterest widget’ı geliştirmiş olmamasına şaşırmışken Marie Mosley ile karşılaştım.Kendisi Blogger için güzel bir Pinterst widget’ı kodlamış.Bu widget ile Pinterest sayfanızda paylaştığınız öğeleri blogunuzun sidear’ında gösterebiliyorsunuz.

     

    Bu widget’ı blogunuza eklemek için aşağıdaki kodları HTML/JavaScript gadget penceresine yapıştırın.

     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    /**
    * Plugin: jquery.zRSSFeed
    *
    * Version: 1.0.1
    * (c) Copyright 2010, Zazar Ltd
    *
    * Description: jQuery plugin for display of RSS feeds via Google Feed API
    *              (Based on original plugin jGFeed by jQuery HowTo)
    *
    * Modified by Richard Mackney (originally for Instagram images, see https://gist.github.com/865838)
    * Modified further by Marie Mosley for a Pinterest "gadget" for Blogger.
    * Tutorial for use with Blogspot at: http://www.codeitpretty.com/2012/03/pinterest-gadget-for-blogger.html
    **/

    (function($){

        var current = null;

        $.fn.rssfeed = function(url, options) {   

            // Set plugin defaults
            var defaults = {
                limit: 6,
                titletag: 'h4',
                content: true,
                snippet: true,
                showerror: true,
                errormsg: '',
                key: null
            }; 
            var options = $.extend(defaults, options);

            // Functions
            return this.each(function(i, e) {
                var $e = $(e);

                // Add feed class to user div
                if (!$e.hasClass('rssFeed')) $e.addClass('rssFeed');

                // Check for valid url
                if(url == null) return false;

                // Create Google Feed API address
                var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + url;
                if (options.limit != null) api += "&num=" + options.limit;
                if (options.key != null) api += "&key=" + options.key;

                // Send request
                $.getJSON(api, function(data){

                    // Check for error
                    if (data.responseStatus == 200) {

                        // Process the feeds
                        _callback(e, data.responseData.feed, options);
                    } else {

                        // Handle error if required
                        if (options.showerror)
                            if (options.errormsg != '') {
                                var msg = options.errormsg;
                            } else {
                                var msg = data.responseDetails;
                            };
                            $(e).html('<div class="rssError"><p>'+ msg +'</p></div>');
                    };
                });               
            });
        };


        // Callback function to create HTML result
        var _callback = function(e, feeds, options) {
            if (!feeds) {
                return false;
            }
            var html = '';   
            var row = 'odd';   

     

            // Add body
            html += '<div class="rssBody">' +
                '<ul>';

            // Add feeds
            for (var i=0; i<feeds.entries.length; i++) {

                // Get individual feed
                var entry = feeds.entries[i];


                // Add feed row
                html += '<li class="rssRow '+row+'">' +
                    '<'+ options.titletag +'><a href="'+ entry.link +'" title="View this feed at '+ feeds.title +'">'+ entry.title +'</a></'+ options.titletag +'>'
                if (options.date) html += '<div>'+ pubDate +'</div>'
                if (options.content) {

                    // Use feed snippet if available and optioned
                    if (options.snippet && entry.contentSnippet != '') {
                        var content = entry.contentSnippet;
                    } else {
                        var content = entry.content;
                    }

                    html += '<p><a href="'+entry.link+'" title="'+ entry.title +' " target="_blank">'+ content +'</a></p>'
                }

                html += '</li>';


                // Alternate row classes
                if (row == 'odd') {
                    row = 'even';
                } else {
                    row = 'odd';
                }           
            }

            html += '</ul>' +
                '</div>'


            $(e).html(html);

            //correct href for images so they point to Pinterest
                $(function() {
                  $('.rssFeed a').each(function() {
                    var href = $(this).attr('href');
                    $(this).attr('href', 'http://www.pinterest.com' + href);
      });
    });

              
        };
    })(jQuery);

    </script>


    <style type="text/css">
    body {
        margin: 0px;
    }

    .rssFeed a {
        color: #444;
        text-decoration: none;
            text-display: none;
    }
    .rssBody ul {
        list-style: none;
    }
    .rssBody ul, .rssRow, .rssRow h4, .rssRow p {
        margin: 0;
        padding: 0;
    }

    .rssBody li {
            position: relative;
            color: transparent;
            width: 100px;
            height: 100px;
            overflow: hidden;
        padding: 6px;
        float: left;
            z-index: 1;
    }

    /* This part of the style shows the full photo when the thumbnail is hovered. If you'd prefer not to use this, remove .rssBody li:hover, its curly braces, and everything inside its curly braces. This was designed for a left sidebar on Blogger. For a right sidebar, play with the translate numbers until the enlarged photo moves the way you want it to. */

    .rssBody li:hover {
    font-size: 1px;
    overflow: visible;
    z-index: 1000;
    -ms-transform: translate(-60px,-10px);
    -webkit-transform: translate(-60px,-10px);
    -o-transform: translate(-60px,-10px);
    -moz-transform: translate(-60px,-10px);
    transform: translate(-60px, -10px);
    }

    /* end hover image effect */

    .rssRow {
        padding: 3px;
    }
    .rssRow h4 {
        display: none;
    }
    .rssRow div {
        color: #666;
        margin: 0.2em 0 0.4em 0;
    }

    </style>


    <script type="text/javascript">

    /** use your own Pinterest username in the rssfeed url. To display your latest photos from all boards, use http://www.pinterest.com/USER-NAME-HERE/feed.rss  to show a specific board, use http://www.pinterest.com/USER-NAME-HERE/BOARD-NAME-HERE/rss **/


    $(document).ready(function () {
        $('#pinterest').rssfeed('http://www.pinterest.com/Kullanıcı_Adı/feed.rss', {
            limit: 6,
            snippet: false,
            header: false,
            date: false
        });
    });

    </script>
    <!-- Optional logo and gadget title. To use, uncomment it and add in your own Pinterest url, then place your own image link in the quotation marks after img src. -->

    <!-- <a href=""><img src=""><br />Latest Pins</a>
    -->
    <div id="pinterest"></div>

     

    Kodlarda değiştirmeniz gereken tek yerkırmızı renkle yazdığım Kullanıcı_Adı.Buraya Pinterest kullanıcı adınızı yazın.Eğer belli bir panodaki resimleri göstermek istiyorsanız buayı şe şekilde değiştirin: Kullanıcı_Adı/Pano_Adı

    Leave a Reply

    Subscribe to Posts | Subscribe to Comments

  • Copyright © 2013 - Hyperdimension Neptunia

    Blogger Ve Wordpress Tema Arşivi - Powered by Blogger - Designed by Johanes Djogan