Assalamualaikum Warahmatullah Wabarakatuh
Kali ini saya akan membahas mengenai cara membuat widget untuk artikel terbaru pada suatu blog, Widget artikel terbaru sangat penting untuk dipasang karena sangat berguna untuk pengunjung dalam melihat artikel atau postingan terbaru dari suatu blog atau website.
Widget untuk artikel terbaru ini bisa ditempatkan sesuai selera, dapat diubah model dan style sesuai selera tergantung dari keingina saudara.
Ok, langsung saja ya,,kita ke TKP...
- Login terlebih dahulu di Blogger,, Selanjutnya pilih "Tata Letak" Kemudian pada "sidebar" atau dimana tempat anda ingin menempatkan gadget tersebu, pilih "+Tambahkan Gadget"
- Pilih "HTML/JavaScript", klik tanda "+" atau klik tulisan "HTML/JavaScript" atau juga bisa dengan klik symbol/icon "</>"
- Silahkan masukkan script/kode berikut
<div style="background-color: white; border: 3px #4d81f2 Double; overflow: auto; padding: 10px; color: #6e747f; font-size: 120%; text-align: center;">
Artikel Terbaru<br />
</div>
<div style="background-color: white; border: 3px #4d81f2 Double; overflow: auto; padding: 10px;">
<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = false;var standardstyling = true;</script>
<script src="https://bahagia-dunia-dan-akhirat.blogspot.co.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 13px; color: #6e747f; float: right; margin-top: 10px;" href="https://bahagia-dunia-dan-akhirat.blogspot.co.id" >Awhy251</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #6e747f;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style></div>
- Untuk "Judul" dikosongkan saja, terakhir adalah simpan widget tersebut, sekarang coba anda lihat hasilnya dengan membuka blog saudara...kurang lebih seperti inilah tampilannya.
- Anda bisa mengganti atau memodifikasi script/kode diatas sesuai keinginan.
Perhatikan script/kode berikut :
<div style="background-color: white adalah kode untuk warna background pada border yang akan dibuat, disini kita bisa menggantinya dengan warna lain, border ini juga bisa digantin dengan gambar sesuai keinginan. caraya adalah ganti kode background-color: white dengan kode berikut
background: url("Masukkan Alamat dari gambar yang diinginkan disini")
kita coba menggunakan alamat gambar berikut, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWfRoONvCu5Lzew3LPzY0rnME0qN8H2vO6yK_3HjOapZSKgK-UAUrGu3CAUae5BnDNkmOZ9fua8fLar2IZuYd9G2E_HLxpDOfjjWGUbpgOTbe2HBQXpXso1Big2fYmuotC8GMQDgqZwI/s1600/foto.jpg" sehingga tampilannya adalah seperti ini.
Artikel Terbaru
border: 3px #4d81f2 Double adalah kode untuk border, dimana 3px adalah untuk ketebalan garis dari border, #4d81f2 adalah warna border, dan Double adalah jenis dari border. untuk jenis border saya sudah jelaskan pada artikel [TIPS BLOGGING] Cara Membuat Kotak Text Dalam Artikel/Postingan Suatu Blog.
overflow: auto; padding: 10px; color: #6e747f; font-size: 120%; text-align: center;"> adalah kode untuk untuk outo scroll saat artikel kepanjangan, jarak text dengan border, warna font, ukuran font, dan posisi text.
<script type="text/javascript">var numposts = 5;var showpostdate = false;var standardstyling = true;</script> adalah kode untuk jenis artikel yang akan ditampilkan, disini saya hanya tampilkan 5 artikel saja supaya tidk kepanjangan.
<script src="https://bahagia-dunia-dan-akhirat.blogspot.co.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 13px; color: #6e747f; float: right; margin-top: 10px;" href="https://bahagia-dunia-dan-akhirat.blogspot.co.id" >Awhy251</a> adalah kode sumber artikel yang akan diambil, silahkan ganti kode diatas dengan blog milik saudara, kemudian saya juga tambahkan kode tag untuk "Awhy251" yang terhubung/terlink dengan blog saya jika tag tersebut diklik.
#hlrpsb a {color: #6e747f;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;} adalah kode untuk jenis text pada widget artikel terbaru, kita bisa ganti jenis, warna dan semacamnya.
Bagaimana.?., semoga dengan penjelasan saya diatas bisa berguna buat teman-teman sekalian.
jika ada yang kurang jelas, silahkan bertanya..
Salam
Bagaimana.?., semoga dengan penjelasan saya diatas bisa berguna buat teman-teman sekalian.
jika ada yang kurang jelas, silahkan bertanya..
Salam
No comments:
Post a Comment