KODE IKLAN DFP 1 Cara Modifikasi Tampilan Widget Feed Blogger | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Cara Modifikasi Tampilan Widget Feed Blogger

    KODE IKLAN 200x200
    KODE IKLAN 336x280
     Postingan ini terinspirasi dari banyaknya Blogger yang mempunyai banyak blog yang dikelol Cara Modifikasi Tampilan Widget Feed Blogger

    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 

    http://alamaturlkamu.blogspot.com/feeds/posts/default

    Atau ada juga seperti

    http://www.alamaturlkamu.com/feeds/posts/default

    Bagi 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 &lt;!--</body>--&gt;&lt;/body&gt; biasanya kode tersebut ada di paling bawah template blog.

    Jika sudah ketemu kode &lt;!--</body>--&gt;&lt;/body&gt; 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) != &quot;undefined&quot; &amp;&amp; BLOG_attachCsiOnload != null) { window[&quot;blogger_templates_experiment_id&quot;] = &quot;templatesV1&quot;;window[&quot;blogger_blog_id&quot;] = &quot;<data:blog.blogId/>&quot;;BLOG_attachCsiOnload(&quot;&quot;); }_WidgetManager._Init(&quot;//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:blog.blogId/>&quot;); _WidgetManager._RegisterWidget(&quot;_FeedView&quot;, new _WidgetInfo(&quot;Feed1&quot;, &quot;sidebar1&quot;, null, document.getElementById(&quot;Feed1&quot;), {&quot;title&quot;: &quot;Title Blog&quot;, &quot;showItemDate&quot;: false, &quot;showItemAuthor&quot;: false, &quot;feedUrl&quot;: &quot;http://alamaturlkamu.blogspot.com/feeds/posts/default&quot;, &quot;numItemsShow&quot;: 5, &quot;loadingMsg&quot;: &quot;Loading...&quot;, &quot;openLinksInNewWindow&quot;: true}, &quot;displayModeFull&quot;)); </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) != &quot;undefined&quot; &amp;&amp; BLOG_attachCsiOnload != null) { window[&quot;blogger_templates_experiment_id&quot;] = &quot;templatesV1&quot;;window[&quot;blogger_blog_id&quot;] = &quot;<data:blog.blogId/>&quot;;BLOG_attachCsiOnload(&quot;&quot;); }_WidgetManager._Init(&quot;//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:blog.blogId/>&quot;); _WidgetManager._RegisterWidget(&quot;_FeedView&quot;, new _WidgetInfo(&quot;Feed1&quot;, &quot;sidebar1&quot;, null, document.getElementById(&quot;Feed1&quot;), {&quot;title&quot;: &quot;Title Blog&quot;, &quot;showItemDate&quot;: false, &quot;showItemAuthor&quot;: false, &quot;feedUrl&quot;: &quot;http://namablog.blogspot.com/feeds/posts/default&quot;, &quot;numItemsShow&quot;: 5, &quot;loadingMsg&quot;: &quot;Loading...&quot;, &quot;openLinksInNewWindow&quot;: true}, &quot;displayModeFull&quot;)); _WidgetManager._RegisterWidget(&quot;_FeedView&quot;, new _WidgetInfo(&quot;Feed2&quot;, &quot;sidebar1&quot;, null, document.getElementById(&quot;Feed2&quot;), {&quot;title&quot;: &quot;Title Blog&quot;, &quot;showItemDate&quot;: false, &quot;showItemAuthor&quot;: false, &quot;feedUrl&quot;: &quot;http://namablog.blogspot.com/feeds/posts/default&quot;, &quot;numItemsShow&quot;: 5, &quot;loadingMsg&quot;: &quot;Loading...&quot;, &quot;openLinksInNewWindow&quot;: true}, &quot;displayModeFull&quot;)); _WidgetManager._RegisterWidget(&quot;_FeedView&quot;, new _WidgetInfo(&quot;Feed3&quot;, &quot;sidebar1&quot;, null, document.getElementById(&quot;Feed3&quot;), {&quot;title&quot;: &quot;Title Blog&quot;, &quot;showItemDate&quot;: false, &quot;showItemAuthor&quot;: false, &quot;feedUrl&quot;: &quot;http://namablog.blogspot.com/feeds/posts/default&quot;, &quot;numItemsShow&quot;: 5, &quot;loadingMsg&quot;: &quot;Loading...&quot;, &quot;openLinksInNewWindow&quot;: true}, &quot;displayModeFull&quot;)); </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

    Sumber https://www.dibalikseo.com
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2