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 ketika menghubungkan link blog mereka. Kendala yang sering ditemukan pada tampilan Widget Feed Blogger yaitu tampilannya kalau menurut aku agak kurang menarik, memang secara default Blogger sudah menyediakan setingan tersebut di Widget yang nantinya mampu di pasang dan ditampilkan pada sidebar.
Berawal dari tangan yang iseng ini dan aku mencoba untuk mengutak-atiknya hasilnya berhasil Feed Blogger tersebut di modifikasi, bagi sahabat yang ingin mencobanya di postingan kali ini akan dibahas Cara Modifikasi Tampilan Widget Feed Blogger, mari kita simak bersama.
Langkah Pertama
Silahkan sahabat masuk ke Tata Letak > Add Gadget > kemudian cari Gadget Feed, silahkan masukkan Feed yang ingin ditampilkan dan kebanyakan tampilannya url nya ibarat ini
Atau ada juga seperti
Bagi sahabat yang menggunakan Blog Platform Wordpress biasanya tampilannya ibarat ini
Setelah sahabat 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 yaitu memodifikasi tampilan Feed Bloger tersebut yang sudah di buat di sidebar, sekarang silahkan sahabat salin instruksi CSS berikut ini dan letakkan sempurna diatas instruksi </head>
Jika sudah dan dirasa masih kurang enak dipandang sahabat mampu tentukan sendiri warnanya ibarat warna link color:#444; yang terdapat di #feed1_feedItemListDisplay a, yang ketika di hover #feed1_feedItemListDisplay a:hover{color#e8554e} dan sebagainya, silahkan sahabat sesuaikan menurut selera.
Itu jikalau sahabat hanya memasang 1 feed blogger, bagaimana jikalau ingin memasang 2 atau 3 feed blog, silahkan tambahkan instruksi #feed2_feedItemListDisplay, #feed3_feedItemListDisplay dan seterusnya di setiap instruksi CSS yang nantinya akan ibarat ini
Langkah Ke Tiga
Ada pernah aku menemui masalah, padahal semua instruksi sudah dipastikan terpasang namun feed blogger tersebut tidak muncul, ternyata setelah di telusuri kembali ternyata widget.js Blogger tersembunyi itu yang menimbulkan Feed Blogger tidak muncul. Untuk mengatasi hal tersebut silahkan sahabat cari instruksi <!--</body>--></body> biasanya instruksi tersebut ada di paling bawah template blog.
Jika sudah ketemu instruksi <!--</body>--></body> silahkan tambahkan instruksi berikut ini dan letakkan pas diatasnya
Perhatikan instruksi yang ditandai ibarat sidebar1 silahkan sahabat sesuaikan dengan ID Sidebar lokasi Feed yang nantinya akan ditampilkan, kemudian Title Blog sesuaikan juga dengan Title Blog yang nantinya akan sahabat tampilkan, lalu http://alamaturlkamu.blogspot.com/feeds/post/default ganti dengan alamat url blog yang dimaksud, kemudian 5 silahkan atur jumlah feed yang akan sahabat tampilkan nantinya.
Nah kalau sahabat mau menampilkan 3 buah feed blog pada sidebar tersebut maka yang akan terlihat tampilannya ibarat ini
Perhatikan baik-baik penempatan instruksi 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 supaya bermanfaat
http://alamaturlkamu.blogspot.com/feeds/posts/defaultAtau ada juga seperti
http://www.alamaturlkamu.com/feeds/posts/defaultBagi sahabat yang menggunakan Blog Platform Wordpress biasanya tampilannya ibarat ini
http://alamaturlkamu.com/feed/Setelah sahabat 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 yaitu memodifikasi tampilan Feed Bloger tersebut yang sudah di buat di sidebar, sekarang silahkan sahabat salin instruksi CSS berikut ini dan letakkan sempurna diatas instruksi </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 sahabat mampu tentukan sendiri warnanya ibarat warna link color:#444; yang terdapat di #feed1_feedItemListDisplay a, yang ketika di hover #feed1_feedItemListDisplay a:hover{color#e8554e} dan sebagainya, silahkan sahabat sesuaikan menurut selera.
Itu jikalau sahabat hanya memasang 1 feed blogger, bagaimana jikalau ingin memasang 2 atau 3 feed blog, silahkan tambahkan instruksi #feed2_feedItemListDisplay, #feed3_feedItemListDisplay dan seterusnya di setiap instruksi CSS yang nantinya akan ibarat 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 aku menemui masalah, padahal semua instruksi sudah dipastikan terpasang namun feed blogger tersebut tidak muncul, ternyata setelah di telusuri kembali ternyata widget.js Blogger tersembunyi itu yang menimbulkan Feed Blogger tidak muncul. Untuk mengatasi hal tersebut silahkan sahabat cari instruksi <!--</body>--></body> biasanya instruksi tersebut ada di paling bawah template blog.
Jika sudah ketemu instruksi <!--</body>--></body> silahkan tambahkan instruksi 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 instruksi yang ditandai ibarat sidebar1 silahkan sahabat sesuaikan dengan ID Sidebar lokasi Feed yang nantinya akan ditampilkan, kemudian Title Blog sesuaikan juga dengan Title Blog yang nantinya akan sahabat tampilkan, lalu http://alamaturlkamu.blogspot.com/feeds/post/default ganti dengan alamat url blog yang dimaksud, kemudian 5 silahkan atur jumlah feed yang akan sahabat tampilkan nantinya.
Nah kalau sahabat mau menampilkan 3 buah feed blog pada sidebar tersebut maka yang akan terlihat tampilannya ibarat 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 instruksi 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 supaya bermanfaat
Comments