Postingan ini terinspirasi dari banyaknya Blogger yang mempunyai banyak blog yang dikelolanya, dan kebanyakan dari mereka pasti saling menghubungkan antara blog yang satu dengan lainnya, terjadi kendala pada saat menghubungkan link blog mereka. Kendala yang sering ditemukan pada tampilan Widget Feed Blogger adalah tampilannya kalau menurut saya agak kurang menarik, memang secara default Blogger sudah menyediakan setingan tersebut di Widget yang nantinya bisa di pasang dan ditampilkan pada sidebar.
Berawal dari tangan yang iseng ini dan saya mencoba untuk mengutak-atiknya akhirnya berhasil Feed Blogger tersebut di modifikasi, bagi sobat yang ingin mencobanya di postingan kali ini akan dibahas Cara Modifikasi Tampilan Widget Feed Blogger, mari kita simak bersama.
Langkah Pertama
Silahkan sobat masuk ke Tata Letak > Add Gadget > kemudian cari Gadget Feed, silahkan masukkan Feed yang ingin ditampilkan dan kebanyakan tampilannya url nya seperti ini
Atau ada juga seperti
Bagi sobat yang menggunakan Blog Platform Wordpress biasanya tampilannya seperti ini
Setelah sobat sudah menentukan kira-kira berapa blog yang ingin ditampilkan klik open links in new window dan silahkan save.
Langkah Ke Dua
Seperti yang sudah disampaikan diatas postingan ini adalah memodifikasi tampilan Feed Bloger tersebut yang sudah di buat di sidebar, sekarang silahkan sobat salin kode CSS berikut ini dan letakkan tepat diatas kode </head>
Jika sudah dan dirasa masih kurang enak dipandang sobat bisa tentukan sendiri warnanya seperti warna link color:#444; yang terdapat di #feed1_feedItemListDisplay a, yang ketika di hover #feed1_feedItemListDisplay a:hover{color#e8554e} dan sebagainya, silahkan sobat sesuaikan menurut selera.
Itu jika sobat hanya memasang 1 feed blogger, bagaimana jika ingin memasang 2 atau 3 feed blog, silahkan tambahkan kode #feed2_feedItemListDisplay, #feed3_feedItemListDisplay dan seterusnya di setiap kode CSS yang nantinya akan seperti ini
Langkah Ke Tiga
Ada pernah saya menemui masalah, padahal semua kode sudah dipastikan terpasang namun feed blogger tersebut tidak muncul, ternyata setelah di telusuri kembali ternyata widget.js Blogger tersembunyi itu yang menyebabkan Feed Blogger tidak muncul. Untuk mengatasi hal tersebut silahkan sobat cari kode <!--</body>--></body> biasanya kode tersebut ada di paling bawah template blog.
Jika sudah ketemu kode <!--</body>--></body> silahkan tambahkan kode berikut ini dan letakkan pas diatasnya
Perhatikan kode yang ditandai seperti sidebar1 silahkan sobat sesuaikan dengan ID Sidebar lokasi Feed yang nantinya akan ditampilkan, kemudian Title Blog sesuaikan juga dengan Title Blog yang nantinya akan sobat tampilkan, lalu http://alamaturlkamu.blogspot.com/feeds/post/default ganti dengan alamat url blog yang dimaksud, kemudian 5 silahkan atur jumlah feed yang akan sobat tampilkan nantinya.
Nah kalau sobat mau menampilkan 3 buah feed blog pada sidebar tersebut maka yang akan terlihat tampilannya seperti ini
Perhatikan baik-baik penempatan kode tersebut, dan Selesai...jangan lupa untuk di save, hal penting yang perlu diperhatikan sebaiknya sebelum mempublishnya ada baiknya di Pratinjau terlebih dahulu. Terima kasih sudah berkunjung semoga bermanfaat
http://alamaturlkamu.blogspot.com/feeds/posts/defaultAtau ada juga seperti
http://www.alamaturlkamu.com/feeds/posts/defaultBagi sobat yang menggunakan Blog Platform Wordpress biasanya tampilannya seperti ini
http://alamaturlkamu.com/feed/Setelah sobat sudah menentukan kira-kira berapa blog yang ingin ditampilkan klik open links in new window dan silahkan save.
Langkah Ke Dua
Seperti yang sudah disampaikan diatas postingan ini adalah memodifikasi tampilan Feed Bloger tersebut yang sudah di buat di sidebar, sekarang silahkan sobat salin kode CSS berikut ini dan letakkan tepat diatas 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>Jika sudah dan dirasa masih kurang enak dipandang sobat bisa tentukan sendiri warnanya seperti warna link color:#444; yang terdapat di #feed1_feedItemListDisplay a, yang ketika di hover #feed1_feedItemListDisplay a:hover{color#e8554e} dan sebagainya, silahkan sobat sesuaikan menurut selera.
Itu jika sobat hanya memasang 1 feed blogger, bagaimana jika ingin memasang 2 atau 3 feed blog, silahkan tambahkan kode #feed2_feedItemListDisplay, #feed3_feedItemListDisplay dan seterusnya di setiap kode CSS yang nantinya akan seperti 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>Langkah Ke Tiga
Ada pernah saya menemui masalah, padahal semua kode sudah dipastikan terpasang namun feed blogger tersebut tidak muncul, ternyata setelah di telusuri kembali ternyata widget.js Blogger tersembunyi itu yang menyebabkan Feed Blogger tidak muncul. Untuk mengatasi hal tersebut silahkan sobat cari kode <!--</body>--></body> biasanya kode tersebut ada di paling bawah template blog.
Jika sudah ketemu kode <!--</body>--></body> silahkan tambahkan kode berikut ini dan letakkan pas diatasnya
<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://alamaturlkamu.blogspot.com/feeds/posts/default", "numItemsShow": 5, "loadingMsg": "Loading...", "openLinksInNewWindow": true}, "displayModeFull"));
</script>Perhatikan kode yang ditandai seperti sidebar1 silahkan sobat sesuaikan dengan ID Sidebar lokasi Feed yang nantinya akan ditampilkan, kemudian Title Blog sesuaikan juga dengan Title Blog yang nantinya akan sobat tampilkan, lalu http://alamaturlkamu.blogspot.com/feeds/post/default ganti dengan alamat url blog yang dimaksud, kemudian 5 silahkan atur jumlah feed yang akan sobat tampilkan nantinya.
Nah kalau sobat mau menampilkan 3 buah feed blog pada sidebar tersebut maka yang akan terlihat tampilannya seperti 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>Perhatikan baik-baik penempatan kode tersebut, dan Selesai...jangan lupa untuk di save, hal penting yang perlu diperhatikan sebaiknya sebelum mempublishnya ada baiknya di Pratinjau terlebih dahulu. Terima kasih sudah berkunjung semoga bermanfaat
EmoticonEmoticon