Menampilkan Dan Memodifikasi Widget Feed Blogger

Menampilkan Dan Memodifikasi Widget Feed Blogger

Bola Hero Gawai

Menampilkan Dan Memodifikasi Widget Feed Blogger

Menampilkan Dan Memodifikasi Widget Feed Blogger
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 &lt;!--</body>--&gt;&lt;/body&gt;

Jika ternyata demikian, silahkan simpan kode javascript di bawah ini di atas kode &lt;!--</body>--&gt;&lt;/body&gt;.


<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;));
</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) != &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>

Selesai...selamat mencoba.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×