Cara Membuat Slider Responsive dan Widget Sosial Media di Blog




Halo, iya halo.. salam kenal aku andrie kristianto dari UKDW Prodi Sistem Informasi'16. Nah, disini aku mau kasih tutorial Cara Membuat Slider Responsive dan Widget Sosial Media di Blog yang ada di blog ku sendiri ini..

Aku sharing aja nih, hal ini berawal dari Tugas Kuliah ku mmebuat blog bersama teman-teman tentang Membuat Blog. Karena Seorang Blogger adalah Menantu Idaman Sepanjang Masa eakkk. :v Hemm emang bener kok, makanya buruan ngeblog dan gabunglah bersama kami disini. Dijamin menyenangkan dan meng-asikkan kok..

Yang berminat yang mau nyoba buat Slider atau Widget Sosial Media yang kayak punyaku ini, gampang aja kok, ikutin aja tutorial yang ada dibawah ini, udah lengkap sampe keinti intinya aku bahas. Semoga bermanfaat ^.^ ..

Cara Peletakannya:
  • Login Blogger.com
  • Klik Blog kamu

  • Pilih Tata Letak

  • Lalu klik tulisan ‘Tambahkan Gadget’ untuk yang blog bahasa indonesia, kalo bahasa inggris translate aja.

  • Kalau udah klik, pilih yang ‘HTML/javascript’

  • Lalu pastekan kode dibawah ini tepat di kotak yang kosong itu, judulnya di kosongin aja.



Codenya:

 <style type="text/css">
#sliderFrame {
    position: relative;
    width: 700px;
    margin: 0 auto 40px;
}

#slider {
    width: 700px;
    height: 306px;
    /* Make it the same size as your images */
    background: #fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
    position: relative;
    margin: 0 auto;
    /*make the image slider center-aligned */
    -webkit-box-shadow: 0px 1px 5px #999999;
    -moz-box-shadow: 0px 1px 5px #999999;
    box-shadow: 0px 1px 5px #999999;
}

#slider img {
    position: absolute;
    border: none;
    display: none;
}


/* the link style (if an image is wrapped in a link) */

#slider a.imgLink {
    z-index: 2;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}


/* Caption styles */

div.mc-caption-bg,
div.mc-caption-bg2 {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    left: 0px;
    bottom: 15px;
    z-index: 3;
    overflow: hidden;
    font-size: 0;
}

div.mc-caption-bg {
    background-color: black;
}

div.mc-caption {
    font: bold 14px/20px Arial;
    color: #EEE;
    z-index: 4;
    padding: 10px 0;
    text-align: center;
}

div.mc-caption a {
    color: #FB0;
}

div.mc-caption a:hover {
    color: #DA0;
}


/* ------ built-in navigation bullets wrapper ------*/

div.navBulletsWrapper {
    top: 320px;
    left: 280px;
    /* Its position is relative to the #slider */
    width: 150px;
    background: none;
    padding-left: 20px;
    position: relative;
    z-index: 5;
    cursor: pointer;
}


/* each bullet */

div.navBulletsWrapper div {
    width: 11px;
    height: 11px;
    background: transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float: left;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 11px;
    /* distance between each bullet*/
    _position: relative;
    /*IE6 hack*/
}

div.navBulletsWrapper div.active {
    background-position: 0 -11px;
}

.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}


/* --------- Others ------- */

#slider {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
    <div id="slider">
        <a href="#"><img src="https://4.bp.blogspot.com/-7q_4C2Il4m4/WBnl8X7yilI/AAAAAAAABd4/HAchtzZ5nOgZfTQIVhYOI3kjAM-xz_FwACLcB/s1600/Gambar%2Bslider%2B1.png" /></a>
        <a href="#"><img src="https://4.bp.blogspot.com/-LyIzwu7SgIY/WBnl8cikU8I/AAAAAAAABdw/Dhjiy5vx5ZYMVATu4cY65pWziTuU_cP2ACLcB/s1600/Gambar%2Bslider%2B2.png" /></a>
        <a href="#"><img src="https://3.bp.blogspot.com/-fb_sefsEWlQ/WBnl-BovlHI/AAAAAAAABd8/SfJDt1HHHGMo02iZX-jxs2CCNtYCadK0wCLcB/s1600/Gambar%2Bslider%2B3.png" /></a>
        <a href="#"><img src="https://3.bp.blogspot.com/-n7TfBCHufuM/WBnl-IadL9I/AAAAAAAABeA/-v9IBA5nYGMVmhhOgVPIimjsLNYhNymaACLcB/s1600/Gambar%2Bslider%2B4.png" /></a>
        <a href="#"><img src="https://4.bp.blogspot.com/-0WuujGwhU4I/WBnl8X_VlQI/AAAAAAAABd0/ozTb09yKzEoFNgnnDkvNokzP8vvDa4lDACLcB/s1600/Gambar%2BSlider%2B5.png" /></a>
    </div></div> 

Keterangan:
  • Yang aku tandain warna merah itu ganti dengan URL gambar kamu, cara ambil URL gambarnya bisa klik tulisan ‘Entri Baru’ terus pilih insert image , lalu pilih gambarnya di komputernya kamu atau hp terus klik ok.  terus ubah ke versi html, itu kan ada tulisan compose | html. Nah pilih yang html. Nanti ada lah disitu link gambarnya, biasanya kalo Gambar itu <img src=”https://linkgambarnya.jpg/nah pilih yang link gambarnya aja, itu gambarnya kalo png linknya jadi .png atau .jpg atau .gif. . Src nya gak usah dicopy. Terus link gambar yang udah di copy tadi ganti sama code yang diatas yang berwarna merah, kan itu yang ditandai merah ada 5, jadi kamu harus siapin gambar dengan jumlah 5 Gambar.

Step 1. 

Step 2.


Step 3.

Step 4. 

STep 5. 

Step 6:

Step 7:
Lakuin hal yang sama untuk ganti gambar gambar slide yang lainnya juga..

  • Yang aku tandain warna hijau pake simbol Tagar atau tanda pagar itu Linknya, misalnya kamu klik gambarnya nanti akan diarahkan kemana gitu, jadi kayak Hyperlink gitu.

Hasilnya nanti kayak gini

Tampilan slide 1:
Screenshot_6.png










Tampilan slide 2:
Screenshot_5.png

Tampilan slide 3:
Screenshot_7.png

Tampilan Slide 4:
Screenshot_8.png

Tampilan Slider 5:
Screenshot_9.png



Cara membuat Sosial Media di Blog
Sama kayak cara diatas, cuma kotak kosongnya diisiin kode dibawah ini:

Codenya:

 <div class="separator" style="clear: both; text-align: center;">
<a href="https://plus.google.com/u/0/117385175120229461729" target="_blank"><img border="0" src="https://4.bp.blogspot.com/-I1BMzLGoqPQ/WBnrWfsZz5I/AAAAAAAABeg/361Itdq1Nj4rVi_sJAcV_giLc9_1Vy7BgCLcB/s1600/google%2Bicon.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.linkedin.com/in/andriekristiant" target="_blank"><img border="0" src="https://2.bp.blogspot.com/-wNLIZi7dJHk/WBnrWewORPI/AAAAAAAABec/BpeVgSDeAH8AfKtMcq9nEKnXSwXG3RMEQCLcB/s1600/linkedin%2Bicon.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://facebook.com/andriekristiant" target="_blank"><img border="0" src="https://4.bp.blogspot.com/-dVsR4tcoYzY/WBnrVtHY8GI/AAAAAAAABeQ/1_QbYYd3HUM-rtYXskyWOrJYBdk338p0QCLcB/s1600/facebook%2Bicon.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://twitter.com/andriekristiant" target="_blank"><img border="0" src="https://2.bp.blogspot.com/-tWX-FMrxkqM/WBnrVk22O7I/AAAAAAAABeU/9vLzPATX-Zsh1Vrzmpq4g3S7uk_vjiUfwCLcB/s1600/Twitter%2Bicon%2Bpi-sangdotcom.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.youtube.com/channel/UCLKcoFjSmgHHI6S_xUyUvIQ" target="_blank"><img border="0" src="https://2.bp.blogspot.com/-OqFmc04xXLA/WBnrVsUL9fI/AAAAAAAABeY/zIieSaKpYBs2PoDCphb0JMrYP74IqV7OwCLcB/s1600/Youtube%2Bicon.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ukdw.ac.id/" target="_blank"><img border="0" src="https://1.bp.blogspot.com/-XQ0X6ExjUxE/WBntkpsKojI/AAAAAAAABes/9XMX9AhEo5Mpx66G4KGV2fIL6g1HzVY4gCLcB/s1600/UKDW%2BYogyakarta%2Bicon.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;"></div> 


Keterangan,
  • Ganti yang aku tandain warna warna itu dengan gambar icon sosial media nya. Ambil di google, atau bisa bikin sendiri di photoshop, kalau aku bikin sendiri di photoshop. Tampilannya kayak gini
facebook icon.png
google icon.png
linkedin icon.png
Twitter icon pi-sangdotcom.png
UKDW Yogyakarta icon.png
Youtube icon.png

17 Responses to "Cara Membuat Slider Responsive dan Widget Sosial Media di Blog"

Centang kotak Notify me untuk mendapatkan balasan notifikasi komentar di email Anda.
  1. Saya bikin slide foto gitu yg belum bisa

    ReplyDelete
    Replies
    1. itu sudah ada tutorialnya mba, silahkan di praktekkan ... smeoga berhasil yaa :D

      Delete
  2. kerenn infonya, tapi sekarang belum mau bikin lah. blog masih kosong :(

    ReplyDelete
    Replies
    1. waahhh buruan bikinn, mayann buat mempercantik blog hhe

      Delete
  3. Keren..., Mas, saya perlu belajar banyak soal ginian neh... agar penampilan blog itu "lugu" :)

    ReplyDelete
  4. huiii keceeeeh...
    tapi apa gak berat ya buat bawaan blog?

    ReplyDelete
    Replies
    1. Gak kok mba, walah bikin cepet loading blog nya, tapi kalo di blog ada mba ada widget yang gak terlalu penting mendingan di lepas aja, kayak widget visitor, bisa bikin berat loading blognya dan yang lainnya juga :D

      Delete
  5. Wuih keren, boleh dicontek nih. Simpen ah..
    Salam kenal ya

    ReplyDelete
    Replies
    1. Yappsss... salam kenal jugaa , jangan segan mampir lagi hhe

      Delete
  6. knp ngk bisa mas? tampilan kayak gini nih www.wahyutrekkint.blogspot.com

    ReplyDelete
Jangan Scroll lagi! Sekarang kalau mau komen, tombol komentarnya udah pindah keatas. Kembali ke Atas

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel