Home Search results for Cara Membuat Widget Blog

Cara Membuat Widget Breaking News Slider Sederhana Di Blog

  

Widget Breaking News adalah sebuah widget tambahan yg dipakai buat menampilkan berbagai postingan terbaru di pada blog.

Fungsinya memang mirip beserta widget Recent Post, yg membedakan merupakan tampilannya saja.

Sesuai bersama namanya widget breaking news ini memiliki tampilan layaknya kalimat-kalimat informasi yang sering kali kita jumpai di televisi.

Dengan memakai widget ini di blog kamu, tentunya akan mempermudah pengunjung pada menemukan setiap postingan terbaru didalam blog kamu.

Didalam pembahasan kali ini admin akan memberikan kamu sebuah cara buat menciptakan widget breaking news sederhana serta yang pasti tak akan memperberat loading blog anda.

Jika biasanya widget breaking news ditampilkan dengan catatan berjalan, maka hal ini cukup berbeda beserta widget breaking news yang akan saya bahas kali ini.

Yang membuat widget ini tidak sama adalah tampilannya yg berbentuk slider dengan disertai tumbnail.

Untuk lebih jelasnya, silahkan ikuti panduan membuat widget breaking news slider berikut:

1. Login ke blogger
2. Pilih Tema>Edit HTML
3. Masukan kode berikut, sebelum kode ]]></b:skin> atau </style>
/* CSS News Ticker */.ticker-wrapdisplay:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091.ticker-wrap>spandisplay:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif.ticker-wrap>span>acolor:#222;text-decoration:none#tickerheight:45px;overflow:hidden;background:#fefefe;text-align:justify#ticker ulpadding:0;margin:0;list-style:none#ticker ul liheight:45px;white-space:nowrap#ticker ul li imgfloat:left;width:35px;height:35px;margin:5px 7px 5px 5px#ticker ul li h3margin:0;font:700 16px 'roboto',sans-serif#ticker ul li h3 acolor:#333;text-decoration:none;line-height:25px!Important#ticker ul li .tickermetafont:400 13px 'roboto',sans-serif;line-height:20px!Important;color:#999

4. Tambahkan juga kode dibawah ini, sebelum </body>
<script type='text/javascript'>//<![CDATA[// Breaking News tickerfunction getauthor(t)for(var e=0;e<t.length;e++)var i=t[e].name.$t;return ifunction getmeta(t)var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return rfunction arlinadesignTicker(t)var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i)for(var n=0;n<i.length;n++)for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel)var l=r.link[s].href;breaktryvar o='<img src="'+r.media$thumbnail.url+'"/>'catch(t)var o=""var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"a+="</ul>",e.innerHTML=a$("#ticker").vticker()!Function(t)var e=speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1,i=moveUp:function(t,e)i.animate(t,e,"up"),moveDown:function(t,e)i.animate(t,e,"down"),animate:function(e,i,a)var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate)if(e.animating)return;e.animating=!0,l.animate("up"===a?Top:"-="+n+"px":top:0,r.speed,function()t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick"))else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l),nextUsePause:function()2>e.itemCountanimate:i.animate),startInterval:function()var e=t(this).data("state"),a=this;e.intervalId=setInterval(function()i.nextUsePause.call(a),e.options.pause),stopInterval:function()var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0),restartInterval:function()i.stopInterval.call(this),i.startInterval.call(this),a=init:function(n)a.stop.call(this);var r=jQuery.extend(,e);n=t.extend(r,n);var r=t(this),s=itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1;t(this).data("state",s),r.css(overflow:"hidden",position:"relative").children("ul").css(position:"absolute",margin:0,padding:0).children("li").css(margin:n.margin,padding:n.paddingvar e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())),r.children("ul").children("li").each(function()t(this).height(s.itemHeight)i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function()!0!==s.ispaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))).bind("mouseleave",function()(!0!==s.ispaused),pause:function(e)var i=t(this).data("state");if(i)if(2>i.itemCount)return!1;i.ispaused=e,i=i.element,e?(t(this).addclass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume")),next:function(e)var a=t(this).data("state");if(a)2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e),prev:function(e)var a=t(this).data("state");if(a)2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e),stop:function()t(this).data("state")&&i.stopInterval.call(this),remove:function()var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove());t.fn.vticker=function(e)return a[e]?A[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?Void t.error("Method "+e+" does not exist on jQuery.vticker"):a.init.apply(this,arguments)(jQuery),$(function()var t=document.createElement("script");t.src="https://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?Alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getelementsByTagName("body")[0].appendChild(t));//]]></script>

5. Masih di lokasi yg sama, tambahkan pula kode berikut, diantara kode <body> serta </body>
<div class='ticker-wrap' data-domain='tipsblogmfs.blogspot.com'><div id='ticker'></div></div>

catatan:
ubah kode yang telah diberi tanda, dengan URL blog anda6. Simpan Tema serta selesai

Baca Juga: Cara Cek Link Rusak (Broken Link) Pada Blog Beserta Tutorial Mengatasinya

Untuk melihat hasilnya, silahkan cek situs blog kamu. Jika tampilan breaking news slider telah timbul itu tandanya anda telah berhasil menerapkan cara-cara di atas beserta benar . Selebihnya, silahkan kembangkan sendiri ya.
Baca Juga

Oke saya rasa itu saja yang dapat saya sampikan, kurang lebihnya mohon maaf. Akhir kata saya ucapkan terimakasih serta sampai jumpa.

Cara Membuat Widget Berlangganan/Subscribe Mirip Jalan Tikus

  
Cara Membuat Widget Berlangganan/Subscribe Mirip Jalan Tikus

Anda tentunya sudah tidak asing lagi bukan beserta situs website yang dengan nama jalantikus? Yap, situs website download ini merupakan salah satu situs paling populer dan melegenda.

Tampilan situs yang sangat keren, konten yang menarik dan lengkap adalah salah satu faktor penyebab mengapa situs ini menjadi sangat terkenal diseluruh indonesia.

Tak hanya tampilan situsnya yang mempesona serta selalu menjadi buah bibir dikalangan warga , ternyata widget subscribe yang terdapat pun ikut menjadi sorotan banyak orang.

Widget subscribe atau yg biasa kita kenal beserta widget berlangganan merupakan sebuah widget yg dijalankan buat mempermudah para pengunjung pada mengikuti setiap update yang terdapat di jalantikus.

Dengan adanya widget ini, maka para pengunjung tidak akan ketinggalan buat melihat update terbaru di jalantikus.

Ada banyak alasan mengapa widget ini menjadi sorotan banyak kalangan, terutama para blogger. Salah satu karena adalah lantaran tampilannya yg minimalis, keren, dan terlihat profesional.

Nah karena banyaknya minat para blogger yg ingin pula memakai widget ini didalam blognya, maka pada kesempatan ini aku akan memberikan cara buat memasang widget berlangganan yang mirip mirip dengan milik jalantikus.com.

Untuk cara memasang widget ini sebetulnya cukup mudah, anda hanya perlu menambahkan sedikit script kode serta pula sedikit meng-edit sesuai blog kamu.

Baiklah agar kamu lebih memahami bagaimana cara pemasangan widget yg benar , silahkan ikuti caranya dibawah ini:

1. Pertama, login terlebih dahulu ke blogger
2. Kemudian masuk dalam Tema>Edit HTML
3. Lalu masukan kode berikut, di atas kode ]]></b:skin> atau </style>
.langganan.news-content min-width: 300px; width: 100%; padding: 20px; margin-top: 20px; margin-left: auto; margin-right: auto; background: #ce0a46; background: -webkit-linear-gradient(15deg,#ce0a46,#e98125); background: -o-linear-gradient(15deg,#ce0a46,#e98125); background: -webkit-linear-gradient(75deg,#ce0a46,#e98125); background: -o-linear-gradient(75deg,#ce0a46,#e98125); background: linear-gradient(15deg,#ce0a46,#e98125); border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; .news-content position: relative; .sidebar-content .news-content .news-title position: relative; display: inline-block; font-family: Museo,sans-serif; font-size: 22px; line-height: 32px; .langganan .news-title font-family: Museo,sans-serif; font-size: 20px; margin-bottom: 15px!Important; line-height: 15px; font-weight: 700; padding-left: 0; background-color: hsla(0,0%,100%,0); .sidebar-content .news-title margin-bottom: 20px; .color.white color: #fff; .langganan .news-detail font-family: Open Sans; font-size: 14px; line-height: 20px; .color.white color: #fff; .news-detail white-space: normal; .langganan .email-langganan position: relative; .langganan .email-langganan:before position: absolute; height: 16px; width: 16px; bottom: 12px; left: 12px; color: #d62e3d; font-size: 16px; .icon-mail:before content: "E012"; [class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before font-family: untitled-font-2!Important; font-style: normal!Important; font-weight: 400!Important; font-variant: normal!Important; text-transform: none!Important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; .langganan .email-langganan input width: 100%; height: 40px; font-family: Open Sans; font-size: 14px; margin-top: 20px; border: 0; border-radius: 4px; padding-left: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; a, button, input, label -webkit-tap-highlight-color: rgba(255,255,255,0); outline: 0; user agent stylesheet input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] padding: 1px 0px; user agent stylesheet input -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; cursor: text; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; user agent stylesheet input, textarea, select, button text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 13.3333px Arial; user agent stylesheet input, textarea, select, button, meter, progress -webkit-writing-mode: horizontal-tb !Important; .langganan .email-langganan position: relative; .langganan .submit height: 35px; width: 100%; margin-top: 20px; font-family: Museo,sans-serif; font-size: 14px; line-height: 35px; text-align: center; border: 0; border-radius: 4px; background-color: #3a2e28; outline: 0;.color.white color: #fff;.trs-2 -webkit-transition: .2s; -o-transition: .2s; transition: .2s;button, input[type=button], input[type=submit], label cursor: pointer; font-family: Open Sans;a, button, input, label -webkit-tap-highlight-color: rgba(255,255,255,0); outline: 0;; form display: block; margin-top: 0em; .langganan .email-langganan:before position: absolute; height: 16px; width: 16px; bottom: 12px; left: 12px; color: #d62e3d; font-size: 16px;.icon-mail:before content: "E012";[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before font-family: untitled-font-2!Important; font-style: normal!Important; font-weight: 400!Important; font-variant: normal!Important; text-transform: none!Important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

4. Setelah selesai silahkan klik dalam "Simpan Tema"
5. Kemudian kita beralih ke Tata Letak>Tambahkan Gadget>HTML/Javascript
6. Dan masukan kode dibawah ini
<div id="" class="langganan news-content "><form action="https://feedburner.google.com/fb/a/mailverify/Palingtop21" method="post" sasaran="popup"><div class="news-title color white">Langganan Artikel</div><div class="news-detail color white">Temukan Tips serta Berita menarik setiap harinya. GRATIS!</div><div class="email-langganan icon-mail"><input type="email" placeholder="Alamat Email..." required="" data-role="none"><input type="hidden" value="jalantikus/feed" name="uri"><input type="hidden" name="loc" value="en_US"></div><button type="submit" value="LANGGANAN" class="submit color white trs-2" data-role="none">LANGGANAN</button></form></div>

Catatan:
Ubah kode yang sudah aku beri pertanda, bersama FeedBurner anda
7. Terakhir, klik "Simpan" lalu cek blog kamu buat melihat hasilnya

Baca Juga: Cara Membuat Widget Breaking News Slider Sederhana Di Blog

Bagaimana sobat-sobat, gampang bukan cara memasang widget subscribe seperti jalantikus ini? Sekarang para pengunjung anda bisa mengikuti update terbaru pula dari blog kamu.
Baca Juga

Baiklah aku rasa hanya itu yang dapat admin sampaikan, terimakasih dan sampai jumpa di postingan berikutnya.

4 Langkah Gampang Membuat Blog Di Blogger.com Gratis Untuk Pemula

  
4 Langkah Mudah Membuat Blog Di Blogger.com Gratis Untuk Pemula

Blog adalah salah satu media digital yg bisa mengkategorikan sebagai satu dari jenis media sosial, dimana antara Author (penulis) serta pembaca mampu saling berhubungan pada lingkup kolom komentar.

Hal ini hampir sama seperti sosial media dalam umumnya (Facebook, Twitter), dimana kita mampu membuat postingan serta kemudian berkomentar dalam postingan itu sendiri.

Yang membedakan antara blog beserta sosial media pada umumnya adalah terletak pada sang penghasil postingan itu.

Dimana dalam blog, kita sebagai orang biasa tak mampu membuat postingan secara asal-asalan di suatu blog, tapi kita hanya sanggup melakukan hubungan bersama postingan dalam blog tersebut melalui komentar (itu pun apabila ada), karena ada pula beberapa blog yang tidak menyediakan fasilitas komentar di blognya.

Nah, sebelum kita masuk dalam inti pembahasan tentang cara membuat blog, alangkah baiknya kita mengenal terlebih dahulu pengertian dasar dari kata blog itu sendiri.

Dikutip melalui Wikipedia, blog berasal dari ungkap Web Log yg berarti deretan aneka macam berita yg dipublikasikan melalui WWW (World Wide Web), dimana WWW ini merupakan sistem khusus yang dibentuk buat menghubungkan suatu jenis teks ke teks lainnya.

Jadi dapat disimpulkan bahwa blog adalah sekumpulan berita berupa teks yang saling terhubung beserta berita teks lainnya, dimana informasi-berita ini bisa diakses melalui kanal jaringan internet.

Blog dalam dasarnya dimanfaatkan oleh para penulis untuk mempublikasikan berita-berita pribadi yg dialami oleh sang penulis, atau sanggup dikatakan bahwa blog adalah bentuk lain dari buku diary (buku harian).

Namun seiring berkembangnya jaman, kini blog pula dimanfaatkan untuk aneka macam keperluan, mirip dengan media promosi, marketing, branding, portal informasi, situs informasi, serta lain sebagainya.

Perubahan kegunaan dari dalam blog itu sendiri ditentukan oleh banyak hal, satu hal yang paling mempengaruhi perkembangan dunia blog adalah karena adanya kemajuan di dunia maya (internet).
Selain itu pula ada faktor lain yg mempengaruhi perkembangan dunia blog, yaitu adanya
pengembangan teknologi advertisement (iklan) di pada lingkup dunia internet.

Sebut saja, Google Adsense, dimana dengan hadirnya terobosan jasa periklanan ini membuat kelompok blogger diseluruh dunia menjadi berkembang drastis.

Google Adsense merupakan situs jasa periklanan terpercaya yg dinaungi langsung oleh Google.inc.

Situs ini berani membayar para blogger yg mau bekerjasama buat menayangkan iklan di situs blognya, beserta beberapa syarat yang pastinya tak mampu dipercaya gampang.

Nah buat kasus Google Adsense akan kita bahas pada kesempatan lain kali saja ya, sebab jika kita membahasnya dalam postingan ini, dikhawatirkan akan melebihi inti pembahasan utama, yaitu cara menciptakan blog.

Nah, baiklah buat kalian yg ingin menciptakan blog akan tetapi belum paham cara-caranya mampu langsung mengikuti langkah-langkah menciptakan blog ini dia:

Sebelum anda betul-benar masuk pada inti pembahasan, silahkan pastikan bahwa anda sudah memiliki akun Google.

Jika anda sudah memiliki akun Google tadi, silahkan login di situs Blogger.com lalu klik dalam sajian "Masuk" (dipojok kanan atas).

4 Langkah Mudah Membuat Blog Di Blogger.com Gratis Untuk Pemula


Isi form yg ada dengan email kamu, klik "Berikutnya" lalu masukkan juga password emailnya. Apabila sudah, klik "Berikutnya".

4 Langkah Mudah Membuat Blog Di Blogger.com Gratis Untuk Pemula


Jika anda baru pertama kali membuat blog di situs Blogger.com, maka anda akan diminta untuk memilih menggunakan profil Blogger biasa atau profil Google+.

Disini, saya sarankan buat memilih memakai profil Blogger saja!

4 Langkah Mudah Membuat Blog Di Blogger.com Gratis Untuk Pemula


Jika telah, klik dalam "Lanjutkan Ke Blogger" buat memulai membuat blog. Langkah-langkahnya mampu kamu lihat dibawah ini:

4 Langkah Mudah Membuat Blog Di Blogger.com Gratis Untuk Pemula


1. Klik dalam "Buat Blog Baru".

4 Langkah Mudah Membuat Blog Di Blogger.com Gratis Untuk Pemula


2. Silahkan isi kolom registrasi yg tersedia (Judul, Alamat, dan Tema).

Judul:

Silahkan isi kolom judul bersama judul blog kamu. Misalnya anda akan membuat blog yang mengulas seputar resep masakan. Maka judul blog yg sesuai merupakan "Resep Makanan".

 Alamat:

Pada kolom Alamat, silahkan isi bersama nama URL/Link blog yg kamu inginkan. Misalnya "resep-makan21.blogspot.com".

Perlu diperhatikan pada penulisan Alamat blog, tidak diperkenankan memakai huruf balok/kapital.

Tema:

Akan tersedia beberapa macam tampilan tema blog yang sudah disediakan, silahkan pilih tema yg sekiranya cocok buat blog kamu.

3. apabila seluruh kolom telah terisi dengan benar , selanjutnya klik pada "Buat Blog".
4. Selesai, kini anda sudah berhasil memiliki blog baru.

Sampai pada tahap ini kamu telah berhasil membuat blog baru yg belum memiliki postingan apapun, hanya tersedia nama blog, alamat blog (URL/Link) dan tema blog saja.

Selanjutnya, anda wajib bisa beradaptasi beserta sajian-sajian yg tersedia di laman dashboard blogger ini, antara lain:

Postingan:

Adalah sajian utama yg dijalankan buat menciptakan postingan atau artikel didalam blog.

Statistik:

Merupakan sajian khusus yang memunculkan perkembangan situs blog anda, mulai dari jumlah pengunjung, postingan yang seringkali dikunjungi, daerah/regional pengunjung, dan web browser yang dijalankan oleh pengunjung.

Komentar:

Melalui menu komentar ini anda bisa melihat tanggapan dari para pengunjung kamu mengenai postingan artikel kamu. Melalui sajian ini juga anda sanggup mengatur komentar blog anda.

Penghasilan:

Menu ini hanya diperuntukkan buat mereka yang sudah bermitra (bekerjasama) dengan jasa periklanan Google Adsense. Buat blogger pemula (baru) silahkan biarkan saja hidangan ini.

Halaman:

Disini anda sanggup menciptakan laman-laman baru yg nantinya sanggup menjadi pelengkap suatu blog. Menu ini biasanya dimanfaatkan buat menciptakan laman berupa "About, TOS, Disclaimer, Sitemap".

Tata Letak:

Menu ini akan menampilkan kerangka situs blog kamu, mulai dari Header sampai Footer. Melalui menu ini juga kamu bisa mengatur warna, ukuran, dan posisi widget blog sesuai keinginan kamu.

Tema:

Pada menu Tema, kamu sanggup mengatur tampilan situs blog kamu bersama lebih leluasa, syarat utama buat mampu mengganti bagian-bagian tema secara lebih detail merupakan dengan mempunyai pemahaman dasar bahasa pemrograman HTML.

Setelan:

Menu terakhir yang dapat anda gunakan merupakan hidangan Setelah. Disini kamu bisa mengubah setelan atau pengaturan dari blog anda, seperti pengaturan jumlah postingan yang tampil di laman utama, pengaturan bahasa, pengaturan penelusuran, pengaturan komentar, serta lain sebagainya.

Baca Juga

Penutup

Demikianlah langkah-langkah mudah membuat situs blog menggunakan platform Blogger.com.

Membuat blog mampu dilakukan bersama sangat mudah oleh siapapun, namun mengelola blog sebaliknya, tak mampu dilakukan dengan mudah dan juga tidak bisa dilakukan oleh sembarang orang.

Kunci dari mengelola suatu blog agar terus berkembang adalah kerja keras, pantang menyerah dan yang paling penting merupakan konsisten.

Nah mungkin itu saja yang dapat saya sampaikan pada pembahasan cara membuat blog melalui situs Blogger.com. Semoga pembahasan kali ini dapat memberikan manfaat untuk anda ya.

Karena pembahasan kali ini hanya membahas langkah pembuatan blog saja, maka pada kesempatan yg akan datang aku akan mengulas panduan-panduan lainnya seputar rapikan cara pengaturan serta pengelolaan blog.

Baca Juga: Cara Download File (PDF, DOCX, PPT) Di Situs Scribd Tanpa Perlu Login/Daftar (GRATIS)

Saya rasa cukup sekian yg dapat aku sampaikan, akhir ungkap aku ucapkan terimakasih dan hingga jumpa di postingan menarik lainnya.

Cara Memasang Widget Recent Post Slider Di Sidebar Blog

  

Jika sering kali widget recent post hanya berbentuk link beserta beberapa gambar tumbnail yg menuju ke postingan terbaru, namun pada kesempatan kali ini admin akan mencoba menunjukkan sebuah cara buat menciptakan wigdet recent post slider.

Widget yang akan saya bagikan ini tidak sama dengan kebanyakan recent post yg ada. Widget ini berbentuk sebuah kotak dengan beberapa tumbnail postingan terbaru yang sanggup digeser atau di slide baik secara otomatis maupun manual.

Widget recent post slider ini sebetulnya bukanlah hal baru, mungkin anda pernah melihat widget ini di beberapa situs di internet, namun kamu tidak tahu apa nama widget tersebut, serta bagaimana cara mengolahnya?

Tapi tenang, lantaran dalam saat ini admin akan menunjukkan kepada anda cara menciptakan widget recent post slider tersebut. Penasaran bagaimana caranya? Silahkan ikuti panduannya dibawah ini:

Baca Juga: Cara Membuat Tombol Back To Top Pure Javascript Di Blogger

1. Login ke blogger
2. Masuk ke Tata Letak>Tambahkan Gadget>HTML/Javascript
3. Copy kode berikut, serta paste di halaman tadi
<style scoped="" type="text/css">ul.rcentside *-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box ul.rcentsidefont-size:11pxul.rcentside,ul.rcentside limargin:0;padding:0;list-style:none;position:relative ul.rcentsidewidth:100%;height:500px ul.rcentside liheight:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4)display:block ul.rcentside imgborder:0;width:100%;height:autoul.rcentside li:nth-child(1)width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 ul.rcentside li:nth-child(2)left:0;top:50% ul.rcentside li:nth-child(3)left:50.5%;top:50% ul.rcentside li:nth-child(4)width:100%;left:0;top:75% ul.rcentside .overlayx,ul.rcentside litransition:all .4s ease-in-out ul.rcentside .overlayxwidth:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiP9ULZTPK39Whzjme5Sa29Agv7sM6xsD6qPsC5Wy8JD6w4wYQ_IKMgm-P68lqxBWix-uDuA-num_I2Liypd7tFkwZNNzAJ81ybBf3VkmtlSPBAmEPc4_glblcc77xTW5MQR2QtwyXy1Y/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x ul.rcentside .overlayx,ul.rcentside imgmargin:3pxul.rcentside li:nth-child(1).overlayxbackground-position:50% 25% ul.rcentside .overlayx:hoveropacity:.1 ul.rcentside h4position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3sul.rcentside li:hover h4bottom:30pxul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4font-size:150% ul.rcentside .label_textposition:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3sul.rcentside li:hover .label_textbottom:20px;opacity:1ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autnamedisplay:none .buttonsmargin:5px 0 0 .buttons adisplay:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative .buttons a::beforecontent:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% .buttons a.nextx::beforeborder-color:transparent transparent transparent #535353;margin-left:-3px </style><div id="featuredpostside"></div><script type='text/javascript'>function FeaturedPostSide(a)(function(e)var h=blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false;h=e.extend(,h,a);var g=e(h.idcontaint);var d=h.maxpost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w)var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++)for(var n=0;n<s[o].link.length;n++)if(s[o].link[n].rel=="alternate")q=s[o].link[n].href;breakif("media$thumbnail" in s[o])u=s[o].media$thumbnail.url.replace(//s[0-9]+-c/g,"/s"+h.imageSize+"-c")elseu=h.pblank.replace(//s[0-9]+(-ck=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.monthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"e("ul",g).append(l).addclass(h.loadingClass);var c=function()e(h.idcontaint+" .nextx").click();var b=function()e.get((h.blogURL===""?Window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagname===false?"":"/-/"+h.tagname)+"?Max-results="+h.maxpost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function()e(h.idcontaint+" .prevx").click(function()e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false);e(h.idcontaint+" .nextx").click(function()e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false);if(h.autoplay)var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function()clearInterval(j),function()j=setInterval(c,i))e("ul",g).removeClass(h.loadingClass),d);e(document).ready(b))(jQuery);//<![CDATA[FeaturedPostSide( blogURL: "https://tipsblogmfs.blogspot.com", MaxPost: 8, idcontaint: "#featuredpostside", ImageSize: 300, interval: 5000, autoplay: true, tagName: false);//]]></script>

Keterangan:
  • blogURL: ganti dengan URL blog anda
  • MaxPost: Jumlah postingan
  • ImageSize: kapasitas gambar
  • interval: waktu yang dibutuhkan dikala post slider berpindah
  • autoplay: true : mengaktifkan auto slider, buat merubahnya ubah menjadi "autoplay:false"
  • tagName: false : mematikan nama label, untuk menambahkan artikel terbaru berdasarkan label, ubah false menjadi nama label yang diinginkan. Misal: blogger
4. Simpan widget, serta lihat hasilnya pada blog anda
Baca Juga

Nah itu beliau cara memasang widget recent post berbentuk slider. Dengan adanya widget ini maka para pengunjung akan lebih tertarik buat mengunjungi postingan terbaru kamu.

Cara Memasang Banner Kotak Iklan Di Blog

  

Saat ini blog sudah bukan lagi hanya dijadikan sebagai sebuah media menyebarkan informasi, melainkan sebagai sebuah media promosi dan pembuat uang.

Jika kamu merupakan seseorang blogger profesional yang punya banyak pengunjung, maka buat mendapatkan penghasilan dari blog bukanlah hal yg mustahil.

Saat ini berbagai para blogger yg mengakibatkan blog pribadinya sebagai sarana buat menerima penghasilan tambahan, salah satu caranya merupakan melalui iklan.

Jika kamu merupakan blogger yang punya blog bersama traffic yang besar, maka anda sanggup memanfaatkan jasa periklanan seperti Google Adsense buat menerima penghasilan tambahan.

Tapi yg menjadi konflik adalah bagaimana cara agar blog anda mampu diterima menjadi publisher di Google Adsense?

karena kita tahu bahwa sekarang traffic blog yg banyak tak bisa dijadikan tolak ukur kalau blog anda sanggup mengikuti program periklanan Google Adsense.

Maka dari itu bagi anda yg punya blog beserta traffic melimpah, jangan berkecil hati dulu, sebab anda masih mampu mendapatkan penghasilan dengan membuka jasa periklanan sendiri.

Caranya adalah bersama menyediakan space slot iklan di blog anda, serta promosikan blog kamu bahwa kamu sudah menyediakan space iklan kosong yg bisa disewa dengan harga tertentu.

Bagaimana cara mengolahnya?

Oke, lantaran dalam kesempatan ini saya akan menunjukkan anda sebuah cara mudah buat menciptakan banner kotak iklan di blog, maka bagi anda yang ingin tahu bagaimana caranya, silahkan ikuti saja panduan dibawah ini:

Baca Juga: Cara Mengurutkan Komentar Blogger Dari Yang Terbaru

1. Masuk ke blogger
2. Pilih Tema>Edit HTML
3. Letakkan kode berikut, sebelum ]]></b:skin> atau </style>
/* Kotak Iklan */.kotak_iklan text-align: center;.kotak_iklan img margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;.kotak_iklan img:hover border:1px solid #aaa.kotak_iklan img.noborder border:0;

4. Simpan Tema
5. Kemudian kita beralih ke Tata Letak>Tambahkan Gadget>HTML/Javascript
6. Lalu masukkan kode berikut dalam widget tadi
<div class="kotak_iklan"><a href="url iklan yg dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a><a href="url iklan yg dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a><a href="url iklan yg dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a> <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a> </div>

Catatan:
Ubah/ganti seluruh kode yg telah diberi tanda, sesuai dengan deskripsi anda7. Simpan, lalu cek blog anda buat mengetahui hasilnya
Baca Juga

Itu dia cara mudah menciptakan banner kotak iklan di blog. Setelah kamu berhasil membuat kotak iklan ini, maka saatnya anda mempromosikan blog kamu kepada orang lain, agar nantinya terdapat yang berminat buat memasang iklannya di blog anda.