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

Cara Mengatasi Gambar Postingan Blog (Blogspot) Hilang Masih Diblokir Tri

Blogging

Cara Mengatasi Gambar Postingan Blog (Blogspot) Hilang Masih Diblokir Tri

26 November 2021

Jika anda seorang blogger yang ngeblog menggunakan blogspot, pastinya sudah tahu kalau gambar postingan sempat error tidak tampil karena diblokir. Memang ini merupakan masalah yang muncul dari beberapa bulan lalu. Namun karena salah satu provider yang saya gunakan untuk internetan masih belum melepaskan blokirannya, maka artikel ini akhirnya saya tulis. 

ilustrasi

Seperti yang telah banyak dibahas, kabarnya Kominfo pernah memblokir alamat gambar 1.bp.blogspot.com sehingga gambar postingan blog menjadi blank atau tidak muncul saat diakses. Akibatnya, baik pemilik blog maupun para pembaca blog di Indonesia pun dibuat tidak nyaman dengan keadaan ini. Setelah sempat geger di kalangan blogger, akhirnya kerisauan ini pun reda setelah gambar dari blogspot tidak lagi diblokir. 

Kominfo memang tidak lagi memblokir alamat 1.bp.blogspot.com sehingga para provider penyedia internet pun juga kemudian melepaskan blokirannya dan keadaan menjadi normal kembali. Namun sayangnya, hingga saat ini masih ada satu provider yang belum melepaskan blokirannya sehingga gambar postingan masih tetap error/blank/hilang/tidak muncul saat diakses menggunakan layanan internet dari provider tersebut. 

3 (Tri) adalah salah satu penyedia layanan telekomunikasi seluler terkemuka. Penggunanya cukup banyak di Indonesia. Kebetulan saya juga termasuk salah satu pelanggan lama yang masih setia pakai 3 karena sinyal dan kecepatan aksesnya yang memang cukup handal. Namun sebagai seorang blogger, saya sedikit kecewa semenjak masalah gambar ini tidak lekas diatasi oleh Tri. Saya berharap semoga saja pihak Tri segera bertindak agar masalah ini tidak semakin berlarut-larut. 

Bagi anda para pengelola blog, sebetulnya ada solusi sederhana agar gambar tetap bisa muncul/ tidak diblokir saat blog diakses menggunakan layanan internet dari Tri. Caranya yaitu dengan mengganti alamat gambar 1.bp.blogspot.com menjadi 2.bp.blogspot.com, 3.bp.blogspot.com, atau 4.bp.blogspot.com. Atau bisa juga diubah alamat gambarnya menjadi lh4.googleusercontent.com. Anda bisa mengeditnya secara manual dengan masuk menu edit postingan pada mode html. 

Memang tidak begitu masalah untuk menerapkannya pada artikel-artikel baru. Tapi bagaimana dengan artikel-artikel lama yang jumlahnya sudah mencapai ratusan atau bahkan ribuan?. Apakah harus mengeditnya satu persatu?. 

Mungkin anda sempat dibuat bingung dengan keadaan ini. Tapi tenang, ada cara mudah dan otomatis agar masalah ini bisa teratasi tanpa anda harus mengeditnya satu persatu. Sembari menunggu Tri membuka blokirannya, silahkan terapkan langkah-langkah di bawah ini. 

Mengatasi Gambar Blog Diblokir Provider 3

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

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

<script>//<![CDATA[

    var img = document.getElementsByTagName('img');

    for(var i=0;i<img.length;i++) {

        img[i].src = img[i].src.replace(/[0-9]+.bp.blogspot.com/,"3.bp.blogspot.com");

    }

//]]></script>

Atau bisa juga gunakan kode di bawah ini:

<script>//<![CDATA[

    var img = document.getElementsByTagName('img');

    for(var i=0;i<img.length;i++) {

        img[i].src = img[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com");

    }

//]]></script>

4. Simpan kembali template.

Dengan cara di atas, maka gambar postingan akan bisa tampil meskipun para pengunjung blog anda menggunakan layanan internet dari nomor 3 saat mengaksesnya. 

Saya tidak tahu apakah masalah gambar error ini dialami oleh semua pengguna Tri atau hanya sebagian saja. Namun sebagai langkah antisipasi, mungkin ada baiknya kita menerapkan langkah di atas agar para pengunjung tidak kabur saat membaca artikel dari blog kita yang gambarnya bermasalah akibat masih diblokir. Semoga lekas ada perbaikan.

Selengkapnya

Cara Mengubah Tampilan Judul Widget Sidebar Blog Menjadi Keren Simpel

Blogging

Cara Mengubah Tampilan Judul Widget Sidebar Blog Menjadi Keren Simpel

25 November 2021

Keindahan, keserasian, dan kerapian menjadi salah satu pertimbangan yang menentukan dalam seni mendesain blog. Oleh karenanya, beberapa blogger pun mendesain tampilan widget-widget di blog mereka agar tampak serasi dengan tampilan desain template dan background warna yang dipilih. Tidak perlu terlalu wah, cukup tampilan simpel tapi keren dengan satu atau dua warna dominan untuk tampilan tersebut.

Ketika membuat/menambahkan widget tertentu pada bagian sidebar, biasanya hasil yang kita dapatkan hanya berfungsi untuk mencipta pada tampilan isi widgetnya. Sementara judul widget biasanya akan tetap mengikuti tampilan default yang telah diatur oleh bawaan template blog kita. Maka tidak jarang kita agak kecewa karena tampilan widget yang baru dibuat tidak seperti dicontohkan oleh tutorial yang diikuti. Ya karena itu tadi, tutorial biasanya tidak termasuk mengubah tampilan judul widget. 

Lalu bagaimana jika kita hendak mengubah tampilan judul widget pada sidebar agar tampilannya sesuai kemauan kita?.

Pastinya kita harus mengubah sendiri kode CSS pengaturnya di template html blog kita. Jika anda suka berkreasi, anda mungkin bisa mengutak-atik sendiri kodenya untuk membuat tampilan seperti yang diinginkan. Tapi jika anda tidak mau repot, mungkin anda bisa ikuti tutorial dari Santos Blog di bawah ini untuk mengubah tampilan judul widget sidebar agar menjadi lebih keren. 

Cara Mengganti Tampilan Judul Widget Sidebar Blog

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik edit html. 

3. Terlebih dahulu silahkan cari kode CSS pengatur judul widgetnya. Misal seperti di bawah ini:

#sidebar-wrapper h2 {........ 

Atau

.sidebar h2 {..... 

Silahkan hapus kode tersebut agar tidak bentrok dengan kode baru yang hendak anda tambahkan. 

4. Ada 3 tampilan judul widget sidebar simpel keren yang ingin saya bagikan. Silahkan pilih salah satu dari 3 pilihan berikut ini. 

Versi Pertama

Kode CSS:

#sidebar-wrapper h2{font-family: 'Oswald';font-size: 16px;font-weight: bold;color: #333;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;margin-left:2px;border-bottom:2px solid rgba(0,0,0,0.05);position:relative;color:#000}#sidebar-wrapper h2:after{content:"";position:absolute;bottom:-1px;left:0;width:60px;height:2px;background:#068488}

Versi Kedua

Kode CSS:

#sidebar-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 16px;font-weight: 500;color: #666;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}

#sidebar-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTUqxakRoDap9P9sOp2AXEFEt4s07hzsif1j2qZtWqTM8E2_x6BaZm93OGJ3K-TAUipMScGgZMCnCavHVm-mI8OSZu6qPJQycLsAtAhCh6o9PBoF4b2N7w1SF1xLkI3Hv69zP0kjqv9Ll/s1600/repeat-bg.png)repeat;}

Versi Ketiga

Kode CSS:

#sidebar-wrapper h2 {padding:10px;margin: 0px 0 0 0; background: #068488; font-family: 'Oswald';font-size: 16px;font-weight: 500;color:#eee;text-transform:uppercase;text-align:center;}

5. Silahkan copy paste salah satu kode di atas untuk menggantikan kode CSS yang anda sudah hapus sebelumnya. 

6. Simpan kembali template anda. 

Silahkan lihat hasilnya. Keren bukan?. Anda juga bisa mengedit lagi kodenya untuk menyelaraskan background warna, jenis font, dll agar sesuai dengan tampilan blog anda. Semoga bermanfaat.

Selengkapnya

Cara Membuat Widget Featured Post Slider Manual Keren di Blog

Blogging

Cara Membuat Widget Featured Post Slider Manual Keren di Blog

13 November 2021

Beberapa waktu yang lalu, seseorang mengirimi pesan email kepada saya dan bertanya mengenai cara membuat widget slider seperti yang ada di blog saya ini. Saya sudah membalas email tersebut tapi mungkin kotak masuk (inbox) email orang tersebut penuh sehingga gagal terkirim (recipient inbox full). Jadi, postingan kali ini saya buat untuk pengirim email tersebut dan juga untuk anda yang mungkin membutuhkannya. 

Mengenai widget Featured Post Slider yang ada di blog ini, sebetulnya dulu saya sudah pernah membagikan tutorialnya. (Baca: Cara Membuat Slide Show Keren Manual di Blog). Hanya saja, tampilannya sedikit saya ubah jadi lebih minimalis tapi tetap terlihat keren. Selain tampilan cantik, kelebihan widget ini yaitu kita bisa memilih sendiri artikel-artikel yang hendak ditampilkan semau kita dengan mengaturnya secara manual. 

Jika anda ingin yang tampilannya sudah dimodifikasi seperti yang saya pasang di blog ini, silahkan ikuti langkah-langkah pemasangannya di bawah ini. 

Memasang Widget Featured Post Slider Keren di Blog

1. Buka akun blogger anda.

2. Pilih menu layout (tataletak) dan klik tambahkan gadget. Biasanya tempat strategis di atas Blog Post. 

 

3. Pilih html/javascript, kosongkan judul, kemudian copy pastekan kode di bawah ini.

<style>

.easyslider-wrapper{width:auto; float:left;position:relative; padding-right:2%; padding-top: 10px} .easyslider{overflow: hidden; position:relative; width:auto; height:350px; background:#eee;border-radius:5px;margin-bottom:10px;} .image_reel{position:absolute; top: 0; left: 0;} .image_reel img {float:left;width:20%; height: 350px;} .paging{background:none; position:absolute; bottom:0px; right:10px; padding:4px 0 2px; z-index: 100; display:none;} .paging a{margin:3px; background: #fff; width:10px; height:10px; border-radius:100%; display: inline-block; border:none; outline:none;} .paging a.active{ background:#15E3FF; border:1px solid #15E3FF;} .paging a:hover{ } .easytitledes{width:70%; display:none; position:absolute; bottom:0px;left:0px; z-index: 101; padding:10px 15px;} .easytitledes a{color:#15E3FF; font:16px 'Open Sans'; text-transform:capitalize; font-weight:bold;text-shadow: 1px 1px 0 #000;} .easytitledes a:hover{color:#29FF00}

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

.easyslider {margin-top:15px}} 

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

.easyslider {width:100%;margin-bottom:20px}} 

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

.easyslider {width:auto;height:300px;margin:4px;margin-bottom:10px}

.image_reel img {height:300px}

}

</style>

<div class='easyslider'> <div class='image_reel'> <a href='https://LinkPostingan1.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan1.jpg'/></a>  <a href='https://LinkPostingan2.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan2.jpg'/></a> <a href='https://LinkPostingan3.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan3.jpg'/></a> <a href='https://LinkPostingan4.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan4.jpg'/></a> <a href='https://LinkPostingan5.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan5.jpg'/></a> </div> <div class='descriptionslider'> <div class='easytitledes'><a href='https://LinkPostingan1.html'>Judul Postingan 1</a></div> <div class='easytitledes'><a href='https://LinkPostingan2.html'>Judul Postingan 2</a></div> <div class='easytitledes'><a href='https://LinkPostingan3.html'>Judul Postingan 3</a></div> <div class='easytitledes'><a href='https://LinkPostingan4.html'>Judul Postingan 4</a></div> <div class='easytitledes'><a href='https://LinkPostingan5.html'>Judul Postingan 5</a></div> </div> <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/> </a></a></a></a></a></div> </div>

Keterangan:

• Warna merah ganti dengan link postingan. 
• Warna hijau ganti dengan link gambar postingan. 
• Warna biru ganti dengan Judul Postingan. 
• Sesuaikan urutannya.

4. Klik Simpan. 

5. Buka menu thema dan klik edit html.

Agar widget slider (gambar geser) nya berfungsi, copy javascript di bawah ini dan letakkan di atas kode </body>

<script type='text/javascript'> /*<![CDATA[*/$(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".easytitledes").stop(true,true).slideUp('slow'); $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); $(".image_reel").animate({left: -image_reelPosition}, 400 ); }; rotateSwitch = function(){ $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 5000); }; rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); /*]]>*/</script>

6. Simpan template dan lihat hasilnya. 

Kalau masih belum berfungsi, berarti belum terpasang kode Jquery di template blog anda. Silahkan masuk edit html lagi, copy kode di bawah ini dan letakkan di atas kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Terakhir, agar widget hanya tampil pada tampilan beranda (home), tambahkan tag kondisional pada html widget yang anda pasang ini. Sisipkan menjadi seperti berikut ini:

<b:widget cond='data:view.isHomepage' id='HTML3' locked='false' title='' type='HTML'>... 

Keterangan: kode berwarna merah adalah tag kondisional yang ditambahkan. 

Simpan kembali template dan lihat hasilnya. Demikianlah tutorial tentang cara memasang widget Featured Post Slider Keren di Blog. Semoga bermanfaat.

Selengkapnya

Cara Mengubah/Mengganti Jenis Font Tulisan di Blog

Blogging

Cara Mengubah/Mengganti Jenis Font Tulisan di Blog

21 Oktober 2021

Kata orang, jenis font tertentu bisa berpengaruh bagi setiap pembacanya. Begitu pula dalam seni mendesain web/ blog, pemilihan font yang tepat juga diyakini bisa membuat blog tersebut disukai oleh para pembaca setianya. Itulah yang disebut seni tipografi. Selain menjadi salah satu daya pikat blog, pemilihan font yang tepat juga akan membuat pengunjung merasa nyaman saat menjelajahi artikel-artikel di blog anda. 

Sebagai pemilik blog, kita memang bebas untuk memilih jenis font yang kita kehendaki untuk tampilan blog kita. Namun jangan lupa pula bahwa artikel-artikel kita juga ditujukan untuk banyak orang sehingga kita juga harus memperhatikan kenyamanan mereka saat membaca artikel-artikel kita. Agar artikel yang telah kita posting mendapat tingkat user experience yang tinggi, maka pilihlah jenis font terbaik yang mudah dibaca dan nyaman bagi pengunjung.

Untuk itu, pada postingan kali ini Santos Blog kembali ke hadapan anda untuk memberikan tutorial mengenai cara untuk mengatur/mengubah jenis font di blog. Silahkan simak penjelasan di bawah ini. 

Mengganti Jenis Font di Blogger

Ada beberapa cara yang bisa anda lakukan untuk mengubah atau mengatur jenis font untuk desain blog, baik itu untuk halaman artikel, widget, atau fitur-fitur lainnya. 

Cara pertama, 

Jika anda hendak mengubah font untuk halaman postingan, maka cara paling mudah yaitu gunakan fitur pengaturan yang telah tersedia di atas form untuk posting artikel. Tampilannya seperti di bawah ini. 

Silahkan klik segitiga kecil di samping simbol A kemudian pilih jenis font yang ingin digunakan untuk artikel anda. Ada beberapa pilihan font yang tersedia seperti Arial, Courier, Georgia, Helvetica, Times, Trebuchet, dan Verdana. Jika masih kurang, anda bisa tambahkan lagi jenis font lainnya dengan klik Add more fonts.

 

Jenis font yang anda pilih tersebut bisa diatur untuk keseluruhan isi artikel atau bisa juga diatur pada kalimat tertentu dengan menselect kalimatnya terlebih dahulu lalu pilih font yang diinginkan. 

Cara kedua, 

Untuk mengganti/ mengubah jenis font, kita juga bisa menggunakan kode CSS untuk mengaturnya. Adapun kodenya yaitu sebagai berikut:

font-family: Verdana;

Silahkan ganti Verdana dengan jenis font yang anda inginkan. Penambahan kode CSS ini bisa anda terapkan misal untuk mengatur font tulisan/kalimat pada widget, area sidebar, footer, dll.

Selain itu, cara ini juga bisa anda terapkan untuk font postingan dengan mengaturnya lewat edit template. Adapun langkah penerapannya yaitu silahkan pilih menu thema ➡ klik edit html ➡ cari kode: .post{  atau .post-body{

Setelah itu, letakkan kode CSS untuk jenis fontnya ke dalam kurung pada kode tersebut sehingga menjadi seperti berikut ini:

.post-body {font-family:Oswald; font-size:... } 

Cara Ketiga, 

Cara terakhir ini bisa anda terapkan misal anda hendak mengaturnya pada kalimat/tulisan/paragraf langsung lewat halaman html. Untuk mengatur jenis font yang diinginkan, anda bisa tambahkan tag <div> atau <span> atau <p> lalu kombinasikan dengan kode CSSnya. 

Contoh Penerapannya seperti berikut ini:

<div style="font-family:Arial">Kalimat yang hendak diatur fontnya</div>

Atau 

<span style="font-family:Oswald">Kalimat yang hendak diatur fontnya</span>

Atau 

<p style= "font-family:Verdana">Kalimat yang hendak diatur fontnya</p>

Demikianlah tadi tutorial singkat terutama bagi blogger pemula mengenai cara mengubah/ mengatur jenis font untuk desain blog. Semoga bermanfaat.

Selengkapnya

Cara Mengatur Kalimat dengan Huruf Tebal, Miring, dan Bergaris Bawah di Blog

Blogging

Cara Mengatur Kalimat dengan Huruf Tebal, Miring, dan Bergaris Bawah di Blog

12 Oktober 2021

Pada kesempatan kali ini, Santos Blog ingin berbagi tutorial khusus untuk blogger pemula yang mungkin masih asing terkait fitur-fitur dalam dunia blogging. Tutorial ini memang sangat mudah karena sebetulnya bisa dipelajari sendiri seiring waktu berjalan. Namun tidak ada salahnya untuk saya ulas agar anda lebih cepat paham terkait penerapannya. 

Saat mendesain tampilan blog, adakalanya kita perlu untuk memberikan suatu penekanan pada kalimat tertentu agar bisa dipahami dengan baik oleh pembacanya. Kita tentu familier dengan beberapa penulisan kata atau kalimat yang ditampilkan dengan gaya berhuruf tebal, huruf miring, atau huruf bergaris bawah. Nah, bagaimanakah cara untuk mengaturnya seperti itu?. 

Ada tiga cara yang bisa kita lakukan untuk mengatur penulisan kata atau kalimat dengan huruf tebal, miring, atau bergaris bawah. 

Cara pertama, 

Jika kalimat yang hendak diatur tersebut merupakan isi di dalam postingan, maka cara termudah yaitu gunakan fitur yang telah tersedia pada menu bar di atas halaman untuk posting artikel. Tampilannya seperti di bawah ini. 

Keterangan:

• Simbol B (bold) untuk mengatur huruf tebal. 
• Simbol I (italic) untuk mengatur huruf miring. 
• Simbol U (underline) untuk membuat kalimat bergaris bawah. 

Silahkan select terlebih dahulu kata/kalimat yang hendak anda atur, kemudian pilih salah satu dari ketiga pilihan settingan tersebut sesuai keinginan anda. Atau anda juga bisa memadukannya sesuai selera. Misal kalimat tebal + miring + bergaris bawah, dll. 

Cara kedua, 

Untuk membuat kalimat dengan huruf tebal, miring, atau bergaris bawah, kita juga bisa menggunakan kode CSS untuk mengaturnya. Adapun penulisan kodenya yaitu sebagai berikut. 

font-weight: bold ➡ untuk huruf tebal

font-style: italic ➡ untuk huruf miring

text-decoration: underline ➡ untuk huruf bergaris bawah

Penambahan kode CSS ini bisa anda terapkan misalnya jika anda hendak mengaturnya untuk font tulisan/kalimat pada widget, area sidebar, footer, dsb. 

Cara Ketiga, 

Cara terakhir ini cukup mudah dan bisa anda terapkan misal anda hendak mengaturnya pada kalimat lewat halaman html secara langsung. Agar font kalimatnya menggunakan huruf tebal, miring, atau bergaris bawah, silahkan bingkai kalimat tersebut dengan kode-kode di bawah ini:

<b> ....... </b> : agar berhuruf tebal. 

<i> ....... </i> : agar berhuruf miring. 

<u> ....... </u> : agar huruf bergaris bawah. 

Nah, Itulah tadi tutorial singkat bagi pemula mengenai cara mengatur kalimat/tulisan dengan huruf tebal, miring, dan bergaris bawah di Blog. Baca juga: Cara Memberi Warna Pada Tulisan di Postingan Blog.

Selengkapnya

Cara Membuat Efek Zoom (Membesar) Pada Gambar Postingan Ketika Disentuh

Blogging

Cara Membuat Efek Zoom (Membesar) Pada Gambar Postingan Ketika Disentuh

11 September 2021

Beberapa waktu yang lalu, Santos Blog pernah mengulas mengenai cara membuat efek goyang pada gambar postingan blog ketika disentuh. Jika anda sudah bosan, anda bisa menggantinya dengan efek lain pada gambar tersebut, salah satunya yaitu dengan memberi efek zoom (membesar) ketika gambar tersebut terkena kursor mouse (pada versi web) atau disentuh tangan (pada versi mobile). 

Selain membuat blog jadi tampak lebih unik, tampilan efek zoom ini juga memberi manfaat bagi pembacanya. Mereka jadi lebih mudah memahami maksudnya ketika mendapati gambar yang terlalu kecil. Efek ini juga memudahkan pembaca untuk melihat detail suatu gambar pada sebuah postingan tanpa harus mengkliknya. Sentuhan kursor mouse atau tangan yang mengarah pada gambar tersebut akan membuat gambar membesar sehingga gambar akan terlihat menjadi lebih jelas. 

Apakah cara penerapannya sulit?. Tenang saja, kita hanya akan menambahkan kode CSS pada html template blog. Lebih lanjut silahkan ikuti langkah-langkah di bawah ini. 

Cara Memberi Efek Zoom Pada Gambar Postingan Ketika Disentuh

1. Buka akun blogger anda.

2. Pilih menu tema dan klik edit html.

3. Terlebih dulu cari kode ]]></b:skin> atau </style>

4. Kalau sudah ketemu, silahkan gunakan kode CSS di bawah ini:

.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}

Atau gunakan kode berikut ini:

.post img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); }

Silahkan pilih salah satu dari kode di atas, terserah yang mana, kemudian letakkan kode tersebut di atas kode ]]></b:skin> atau </style>

5. Simpan kembali template anda.

Silahkan lihat dan tes hasilnya. Apakah gambar postingan ketika disentuh tiba-tiba membesar (zoom)?. 

Saya memang tidak memasangnya di blog ini, jadi anda bisa mencobanya sendiri di blog anda. Kalau tidak suka atau sudah bosan, anda tinggal hapus lagi saja kodenya. Demikian tutorial kali ini. Semoga bermanfaat.

Selengkapnya

Cara Memasang Ikon + Link Media Sosial Keren Menarik di Blog

Blogging

Cara Memasang Ikon + Link Media Sosial Keren Menarik di Blog

30 Agustus 2021

Memasang widget sosial media bisa menjadi suatu alternatif agar blog semakin dikenal oleh pengunjung setianya. Dengan menyertakan link menuju media sosial, pengunjung bisa lebih mudah untuk berinteraksi dengan pemilik blog tersebut. Hubungan pertemanan pun bisa menjadi lebih dekat dan akrab antara pemilik blog dengan para pembacanya. 

Nah, kali ini Santos blog ingin berbagi tutorial mengenai cara membuat widget media sosial keren di blog. Widget yang akan kita buat kali ini memiliki tampilan cukup keren dengan efek bisa berputar ketika disentuh. Ikon-ikon media sosialnya juga saya buat menggunakan ikon Svg sehingga tidak akan begitu mempengaruhi kecepatan loading blog. Anda juga bisa mengaturnya lagi sesuai kebutuhan. 

Widget media sosial ini bisa anda letakkan pada bagian manapun terserah anda. Bisa diletakkan pada bagian sidebar blog atau bisa juga di dalam area postingan. Atau bisa juga diletakkan pada area footer/ di atas kredit seperti beberapa blog pada masa kini. Adapun untuk langkah-langkah pemasangannya silahkan simak penjelasannya di bawah ini. 

Cara Membuat Widget Sosial Media Keren Bisa Berputar

1. Buka akun blogger anda.

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

3. Pilih html/ javascript. 

4. Silahkan beri judul atau kosongkan. Selanjutnya masukkan kode berikut ini ke dalam kotak di bawahnya.

<style>

.simplifymedsos a{display:inline-block;text-align:center;font-size:15px;margin-right:8px;color:#fff;border:1px solid #888;border-radius:4px;opacity:.9;transition:all 0.8s ease-in-out 0s; -moz-transition: all 0.8s ease-in-out;   -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out;}.simplifymedsos a svg{margin:5px;width:18px;height:18px}.simplifymedsos a svg path {fill:currentColor}.simplifymedsos a:hover{color:#fff;opacity:0.8; transform:rotate(360deg); -moz-transform: rotate(360deg);   -webkit-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg)}.simplifymedsos .facebook{background:#3b5998}.simplifymedsos .twitter{background:#00aced}.simplifymedsos .youtube{background:#dd4b39}.simplifymedsos .instagram{background:#dd2a7b}.simplifymedsos .LinkedIn{background:#007bb5}

</style>

<center>

<div class="simplifymedsos" style="margin: 5px;">

<a class="twitter" href="https://www.twitter.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">

    <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />

</path></svg></a>

<a class="facebook" href="https://www.facebook.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></path></svg></a>

<a class="youtube" href="https://www.youtube.com/channel/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">

    <path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />

</path></svg></a>

<a class="instagram" href="https://www.instagram.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">

    <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />

</path></svg></a>

<a class="LinkedIn" href="https://www.linkedIn.com/xxxxxxxxxxxxxxx" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24">

    <path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />

</path></svg></a>

</div>

</center>

Keterangan:

• Sesuaikan yang ditandai warna merah dengan Url masing-masing media sosial milik anda.
• Anda juga bisa mengedit atau menambahkan media sosial lainnya sesuai kebutuhan. 

5. Simpan widget dan lihat hasilnya. 

Selain memasangnya lewat tambahkan gadget, anda juga bisa memasangnya ke dalam html template misal untuk pemasangan di area footer, dalam postingan, dan sebagainya. 

Demikianlah tutorial tentang cara membuat/ memasang Ikon + Link Sosial Media Keren di Blog. Semoga bermanfaat. Baca juga: Cara Membuat Tombol Share Keren Populer di Blog

 

Selengkapnya