Blogger Ve Wordpress Tema Arşivi

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.

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ı

</head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://latesthack.googlecode.com/svn/mywidgets/2in1/2in1.css" /><script src="http://latesthack.googlecode.com/svn/mywidgets/2in1/twitter.js" type="text/javascript"></script><script type="text/javascript"> jQuery(document).ready(function(){  jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -240}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -240}, 500); }); }); </script><p style="display:none;"> 2 in 1 social sharing by<a href="http://www.latesthack.com">Latest Hack</a></p> <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnFUDWn-2jrFF9n_OIbeWoYCG7azongGFDfLpiSdZUu4Fefw83LGY3Gl3qddWiZXwDd9ZxdGrYvxxbxcJHlPHiiWJ07WZPVz54u6AWGYYHjyA4BQJzPwF090DG3By2Hwf5zkTgJq7K9s/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dfacebook_right.png" alt="" /> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/xxxxxxxxxxamp;locale=en_GB&amp;width=238&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=256"   scrolling="no"> </iframe> </div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI9MuGF0VTx1g6gTZoBGyruHZvB7uDQvIZobTojDBEYcntKHqE-kjQYxdcxyNToCmqOHx9ccfopdytPFID1iwfZXaTiiJhjS9e9UlZufibLRaXKPSpr-L2JqyljP1Jna6y-zzpRAclYs/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dtwitter_right.png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("xxxxxxxxxx");</script></div></div></div>

Peki Weblog Sözlük ne kazandırır?

• Blogunuzu özgürce çok daha fazla başka blogcuya tanıtma fırsatı bulabilirsiniz.
• Hem kendiniz hem de blogunuz için yararlı bilgilere ulaşabilirsiniz.
• Kendi ilgi alanınızda ya da yakın kişilerle tanışıp, fikirlerini görebilirsiniz.
• Samimi bir ortamda, blog ailesi kıvamında, hem kendinizi hem de blogunuzu temsil edip aynı zamanda eğlenebilirsiniz.
• Sizin seçeceğiniz bir rumuz ile kayıt olup, özgürce bir sözlükte yazabilmenin keyfini yaşayabilirsiniz.
• Ve belki bir gün, sözlüğümüz hep birlikte iyi yerlere geldiğinde, köklü bir oluşumun temel taşlarından olmanın ve  1. nesillerinden olmanın verdiği haklı gururu yaşayabilirsiniz.
• Bu saydıklarımda dahil bir çok iyi şeye daha şahit ve dahil olacağınızı garanti ederim.

Yazar Hakkında: Bu yazı, Weblog Sözlük kurucusu ve yazarı Yoge Griffin tarafından Blog Hocam için yazılmıştır.

</head>

<style type='text/css'>
/* Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com */
ul.bbelog-social { list-style:none; margin:15px auto;display:inline-block; }
ul.bbelog-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.bbelog-social li a { display:block; width:55px; height:55px; padding-right:10px; position:relative; text-decoration:none; }
ul.bbelog-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.bbelog-social li.bbelog-facebook { background-image:url(&quot;http://tools.adityawebs.com/images/facebook.png&quot;); }
ul.bbelog-social li.bbelog-twitter { background-image:url(&quot;http://tools.adityawebs.com/images/twitter.png&quot;); }
ul.bbelog-social li.bbelog-google { background-image:url(&quot;http://tools.adityawebs.com/images/google.png&quot;); }
ul.bbelog-social li.bbelog-stumbleupon { background-image:url(&quot;http://tools.adityawebs.com/images/stumble.png&quot;); }
ul.bbelog-social li.bbelog-delicious { background-image:url(&quot;http://tools.adityawebs.com/images/delicious.png&quot;); }
ul.bbelog-social li.bbelog-reddit { background-image:url(&quot;http://tools.adityawebs.com/images/reddit.png&quot;); }
ul.bbelog-social li.bbelog-technorati { background-image:url(&quot;http://tools.adityawebs.com/images/technorati.png&quot;); }
/* Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
$(document).ready(function () {
$(&quot;#bbelog-jqueryanime li&quot;).each(function () {
$(&quot;a strong&quot;, this).css(&quot;opacity&quot;, &quot;0&quot;);
});
$(&quot;#bbelog-jqueryanime li&quot;).hover(function () {
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2);
$(&quot;a strong&quot;, this).stop().animate({
opacity: 1,
top: &quot;-10px&quot;
}, 300);
}, function () {
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1);
$(&quot;a strong&quot;, this).stop().animate({
opacity: 0,
top: &quot;-1px&quot;
}, 300);
});
});
// Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
</script>

<div class='post-footer'>

<style type='text/css'>
<!--
.style2 {font-size: smaller}
-->
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='bbelog-social' id='bbelog-jqueryanime'>
<li class='bbelog-facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='bbelog-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='bbelog-google'>
<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'><strong>Google Bookmarks</strong></a>
</li>
<li class='bbelog-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='bbelog-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='bbelog-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='bbelog-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a></li>
</ul><br/>

</b:if>

Blogger’da klasik etiketler widgetından sıkıldıysanız daha farklı, daha orijinal bir alternatif ister misiniz?

Harish isimli arkadaş flash animasyonlu bir etiket bulutu scripti yazmış.Blog yazılarınızda kullandığınız etiketleri flash animasyonlu bir bulut olarak sidebarınıza ekleyebiliyorsunuz.Nasıl çalıştığını görmek için aşağıdaki videoyu izleyebilirsiniz.

Bu flash animasyonlu etiket bulutunu blogunuza eklemek için aşağıdaki kodları HTML/JavaScript gadget olarak eklemeniz yeterli.

<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "http://bloghocam.blogspot.com/",
    color          : "000000",
    hoverColor     : "0bb839",
    backgroundColor: "FFFFFF",
    size           : 12,
    speed          : 100,
    width          : 250,
    height         : 300
};
/*]]>*/
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/60346665/bloghocam-flash-etiket-bulutu.js"></script>

• http://bloghocam.blogspot.com/ yerine kendi blogu adresinizi yazmayı unutmayın.

<div style="overflow:auto; padding:5px; width:185px; height:300px; background-color: rgb(255, 255, 255); border:1px solid #ccc;"><script src="http://yourjavascript.com/524549651/sitemap.js"></script><script src="http://eklentileri.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

]]></b:skin>

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivN4vXIC0TnZaL9pnPKQsMZsgwtEC9K1xazOFcqFelqsnE6CFElFbcySXMjmE7WZblOUp5brnAKlZVRwzjndQ_fpyGZNcpzDWXCDpiW0Poa7nDjCvOUGJmNtHjHtFrpxwasOzfhfdG9iYJ/s1600/paging_bg2.png) no-repeat;
display: none; /*--eklentileri.blogspot.com--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){ 
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //eklentileri.blogspot.com

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({ 
left: -image_reelPosition
}, 500 );

}; 

//Rotation + Timing Event
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //eklentileri.blogspot.com
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); 

//On Click
$(&quot;.paging a&quot;).click(function() { 
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); 

});
</script>

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window"> 
<div class="image_reel">

<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTORWqaBoPYRJAEeWQ1EpXddkYaDXPX84dxyanvgD-Tn8NioBo_TK27dfL9V2wk6FBNw3MBWQiV-sZkgZGYGgc1ffOzMQsDUUKX0QuHBnyhdGcuAM3VROjRXcbI9wUaXL6hSNeKIMGdlKY/s1600/slider-image-1.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAwqQFqTNl2aMItMonR1pEPVwLTQlhxnS25NIDDUsnsgRwlPMUpPXjIGH_0i83wWoU7jjaiuLZQZMWQlKI1RTLNyUGJOGrn4c3O4ost4qjNqME8PlJw9S7C_Qd6Tn7d2YmGcsMstNl-Pod/s1600/slider-image-2.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTfpHkTOwCznLTkT0cWvPytzftqXVBP5ovBLbfM4ofeRykzmRTQn2QGorBic_0lBEGUR3s7V-Ka-T7uKZU2N2wPHBUwfRNdDcClUVHayLPDlvc4sI8_hlVcYDu6f5oUbgS12vupwb7Hh1Q/s1600/slider-image-3.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdRQdNku-4Bn4lsjZ2OHwwnr5j65s8pKRHZcUeZorGMDEiUq1wzF_sgo_yYVaV-_rRmPA8iDJjsjZ-KhxzSfSjF0lSt5MEXkHNvVygca0E_NYEHdyQ9X5Z7SfoegkwZB5I5-teGRfxIQYo/s1600/slider-image-4.jpg" alt="" /></a>

<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJUW2zhJk-zGtK9WqyrevYZYI23GKHVkeLe0Yv8jFumu07XSTj-4KYvqHj4Ym5sN2c_u0DYUlzPiGkPwqOzoSTfkiPcD1BKqAArZM9TJyNYE95BL7Lz04tfVEt-hD17Elz1j-Qolra-gE_/s1600/slider-image-6.jpg" alt="" /></a>


</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div> 

</div>

Bugün test blogmda bir eklenti denerken HTML/JavaScript gadget’ı eklemek için gadget listesini açtığımda Blogger’ın listeye 2 yeni gadget eklediğini farkettim.Neler mi?

+1 Düğmesi

Ziyaretçilerin, içeriğinizi Google Arama'da önermesine ve Google+'da paylaşmasına izin vermelerini sağlayan buton.

Google+ Rozeti

Ziyaretçilerinizin Google+ profilinize veya blogunuz için oluşturduğunuz Google+ sayfanıza ulaşarak sizi çevrelerine eklemelerini sağlayan rozet.

Bunlar yeni özellikler değil ama çoğu blogcu bu butonları bloguna elerken kodlarda yaptığı hatalar nedeniyle sıkıntı yaşayabiliyordu.Bu ayede herkes +1 düğmesini ve Google+ rozetini zahmetsizcer bloguna ekleyebilecek.

Bu güne kadar hiç 3 sütunlu bir Blogger teması paylaşmamıştım.Neden bilmiyorum ama 3 sütunlu blog temalarına bir türlü ısınamadım.İlk defa beğendiğim ve paylaşmaya değer gördüğüm 3 sütunlu bir Blogger teması ile karşılaştım.Temanın ismi WP-OpenCart ve Wordpress ‘ten Blogger’a çevrilmiş bir tema.

3 sütunlu bir tema olarak test bloguma yüklediğimde aynı zamanda 2 sütunlu olarak kullanılabildiğini de farkettim.Sidebarlardan birini boş bıraktığınızda tema otomatik olarak 2 sütunlu bir temaya dönüşünüyor.Hem de hizalama ve yerleşim sorunu yaşamadan.Yorum bölümünde yorum yanıtlama seçeneğinin de aktif olduğunu ve sorunsuz çalıştığını hatırlattıktan sonra sizi temanın demousu izlemeye davet ediyorum…

Temanın demo sitesi ingilizce ve orjinalidir.Ancak indirdiğinizde zip klasörünün içinden türkçe hali çıkacaktır.Bir kaç küçük değişklik yapıp temayı türkçe olarak upload ettim.O yüzden demonun inglizce olması sizi yanıltmasın :)

Temada düzenlemeniz gereken tek yer yatay menü.Yatay menüyü ister açılır, ister normal yatay menü olarak kullanabiliriz.Şablonda menüye ait kodları şunlardır:

<div class='menu'>
                <ul>
                  <li class='page_item'><a href='#' title='Menu #1'>Menu #1</a></li>
                  <li class='page_item'><a href='#' title='Menu #2'>Menu #2</a></li>
                  <!-- begin example drop down menu -->
                  <li class='page_item'><a href='#' title='Menu #3'>Menu #3</a>
                    <ul class='children'>
                      <li class='page_item'><a href='#' title='Sub Menu #1'>Sub Menu #1</a></li>
                      <li class='page_item'><a href='#' title='Sub Menu #2'>Sub Menu #2</a></li>
                    </ul>
                  </li>
                  <!-- end example drop down menu -->
                  <li class='page_item'><a href='#' title='Menu #4'>Menu #4</a></li>
                </ul>
              </div>

Arama kutusunun üzerindeki Home – About – Contact yazan yerlerde oluşturduğunuz statik sayfalar otomatik olarak gözükecektir.Orada Sayfalar gadgetı ekli.Her hangi bir değişikliğe gerek yok.

Son olarak paylaşttığım diğer Blogger temalarına ve Blogger temalarının nasıl yükleneceğini bilmeyenler için hazırladığım yazıya bakmanızı öneriyorum.

]]></b:skin>

twitter_update_list{
list-style:none;
}
#twitter_update_list li{
background: #f4f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
box-shadow: 1px -1px 2px #bbc6c8;
-webkit-box-shadow: 1px -1px 2px #bbc6c8;
-moz-box-shadow: 1px -1px 2px #bbc6c8;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:15px;
width:250px;
}

#twitter_update_list::after {
content: "";
position: relative;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #e8f0f2 transparent;
display: block;
width: 0;
}

<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>
<a title="Follow Me" href="http://www.twitter.com/XXXXX" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTlBhpNc_75MUNc-TROpfXjr8HC7Zek8BmtcaqK-Xf_oNXJg82i_2CZ1rQ9bno0UkkRfjF0Nt1CT8fdWSL9QbfCUV0_N4AQBCdeLfwbntlhA3ysyQpMeGh3X_2b8lmO6P5qS6YD5yEslbq/s1600/twitter-bird-gadget.png" /></a>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/XXXXX.json?callback=twitterCallback2&count=1"></script>

</body>

<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZsIiwkPUhT1JT-LRPsCG6SxPz0WvE0DACWHeH5NnhLy1z74YJy-4yCe0zB0laQ418-Xp3p67VaSm2EA9Tk93A6NmMXIbR5wwqIdS0fFh1fHqRVEDGSC94j8GOkvD8c1iAGhMeQJ2R9Dq/s1600/ut-bg.png&#39;) repeat; 
color:#fff;
text-align: center;
margin:0 auto; 
border-top: 1px solid #fff;
height:28px; 
font-size:13px; 
position:fixed; 
bottom:0; 
z-index:999; 
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px; 
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>Blogger Şeffaf bilgilendirme çubuğu eklentisi <a href='http://eklentileri.blogspot.com' target='_blank'>Blogger Eklentileri</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>

</head>

<!-- eklentileri.blogspot.com kod başlangıcı -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){

//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array(&#39;span&#39;,&#39;.section2&#39;);
section = section.join(&#39;,&#39;);

// Reset Font Size
var originalFontSize = $(section).css(&#39;font-size&#39;); 
$(&quot;.resetFont&quot;).click(function(){
$(section).css(&#39;font-size&#39;, originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});

// Decrease Font Size
$(&quot;.decreaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
});
</script>
<!-- eklentileri.blogspot.com kod sonu -->

<div class='post-header-line-1'/>

<!-- eklentileri.blogspot.com kod baslangıcı -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AWTS4QztQjJFvzot9_gVos5iWPa70Axxi75T3Oklm4P19O2QNMjypPDsyU9Bv8RjOQLiAO740GWu10fiqodyvhSi2e4vBUSiV_IuV2-4xlvhU9r6IZ04Yui6WM2sC65XCh5jbpogme8/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQC_9GS22kHg32I8sVPFI3GkRoEyzZo89o-GVVDePp8_CRKMo-miqhnu-FEvxuPp-0-z_iYFA4c25sPT-4L7NZeGiLoR7is2THjU1x4qI5icCDLgpxqwwZRRXa-48XU0qALZUcunDUAiM/s1600/bigger-font+-+Copy.png'/></a> 
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLLvxscUFCdC_BmjrFjWyjvBOeVUE9egZyZoqg2vFN3jyHcHuY4gz-asAVCIIzP4S1jpKxcKkwFfVIWwAPqrU1TbRN6addC5_jHuCCLAiz5FzIXMy2WcbMsPQJNfgYVmKoD2xa9Ihyphenhyphenjho/s1600/smaller-font.png' style='cursor: hand;'/></a> 
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVM0oUHIXKBwxa5uUw-51apj1Lxb3T_qSBSWVWOUzowSXQv-WkrYO-EhVUavUbaGPPHnt7edyxTIAQhLTFvVnQlXendxBgb2ah-bxPvwpyL1mFwdYq2Q4w1XaNbHLPq8L2dD3je3QyCg/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- eklentileri.blogspot.com kod sonu -->

<data:post.body/>

<span><data:post.body/></span>

Bazen 100 kelime ile anlatabileceğiniz şeyi sadece 1 resim kullanarak ta anlatabilirsiniz.İşte bu mantıkla doğan infografikler dijital dünyada giderek yaygınlaşmaya ve sıkça karşımıza çıkmaya başladı.Peki nedir bu infografikler? Ne işe yaralar? Nasıl oluşturulurlar.Bu yazıda infografikler konusunda biraz bilgi vereceğim.

İnfografik Nedir?

Adından da anlayacağınız gibi infografik ( info + grafik ) her hangi bir istatiki veri, karşılaştırma, anket sonucu, raporlama gibi bilgilerin görsel öğelerle desteklenerek anlatılmasıdır.

İnfografik Ne İşe Yarar?

İnfografikler dikkat çekici oldukları için anlatılmak istenen şeyin etkili bir şekilde anlatılmasını sağlarlar.Akılda kalıcı ve kolay anlaşılabilir olmaları da infografiklerin önemli avantajlarıdır.

İnfografiklerin blogcular için önemli bir avantajı da trafik sağlamalarıdır.İnsanlar görsel öğeleri sosyal medyada paylaşmayı çok severler.Eğer başarılı ve ilgi çekici bir infografik oluşturabilirseniz infografiğin bir köşesine yerleştireceğiniz blog adresiniz çok sayıda kişiye ulaşacak ve bu da size trafik olarak geri dönecektir.

İnfografik Örnekleri

İnfografik Nasıl Yapılır?

İnfografik hazırlamadan önce biraz teorik bilgi vermekte fayda var.İnfografik oluşturmak birkaç bilgi yazıp etrafını rastgele grafiklerle süslemek değildir.Verdiğiniz bilgilerin sıralaması, renkler, fontlar, kullanılan grafikler birbirleriyle alakalı ve tutarlı olmalıdır.Amaç anlatılmak istenen şeyin daha kolay anlaşılmasını sağlamak olduğu için bilgi – grafik oranına dikkat etmelisiniz.

İşin teknik kısmına geçecek olursak profesyonel infografikler Photoshop, Illustrator, Indesign gibi profesyonel programlar kullanılarak oluşturulabilir ancak bu programları kullanmayı bilmiyorsanız ve kişisel, amatör infografikler oluşturacaksanız şu çevrimiçi araçları kullanarak kolayca oluşturabilirsiniz.

1. Vizify TweetSheet

Bu araç ile Twitter hesabınıza ait harika bir infografik hazırlayabiliriz.Yapmanız gereken tek şey Twitter kullanıcı adınızı yazmak.Vizify TweetSheet hesabınızı analiz edecek ve aylara göre Twitter kullanımınız, en çok RT edilen tweetleriniz, en iyi takipçileriniz, yoğunlukla bahsettiğiniz konular gibi verileri grafiklerle destekleyerek sizin için oldukça profesyonel bir infografik oluşturacaktır. [ http://vizify.com/tweetsheet/ ]

2.Vizualize.me

Oldukça detaylı bir kişisel infografik aracı.Profil bilgileri , iş hayatı, eğitim hayatı, yetenekler, ilgi alanları, yabancı diller, başarılar gibi verleri girdikten sonra karşınızda profesyonel infografiklerden hiç bir farklı olmayan kişisel infografiğinizi bulacaksınız. [ http://vizualize.me ]

3. Re.vu

Kişisel bilgilerinizi, linklerinizi, sosyal medya profillerinizi, iş geçmişinizi, eğitim bilgileriniz, portföyünüzü yazdıktan sonra hazır temalardan birini seçerek infografiğinizi oluşturabiliyorsunuz.Klasik bilgilerin dışında kendi özel verilerinizi grafiklerle destekleyerek infografiğe ekleme imkanınız da var.Yerleşimi ise sürükleme yaparak gerçekleştitrebilirsiniz.Tüm bu özellikleriyle dört dörtlük bir infografik aracı diyebilirim. [ http://re.vu/ ]

4. Kinzaa

Diğer araçlarda olduğu gibi profil, şi, eğitim, karakteristik özellikler, yetenekler gibi bilgileri giriyorsunuz ve infografiğiniz anında oluşturuluyor.Kullanımı kolay arayüzü ve detaylı veri girilebilmesi bu aracın güzel özellikleri. [ http://kinzaa.com ]