Ditulis oleh: Ditulis pada: 11/24/2015
Jika Anda memiliki atau mengelola beberapa blog, mungkin Anda ingin menampilkan feed blog lain di sebuah blog lainnya. Dan untuk blogspot sudah difasilitasi oleh Blogger dengan widget Feed yang bisa dipasang di sidebar. Namun menurut saya, tampilan default widget Feed Blogger ini kurang menarik dan tidak nge-blend dengan tema blog.Namun tentu saja kita bisa memodifikasinya agar tampilannya bisa menyatu dengan tampilan tema blog kita. Jika Anda ingin mencobanya silahkan ikuti langkahnya di bawah ini.
Pertama
Silahkan masuk ke Tata Letak > Add a Gadget, silahkan pilih gadget FEED. Kemudian masukan feed blog yang ingin ditampilkan, biasanya feed dari sebuah blog akan seperti di bawah ini.
http://namablog.blogspot.com/feeds/posts/default
atau
http://www.domainkamu.com/feeds/posts/default
atau jika ingin menampilkan feed wordpress biasanya seperti ini:
http://domainkamu.com/feed/
Kemudian tentukan jumlah feed yang ingin ditampilkan dan centang Open links in new window lalu SAVE widget.
Kedua
Untuk memodifikasi tampilan widget feed Blogger, simpan kode CSS di bawah ini di atas kode
</head>
<style type='text/css'>
#Feed1 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul{
list-style:none;
margin:0;
padding:0
}
#Feed1_feedItemListDisplay a{
color:#444;
text-decoration:none;
font-size:16px!important
}
#Feed1_feedItemListDisplay a:hover{
color:#e8554e
}
#Feed1_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:solid 1px #dedede;
padding:4px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child{
border-top:solid 1px #dedede
}
</style>
Tentunya CSS di atas tidak baku, Anda bisa menyesuaikan dengan tema blog Anda seperti warna link
color:#444; pada #Feed1_feedItemListDisplay a, warna link ketika di-hover #Feed1_feedItemListDisplay a:hover{color:#e8554e} dan lainnya.Jika Anda memasang 2 atau 3 feed blog, maka tambahkan kode
#Feed2_feedItemListDisplay, #Feed3_feedItemListDisplay pada semua CSS sehingga seperti di bawah ini
<style type='text/css'>
#Feed1 .widget-content,
#Feed2 .widget-content,
#Feed3 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul,
#Feed2_feedItemListDisplay li,#Feed2_feedItemListDisplay ul,
#Feed3_feedItemListDisplay li,#Feed3_feedItemListDisplay ul{
list-style:none;
margin:0;
padding:0
}
#Feed1_feedItemListDisplay a,
#Feed2_feedItemListDisplay a,
#Feed3_feedItemListDisplay a{
color:#444;
text-decoration:none;
font-size:16px!important
}
#Feed1_feedItemListDisplay a:hover,
#Feed2_feedItemListDisplay a:hover,
#Feed3_feedItemListDisplay a:hover{
color:#e8554e
}
#Feed1_feedItemListDisplay li,
#Feed2_feedItemListDisplay li,
#Feed3_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:solid 1px #dedede;
padding:4px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child,
#Feed2_feedItemListDisplay li:first-child,
#Feed3_feedItemListDisplay li:first-child{
border-top:solid 1px #dedede
}
</style>
Ketiga
Jika ternyata widget Feed Blogger tidak muncul, berarti widget.js Blogger blog Anda disembunyikan. Biasanya di paling bawah kode HTML template blog akan ada kode
<!--</body>--></body>Jika ternyata demikian, silahkan simpan kode javascript di bawah ini di atas kode
<!--</body>--></body>.
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://www.blogger.com/static/v1/widgets/707158982-widgets.js\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "<data:blog.blogId/>";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>","<data:blog.url/>","<data:blog.blogId/>");
_WidgetManager._RegisterWidget("_FeedView", new _WidgetInfo("Feed1", "sidebar1", null, document.getElementById("Feed1"), {"title": "Title Blog", "showItemDate": false, "showItemAuthor": false, "feedUrl": "http://namablog.blogspot.com/feeds/posts/default", "numItemsShow": 5, "loadingMsg": "Loading...", "openLinksInNewWindow": true}, "displayModeFull"));
</script>
sidebar1 silahkan sesuaikan dengan ID sidebar tempat Feed ditampilkan,Title Blog silahkan sesuaikan dengan Title Blog yang feednya ditampilkan,http://namablog.blogspot.com/feeds/posts/default silahkan ganti dengan feed blog yang dimaksud,5 silahkan ganti dengan jumlah feed yang ingin ditampilkan.Jika Anda menampilkan 3 buah feed blog maka akan tampak seperti di bawah ini
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://www.blogger.com/static/v1/widgets/707158982-widgets.js\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "<data:blog.blogId/>";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>","<data:blog.url/>","<data:blog.blogId/>");
_WidgetManager._RegisterWidget("_FeedView", new _WidgetInfo("Feed1", "sidebar1", null, document.getElementById("Feed1"), {"title": "Title Blog", "showItemDate": false, "showItemAuthor": false, "feedUrl": "http://namablog.blogspot.com/feeds/posts/default", "numItemsShow": 5, "loadingMsg": "Loading...", "openLinksInNewWindow": true}, "displayModeFull"));
_WidgetManager._RegisterWidget("_FeedView", new _WidgetInfo("Feed2", "sidebar1", null, document.getElementById("Feed2"), {"title": "Title Blog", "showItemDate": false, "showItemAuthor": false, "feedUrl": "http://namablog.blogspot.com/feeds/posts/default", "numItemsShow": 5, "loadingMsg": "Loading...", "openLinksInNewWindow": true}, "displayModeFull"));
_WidgetManager._RegisterWidget("_FeedView", new _WidgetInfo("Feed3", "sidebar1", null, document.getElementById("Feed3"), {"title": "Title Blog", "showItemDate": false, "showItemAuthor": false, "feedUrl": "http://namablog.blogspot.com/feeds/posts/default", "numItemsShow": 5, "loadingMsg": "Loading...", "openLinksInNewWindow": true}, "displayModeFull"));
</script>
Selesai...selamat mencoba.