Cara Membuat / Memasang Smooth Scroll Back To Top di Blog

Cara Memasang atau Membuat Back To Top Dengan Efek Smooth Scroll pada / di Blogspot | Assalamualaikum wr.wb hai sobat Cyber 88 selamat malam yah . Nah pada postingan kali ini admin Cyber 88 akan berbagi Tutorial Blogspot nih buat anda semuanya yaitu Cara Membuat / Memasang Smooth Scroll Back To Top  di Blog .

Memang sekarang ini memasang Back To Top sudah tidak asing lagi bagi para blogger namun ada beberapa para newbie blogger yang menginginkan tutorial tersebut. Back To Top merupakan suatu tombol yang bergambarkan dengan arah ke atas dan berfungsi sebagai mempercepat mencapai halaman blogger keatas pada halaman tsb saat kita mengklik tombolnya, jadi kita tidak usah lagi susah susah mengklik scroll sampai halaman ke atas . Namun sekarang ini admin cyber 88 akan berbagi Memasang Back Top di Blog dengan Effect Smooth, jadi back to top tersebut akan lebih indah dan menarik apabila kita memasangnya . Nah jika anda menginginkan Tutorial Cara Membuat Atau Memasang Smooth Scroll Back To Top pada Blog anda bisa melihat tutorialnya dibawah ini .

Baca Juga --> Cara Membuat / Memasang Permalink kotak Author di Blogspot Menarik

Demo

Cara Membuat / Memasang Smooth Scroll Back To Top  di Blog

• Login di Blogger.com
• Masuk ke Dashboard Blogger > Template
• Click "EDIT HTML " > Tekan CTRL+F > Akan muncul kotak pencarian.
• Masukkan kode ]]></b:skin> tepat di kotak pencarian tsb.
• Jika sudah masukkan CSS kode dibawah ini tepat dibawah kode ]]></b:skin>.

<style type='text/css'>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;-moz-border-radius-topleft: 30px;border-top-left-radius: 30px;}

#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0; border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style>

• Kemudian cari kode </body> lalu masukkan kode Script ini tepat diatas kode </body>

<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>

• Click Simpan Template.

Nah itulah artikel tentang Cara Membuat / Memasang Smooth Scroll Back To Top  di Blog dan semoga back to top ini bisa membuat blog anda menjadi lebih indah dan menarik lagi . Demikianlah posting Cara Membuat / Memasang Smooth Scroll Back To Top  di Blog dan semoga bisa bermanfaat bagi kita dan kalian semua wassalamualikum wr.wb.

Read more »

Membuat Widget Share Button di Bawah Postingan Blog

Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren | Assalamualikum wr.wb hai sobat blogger semuanya apa kabarnya hari ini ?? saya doakan baik baik saja, nah pada postingan kali ini admin cyber 88 akan share nih buat anda semua yakni Cara Membuat Widget Tombol Share keren ( Share Button dibawah Postingan Blog .

Share Button atau Tombol Berbagi merupakan suatu widget social media yang berfungsi untuk menambah jumlah visitor atau pengunjung bagi blog kita masing masing dan juga agar postingan tersebut bisa tersebar ke dunia maya hanya dengan klik tombol tersebut.

Baca Juga > Cara Membuat Widget Social Media Melayang Disamping sidebar Blog

Demo "Widget Share Button Keren Dibawah Postingan Blog"

Memang sekarang ini widget Share Button dibawah postingan tidak asing lagi bagi para sobat blogger namun tetapi para pemula pemula blogger sekarang ini juga perlu untuk mengetahui lebih lanjut tentang Membuat Widget Share Button di Bawah Postingan Blog.

Dengan demikian memasang widget share button dibawah postingan juga perlu untuk kita semua nah untuk tutorial atau tipsnya anda juga bisa mendapatkanya dibawah ini.

Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren

• Login di Blogger.com
• Masuk ke Dashboard > Template
• Terus click Edit HTML > lalu tekan tombol di keyboard secara bersamaan "CTRL + F" > Akan muncul kotak search .
• Kemudian cari kode ]]></b:skin> > jika sudah masukkan kode CSS ini diatas kode tersebut .

   ul.social_cyber88 {
    list-style:none;
    display:inline-block;
    margin:15px auto;
    }
    ul.social_cyber88 li {
    display:inline;
    float:left;
    background-repeat:no-repeat;
    }
    ul.social_cyber88 li a {
    display:block;
    width:50px;
    height:50px;
    padding-right:10px;
    position:relative;
    text-decoration:none;
    }
    ul.social_cyber88 li a strong {
    font-weight:400;
    position:absolute;
    left:20px;
    top:-1px;
    color:#fff;
    z-index:9999;
    text-shadow:1px 1px 0 rgba(0,0,0,0.75);
    background-color:rgba(0,0,0,0.7);
    -moz-border-radius:3px;
    -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
    border-radius:3px;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    padding:3px;
    }
    ul.social_cyber88 li.abfacebook {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizW1Gx80YzVVWpKgl12z_CtWaR5uJCmo1PBnS5jKW4DEfVdgJ03uTYjkM555Mag1xQz1_QZYBxkvOMwgo4yIkguJTDHGhYG2jsk9UVV7hdajaLOANeQbyMw5tRtfJT6kP07GVrjlMy-zCQ/s1600/btrix-facebook-icon.png);
    }
    ul.social_cyber88 li.abtwitter {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzgEP6wCf4LWKdpdQqlZFtg0wj3fm6Iho4mYlNS7DctVMpJiKbU7c_ZknufYuJ2xTM9C_wjWc4eW6J3ZALhCdPk9ZsDfw35N0_Lp7EKDRltcQg72K_xRjQQliKsdUEN2kB0A_Och-94-3/s1600/btrix-twitter-icon.png);
    }
    ul.social_cyber88 li.abgoogleplus {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRBdHf0SovX2ztxl4NUB8rasCkvQNBnjPpagKOltiADkiK5q7VBb_mHN27fa0N5YXP6W7Ah6P8lkAt8Zz1o9JqjkOXOTK_nlcJK6Re2B27s5Pmq0JeydiKrtHy1v_ojUFRLy7qqoaZwIQ/s1600/btrix-google-icon.png);
    }
    ul li.abpinterest {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIC7IZVFhf5UAvxAvhKPzb3q7m9XfGsq1ovFQwiN3ixYZ-HzF4aILv_hiLTobrnSJ3-foWlKNSGtv5WF7jG8jnict6pZ7hROqew5S2KdNzSb9ckny5My2n0u46tBJ2Dd6_DXiWDXCl_2D/s1600/btrix-Pinterest-icon.png);
    }
    ul.social_cyber88 li.abstumbleupon {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTaVUacM6eCxwyQg_NnfZhAOTvzcDh-ag6Kcf9iLlIz-lqUpfANnN-Buz2fybkRdDUqnPNldvwtVsa1GG8GIEmgRim6yDZPKF0de-Wttn_31Jx-HM1pzubT8xabHa_Vi4NlNWGpnqgyEy/s1600/btrix-StumbleUpon-icon.png);
    }
    ul.social_cyber88 li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF9Qv346ItgvOkFDnJMdcsFIIFY8uM7sJgm3C8nkuTCtanAlsL5Iin9OFLCuiKUPQ9P9xiKQSn6Nr0e-QEwueIRrPmf_xXVS7N5ZQJ6tmu81zdLJsUP8hca1598EHVhmRXFe0buvjkgD-x/s1600/btrix-Digg-icon.png);
    }
    ul.social_cyber88 li.ablinkedin {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT-HoLs3EdS1wjCwbX0jUVhZXPacCPOdsG3iCq18Xkna1fm5oExQThMXu9W-RnV13OW5G-z3DQzQDh9H2cgmSvDWA8XTb8sqoiC_H0EoMqGIqKsrIkUqrv2_6nObFy_ECzHzs_ln6KrctY/s1600/btrix-Linkedin-icon.png);
    }
    #animation_cyber88:hover li {
    opacity:0.2;
    }
    #animation_cyber88 li {
    -webkit-transition-property:opacity;
    -webkit-transition-duration:500ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    }
    #animation_cyber88 li a strong {
    opacity:0;
    -webkit-transition-property:opacity, top;
    -webkit-transition-duration:300ms;
    -moz-transition-property:opacity, top;
    -moz-transition-duration:300ms;
    }
    #animation_cyber88 li:hover {
    opacity:1;
    }

#animation_cyber88 li:hover a strong {
    opacity:1;
    top:-10px;
    }

• Kemudian cari kode <data:post.body/> jika kalian menemukan beberapa kode tersebut ( biasanya ada 3 ) pilih yg nomor terakhir saja jika kalian sudah memasang read more otomatis .
• Jika sudah pastekan kode Pemanggilnya dibawah ini.

<!-- Share Button Cyber88 Widget Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>
<div style='text-align:center'>
    <ul class='social_cyber88' id='animation_cyber88'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' ><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' title='Twitter' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' title='G+'  target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'  target='_blank' title='Pinterest'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Stumbleupon'  target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Dig'  target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;'  target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>
    </li>
  </ul></div>
</b:if>
<!-- Share Button Cyber88 Widget Selesai-->

• Eiit jangan simpan dulu templatenya , jika kalian ingin Share Button persis seperti gambar diatas kalian pasang dulu Script Font :Oswald nya .
• Cari Kode <head> > Paste kan kode dibawah ini dibawah kode <head>.

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

• Kemudian Klik Simpan Template anda .
• Enjoy.

Nah itulah Artikel tentang Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren dan semoga kalian bisa memasangnya diblog kalian masing masing dan semoga kalian bisa mendapatkan visitor yang lebih oke :D . Demikianlah artikel tentang Membuat Widget Share Button di Bawah Postingan Blog semoga artikel ini bisa bermanfaat bagi kita dan kalian semua wassalamualikum wr.wb.

Read more »

Memasang Widget Social Media Melayang di Blog

Cara Membuat Atau Memasang Widget Social Media Melayang / Floating Pada Samping Sidebar di Blog atau Website | Assalamualikum wr.wb nah malam sobat semua pada postingan kali ini admin cyber 88 akan share nih buat kalian semua yaitu Memasang Widget Social Media Melayang di Blog .

Widget Social Media merupakan widget social yang berfungsi atau berguna untuk memvariasi dan mengetahui orang orang yg berada pada dunia maya seperti Facebook, Twitter, Google +, , RSS dan lain lain .

Dengan anda memasang widget Social Media kalian bisa mengetahui juga informasi informasi keberadaan orang orang atau admin di blog tersebut, nah jika anda ingin melihat tampilan gambar ( Demo ) widget Social Media ini kalian bisa lihat gambar dibawah ini .

Baca Juga -- > Cara Membuat Widget Recent Post Dengan Thumbnail di Blog

Demo

Nah untuk tutorial Cara Memasang Widget Social Media Melayang Di Blog anda bisa memperagakkan tutorial tersebut dibawah ini .

• Login di blogger.com
• Pilih Tata Letak / Layout
• Lalu klik Add Gadget / Tambahkan Gadget
• Pilih HTML/Javascript
• Copy kode dibawah ini kemudian paste kan di HTML/Javascript tadi .

<style>
.cyber88-fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZmBiNND8vJwsm8zOJsePD9ZoEhLDHpZaZ4aiHihZYngf5tAB8da5pNkwKlQAAJdSlEmlW8eZ0mLwVcax0LKA-D1HM1xcFsOo8AEstYD2Acu_kRLRlxpTVKV4vTMCcGQRBjlB6pFg7yQ/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.cyber88-fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IjTJySRIXX-q_QZQan_AbqEjSM3kKWfgFbXEVolWMfZPu4ZzO4pLrKxPGfP-Fiew0vNs97D7z52Pd6kA-T5K2QriramRP9nUkeJ8NEA3nvNAe4Ji1nP8wMsYGFcXciWBXN6oWcdp5Gs/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.cyber88-fixedmenu_1{margin:0px 0 0 43px}
.cyber88-fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6zQ_UtoGStHhG8WvLucnxbC-x80MxihVXNROhyXU1tG-DCkUWJ7BSbqD2JuDgPG8vvgSgQEp4voTAF6e0XnBJKdr0awH6hv3aIqfvvBZFJJVRQuW9D0PgFYb-AnT1IN9sUW7OuPM4P4/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.cyber88-fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKDAFbofyc3crfntaxfnbPG7ijQpA9r6T-A7l5nj0jje4t87rbdC0AbYAcwK8ocbGHoUUKVCsSvWvmoAcNuGenPV9BqYSK8XzvT-2vjArWKQmvLUPrGQBhIADCbI9rHXZ4ZhReGpwbn8/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.cyber88-fixedmenutw_1{margin:0px 0 0 43px}
.cyber88-fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi__tOfoRvHyhTi1PXAjU4eH_uGoJVdwMdWnKt3pAAMxaRwMsqN9TJ_xl3DJjs8xhsmocQx7ukt7KuxOo2-RK0aetfgQXgHgMTYRVO5yHOjlc5yvP2XGIKS8zYG6vkPj5ZAdEP7Tfv1ezs/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.cyber88-fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX8wWI1DVDSVWgPv2IDtR1pV-gOvcII_5div5T5mXSfPGRhmPkfMJWp5WeNEk0xMYK6wEdQ9oLK2A02P1NCVmfc_cZRSxyu6bp08msCTYguiLfBs4hBzDZ6xzomkve5ebNYIvCJ1eFIKM/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.cyber88-fixedmenufb_1{margin:0px 0 0 43px}
.cyber88-fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9qUtQKn1VJi8PnYSP3pCa5xym5VZMTQ525-2bR9mt0hoskgVrDdRQw8ehGtn95JaXxfAYFKZRoSIMYNKWmoAgeyWsrqRtBsm1AhOERBn6gYlYMmJDjMCfdZFzu_mOL_PUmUQKQVDO2A8/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.cyber88-fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwWjiR_-tpJACeQWQIph5QjQkoR_-a2saEUUeVqHE1vZaIkvUYgwARATubmoqern46qviMmF33Dy5lN0Riq11VN-7YrsijcrK-3fdjlnTBYcSQm_9fb7nk7xJnFIwqfB5GWf70xJRwVEk/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.cyber88-fixedmenurss_1{margin:0px 0 0 43px}
</style>
<div class='cyber88-fixedmenu' onmouseout='this.className=&apos;cyber88-fixedmenu&apos;' onmouseover='this.className=&apos;cyber88-fixedmenu1&apos;'><div class='cyber88-fixedmenu_1'>
<a href='https://www.facebook.com/Badnewsbro' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMv7Bye-YYuw6oKKJ1t7H_0EmapD8_xY5MKLn2LYYGVhQRPiVsq-1uWHkXs7HyV0wbZ9868fbHZBL6vAOY1aT4QdSSsWiph6XcOWR_j6fCc9xOAwmHFilSHk6TIGUvg6JQWzv5LaSa6rU/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='cyber88-fixedmenutw' onmouseout='this.className=&apos;cyber88-fixedmenutw&apos;' onmouseover='this.className=&apos;cyber88-fixedmenutw1&apos;'><div class='cyber88-fixedmenutw_1'>
<a href='https://twitter.com/GifztModder' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZlF_4tzH14EBkgsUzYGhebdPRHiHNomOI-FFC9lmWlSb14TX-knZWstRaDSTAwLthZfw6LyyxIcBbAJf6Y8rvAoddnVZ4TpEFoqiUkekxDvWg29u3psJrzrqxbJn02ZpmWILMeswjp-8/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='cyber88-fixedmenufb' onmouseout='this.className=&apos;cyber88-fixedmenufb&apos;' onmouseover='this.className=&apos;cyber88-fixedmenufb1&apos;'><div class='cyber88-fixedmenufb_1'>
<a href='https://plus.google.com/116084126232746216333' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQbmXOKBH1xSRJTCbJP6PR80eVGCIqGr7KnRwbkw8fnZr2xWZ3_O_0fUwo2P9Xexj-SPOUUYMAQ3rpEOHStZmvGfiB3FVqW3S-DIhJHgILbj2-yXoUNHNg7UnD9PLOHErt_-5xc2Oerg/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/>
</div></div><div class='cyber88-fixedmenurss' onmouseout='this.className=&apos;cyber88-fixedmenurss&apos;' onmouseover='this.className=&apos;cyber88-fixedmenurss1&apos;'><div class='cyber88-fixedmenurss_1'>
<a href='http://feeds.feedburner.com/cyber88' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT-8umAeBoq54QEjsaJLJkaiNkekEFahMqPOkQDv_9awJS_rHQLlubkbxtVSxaFYdpid6BCR71VyFivt-4OF1IBPYLdZUqN7GMNuc1qVjZDPErdCiueMm49NTDiiuI9ZcwVhmN3O8zuqk/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/>
</div></div>

Notes :
 - Ganti Nama "Badnewsbro" dengan id profil Facebook Anda.
 - Ganti Nama "GifztModder" dengan id profil Twitter Anda.
 - Ganti Id "116084126232746216333" dengan id Google Plus Anda .
 - Ganti Nama "cyber88"dengan id Feedburner kalian.

• Jika kalian sudah mengcopy kode diatas kemudian klik Simpan
• Enjoy

Nah itulah tutorial tentang  Memasang Widget Social Media Melayang di Blog . Demikianlah artikel tentang Cara Memasang Widget Social Media Melayang di Blog semoga bermanfaat bagi kita dan kalian semua wassalamualikum wr.wb.

Read more »

Membuat Widget Recent Post Dengan Thumbnail di Blog

Cara Membuat Widget Recent Post ( Postingan Terbaru ) Dengan Thumbnail Di Blog - Assalamualikum wr.wb hai sobat semuanya sebelumnya saya ucapkan dulu selamat siang :D hehehehe nah pada postingan kali ini admin Cyber 88 akan share nih buat kalian semua yaitu Membuat Widget Recent Post Dengan Thumbnail di Blog .

Membuat Widget Recent Post Dengan Thumbnail di Blog - Tentunya widget ini sudah tidak asing lagi bagi para blogger semuanya kecuali yang masih pemula . Recent Post atau disebut degan Postingan Terbaru merupakan widget yang berfungsi sebagai mengetahui Artikel ( Postingan ) yang mana yang paling terbaru di blog tersebut , memakai widget Recent Post di blog tentunya pengunjung juga bisa tahu secara langsung di widget, manakah artikel terbaru di blog tersebut ?? .

Baca Juga --> Cara Membuat Widget Recent Comment Valid HTML5 di Blog

Widget Recent post ini juga disertai Thumbnail ( Gambar ) dan scroll pada recent post tersebut, jadi anda atau pengunjung di blog itu bisa tertarik dengan isi artikel atau konten yang paling terbaru pada blog itu. nah dan jika anda tertarik maka artikel ini lah yang pas buat anda semua .

Demo "Widget Recent Comment"

Untuk anda atau kalian semua jika anda tertarik maka anda bisa membuat widget diatas dengan tutorial berikut ini .

Cara Membuat Widget Recent Post Dengan Thumbnail di Blog

1 .Pertama tama yakni anda harus sign ini dulu ke blogger.com.
2. Jika sudah pastikan anda sudah ada pada dashboard > Tata letak
3. kemudian pilih Add Gadget, terus akan muncul laman melayang disitu > Pilih HTML/Javascript
4. lalu masukkan kode dibawah ini terus Copy ke dalam laman melayang tersebut.

<style type='text/css'>
.recent_posts_with_thumbs{overflow:auto;height:300px;}
img.recent_thumb {padding:1px;width:72px;height:72px;border:1px solid #aaa;border-radius:100px;box-shadow: 3px 3px 0 #333;float:left;margin: 0px 10px 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;margin: 10px 10px 5px 0px;padding: 0;font-size:13px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;}
.recent_posts_with_thumbs strong {font-size:12px;}</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 150; </script>
<script src='http://cyber-88.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Penting !! :
 - Warna merah ( red ) ganti dengan url blogspot kalian .
 - Warna kuning ( yellow ) itu merupakan Jumlah Banyak Artikel di Dalam Recent Post Tersebut ( Anda juga bisa menggantinya sesuai yang kalian mau )

5. Nah jika sudah klik "Simpan" dibagian bawah kiri .

Nah itulah Cara Membuat Widget Recent Post Dengan Thumbnail di Blog dan semoga kalian bisa membuatnya di blogspot kalian . Demikianlah Artikel tentang Membuat Widget Recent Post Dengan Thumbnail di Blog semoga bermanfaat bagi kita semua wassalamualikum wr.wb

Read more »

Membuat Widget Recent Comment Valid HTML5 di Blog

Cara Membuat Widget Recent Recent Comments Valid HTML5 Di Blog - Assalamualikum wr.wb hai sobat blogger nah kali ini admin Cyber 88 akan share tutorial nih buat kalian semua yaitu Membuat Widget Recent Comment Valid HTML 5 di Blog .

Widget Recent Comment merupakan widget yang di buat oleh kang ismet dan di modifikasi menjadi valid HTML5.

Widget Recent Comment ini adalah widget yang berfungsi sebagai mengetahui komentar komentar terbaru di blogger kita semua , selain itu widget ini juga dilengkapi dengan clickable area sehingga nama saja tidak cukup untuk di click namun nama komentator, komentar, avatar dll bisa di klik juga .

Dengan widget recent comment ini kalian bisa lebih mudah untuk mencari komentar-komentar terbaru untuk membalas komentar tersebut tanpa mencari cari di blogger. nah jika kalian ingin membaca cara membuat widget recent comment di blog silahkan saja simak berikut ini .

Nah jika agan menginginkan untuk melihat tampilan widget recent comment ( DEMO ) silahkan lihat gambar dibawah ini .

Cara Membuat Widget Recent Comments Valid HTML 5 Di Blog

1. Pastikan anda sudah login di blogger.com
2. Masuk ke dashboard > tata letak
3. Pilih Tambahkan Gadget ( Add Gadget )
4. Pilih HTML / Javascript dan kemudian akan ada laman yang muncul.
5. Copy Paste kode dibawah ini dan masukkan ke dalam laman yang muncul tersebut

<style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{backgroud:#eee;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid #aaa;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;background:#aaa;color:#fff}
.kangismet_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Dyho Haw';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>

Note :
- Warna Merah ( Red ) Ganti dengan Nama Author anda atau Nama G+ anda.

6. Nah jika sudah klik Simpan pada bagian kiri bawah yang berwarna orange.

- Dan jika kalian menginginkan recent comment ini lebih valid HTML5 lagi kalian hapus kode widget yang seperti ini <b:include name='quickedit'/> pada bagian template anda .

Nah itulah Cara Membuat Widget Recent Comments Valid HTML5 di Blogspot dan semoga kalian bisa memperagakkan cara tersebut dengan mudah . Demikian post tentang Membuat Widget Recent Comment Valid HTML5 di Blog semoga bermanfaat bagi kita semua wassalamualikum wr.wb.

Read more »

Cara Membuat Widget Alexa Terbaru 2014

Cara Memasang dan Membuat widget Alexa Rank Terbaru 2014 - Assalamualikum wr.wb hai sobat semuanya pada postingan kali ini Admin Cyber 88 akan membuat tutorial kepada kalian semua yakni Cara Membuat Widget Alexa Terbaru 2014 .

Alexa Rank Merupakan situs web yg dibuat oleh orang amerika yang berfungsi untuk mengetahui ranking ranking yang ada di site atau blog seseorang atau kita sendiri .

Memasang Widget Alexa merupakan hal yang sama dengan Cara Memasang Alexa Toolbar di Mozila Firefox maupun Google Chrome , Dan merupakan cara agar Alexa Rank di site atau blogspot kita semakin ramping dengan cepat dan salah satunya agar Blogspot atau Website kita lebih terkenal dengan Blogspot atau Site Lain .

Memang pada bulan april di tahun 2014 Alexa.com mengubah tampilan templatenya sehingga para blogger bingung bagaimana membuat widget alexa rank baru ?? dan juga ternyata memasang widget alexa rank sekarang ini cukup mudah juga yah.

Dan kali ini admin Cyber 88 akan mengasih tahu Cara Membuat Widget Alexa Terbaru 2014 , dan untuk tutorial Cara Membuat Widget Alexa Terbaru 2014 anda bisa memperagakkan tutorialnya dibawah ini .

Cara Membuat / Memasang Widget Alexa Terbaru 2014

1. Langkah Pertama yakni anda sign ini di blogger terlebih dahulu .
2. Masuk ke menu dashboard > lalu pilih Tata Letak .
3. Dan Jika kalian sudah ke menu tata letak klik Tambahkan Gadget / Widget ( Add Widget )
4. Jika Sudah akan muncul sebuah laman , geser kebawah laman tersebut dan klik "HTML / Javascript"

5. Sesudah anda pilih html javascript kalian masukkan kode script dibawah ini dan masukkan kode tersebut di HTML/Javascript tadi .

<a href="http://www.alexa.com/siteinfo/http://cyber-88.blogspot.com/"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=http://cyber-88.blogspot.com/'></script></a>

Penting :
Ganti Warna Red ( Merah ) dengan Url atau alamat Blogspot kalian .

6. Sehingga seperti gambar dibawah ini .

7. Dan jika sudah anda memasang kode widget / script di HTML/Javascript tadi kemudian klik "Simpan" .

Nah itulah Cara Membuat atau Memasang Widget Alexa Terbaru 2014 dan Demikianlah Artikel tentang Cara Membuat Widget Alexa Terbaru 2014 semoga bermanfaat bagi kita dan kalian semua Wassalamualikum wr.wb .

Read more »