Cara Membuat/ Memasang Table of Contents di Postingan Blog

Blogging

Cara Membuat/ Memasang Table of Contents di Postingan Blog

4 September 2022

Jika diperhatikan, ada beberapa website atau blog yang memasang semacam daftar isi di sebagian artikel-artikelnya. Keberadaan daftar isi di dalam postingan atau yang juga biasa disebut table of contents (TOC) ini memang adakalanya penting sehingga jamak kita jumpai. Beberapa situs web/ blog ternama juga ada yang memasang fitur table of content ini untuk lebih memudahkan para pembacanya. 

Table of Contents (TOC) 

Table Of Content (TOC) atau Daftar Isi adalah sebuah fitur di dalam postingan yang berisi sub judul pembahasan. Bisa juga dikatakan bahwa table of content merupakan daftar rincian dari sebuah artikel di dalam blog. Daftar isi atau table of contents ini akan menampilkan link-link sub judul atau rincian dari isi artikel tersebut sehingga pengunjung dapat langsung menemukan point-point penting yang dicari. 

Fitur table of Content biasanya dipasang pada artikel-artikel yang memiliki pembahasan lumayan panjang. Biasanya fitur ini diletakkan di atas sub judul pertama agar lebih mudah terlihat oleh para pembaca. Tanpa harus membaca semua isi artikel panjang tersebut, pengunjung akan lebih mudah dalam menemukan pembahasan yang ia cari. 

Manfaat Memasang Table of Contents

Seperti telah disinggung di atas, fitur daftar isi atau table of content ini berfungsi untuk memudahkan pengunjung dalam membaca artikel, terutama pada artikel-artikel panjang. Adakalanya pengunjung juga tidak punya banyak waktu sehingga ia tidak perlu membaca keseluruhan isi artikel. Tinggal mengklik pada sub judulnya, pengunjung akan langsung diarahkan menuju point pembahasan yang diinginkan. 

Tidak hanya itu saja, fitur ini juga mendukung SEO blog sehingga lebih ramah di mesin pencari. Konten yang lebih terstruktur juga memang lebih disukai oleh Google. Pada hasil pencarian, sub-sub judul dalam artikel biasanya akan terindex dan muncul di bagian bawah deskripsi penelusuran. Inilah salah satu fungsi dari keberadaan link-link sub judul pada fitur table of content tadi. Tentunya ini juga akan lebih menarik dan memiliki nilai lebih di mata para pembaca. 

Contoh sub judul terindex di hasil pencarian

Nah, bagi anda yang ingin memasangnya di blog anda, tutorial pembuatan Table of Content (TOC) sederhana di bawah ini mungkin bisa anda terapkan di blog anda. 

Cara Memasang Table of Content (TOC) di Blog

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik pada edit html. 

3. Cari kode ]]</b:skin> atau </style> dan letakkan kode berikut ini di atasnya. 

/* TOC */

.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:13px;padding:11px;margin:8px 0 30px 0;border:1px solid;border-color:#B1B1B1;border-radius:5px}

.table-of-contents li{margin:0 0 0.25em 0}

.table-of-contents ul li{margin:6px;padding-bottom:4px;border-bottom:1px solid #e4e4e4} 

.table-of-contents a{color:#003ecc;line-height:24px} 

.table-of-contents h4{font-size:18px;margin:0;cursor:pointer}

.table-of-contents h4:before{font-family:FontAwesome;content:&quot;\f00b&quot;;padding-right:10px}

@media screen and (max-width:600px){.table-of-contents{font-size:15px} .table-of-contents h4{font-size:20px}}

Keterangan: pastikan link kode font awesome telah terpasang di template blog anda. Jika belum ada, letakkan kode berikut ini di atas kode </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/>

4. Selanjutnya cari kode </body> dan letakkan kode berikut ini di atasnya. 

<script async='async' defer='defer'>

var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Daftar Isi</h4><ul style='display:none'>&quot;;$(&quot;article h2, article h3, article h4, article h5&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;article h2, article h3, article h4, article h5&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}

</script>

5. Simpan tema. 

Memasang Pada Postingan (Artikel) 

Setelah memasukkan kode ke dalam edit html, selanjutnya kita tinggal memasangnya pada artikel yang hendak diberi fitur table of contents. Idealnya fitur ini dipasang pada artikel-artikel yang super panjang. 

1. Buka postingan yang dikehendaki. 

2. Buka pada mode html (bukan compose) dan letakkan kode berikut ini di atas sub judul pertama. 

<div class="toc-pro"></div>

Pastikan setiap sub judul di artikel tersebut telah diatur menggunakan heading tags H2, H3, dst.

3. Simpan kembali postingan. 

Silahkan lihat hasilnya. Kini anda sudah bisa menjumpai fitur table of contents atau daftar isi pada artikel blog anda.

Penutup

Demikianlah pembahasan dan tutorial ngeblog kali ini mengenai Cara Memasang Fitur Table of Contents atau Daftar Isi di dalam Postingan Blog. Besar harapan saya semoga artikel ini dapat bermanfaat bagi para pembaca sekalian. Terima kasih.

Selengkapnya

Cara Membuat Widget Popular Posts Simpel Keren Sederhana

Blogging

Cara Membuat Widget Popular Posts Simpel Keren Sederhana

26 Februari 2022

Entah kenapa saya rasa semakin kesini semakin berkurang semangat untuk ngeblog. Meski begitu, saya paksakan untuk bertahan semampunya karena saya yakin aktivitas ngeblog ini akan ada manfaatnya, baik untuk diri saya pribadi dan semoga juga bermanfaat bagi para pembaca blog ini. Kali ini, saya akan berbagi cara untuk membuat widget Popular Posts atau Artikel Populer dengan tampilan simpel tapi lumayan keren. 

Tak perlu berulang kali saya jelaskan, semua pasti sudah tahu bahwa widget popular post ini intinya berfungsi untuk menampilkan beberapa postingan yang populer dibaca oleh pengunjung. Widget popular post yang hendak saya bagikan kali ini memang tanpa gambar (thumbnail), tapi tampilannya cukup keren. Bisa dikatakan tampilannya hampir mirip dengan tampilan jenis iklan tautan (link) disertai penunjuk tanda panah di sampingnya. 

Sebetulnya widget ini sudah tersedia di blogger, kita hanya tinggal menambahkannya lewat menu tataletak. Di sini kita hanya akan memodifikasinya saja agar tampilannya seperti screenshot gambar di atas. Langsung saja, berikut ini cara memasang dan memodifikasi tampilan widget popular post simpel keren di blog. 

Memasang Widget Popular Post di Blogger

1. Buka akun blogger anda. 

2. Pilih menu tataletak (layout) dan klik tambahkan gadget. 

3. Pilih widget Entri Populer atau Popular Post, kemudian silahkan atur seperti berikut ini:

• Title: silahkan anda isikan dengan Artikel Populer, Popular Post, atau semacamnya. 
• Most Viewed: silahkan pilih sesuai jangka waktu yang anda inginkan.
• Show: kedua kotak dikosongkan saja, untuk display pilih sesuai jumlah judul artikel yang anda kehendaki. 

4. Silahkan simpan. 

Modifikasi Tampilan Widget Popular Post

1. Pada dashboard blogger, pilih menu tema dan klik edit html. 

2. Pastikan kode font awesome terpasang di template blog anda. Jika belum, letakkan kode berikut ini di atas kode </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/>

3. Selanjutnya cari kode ]]></b:skin> atau kode </style> dan letakkan kode berikut ini di atasnya.

/* Popular Posts Simpel */

.PopularPosts .item-title{font-weight:500;font-size:15px;padding-bottom:0.5em}

.PopularPosts .widget-content{font-family:&#39;Open Sans&#39;;font-size:14px;padding:0;border-radius:5px}.PopularPosts .widget-content ul li{padding:0;background:none}.PopularPosts .item-title a{color:#333}.PopularPosts .item-title a:hover{color:#E2E7F5}.PopularPosts .item-snippet{height:40px;overflow:hidden;color:#555;line-height:1.4}#PopularPosts1{display:block;position:relative;overflow:hidden;font-size:15px}#PopularPosts1 ul{margin:0;padding:0;list-style-type:none}#PopularPosts1 ul li{background:#E2E7F5;position:relative;padding:0;color:#fff;border-bottom:1px solid rgba(0,0,0,0.08);border-top:1px solid rgba(255,255,255,0.12)}#PopularPosts1 ul li:after{content:&#39;\f105&#39;;font-family:fontawesome;position:absolute;top:14px;right:15px;line-height:1em;text-align:center;color:#000;font-size:27px;font-weight:bold;transition:all.3s}#PopularPosts1 ul li:first-child{border-top:0}#PopularPosts1 ul li:last-child{border-bottom:0}#PopularPosts1 ul li:hover:after{color:#fff}#PopularPosts1 ul li a{background:#E2E7F5;color:#000;display:inline-block;padding:14px 50px 14px 15px;width:100%}#PopularPosts1 ul li a:hover{background:#051F41;color:#fff}

4. Simpan template. 

Silahkan lihat hasilnya. Anda juga bisa ubah warna background, font, dsb dengan mengedit pengaturan CSS di atas. Demikianlah tutorial ngeblog dari Santos Blog untuk kali ini. Semoga bermanfaat.

Selengkapnya

Cara Membuat Widget Related Post Keren Dengan Gambar (Thumbnail)

Blogging

Cara Membuat Widget Related Post Keren Dengan Gambar (Thumbnail)

11 Februari 2022

Diantara sekian jenis widget di blog, widget related posts cukup efektif dalam mengantisipasi agar pengunjung tidak langsung keluar setelah membaca sebuah artikel dari halaman blog kita. Keterkaitan beberapa artikel yang ditampilkan oleh widget ini memang akan semakin membuat rasa penasaran pembaca untuk menggali lebih dalam apa saja konten yang ditawarkan oleh blog kita.

Widget yang biasanya diletakkan di bagian bawah postingan ini memang lebih menarik jika disertai dengan gambar (thumbnail) sehingga akan langsung terlihat oleh pembaca blog kita. Namun sayangnya, perubahan update blogger terkait format gambar postingan membuat tampilan gambar di beberapa widget bergambar menjadi bermasalah, termasuk widget related post ini. Gambar menjadi blur atau bahkan tidak muncul.

Pada artikel kali ini, kita akan belajar mengenai tutorial cara membuat widget related post bergambar dengan style grid keren dan responsive. Tampilan gambarnya juga jelas alias tidak blur jika anda memahami ulasan yang akan saya jelaskan di bawah ini. Langsung saja simak cara pemasangannya berikut ini.

Cara Memasang Widget Related Posts Grid Keren Bergambar

1. Buka akun blogger anda.

2. Klik menu thema dan edit html.

3. Cari kode </head> dan letakkan kode berikut ini di atasnya.

<style>

/* Related Posts Santos Blog*/ #related-post {display:block; margin:20px 0px; line-height:1.5em;}

#related-post h4{ font-size:17px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #related-post h4 span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #related-post h4:before{ content: &#39;&#39;; display: block; position: relative; top:15px; width: 100%; border-top: 2px solid #068488; }

#related-summary .news-text {display:none;}

ul#related-summary{margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;}

ul#related-summary li{list-style:none; width:calc((100% / 3) - 15px); text-align:left; margin-right:20px; margin-bottom:20px; padding:0px; -webkit-margin-start:0px !important;}

ul#related-summary li img{ overflow:hidden; line-height:0px; border-radius:4px; } 

ul#related-summary li:nth-of-type(3n){ margin-right:0px; } ul#related-summary li a{ display:block; }

ul#related-summary li img{width:100%; height:117px; transition:all .3s ease; border:0px; margin:0px;}

ul#related-summary li:hover img {transform:scale(1.1); filter: brightness(75%); -webkit-filter: brightness(75%);}

ul#related-summary li a.relinkjdulx{background-image:none;color:#000;display:block;font-size:13px;font-weight:600;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none;margin-top:7px}

ul#related-summary li a.relinkjdulx:hover{color:#066;}

@media only screen and (max-width:480px){

ul#related-summary li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; }

ul#related-summary li a img{ height:85px;} 

ul#related-summary li:nth-of-type(3n){ margin-right:15px; } ul#related-summary li:nth-of-type(2n){ margin-right:0px; }} 

</style>

<script type='text/javascript'>

//<![CDATA[

//Related Post

var relnojudul = 0;

var relmaxtampil = 6;

var numchars = 120;

var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};

//]]>

</script>

4. Jika ingin menampilkannya di bawah postingan, cari kode <data:post.body/> kemudian pastekan kode berikut ini di bawahnya.

<!-- Related Posts Santos Blog-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-post'>

<div class='relhead'>

  <h4><span>Related Posts</span></h4>

<div class='clear'/>

          <b:loop values='data:post.labels' var='label'>

               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>

          </b:loop>

          <ul id='related-summary'>

               <script type='text/javascript'>artikelterkait();</script>

          </ul>

     </div>

</div>

<div class='clear'/>

</b:if>

<!-- Related Posts End-->

5. Simpan template. 

Mengatasi Gambar Blur (Buram) di Widget

Agar gambar (thumbnail) di widget related postsnya tidak blur, copy javascript berikut ini dan letakkan di atas kode </body>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {$('ul#related-summary li img').attr('src', function(i, src)

{return src.replace( 's72-c', 's640' );});});

//]]>

</script>

Kode di atas juga bisa untuk mengatasi gambar blur di widget-widget lain yang menyertakan gambar seperti widget recent post, random post, dll. 

Caranya yaitu dengan menambahkan kode pengaturan CSS img untuk widget tsb pada kode di atas. Contohnya seperti berikut ini:

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {$('ul#related-summary li img, #recent-posts img').attr('src', function(i, src)

{return src.replace( 's72-c', 's640' );});});

//]]>

</script>

Keterangan: 

• yang ditandai warna merah adalah contoh pengaturan CSS img untuk widget recent posts.
• Sesuaikan dengan penulisan kode CSS img widget di blog anda. 

Jika gambar masih blur, berarti anda belum membaca artikel saya yang ini (Cara Mengatasi Gambar Tidak Muncul di Beberapa Widget Blog). Silahkan buka menu postingan, buka artikel pada mode html (bukan compose). 

Selanjutnya cari kode img src untuk gambar di postingan tersebut. Contohnya seperti di bawah ini:

<img src="https://1.bp.blogspot.com/-l0HR8uvfOZ4/XyK8JGL7Y9A/AAAAAAAAI0c/k0uYo-PkgGIZowsFKugwJuGj8iku2wPTwJGcKAAsWQQ/w640-h360/gambar.jpg"/>

Kalau sudah ketemu, ganti menjadi seperti berikut ini:

<img src="https://1.bp.blogspot.com/-l0HR8uvfOZ4/XyK8JGL7Y9A/AAAAAAAAI0c/k0uYo-PkgGIZowsFKugwJuGj8iku2wPTwJGcKAAsWQQ/s640/gambar.jpg"/>

Yang diganti hanya format gambarnya saja, yaitu:

w640-h360 (w...-h... ) 

Cukup diubah menjadi:

s640 (s... ) 

Untuk perubahan format gambar postingan terbaru yang kini mulai menggunakan kode blogger.googleusercontent.com, contoh cara penerapannya adalah seperti berikut ini:

src="https://blogger.googleusercontent.com/img/a/AVvXsEjzvCkgSNGU7lxl5Bd7wBtVQZidg4na2XVJSmgjvkgBiYlxwmd0epj9P-6cUtb2uJVRxq8qPgNsmJ_Oa4eky0kTZFx_o0Ae4BKGBkEbQvkOC40gv-LPD_l_vRpQkYfQEDqkB0RffuKJjpjhMv4rlLIy3BeRcJY7zXkYxGUxxWmaIiHByQiD2RjL_1cT=w640-h454"

Ganti menjadi seperti berikut ini:

src="https://blogger.googleusercontent.com/img/a/AVvXsEjzvCkgSNGU7lxl5Bd7wBtVQZidg4na2XVJSmgjvkgBiYlxwmd0epj9P-6cUtb2uJVRxq8qPgNsmJ_Oa4eky0kTZFx_o0Ae4BKGBkEbQvkOC40gv-LPD_l_vRpQkYfQEDqkB0RffuKJjpjhMv4rlLIy3BeRcJY7zXkYxGUxxWmaIiHByQiD2RjL_1cT=s640"

Hampir sama seperti sebelumnya. Kode width (w) dan height (h) cukup diganti dengan s.... agar widget dapat mengindeks gambar postingan tersebut dengan baik. Semoga bermanfaat.

Selengkapnya

Cara Memasang Widget Komentar Terbaru (Recent Comment) di Blog

Blogging

Cara Memasang Widget Komentar Terbaru (Recent Comment) di Blog

24 Januari 2022

Pernahkah anda menjumpai sebuah blog yang memasang sebuah widget untuk menampilkan komentar-komentar terbaru di blog tersebut?. Meskipun mungkin jarang, tapi memang kadang beberapa blog memasang widget seperti itu agar pengunjung lain tahu dan mungkin juga tertarik untuk ikut memberikan komentarnya pada artikel-artikel yang sedang hangat dikomentari tersebut.

widget recent comment

Seperti yang sudah disinggung di atas, widget ini berfungsi untuk menampilkan komentar-komentar terbaru yang muncul pada postingan blog. Tidak hanya bermanfaat bagi pengunjung, widget ini juga cukup membantu bagi pemilik situs. Dengan memasang widget ini, kita akan langsung tahu jika ada komentar baru yang masuk. Selain itu, kita juga akan tahu sejauh mana artikel-artikel kita mendapatkan atensi (termasuk komentar) dari para pembacanya. 

Baca juga: Cara Membuat Tombol Show/Hide Pada Komentar Blog

Nah, pada kesempatan yang berbahagia ini kita akan belajar mengenai cari memasang widget recent comment atau komentar terbaru di blog (blogspot). Caranya cukup mudah karena kita hanya akan menambahkan kode-kode pembuatnya lewat menu layout (tataletak) blogger. Widget ini bisa anda pasang pada bagian sidebar blog ataupun bagian footer. Terserah anda mau meletakannya dimana. 

Cara Membuat Widget Recent Comment di Blogspot

1. Buka akun blogger anda. 

2. Pilih menu layout (tataletak). 

3. Klik tambahkan gadget pada penempatan yang diinginkan. 

4. Pilih HTML/JavaScript, isi judul dan pastekan kode di bawah ini ke dalam kotak tersedia. 

<script type="text/javascript">

var a_rc = 5;

var m_rc = false;

var n_rc = true;

var o_rc = 100;

function showrecentcomments(e){for(var r=0;r<a_rc;r++){var t,n=e.feed.entry[r];if(r==e.feed.entry.length)break;for(var i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel){t=n.link[i].href;break}t=t.replace("#","#");var a=t.split("#");a=a[0];var c=a.split("/");c=c[5],c=c.split(".html"),c=c[0];var s=c.replace(/-/g," ");s=s.link(a);var o=n.published.$t,l=(o.substring(0,4),o.substring(5,7)),u=o.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in n)var d=n.content.$t;else if("summary"in n)var d=n.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("On "+m[parseInt(l,10)]+" "+u+" "),document.write('<span class="author-rc"><a href="'+t+'">'+n.author[0].name.$t+"</a></span> commented"),1==n_rc&&document.write(" on "+s),0==o_rc)document.write("</div>");else if(document.write(": "),d.length<o_rc)document.write("<i>&#8220;"),document.write(d),document.write("&#8221;</i></div>");else{document.write("<i>&#8220;"),d=d.substring(0,o_rc);var w=d.lastIndexOf(" ");d=d.substring(0,w),document.write(d+"&hellip;&#8221;</i></div>"),document.write("")}}}

</script><script src=https://santossalam.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>

<style type="text/css">

.rcw-comments a {text-transform: capitalize;}

.rcw-comments {border-bottom: 1px dotted;padding: 7px 0;}

</style>

Keterangan:

• Untuk mengatur jumlah komentar, pada var a_rc ganti angka 5 dengan jumlah yang diinginkan. 
• Untuk menampilkan tanggal komentar, pada var m_rc ganti false menjadi true.
• Untuk menyembunyikan judul artikel, pada var n_rc ganti true menjadi false.
• Untuk menentukan jumlah karakter komentar yang ditampilkan, pada var o_rc ganti angka 100 dengan jumlah sesuai selera. 
• Jangan lupa ganti tulisan santossalam.blogspot.com dengan URL blog anda.

5. Simpan widget dan lihat hasilnya.

Demikianlah tutorial ngeblog dari Santos Blog untuk kali ini. Semoga bermanfaat.

Selengkapnya

Cara Membuat Widget Random Post (Artikel Acak) Thumbnail Lingkaran

Blogging

Cara Membuat Widget Random Post (Artikel Acak) Thumbnail Lingkaran

10 Januari 2022

Agar artikel-artikel lain semakin banyak diekspos oleh para pengunjung blog anda, memasang widget random post mungkin bisa anda lakukan untuk melengkapi keberadaan widget-widget yang sudah terpasang di blog anda. Widget Random Post merupakan sebuah widget yang berfungsi untuk menampilkan daftar artikel di sebuah blog secara acak (random).

screenshot random post

Dengan memasang widget ini, akan banyak artikel-artikel lain yang akan dimunculkan secara acak untuk ditampilkan kepada para visitor yang mengunjungi blog anda. Dengan demikian, tentunya akan lebih banyak lagi artikel yang akan dibaca oleh pengunjung blog anda. Bahkan ketika mereka melakukan loading ulang halaman, semua artikel pada gilirannya akan dimunculkan di widget ini.

Pada postingan kali ini, kita akan coba belajar membuat widget random post dengan tampilan sederhana namun cukup menarik yaitu dilengkapi dengan thumbnail (gambar) bentuk lingkaran. Silahkan ikuti langkah-langkah di bawah ini:

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya.

/* Random Post */

#bo-random-posts{padding: 3px; background: #fff;color:#999;font-size:12px;margin-top:5px;margin-bottom:-17px}

#bo-random-posts img{background:#fafafa;float:left;height:65px;margin-right:10px;width:65px;border-radius:100%}

#bo-random-posts ul{margin:0;padding:0}

#bo-random-posts li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px dotted #e5e5e5;}

#bo-random-posts li:last-child{border-bottom:0}

#bo-random-posts li a{display:block;color:#222;font-weight:bold;text-decoration:none;font-family:Verdana;font-size:14px;margin:0 0 10px 0;line-height:normal}

#bo-random-posts li a:hover{color:#c00} 

4. Simpan template. 

5. Buka menu tataletak (layout), kemudian klik tambahkan gadget. 

6. Silahkan pilih html/javascript. 

7. Tambahkan judul widget, kemudian pastekan kode di bawah ini:

<ul id='bo-random-posts'>

<script> var borp_number = 10; var borp_details = 'no'; var borp_chars = 0; var borp_details2 = 'no'; var borp_comments = 'Komentar'; var borp_commentsd = 'Comments Disabled'; var borp_current = []; var total_randomposts = 0; var borp_current = new Array(borp_number); function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t; } document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>'); function getvalue() { for(var r=0;r<borp_number;r++){for(var n=!1,o=get_random(),t=0;t<borp_current.length;t++)if(borp_current[t]==o){n=!0;break; } n?r--:borp_current[r]=o; }} function get_random() { return 1+Math.round(Math.random()*(total_randomposts-1)); } </script> <script>function random_posts(t) { for(var e=0;e<borp_number;e++){var r=t.feed.entry[e],s=r.title.$t;if("content"in r)i=r.content.$t;else if("summary"in r)i=r.summary.$t;else var i="";if((i=i.replace(/<[^>]*>/g,"")).length<borp_chars)var a=i;else{var n=(i=i.substring(0,borp_chars)).lastIndexOf(" ");a=i.substring(0,n)+"&#133;"; } for(var o=0;o<r.link.length;o++) { if("thr$total"in r)var l=r.thr$total.$t+" "+borp_comments;else l=borp_commentsd;if("alternate"==r.link[o].rel){var m=r.link[o].href,c=r.published.$t;if("media$thumbnail"in r)var u=r.media$thumbnail.url;else u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qu4ovpopp__CucZSvAtZTyC9jMfHm4Mnq2OOKhyphenhyphennnDfSElSnEJBhiiaOEax7UEzsupCZiUtOykwXyoD8KSGNYWSAX29i7ACj8gLZEcNHhcGRbtyt0QVYUHQry84qKB7SPH-_lCsinKDN/s1600/no_thumb.png"; }} document.write("<li>"),document.write('<img alt="'+s+'" src="'+u+'"/>'),document.write('<div><a href="'+m+'" rel="nofollow">'+s+"</a></div>"),"yes"==borp_details&&document.write("<span>"+c.substring(8,10)+"."+c.substring(5,7)+"."+c.substring(0,4)+" - "+l),"yes"==borp_details2&&document.write('<span class="random-summary">'+a),document.write('<div style="clear:both"></div></li>'); }} getvalue();for(var i=0;i<borp_number;i++)document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+borp_current[i]+'&max-results=1&callback=random_posts"><\/script>');</script></ul>

Keterangan:

• 10 = Atur jumlah artikel yang hendak ditampilkan. 

8. Simpan widget. 

Silahkan lihat hasilnya yang telah tercipta. Demikianlah cara membuat widget Random Post keren thumbnail lingkaran. Semoga bermanfaat.

Selengkapnya

Cara Membuat Background Warna Gradient Keren di Blog

Blogging

Cara Membuat Background Warna Gradient Keren di Blog

21 Desember 2021

Pemilihan background warna yang tepat bisa menjadi salah satu daya tarik agar blog semakin disukai oleh para pengunjungnya. Selain satu warna standar, kita juga bisa menambahkan gabungan dari beberapa warna untuk background pada elemen tertentu agar tampilannya semakin keren dan menarik. Caranya yaitu dengan menambahkan efek gradasi warna pada elemen tersebut. 

Gradasi warna (gradient color) adalah konsep penggabungan dua warna atau lebih menjadi satu karakter dengan transisi warna yang sangat lembut dan halus. Pemakaian warna gradient ini memang biasa kita temui pada suatu website atau blog untuk menciptakan efek warna yang keren dan cantik pada web atau blog tersebut. 

Nah, pada artikel kali ini kita akan belajar bersama untuk menciptakan background warna gradient keren di blog. Background gradasi warna ini nantinya bisa anda atur untuk elemen mana saja semau anda dengan cara menyisipkan beberapa kode ke dalam bagian CSS nya. Cara ini tidak akan membuat blog anda berat karena kita hanya menggunakan bantuan kode CSS untuk mengaturnya. 

Menambahkan Efek Gradasi Warna di Blog

1. Buka akun blogger anda. 

2. Pilih menu thema kemudian klik edit html. 

3. Gunakan kode berikut ini untuk menambahkan efek gradasi warnanya:

background:linear-gradient(#0a3e3f,  #0c4d4f, #056a6d, #068488)

Keterangan: 

• kode-kode warna di atas silahkan ganti dan sesuaikan dengan warna-warna pilihan anda. 
• Jumlah warna bebas untuk anda tambah atau kurangi, minimal dua warna. 

Untuk menambahkan efek warna gradient pada area atau elemen tertentu di blog, sisipkan kode tersebut pada bagian CSS nya. 

Sebagai contoh misalkan anda ingin mengaturnya untuk background area footer, silahkan cari kode CSS footer template blog anda. Kalau sudah ketemu, hapus CSS backgroundnya dan gantikan dengan kode di atas sehingga setelah disisipkan hasilnya menjadi seperti berikut ini:

#footer-wrapper {background:linear-gradient(#0a3e3f,  #0c4d4f, #056a6d, #068488); ..... ....} 

Kode di atas akan membuat warna gradasi dari atas ke bawah. Jika anda ingin warna gradasi ke arah samping, silahkan tambahkan 'to right' atau 'to left' pada kode di atas sehingga menjadi seperti berikut ini:

#footer-wrapper {background:linear-gradient(to right, #0a3e3f,  #0c4d4f, #056a6d, #068488); ..... .....} 

 Atau

#footer-wrapper {background:linear-gradient(to left, #0a3e3f,  #0c4d4f, #056a6d, #068488); ..... .....} 

4. Simpan template kembali. 

 

Coba lihat bagaimana hasilnya, keren bukan?. Anda juga bisa menambahkan warna gradasi tersebut pada bagian-bagian lainnya agar blog anda semakin cantik dan menarik. Demikian, semoga bermanfaat.

Selengkapnya

Cara Membuat Widget Recent Post + Snippet + Read More Tanpa Gambar

Blogging

Cara Membuat Widget Recent Post + Snippet + Read More Tanpa Gambar

8 Desember 2021

Seperti yang kita tahu, widget recent post atau artikel terbaru merupakan salah satu fitur yang cukup sering dijumpai di sebuah situs blog. Bagi anda yang ingin blognya ramai dikunjungi orang, memasang widget ini bisa menjadi salah satu pilihan cerdas karena widget ini memang dapat meningkatkan Page View yang cukup signifikan. 

Widget yang berfungsi untuk menampilkan daftar postingan terbaru ini biasanya diletakkan di bagian sidebar blog agar lebih mudah dilihat pembaca. Tampilannya beragam ada yang lengkap dengan disertai gambar, tanggal dan jumlah komentar. Atau ada juga yang simpel hanya judul postingan saja. Sebelumnya saya juga telah memberikan beberapa tutorial pemasangan widget ini. Silahkan bisa dicari lewat pencarian di blog ini. 

Nah, kali ini Santos Blog ingin kembali memberikan tutorial membuat widget artikel terbaru namun dengan tampilan yang berbeda  lagi. Widget Recent Post kali ini bisa dibilang simpel tapi lengkap juga karena disertai snippet, nomor, dan readmore, meskipun tanpa gambar (thumbnail). Screenshotnya kurang lebih seperti di bawah ini:

Bagaimana cara membuatnya?. Silahkan ikuti langkah-langkah pemasangannya di bawah ini. 

Memasang Widget Artikel Terbaru + Snippet + Read More

1. Buka akun blogger anda. 

 

2. Pilih menu layout (tataletak). 

3. Klik tambahkan gadget kemudian pilih html/javascript. 

4. Beri judul Artikel Terbaru, Recent Post, atau lainnya terserah anda kemudian copy paste kode di bawah ini. 

<div class="recentpoststyle">

<script type="text/javascript">

function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}

</script>

<script type="text/javascript">

var posts_no = 7;var posts_date = false;var post_summary = true;var summary_chars = 80;</script>

<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">

</script>

<noscript>Your browser does not support JavaScript!</noscript>

<style type="text/css">

.recentpoststyle {

counter-reset: countposts;

list-style-type: none;

}

.recentpoststyle a {

text-decoration: none;

color: #49A8D1;

}

.recentpoststyle a:hover {

color: #000;

}

.recentpoststyle li:before {

content: counter(countposts,decimal);

counter-increment: countposts;

float: left;z-index: 1;

position:relative;

font-size: 15px;

font-weight: bold;color:#fff;

background:#068488; 

margin:13px 5px 0px 0px;

line-height:30px;

width:30px;

height:30px;

text-align:center;

-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;

}

li.recent-post-title {

margin-bottom: 5px;

padding: 0;

}

.recent-post-title a {

color: #444;

text-decoration: none;

font: bold 14px "Georgia",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;

}

.post-date {

font-size: 11px;color: #999;margin:5px 0px 15px 32px;

}

.recent-post-summ {

margin-bottom:8px;border-left:1px solid #69B7E2; 

color: #777; 

padding: 0px 5px 0px 20px;

margin-left: 10px; 

font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;

}

    </style></div>

Keterangan: 

• Angka 7 menunjukan jumlah postingan yang ditampilkan, silahkan atur sesuka anda. 
• Angka 80 untuk pengaturan karakter snippetnya, silahkan atur sesuka anda. 

5. Simpan dan lihat hasilnya. 

Demikianlah tutorial singkat dari Santos Blog kali ini. Semoga bermanfaat.

Selengkapnya