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:


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

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:


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

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.

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


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

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

Cara Menerapkan Widget Ikon Sosial Media Di Sidebar Blog


Memasang widget ikon sosial media dalam suatu blog adalah salah satu cara yang efektif pada mempererat interaksi pengunjung blog bersama pemilik blog.

Dengan kamu menerapkan ikon sosial media ini juga, maka para pengunjung kamu mampu memahami setiap update artikel yg mungkin kamu bagikan melalui sosial media.

Ada beberapa jenis tema atau template blog yang telah secara default mempunyai fitur ikon sosial media ini, jadi anda hanya perlu mengisi link akun sosial media kamu saja.

Namun bagaimana beserta mereka yg memakai tema blog tanpa adanya widget ikon sosial media?

Tenang saja, karena dalam kesempatan kali ini saya akan menaruh sebuah cara mudah untuk memasang widget ikon sosial media di blog anda.

Untuk lebih jelasnya anda bisa melihat caranya dibawah ini:

1. Login terlebih dahulu ke blogger
2. Pada dashboard blogger silahkan pilih Tata Letak>Tambahkan Gadget>HTML/Javascript
3. Kemudian masukan kode berikut:
<style>.social-proles-widgetwidth:100%;height:auto;padding:0.social-proles-widgetul list-style: none;oat:RIGHT;padding: 0;.social-proles-widgetul lilist-style:none;margin:0;display:inline.social-prole.fa width:50px;height:45px;color:rgba(255,255,255,0.8);textalign:center;line-height:45px;font-size: 2em;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s easein-out;-ms-transition:all 0.5s ease-in-out;-o-transition: all 0.5s ease-inout;transition:all 0.5s ease-in-out;margin-right: 5px;.social-prole.fa-facebookbackground:#3b5998.social-prole.fa-twitterbackground:#55acee.social-prole.fa-youtubebackground:#cc181e.social-prole.fa-instagrambackground:#9c694c.social-prole.fa-google-plusbackground:#d34836.social-prole.fa:hover,.social-prole.fa:activecolor:#FFF;-webkit-box-shadow:1px1px 3px #333;-moz-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333</style><div class='social-proles-widget'> <ul class='social-prolecircle'> <li><a href='#'><i class='fa fa-facebook'/></i></a></li> <li><a href='#'><i class='fa fa-twitter'/></i></a></li> <li><a href='#'><i class='fa fa-youtube'/></i></a></li> <li><a href='#'><i class='fa fa-google-plus'/></i></a></li> <li><a href='#'><i class='fa fa-instagram'/></i></a></li> </ul></div>
4. Ganti semua kode "#" dengan link url akun sosial media anda
5. Simpan serta selesai

Jika cara diatas belum berhasil, maka anda harus memasukkan terlebih dahulu kode font awesome kedalam tema blog anda. Caranya merupakan sebagai berikut:


1. Masuk ke Tema>Edit HTML
2. Cari kode </head>
3. Lalu pastekan kode berikut di atas kode </head> tadi
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/fontawesome.min.css'rel='stylesheet'/>
4. Simpan Tema serta selesai.

Penutup

Nah itu cara memasang ikon sosial media di sidebar blog. Dengan adanya ikon ini, maka para pengunjung anda akan lebih mengenal siapa sih pemilik blog yg mereka kunjungi.

Oke saya rasa hanya itu saja yang dapat aku sampaikan, kurang lebihnya mohon maaf. Akhir kata aku ucapkan terimakasih dan sampai jumpa.