Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts
Saturday, November 19, 2016

3 Cara Mematikan Fungsi Copas di Blog ( Anti-Copas, Anti Ctrl+P, Anti Ctrl+U )

Cara Mematikan Fungsi Copas di Blog
Cara Mematikan Fungsi Copas di Blog

TipsIM.com - Cara mematikan fungsi copas di blog. Sekarang ini, mungkin tidak sekarang tapi sudah dari dulu. Ya, sudah dari dulu memang artikel di web atau blog rawan akan copy paste atau copas. Ya, memang hal merupakan keuntungan bagi copaser, namun cara ini sangat merugikan pihak pemilik dan penulis artikel postingan. 

Nah, Jika anda tidak ingin seenaknya ada yang mengcopy paste  postingan blog anda, ada cara yang bisa anda lakukan untuk mencegah perlakuan licik copaser. Anda bisa melindungi artikel anda sendiri yang telah anda posting di blog atau web yaitu dengan menggunakan kode script. Dengan kode inilah mereka yang ingin mengcopas artikel postingan anda dicekal atau tidak bisa.

Mungkin cara untuk mematikan klik kanan atau disable right click atau memproteksikan postingan blog dari copy paste sangat banyak. Dan anda bisa menggunakan semua tutorial atau cara itu dengan teliti. Karena jika tidak teliti, mungkin saja, blog atau web anda malah terjadi eror karena kode script yang salah. Berikut ini ada cara yang lebih mudah, ringkas, dan tidak bertele-tele untuk melindungi konten isi artikel postingan anda dari para pengcopas. Kecuali mereka yang mau mencantumkan sumbernya. 

1. Kode Anti Copas (Mematikan klik kanan, Ctrl+P, Ctrl+U, serta perlindungan lengkap)

Untuk memasang kode anti-copas ini, anda tidak perlu takut ribet. Sebenarnya cukup mudah bila anda cermat dalam memahaminya. Berikut langkah-langkahnya:

1. Kalik Template diblog anda lalu klik Edit HTML.

2.Silahkan anda cari kode <body> dengan menekan ctrl+f. Namun biasanya kode ini ada sambunganya, misal <body bgcolor="red" width="100px" bla..la,,la>. Daripada anda tidak ketemu, anda bisa mencarinya dengan mengetik <body saja.

3. Kemudian ganti kode <body> tersebut dengan kode dibawah ini:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false'>

Catatan:
Jika kode <body> terdapat tambahankode lain seperti yang ada diatas tadi, maka anda tinggal menambahkan kode berikut ini tepat setelah body, jadi tidak perlu mengganti atau menghapus.

oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false'

Nah, setelah ditambahkan maka jadinya akan seperti dibawah ini:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false' bgcolor="red" width="100px" bla..la,,la>

4. Silahkan simpan hasilnya.

2. Mematikan Klik Kanan di Postingan Tertentu

Mungkin anda ingin agar tidak semua kata atau kalimat dalam artikel tidak anti-copas. Biasanya ini dilakukan pada blogger yang berisi tentang tutorial script. Ya, daripada anda penasaran, silahkan simak langkah-langkahnya berikut ini:

1. Klik HTML pada edit postingan anda.

2. Kemudian letakkan kode script dibawah ini tepat di awal atau di akhir postingan. (Ingat! HTML dalam postingan sebelah Compose. Bukan di letakkan di dalam Compose).

<script language="javascript" type="text/javascript">

/* Anti klik kanan TipsIM*/

var tenth='';function ninth() {

if (document.all) {(tenth);return false;}}

function twelfth(e) {

if (document.layers||(document.getElementById&&!document.all)) {

if (e.which==2||e.which==3) {(tenth);return false;}}}

if (document.layers {document.captureEvents(Event.MOUSEDOWN); document.onmousedown=twelfth;}

else{document.onmouseup=twelfth; document.oncontextmenu=ninth;}

document.oncontextmenu=new Function('return false')
</script>

3. Setelah itu anda tinggal mempubliskan artikel yang akan anda posting.

3. Anti-Copas, Disable Klik Kanan, dan Disable Select Tex Seluruh Postingan

Untuk cara yang poin tiga ini adalah untuk mematikan fungsi klik kanan dan anti copas pada seluruh isi konten blog atau web anda. Jadi, siapapun yang ingin mengkopas isi conten blog anda tidak akan bisa. Nah, berikut ini langkah-langkahnya:

1. Buka Dashboard blog anda, lalu klik menu layout.

2. Klik Add Gadget pada sidebar widget.

3. Pilih HTML/JavaScript.

4. Lalu masukkan kode script berikut ini pada kolom HTML/JavaScript tersebut.

<!-- START disable copy paste -->
<!-- http://www.TipsIM.com -->
<script src='demo-to-prevent-copy-paste-on-blogger_files/googleapis.js'></script>
<script type='text/javascript'> if(typeof document.onselectstart!="undefined" ) {document.onselectstart=new Function ("return false" ); } else{document.onmousedown=new Function ("return false" );document.onmouseup=new Function ("return false"); } </script>
<!-- End disable copy paste -->

5. Setelah anda benar memasukkan kode scriptnya, lalu anda klik simpan.

Efek Samping Memasang Kode Anti Copas

Mungkin memasang kode anti copas ini memiliki keuntungan tersendiri bagi pemasangnya. Yaitu artikel atau konten postingan pasti tidak akan bisa di copy paste. Dan karyanya bisa terjaga tanpa ada pindah hak cipta secara ilegal. 

Namun disamping keuntungan tersebut, anda juga harus memikirkan kerugian atau efek samping yang nantinya akan anda terima ketika anda memasng kode anti-copas tersebut. Kemungkinan, blog atau web anda akan minim pengunjung bila dipasang anti copas. Ya, ini disebabkan karena terkadang biasanya para pengunjung ingin mengcopy paste di word atau di media lainnya agar mudah dibaca suatu saat ketika sedang offline. Nah, jika dipasang anti copas, otomastis pengunjung tidak bisa mengcopy paste isi conten anda.

Jika pengunjung anda menurun, otomasti trafic kunjungan, pagerank, dan pageviews dalam blog atau web anda akan ikut menurun. Karena mereka para pengunjung akan menganggap kalau pemilik blog atau web itu termasuk orang pelit. Meski maksud anda baik, tidak jarang juga ada orang yang berpikir seperti itu.

Anda juga perlu ingat lagi. Setiap pengawasan pasti ada titik lemahnya. Begitu pula dengan kode anti copas ini. Ya, meskipun dipasang kode anti copas, sebenarnya masih bisa di jebol atau masih bisa dicopas. Tapi biasanya hal ini hanya bisa dilakukan oleh orang tertentu saja yang sudah mahir dalam kode-kode script atau pemrograman seperti hacker. Jadi, bila hal ini terjadi tentu akan sia-sia kode yang anda pasang.

Memastikan fungsi copas ini juga bisa merugikan pemilik blog sendiri atau blogger sendiri. Karena disaat akan membuat link internal tidak mudah melakukan "copy paste link address". Tapi harus buka link dan copas link address bar.

Oke, demikian tutorial kali ini tentang Cara mematikan fungsi copas atau memasang kode copas di blog. Selamat mencoba dan semoga berhasil. Ingat, ada keuntungan juga ada kerugian. Semoga bermanfaat bagi anda. Terimakasih.

Cara Membuat Daftar Isi Otomatis Berdasarkan Label di Blog

Cara Membuat Daftar Isi Otomatis Berdasarkan Label di Blog
Cara Membuat Daftar Isi Otomatis Berdasarkan Label di Blog

TipsIM.com - Cara membuat daftar isi otomatis berdasarkan label. Daftar isi adalah suatu daftar dimana didalamnya ditampikan semua judul artikel yang yang ada didalam blog tersebut. Tujuan dibuatnya daftar isi adalah untuk mempermudahkan pengunjung dalam mencari artikel yang dicarinya. Itu sebabnya banyak web atau blog profesional yang memasang daftar isi.

Daftar isi memiliki dua macam, ada yang secara manual dan ada juga yang otomatis. Sangat disarankan bagi anda untuk memilih daftar isi otomatis agar tidak bingun mengupdatenya. Penampilan daftar isi setiap web atau blog berbeda-beda. Biasanya disesuaikan dengan tema dan warna blog. Dan dalam pemasangan daftar isi pun perlu sesuai kategori atau label, agar pengunjung tidak bingung mencarinya.
Untuk membuat daftar isi sesuai kategori atau label tidaklah sulit. Anda bisa membuatnya sendiri dengan mengikuti langkah-langkah dibawah ini.

Cara membuat daftar isi otomatis berdasarkan label

1. Buka blogger anda
2. Buatlah sebuah halaman statis baru atau laman bar, klik laman > laman baru
Cara Membuat Daftar Isi Otomatis Berdasarkan Label di Blog
3. Isikan judul "Daftar Isi" atau "Sitemap"
4. Lalu pada pilihan Compose dan HTML, silahkan anda pilih HTML

Cara Membuat Daftar Isi Otomatis Berdasarkan Label di Blog


5. Kemudian masukkan kode script berikut ini didalam HTML

<div id="tabbed-toc">
<span class="loading">Loading, Please wait...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.tipsim.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: true,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 9999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="https://sites.google.com/site/daffaditya11/sitemapkeren.js" type="text/javascript"></script>

Keterangan:
  • Silahkan ganti www.tipsim.com dengan alamat blog anda sob.
Jika sudah dimasukkan, lalu klik publikasikan.

5. Setelah itu, anda klik template

Cara Membuat Daftar Isi Otomatis Berdasarkan Label di Blog
6. Lalu klik Edit HTML.

Cara Membuat Daftar Isi Otomatis Berdasarkan Label di Blog

7. Cari kode  ]]></b:skin>  dengan klik dalam kolom HTML lalu menekan tombol ctrl+F pada keyboard anda.
Cara Membuat Daftar Isi Otomatis Berdasarkan Label di Blog


8. Masukkan kode script berikut ini didalam edit HTML di atas kode ]]></b:skin>
  

/*Sitemap
----------------------------------------------- */

#tabbed-toc {
width:99%;
margin:0 auto;
background-color:#0888b6;
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
color:#fff
}

#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:#FFF
}

#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
margin:0;
padding:0;
list-style:none
}

#tabbed-toc .toc-tabs {
width:20%;
float:left
}

#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}

#tabbed-toc .toc-tabs li a:hover {
background-color:#004F7D;
color:#FFF
}

#tabbed-toc .toc-tabs li a.active-tab {
background-color:#0072B3;
color:#FFF;
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0
/* cursor:text;
  */
}

#tabbed-toc .toc-content,#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #0072B3;
box-sizing:border-box
}

#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
box-shadow:0 0 7px rgba(0,0,0,.7)
}

#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif
}

#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px;
color:#333;
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}

#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right
}

#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden
}

#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa
}

#tabbed-toc .panel li:nth-child(even) {
background-color:#f1f1f1;
font-size:10px;
color:#fff
}

#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a {
background-color:#0072B3;
color:#FFF;
outline:none
}

#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {
background-color:#222
}

@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888
}

#tabbed-toc .toc-tabs,#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block
}

#tabbed-toc .toc-tabs li {
display:inline;
float:left
}

#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab {
background-color:#111;
color:#ccc;
box-shadow:2px 0 7px rgba(0,0,0,.4)
}

#tabbed-toc .toc-tabs li a.active-tab {
background-color:#DF1010;
color:#fff
}

#tabbed-toc .toc-content {
border:none
}

#tabbed-toc .divider-layer,#tabbed-toc .panel li time {
display:none
}

Setelah selesai semua lalu klik save

Sekarang lihatlah sob, daftar isi otomatis berdasarkan label sudah selesai anda buat. Semoga tutorial cara membuat daftar isi otomatis berdasarkan label ini bisa bermanfaat bagi anda sob. Terimakasih sudah berkunjung dan membaca.
Thursday, November 17, 2016

Cara Membuat Widget Recent Post Sederhana

Cara Membuat Widget Recent Post Sederhana
Cara Membuat Widget Recent Post Sederhana

TipsIM.com - Cara membuat widget recent post sederhana. Widget recent post adalah suatu widget yang menampilkan beberapa postingan artikel terbaru atau artikel yang baru saja di posting. Hal ini memudahkan pengunjung untuk mengetahui dimana bisa menemukan artikel terbaru.

Recent post memiliki dua macam, recent post thumbnail yang menggunakan gambar dan recent post no thumbnail yang tidak menggunakan gambar atau biasa disebut dengan recent post sederhana atau simpel. Nah, kali ini, saya akan mencoba berbagi tutorial bagaimana cara membuat recent post tanpa tumbnail atau recent post sederhana agar terkesan lebih simpel dan enak dilihat.

Cara membuatnya sebenarnya tidak sulit. Tanpa basa-basi lagi, simak langkah-langkahnya dibawah ini.

Cara membuat recent post

1. Buka blogger anda
2. klik tata letak
Widget Recent Post Sederhana
Widget Recent Post Sederhana

3. Lalu klik add gadget atau tambah gadget
Widget Recent Post Sederhana
Widget Recent Post Sederhana

4. Kemudian pilih HTML/JavaScript
Widget Recent Post Sederhana
Widget Recent Post Sederhana

5. Setelah itu, lalu anda masukkan kode script berikut ini didalam HTML/JavaScript tadi

<div id="hlrpsb">
<script style="text/javascript" src="https://googledrive.com/host/0B4jA2kVEcSlvWENnOW9LZF9kbzg"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://pintukom.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<noscript>JavaScript is not enabled</noscript>
<style type=text/css>
#hlrpsb a {color: #333333; font-size: 13px;}
#rpdr, #rpdr a {color:#333333;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Keterangan:
  • Tulisan yang berwarna biru adalah jumlah postingan yang akan ditampilkan, bisa anda ganti sesuka hati
  • Tulisan yang berwarna merah adalah URL blog. Silahkan ganti dengan URL blog anda

6. Bila sudah, simpan dan lihat hasilnya. Mudah kan?

Sekian tutorial tentang cara membuat widget recent post sederhana. Teruslah mencoba dan jangan takut gagal. Semoga tutorial ini bermanfaat untuk anda. Terimakasih telah berkunjung dan membaca sob.

Cara Mengganti Template Blog Default dengan Template yang Lebih Keren

Cara Mengganti Template Blog
Cara Mengganti Template Blog

TipsIM.com - Cara mengganti template blog default dengan template yang lebih keren. Template adalah suatu file script yang memuat rangkaian kode-kode HTML, CSS, JavaScript, dan kode programing lainnya yang menjadi dasar dalam pembentukan tampilan suatu blog. File template ini biasanya berbentuk file script yaitu dengan ekstensi .xml. Bisanya para blogger pemula ketika melihat isinya yang berupa kode-kode script akan merasa kebinguan. Tapi tenang, anda tidak perlu bingug, anda hanya memasangnya saja tanpa membuat.

Sebenarnya untuk mengganti template blogger atau blogspot sangatlah mudah, yaitu dengan menggunakan template bawaan blogger. Tapi, biasanya banyak orang yang kurang tertarik dengan template default tersebut, karena mungkin terlalu simple dan kurang nyaman untuk dipandang. Nah, sebab itu saya kali ini akan membagikan tutorial cara mengganti template blog default dengan template custom hasil download yang lebih keren.

Nah, sebelum anda mengikuti tutorial ini, ada beberapa hal yang harus anda persiapkan. Yang pertama yaitu tentunya blog atau web anda, kemudian file templatenya. Untuk file templatenya anda bisa mendownload di website yang menyediakan template blogspot.

Anda bisa mendownload templatenya di Arlinadzgn.com, sugeng.id, btemplates.com, dan lain sebagainya. Silahkan anda download templatenya sesuka anda. Biasanya file hasil download berekstensi .zip. Kemudian di ekstrak dan ambilah file yang berekstensi .xml.

Baca juga: Cara Membuat Postingan yang Benar SEO Friendly

Cara Mengganti Template Blog

1. Masuklah ke blogger dan pilih blog yang akan anda ganti templatenya.
Cara Mengganti Template Blog

2. Setelah muncul tampilan dashboard, lalu anda klik template dan kemudian klik cadangkan /pulihkan
Cara Mengganti Template Blog

3. Klik browser untuk mencari template hasil downloadan anda. Kemudian cari dimana anda menyimpan file template hasil download. (ekstrak fil berekstensi .zip, lalu pilih file yang berekstensi .xml untuk di upload) Kemudian klik open.

Cara Mengganti Template Blog

4. Setalah anda memilih file .xml, kemudian anda klik unggah.

Cara Mengganti Template Blog

5. Lihat tampilan kotak kecil "Lihat tampilan langsung di blog" jika berhasil, kotak kecil tersebut akan tampil template sesuai yang anda unggah atau upload. Jika ingin melihat blog anda, anda tinggal mengeklik Lihat Blog.

Taraaa.. Blog anda kini telah berganti template. Keren bukan? Bagaimana, mudah kan? 

Untuk tutorial versi videonya, anda bisa lihat di bawah ini:

Silahkan Suscribe channel youtube kami untuk berlangganan video tutorial terbaru dan terupdate



Baca Juga:  Cara Mengganti URL Channel Youtube

Demikian tutorial dari saya mengenai cara mengganti template blog. Semoga artikel tutorial ini bisa bermanfaat bagi anda. Dan terimakasih telah berkunjung.

Cara Mudah Memasang Widget Breaking News di Blog

Cara Mudah Memasang Widget Breaking News di Blog
Cara Mudah Memasang Widget Breaking News di Blog

TipsIM.com - Cara memasang widget breaking news. Kali ini TipsIM.com akan berbagi tutorial mengenai bagaimana cara memasang widget breaking news di blog. Mungkin di blog atau website sebelah sudah banyak yang memasang widget breaking news. Namun breaking news yang kali ini berbeda dengan yang lainnya dan lebih stylish.
Widget breaking news itu sendiri adalah suatu widget yang menampilkan beberapa judul berita atau artikel terbaru yang telah anda posting atau publish. Nah, bagaimana tampilannya? Apakah widget ini berefek memperberat loading blog atau web? Anda tidak perlu khawatir, widget breaking news ini dibuat dengan tampilan sederhana dan ringan. Jadi tidak perlu takut blog anda akan lemot atau lambat ketika diakses.

Bersumber dari Arlina Design. Widget ini memiliki tampilan thumbnail judul artikel yang disertai gambar dengan efek slide yang lebih halus serta kecepatan yang telah disesuaikan. Jadi, anda tidak perlu ribet mengatur kembali kecepatan yang ada ada widget breaking news ini. Daripada penasaran, silahkan anda ikuti langkah-langkahnya dibawah ini.

Cara Memasang Widget Breaking News

1. Silahkan anda buka blogger anda dan masuk pada tampilan dashboard
2. Pilih Template lalu klik Edit HTML
3. Silahkan anda cari kode ]]></b:skin> atau </style> dengan menekan ctrl+f dalam kolom HTML tersebut.
4. Kemudian anda masukan kode berikut ini tepat diatas kode ]]></b:skin> atau </style> 

/* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #0888b6}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

Keterangan: Anda bisa merubah warna serta ukurannya sesuai keinginan anda
  • Kode yang berwarna merah adalah warna background
  • Kode berwarna biru adalah warna border pinggir kanan 
Bila anda ingin mencari kode warna HTML, anda bisa buka disini Kode Warna HTML Lengkap

5. Setelah itu, anda cari kode </body>, dan letakkan kode script berikut ini tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by http://www.arlinadzgn.com
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

6. Jika sudah, silahkan anda pasang markup dibawah ini bebas dimanapun ingin anda pasang. Kode ini adalah kode markup letak widget breaking news. Misal: Jika anda letakkan di bawah menu, maka posisinya akan dibawah menu, jika di atas judul maka akan terletak di atas judul. Letakkan diantara <body> dan </body>
 
<div class='ticker-wrap' data-domain='TipsIM.com'>
<div id='ticker'>
</div>
</div>


Keterangan: Silahkan anda ganti kode yang di block biru dengan alamat blog atau web anda.

7. Setelah dirasa selesai semua, silahkan anda klik simpan atau save. Jika anda kurang mantab, anda bisa klik pertinjauan terlebih dahulu untuk melihat hasil sementara. Kalau sudah sesuai baru anda klik simpan.


Demikian tutorial tentang cara mudah memasang widget breaking news di blog. Selamat mencoba dan semoga berhasil. Jangan menyerah sebelum anda bisa. Karena blogger sejati tak akan pernah mengenal kata lelah. Semoga bermanfaat dan terimakasih.
Wednesday, May 18, 2016

Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog

Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog
Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog

 
Cara membuat widget profil ala mas cholis di blog. Sore sob. Maaf lama gak posting. Biasa anak kuliah tugasnya numpuk. Hehe. Di postingan artikel kali ini saya akan mencoba membahas bagaimana cara membuat widget profil (Admin blog) ala mas cholis.

Alasan pertama saya menulis artikel cara membuat widget ini adalah karena ada yang bertanya kepada saya lewat emal.

"Bagaimana sih gan cara membuat widget about me (admin blog) seperti di blog agan?"

Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog


Nah, alasan yang kedua adalah untuk berbagi. Jadi, bukan hanya saya atau yang bertanya saja yang tahu caranya. Agar semua pengguna internet yang membaca artikel ini bisa tahu bagaimana cara membuat wiget profil tersebut.

Sebelum berlanjut ke cara pembuatannya, saya sedikit mau menjelaskan tentang widget ini sob. Sebenarnya saya membuat profil tersebut secara manual menggunakan corel draw. Jadi, gambar atau foto tersebut murni penggabungannya dari corel draw, lalu kemudian ditempelkan menjadi widget.

Daripada penasaran, langsung saja simak langkah-langkahnya berikut ini sob:

1. Buat foto dan backgroundnya terlebih dahulu

Di langkah pertama ini, silahkan anda pilih foto anda yang paling tampan sob. Biar seluruh jagat internet mengenal ketampanan sobat. hehe.

#1. Contoh foto saya seperti ini sob
Cara Membuat Widget Profil Keren Ala Mas Cholis

Sobat bisa pilih foto sesuka hati yang sekiranya cocok.

#2. Kemudian pilih background yang anda inginkan sob. Untuk pilihan backgroundnya anda bisa download disini.

#3. Kemudian buka corelDRAW dan gabungkan antara foto anda dengan background. Dan hasil penggabungan saya seperti gambar dibawah ini sob.

Cara Membuat Widget Profil Keren Ala Mas Cholis di Blog

 
#4. Setelah selesai digabung, silahkan anda simpan dengan format .jpg ataupun .png terserah sobat.

2. Pasangkan gabungan foto yang telah dibuat di sidebar

Setelah anda menggabungkan antara foto anda dengan background menggunakan corelDRAW. Sekarang saatnya anda memasanya di widget sidebar blog sobat. 

#1. Silahkan buka blog anda sob.

#2. Pilih tata letak > tambahkan gadget > HTML/JavaScript.

#3. Kemudian copy pastekan kode dibawah ini kedalam HTML/JavaScript.

<div class='widget-mc' style="border:1px solid #ddd">
<div height="auto" width="165" class='head-bg' style='background-image: url()'>
<div class='my-pic'><img title='mascholis' alt='mascholis' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQsJ2PHrGG2hKW_tDLtNsERDlV2nqYHPboeeSQBpzPCHVMiUNlaVhJIt20soFomyA8N1XvhWB30CFfLy7l1YbXxwcHCIQEFS_XdJO7pzWXCnEkPxnbdG8yjut4b7kb9S2XqDGmmB2Rysk/s1600/akupshoppp.png' width='165' data-align='center' height='auto' /></div>
<div class='my-data'>
<span class='my-name' style='font-weight:bold;font-size:15px'>
<a href='https://plus.google.com/u/0/+KholiselHafidz7' itemprop='url' title='+kholiselHafidz7' target='blank'>
<span itemprop='name'>mascholis</span></a>
</span></div></div>
<div class='my-words'>
<div data-margin="5" class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/+KholiselHafidz7" data-rel="author"></div>
</div></div>

Keterangan:
  • Kode yang berwarna BIRU adalah URL gambar. Silahkan ganti dengan URL gambar anda sob.
  • Kode yang berwarna Hijau adalah nama yang akan ditampilkan dibawah foto. Silahkan ganti dengan nama anda sob.
  • Kode yang berwarna MERAH adalah ID GOOGLE+. Silahkan anda isikan dengan ID Google+ sobat.
  • Untuk ukuran maupun posisi bisa anda atur sendiri sesuai keinginan anda sob.
#4. Setelah selesai lalu klik simpan. Dan kemudian lihat hasilnya sob.

Okee, jadi sob. Bagaimana, mudah kan? Semoga tutorial cara membuat widget profil keren di blog ini bisa bermanfaat. Jika ada yang ingin ditanyakan silahkan tulis di komentar. Terimakasih telah membaca sob. Selamat mencoba.
Tuesday, May 3, 2016

Cara Membuat Color Picker Responsive di Halaman Statis Blog

Cara membuat color picker responsive di halaman statis blog. Siang sob, kali ini saya akan berbagi tutorial bagaimana cara membuat color picker responsive. Jika anda sering mengunjungi blog milik mbak Arlina, anda pasti akan menjumpai web tools color picker ini sob. Nah, anda yang penasaran bagaimana cara membuatnya, jangan khawatir sob, saya akan membagikan tutorialnya.

Cara Membuat Color Picker Responsive
Cara Membuat Color Picker Responsive


Baca juga Cara Memasang Widget Recent Post Slider di Blog.

Sebelum membahas cara membuat color picker responsive, anda harus tahu dan paham terlebih dahulu mengenai color picker. Color picker ini adalah sebuah tool untuk mengetahui berbagai jenis warna lebih cepat dan lebih mudah. Sangat cocok bagi anda yang sering memodifikasi blog, terutama memodifikasi warna. Color picker ini memiliki tampilan yang cantik dan nyaman untuk dipandang. Jadi, sangat cocok dipasang di blog manapun. Bagaimana, anda tertarik sob?

Sebentar sob, saya belum selesai menjelaskan. Hehe.. Tool color picker ini sudah responsive sob, bisa menyesuaikan besar kecilnya layar. Dan code color picker ini hanya menggunakan kode HTML dan CSS. Jadi tidak akan mempengaruhi kecepatan loading blog. Nah, mungkin hanya itu sedikit penjelasan dari saya sob, silahkan simak langkah-langkahnya dibawah ini.

Memasang Color Picker Responsive

1. Silahkan buka dashboard blog sobat.
2. Buatlah postingan baru atau sobat bisa meletakkan di halaman stati langsung (Laman).
3. Setelah terbuka lembar halaman, silahkan anda copas kode dibawah ini, lalu letakkan didalam lembar kosong tersebut.

<div id="colorpicker">
    <ul class="MC">
      <li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
      </li>
      <li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
      </li>
      <li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
      </li>
      <li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
      </li>
      <li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
      </li>
      <li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
      </li>
      <li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
      </li>
      <li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
      </li>
      <li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
      </li>
      <li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
      </li>
      <li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
      </li>
      <li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
      </li>
      <li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
      </li>
      <li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
      </li>
      <li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
      </li>
      <li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
      </li>
      <li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
      </li>
      <li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
      </li>
      <li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
      </li>
      <li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
      </li>
      <li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
      </li>
      <li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
      </li>
      <li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
      </li>
      <li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
      </li>
      <li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
      </li>
      <li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
      </li>
      <li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
      </li>
      <li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
      </li>
      <li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
      </li>
      <li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
      </li>
      <li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
      </li>
      <li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
      </li>
      <li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
      </li>
      <li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
      </li>
      <li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
      </li>
      <li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
      </li>
      <li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
      </li>
      <li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
      </li>
      <li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
      </li>
      <li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
      </li>
      <li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
      </li>
      <li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
      </li>
      <li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
      </li>
      <li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
      </li>
      <li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
      </li>
      <li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
      </li>
      <li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
      </li>
      <li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
      </li>
      <li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
      </li>
      <li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
      </li>
      <li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
      </li>
      <li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
      </li>
      <li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
      </li>
      <li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
      </li>
      <li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
      </li>
      <li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
      </li>
      <li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
      </li>
      <li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
      </li>
      <li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
      </li>
      <li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
      </li>
      <li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
      </li>
      <li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
      </li>
      <li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
      </li>
      <li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
      </li>
      <li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
      </li>
      <li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
      </li>
      <li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
      </li>
      <li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
      </li>
      <li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
      </li>
      <li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
      </li>
      <li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
      </li>
      <li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
      </li>
      <li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
      </li>
      <li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
      </li>
      <li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
      </li>
      <li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
      </li>
      <li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
      </li>
      <li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
      </li>
      <li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
      </li>
      <li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
      </li>
    </ul>
</div>
<style scoped="" type="text/css">

/* COLOR PICKER */

#colorpicker ul.MC{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}

#colorpicker ul.MC li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}

#colorpicker ul.MC li:hover{z-index:4}

#colorpicker ul.MC li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}

#colorpicker ul.MC li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}

#colorpicker ul.MC li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}

#colorpicker ul.MC li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}

#colorpicker ul.MC li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}

#colorpicker ul.MC li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}

@media screen and (max-width:800px){#colorpicker ul.MC li{width:33.3%;line-height:normal}}

@media screen and (max-width:640px){#colorpicker ul.MC li{width:50%}}

@media screen and (max-width:480px){#colorpicker ul.MC li{width:100%}}
</style>

4. Setelah dipasang di halaman statis blog anda, silahkan anda klik Publikasikan. Lihat hasilnya.
5. Taraaa.. Blog anda sekarang telah terpasang web tools color picker responsive.

Untuk melihat demonya silahkan klik dibawah ini.

Oke.. Mudah kan sob? Demikian tutorial saya mengenai Cara Membuat Color Picker Responsive. Semoga bermanfaat bagi anda sob. Terimakasih.