Cara Membuat Widget Berita di Blog

Banyak cara untuk mempercantik tampilan blog dengan menambahkan berbagai macam widget, salah satu widget yang belum cukup populer yaitu widget berita. Dengan sedikit polesan untuk menyesuaikan warna dengan template blog Anda akan memberikan nuansa lebih seperti terlihat pada blog saya ini. Saya rasa untuk pemasangannya semua blogger mengetahuinya, bahkan bagi pemula sekalipun. Namun, yang perlu mendapatkan sedikit perhatian yaitu memadukan warna widget tersebut yang harus teliti dan sedikit kesabaran.

widget berita

Sedikit menambahkan basa - basi, untuk pemasangan widget berita ke dalam blog.

1. Login ke dasbor blogger

2. Pilih "Tata Letak"

3. Pilih "Tambahkan Gadget" atau "Add Gadget"

4. Scroll ke-bawah pilih "HTML/Java Script"

5. Paste kan kode di bawah ini dan kemudian save.

Penting, simak ya,,, perhatikan kode yang berwarna merah (ingat ya!!!! hanya yang berwarna merah saja) berikut: "rgba(177, 125, 206, 0.75)" ini penjelasannya "r" berarti "merah"; "g" berarti "hijau" dan "b" berarti "biru" yang dapat diartikan kode warna "rgb" ini sama dengan "#b17dce". Supaya para blogger lebih cepat memahami admin kasih penampakannya, screenshot ini saya ambil dari photoshop CS2. Nah, untuk custome warna yang pas dengan blog anda sebaiknya anda otak-atik sendiri sendiri pada kode "rgb" yang admin warnai.

Potongan kode yang harus anda edit
"<div style='color:#ffffff; width:614;height:auto;margin:5px 0 5px 0;padding:5px 10px 5px 10px; text-align:left; overflow:hidden; border-radius: 8px; -moz-border-radius: 8px; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color:#b10fce; background: -moz-linear-gradient(top, rgba(177, 125, 206, 0.75), rgba(97, 4, 114, 0.75) 50%, rgba(151, 14, 175, 0.75)); background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));'><table width=100%><tr><td width=18px><img src="http://detik.net.id/detik/image/favicon.ico" width="16px" height="16px"/></td>"

Sedangkan, untuk kode warna yang berwarna hijau seperti berikut "(#327aa4)" anda bisa menyesuaikan seperti pada "Color Picker" pada photoshop.

Butuh sedikit ketelitian. Sekian saja dari admin, semoga dapat membantu dan semoga sukses.

Terima kasih, atas kunjungannya.

<div style='color:#ffffff; width:614;height:auto;margin:5px 0 5px 0;padding:5px 10px 5px 10px; text-align:left; overflow:hidden; border-radius: 8px; -moz-border-radius: 8px; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color:#b10fce; background: -moz-linear-gradient(top, rgba(177, 125, 206, 0.75), rgba(97, 4, 114, 0.75) 50%, rgba(151, 14, 175, 0.75)); background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));'> <table width=100%> <tr><td width=18px><img src="http://detik.net.id/detik/image/favicon.ico" width="16px" height="16px"/></td> <td width="10" style="vertical-align: top;" ><a id="TickerPrevBC5226488" href="javascript: ;" onclick="PrevTickerBC5226488();" class="bc_tickerarrow" style="text-decoration: none; ">«</a></td> <td id="TickerContentBC5226488" class="bc_tickercontent" style="vertical-align: top;"> <a id="TickerLinkBC5226488" href="javascript: ;" class="bc_tickerlink" style="text-decoration: none;" target="_blank"><b><span id="TickerTitleBC5226488" class="bc_tickertitle" ></span></b></a> <span id="TickerSummaryBC5226488" class="bc_tickersummary" ></span> </td> <td width="10" style="vertical-align: top;" ><a id="TickerNextBC5226488" href="javascript: ;" onclick="NextTickerBC5226488();" class="bc_tickerarrow" style="text-decoration: none; ">»</a></td> <script id="scr5226488" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ setTimeout('document.getElementById(\'scr5226488\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.poweringnews.com/ticker-js.aspx?feedurl=http%3A//detik.feedsportal.com/c/33613/f/589693/index.rss&changedelay=8&maxitems=-1&showsummary=0&objectid=5226488\'', 500); /* ]]> */ </script> </tr> <tr><td width=18px><img src="http://lh3.googleusercontent.com/-bU9YAaVigLg/TqusCS26cGI/AAAAAAAAAZI/fICD1G7WkLE/s800/kaskus.png"/></td> <td width="10" style="vertical-align: top;" ><a id="TickerPrevBC46619671" href="javascript: ;" onclick="PrevTickerBC46619671();" class="bc_tickerarrow" style="text-decoration: none; ">«</a></td> <td id="TickerContentBC46619671" class="bc_tickercontent" style="vertical-align: top;"> <a id="TickerLinkBC46619671" href="javascript: ;" class="bc_tickerlink" style="text-decoration: none;" target="_blank"><b><span id="TickerTitleBC46619671" class="bc_tickertitle" ></span></b></a> <span id="TickerSummaryBC46619671" class="bc_tickersummary" ></span> </td> <td width="10" style="vertical-align: top;" ><a id="TickerNextBC46619671" href="javascript: ;" onclick="NextTickerBC46619671();" class="bc_tickerarrow" style="text-decoration: none; ">»</a></td> <script id="scr46619671" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ setTimeout('document.getElementById(\'scr46619671\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.poweringnews.com/ticker-js.aspx?feedurl=http%3A//www.kaskus.co.id/rss/forum/21&changedelay=5&maxitems=-1&showsummary=0&objectid=46619671\'', 500); /* ]]> */ </script> </tr> <tr><td width=18px><img src="http://www.tabloidpulsa.co.id/templates/fw_mazaya/favicon.ico"/></td> <td width="10" style="vertical-align: top;" ><a id="TickerPrevBC29075508" href="javascript: ;" onclick="PrevTickerBC29075508();" class="bc_tickerarrow" style="text-decoration: none; ">«</a></td> <td id="TickerContentBC29075508" class="bc_tickercontent" style="vertical-align: top;"> <a id="TickerLinkBC29075508" href="javascript: ;" class="bc_tickerlink" style="text-decoration: none;" target="_blank"><b><span id="TickerTitleBC29075508" class="bc_tickertitle" ></span></b></a> <span id="TickerSummaryBC29075508" class="bc_tickersummary" ></span> </td> <td width="10" style="vertical-align: top;" ><a id="TickerNextBC29075508" href="javascript: ;" onclick="NextTickerBC29075508();" class="bc_tickerarrow" style="text-decoration: none; ">»</a></td> <script id="scr29075508" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ setTimeout('document.getElementById(\'scr29075508\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.poweringnews.com/ticker-js.aspx?feedurl=http%3A//www.tabloidpulsa.co.id/rss/&changedelay=8&maxitems=-1&showsummary=0&objectid=29075508\'', 500); /* ]]> */ </script> </tr> <tr><td width=18px><img src="http://www.iconj.com/ico/9/7/9727r76z0f.ico"/></td> <td width="10" style="vertical-align: top;" ><a id="TickerPrevBC66466089" href="javascript: ;" onclick="PrevTickerBC66466089();" class="bc_tickerarrow" style="text-decoration: none; ">«</a></td> <td id="TickerContentBC66466089" class="bc_tickercontent" style="vertical-align: top;"> <a id="TickerLinkBC66466089" href="javascript: ;" class="bc_tickerlink" style="text-decoration: none;" target="_blank"><b><span id="TickerTitleBC66466089" class="bc_tickertitle" ></span></b></a> <span id="TickerSummaryBC66466089" class="bc_tickersummary" ></span> </td> <td width="10" style="vertical-align: top;" ><a id="TickerNextBC66466089" href="javascript: ;" onclick="NextTickerBC66466089();" class="bc_tickerarrow" style="text-decoration: none; ">»</a></td> </tr> </table> </div> <script id="scr66466089" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ setTimeout('document.getElementById(\'scr66466089\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.poweringnews.com/ticker-js.aspx?feedurl=http%3A//koleksi-dua-dunia.blogspot.com/feeds/posts/default%3F&changedelay=7&maxitems=-1&showsummary=0&objectid=66466089\'', 300); /* ]]> */ </script><span style="font-size: 80%; float:right;"><a href="http://goo.gl/uEv0Cm" target="_blank">Get This Widget</a></span>