This page has moved to a new address.

"Transform Google+ into the ultimate Pinterest clone with this userscript"

----------------------------------------------- Blogger Template Style Name: Rounders Date: 27 Feb 2004 ----------------------------------------------- */ body { background:#aba; margin:0; padding:20px 10px; text-align:center; font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif; color:#333; font-size/* */:/**/small; font-size: /**/small; } /* Page Structure ----------------------------------------------- */ /* The images which help create rounded corners depend on the following widths and measurements. If you want to change these measurements, the images will also need to change. */ @media all { #content { width:740px; margin:0 auto; text-align:left; } #main { width:485px; float:left; background:#fff url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom; margin:15px 0 0; padding:0 0 10px; color:#000; font-size:97%; line-height:1.5em; } #main2 { float:left; width:100%; background:url("http://www.blogblog.com/rounders/corners_main_top.gif") no-repeat left top; padding:10px 0 0; } #main3 { background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y; padding:0; } #sidebar { width:240px; float:right; margin:15px 0 0; font-size:97%; line-height:1.5em; } } @media handheld { #content { width:90%; } #main { width:100%; float:none; background:#fff; } #main2 { float:none; background:none; } #main3 { background:none; padding:0; } #sidebar { width:100%; float:none; } } /* Links ----------------------------------------------- */ a:link { color:#258; } a:visited { color:#666; } a:hover { color:#c63; } a img { border-width:0; } /* Blog Header ----------------------------------------------- */ @media all { #header { background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top; margin:0 0 0; padding:8px 0 0; color:#fff; } #header div { background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom; padding:0 15px 8px; } } @media handheld { #header { background:#456; } #header div { background:none; } } #blog-title { margin:0; padding:10px 30px 5px; font-size:200%; line-height:1.2em; } #blog-title a { text-decoration:none; color:#fff; } #description { margin:0; padding:5px 30px 10px; font-size:94%; line-height:1.5em; } /* Posts ----------------------------------------------- */ .date-header { margin:0 28px 0 43px; font-size:85%; line-height:2em; text-transform:uppercase; letter-spacing:.2em; color:#357; } .post { margin:.3em 0 25px; padding:0 13px; border:1px dotted #bbb; border-width:1px 0; } .post-title { margin:0; font-size:135%; line-height:1.5em; background:url("http://www.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em; display:block; border:1px dotted #bbb; border-width:0 1px 1px; padding:2px 14px 2px 29px; color:#333; } a.title-link, .post-title strong { text-decoration:none; display:block; } a.title-link:hover { background-color:#ded; color:#000; } .post-body { border:1px dotted #bbb; border-width:0 1px 1px; border-bottom-color:#fff; padding:10px 14px 1px 29px; } html>body .post-body { border-bottom-width:0; } .post p { margin:0 0 .75em; } p.post-footer { background:#ded; margin:0; padding:2px 14px 2px 29px; border:1px dotted #bbb; border-width:1px; border-bottom:1px solid #eee; font-size:100%; line-height:1.5em; color:#666; text-align:right; } html>body p.post-footer { border-bottom-color:transparent; } p.post-footer em { display:block; float:left; text-align:left; font-style:normal; } a.comment-link { /* IE5.0/Win doesn't apply padding to inline elements, so we hide these two declarations from it */ background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%; padding-left:14px; } html>body a.comment-link { /* Respecified, for IE5/Mac's benefit */ background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%; padding-left:14px; } .post img { margin:0 0 5px 0; padding:4px; border:1px solid #ccc; } blockquote { margin:.75em 0; border:1px dotted #ccc; border-width:1px 0; padding:5px 15px; color:#666; } .post blockquote p { margin:.5em 0; } /* Comments ----------------------------------------------- */ #comments { margin:-25px 13px 0; border:1px dotted #ccc; border-width:0 1px 1px; padding:20px 0 15px 0; } #comments h4 { margin:0 0 10px; padding:0 14px 2px 29px; border-bottom:1px dotted #ccc; font-size:120%; line-height:1.4em; color:#333; } #comments-block { margin:0 15px 0 9px; } .comment-data { background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em; margin:.5em 0; padding:0 0 0 20px; color:#666; } .comment-poster { font-weight:bold; } .comment-body { margin:0 0 1.25em; padding:0 0 0 20px; } .comment-body p { margin:0 0 .5em; } .comment-timestamp { margin:0 0 .5em; padding:0 0 .75em 20px; color:#666; } .comment-timestamp a:link { color:#666; } .deleted-comment { font-style:italic; color:gray; } .paging-control-container { float: right; margin: 0px 6px 0px 0px; font-size: 80%; } .unneeded-paging-control { visibility: hidden; } /* Profile ----------------------------------------------- */ @media all { #profile-container { background:#cdc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom; margin:0 0 15px; padding:0 0 10px; color:#345; } #profile-container h2 { background:url("http://www.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top; padding:10px 15px .2em; margin:0; border-width:0; font-size:115%; line-height:1.5em; color:#234; } } @media handheld { #profile-container { background:#cdc; } #profile-container h2 { background:none; } } .profile-datablock { margin:0 15px .5em; border-top:1px dotted #aba; padding-top:8px; } .profile-img {display:inline;} .profile-img img { float:left; margin:0 10px 5px 0; border:4px solid #fff; } .profile-data strong { display:block; } #profile-container p { margin:0 15px .5em; } #profile-container .profile-textblock { clear:left; } #profile-container a { color:#258; } .profile-link a { background:url("http://www.blogblog.com/rounders/icon_profile.gif") no-repeat 0 .1em; padding-left:15px; font-weight:bold; } ul.profile-datablock { list-style-type:none; } /* Sidebar Boxes ----------------------------------------------- */ @media all { .box { background:#fff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top; margin:0 0 15px; padding:10px 0 0; color:#666; } .box2 { background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom; padding:0 13px 8px; } } @media handheld { .box { background:#fff; } .box2 { background:none; } } .sidebar-title { margin:0; padding:0 0 .2em; border-bottom:1px dotted #9b9; font-size:115%; line-height:1.5em; color:#333; } .box ul { margin:.5em 0 1.25em; padding:0 0px; list-style:none; } .box ul li { background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em; margin:0; padding:0 0 3px 16px; margin-bottom:3px; border-bottom:1px dotted #eee; line-height:1.4em; } .box p { margin:0 0 .6em; } /* Footer ----------------------------------------------- */ #footer { clear:both; margin:0; padding:15px 0 0; } @media all { #footer div { background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top; padding:8px 0 0; color:#fff; } #footer div div { background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom; padding:0 15px 8px; } } @media handheld { #footer div { background:#456; } #footer div div { background:none; } } #footer hr {display:none;} #footer p {margin:0;} #footer a {color:#fff;} /* Feeds ----------------------------------------------- */ #blogfeeds { } #postfeeds { padding:0 15px 0; }

Tuesday 8 May 2012

"Transform Google+ into the ultimate Pinterest clone with this userscript"

google2-520x245

Transform Google+ into the ultimate Pinterest clone with this userscript

We’ve already come across a way to transform your Facebook feed to make it look like Pinterest, and it was only a matter of time before someone came up with something similar for Google+.
Using the aptly named Greasemonkey userscript Google+ Pinterest, you can instantly transform your Google+ feed into a Pinterest-like grid of posts and photos.
To install a userscript on Firefox, make sure you have the Greasemonkey add-on installed, while Safari users can opt for GreaseKit. Chrome users can simply install the userscript directly from the site.
With Google+ recently introducing a revamped design, the look hasn’t gone down well among all of its users. If you’ve been particularly annoyed by that great big chunk of white space glaring back at you, and aren’t sure what to do with it, this is a great way to get rid of it.
Once you’ve installed the userscript, your Google+ newsfeed will be transformed into three columns, and photos, of course, really come to life with the new layout.
Google Pinterest Transform Google+ into the ultimate Pinterest clone with this userscript
The same goes for profile pages, and Google+ pages, with all the content displayed in a grid. The changes are of course only skin-deep, allowing you to interact with Google+ as you normally would – leaving comments, sharing content and more.

Profile Transform Google+ into the ultimate Pinterest clone with this userscript
Aside from giving your Google+ feed the ultimate Pinterest feel, the script also puts the focus on the content you’re viewing, hiding the menu and chat window out of sight. The menu slides into sight when you hover over the left hand side of the screen, with the same effect used to slide the chat window into sight on the right hand side.

If you follow a lot of photographers on Google+, this userscript offers a pretty visually appealing way to keep up with their latest images.
Unlike its Facebook counterpart, there is no real Pinterest integration here, and the process of pinning or repinning content is nowhere to be found. It’s simply a cool way to reinvent your Google+ experience.

Labels: , , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home