Google | Barcode

How To add Gadget Next To Blog Header

1.Go To Blogger > Design
Edit HTML and find code : ]]></b:skin>

Please Copy Code given above box ⏫ and Paste it just above code:    ]]></b:skin>

Then copy code given below and paste it just above code:
      ]]>
    </b:template-skin>

And then please search code: <div class='header-cap-bottom cap-bottom'> after that please copy code given below and paste as per instruction below on RED

Next: Copy code inside box ⏫ and Search for code given⏬:
</b:widget>
</b:section>
Paste here:

</div>
</div>
<div class='header-cap-bottom cap-bottom'>

Klick For Demo
Google Barcode

0 Read More »

Sample Pemasangan Code Untuk Blogspot.

Google Barcode

Klik Live Demo

Image Slider According To Your Blog Post - No Manual Need It

1.Go To Blogger > Design
Choose Add a Page Element
Then choose HTML/JavaScript widget
Inside the widget paste the code below,

Code 1 Sila Paste di atas code </head>

<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

/* Preloader */

.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJG855roT8MwwDlo7J6_HSYy-2oNDST1ySdvlPqJgvsjQjS8IO_ye0Az6H2DUn3plVydc0FFP20ChiMQK8kQhCpcKJvr3QISz0y5jNNv_VDlTdP1yszjS1VxyaWMkMT12HDvsRkObqpczF/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}

.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.flexslider a {
    text-decoration: none;
}

/* Caption/Post Title */

.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}

.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}

ul.slides li a {
    display: block;
    overflow: hidden;
}

/* blogger css conflicts fix */

.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}

.flexslider ul li {
    margin-bottom: 0 !important;
}

.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul.flex-direction-nav {
    position: static;
}

ul.flex-direction-nav li {
    position: static;
}

.error {
    font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>

Code 2 Sila Paste di atas code </body>

That All, you are done, pls preview your template.

Google Barcode

Carta Cara Nak Pasang Code Instagram Di Blogger

1.Go To Blogger > Design
Choose Add a Page Element
Then choose HTML/JavaScript widget
Inside the widget paste the code below,

<div class='table-cell-m'>
  <h4 class='widget-title'>
Instagram</h4>
<a class='btn btn-default' https://www.instagram.com/eiremer.odand/' rel='me'>Follow Us</a>

</div>
</div>
<div class='instagram-footer'>
<div class='dark-wrapper'>
 
           
      <div class='cf'/>
    
      <ul id='instafeed' class='insta-slick'>   
</ul>
</div>
<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var feed = new Instafeed({ 
 get: 'user',   
 userId: 4148803768,   
  limit:14,   
  sortBy:'random',  
  accessToken: '4148803768.e7f626d.a1503775757f4e0384aa1fd99adfff27',
   after: function () {
     
     var owl = $('.insta-slick');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 300,
prevArrow: '<button type="button" class="slick-nav slick-prev"><i class="fa fa-angle-left"></i></button>',
 nextArrow: '<button type="button" class="slick-nav slick-next"><i class="fa fa-angle-right"></i></button>',
  arrows:true,
  slidesToShow: 5,
  slidesToScroll: 2,
autoplay: false,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

},
  
  
   template: '
<li><a href="{{link}}" target="_blank"><div class="zoom-out-effect left">
<div class="img-box">
<img src="{{image}}" /></div>
<div class="info-box">
<div class="info-content">
<div class="insta-likes">
<i class="fa fa-heart"></i>{{likes}}</div>
<div class="insta-com">
<i class="fa fa-comment-o"></i>{{comments}}</div>
</div>
</div>
</div>
</a></li>
',

Google Barcode

Macam Mana Nak Buat Button Top and Down Dalam Blogger

1.Go To Blogger > Design
Choose Add a Page Element
Press "ctrl" and search </body>
Dan paste code below di atas, (</body>)

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>, sila type guna edit html

2.
Press "ctrl" and search ]]></b:skin>
Dan paste code below di atas,

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pfMb2j9_1E-L1pZwR46UR0igX8BbeYBA78Kw3fUZDMH1S_7Y8SXZHmmMkcPJwyyZ-W0WNbrLfU_lBktEaS_5wA1zFUUTJkl2wUuK63R9d_LbhbW_Gbwhq6N_9c8FvPU1gQZ8VKE_Dmk/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8aJK3j93gzcBeI1FU960vLlzMDHR9A7ksJQxuVrZSFK3ZaO7xey6aHzSVbShQwoYgPhN6GnM-Vq1dWMCTqWRIkGbC6bDlDMqWmI3QKwIKXO6I00pdkaEGZShSbpHgvCI-JeCjasHiVc/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}, sila type guna edit html

Google Barcode

Macam Mana Nak Pamirkan Separuh Blog Post Dalam Blogspot - Auto read More Buttom

1. Go To Blogger > Design
Edit HTML Template
By Press CTRL+F on Your Key Board
and paste the code below,
<data:post.body/>

Sebelum melakukan sebarang pertukaran atau "edit" template, sebaiknya sila back up terlebih dahulu.

Dalam setengah blog template anda mungkin akan terjumpa code <data:post.body/> melebihi 3, apa yang anda perlu buat, sila gantikan <data:post.body/> yang kedua sahaja.
Apa yang perlu dibuat ialah, sila copy code dalam petak dibawah.

Google Barcode

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear: both;'/>

2.Kemudian sila cari code </head> seperti mana tutorial 1 di atas, dan copy code yang tertera di bawah dan pastekan di atas code </head>

<script type='text/javascript'>
no_thumb_sum = 300;
thumb_sum = 200;
thumb_h = 220;
thumb_w = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+thumb_w+'px" height="'+thumb_h+'px" /></a></span>',s=thumb_sum);var g=m+"<div>
"+removeHtmlTag(i.innerHTML,s)+"</div>
";i.innerHTML=g}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link  {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>

Selepas itu, sila clik save and "You Have Done"

Google Barcode

Gallery

How To add Gadget Next To Blog Header

Sample Pemasangan Code Untuk Blogspot.

Image Slider According To Your Blog Post - No Manual Need It

Carta Cara Nak Pasang Code Instagram Di Blogger

Macam Mana Nak Buat Button Top and Down Dalam Blogger

Macam Mana Nak Pamirkan Separuh Blog Post Dalam Blogspot - Auto read More Buttom

Subscribe To Get Info !Terkini!

Author

Direction

Hotel Region

Demo team

Eiremer Odand