mas template

Floating Social Bookmark dengan Efek Easing

Jika Anda perhatikan dua template responsive yang saya bagikan kemarin, terdapat sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu). 

floating social bookmark


Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
  1. Login ke Blogger
  2. Masuk ke Template >> Edit HTML (centang expand widget templates)
  3. Letakkan kode CSS di bawah ini diatas ]]></b:skin> :
    .social-buttons {
        position: fixed;
        top: 130px;
        width: 45px;
        z-index: 9999;
    }
    .button-left {
        left: 0;
    }
    .button-right {
        right: 0;
    }
    .social-buttons #twitter-btn .social-icon,
    .social-buttons #facebook-btn .social-icon,
    .social-buttons #google-btn .social-icon,
    .social-buttons #rss-btn .social-icon,
    .social-buttons #pinterest-btn .social-icon,
    .social-buttons #youtube-btn .social-icon {
        background-color: #33353B;
        background-image: url(http://1.bp.blogspot.com/-zt3csy2DqGo/U661h1iTakI/AAAAAAAAAFc/v5tUjZIJDHs/s1600/mas-icons.png);
    }
    .button-left #facebook-btn span {
        background-position: right 10px;
    }
    .button-left #twitter-btn span {
        background-position: right -35px;
    }
    .button-left #google-btn span {
        background-position: right -127px;
    }
    .button-left #rss-btn span {
        background-position: right -80px;
    }
    .button-left #pinterest-btn span {
        background-position: 11px -177px;
    }
    .button-left #youtube-btn span {
        background-position: 11px -223px;
    }
    .button-right #facebook-btn span {
        background-position: 12px 10px;
    }
    .button-right #twitter-btn span {
        background-position: 11px -35px;
    }
    .button-right #google-btn span {
        background-position: 10px -127px;
    }
    .button-right #rss-btn span {
        background-position: 11px -80px;
    }
    .button-right #pinterest-btn span {
        background-position: 11px -177px;
    }
    .button-right #youtube-btn span {
        background-position: 11px -223px;
    }
    .social-buttons #facebook-btn:hover .social-icon {
        background-color: #3B5998;
    }
    .social-buttons #twitter-btn:hover .social-icon {
        background-color: #62BDB2;
    }
    .social-buttons #google-btn:hover .social-icon {
        background-color: #DB4A39;
    }
    .social-buttons #rss-btn:hover .social-icon {
        background-color: #FF8B0F;
    }
    .social-buttons #pinterest-btn:hover .social-icon {
        background-color: #D43638;
    }
    .social-buttons #youtube-btn:hover .social-icon {
        background-color: #C4302B;
    }
    .social-buttons a:hover .social-text {
        display: block;
    }
    .button-left .social-icon {
        -moz-transition: background-color 0.4s ease-in 0s;
        -webkit-transition: background-color 0.4s ease-in 0s;
        background-repeat: no-repeat;
        display: block;
        float: left;
        height: 43px;
        margin-bottom: 2px;
        width: 43px;
    }
    .button-left .social-text {
        display: none;
        float: right;
        font-size: 1em;
        font-weight: bold;
        margin: 11px 40px 11px 0px;
        white-space: nowrap;
    }
    .button-right .social-icon {
        -moz-transition: background-color 0.4s ease-in 0s;
        -webkit-transition: background-color 0.4s ease-in 0s;
        background-repeat: no-repeat;
        display: block;
        float: right;
        height: 43px;
        margin-bottom: 2px;
        width: 43px;
    }
    .button-right .social-text {
        display: none;
        float: left;
        font-size: 80%;
        font-weight: bold;
        margin: 11px 0 11px 40px;
        white-space: nowrap;
    }
    .social-buttons .social-text {
        color: #FFFFFF;
    }
  4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
    <script>
        $(window).load(function(){
            $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
                $(this).stop();
                $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
            });
            $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
                $(this).stop();
                $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
            });
        });
    </script>
    Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
  5. Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
    <div class='social-buttons button-right hidden-phone hidden-tablet'>
    <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
    <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
    <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
    <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
    <span class='social-text'>Follow via Pinterest</span></span></a>
    <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
    <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
    </div>
    Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
  6. Terakhir, Save Templates
Nah itu tadi tutorial membuat floating social bookmark dengan efek easing menjawab pertanyaaan Muhammad Farhan. Jika masih ada yang kurang jelas kebangeten.. eh silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Apapun bentuk komentar Anda akan saya hargai, but please do not spamming.

Sekian dan semoga ada manfaatnya
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

381 comments:

  1. horee saya pertama y Mas.. hehe Dah mahgriban blum ini y?

    ReplyDelete
    Replies
    1. ehh Mas lupa nanya, kl slider di Pakdhe Johny itu di terapin di blog lain bs g y Mas?

      Delete
    2. Bisa mbak, cuma berat lho konsekuensinya
      Kalo masih ingin pasang, tinggalkan email disini nanti saya kasih tau caranya

      Delete
    3. mau juga donk mas tutorialnya ,, bwt nambah2 ilmu ..hehheheh

      donieabdullah@gmail.com

      Delete
    4. Mas kolis MENEPATI JANJI KU
      Sip sip sip.
      MAkasih mas ^_^

      Delete
    5. Oh ya mas...
      Kenapa ya.. Kalau di pasang widget gitu yang nempel di samping atau pun yang lain (dengan edit HTML)
      slider saya kenapa nggak muncul ya...?
      Mohon mas di jawab karena peristiwa ini Berkali kali :(

      Delete
    6. Perhatikan langkah nomer 4 diatas, jquery warna biru dan jquery di bawahnya, itu sudah ada, nggak usah dipasang lagi

      Delete
    7. maaf mas.. iy iy saya mau mas.. tolong kirim kesini aj y mas.. maisarrahazzahra@gmail.com .Terimakasih mas kholis..

      Delete
    8. maaf mas.. iy iy saya mau mas.. tolong kirim kesini aj y mas.. maisarrahazzahra@gmail.com .Terimakasih mas kholis..

      maaf mas dua kali, takut g tahu nanti mas kolis. makasih y mas

      Delete
    9. maaf mas pendatang baru....salam kenal
      saya juga mau mas.. taufiqmedia@yahoo.com
      gmn mas.. boleh minta juga gk?

      Delete
    10. Oke sabar ya mungkin baru besok saya kirim

      Delete
    11. baik mas... saya siap menunggu... hari ini saya cek blm ada.. :)

      Delete
    12. maaf mas saya ganti nama di akun, dari "berani sedekah" ke "Pak Andre".... :)

      Delete
    13. bagus efeknya , like this (y)

      [ Gabung yuk ke Direktori Backlink Gratis Berkualitas No.1 Indonesia ]

      Delete
    14. Kok sweatangel sih nulisnya... sweetangel kali

      sweatangel = malaikat berkeringat

      Delete
    15. Terimakasih banyak mas.... jazakallah... sukses slalu mas..

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Dibilangin jangan spaming masih nekat juga

      Delete
    2. Hajar Mas...
      Hahahaha...
      Bagus floating social bookmark nya.
      Pengen pasang tapi takut malah tambah berat blog nya :D

      Delete
    3. hahaha.....
      rasain tu....
      hmmm social bookmark@ keren,, cocok ne mas buat
      indodetik.com

      Delete
  3. Wkwkwkwkwk advertiser ane marah-marah ane pakai beginiaan. katanya nutupin iklan :v tapi tq deh sharenya, izin pakai untuk blog ane yang lain..

    BTW ane lagi nungguin template repondsive tapi kayak blog ini, bertemakan warna putih :v

    ReplyDelete
    Replies
    1. Itu yg kemarin2 kan udah ada yang 2 kolom mas

      Delete
  4. banyak yg minta iah mas? wakakakakak... makanya sekalian kasih tutornya..hahahahah

    ReplyDelete
    Replies
    1. mas ketika saya baca isi blog demonya di situ ada sumber ..My Backup Words itu blog maskolis yg di wordspress iah..., kenapa ga di seriusin mas.. ajib2 isi postingannya ampe serius bacanya.

      Delete
    2. Blog itu kalo lagi serius mikir kondisi sosial di negeri ini, nunggu debat dulu sama orang baru nulis lagi.

      Lha kalo blog ini buat suka-suka aja...

      Delete
    3. jadi banyak nih..heheh
      mas maaf saya kan pake Nb adik saya ukuran layarnya 10" pas lihat template jhony asal responsive ko berantakan iah mas?
      ini gambarnya mas..
      https://lh5.googleusercontent.com/-qLi7DEtgEu0/UUmzuG-b4SI/AAAAAAAAEFg/pT27tZkFVII/s640/ini%2520%25282%2529.jpg

      soalnya saya kaget mas di pc saya soalnya ngga...heheh mungkin yg di maksud melorot ini x iah mas yg di kontak komentar yg pernah saya baca..

      Delete
    4. Coba mas kalo template pakdhe johny gitu juga nggak?
      Soalnya sama media query yg saya pasang

      Delete
    5. engga mas..rapi yang template pakdhe johny..

      Delete
    6. Kalo ini mas http://johnydemosite.blogspot.com/

      Delete
    7. yang ini juga bagus mas...gada masalah. mungkin cuman jhony asal responsive aja x mas..

      Delete
    8. Coba sekarang di test lagi yg asal responsive mas

      Delete
    9. untuk header saya kasih gambarnya mas..
      https://lh4.googleusercontent.com/-GimFS9VQBds/UUnA701nrNI/AAAAAAAAEFw/YZOiw8GlRb0/s800/Image%25207.jpg

      untuk sidebar masih turun ke bawah mas..

      Delete
    10. Duhh... kenapa ya, itu pake apa sih mas liatnya?
      Besok aja saya perbaiki, ini masih byk kerjaan numpuk di meja

      Delete
    11. nah itu mas di pc saya ukuran layar 19" baik2 aja mas.. karena lg ada maslah pake nb adik saya ..pas liat demo gitu mas.heheh, mungkin ukuran layar nya x mas yg 10"..
      kalau kata mas andhy terlalu sempit..wakakak

      Delete
    12. sekedar saran nih mas. coba mas tambahin @media only screen and (max-width:640px), sisanya ubek2 sendiri ya mas.. barangkali bisa rapi tampilannya.

      Delete
  5. ijin copy aja mas...! sy masukan perpustakaan aja, soal'e blog sy udah terlalu berat.

    sekarang lagi mikirin header yg tumpuk jadi 3, dan rencananya mau tak bawa ke mak erot biar diurut supaya jadi 1.

    ReplyDelete
    Replies
    1. Aduh kenapa ya, coba liat URL blognya mas?

      Delete
    2. ini mas... http://tecsimo.blogspot.com

      maaf mas... sy ngerepotin terus...!

      Delete
    3. Coba kode css headernya copy dari blog ini mas

      Delete
    4. ok! mas akan sy coba dulu...!

      Delete
    5. udah mak nyus.... mas.....!!

      tinggal mikirin merubah tampilannya biar ngak seperti blog demonya.

      Delete
  6. yg unik dan baru sy liat itu yg ada share fb dan twiter pd image...., kapan2 di share ya mas cara buatx :)

    ReplyDelete
    Replies
    1. Nanti saya coba buat tutorialnya mas
      Wah kemana aja nih amas Naufal baru muncul, lagi ujian sekolah ya?

      Delete
    2. iya nih.. sok banget aku.. hha.. tapi ane juga asal makassar.. hhe
      mas yang menu accordionnya nggak bisa gabung dengan johny pakdhe.. sya dah coba mas jadi sya nggak make tuh..

      Delete
  7. bagus... ijin dipraktekin mas...

    ReplyDelete
  8. Mantap mas tak praktekin langsung di blog ane . hahahah

    http://anwaribnu-z.blogspot.com/

    ReplyDelete
    Replies
    1. wah kang anwar blognya tidak ditemukan__ saya cari gak ada

      Delete
    2. betul ngak ada ..salah ketik kali...

      Delete
    3. Waduuh ,maaf mas2 salah ..ini yg bener

      http://masih-adapaper.blogspot.com/

      silahkan mampir ke gubug saya . hahaha

      Delete
  9. wah nembah nuwun mas e
    sebentar saya coba dulu mas
    http://www.kumpulanterkini.com

    ReplyDelete
  10. Pasang, jangan-pasang, jangan...takut makin berat !

    ReplyDelete
  11. met pagi maskolis maaf kalau pertanyaan saya agak keluar dari jalur saya sudah dua bulan ini berusaha mendalami template johny palelu peang dan udah berusaha untuk tidak koment melainkan membaca semua koment kali kali aja ada yang kasusnya sama dan lumayan ada yang sebagian sama dari mulai membuat post merubah harga yang tadinya cuma 00 skrng dah normal sampai penerimaan invoce mail dan udah ok smua gak ada masalah yang sekarang belum bisa atau terpecahkan adalah
    1.cara menganti tulisan Drop menu, Drop Menu 1, Drop Menu 2
    2.cara mengatur postingan perasaan udah berurutan sesuai dengan petunjuk diatas tapi koq hasilnya acak2 an (sy menghabiskan waktu tiga minggu hanya untuk belajar memposting sesuai pentunjuk maskolis)
    3.dan masih banyak kekurangan tolong dilihat ya mas http://www.shoping55.blogspot.com/
    4.halaman baru tentang terimakasih
    saya juga sudah mengundang mas jadi admin caranya saya ngikutin yg koment diatas mudah2an bener..hihihi
    udah ah mas banyak banget permintaannya maklum dah saya tahan selama 2 bulan untuk gak nanya.....mudah2an maskolis bisa jawab ...kalau engak ya harussssssss.....

    ReplyDelete
    Replies
    1. Lha kemarin udah invite email saya kan mbak, sekarang masuk lagi ke permission, klik email saya, rubah dari author ke admin
      Nanti saya perbaiki

      Untuk menu, saya kasih contoh cari kode berikut di Edit HTML :
      <li><a href='#'>Menu 1</a></li>

      Ganti "menu 1" dengan menu yg mau ditampilkan, misalnya berita, olahraga dll. Kemudian ganti juga "#" dengan alamat URL alamat yang dituju. Demikian juga seterusnya yg di bawah diganti semua

      Delete
    2. nah itulah kelebihan sy mas...gak tahu lagi mesti digimanain hehehe..dan skrg dah sy adminkan...makasih sebelumnya ya mas dan tolong kasih tahu kesalahan saya via email aja ya .

      Delete
  12. selamat pagi mas kolis. saya pelanggan setia artikel mas kolis. template nya bagus2 dn cocok untuk perkembngn beljar saya. saya mempelajari setiap artikel mas kolis dan di aplikasikan. saya ingin bertnya satu hal nih mas. apakah javascript yang doble menyebabkan loading blog nya lamban?

    ReplyDelete
    Replies
    1. Makasih apresiasinya mas
      javascript kalo jenis atau kodenya sama nggak bisa jalan kalo dipasang dua2nya. Intinya terlalu byk javascript akan memberatkan loading blog, itu kan third party yg fungsinya hanya untuk membuat blog lebih menarik, sebenernya gak dipasang juga gak apa2, tapi blognya jadi polos, kaku dan kurang menarik bagi sebagian orang

      Delete
  13. selamat pagi lagi mas, mau tnya nih, maskolis punya fan page facebook gk nih?? say cari gak da mas__

    ReplyDelete
    Replies
    1. Gak begitu suka facebook saya mas, kalo twitter saya aktif terus

      Delete
  14. Wah kayak nya kehabisan stok nich.....kok yang keluar kelas bantam yunior...

    ReplyDelete
    Replies
    1. Yee... ini kan cuma respon spontan karena ada yg menta tutorialnya.

      Delete
    2. ciri seorang guru yang baik..salut buat calon mantu

      Delete
    3. Hahahaha ada yang lgi cari calon mantu haahaha ... =))

      Delete
    4. wakakak... :D maskolis udah nikah kayaknya... kalau belom mah dia mau pajang photonya..hehehe

      Delete
    5. Somprettt... masih imut gini masa dibilang udah merit, cari aja di google kata kunci "maskolis kompasiana" trus klik image ada muka saya yg asli

      Delete
    6. Benar benar masih imut apa lagi kalau gak pake kaca mata ...

      Delete
  15. wowwwwww,,, mantap mas,, ijin pake y,,,, trims mas,, hehhehe

    ReplyDelete
  16. mas kolis tanya.. kalo misalkan witged social bookmark yang bisa naik turun diatas diganti dengan popular post atau yang lainya bisa ga za?
    terimakasih sebelumnya.

    ReplyDelete
    Replies
    1. Lha itu belum saya coba mbak, jd utk saat ini saya nggak bisa

      Delete
  17. bagus gan artikelnya izin.. izin baca ya gan .. jangan lupa mampir di blog ane http://vengenzblog.blogspot.com/ ane tunggu follback nya sama komentarnya yaa :)

    ReplyDelete
  18. cara mengubah bahasa faktur email dari template Anda ke Bahasa Inggris? silahkan Bantuan ..

    how to change email invoice language of your template to English?? please Help..

    ReplyDelete
    Replies
    1. Ok I will make it in English, can you provide me your email?
      I'll send it to you as soon as possible

      Delete
    2. Here my email :- gmohit02@gmail.com

      Thanks a lot...

      Delete
  19. alo mas saya sudah cobak di blog saya yang baru www.indoblogspot.net
    tapi kok tidak bisa sesuai dengan DEMO ya mas?
    mohon pencerahan dong. sekalian dicek di blog saya ya
    matur thanks you mas

    ReplyDelete
    Replies
    1. Itu bentrok dengan kode link nudging yg dipasang

      Delete
    2. owh pantesan, berarti harus hapus link nudging atau ada cara lain ya mas?

      Delete
    3. Link nudgingnya hapus aja mas, di blog ini hanya saya pake buat demo kok. Kalo bukan buat demo udah saya hapus dari dulu, bikin berat

      Delete
    4. sudah saya hapus kode nudgingnya mas, tapi masih blm seperti DEMOnya.
      kode
      http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
      http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

      dipakek semua apa salah satunya dihapus?

      Delete
    5. Itu dipake semua, untuk jquery yg pertama di template mas hermawan sudah terpasang apa belum? Kalo udah ada nggak usah dipasang lagi.

      Terlalu byk kode yg ditambahkan jadi saya bingung kode mana yg bentrok, mending docopt satu persatu dulu widgetnya yg pake javascript, nanti tau kode mana yg bikin bentrok

      Delete
    6. hahaha sampai pusing mas gak ketemu juga. biarin aja wes saya pindah letak posisinya aja.
      makasih supportnya mas

      Delete
  20. mas maaf keluar jalur nih commentnya.

    saya kan ngerombak abis blog saya..trus..saya pake apa ya namanya..lupa..yg kayak jhony ajaib..ko ga bisa muncul gambar nya iah mas...padahal gada yg ketinggal kodenya..
    gambar saya upload sendiri ga copy url..
    soalnya say comot sana sini mas..heheh siapa tau maskolis tau ..heheh skalian kasih saran...ini ujungnya yg ga enak..hahahah

    ReplyDelete
    Replies
    1. Coba bikin post baru mas, masih nggak mau muncul juga nggak thumbnailnya?

      Saran saya pasti subyektif nggak apa2 ne? Jgn dipaksakan pake slider, kalo mau sederhana, sekalian bikin yg simpel mas, jadi nggak membebani loading blog. Kurangi fitur yg double function, statistik blog taro aja di footer, itu kan ditaro di sidebar kiri, akan kebaca lebih dulu ketimbanag artikelnya.

      Delete
  21. mas kok di template saya dibawah tab popular ga bisa diisi widget baru? http://www.inilahmisteri.blogspot.com itu pake template yang ada di mastemplate.

    ReplyDelete
  22. Mas aku minta tolong untuk perbaiki lagi donk javascript nya...soalnya blogku juga kena banned mas.aku udah coba ganti dengan script yg baru tpi tetep aja gak bisa mas...aku blum sempet buat google code sndri,jadi pas mau save code dari mas gak terbaca sama google mas...mohon pertolongannya mas.ini blogku www.makinbanyaktau.blogspot.com sama www.remasarrasyid.blogspot.com
    matur nuhun nggeh..!!!

    ReplyDelete
    Replies
    1. Download ulang aja templatenya mas, udah saya perbaiki semua

      Delete
  23. mas setelah dipasang malah slider corousel di blog saya ga bisa jalan mohon bantuannya soalnya saya tertarik sama floating social ini.....ok inilahmisteri.blogspot.com

    ReplyDelete
    Replies
    1. Perhatikan langkah nomer 4 diatas mas, coba baca dgn teliti

      Delete
  24. izin praktek mas di blog ficturewapsiteme.blogspot.com/

    ReplyDelete
  25. Mau nanya gan cara menghapus permalink di template cargam di blog sya haekalfiqri.blogspot.com gimana gan

    ReplyDelete
    Replies
    1. Kok permalink malah dihapus, maksudnya gimana sih mas?

      Delete
    2. coba mas buka ini http://haekalfiqri.blogspot.com/2013/02/manfaat-game-bagi-kesehatan.html mas lihat permalink subcribes bersamaan ama related artikel cara ngehapusnya gimana

      Delete
    3. Karena kredit link saya diganti, maaf saya gak bisa jawab

      Delete
  26. mas bisa minta car apasang slide yang di template pakdhe johny? sebelumnya terima kasih. ini email saya adi2121983@gmail.com

    ReplyDelete
  27. mas... gimana kabarnya? udah lama q ngak masuk sini ternyata udah banyak yang baru dan bagus2.

    mas q mau tanyak dan maaf karena keluar jalur, q mau ganti slide johny black store sama slide foto punyak'e johny genit, kode slide black store yang harus dihapus apa aja?

    q udah coba ganti tapi tampilannya malah ancur....!, suami q ngk mau bantu ganti slidenya mas...! malahan dia bilang "SELAMAT BERJUANG"

    ReplyDelete
    Replies
    1. kabar baik mbak

      Coba perhatikana kode2 utk membuat slide di template johny blackstore : http://www.maskolis.com/2012/08/membuat-slider-image-otomatis-joss.html

      Nah hapus dulu semua kode yg mirip di tutorial itu. Kemudian baru pasang camera slideshownya

      Delete
  28. Hmmm ternyata efek jquery easing bisa dipakai untuk apa aja ya mas...tidak hanya slide show jadi keren tombol bookmarknya...

    ReplyDelete
    Replies
    1. Nah sekarang yg jadi pertanyaannya, apabila kita sudah punya slider dengan efek ini, bisa ga kita buat tombol bookmark sepert ini juga...? Atau mungkin malah jadi bentrok?

      Delete
    2. Tinggal digabung javascriptnya om

      Delete
  29. kalo floating sperti itu cocoknya buat template ap ya ?

    ReplyDelete
    Replies
    1. Template wallpaper, toko online pokoknya yg pake gambar2 deh

      Delete
  30. Mantap (y)...
    (kristianporung.blogspot.com)

    ReplyDelete
  31. Kira kira mengganggu aktivitas blog walking ga yach..

    ReplyDelete
  32. mirip punya blogger, tapi ada penambahan efek :D

    ReplyDelete
  33. Selamat siang maskolis...
    maaf Maaf saya OOT..saya memakai template ''Johny kena baned'' yang mau saya tanyakan
    1.Gimana cara ganti warna backround di menu Drop Down [warna merah ingin saya ganti]
    2.Lalu gimana cara ganti warna backround di bawah slider[lupa namanya]
    [warna merah ingin saya ganti]
    3.Dan bagaimana cara ganti warna bakcround latar belakang template yang asli nya "PUTIH" di ganti warna hijau garis garis...laludi bagi 2,,,Saya ingi menggati latar belakang template seperti situs ini http://sport.detik.com/sepakbola?st70
    Nah kira kira kode apa saja yang perlu saya ganti Mas?
    ini blog saya mas http://nusantara-putra.blogspot.com

    Mohon di jawab Mas kolis....saya cinta dengan karya karya Maskolis
    sebelum dan sesudah saya uucapka terimakasih

    ReplyDelete
    Replies
    1. Cari semua kode CSS background pada tiap fitur, tinggal ganti aja warnanya

      Delete
  34. mau tanya mas, kan saya lagi belajar buat template, maskolis bikin template pake apa ya? pake software (dreamer, photoshop, dll) atau cara manual pake kode (wordpad), mohon bantuanya mas?

    ReplyDelete
    Replies
    1. Pake notepad ++
      Photoshop untuk modifikasi gambar aja

      Delete
    2. mas maaf ya tanya terus, kan blog saya yang www.tuliskan.com pakai johny see book sekali, tapi kan terus saya pasangin komentar facebook, kok gak muncul ya mas?

      Delete
    3. Coba ganti kode ini di Edit HTML :
      &lt;!--</body>--&gt;&lt;/body&gt;

      Jadi </body>

      Delete
    4. Nah itu tuh yang bikin template maskolis loadingnya cepet mas Farhan... Menurut saya daripada ganti kode tersebut mending jangan pasang komen facebook, kan di blogger juga udah ada fasilitas komen, nambah berat juga...

      Delete
    5. Betul..sekali ....widget ini pernah saya pasang dulu tapi sekarang sudah saya buang gak ada manfaatnya....

      Delete
    6. wah makasih ya mas mahfid mayanto dan kompi ajaib atas saranya, iya nih mas lagi pikir-pikir juga, tapi kalo saya sih kayanya mau jadi part time blogger aja, tidak jadi proffesional blogger, gimana kalau dengan akang-akang ini? :D

      Delete
  35. it's hover effect which is pop-out effect, that's not working. plz help at vhemant03@gmail.com

    ReplyDelete
  36. dipasang ditempatku ko ga muncul ya pak

    http://pawiet.blogspot.com/

    ada apa gerangan ?.

    ReplyDelete
    Replies
    1. Perhatikan langkah nomer 4 diatas, template yg dipake mas Pawiet udah ada jquery libraries pertama adan kedua
      Jadi tinggal manambahkan javascriptnaya aja

      Delete
  37. Maskolis, kalo menambahkan slider dan mengganti link di Headling News pada template Jhony Storage Drak Blue gmana ?

    ReplyDelete
  38. mas kolis yang tehormat...
    saya mau request ya...
    minta tolong buatkan popular post kayak yang ada di naruchigo.com
    udah nanya sama bung google gak dapat-dapat...
    trima kasih

    ReplyDelete
  39. terima kasih infonya mas...keren sangat sosial bookmarkingnya blog wordpressnya juga keren saya sangat suka :)

    ReplyDelete
    Replies
    1. Mas Zul ini yg punya ketemplate ya?

      Delete
    2. oh ya mas website dharlatemplate(dot)blogspot(dot)c0m punya maskolis juga ya?

      Delete
    3. Bukannnnnnnn... blog saya cuma tiga tuh di footer, plus 91 blog demo template

      Delete
    4. wah mas jadi ingat sama postingan dahulu..maskolis mau buat template blogspot sampe 100 kalau sudah ampe sigitu mau buat template buat wordpress?? berarti tinggal 9 template lagi dunk?? wualahh.. harus belajar wordpress donk saya..hihihih

      Delete
    5. Baca ini sampe ke bawah ya, dijamin ngakak :
      http://www.maskolis.com/2013/03/2-simple-template-blogger-responsive.html?showComment=1363947468211#c1216239906725031375

      Delete
    6. hahahah...namanya malaikat berkeringat?? wakakakakakk
      dia suka x ma maskolis..wakakakak
      trus pas saya buka blognya ko gada postingan iah?? garuk2 kepala..

      Delete
    7. saya pikir punya maskolis..isi dan templatenya mirip..
      @panj:apakabar mas,?moga baik semua ya..

      Delete
    8. tu di atas juga ada mas, malaikat berkeringat :D
      habis nyangkul kali malaikat nya :D wekekekkee
      Peace..

      Delete
  40. Maskolis, kalo menambahkan slider dan mengganti link di Headling News pada template Jhony Storage Drak Blue gmana ?

    Kirim ke sini e-mail arifbudi1997@gmail.com ya mas :)
    Terima kash

    ReplyDelete
  41. Mantab bener floating social bookmark nya mas. Bergaya ala dynamic view, tapi efek nya itu loh yang bikin maknyus! :)

    ReplyDelete
  42. mas tolong dibantu,
    Saya kan pake template buatan mas yang Johny Ganteng Banget
    http://www.mastemplate.com/2012/08/johny-ganteng-banget.html.
    Nah, saya pengen judulnya diganti sma gambar tapi, header nya gk bisa di edit soalnya nimbrung sma favicon. Nih mas SS nya
    http://3.bp.blogspot.com/-XSB2WPQkne0/UUxvH1FMQgI/AAAAAAAABUs/pbgZIEEHNGo/s1600/Header.png
    Tolong dijawab mas, soalnya ane suka template buatan mas yang satu ini.

    ReplyDelete
    Replies
    1. Lewatnya jangan tata letak. Nih saya pandu ya.. ingat jgn lewat tata letak lho ya

      Masuk ke template >> pilih customise >> lihat sebelah kiri atas, pilih layout

      Nah tu dari situ Edit headernya

      Delete
    2. akhirnya jdi juga, mkasih mas udah bantu. :)

      Delete
  43. please send the email invoice template on gmohit02@gmail.com

    ReplyDelete
    Replies
    1. I'm not good in English
      I will send it to you if I have finish my translation, please be patient bro. About 2 or 3 days

      Delete
  44. keren mas..

    coba ah Di http://aan-shared.blogspot.com

    ReplyDelete
  45. tutorialnya panjang banget..tapi mudah dipahami, apalagi setelah melihat demonya...luarbiasa :-)

    ReplyDelete
  46. mas kolis.....! google analytic sama histats itu yg akuratan yg mana? dan kalau ada yg lebih akurat dari itu apa?

    tadi pagi sy dapat email yg intinya mau pasang iklan di tecsimo dan yg membuat saya bingung katanya suka dengan blog sy yang masih baru tapi visitor rata2 diatas 500/day dan page view rata2 diatas 700/day, padahal sy cek di analytic dan histats visitor dan page view blog saya ngak nyampek segitu (ini orang salah kirim email apa salah blog?)

    ReplyDelete
    Replies
    1. Yg paling akurat ya google analytics.

      Udah terima aja, bisa buat jajan anak-anak mas.

      Delete
    2. sy ngk berani mas... takut ngecewain orangnya, soal'e orang itu mau pasang iklan langsung 6 bln.

      kalau buat jajan anak dan istri udah ada dari blog satunya yang ngak keurus mas....!, dan alhamdulillah sampai sekarang dollar jalan terus walaupun ngak banyak.

      Delete
  47. mas maaf nih mau nanya lagi, kalau cara atasi recent posts yang error di template Johny Ganteng Banget gmna mas ?? :)

    ReplyDelete
    Replies
    1. Kalau menambahkan recent post keluar tulisan gini mas 'Mohon maaf, sepertinya gadget ini rusak.

      Gadget ini bermasalah, dan tidak dapat digunakan hingga diperbaiki'

      Delete
  48. mas,,, mv nanyanya beda ama topiknya,, hehe,,, soalnya saya koment dipostingan terkait gx bisa,, gnia mas,, saya kn gunain template johny palelu peang,,, setelah saya coba pemesanan produk,, kq gx bisa ke halaman terima kasih y mas

    ReplyDelete
    Replies
    1. Udah diganti bealum mas, URL blog yg disini :
      simpleCart.urlWebsite = 'http://johny-palelupeang.blogspot.com/';

      Bikin dulu halaman terima kasih, kemudian URL blog diatas ganti

      Delete
    2. sudah mas,, tp kq tetep aja gx bisa y mas,,, ini blognya mas http://kaintrosoonline.blogspot.com/

      Delete
    3. ech sudah mas,, hehehehe,,, ternyata ada yang doble,, makanya tadi ngarahnya kq gx bisa kehalaman itu,, mksh y mas,,, nanti xlw ada keluhan lg,,, mhon wejangannya y mas,, hehhehe,, masih newbi ,,,

      Delete
  49. Kode pertamanya panjang amat mas, bisa disingkat ga yah pake google code.

    ReplyDelete
  50. mas, untuk yang widget product kategori tertentu di template johny palelupeang bisa ditambah gx mas?.....

    ReplyDelete
    Replies
    1. ini url blog saya mas kaintrosoonline.blogspot.com

      Delete
  51. mantap neee.
    mas kalo qt pasang untuk template johny kena bannet
    kira2 cocok g' mas? http://www.indodetik.com/

    ReplyDelete
  52. Mantul-mantul gitu ya hahaha.... aku coba praktekin deh, kalo OK ya di pasang aja :)

    ReplyDelete
  53. mas kolis, mau nanya tapi OOT yah...
    yg johny wusss ituh bisa engga kalo sebagian postingan dijadikan deskripsi blog. misal posting judulnya A, nanti deskripsi saat di link di facebook yg kelihatan sebagian isi postingan A tsb.
    Bisa ndak...????
    soalnya tiap saya LIKE postingan blog saya (appsandro-id.blogspot.com) di facebook yg kelihatan cuman link aja.
    Bagaimana settingnya...???

    ReplyDelete
  54. Done, udah saya pasang di blog Lintas Line
    Kunjungin yaaa mas http://lintasline.blogspot.com

    ReplyDelete
  55. met malam mas kolis salam kenal mas dari tetangga sebelah hehehe. trmksih mas tutornya sangat membantu sekali. oh'y kpan2 main di tempat kami ntar kami bikinin kopi hehehehhe..?

    ReplyDelete
  56. mas sekarang efek easingnya sudah tidak berfungsi? mungkin bisa diupload lagi mas javascriptnya yang baru di googlecode?

    ReplyDelete
  57. weleh telat ki mampir di maskolis.com,, hehehe.. sebelum liat post ini memang saya sempet nyoba pasang mas,, tapi ngga berhasil ,, hahahaha..(bego' banget ya),, lha ini mumpung bisa buka blogger ta coba dulu ya mas kolis yang agak ngganteng,, hehehe

    ReplyDelete
  58. mantap nih tutorialnya
    oiya mas kolis, blog ane kok ga bisa didaftarin di feedburner ya? ane pake template johny wuss. kira2 ada kesalahan dimana ya? mohon pencerahannya

    ReplyDelete
  59. sudah saya pasang di johny classicsite :) kerrrreeeeeen.
    terima kasih mas kolis.

    http://yusronkrista.blogspot.com/

    ReplyDelete
  60. Mas, punya saya kok nggak bisa memanjang dan memendek ya? -_-

    ReplyDelete
  61. Sukses mas.. berhasil.. tararengkiu mas..

    ReplyDelete
  62. Hi there, is this possible to include on Pakdhe Johny template?
    is there additional procedure if i'm gonna put it on Pakdhe Johny?
    thanks.

    ReplyDelete
    Replies
    1. Hi. Why don't you try to follow the steps above Jhanno and we'll see if it works. :)

      Delete
  63. bang kok di template saya gak bisa ya

    ReplyDelete
  64. itu yang youtube bisa diubah jadi join this site ga ??/

    ReplyDelete
  65. mantap mas :D

    sudah dipakai di blog ku

    http://www.kemping182airsoft.com/

    ReplyDelete
  66. tpi gan,kok kalo mouse diarain ke widgetnya,widgetnya gx memanjang gitu ya ?>

    ReplyDelete
    Replies
    1. Mungkin ada kode yg belum dimasukkan mas. Coba ulangi.

      Delete
  67. Replies
    1. arep aweh kabar iki loh bos http://kitabkejawen.blogspot.com

      Delete
  68. mas, izin sedot di pasang di sini ya mas kolis yang baik hati :)
    www.pasirsilika.com

    ReplyDelete
  69. Bagus Mas. Sudah kucoba. Tapi sekarang mau kuhapus, karena kelihatan di smartphone jelek ngga bisa tersembunyi. Adakah cara menyembunyikannya?
    Terima kasih mas Kolis.

    ReplyDelete
  70. saya pikir floating ini saat dibuka di hp bakal nutupin layar seperti widget2 yg biasa di taruh pada bagian samping, ternyata tidak, terima kasih mas atas floating social bookmarknya

    ReplyDelete
    Replies
    1. Kok beda dengan punya saya ya? Punya saya tadi menutupi layar. Apakah ada contohnya yg ngga menutupi layar?

      Trims

      Delete
  71. mas kolis kulo badhe tanglet ...
    saya pake template pakde jhony tapi pada slinder gambar nya tidak bisa kebaca full ya mas cuma keliatan separo di tengah nya saja .
    [ kampongmayangan.blogspot.com ] [munengmayangan@gmail.com ]

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger