CARA MEMBUAT TOMBOL SOCIAL MEDIA DI SIDEBAR

CARA MEMBUAT TOMBOL SOSIAL MEDIA DI SIDEBAR - Setelah sebelumnya saya membahas tentang bagaimana cara membuat widget sosial media yang keren, kali ini saya akan membahas tentang Cara Membuat Tombol Social Media di Sidebar. Untuk yang penasaran seperti apa widget tersebut, silahkan lihat gambar di bawah ini:

Cara Membuat Tombol Social Media di Sidebar

Tombol ini juga saya pasang di blog ini, sobat bisa lihat di sidebar sebelah kanan, lalu bagaimana caranya untuk membuat tombol seperti diatas, berikut tutorialnya:

CARA MEMBUAT TOMBOL SOCIAL MEDIA DI SIDEBAR:

1. Yang pertama login ke www.blogger.com

2. Pada menu dashboard pilih Tata Letak » Tambah Gadget/Add Gadget

3. Scroll ke bawah dan cari tulisan HTML/JavaScript lalu klik

4. Copy dan pastekan di bawah ini di kolom konten dan untuk judul/title boleh di kosongkan

<div id='show' style='position:relative;overflow:hidden;margin:-5px 0;'>
<div style='background:#fafafa;border:1px solid #e6e4e3;border-bottom:none !important;'>
<div style="background:#ddd; margin:0px; padding:6px 10px;">

<a href="@ryantwet" class="twitter-follow-button" data-show-count="false" data-show-screen-name='true' data-lang="id">Ikuti @ryantwet</a>&nbsp;

&nbsp;<div class='g-plusone' data-href='http://rednguin.blogspot.com' data-size='standard'></div>

<div class='clear'></div>
</div>
<div class="fb-like-box" data-href="https://www.facebook.com/BlogRyanZone" rel="nofollow" data-width="298" data-height="69" data-show-faces="false" data-stream="false" data-header="false" style="background:#fafafa;overflow:hidden;border-top:1px solid #e6e4e3;"></div>

</div>
<div class='g-plus' data-height='69' data-href='https://plus.google.com/102842489213678077219' data-rel='publisher'></div>
</div>

Catatan:
@ryantwet : ganti dengan username twitter sobat

Ikuti @ryantwet : ganti dengan teks yang akan ditampilkan
http://rednguin.blogspot.com : ganti dengan url blog sobat
/BlogRyanZone : ganti dengan username fanspage sobat
/102842489213678077219 : ganti dengan ID Google+ sobat

5. Terakhir klik Simpan

Demikian tutorial membuat tombol social media di sidebar, semoga bermanfaat. Salam Blogger!

CARA MEMBUAT WIDGET SOCIAL MEDIA KEREN DI BLOG

CARA MEMBUAT WIDGET SOCIAL MEDIA KEREN DI BLOG - Setelah saya sebelumnya saya memberikan tutorial Cara Membuat Emoticon Keren di Komentar, sekarang saya akan berbagi tutorial Cara Membuat Widget Social Media Keren di Blog. Widget ini terletak di sebelah kanan blog dan tentunya widget ini sangat membantu pengujung untuk menemukan kita di social media seperti Facebook, Twitter, Google+ dll.

Cara Membuat Widget Social Media Keren di Blog

Langsung saja kita simak bersama tutorialnya.

CARA MEMBUAT WIDGET SOCIAL MEDIA KEREN DI BLOG

1. Login ke akun blogger.com Anda
2. Pada dashboard pilih Template » Edit HTML
3. Cari kode ]]></b:skin> menggunakan CTRL+F
4, Letakan kode dibawah ini tepat di atas ]]></b:skin>

/* social button http://rednguin.blogspot.com* /
.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/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/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;
}

5. Selanjutnya cari kode </head>
6. Letakan kode berikut diatas kode </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>

7. Kemudian cari kode </body> dan letakan kode berikut di atasnya

<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>

*NB:
Jangan lupa untuk mengganti Your FB, Your Twitter, Your G+, Your ID, Your Feed dengan ID anda.

Sekian Tutorial Cara Membuat Widget Social Media Keren di Blog, semoga bermanfaat. Salam Blogger!

CARA MEMBUAT EMOTICON DI KOMENTAR

CARA MEMBUAT EMOTICON DI KOMENTAR - Pada kesempatan kali ini saya akan berbagi tutorial yang keren, tutorial ini saya dapatkan dari blog tetangga saat saya blogwalking dan saya menuliskan komentar namun di blog ini sedikit berbeda karena blognya memakai Emoticon yang sangat lucu dan keren. tengok saja screenshot-nya di bawah ini:

CARA MEMBUAT EMOTICON DI KOMENTAR

karena saya baik, jadi saya akan memberikan tutorialnya, meskipun blog Mas Ryan Blog belum memakainya mungkin sobat ingin memasangnya di blog sobat supaya blognya makin cantik.

CARA MEMBUAT EMOTICON DIKOMENTAR:
1. Login ke akun blogger Anda
2. Pada Dashboard klik Template » Edit HTML
3. Cari kode </head> menggunakan CTRL+F
4. Letakan kode script di bawah ini tepat diatas kode </head>

<script src='https://dmblog-project.googlecode.com/svn/Emoticononion.js' type='text/javascript'/>

5. Cari kode </body> kemudian letakan kode berikut ini diatasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>

6. Untuk tampilan lebih menarik, tambahkan juga kode CSS berikut ini dan letakan di atas kode ]]></b:skin>

/* EMOTICON */
.emoWrap {
  position:relative;
  padding:10px;
  margin-bottom:7px;
  background:#fff;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Opera */
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
  border:3px solid #860000;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  font-weight:normal;
  color:#333;
}
.emoWrap:after {
  content:&quot;&quot;;
  position:absolute;
  bottom:-10px;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}

7. Terakhir klik Save atau Simpan Template

*Catatan: jika emoticon di klik dan kodenya tidak muncul, ganti jQuery pada template sobat dengan jQuery dibawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

letakan kode diatas di atas kode </head>

Demikian Cara Membuat Emoticon di Komentar, semoga bermanfaat. sampai jumpa di postingan selanjutnya, Salam Blogger!