Cara Membuat Widget Random Post Tanpa Gambar (Thumbnail) Keren di Blog

Blogging

Cara Membuat Widget Random Post Tanpa Gambar (Thumbnail) Keren di Blog

25 Juni 2021

Saat sedang mengeksplore postingan-postingan lama, sering kali kita menjumpai cukup banyak postingan lama yang masih sesuai dengan zaman. Namun sayangnya, artikel-artikel tersebut kini tenggelam dan semakin sulit untuk ditemukan. Salah satu cara agar artikel-artikel tersebut bisa terbaca kembali oleh pengunjung adalah dengan menampilkannya pada widget blog. Tapi apakah ada widget yang memiliki fungsi seperti itu?. 

Pastinya bukan widget Recent Post karena fungsinya justru menampilkan artikel-artikel terbaru. Kalau Popular Post mungkin ada beberapa yang kadang muncul karena masih sering dibaca. Kalau widget artikel terlama kayaknya tidak ada, maka salah satu yang bisa menjalankan fungsi tersebut adalah widget Random Posts. 

Meski berfungsi menampilkan postingan secara acak, widget Random Post juga cukup efektif dalam menampilkan beberapa judul postingan lama agar muncul kembali. Bahkan ketika kita mereload halaman yang sedang dibuka, maka daftar postingan yang muncul pada widget ini pun akan selalu berubah sehingga akan lebih banyak postingan, baik baru maupun lama, yang tergali kembali. 

Untuk itu, kali ini Santos Blog kembali ke hadapan anda dengan membawa tutorial mengenai cara membuat widget Random Post dengan tampilan sederhana di blog. Karena tanpa gambar, maka widget ini tidak akan begitu mempengaruhi kecepatan blog anda sehingga loading tetap cepat dan ringan. 

Bagaimana cara membuatnya?. Silahkan ikuti langkah-langkah pemasangannya di bawah ini dengan teliti dan saksama. 

1. Buka akun blogger anda. 

2. Pilih menu layout (tataletak).

3. Klik tambahkan gadget (add gadget) lalu pilih html/javascript. 

4. Isi kolom judul dengan Random Post, Artikel Acak, Baca Juga, atau lainnya. 

5. Masukkan kode berikut ini ke dalam kolom di bawahnya. 

<style> 

#random-posts ul{background:#fff;margin:0 auto;padding:0;}

#random-posts li{list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 2px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em} 

#random-posts li a{color:#1c1207;font-size:14px;font-weight:600}

#random-posts li a:hover{color:#c00} </style>

<div id='random-posts'></div>

<script>

//<![CDATA[

// Random Post Widget

var homePage = 'https://hikayatmanfangat.blogspot.com',

    maxResults = 7,

    containerId = 'random-posts';

function getRandomInt(min, max) {

    return Math.floor(Math.random() * (max - min + 1)) + min;

}

function shuffleArray(arr) {

    var i = arr.length, j, temp;

    if (i === 0) return false;

    while (--i) {

        j = Math.floor(Math.random() * (i + 1));

        temp = arr[i];

        arr[i] = arr[j];

        arr[j] = temp;

    }

    return arr;

}

function rewaysRandomPosts(json) {

    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));

    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));

    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');

}

function randomPosts(json) {

    var link, ct = document.getElementById(containerId),

        entry = shuffleArray(json.feed.entry),

        skeleton = "<ul>";

    for (var i = 0, len = entry.length; i < len; i++) {

        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {

            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';

        }

        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';

    }

    ct.innerHTML = skeleton + '</ul>';

}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=rewaysRandomPosts"></scr' + 'ipt>');

//]]>

</script>

Keterangan:

• Ganti URL yang diberi tanda merah dengan URL blog anda. 
• Ganti angka 7 untuk mengatur jumlah postingan yang hendak anda tampilkan. 

6. Silahkan simpan (save) dan lihat hasilnya. 

Bagi anda yang menghendaki tampilan widget random post dengan gambar (thumbnail), silahkan baca: Cara Membuat Widget Random Post dengan Gambar di Blog.

Demikianlah tutorial kali ini mengenai cara membuat widget Random Post tanpa gambar (thumbnail) keren di Blog. Semoga bermanfaat.

Selengkapnya

Cara Menambahkan Label dan Ucapan Terima Kasih di Bawah Tiap-Tiap Postingan Blog

Blogging

Cara Menambahkan Label dan Ucapan Terima Kasih di Bawah Tiap-Tiap Postingan Blog

23 Juni 2021

Bagi orang yang suka mengutak-atik tampilan blog, mencoba sesuatu yang baru adalah sah-sah saja dilakukan asalkan tidak berdampak buruk bagi perkembangan blog tersebut. Selain mengubah bentuk tampilan, menambahkan widget, mengatur font, mengganti warna background, dll, kita juga sering kali menambahkan tulisan atau keterangan-keterangan tertentu agar tampilan blog semakin menarik dan mudah untuk dijelajahi. 

Pada kesempatan kali ini, kita akan coba belajar membuat/ menambahkan keterangan label/ kategori dan ucapan terima kasih di bagian bawah tiap-tiap postingan atau di atas tombol share. Mungkin anda pernah menjumpai tampilan seperti ini pada beberapa blog ternama seperti blog CB, blog Romelteamedia, dan blog-blog lainnya. Blog saya ini (Santos Blog) yang kebetulan memakai template dari romelteamedia juga terdapat tampilan seperti ini. 

Perlu diketahui, tutorial ini sebetulnya saya ambil dari kode dalam template blog saya ini (jurnalistik template) yang sedikit saya modifikasi menggunakan ikon svg dan ganti kalimatnya. Setelah saya coba terapkan pada blog saya yang lain dengan template berbeda, ternyata hasilnya jadi tambah keren dan menarik. Selain keterangan label sebagai pelengkap navigasi, adanya ungkapan terima kasih juga menjadi semacam apresiasi dari kita pemilik blog kepada pengunjung yang telah meluangkan waktunya untuk membaca artikel-artikel di blog kita. 

Nah, bagi anda yang ingin coba memasangnya di blog anda, silahkan ikuti langkah-langkah di bawah ini untuk penerapannya. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode <data:post.body/> dan letakkan kode berikut ini di bawahnya. 

<div id='rtmlabelthanks'>

<small><strong>Kategori:</strong> <b:loop values='data:post.labels' var='label'>

                <a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

                </b:loop>      

  </small>

<p><small><svg style='margin-bottom:-2px;width:15px;height:15px' viewBox='0 0 24 24'>

    <path d='M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z' fill='#3b5998'/>

</svg> Terima kasih telah membaca <b><data:post.title/></b>. Silahkan Bagikan...!</small></p>

</div>

Keterangan: 

• Angka 5 merupakan jumlah postingan per label pada tampilan halaman index. Sesuaikan dengan pengaturan tema blog anda. 
• Anda bisa ubah kalimat yang saya beri tanda merah menggunakan bahasa Inggris atau kalimat lain sesuka anda. 

4. Simpan kembali template dan lihat hasilnya. 

Jika ingin menghiasnya lagi, anda juga bisa tambahkan style CSS untuk script di atas misal untuk menambahkan background, pengaturan font, border, box shadow, dsb. Sebagai contoh saya tambahkan kode CSS berikut ini di atas kode ]]></b:skin> atau </style>

#rtmlabelthanks{padding:5px;background:#e4c0a8;font-size:15px;box-shadow:3px 3px 8px #777}

Maka hasilnya akan seperti berikut ini:

Jadi lebih keren bukan. Itulah tadi tutorial tentang cara menambahkan label dan ucapan terima kasih di bawah tiap-tiap postingan Blog. Semoga bermanfaat. 

Selengkapnya

Cara Membuat Widget Related Post List dengan Thumbnail di Bawah Postingan

Blogging

Cara Membuat Widget Related Post List dengan Thumbnail di Bawah Postingan

21 Juni 2021

Selain pentingnya membuat artikel berkualitas dan pengetahuan tentang SEO, hal yang juga tidak kalah pentingnya yaitu bagaimana membuat pengunjung tersebut agar betah dan tidak segera beranjak meninggalkan blog kita. Salah satu di antara caranya yaitu dengan menawarkan konten-konten lain di blog kita untuk dibaca. Itulah kenapa seorang blogger biasanya memasang beberapa widget tertentu di blognya untuk maksud tersebut. 

Satu di antara widget-widget tersebut yaitu widget Related Post atau kalau dalam bahasa Indonesianya biasa disebut widget "Artikel Terkait". Berbeda dengan widget-widget lainnya, widget related post ini memang biasanya akan memunculkan link-link artikel yang masih berkaitan pembahasannya dengan artikel yang sedang dibaca sehingga lebih kuat dalam menarik perhatian pengunjung untuk membaca juga artikel-artikel yang ditawarkan dalam widget tersebut. 

Beberapa waktu lalu, Santos Blog pernah membahas tentang cara pembuatan widget Related Post tampilan grid yang disertai dengan gambar. Nah, kali ini kita juga akan coba untuk membuat widget related pots masih disertai thumbnail (gambar) namun tampilannya berbentuk list ke bawah. Widget ini juga cocok untuk anda pasang di bagian bawah postingan atau di bawah tombol share. Adapun tampilannya kurang lebih seperti berikut ini. 

Jika anda berminat memasangnya di blog anda, silahkan simak langkah-langkah berikut ini untuk penerapannya. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

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

/* Related Post List Style */

.related-postbwrap{position:relative;margin:0;padding:20px}

.related-postbwrap h4{background:#fff;margin:0 0 10px 0;color:#000;font-weight:bold;font-size:140%;border-bottom:2px solid #ac6730}

.related-post-style-2,.related-post-style-2 li{list-style:none;margin:0;padding:0}

.related-post-style-2 li{border-top:0 solid #eee;overflow:hidden;padding:10px 0}

.related-post-style-2 li:first-child{border-top:none}

.related-post-style-2 .related-post-item-thumbnail{width:80px;height:80px;max-width:none;max-height:none;background-color:transparent;border:none;float:left;margin:2px 10px 0 0;padding:0}

.related-post-style-2 .related-post-item-title{font-weight:bold;font-size:14px;color:#333}

.related-post-style-2 .related-post-item-summary{display:block;font-size:90%;}

4. Untuk memasangnya di bawah postingan, silahkan cari kode <data:post.body/> kemudian letakkan kode berikut ini di bawahnya.

<div class='related-postbwrap' id='bpostrelated-post'/>

<script type='text/javascript'>

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

      </b:loop></b:if>];

var relatedPostConfig = {

      homePage: &quot;<data:blog.homepageUrl/>&quot;,

      widgetTitle: &quot;&lt;h4&gt;Related Posts&lt;/h4&gt;&quot;,

      numPosts: 6,

      summaryLength: 0,

      titleLength: &quot;auto&quot;,

      thumbnailSize: 80,

      noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1F_fisFKuaAJl5bWjBXMEv4P5nNTzxolOdlpjAOcewyN8-Q8DoKfF5Pxwq_nfd82sCHHpbpCtfzEjEB0xnX1yHwh40hZVqPWHYCDNjgEXun7qs9hvozsyK7nxQJlfsQJM9TdNsqC7vGh/s1600/no-img.png&quot;,

      containerId: &quot;bpostrelated-post&quot;,

      newTabLink: false,

      moreText: &quot;Read More&quot;,

      widgetStyle: 2,

      callBack: function() {}

};

</script>

<script type='text/javascript'>

//<![CDATA[

/*! Related Post Widget */

var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);

//]]>

</script>

Keterangan:

• Angka 6 merupakan jumlah post yang ditampilkan. Silahkan atur sesuai selera. 
• Widget di atas mendukung tampilan snippet. Jika ingin menampilkannya silahkan atur nilai 0 menjadi misalnya: 120 

5. Simpan kembali template anda dan lihat hasilnya. 

Demikianlah tadi Cara Membuat Related Post List dengan Thumbnail di Bawah Postingan. Semoga bermanfaat.

 

Selengkapnya

Tips-Tips Menghadapi Blog Copy Paste Sebelum Mengambil Tindakan Pelaporan

Blogging

Tips-Tips Menghadapi Blog Copy Paste Sebelum Mengambil Tindakan Pelaporan

18 Juni 2021

Entah sudah berapa kali saya mendapati blog ini didzalimi oleh oknum-oknum blogger tidak modal yang mengcopy paste utuh artikel-artikel dari blog ini untuk dipublish ulang di blog-blog mereka. Nah, postingan kali ini merupakan pengalaman pribadi saya ketika menghadapi blog-blog copy paste tersebut. Kebetulan baru-baru ini, ada dua blog yang saya atasi terkait tindakan curang tersebut. Blog pertama menyalin hampir sekitar 40 an artikel. Sedangkan blog kedua menyalin ulang sampai 150 artikel. Tidak main-main bukan?. 

Memang mengherankan kenapa tindakan tidak terpuji seperti itu baru ketahuan setelah puluhan atau bahkan ratusan artikel copas telah diterbitkan. Mungkin anda sekalian juga heran tapi memang kebanyakan seperti itu temuan yang kita dapatkan saat tiba-tiba secara tidak sengaja menemukannya di hasil pencarian. Namun bukan hal itu yang ingin saya bahas di sini, karena saya pun juga tidak tahu jawabannya. Mungkin anda bisa bertanya langsung kepada google.

via istockphoto

Kembali ke topik di atas, maraknya oknum blogger yang suka copy paste artikel dari blog lain memang cukup meresahkan. Betapa tidak, kita sebagai pembuat konten yang asli sering kali dirugikan atas tindakan negatif tersebut. Artikel-artikel kita bisa terkena dampak buruknya akibat terindikasi duplikat konten dengan adanya artikel-artikel copas tersebut. Oleh karenanya, pelaporan ke Google DMCA menjadi satu alternatif ampuh untuk memberi pelajaran agar oknum-oknum tersebut jera dan berhenti melakukan tindakan curang tersebut. 

Namun sebelum anda melaporkan blog copas tersebut kepada Google DMCA, ada baiknya anda perhatikan hal-hal berikut ini. 

1. Cari Tahu Lebih Dulu dan Hubungi Akun Pemilik Blog

Berkaca dari pengalaman, sering kali saya jumpai blog-blog copas tersebut tidak jelas dalam menginformasikan pemiliknya. Umumnya, blog-blog tersebut tidak melampirkan halaman about atau alamat email yang bisa dihubungi sehingga kita tidak bisa menegurnya atau memperingatkannya. Namun jika kebetulan ada, maka hal itu bisa kita manfaatkan untuk menghubungi yang bersangkutan dan memberitahu persoalannya. Usahakan gunakan kalimat yang tepat agar yang bersangkutan sadar akan tindakannya dan bersedia untuk menghapus artikel-artikel copas tersebut. 

2. Lihat Tanggal Terakhir Kali Artikel Diposting

Selain mencari tahu tentang identitas pemilik, hal lain yang bisa kita lakukan sebelum melaporkan blog copas tersebut adalah dengan mengecek artikel terbaru di blog tersebut. Lagi-lagi, biasanya blog-blog tersebut tidak mencantumkan tanggal pada postingannya sehingga kita pun tidak tahu kapan artikel-artikel tersebut dipublish. Meskipun begitu, setidaknya kita bisa sedikit mengira-ngiranya dengan melihat URL yang muncul di kotak URL browser. Untuk blogspot, biasanya ada keterangan bulan dan tahun yang muncul di sana. Setelahnya, kita tinggal menentukan langkah berikutnya untuk dilakukan.

3. Berkomentar di Salah Satu Postingan

Jika profil tidak ditemukan namun diketahui bahwa artikel paling terbaru di blog tersebut dipublish belum begitu lama (masih dalam jangka waktu sekitar 1 bulanan), maka tidak ada salahnya anda bisa coba berkomentar pada salah satu postingan di blog tersebut. Saran saya berikan komentar pada artikel yang paling baru (teratas) agar pemilik blog tersebut langsung dapat melihatnya ketika kembali mengakses blognya. 

Kebetulan, cara ketiga ini sukses saya praktekkan ketika menghadapi blog yang pernah copas hampir 40 artikel dari blog ini. Saat itu, saya berkomentar yang intinya memberitahukan bahwa pemilik blog tersebut telah melakukan pelanggaran dengan menyalin beberapa artikel saya di blog miliknya. Saya juga memohon kepadanya agar ia bersedia menghapus artikel-artikel copas tersebut. Tidak lupa juga saya peringatkan bahwa saya tidak segan-segan untuk melaporkannya kepada Google DMCA dan memberitahukan dampaknya jika pemberitahuan tersebut tidak ditanggapi. 

Saya uraikan komentar saya tersebut dengan kalimat baik-baik agar pemilik blog tersebut sadar dengan sendirinya dan lekas menghapus artikel-artikel tersebut. Sekedar informasi, kebetulan blog copas tersebut sebetulnya bagus dan sudah berdomain TLD sehingga sayang jika sampai dicap buruk oleh Google. Saya juga berikan sedikit motivasi dan penyemangat bahwa blog tersebut mampu berkembang besar asalkan syaratnya berhenti melakukan copy paste dan berkreasi dengan hasil karya sendiri. Saya juga turut menyertakan alamat email saya sekiranya dia mau menghubungi saya terkait hal ini. 

Awalnya memang tidak ada tanggapan, sehingga saya pun memutuskan untuk memancingnya dengan melaporkan beberapa artikel copas tersebut (hanya beberapa/ belum semuanya) kepada Google DMCA. Benar saja, setelah mendapat email dari tim Google DMCA bahwa laporan tersebut berhasil dikabulkan, saya pun coba mengecek lagi blog tersebut. 

Seperti yang diharapkan, artikel-artikel copas tersebut pun kini sudah tidak ada lagi semuanya, alias sudah dihapus semua oleh pemilik blog tersebut. Meskipun tidak ada balasan atau pesan yang masuk dari pemilik blog tersebut, saya apresiasi usahanya untuk menghapus artikel-artikel copas tersebut. Saya juga berharap semoga ia tidak mengulanginya lagi dan bisa sukses dengan blognya.

4. Melaporkannya ke Google DMCA

Jika kesemua di atas sudah dilakukan namun tetap tidak ada tanggapan, bahkan kolom komentar pun tidak ada, maka langkah terakhir yaitu dengan melaporkannya kepada Google DMCA agar lekas ditindak. Seperti itulah yang saya lakukan pada blog copas kedua yang telah menyalin artikel saya hingga mencapai 150 artikel. Kebetulan saya cermati blog copas tersebut juga sudah berbulan-bulan ditinggalkan sehingga tidak ragu lagi bagi saya untuk langsung melaporkan blog tersebut. 

Nah, bagi anda yang hendak melaporkan blog copy paste yang telah menyalin ulang artikel-artikel blog anda, langkah-langkahnya bisa dibaca pada link artikel berikut ini:

Cara Melaporkan Blog Copy Paste Agar Ditindak Google DMCA

Selengkapnya

Cara Menghilangkan Bullet ul li Yang Muncul Pada Beberapa Widget atau Elemen Blog

Blogging

Cara Menghilangkan Bullet ul li Yang Muncul Pada Beberapa Widget atau Elemen Blog

17 Juni 2021

Bullet adalah bentuk ikon lingkaran kecil, kotak kecil, atau tanda titik yang biasanya digunakan untuk menjabarkan uraian tertentu dalam bentuk list ke bawah. Selain pada halaman posting, bullet yang umumnya menggunakan kode ul li ini juga biasa digunakan pada tampilan tertentu seperti menu navigasi, link-link tertentu, widget-widget yang dipasang pada bagian sidebar, atau pun pada elemen-elemen blog lainnya. 

Beberapa waktu yang lalu, Santos Blog telah membahas mengenai cara mengatasi bullet yang menghilang di postingan blog agar muncul kembali. Nah, kali ini justru kebalikannya, kita akan coba belajar mengenai cara menghilangkan bullet yang muncul pada beberapa widget atau elemen tertentu di blog. Tentu ada beragam alasan mengapa kita justru ingin menghilangkan bullet pada tampilan-tampilan tersebut. 

Pada beberapa elemen, alasan bullet perlu dihilangkan biasanya terkait dengan tampilan yang dikehendaki oleh empunya blog. Sebagai contoh, mungkin bullet akan cocok jika muncul di widget-widget list yang berada di bagian sidebar blog. Namun akan tampak kurang luwes jika bullet ini juga muncul pada widget atau elemen bentuk tampilan horizontal yang dipasang di halaman blog. Kebetulan baru-baru ini saya juga mengalami hal tersebut ketika sedang mencoba memasang sebuah widget di salah satu blog saya. 

Untuk cara menghilangkannya, silahkan ikuti langkah-langkah di bawah ini.

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Silahkan cari kode CSS untuk widget atau fitur yang ingin dihilangkan bulletnya. 

Jadi, kita hanya akan menghilangkan bullet yang muncul di widget atau fitur itu saja, sehingga bullet yang memang dibutuhkan seperti di dalam postingan bisa tetap bekerja dan berfungsi sebagaimana mestinya. 

Adapun cara menghilangkannya yaitu cukup dengan menambahkan kode di bawah ini:

list-style:none;

Atau

list-style-type:none;

Silahkan tambahkan kode tersebut pada CSS ul li untuk fitur atau widget yang anda kehendaki. Sebagai contoh, saya ingin menghilangkan bullet pada widget popular post grid seperti pada tampilan gambar di atas, maka penerapannya akan seperti berikut ini.

 

#popularpostgrid ul li{width:150px;float:left;height:150px;border-radius:4px;padding:10px;margin-right:10px;margin-bottom:15px;list-style-type:none;}

4. Simpan kembali template dan lihat hasilnya. 

Selain cara di atas, ada juga cara lain yang bisa kita gunakan, yaitu dengan menambahkan kode: style='list-style-type: none;' di belakang kode <li> pada html elemen yang dikehendaki. Contohnya seperti di bawah ini. 

Mulanya kodenya seperti berikut ini:

<li><a href="https://cobasalam.blogspot.com">Blog Percobaan</a></li>

Setelah ditambahkan, maka menjadi:

<li style='list-style-type: none;'><a href="https://cobasalam.blogspot.com">Blog Percobaan</a></li>

Demikianlah tadi tutorial tentang Cara Menghilangkan Bullet ul li Yang Muncul Pada Beberapa Widget atau Elemen Blog. Semoga bermanfaat.

Selengkapnya

Cara Membuat Widget Popular Post Grid Style Keren Responsive di Blog

Blogging

Cara Membuat Widget Popular Post Grid Style Keren Responsive di Blog

16 Juni 2021

Ingin memasang widget bentuk grid untuk tampilan homepage blog tapi bukan widget featured post?, mungkin anda bisa gunakan widget popular post berikut ini yang sudah dimodifikasi agar tampilannya keren seperti berita-berita headline di situs berita. Atau bagi anda yang menggunakan blognya sebagai toko online, widget popular post keren ini juga cocok untuk anda pakai berjualan di blog anda. 

Ya, memiliki blog yang banyak pengunjungnya memang menjadi motivasi tersendiri agar kita semangat dalam mengelola blog yang kita miliki. Agar pengunjung semakin betah dan kerasan, ada baiknya kita desain tampilan blog kita dengan menambahkan widget atau navigasi-navigasi penting untuk mendukung kebutuhan pembacanya. Salah satu di antaranya yaitu dengan memasang widget popular post. 

Pada umumnya, widget yang berfungsi untuk menampilkan daftar postingan populer di kalangan pembaca ini ditaruh di bagian sidebar dengan bentuk list. Nah, kali ini kita akan membuat sesuatu yang berbeda yakni membuat widget popular post bergambar bentuk grid dan memasangnya di halaman muka (homepage) layaknya widget featured post. Untuk jumlah postingan cukup 4 saja agar menyesuaikan layar PC atau Hp (responsive). Bisa saja diatur lebih namun anda mesti paham kode CSS untuk mengatur tampilannya lagi. 

Kurang lebih seperti gambar di atas tampilan widget popular post style gridnya. Jika anda berminat, silahkan simak langkah-langkah berikut ini untuk cara pemasangannya.

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

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

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

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

<style type='text/css'>

/* Grid Popular Post Keren*/

#popularpostgrid ul li:hover .item-title a{color:#07ACEC!important}

#popularpostgrid ul li .item-title a{font-size:18px;font-family:&#39;Oswald&#39;;line-height:normal;font-weight:bold;margin-top:15px;line-height:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:1px 1px grey;color:#fff!important}

#popularpostgrid ul{margin:0!important;padding:0!important}

#popularpostgrid ul li{width:23%;float:left;height:250px;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);border-radius:5px;padding:0px!important;margin-left:15px;margin-right:0px;margin-bottom:10px;list-style-type:none}

#popularpostgrid .item-thumbnail{margin:0}

#popularpostgrid img{width:100%;height:250px;border-radius:5px;display:block;position:relative}

#popularpostgrid .item-title{display:block;position:relative;text-align:left;margin-top:-60px;margin-left:10px;margin-right:10px;height:90px;}

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

#popularpostgrid ul li{width:47%;height:320px;margin-left:15px;}

#popularpostgrid img{height:320px}

#popularpostgrid .item-title{margin-left:15px;margin-right:15px} 

}

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

#popularpostgrid ul li{width:45%;margin-left:17px}}

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

#popularpostgrid ul li{width:45%;height:150px;margin-left:11px;}

#popularpostgrid img{height:150px;}

#popularpostgrid ul li .item-title a{font-size:13px;}

#popularpostgrid .item-title{margin-top:-45px;margin-left:5px;margin-right:5px}}

</style>

</b:if>

</b:if>

4. Selanjutnya cari kode <div id='wrapper'> atau kode <div id='content-wrapper'> lalu letakkan kode berikut ini di bawahnya. 

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

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

<b:section class='popularpostgrid' id='popularpostgrid' maxwidgets='1' showaddelement='yes'>

  <b:widget id='PopularPosts16' locked='false' title='' type='PopularPosts' version='1'>

    <b:widget-settings>

      <b:widget-setting name='numItemsToShow'>4</b:widget-setting>

      <b:widget-setting name='showThumbnails'>true</b:widget-setting>

      <b:widget-setting name='showSnippets'>false</b:widget-setting>

      <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>

    </b:widget-settings>

    <b:includable id='main'>

  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>

  <div class='widget-content popular-posts'>

    <ul>

      <b:loop values='data:posts' var='post'>

      <li>

        <b:if cond='!data:showThumbnails'>

          <b:if cond='!data:showSnippets'>

            <!-- (1) No snippet/thumbnail -->

            <a expr:href='data:post.href'><data:post.title/></a>

          <b:else/>

            <!-- (2) Show only snippets -->

            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div>

          </b:if>

        <b:else/>

          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->

          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>

            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>

              <div class='item-thumbnail'>

                <a expr:href='data:post.href' target='_blank'>

                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 450, &quot;300:200&quot;)                                  : data:post.thumbnail' var='image'>

                    <img alt='Popular Posts' border='0' expr:src='data:image'/>

                  </b:with>

                </a>

              </div>

            </b:if>

            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <b:if cond='data:showSnippets'>

              <div class='item-snippet'><data:post.snippet/></div>

            </b:if>

          </div>

          <div class='clear'/>

        </b:if>

      </li>

      </b:loop>

    </ul>

  </div>

</b:includable>

  </b:widget>

</b:section>

<div class='clear'/>

</b:if></b:if>

5. Simpan template anda kembali. 

Silahkan dilihat hasilnya. Anda juga bisa buka menu layout (tataletak) untuk menghapus judul widget (jika tidak perlu) atau mengubah pengaturan waktunya (most viewed) pada widget popular post yang sudah terpasang di sana. 

Demikianlah cara membuat widget popular post Grid Style Keren Responsive di Blog. Semoga bermanfaat.

 

Selengkapnya

Cara Membuat Kotak Pencarian (Search Box) Keren Simpel Sederhana di Blog

Blogging

Cara Membuat Kotak Pencarian (Search Box) Keren Simpel Sederhana di Blog

10 Juni 2021

Bagi para pengelola blog, kotak pencarian atau search box menjadi salah satu kelengkapan navigasi yang cukup penting bagi sebuah blog. Dengan adanya fitur ini, web atau blog pun akan semakin mudah untuk dijelajahi oleh para pembacanya. Para pengunjung dapat mempergunakan fitur ini untuk mencari artikel yang mereka kehendaki di dalam situs atau blog tersebut. 

Bagi pengguna platform blogspot, fitur kotak pencarian sebenarnya telah tersedia secara default. Untuk menampilkannya, kita tinggal mengaturnya dengan menambahkannya (add gadget) pada menu layout (tataletak). Hanya tampaknya, kebanyakan pengelola blog cenderung menggunakan kotak pencarian dari pihak luar, hasil modifikasi, atau bawaan dari template yang mereka beli/unduh. Mungkin tampilannya lebih keren sehingga lebih sedap dipandang. 

Nah, pada postingan kali ini saya ingin berbagi tutorial tentang cara membuat kotak pencarian (search box) yang sederhana tapi tampak keren dan elegan. Tampilannya juga responsive sehingga mobile friendly. Adapun tampilan kotak pencariannya akan seperti berikut ini:

Silahkan anda bisa meletakkan kotak pencarian tersebut misalnya di bagian sidebar, header, atau di tempat lainnya terserah anda. Usahakan mudah terlihat pengunjung agar mereka dapat menggunakannya untuk mencari informasi yang diinginkan dengan memasukkan keyword yang dibutuhkan. 

Membuat Kotak Pencarian Keren Sederhana

1. Buka akun blogger anda.

2. Pilih menu tema dan klik edit html. 

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

.searchbox{margin:1px 10px 15px 0;width:100%;}.searchbox form{border:1px solid #ddd;font-size:14px}.searchbox form input{display:block!important;margin:0;border:0;padding:0;outline:0;height:32px;line-height:32px;font-size:13px;border-radius:3px!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:32px!important;padding:0!important;background:#090;color:#fff;border:0!important;font-size:29px!important}.serchg:hover{background:#070}

4. Simpan template. 

5. Pilih menu layout (tataletak). 

6. Klik tambahkan gadget (add gadget) dan pilih html/javascript. 

4. Kosongkan kolom judul dan masukkan kode berikut ini ke dalamnya. 

<div class='searchbox'><form action='/search?q='><input class='serch' name='q' placeholder='Search here...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> <svg style="width:20px;height:20px" viewbox="0 0 24 24"> <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /> </path></svg> </button><span style='clear: both;display:block'/></span></form></div>

6. Klik simpan.

Silahkan dilihat hasilnya. Anda juga bisa ubah warna background ikon lup (kaca pembesar) nya pada kode yang saya tandai merah di atas. Demikianlah tutorial kali ini. Semoga bermanfaat.

Selengkapnya

Cara Membuat Efek Bergoyang Pada Gambar Postingan Blog Ketika Disentuh

Blogging

Cara Membuat Efek Bergoyang Pada Gambar Postingan Blog Ketika Disentuh

3 Juni 2021

Selamat datang kembali di Santos Blog. Mungkin anda sekalian pernah menjumpai di beberapa blog, ketika menyentuh gambar postingan, tiba-tiba saja gambar tersebut bergerak-gerak seakan geli oleh sentuhan mouse atau jari jemari tangan anda. Atau dengan istilah lain, gambar tersebut juga seakan tiba-tiba bergoyang mengikuti irama setelah anda mencoleknya. Nah, kali ini kita akan coba belajar membuat efek seperti itu (goyang) pada gambar postingan blog ketika gambar tersebut disentuh. 

Keberadaan gambar di dalam postingan memang cukup penting dalam mendukung kekuatan konten agar pembahasan semakin kaya dan mudah dipahami. Pada umumnya, pembaca juga akan jenuh ketika membaca sebuah postingan yang panjang menjalar, namun minim gambar atau bahkan tidak ada gambar ilustrasinya sama sekali. Selain bikin ngantuk, ketiadaan ilustrasi gambar juga bisa membuat pengunjung malas untuk membacanya. Oleh karenanya, maksimalkan setiap postingan anda dengan selalu menyertakan gambar di dalamnya. 

Memang keberadaan gambar bisa mempengaruhi kecepatan loading blog anda. Namun jika anda bisa mengelolanya dengan baik (termasuk dengan mengkompresnya agar file menjadi semakin kecil), bukan tidak mungkin pengunjung akan banyak berdatangan menuju blog anda karena gambar-gambar tersebut (baca: Cara menambahkan tag alt dan title pada gambar postingan). Dan agar lebih menarik lagi, tidak ada salahnya juga anda tambahkan efek bergoyang pada gambar tersebut biar pengunjung terhibur dan terkesima. 

Jangan khawatir, cara membuat efek goyang pada gambar postingan ini hanya menggunakan kode CSS sehingga tidak akan begitu mempengaruhi kecepatan loading blog anda. Jika berminat memasangnya, silahkan ikuti langkah-langkah berikut 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. 

.post-body img:hover {

animation: bergoyang 0.8s;

animation-iteration-count: infinite;

}

@keyframes bergoyang {

0% { transform: translate(1px, 1px) rotate(0deg); }

10% { transform: translate(-1px, -2px) rotate(-1deg); }

20% { transform: translate(-3px, 0px) rotate(1deg); }

30% { transform: translate(3px, 2px) rotate(0deg); }

40% { transform: translate(1px, -1px) rotate(1deg); }

50% { transform: translate(-1px, 2px) rotate(-1deg); }

60% { transform: translate(-3px, 1px) rotate(0deg); }

70% { transform: translate(3px, 1px) rotate(-1deg); }

80% { transform: translate(-1px, -1px) rotate(1deg); }

90% { transform: translate(1px, 2px) rotate(0deg); }

100% { transform: translate(1px, -2px) rotate(-1deg); }

4. Simpan kembali template anda. 

Silahkan anda bisa melihat hasilnya. Gambar-gambar di dalam postingan pun kini akan bergoyang ketika tersentuh oleh mouse (via PC/ laptop) atau jari jemari (via smartphone) pembacanya. 

Demikianlah pembahasan artikel kali ini tentang cara membuat efek bergoyang atau bergerak atau bergetar pada gambar postingan. Semoga bermanfaat.

Selengkapnya