November 08, 2016

Cara Membuat Slider Responsive dan Widget Sosial Media di Blog

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 komentar

Saya bikin slide foto gitu yg belum bisa

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

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

waahhh buruan bikinn, mayann buat mempercantik blog hhe

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

semoga berhasil ya prakteknya hehe :))

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

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

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

Yappsss... salam kenal jugaa , jangan segan mampir lagi hhe

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

komentar aja asal gak spam :')
EmoticonEmoticon