How to make Linkwithin widget Mobile Responsive?


#1

Hi @Mohammad, I put this discussion in the right category? This responsive widgets.

I’m preparing a blog that appear responsive but LinkWithin widget did not have a way to change. I have tried using CSS but there are parts that provide padding 106px but that did not have an ID / Class. I think, it from javascript

I am force to css, it looks like this

But I look at MBT LinkWithin widget remains responsive, I hope you share tutorials


#2

Why dont you just use this widget:

<style type='text/css'>
#related-postsx {
    background-color:#FFF;
    margin-top:10px;
    -moz-box-shadow: 0px 0px 3px #e0e0e0;
    -webkit-box-shadow: 0px 0px 3px #e0e0e0;
    box-shadow: 0px 0px 3px #e0e0e0;
    border:1px solid #ccc;
    padding:5px;
}
#related-postsx h4 {
    background-color:#666;
    color:#fff;
    margin:0;
    padding:5px 7px;
    font-size:15px;
    font-weight:bold;
    -moz-text-shadow: 0 1px 0 black;
    -webkit-text-shadow: 0 1px 0 black;
    text-shadow: 0 1px 0 black;
    text-align:center;
}
#related-postsx ul, #related-postsx li {
    padding:0;
    list-style:none;
    margin-top:3px;
    overflow:hidden;
    position:relative
}
#related-postsx ul.loadingxx {
    width:100%;
    height:50px;
    background:transparent url(http://4.bp.blogspot.com/-qqwrk3XjD_8/UOMrfs1B5CI/AAAAAAAAHqs/ahtUZYGxN3E/s1600/loading-32-v1.gif) no-repeat 50% 50%
}
#related-postsx li {
    width:49.6%;
    float:left;
    height:135px;
    margin:0 1px 2px;
    -o-transition:0.6s linear;
    -ms-transition:0.6s linear;
    -moz-transition:0.6s linear;
    -webkit-transition:0.6s linear;
    transition:all .4s ease-out;
}
#related-postsx .overlayb {
    width:100%;
    height:250px;
    background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
    z-index:1;
    position:absolute;
    background-position:0 0;
    background-repeat:repeat-x;
    bottom:-50%;
    -o-transition:0.6s linear;
    -ms-transition:0.6s linear;
    -moz-transition:0.6s linear;
    -webkit-transition:0.6s linear;
    transition:all .4s ease-out;
}
#related-postsx li:hover .overlayb {
    -ms-filter:&quot;
    progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;
    ;
    filter:alpha(opacity=10);
    -khtml-opacity:0.1;
    -moz-opacity:0.1;
    opacity:0.1;
    transition-duration:0s;
}
#related-postsx img {
    width:100%;
    position:absolute;
    bottom:-40%;
    height:250px;
}
#related-postsx strong {
    position:absolute;
    bottom:30px;
    color:white;
    font-family:&quot;
    Bitter&quot;
    , arial, sans-serif;
    padding:0 10px;
    z-index:4;
    width:100%;
    font-size:150%;
    font-weight:bold;
    -moz-text-shadow: 0 1px 2px black;
    -webkit-text-shadow: 0 1px 2px black;
    text-shadow: 0 1px 2px black;
}
#related-postsx .infonya {
    position:absolute;
    bottom:10px;
    padding:0 10px;
    width:100%;
    z-index:3;
    color:white;
    -moz-text-shadow: 0 1px 2px black;
    -webkit-text-shadow: 0 1px 2px black;
    text-shadow: 0 1px 2px black;
}
#related-postsx .dt {
    margin-right:5px;
    padding-right:5px;
    border-right:1px solid #E9E9E9
}
#related-postsx .jkmt {
    position:absolute;
    right:10px;
    padding:2px 4px;
    top:-5px;
    background-color:#860000;
    z-index:3
}
#related-postsx .jkmt::after {
    content:&quot;
    &quot;
    ;
    width:0;
    height:0;
    border-width:2px 4px;
    border-style:solid;
    border-color:#860000 #860000 transparent transparent;
    position:absolute;
    top:100%;
    right:0
}
@media only screen and (max-width:580px) {
    #related-postsx li {
        width:49%;
    }
    #related-postsx strong {
        font-size:15px;
        font-weight:bold;
        line-height:1.3em;
        bottom:35px;
        padding:0 3px
    }
    #related-postsx .infonya {
        position:absolute;
        bottom:5px;
        padding:0 3px;
    }
    #related-postsx strong {
        -moz-text-shadow: 0 1px 2px black;
        -webkit-text-shadow: 0 1px 2px black;
        text-shadow: 0 1px 2px black;
    }
    #related-postsx .infonya {
        -moz-text-shadow: 0 1px 2px black;
        -webkit-text-shadow: 0 1px 2px black;
        text-shadow: 0 1px 2px black;
    }
}
@media only screen and (max-width:490px) {
    #related-postsx strong {
        font-size:15px;
        font-weight:bold;
        line-height:1.3em;
        bottom:35px;
        padding:0 3px
    }
    #related-postsx .infonya {
        position:absolute;
        bottom:5px;
        padding:0 3px;
    }
    #related-postsx strong {
        -moz-text-shadow: 0 1px 2px black;
        -webkit-text-shadow: 0 1px 2px black;
        text-shadow: 0 1px 2px black;
    }
    #related-postsx .infonya {
        -moz-text-shadow: 0 1px 2px black;
        -webkit-text-shadow: 0 1px 2px black;
        text-shadow: 0 1px 2px black;
    }
    #related-postsx .dt {
        border-right:0px solid #E9E9E9
    }
    .auty {
        display:none
    }
}
@media only screen and (max-width:479px) {
    #related-postsx li {
        width:100%;
        height:150px;
        margin:0 0 3px
    }
    #related-postsx .dt {
        border-right:1px solid #E9E9E9
    }
    .auty {
        display:inline
    }
}
</style>

And:

<b: if cond = 'data:blog.pageType == &quot;item&quot;'>
<script src = 'https://boyz.googlecode.com/svn/JS/related-postx-responsive.js'
type = 'text/javascript'/>
<div id = 'relatedpostsx'>
<div id = 'artikelterkait'>
<script type = 'text/javascript'>
//<![CDATA[
$(window).load(function () {
    relatedPostsWidget({
        related_title: "Related Posts",
        containerSelector: "#relatedpostsx",
        maxPosts: 4,
        loadingClass: "loadingxx",
        rlt_thumb: 300
    });
});
//]]>
</script>
</div>
</div>
</b: if>

#3

Buddy at mbt we are using a custom related posts widget just like the one similar to what @Mad shared. Linkwithin because I am not a big fan of using widgets provided by third party services and instead use custom scripts to create widgets for a purpose.

If you want I can the code of mbt’s related posts widget. If you don’t want a long code then you can try nrelate widget which is better than linkwithin because it doesn’t redirect your URLs to their servers as linkwithin does and thus doesn’t effect your blog’s SEO also.

Linkwithin widget does not use the image tag to display images and instead uses the CSS property of Background to load images using a script which makes it difficult to style it using a ID or class. The images are loaded inside a div container as shown below

<div style="background: url(http://images3.linkwithin.com/images/314314291.jpg?v=1) no-repeat; width: 100px; height: 100px; margin: 0; border: 0; padding: 0"></div>

It has the linkwithin_img_0 class but that doesn’t enclose the image because each image is styled using inline CSS. So it is a total waste of time.


#4

Thank you for suggesting @Mad , I will try to test it first on my other site. I hope it fits with my wishes.

@Mohammad I once read in one of your posts about "faster when storing scripts in a blog than on third-party servers" so, you have any other way without taking the script from a third party server? such as storing the script itself in the blog.

if you have a solution, I will release linkwithin widget and replace it. Whether it is as suggested Mad? or there are lighter


#5

Storing the script on blogger means simply pasting it inside the template editor but if the script is already hosted on fast CDN (content delivery network) then you don’t need to store it on your template. Services like linkwithin and nrelate have fast servers and you can surely trust them in this regard, same goes for


#6

Hi @Mohammad nrelate has stopped. I want to try to follow the advice of @Mad but google code also will stop

is there any other solution?


#7

Well maybe put this JS directly to your template:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function relatedPostsWidget(a) {
    (function (e) {
        var f = {
            blogURL: "",
            maxPosts: 10,
            maxTags: 10,
            maxPostsPerTag: 10,
            containerSelector: "",
            tags: null,
            loadingText: "",
            loadingClass: "",
            relevantTip: "",
            relatedTitle: "Related Posts",
            rlpBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
            rlt_thumb: 70,
            rlt_monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            recentTitle: "Recent Posts",
            postScoreClass: "",
            onLoad: false
        };
        f = e.extend({}, f, a);
        var k = 0,
            b = null,
            g = null;
        if (!f.containerSelector) {
            document.write('<div id="related-postsx"></div>');
            f.containerSelector = "#related-postsx"
        }
        var c = function (y, o) {
            k++;
            if (y.feed.entry) {
                for (var p = 0; p < y.feed.entry.length; p++) {
                    var v = y.feed.entry[p];
                    var r = "";
                    for (var n = 0; n < v.link.length; n++) {
                        if (v.link[n].rel == "alternate") {
                            r = v.link[n].href;
                            break
                        }
                    }
                    var q = v.published.$t.substring(0, 10);
                    var m = q.substring(0, 4);
                    var x = q.substring(5, 7);
                    var t = q.substring(8, 10);
                    var s = f.rlt_monthNames[parseInt(x, 10) - 1];
                    var z = v.thr$total.$t;
                    var l = v.author[0].name.$t;
                    var u = v.title.$t;
                    if ("media$thumbnail" in v) {
                        var w = v.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + f.rlt_thumb + "-c")
                    } else {
                        var w = f.rlpBlank
                    }
                    if (location.href.toLowerCase() != r.toLowerCase()) {
                        i(r, u, w, m, t, z, s, l)
                    }
                }
            }
            if (k >= f.tags.length) {
                g.attr("class", "");
                e("#related-posts-loadingtext", b).remove();
                if (f.maxPosts > 0) {
                    e("li:gt(" + (f.maxPosts - 1) + ")", g).remove()
                }
            }
        };
        var i = function (q, w, x, m, u, y, s, l) {
            var r = e("li", g);
            for (var p = 0; p < r.length; p++) {
                var v = e("a", r.eq(p));
                var t = j(v);
                if (v.attr("href") == q) {
                    h(v, ++t);
                    for (var o = p - 1; o >= 0; o--) {
                        var n = e("a", r.eq(o));
                        if (j(n) > t) {
                            if (p - o > 1) {
                                r.eq(o).after(r.eq(p))
                            }
                            return
                        }
                    }
                    if (p > 0) {
                        r.eq(0).before(r.eq(p))
                    }
                    return
                }
            }
            g.append('<li><a href="' + q + '" title="' + (f.relevantTip ? f.relevantTip.replace("\d", 1) : "") + '"><span><div class="overlayb"></div><img alt="' + w + '" src="' + x + '"/></span><strong>' + w + '</strong></a><div class="infonya"><span class="dt">' + u + " " + s + " " + m + '</span><span class="auty">' + l + '</span><span class="jkmt">' + y + "</span></div></li>")
        };
        var j = function (l) {
            var m = parseInt(l.attr("score"));
            return m > 0 ? m : 1
        };
        var h = function (l, m) {
            l.attr("score", m);
            if (f.relevantTip) {
                l.attr("title", f.relevantTip.replace("\d", m))
            }
            if (f.postScoreClass) {
                l.attr("class", f.postScoreClass + m)
            }
        };
        var d = function () {
            if (f.containerSelector != "#related-postsx") {
                var l = e(f.containerSelector);
                if (l.length != 1) {
                    return
                }
                b = e('<div id="related-postsx"></div>').appendTo(l)
            } else {
                b = e(f.containerSelector)
            }
            if (!f.tags) {
                f.tags = [];
                e('a[rel="tag"]:lt(' + f.maxTags + ")").each(function () {
                    var n = e.trim(e(this).text().replace(/\n/g, ""));
                    if (e.inArray(n, f.tags) == -1) {
                        f.tags[f.tags.length] = n
                    }
                })
            }
            if (f.tags.length == 0 && !f.recentTitle) {
                return
            }
            if (f.tags.length == 0) {
                e("<h4>" + f.recentTitle + "</h4>").appendTo(b)
            } else {
                if (f.relatedTitle) {
                    e("<h4>" + f.relatedTitle + "</h4>").appendTo(b)
                }
            }
            if (f.loadingText) {
                e('<div id="related-posts-loadingtext">' + f.loadingText + "</div>").appendTo(b)
            }
            g = e("<ul " + (f.loadingClass ? 'class="' + f.loadingClass + '"' : "") + "></ul>").appendTo(b);
            if (f.tags.length == 0) {
                e.ajax({
                    url: f.blogURL + "/feeds/posts/summary/",
                    data: {
                        "max-results": f.maxPostsPerTag,
                        alt: "json-in-script"
                    },
                    success: c,
                    dataType: "jsonp",
                    cache: true
                })
            } else {
                for (var m = 0; m < f.tags.length; m++) {
                    e.ajax({
                        url: f.blogURL + "/feeds/posts/summary/",
                        data: {
                            category: f.tags[m],
                            "max-results": f.maxPostsPerTag,
                            alt: "json-in-script"
                        },
                        success: c,
                        dataType: "jsonp",
                        cache: true
                    })
                }
            }
        };
        if (f.onLoad) {
            e(window).load(d)
        } else {
            e(document).ready(d)
        }
    })(jQuery)
};
//]]>
</script>
</b:if>

Or


Use minimized JS:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:10,maxTags:10,maxPostsPerTag:10,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",relatedTitle:"Related Posts",rlpBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",rlt_thumb:70,rlt_monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],recentTitle:"Recent Posts",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="related-postsx"></div>');f.containerSelector="#related-postsx"}var c=function(y,o){k++;if(y.feed.entry){for(var p=0;p<y.feed.entry.length;p++){var v=y.feed.entry[p];var r="";for(var n=0;n<v.link.length;n++){if(v.link[n].rel=="alternate"){r=v.link[n].href;break}}var q=v.published.$t.substring(0,10);var m=q.substring(0,4);var x=q.substring(5,7);var t=q.substring(8,10);var s=f.rlt_monthNames[parseInt(x,10)-1];var z=v.thr$total.$t;var l=v.author[0].name.$t;var u=v.title.$t;if("media$thumbnail" in v){var w=v.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var w=f.rlpBlank}if(location.href.toLowerCase()!=r.toLowerCase()){i(r,u,w,m,t,z,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#related-posts-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(q,w,x,m,u,y,s,l){var r=e("li",g);for(var p=0;p<r.length;p++){var v=e("a",r.eq(p));var t=j(v);if(v.attr("href")==q){h(v,++t);for(var o=p-1;o>=0;o--){var n=e("a",r.eq(o));if(j(n)>t){if(p-o>1){r.eq(o).after(r.eq(p))}return}}if(p>0){r.eq(0).before(r.eq(p))}return}}g.append('<li><a href="'+q+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span><div class="overlayb"></div><img alt="'+w+'" src="'+x+'"/></span><strong>'+w+'</strong></a><div class="infonya"><span class="dt">'+u+" "+s+" "+m+'</span><span class="auty">'+l+'</span><span class="jkmt">'+y+"</span></div></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#related-postsx"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related-postsx"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="related-posts-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.ajax({url:f.blogURL+"/feeds/posts/summary/",data:{"max-results":f.maxPostsPerTag,alt:"json-in-script"},success:c,dataType:"jsonp",cache:true})}else{for(var m=0;m<f.tags.length;m++){e.ajax({url:f.blogURL+"/feeds/posts/summary/",data:{category:f.tags[m],"max-results":f.maxPostsPerTag,alt:"json-in-script"},success:c,dataType:"jsonp",cache:true})}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
//]]>
</script>
</b:if>