For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat breaking news di blogger

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

  1. Pergi Kepengaturan diblogger
  2. Kemudian periksa menu Feed (Jika kamu pengguna mobile, Scrol hingga bawah nanti juga ketemu
  3. 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'>&lt;div class=&quot;rahRnTx&quot;&gt;
&lt;script&gt;//&lt;![CDATA[
function RecentPostsScrollerv2(json){
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{sMoqueeHTMLStart = &quot;\&lt;marquee onmouseover=\&quot;this.stop();\&quot; onmouseout=\&quot;this.start();\&quot; &quot;;
if( nWidth){sMoqueeHTMLStart = sMoqueeHTMLStart + &quot; width = \&quot;&quot; + nWidth + &quot;%\&quot;&quot;;}else{sMoqueeHTMLStart = sMoqueeHTMLStart + &quot; width = \&quot;100%\&quot;&quot;;}if( nScrollDelay){sMoqueeHTMLStart = sMoqueeHTMLStart + &quot; scrolldelay = \&quot;&quot; + nScrollDelay + &quot;\&quot;&quot;;
}if(sDirection){sMoqueeHTMLStart = sMoqueeHTMLStart + &quot; direction = \&quot;&quot; + sDirection + &quot;\&quot;&quot;;
if(sDirection == &quot;left&quot; || sDirection ==&quot;right&quot;)
{//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = &quot;&amp;nbsp;&amp;nbsp;&quot;;}else{//For down and up directions seperate headlines by new line
sHeadlineTerminator = &quot;\&lt;br/\&gt;&quot;;}}if(sOpenLinkLocation ==&quot;N&quot;){sPostLinkLocation = &quot; target= \&quot;_blank\&quot; &quot;;}else{sPostLinkLocation = &quot; &quot;;}
sMoqueeHTMLEnd = &quot;\&lt;/MARQUEE\&gt;&quot;
sHeadLines = &quot;&quot;;for(var nFeedCounter = 0; nFeedCounter &lt; nMaxPosts; nFeedCounter++)
{objPost = json.feed.entry[nFeedCounter];for (var nCounter = 0; nCounter &lt; objPost.link.length; nCounter++){if (objPost.link[nCounter].rel == &#39;alternate&#39;){sPostURL = objPost.link[nCounter].href;
break;}}sHeadLines = sHeadLines + &quot;\&lt;b\&gt;&quot;+sBulletChar+&quot;\&lt;/b\&gt; \&lt;a &quot; + sPostLinkLocation + &quot; href=\&quot;&quot; + sPostURL + &quot;\&quot;&gt;&quot; + objPost.title.$t + &quot;\&lt;/a\&gt;&quot; + sHeadlineTerminator;
}document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )}catch(exception)
{alert(exception);}}//]]&gt;&lt;/script&gt;
&lt;script&gt; var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 185; var sDirection=&quot;left&quot;; var sOpenLinkLocation=&quot;Y&quot;; var sBulletChar=&quot;&quot;; &lt;/script&gt; &lt;script src=&quot;/feeds/posts/default?alt=json-in-script&amp;amp;callback=RecentPostsScrollerv2&quot;&gt;&lt;/script&gt;&lt;/div&gt;</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
 <!-- <b:if cond='data:title != &quot;&quot;'>
<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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.