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


www.pi-sang.com adalah blog yang membahas berbagai hal yang ada, seperti Wisata, Kuliner, dan Teknologi. Kontak kami melalui : andriepreneur@gmail.com..