syarhabil: script

syarhabil

Browse through our gallery of expertly-crafted themes to find the perfect one for your needs.


CONTACT FOLLOW
Popular Searches: Tentop, Sempaq, Londri Gigi
Home / script

Cara Memasang Widget Newsletter di Blogger

Cara Memasang Widget Newsletter di Blogger

Cara Memasang Widget Newsletter di Blogger

Cara Membuat Tool Daftar Kode Warna di Blog

Cara Membuat dan Memasang Tool Daftar Kode Warna Online di halaman Blog - jujur nih,entah mengapa setiap kali admin ingin merubah warna template atau mencoba coba untuk mengkreasikan warna kedalam blog ini,saya sering sekali membuka google untuk mengetauhi daftar warna html,untung untung kalau udah disediain langsung di Inspect elemen

bagaimana kalau tidak..?

....tentunya tidak semua dari kita,termasuk admin hafal semua daftar warna html buat blog,admin saja cuma hafal warna putih (#fff), hitam (#000) dan beberapa warna lain 

Bagaimana jika sobat ingin menggunakan warna biru gelap atau Kode Warna yang lainnya? sulit juga kan..

nah,oleh karena itu disini admin bakalan kasih tau untuk teman teman blogger bagaimana cara membuat sendiri kode warna atau color picker diblog,

Baca Juga : Cara Membuat kunjungan sendiri tidak terhitung di statistik Blogger

tujuannya agar kita gak perlu lagi mondar mandir ke blog yang ada tool ini,dari pada susah buat ngehafalin daftar semua warna,mending kita buat sendiri aja tool color picker di blog

emang apa sih keuntungannya? kan lebih enak liat di Google?

Keuntungan Tool daftar kode warna di blog

1.Tool punya sendiri

pasti bangga dong? punya alat daftar warna sendiri di blog,dari pada kamu pakai punya orang lain,toh sebaiknya kita pakai tool sendiri bukan? iya gak?

2.Mudah dicari

naahh..kalau yang ini udah pastinya kita gak perlu lagi jauh jauh cari daftar kode warna di blog orang lain,tinggal buka blog sendiri,trus cari deh kode warnanya,simpel kan?

3.Mudah digunakan

maksudnya apa? jadi gini..tool color picker ini udah dibuat agar bisa digunakan semudah mungkin,misalnya ketika kamu ingin memilih warna tertentu,kamu cukup mengklik warna tersebut untuk menyalin kode dari warna yang kamu pilih

jadi gak perlu lagi untuk menghafal kode tadi..

4.tergantung tujuan pemakaian

kalau yang bagian ini,keuntungannya tergantung kamu yang pakai,hehe ada yang tujuannya buat diri sendiri dan ada juga yang bikin tool ini agar bisa dipakai banyak orang (tool online misalnya)

nah kemudian bagaimana cara membuatnya?

Cara Membuat Tool daftar Kode Warna di Blog

  • Pertama,masuk dulu ke blogger masing masing
  • kemudian silahkan buka Halaman atau Page jika ingin digunakan untuk pribadi atau jika ingin memasang tool daftar warna ini di postingan juga boleh
  • setelah halaman/postingan terbuka,Buat dulu Judul Tool ini,misalnya Tool Kode Warna Online
  • kemudian,ubah mode menulis ke mode Html,caranya klik ikon pensil disebelah kiri atas
  • kemudian masukan semua kode dibawah ini kedalam halaman tadi
<div><b>Untuk memilih warna :</b> <i>klik warna yang di inginkan dan klik salin kode</i></div><div><br /></div><iframe frameborder="0" src="https://raw.githack.com/onbloging/kompi-html/master/color-palettes2.html" style="height: 575px; width: 100%;" title="Color Palette"></iframe>

  • setelah itu,Klik Publiskasikan untuk menyimpan Tool yang baru saja dibuat

nah sekarang,kamu pengen melihat demo tool ini kan? kira kira gimana hasilnya? untuk demonya,silahkan liat di menu blog ini,pilih Free web tools dan pilih Kode warna atau langsung aja klik tombol dibawah ini

Demo

nah gimana nih? tampilannya bagus bukan? bagi yang bertanya tanya,itu warnanya masih terbatas ya,?

jadi gini,sebenarnya udah banyak tool color picker yang admin coba,namun hasilnya tidak memuaskan,hehe

ada yang gak work,gak responsive disemua perangkat,dan ada juga yang tampilannya gak bagus

jadi menururt admin,tool kode warna ini lah yang paling bagus dari semua yang admin coba,tapi kalau misalnya kamu juga punya kode lain,bolehlah bagi bagi juga dengan admin,hehe 

kirim aja ke halaman Kontak,

Penting Buat Blogger : Cara buat link sumber otomatis saat artikel blog di copy paste 

Oke sekian tutorial membuat tool kode warna dari Alimumedia,silahkan dicoba dan semoga work ya..jika ada yang kurang paham,boleh tanya di kolom komentar

Always tying,praying and creative

Cara Membuat Tool Daftar Kode Warna Responsive,Pasti Berhasil di Blog

cara membuat animasi efek gambar bergetar saat disentuh cursor (image shake)

Cara membuat efek gambar bergetar saat disentuh cursor (image shake) - membuat gambar bergetar diblog saat di hover,bisa sobat lakukan untuk menambah tampilan halaman blog menjadi lebih menarik dan terlihat profesional

tapi jujur entah kenapa,masih banyak diluar sana yang belum membuat tutorial "cara membuat gambar menjadi bergetar atau bergoyang"

padahal sebetulnya sudah banyak blog blog terkenal yang membuat gambar mereka menjadi bergetar jika di sentuh kursor,contohnya aja seperti blognya mba Igniel.com

jika sobat sudah sering berkunjung di blognya igniel.com,tentunya sobat akan menemui sebuah gaya tarik tersendiri,yaitu ketika sobat mengarahkan cursor ke salah satu gambarnya mba igniel,maka gambar tersebut akan bergetar atau bergoyang

nah,efek animasi pada gambar itulah yang disebut efek goyang shake gambar atau image shake

Tapi sebelum lanjut membuat animasi efek gambar bergetar,apa sih keuntungan image shake ini?

Berikut Keuntungan membuat image shake di dalam blog

  • Tentunya akan menambah nilai daya tarik tersendiri pada blog sobat
  • membuat pengunjung akan betah berlama lama di blog
  • membuat ciri khas tersendiri dan berdampak blog sobat akan mudah di ingat pengunjung
  • blog terlihat lebih profesional jika menggunakan animasi gambar bergoyang
  • selain tampak profesional,blog juga akan terlihat keren dan unik,namun tidak akan menurunkan nilai SEO dan kecepatan loading blog
"Wah,keren dong kalau gitu?"

iya,karena selain membuat konten yang berkualitas,kita juga harus membuat pengunjung merasa nyaman dan betah.lagian,menambah efek gambar ini juga tidak memberatkan loading blog,karena yang dipakai hanya CSS,bukan Javascript

"Kok pengunjung bisa betah jika menggunakan animasi efek goyang shake gambar"

Jelas,wajar kan jika pengunjung akan betah jika blog terlihat unik? apalagi jika pengunjung tidak sengaja menyentuh dan mengarahkan cursor ke gambar,alhasil,pastinya mereka akan mencoba untuk menyentuhkan cursor ke gambar untuk kedua kalinya,atau berkali kali

setidaknya membuat pengunjung menjadi asyik sendiri pada postingan sobat

oke,kemudian bagaimana cara buat efek image shake bergetar ini? simak tutorial dibawah

cara membuat animasi efek gambar bergetar

untuk membuat animasi shake pada gambar pada blog,kita cukup menambahkan beberapa CSS dalam Html blog,berikut caranya :
  • Masuk ke Dashboard blogger
  • pilih menu Tema disebelah kiri,kemudian pilih edit Html
  • pada kolom Html,silahkan cari kode </head>
  • kemudian,salin semua kode Css dibawah untuk membuat animasi efek gambar bergetar dan letakkan tepat DIATAS kode </head> 
<style>
    /* animasi efek gambar bergetar by alimumedia */ 
    img:hover {animation: shake 0.5s;animation-iteration-count: infinite;}@keyframes shake {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); }} </style>
  • kemudian simpan atau save Html
Nah sudah deh cara membuat animasi efek bergetar di gambar,hanya cukup menambahkan CSS ringan ini,dijamin pengunjung bakalan nyaman dan betah berlama lama di blog, sobat

Tapi tunggu dulu,saya rasa sobat masih ragu membuat efek bergetar di gambar ini,mungkin beberapa FAQ dibawah ini bisa membantu apa yang sobat rasakan

Pertanyaan Umum

1.Apakah Kode untuk membuat animasi efek shake image akan membuat lambat loading Blog?

Tidak,tidak akan memberikan pengaruh buruk sedikitpun,membuat animasi efek gambar bergetar ini hanya menggunakan CSS,dan jika sobat lihat,kodenya juga sudah saya minify atau diperkecil,sehingga tidak akan membuat lambat loading blog

2.Jika sudah memasang efek image shake ini,bagaimana DEMO nya?

untuk demo,silahkan klik disini dan coba liat apa yang terjadi pada gambar disana? jika gambar jadi bergetar,maka seperti itulah demonya

3.Apakah efek image shake ini hanya akan membuat tampilan blog tidak menarik?

tentu saja tidak,seperti yang sudah dijelaskan di atas,bahkan sebaliknya,efek gambar bergoyang ini akan menambah keunikan blog sobat sendiri

4.Bagaimana efek gambar  ini akan berfungsi ?

efek shake akan berfungsi jika di sentuh cursor,sehingga apabila cursor mouse di arahkan pada gambar,ini akan membuat animasi efek bergetar pada gambar akan berkerja

5.Apakah gambar juga akan bergetar jika disentuh dengan jari di hp atau mobile?

Iya,gambar juga akan bergetar jika disentuh dengan jari,namun perlu diketahui bahwa efek bergetar akan hilang jika gambar tidak disentuh

6.Jika memang membuat efek shake membuat blog lebih menarik,apakah ada buktinya?

Ada,salah satu blog terkenal yang juga memakai animasi pada image shake adalah blognya mbak igniel,sobat bisa cek dan kunjungi langsung blog nya (https://www.igniel.com/)

7.apakah ada kode khusus yang dimasukkan ketika akan membuat artikel?

tidak ada,cukup memasukan kode diatas,tidak perlu menambahkan kode apa apa,cukup masukan gambar seperti biasa,simple kan?

8.terakhir..apakah kode membuat animasi efek gambar bergetar di blog boleh dishare dan dibagikan?

tentu,bahkan sangat disarankan untuk membagikan cara ini,namun ingat juga ya sob,jangan lupa untuk memberikan sumbernya juga,setidaknya sobat telah membantu berkembangnya blog ini

Oke,gimana sekarang?

saya rasa beberapa pertanyaan di atas sudah membantu keragu raguan sobat,percaya aja deh! CSS tidak akan membuat lambat blog sobat,apalagi juga sudah di perkecil

kalau masih belum yakin,gini aja,coba cek kecepatan blog ini di (https://developers.google.com/speed/pagespeed/insights/)

mungkin hasilnya akan berubah ubah,tapi barusan saya cek page speed nya paling rendah 96! sudah diatas rata rata

oke sob,sekian dulu tutorial cara membuat animasi efek gambar bergetar saat disentuh cursor (image shake),semoga bermanfaat dan berhasil,jika masih ada keraguan yang ingin ditanyakan,silahkan tanyakan di kolom komentar

always trying,praying and creative

cara membuat animasi efek gambar bergetar saat disentuh cursor (image shake)

Cara buat link sumber otomatis saat artikel blog di copy paste

Alimumedia - Hai Sob,sebelum lanjut membahas cara membuat link sumber otomatis saat Artikel Blog di copas,saya mau nanya dulu nih,pernah tidak menemukan artikel sobat di copy paste orang lain,tapi gak mencantumkan link sumber?

untung mereka mau menyertakan link sumber artikel yang di copas nya,kalau tidak bagaimana? sakit ya,iya lah.. udah capek capek bikin artikel,eh ternyata di copas tanpa menyertakan sumber lagi

Apalagi kalau ranking artikel hasil copy paste mereka lebih tinggi dari artikel asli,wahh..kelewatan sekali itu..

...tapi tenang sob,kali ini di postingan perdana alimumedia,saya bakalan kasih tau bagaimana cara membuat link sumber otomatis saat artikel di copy paste (copas),sebetulnya cara otomatis menempelkan link artikel sangat mudah,hanya menambahkan sedikit script dalam html blog sobat

namun dari beberapa template yang saya coba,tidak semuanya berhasil menampilkan sumber link ini,truss gimana...?

Solusinya adalah,sobat perlu mencoba beberapa script dibawah ini agar sumber link otomatis terpasang/muncul jika artikel sobat di copy paste sama para copaser 

#1.cara membuat link sumber otomatis saat Artikel Blog di copas


1.sobat masuk dulu ke dashbord blogger sobat

2.kemudian masuk ke menu Tema

3.Kalau sobat make dashbord blogger versi lama,sobat langsung pilih Edit html,tapi jika sobat menggunakan dashbord blogger versi terbaru,sobat cuma perlu klik titik tiga,dan pilih Edit Html

4.Selanjutnya Cari kode </body> , kode ini bisa ditemukan menggunakan ctrl +f, tapi kalau sobat lagi pakai Hp,sobat tinggal cari kode ini dipaling bawah html

5.kemudian sobat bisa pilih mau pakai script yang mana,fungsinya sama aja,sama sama membuat url otomatis saat di copas,namun terkadang ada beberapa template yang tidak berhasil menampilkan link sumber ini

Coba Salin salah satu Script dibawah,dan tempelkan di atas kode </body>

Script #1 

<script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Link Sumber :"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://yourjavascript.com/03166194114/sumberlink-carazain.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script><script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Link Sumber :"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://yourjavascript.com/03166194114/sumberlink-carazain.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); }</script>

Script #2 
<script type=’text/javascript’>
function addLink() {
var body_element = document.getElementsByTagName(&#39;body&#39;)[0];
var selection;
selection = window.getSelection();
var pagelink = &quot;<br/><br/>@Copyright www.erapemuda.com<br/>Sumber:<a href=’&quot;+document.location.href+&quot;’>&quot;+document.location.href+&quot;</a><br/>&quot;; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement(&#39;div&#39;);
newdiv.style.position=&#39;absolute&#39;;
newdiv.style.left=&#39;-99999px&#39;;
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>

Script #3 
<script type='text/javascript'>
//<![CDATA[
// Copy Text
function nocopas(){var e=window.getSelection();pagelink="<br/><br/>Read more: "+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas);
//]]>
</script>

Script #4 
<script type='text/javascript'>
//<![CDATA[
!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|s)no-attribution(s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="<br><br>&copy; "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);
//]]>
</script>

#2 Cara membuat Link sumber saat di copas

jika link sumber tidak berhasil dibuat saat di copas,sobat bisa menggunakan cara dibawah ini,cara kedua ini berbeda dengan cara pertama,sobat cukup masukan script dibawah ini tepat diatas kode </head>


Salin Script dibawah dan tempel diatas </head> 

<script type='text/javascript'> function addLink() { var body_element = document.getElementsByTagName('body')[0]; var selection; selection = window.getSelection(); var pagelink = "<br/><br/>Sumber : <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>"; // change this if you want var copytext = selection + pagelink; var newdiv = document.createElement('div'); newdiv.style.position='absolute'; newdiv.style.left='-99999px'; body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window.setTimeout(function() { body_element.removeChild(newdiv); },0); }document.oncopy = addLink; </script>

Penting! — Silahkan di Ubah bagian yang ditandai dengan kata yang diinginkan,misal : read more,Baca selengkapnya,dll

Nah dengan Script Script di atas,sobat telah berhasil membuat link sumber otomatis saat artikel blog di copas,dapat dipastikan.. disaat para copaser meng-copy paste blog sobat,url atau link artikel akan otomatis muncul dibawah bagian artikel yang di copas


Jadi setelah membuat link otomatis ini,sobat bisa sedikit tenang disaat orang lain mengcopy paste blog sobat,mengapa saya katakan sedikit tenang? sebab link otomatis ini bisa saja di hapus,tapi itu terserah mereka saja,setidaknya sobat telah berusaha membuat link otomatis di saat artikel kena copas


always trying,praying and creative

Cara buat link sumber otomatis saat artikel blog di copy paste

Langganan: Postingan (Atom)
Halo, Ada yang bisa dibantu? Silahkan chat dengan tim kami
Admin kami akan membalas dalam beberapa menit
CS & Admin Customer Service