Hello sobat IcloudZer kali ini admin akan memberikan informasi mengenai blogger dan dunia blogging, nah pada penasaran dengan pembahasan kali ini
Baiklah kali ini admin akan membahas bagaimana cara membuat breaking news di blogger dengan tampilan yang simple dan juga keren pastinya
Text Marquee
Breaking news ini menggunakan format Marquee atau yang biasa dikenal dengan Text berjalan, dengan sedikit desain menggunakan kodee CSS, dengan kode CSS akan membuat tampilan breaking news nya semakin menarik, selain itu tampilan dari breaking news tersebut menggunakan mode melayang di atas header blog kamu, dan jika ingin memgubah posisi breaking news tersebut silahkan lakukan menggunakan kode CSS tersebut
Setel Full Feed
Sebelum kamu menerapkan cara yang saya berikan sebentar lagi, untuk membuat breaking news diblogger, kamu harus memastikan pengaturan feed diblogger disetel dalam pengaturan full atau penuh ya
Cara Setel Full Feed
Jika kamunya masih bingung dengan setelan feed ini saya akan menjelaskan bagaiaman menyetel pengaturan feed diblogger
- Pergi Kepengaturan diblogger
- Kemudian periksa menu Feed (Jika kamu pengguna mobile, Scrol hingga bawah nanti juga ketemu
- Langkah selanjutnya Periksa setelan feed ke setelan Penuh (Jika belum menyetelnya kesetelan penuh)
Recent posts
Breaking news yang akan ditampilkan berupa Text yang memuat link atau postingan terbaru dari blog kamu, sekitar sepuluh text artikel akan ditampilkan didalam breaking news nya
Contoh Tampilan
Baiklah sobat ICloudzer jika kamu penasaran dengan bagaimana kah contoh tampilan dari breaking news tersebut silahkan periksa menggunakan tombol di bawah ini ok
Info: Bagaimana sobat ICloudzer keren sekali yak, pastilah keren
Cara Pembuatan
Baiklah sekarang kita langsung saja kita bahas cara membuat breaking news diblogger oke, perhatikan dan simak setiap langkah yang admin jabarkan sebentar lagi ok
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah, salin kode dibawah ini kemudian letakkan diatas kode ]]></b:skin> atau diatas kode </head> menggunakan Tag <style>
#rahBrkNws{display:block}
@media screen and (max-width:800px){
header{top:20px!important}
.rahRnTx{display:block;font-size:12px;padding:11px 18px 7px;background:#de3535 linear-gradient(100deg, #de3535 50%, #de3535 100%);position:fixed;border-top:1px solid transparent;top:0;left:0;z-index:8;line-height:14px;height:20px;overflow:hidden;right:0;font-weight:800}
.rahRnTx a{padding:0 5px;color:#fefefe}}
/* Dark mode */
.dark-mode .rahRnTx,.dark-mode .rahRnTx a{background:#1e1e1e;color:#fefefe}Info Kode CSS yang saya berikan diatas sudah benar, nanti akan seperti breaking news yang admin pakai didalam blog icloudice
Kode HTML
Langkah selanjutnya adalah menyalin kode HTML di bawah ini, kemudiannya letakkan kode HTML sesuai selera kamu aja, bisa di atas kode </body> atau jika ingin posisi yang tepat silahkan cari kode <b:section atau kode </b:section> kemudian letakkan kode di bawah ini tepat di bawah tag penutup </b:section>
<b:if cond='data:view.isPost'>
<b:section class='rahBrkNws' id='rahBrkNws' maxwidgets='' showaddelement='no'>
<b:widget id='HTML353535' locked='false' title='Breaking news by ICloudice' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><div class="rahRnTx">
<script>//<![CDATA[
function RecentPostsScrollerv2(json){
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{sMoqueeHTMLStart = "\<marquee onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if( nWidth){sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";}else{sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";}if( nScrollDelay){sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}if(sDirection){sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
if(sDirection == "left" || sDirection =="right")
{//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = "&nbsp;&nbsp;";}else{//For down and up directions seperate headlines by new line
sHeadlineTerminator = "\<br/\>";}}if(sOpenLinkLocation =="N"){sPostLinkLocation = " target= \"_blank\" ";}else{sPostLinkLocation = " ";}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = "";for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
{objPost = json.feed.entry[nFeedCounter];for (var nCounter = 0; nCounter < objPost.link.length; nCounter++){if (objPost.link[nCounter].rel == 'alternate'){sPostURL = objPost.link[nCounter].href;
break;}}sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )}catch(exception)
{alert(exception);}}//]]></script>
<script> var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 185; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar=""; </script> <script src="/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2"></script></div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<!-- <b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if> -->
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</b:if>Info: Kode HTML yang saya berikan diatas berfungsi untuk menampilkan breaking news nya ya
Penjelasan
Jika terjadi error ketika kamu menerapkan kode di atas, coba gunakan Add widget kemudian salin dan gunakan kode <div class="rahRnTx"> --- </div> dan letakkan di dalam mode Add widget pada menu layout tersebut, semoga bermanfaat