Menampilkan Dan Memodifikasi Widget Feed Blogger
Jika Anda mempunyai 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 dapat dipasang di sidebar. Namun berdasarkan saya, tampilan default widget Feed Blogger ini kurang menarik dan tidak nge-blend dengan tema blog.Namun tentu saja kita dapat memodifikasinya semoga tampilannya dapat 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 ibarat di bawah ini.
http://namablog.blogspot.com/feeds/posts/default
atau
http://www.domainkamu.com/feeds/posts/default
atau jikalau ingin menampilkan feed wordpress biasanya ibarat ini:
http://domainkamu.com/feed/
Kemudian tentukan jumlah feed yang ingin ditampilkan dan centang Open links in new window kemudian SAVE widget.
Kedua
Untuk memodifikasi tampilan widget feed Blogger, simpan arahan CSS di bawah ini di atas arahan
</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 dapat menyesuaikan dengan tema blog Anda ibarat warna link
color:#444; pada #Feed1_feedItemListDisplay a, warna link saat di-hover #Feed1_feedItemListDisplay a:hover{color:#e8554e} dan lainnya.Jika Anda memasang 2 atau 3 feed blog, maka tambahkan arahan
#Feed2_feedItemListDisplay, #Feed3_feedItemListDisplay pada semua CSS sehingga ibarat 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 arahan HTML template blog akan ada kode
<!--</body>--></body>Jika ternyata demikian, silahkan simpan arahan javascript di bawah ini di atas arahan
<!--</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 kawasan 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 ibarat 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. Sumber https://www.kompiajaib.com/
0 Response to "Menampilkan Dan Memodifikasi Widget Feed Blogger"
Posting Komentar