Dunia Cyber: BLOGGER

Showing posts with label BLOGGER. Show all posts

Cara memasang multi tab video iframe streaming responsive di blogger

Cyber News di August 19, 2019 0

Membuat Multi Tab Video Streaming Responsive Di Blog

Cara memasang multi tab video streaming responsive di blog

Pada postingan kali ini saya akan berbagi tentang multi tab video streaming. Jadi kalian bisa memasukan 3 (tiga video)bisa untuk pilihan chanel atau bisa untuk menambah vido lanjutannya.

bisa juga kalian menaruh beberapa video dengan kualitas yang berbeda, bisa juga menaruh video dengan server yang berbeda, buat cadangan apa bila uploadan video / film di server yang satu tidak bisa di play.

Demo Tampilan Multi Tab Video Streaming Responsive Di Blog

Nah bagi kalian yang igin memasang multi tab video streaming youtube responsive di blog, silahkan ikuti langkah demi langkah berikut ini.

Masuk ke Tab Template-> Klik Edit HTML.

Cari Code </head>

Lalu masukan css dibawah ini tepat di atas kode tadi.


<style type='text/css'>
.tab-buttons{
  overflow:auto;
  text-align: center;
}
.tab-buttons button{
  background:#363f45;
  color:#feb41c;
  border:none;
  padding:10px 20px;
  font:700 15px 'segoe ui',sans-serif;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-transition:all 300ms ease-in;
  -moz-transition:all 300ms ease-in;
  transition:all 300ms ease-in;
}
.tab-buttons button.active{
    color: #fff;
    background: #5e7c88;
}
.tab-content>div{
  padding:20px;
  background:#5e7c88;
  font:400 16px 'segoe ui',sans-serif;
  color:#fff;
}

.tab-content iframe{width:100%!important;height:400px;}
@media screen and (max-width:960px){
.tab-content iframe{max-height:90%}}
@media screen and (max-width:768px){
.tab-content iframe{max-height:75%}}
@media screen and (max-width:600px){
.tab-content iframe{max-height:60%}}
@media screen and (max-width:480px){
.tab-content iframe{height:auto!important;max-height:auto!important}}
</style>

Selanjutnya cari kode </body>, masukan javascript berikut di atasnya.


<script>
var myApp=angular.module('tabs',[]);
myApp.controller('shift_tabs',function(){
  this.activeTab;
  this.makeShift=function(e){
    this.activeTab=e;
  }
  this.isActive=function(f){
    if(f==this.activeTab){
      return true
    }
  }
});
</script>

Multi tab video streaming responsive ini memerlukan ajax,jika di template sobat belum terdapat scriptnya, silahkan masukan script berikut di atas kode &lt/head&gt


&ltscript src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'&gt&lt/script&gt

Jika di template agan sudah terpasang, lewati script ini.

Save template.

Cara memasang multi tab youtube responsive di postingan

Buat postingan baru, lalu masuk ke tab html, lihat gambar.

Copy dan masukan html dibawah ini ke dalam postingan..


<div class='outer' ng-app='tabs'>
  <div class='tabs' ng-controller='shift_tabs as shift'>
    <div class='tab-buttons' ng-init='shift.makeShift(1)'>
      <button ng-click='shift.makeShift(1)' ng-class='{active:shift.isActive(1)}'>HD 720p</button>
      <button ng-click='shift.makeShift(2)' ng-class='{active:shift.isActive(2)}'>HD 720p</button>
      <button ng-click='shift.makeShift(3)' ng-class='{active:shift.isActive(3)}'>BRRIP 1080p</button>
    </div>
    <div class='tab-content'>
      <div ng-show='shift.isActive(1)'><iframe  src="https://www.youtube.com/embed/v8WjMiodcKo" frameborder="0" allowfullscreen></iframe></div>
      <div ng-show='shift.isActive(2)'><iframe src="https://www.youtube.com/embed/Wjyf44hTDco" frameborder="0" allowfullscreen></iframe></div>
      <div ng-show='shift.isActive(3)'><iframe  src="https://www.youtube.com/embed/CaObO42bjiI" frameborder="0" allowfullscreen></iframe></div>
    </div>
  </div>
</div>

Silahkan sesuaikan tulisan HD 720p, HD 720p, BRRIP 1080p. dengan tulisan yang kalian mau.
Ganti juga url yang saya block seperti https://www.youtube.com/embed/v8WjMiodcKo, dengan url video kalian.

Selesai, tinggal di publikasikan.

Cukup sekian dan terimakasih, semoga artikel tentang Membuat Multi Tab Video Streaming Responsive Di Blog

BLOGGER

menu navigasi seperti Jalan Tikus

Cyber News di August 19, 2019 0

Halo sobat Blanter, kembali lagi saya akan membagikan sebuah tutorial menarik untuk menghias blog sobat menjadi lebih menarik. Tutorial kali ini yaitu cara membuat menu navigasi seperti Jalan Tikus, yang sebenarnya tutorial ini lebih cocok untuk sobat yang sedang memodifikasi blog sobat, menu ini bisa sobat kreasikan lebih baik agar sesuai dengan tema blog yang sobat gunakan.

Menu ini sudah saya optimalkan responsivenya agar sesuai dengan perangkat yang sobat gunakan, walaupun tidak sepenuhnya mirip dengan versi mobile website Jalan Tikus. Untuk template Jalan Tikus terbaru akan menyusul, karena pembuatannya membutuhkan waktu yang cukup lama.

Tidak hanya Menu Navigasi beserta Recent Post Mega Menu, namun menu ini juga mempunyai fitur-fitur yang mirip dengan website Jalan Tikus, seperti Tiny Menu dan kolom pencarian yang mirip. 😎

Menu Jalan Tikus with Search Form

Pada tutorial ini saya menggunakan minify CSS, agar lebih mudah dalam pengeditan CSS sobat dapat menggunakan website dirtymarkup.com untuk membuat CSS lebih mudah dibaca.

Langkah Pertama : Pastikan template sobat sudah menggunakan jQuery dan pasang Script CSS Font di bawah ini tepat di atas kode </head> agar teksnya mirip dengan website Jalan Tikus.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
  loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400italic,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");loadCSS("https://fonts.googleapis.com/css?family=Bitter");
//]]>
</script>

Langkah Kedua : Masukan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Menu Jalan Tikus Created by www.idblanter.com */
#headerblanter{height:65px;font-family:'Bitter',Roboto,Arial;width:100%;position:fixed;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);top:0;right:0;left:0;z-index:11;transition:all .5s ease-in-out;background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}.mega-wrapper{background:#fff;overflow:hidden;left:0;right:0;top:65px;position:absolute;padding:20px;-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;-webkit-box-shadow:0 12px 50px rgba(0,0,0,0.17);box-shadow:0 12px 50px rgba(0,0,0,0.17);transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#navigation ul li:hover .mega-wrapper{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showkacatikus{color:#fff;position:fixed;top:12px;right:10px;display:none}#showjalantikus{color:#fff;position:fixed;top:12px;left:10px;display:none}#showkacatikus i,#showjalantikus i{font-size:35px}.megamenu{width:1100px;max-width:100%;margin:0 auto}.mega-wrapper li{width:205px;height:150px;margin-bottom:15px;margin-right:15px;border-radius:7px;overflow:hidden;position:relative}.mega-wrapper li:after{content:'';background:-webkit-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-o-linear-gradient(top,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-webkit-gradient(linear,left bottom,left top,color-stop(40%,rgba(0,0,0,.5)),color-stop(68%,hsla(0,0%,100%,0)));background:-o-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:linear-gradient(0deg,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);position:absolute;transition:all .3s ease-in-out;top:0;bottom:0;left:0;right:0}.mega-wrapper li:hover:after{opacity:.8}.mega-wrapper ul li a{font-size:13px!important;padding:0!important;z-index:9}.mega-wrapper ul li a:hover{background:transparent!important}.mega-wrapper ul li a:nth-child(2){position:absolute;width:195px;bottom:0;text-shadow:0 3px 6px #000;text-transform:none!important;padding:10px!important}.mega-wrapper li img{height:150px;width:220px}#search-blanter{position:fixed;background:#ffeddf;left:0;right:0;top:65px;padding:15px 15px 18px;text-align:center;transform:scaleY(0);transition:all .3s ease-in-out;-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#search-blanter.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#search-blanter:after{content:'';height:4px;background:linear-gradient(90deg,#ce0a46,#e98125);position:absolute;bottom:0;left:0;right:0}#bsearchbox{width:850px;max-width:100%;margin:0 auto;position:relative;overflow:hidden}#bsearchbox:before{content:'';background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_5wHvPc0fiFqOkNfgvZu7GP_pu8S0hTAA9XzQEftNv3xzPRS58GOM7x5yL_WVa912az6CFDtmG-E2wu_AK_DnNL-4KkWCR5lm6uFVKuLw9KOMJqVDxYYmTzG-0fr-5Q-cNyaMZ1APfE/s35/searchblanter.png)no-repeat;position:absolute;width:33px;height:35px;left:17px;top:13px}input#searchteks{font-size:18px;padding:20px 20px 20px 70px;border:1px solid #e69f65;border-radius:4px;width:100%;outline:none;color:#666}button.bsearchbtn{position:absolute;top:1px;background:linear-gradient(0deg,#e3642d,#f5743c 56px,#fff);font-weight:700;background:-webkit-linear-gradient(bottom,#e3642d,#f5743c 56px,#fff);font-family:'Roboto',Arial;text-transform:uppercase;color:#fff;border-radius:0 4px 4px 0;border:none;font-size:20px;width:150px;height:61px;right:0;outline:none;cursor:pointer}button.bsearchbtn:hover{opacity:.9}button.bsearchbtn:before{bottom:0;border-top:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after{top:1px;border-bottom:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after,button.bsearchbtn:before{position:absolute;height:30px;left:0;content:"";border-left:10px solid #fff;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:9}#navigation ul li a.blanter-nav:hover:after{bottom:-1px;border-bottom:7px solid #fff}#navigation ul li a.blanter-nav:after{position:absolute;bottom:-7px;width:14px;left:50%;margin-left:-7px;content:"";-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:7px solid hsla(0,0%,100%,0);border-left:7px solid hsla(0,0%,100%,0);border-right:7px solid hsla(0,0%,100%,0);-webkit-transition:.2s;-o-transition:.2s;transition:.2s}#navigation ul li a:hover{background:rgba(255,255,255,.14)}#navigation ul li{float:left}#navigation ul li a.blanter-nav{position:relative}#navigation ul li a{color:#fff;font-size:15px;text-transform:uppercase;padding:21px;font-weight:600;display:block}#navigation ul{margin:0;padding:0;list-style:none}#header2{float:left;font-size:160%;text-transform:uppercase;font-weight:300;line-height:57px;margin-top:8px;margin-right:50px}#header2 img{margin:0;padding:0;max-width:240px;max-height:70px}.titlewrapper{margin:0;padding:0}.header h1.title,.header p.title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.4px;margin:5px 0}.header .description{display:none}.header a,.header a:hover{color:#fff}.logo{float:left;font-size:160%;text-transform:uppercase;font-weight:300;max-height:70px}.logo a{color:#fff;text-decoration:none;margin-top:-5px}.logo a:hover{color:#fff;text-decoration:none}.logo img{top:0;left:0!important}#jtheadermenu{font-family:'Bitter',Arial;visibility:hidden;position:absolute;background:#fff;text-transform:none!important;list-style:none;right:100px;top:45px;padding:10px 15px 5px;width:18px;height:1px;transition:all .3s ease-in-out;z-index:9;overflow:hidden;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);opacity:0;border-radius:4px;overflow:hidden}#jtheadermenu li{width:100%;border-bottom:1px solid #ddd}#jtheadermenu li a{padding:8px 0;display:block;color:#444;font-weight:700;font-size:14px!important}#jtheadermenu li a:hover{color:#e56f2a}#jtheadermenu.shows{visibility:visible;height:167px;opacity:1;width:180px}a.blanter#showmenu i.material-icons{line-height:.6;font-size:35px;margin-top:5px}#menu-kiri{margin-right:30px}a.blanter#showsearch i.material-icons{line-height:.6;font-size:40px;margin-top:5px}#showsearch.aktif{background:#ffeddf;color:#e87e25!important}a.blanter i.fa{margin-top:5px}a.blanter{font-size:22px;color:rgba(255,255,255,0.73)!important;padding:15px 8px;text-align:center;float:right;margin-right:5px}a.blanter:hover{color:#fff!important}
@media screen and (max-width:1024px){#menu-kiri{display:none}}
@media screen and (max-width:768px){#headerblanter li a{width:100%;text-align:left;color:#fff}#headerblanter li{width:100%}.nav-menu2{width:100%}#search-box .fa-arrow-left,.blanter-back{display:block}#header2{width:220px;height:60px;overflow:hidden;float:none;margin:8px auto}a#showsearch{visibility:hidden}.mega-wrapper li{width:47%!important;height:120px}#search-blanter{background:#fff;padding:0}#bsearchbox{width:auto}input#searchteks{width:75%;font-size:15px;border:none}#bsearchbox:before{background-size:25px}#menu-wrapper{width:100%;position:absolute;top:60px;transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;overflow:hidden}#menu-wrapper,.mega-wrapper{background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}#menu-wrapper.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showjalantikus,#showkacatikus,#menu-kiri{display:block}.mega-wrapper li:nth-child(2),.mega-wrapper li:nth-child(4),.mega-wrapper li:nth-child(6){margin-right:0}.mega-wrapper{z-index:1;top:0}#jtheadermenu{right:80px;top:initial;bottom:70px}#jtheadermenu li a{color:#555}.mega-wrapper li img{height:120px}li.clearfix:nth-child(n+7),button.bsearchbtn,#navigation ul li a.blanter-nav:after{display:none}}

Baca Juga : Membuat Material Design Dialog Box dengan jQuery di Blog

Langkah Ketiga : Letakan Javascript di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
// Javascript Jalan Blanter
function jalanblanter(t){document.write('<ul class="taglabel">');for(var e=0;e<numpostsx;e++){var r,n,m=t.feed.entry[e],i=m.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<m.link.length;o++){if("replies"==m.link[o].rel&&"text/html"==m.link[o].type){var u=m.link[o].title;m.link[o].href}if("alternate"==m.link[o].rel){r=m.link[o].href;break}}try{n=m.media$thumbnail.url,n=n.replace("/s72-c/","/w215-h150/")}catch(t){s=m.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),n=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png"}var l=m.published.$t,g=l.substring(0,4),p=l.substring(5,7),x=l.substring(8,10),f=new Array;if(f[1]="Jan",f[2]="Feb",f[3]="Mar",f[4]="Apr",f[5]="May",f[6]="Jun",f[7]="Jul",f[8]="Aug",f[9]="Sep",f[10]="Oct",f[11]="Nov",f[12]="Dec",document.write('<li class="clearfix">'),1==tagpostthumbnailsx&&document.write('<a href="'+r+'"><img alt="'+i+'" title="'+i+'" class="tagpost_thumb" src="'+n+'"/></a>'),document.write('<a href="'+r+'" title="'+i+'">'+i+"</a><br>"),"content"in m)h=m.content.$t;else if("summary"in m)h=m.summary.$t;else var h="";if(h=h.replace(/<\S[^>]*>/g,""),1==tagpostsummaryx)if(h.length<numcharsx)document.write(""),document.write(h),document.write("");else{document.write("");var w=(h=h.substring(0,numcharsx)).lastIndexOf(" ");h=h.substring(0,w),document.write(h+"..."),document.write("")}var A="",v=0;document.write("<br>"),1==tagpostdatex&&(A=A+x+"-"+f[parseInt(p,10)]+"-"+g,v=1),1==tagpostcommentnumx&&(1==v&&(A+=" | "),"1 Comments"==u&&(u="1 Comment"),"0 Comments"==u&&(u="No Comments"),A+=u=""+u,v=1),1==tagpostmorex&&(1==v&&(A+=" | "),A=A+'<a href="'+r+'" class="url" title="'+i+'">More »</a>',v=1),document.write(A),document.write("</li>"),1==tagpostseparatorx&&e!=numpostsx-1&&document.write("")}document.write("</ul>")}var numpostsx=10,tagpostthumbnailsx=!0,tagpostmorex=!1,tagpostseparatorx=!1,tagpostcommentnumx=!1,tagpostdatex=!1,tagpostsummaryx=!1,numcharsx=0;
//]]>
</script>

Langkah Keempat : Pasang HTML Menu di bawah ini tepat di bawah kode <body

<header id='headerblanter' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<a href='javascript:void' id='showjalantikus' title='Show Navigation'><i class='material-icons'>&#58834;</i></a>
<a href='javascript:void' id='showkacatikus' title='Show Search'><i class='material-icons'>&#59574;</i></a>
<b:section class='header2' id='header2' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='(Editor) Anzrosone (Header)' type='Header' version='1'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZBhCj1K4E7BhA16GHsn4Ex_P7r8AiFEGZnVC0kae5D9EogOUFxBCJlRQYcN3GZP1yrpqNcWOA7gXG8Zmtvq26AgvzP8kNHPtR48z77awN2Pu_vfDAb3JrqI9CS8c25p1Itu7GKQ9Iis/s1600/JalanTikus.png</b:widget-setting>
      <b:widget-setting name='displayHeight'>61</b:widget-setting>
      <b:widget-setting name='sectionWidth'>322</b:widget-setting>
      <b:widget-setting name='useImage'>true</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
      <b:widget-setting name='displayWidth'>298</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' itemprop='headline' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' itemprop='headline' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
          </b:if>
  </b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;description&quot;'>
          <b:include name='description'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <h1 itemprop='headline' style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
      </b:if>
    </b:if>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>   
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <p class='title' itemprop='headline'><b:include name='title'/></p>
     <b:else/>
       <h1 class='title' itemprop='headline'><b:include name='title'/></h1>
     </b:if>
  <b:else/>
          <p class='title' itemprop='headline'><b:include name='title'/></p>
  </b:if>
     <b:include name='description'/>
      </div>
 </div>
  </b:if>
</b:includable>
    <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description' itemprop='description'><span><data:description/></span></p>
  </div>
</b:includable>
    <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
  </b:if>
</b:includable>
  </b:widget>
</b:section>
<div id='menu-wrapper'>
<div id='jtheadermenu'>
  <li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Pasang Iklan</span></a></li>
  <li><a href='#' itemprop='url' title='Hubungi Kami'><span itemprop='name'>Hubungi Kami</span></a></li>
  <li><a href='#' itemprop='url' title='Tentang Kami'><span itemprop='name'>Tentang Kami</span></a></li>
  <li><a href='#' itemprop='url' title='Kerjasama'><span itemprop='name'>Kerjasama</span></a></li>
</div>
<div id='navigation'>
<ul>
<li><a class='blanter-nav' href='#' itemprop='url' title='Apps'><span itemprop='name'>Apps</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://www.idblanter.com/feeds/posts/default/-/Template?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter' type='text/javascript'/>
</div></div></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Games'><span itemprop='name'>Games</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://askblanter.blogspot.com/feeds/posts/default/-/Game?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter' type='text/javascript'/>
</div></div></li>
<li><a class='blanter-nav' href='#' itemprop='url' title='Tips &amp; Trik'><span itemprop='name'>Tips &amp; Trik</span></a>
<div class='mega-wrapper'><div class='megamenu'>
<script src='https://www.idblanter.com/feeds/posts/default/-/Tutorial?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter' type='text/javascript'/>
</div></div></li>
  <li><a class='blanter-nav' href='#' itemprop='url' title='Gadget'><span itemprop='name'>Gadget</span></a></li>
  <li><a class='blanter-nav' href='#' itemprop='url' title='Gokil'><span itemprop='name'>Gokil</span></a></li>
  <li><a class='blanter-nav' href='#' itemprop='url' title='Tech News'><span itemprop='name'>Tech News</span></a></li>
  </ul>
</div>
<div id='menu-kiri'>
<a class='blanter' href='javascript:;' id='showsearch' target='_blank' title='Show Search'><i class='material-icons'>&#59574;</i></a>
<a class='blanter' href='javascript:;' id='showmenu' target='_blank' title='Show More'><i class='material-icons'>&#57669;</i></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Google Plus'><i aria-hidden='true' class='fa fa-google-plus'/></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Twitter'><i aria-hidden='true' class='fa fa-twitter'/></a>
<a class='blanter' href='#' itemprop='sameAs' target='_blank' title='Facebook'><i aria-hidden='true' class='fa fa-facebook'/></a>
</div>
</div>
<div id='search-blanter' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
<form action='/search' id='bsearchbox' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get'>
<meta content='/search?q={q}' itemprop='target'/>
<input id='searchteks' itemprop='query-input' name='q' placeholder='Cari Tips, Apps dan Games...' required='required' type='text' value=''/>
<button class='bsearchbtn' type='submit'>Cari</button>
</form></div>
</header>

Langkah Terakhir : Letakan Script jQuery Show Hide di atas kode </body>

<script type='text/javascript'>
$(document).ready(function(){$("#showsearch,#showkacatikus").click(function(){$("#showsearch,#search-blanter").toggleClass("aktif");});});
$(document).ready(function(){$("#showjalantikus").click(function(){$("#menu-wrapper").toggleClass("aktif");});});
$(document).ready(function(){$("#showmenu").click(function(){$("#jtheadermenu").toggleClass("shows");});});
</script>

Simpan Template. ✅

BLOGGER

demo multi tab video atau iframe

Cyber News di August 19, 2019 0

Cara memasang multi tab video streaming responsive di blog Pada postingan kali ini saya akan berbagi tentang multi tab video streaming. Jadi kalian bisa memasukan 3 (tiga video)bisa untuk pilihan chanel atau bisa untuk menambah vido lanjutannya. bisa juga kalian menaruh beberapa video dengan..

BLOGGER

memasang banyak video dengan satu player

Cyber News di August 19, 2019 0

layout ini cocok sekali digunakan untuk blog anime series, bisa digunakan untuk memasang banyak video dengan satu player, bila satu diputar dan berganti pada alternatif video lain otomatis video yang berjalan akan ganti, jadi walau banyak video tidak bisa diputar bersamaan karena player hanya satu

memasang multi video responsive di blogger

Cara menggunakan layout ini pada blogger
pasang jquery sebelum kode </head> jika kode ini sudah ada maka lewati saja


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>

pasang CSS pada lingkup post only agar video tidak ke-load saat mode home page atau index label, letakkan kode diatas </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Player */
#playlist{display:block;margin:0;padding:0;overflow:hidden;background-color:#000;border-bottom:1px solid #969696}
#playlist li{list-style-type:none;color:white;float:left;text-align:center;padding:14px 16px;text-decoration:none;cursor:pointer}
#playlist li:hover{background-color:#b10303;}
#videoarea{width:100%;height:410px;margin:5px 0}
</style>
<!-- kode js taruh disini -->
</b:if>

Pasang javasript player setelah kode </style> sebelum </b:if> pada lingkup CSS diatas


<script>
$(function(){$('#playlist li').on('click',function(){$('#videoarea').attr({'src':$(this).attr('movieurl'),'autoplay':'autoplay'})})
$('#videoarea').attr({'src':$('#playlist li').eq(0).attr('movieurl'),})}).attrundefined"movieurl"),})})
</script>

cara pasang video di postingan gunakan html mode diisi dengan kode berikut


<ul id="playlist">
<li movieurl="https://openload.co/embed/lHvKGHBqgnA/">video 1</li>
<li movieurl="http://watchvideo12.us/embed-ncfikfnqj8l0.html">video 2</li>
<li movieurl="http://mp4upload.com/embed-b3d2j7okf9iu.html">video 3</li>
<li style="float:right">source: animeindo</li>
</ul>
<iframe allowfullscreen="true" frameborder="0" height="400" id="videoarea" margin="0" scrolling="NO" src="" width="640"></iframe>

Demo

BLOGGER

Membuat Recent Post By Label Pada Blog Untuk Mengganti Halaman Kategori Di Menu

Cyber News di August 19, 2019 0

Biasanya di menu kita menggunakan url dari label, tapi sekarang kita akan menggantinya menjadi url Laman / halaman statistis blog..
Kata mbah KompiAjaib.com halaman kategori / label yang di tautkan ke menu blog sebaiknya di hindari untuk blog yang akan didaftarkan ke mbah Google Adsense.. Ntah apa penyebabnya, saya juga tidak mengerti sehingga harus di hindari..

Tapi menurut saya Recent Post By Label untuk di tampilkan pada laman ini sangat bagus dan simple, pengunjung tidak usah ribet ribet untuk meload atau klik next page agar dapat melihat semua isi dari label tersebut..

Karena dengan script ini kita cukup meng klik Tampilkan Artikel Selanjutnya dan secara otomatis artikel selanjutnya akan ditampilkan di halamanitu tanpa mereload ulang..

Biasanya url yang di masukan ke menu seperti berikut..
https://www.DOMAIN.blogspot.com/search/label/LABEL

Sekarang kita akan merubhanya jadi seperti berkut...
https://www.DOMAIN.blogspot.com/p/example-blogger.html

Nah bagi kalian yang ingin mencoba memasang Recent Post By Label ini, silahkan ikuti tutorial singkat berikut ini...

Cara Membuat Recent Post By Label Di Laman Blogger

Buat laman baru, Jangan Lupa kasih judul terlebih dahulu agar urlnya sesuai dengan isi label kalian..

Setelah itu masuk ke mode HTML untuk memasukan codenya

Copy dan masukan kode dibawah ini kedalamnya


<div id="result-desc">
</div>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type="text/javaScript">
  var label="Tutorial";
</script>

Jangan Lupa Ganti Kata Tutorial dengan nama label kalian yang ingin di tmpilkan...

Kalo Sudah Tinggal Publikasikan dan Copy URLnya

Selanjutnya kita akan memasang CSS dan Javascript di template blog, agar kode tadi dapat menampilkan isi dari label blog kita

Masuk ke Template, Edit HTML, Cari Kode </head>

Lalu masukan CSS dibawah ini tepat di atasnya...


 <b:if cond='data:blog.url == &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;'>
<style type='text/css'>
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em!important;}
#table-outer input#feed-q{padding:5px 10px!important;}
#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important}
}
.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSge90pBY2CmE_nUYPx1fI6I_xjTwJtDKreraRd2RYVcbic8Jk9u_bPRxC6BvndnkHZiPk7KHeUX1uINFTYkgfw9AMxglZaaWzsYNLDtqa20B7YKXYIHm9A0VR2EYRBCGTP7H1sDVihH4/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important;}
</style>
</b:if>

Silahkan ganti tulisan berikut dengan url halaman Laman / halaman statistis tadi


<b:if cond='data:blog.url == &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;'>

Example...


<b:if cond='data:blog.url == &quot;https://mastamvan.blogspot.com/p/tutorial-blogger.html&quot;'>

Kalau blog kalian masih menggunakan domain blogspot silahkan gunakan akhiran .com jangan .co.id.

Jika Kalian memasang lebih dari 1 (satu) halaman untuk label yang berbeda, silahkan ganti conditional tag dibawah ini.


<b:if cond='data:blog.url == &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;'>

Dengan Conditional tag Berikut....


<b:if cond='data:blog.url in {&quot;URL HALAMAN LAMAN / STATIS DI SINI&quot; , &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot; , &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;}'>

Example


<b:if cond='data:blog.url in {&quot;https://mastamvan.blogspot.com/p/tutorial-template.html&quot; , &quot;https://mastamvan.blogspot.com/p/tutorial-css.html&quot; , &quot;https://mastamvan.blogspot.com/p/tutorial-javascript.html&quot;}'>

Langkah selanjutnya kita akan memasang kode javascript....

Silahkan Masukan Kode Javascript dibawah ini tepat di atas kode </body>


 <b:if cond='data:blog.url == &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Script Recent Pos By Label
document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"//"+window.location.hostname,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Memuat...</span>"},t=(window,document),n=function(e){return t.getElementById(e)},a={e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},l={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var i=t.createElement("script");i.type="text/javascript",i.id="temporer-script",i.src=e,n("temporer-script")&&l.a(),a.h.appendChild(i)},c:function(t,n,i){a.i++,a.e.innerHTML=e.counting,a.g.innerHTML=e[1==t?"searching":"loading"],0===t?l.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc":e.homePage+"/feeds/posts/summary/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc"):1==t&&l.b(e.homePage+"/feeds/posts/summary/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+i+"&callback=loadToc"),a.j=null!==n?n:null,a.l=t,a.a.disabled=!0,a.b.children[0].disabled=!0},d:function(n){var i;if(a.g.innerHTML="",a.e.innerHTML="<div>Total: "+n.feed.openSearch$totalResults.$t+" Posts</div>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u="0 Komentar",m=0;m<e.maxResults&&m!=c.length;m++){r=c[m].title.$t,o="summary"in c[m]?c[m].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[m]?c[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var h=0,b=c[m].link.length;b>h;h++)s="alternate"==c[m].link[h].rel?c[m].link[h].href:"#";for(var p=0,g=c[m].link.length;g>p;p++)if("replies"==c[m].link[p].rel&&"text/html"==c[m].link[p].type){u=c[m].link[p].title;break}i=t.createElement("li"),i.innerHTML='<div class="inner"><img style="width:'+e.thumbWidth+"px;height:"+e.thumbHeight+'px;" src="'+d+'" alt="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><div class="news-text">'+o+'&hellip;<br style="clear:both;"></div></div>',a.f.appendChild(i)}i=t.createElement("a"),i.href="#load-more",i.innerHTML=e.navText,i.onclick=function(){return l.c(a.l,a.j,a.k),!1}}else i=t.createElement("a"),i.href="#reset-content",i.innerHTML=e.resetToc,i.onclick=function(){return a.i=-1,a.e.innerHTML=e.counting,a.f.innerHTML="",l.c(0,null,"published"),a.a.innerHTML=a.a.innerHTML,a.b.children[0].innerHTML=a.b.children[0].innerHTML,!1};a.g.appendChild(i),a.a.disabled=!1,a.b.children[0].disabled=!1}};loadToc=l.d,loadCategories=l.e,l.b(e.homePage+"/feeds/posts/summary/-/"+label+"?alt=json-in-script&start-index="+(a.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),l.b(e.homePage+"/feeds/posts/summary/-/"+label+"?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),a.a.onchange=function(){a.i=-1,a.f.innerHTML="",a.g.innerHTML=e.counting,a.b.children[0].innerHTML=a.b.children[0].innerHTML,l.c(0,null,this.value),a.k=this.value},a.c.onsubmit=function(){return a.i=-1,a.f.innerHTML="",a.m=a.d.value,l.c(1,a.d.value,a.k),!1}}};_toc.init();
//]]>
</script>
</b:if>

Bagian conditional tag-nya kalian samakan dengan conditional tag seperti pada bagian css tadi. Tinggal copy dan paste..

Selesay n Done semuanya sudah terpasang tinggal di save dan di lihat hasilnya..

Apabila ada yang bingung dalam tutorial ini, silahkan bertanya di kolom komentar ya :)

Terimakasih buat Kompi Ajaib Atas template dan Tutorial artikel ini http://www.kompiajaib.com/2016/04/recent-post-by-label-untuk-mengganti.html

Cukup sekian dan terima kasih, semoga artikel dari blog mas tamvan tentang Cara Membuat Recent Post By Label Di Laman Blogger Untuk Menu ini bermanfaat ya :)

BLOGGER

Tutorial Cara Memasang Material Design Recent Post Berdasarkan Label

Cyber News di August 19, 2019 0

Membuat Responsive Material Design Recent Post by Label

Halo sobat Blanter, kembali lagi saya akan membagikan tutorial dari hasil request sobat, yaitu Material Design Recent Post berdasarkan label. Desain recent post ini sebenarnya sudah saya pasang pada salah satu template Material Design Safelink hanya saja pada template Safelink tersebut widget ini adalah recent post biasa, untuk tutorial ini saya modifikasi recent post tersebut menjadi recent post berdasarkan label.

Recent post ini berguna untuk blog yang membahas banyak topik atau kategori, dengan recent post berdasarkan label ini pengunjung akan lebih mudah mengakses artikel dengan kategori yang mereka cari. Recent Post ini akan langsung optimal pada template yang memiliki ukuran wrapper 1100px, untuk template lain dengan ukuran wrapper yang berbeda akan membutuhkan sedikit pengaturan pada width li.recent-posts.

Demo

Jika sobat tertarik untuk memasangnya, silahkan ikuti tutorial di bawah ini :

Tutorial Cara Memasang Material Design Recent Post Berdasarkan Label

Langkah pertama yang harus sobat lakukan adalah memasang CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style> yang ada pada edit HTML Template

/* Recent Post Material Design by IDBLANTER.COM */
li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:right;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:left;margin-right:10px}
.recenthd{padding:15px;text-align:left;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){margin-right:0}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:260px;max-width:100%;float:left;height:260px;margin-right:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-right:7px}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

Langkah kedua silahkan sobat letakan Javascript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://blanternova.blogspot.com";
var numPosts = 8;
var recentpost_label = "Game";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-uwD_9-6c1r6dt-SuNHK84WjZczJ3Ukw18jPcdoSRsLcOs8tgAe_Kl9tCsIS-7yoBIYFHaAENYXLkCgF8At6YSuRHKIy2R5UYTnLKymVpatp_nF1mODWnGrmt8unx5wfdtdfPBHv4sGk/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img src="'+u+'" alt="'+t+'"></a><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="Recent Post" target="_blank">View More</a></div>';
//]]>
</script>

Simpan Template.

Perlu diperhatikan, agar widget dapat berjalan pastikan recentpost_url dan url blog sobat menggunakan http atau https yang sama.

Selanjutnya silahkan sobat menuju Tata Letak > Tambahkan Widget > HTML/Javascript

Masukan kode di bawah ini di tempat yang sobat inginkan, sobat juga dapat membuat b:section baru di bawah kode menu yang ada pada edit HTML template.

<div id='xtitlex'></div>
<ul id='recent-posts'></ul>

Simpan.

Tutorial Lainnya : Membuat Material Design Dialog Box dengan jQuery di Blog

Untuk pengaturan widget ini juga sangat mudah :

"https://blanternova.blogspot.com" ganti dengan URL blog sobat

"8" ganti dengan jumlah postingan yang ingin di tampilkan

"Game" ganti dengan nama label

Sekian tutorial yang bisa saya bagikan kali ini, semoga bermanfaat untuk sobat. 😊

BLOGGER

Cara Memasang Widget Recent Post

Cyber News di August 19, 2019 0

Widget Recent Post merupakan salah satu addon di blogspot yang perlu dipasang, karena dengan widget ini pengunjung tidak akan kebingungan pada saat menjelajah blog kita. Selain itu dengan widget ini jika kita mempelajari tentang SEO, widget recent post bisa memperkecil angka bouncing page blog kita. Dengan kata lain pengunjung tidak akan bosan dengan blog karena banyak pilihan yang bisa mereka pilih untuk menjelajahi seluruh isi blog.

Widget Recent Post merupakan widget yang sering dipakai oleh sebagian besar web. Dengan widget ini, pengunjung akan dengan mudah menemukan posting apa yang terbaru dari website kita. Terutama pada saat pengunjung masuk ke salah satu postingan di website kita dengan cara menemukannya di google search.

5 Widget Recent Post keren untuk blogspot

Pada postingan kali ini saya akan membagikan widget recent post dengan thumbnail atau tanpa thumbnail. Baiklah saya tidak akan panjang lebar, ini dia 5 widget recent post keren di blogspot untuk anda. :D
Style #1

Kodenya adalah sebagai berikut :

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://agungjakanugraha.blogspot.com" rel="nofollow">Pasang Widget ini</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

Style #2

Kodenya adalah sebagai berikut :

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://agungjakanugraha.blogspot.com" rel="nofollow">Pasang Widget ini</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Style #3

Kodenya adalah sebagai berikut:

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://agungjakanugraha.blogspot.com" rel="nofollow">Pasang Widget ini</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Style #4

Kodenya adalah sebagai berikut:

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://agungjakanugraha.blogspot.com" rel="nofollow">Pasang Widget ini</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Style #5

Kodenya adalah sebagai berikut:

<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://agungjakanugraha.blogspot.com" rel="nofollow">Pasang Widget ini</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Cara Memasang Widget Recent Post

Untuk cara memasang widget recent post ini sangatlah mudah, seperti halnya anda memasang widget blogspot yang lainnya. Dan bagi yang belum mengetahui silakan ikuti petunjuk berikut.

Sebelumnya anda harus menginstall font "Oswald" untuk blog anda, atau jika tidak, anda bisa menyesuaikan dengan font yang telah terinstall di blog anda dengan mengganti Oswald dengan font anda.

1. Buka akun blogger anda

2. Pilih menu Layout atau dalam bahasa indonesia Edit Tata Letak.

3. Pilih HTML/Javascript.

4. Paste salah satu kode widget recent post diatas yang anda sukai.

Untuk css bisa anda edit sesuka hati dengan mengedit bagian diantara <style type='text/css'> sampai dengan </style>

5. Selesai

Nb: pastikan terdapat jquery yang sudah terpasang diblogger anda.

Demikian tutorial cara memasang widget recent pos di blogspot. Semoga bermanfaat. Terimakasih telah membaca tutorial ini. Wassalam.

BLOGGER

Membuat Recent Post Keren di Sidebar Blog

Cyber News di August 19, 2019 0

Memasang Recent Post sebenarnya bukan hal yang sulit karena default blogger sudah ada, tinggal memasukkan URL blog maka artikel terbaru akan ditampilkan dengan bantuan feed blog. Kali ini saya akan memberikan turorial membuat recent post dengan 3 cara, yaitu simple, dengan tumbnail, dan default blogger.

Membuat Recent Post Keren di Sidebar Blog

Pilih recent post dibawah ini sesuai dengan kebutuhan anda, utamakan jangan sampai mempengaruhi loading blog agar selalu fast loading.

Cara Paling Mudah Membuat Recent Post

Cara yang terakhir ini menggunakan fasilitas dari blogger untuk menampilkan recent post atau artikel terbaru. caranya cukup mudah, ikuti tutorial berikut ini:

1. Seperti biasa login akun blogger anda.
2. Silahkan pilih “Tata Letak” Lalu “Tambah Gadget” Pilih “Feed”
3. Masukkan URL feed anda, lalu klik “Lanjutkan”.

Untuk URL Feed, anda bisa gunakan URL ini:

http://www.penaindigo.com/feeds/posts/default

Silahkan ganti url yang berwarna merah dengan url blog anda.

4. Terakhir klik “Simpan”.

Demikian Cara Membuat Recent Post Keren di Blogspot untuk menampilkan artikel terbaru agar dibaca oleh pengunjung blog. Semoga dapat bermanfaat dan selamat mencoba.

contoh

');

BLOGGER

Membuat Widget Popular Post Keren Di Blogger Dengan 4 Style Warna Warni Simple

Cyber News di April 13, 2019 0

Membuat Widget Popular Posts Keren di Blog

Membuat Widget Popular Post Keren Di Blogger Dengan 4 Style Warna Warni Simple

Cara Merubah Tampilan Widget Popular Post Lebih Keren Dan Berwarna Dengan 4 Pilihan Style css. Kali ini saya akan berbagi tutorial yang simple untuk membuat tampilan widget popular post di blog menjadi berwarna warni...

Widget popular post ini di lngkapi dengan image / gambar yang membuat tampilannya lebih elegan, menarik mungkin bisa di sebut flat ui...

Sebelumnya saya juga sudah pernah share artikel tentang widget popular post dengan 5 style dan tampilan posisi image yang berbeda2.. bagi kalian yang ingin melihatnya, silahkan liat di artikel berikut ini...
New Best 5 Style Widget Popular Post Blogger

Untuk tutorial cara pembuatan widget popular post ini, bisa ikuti langkah-langkah berikut ini..

widget popular post keren warna warni with thumbnails

Lanjutkan ke bagian Template, Edit HTML, Terus kalian cari kode </head>

Setelah ketemu, kalian pilih css mana yang mau di pakai untuk membuat tampilan popular post kalian lebih keren...

Terus kalo udah, tinggal di copy dan masukan css dibawah ini tepat di atas kode </head>

Demo Widget popular Post 1


<style type='text/css'>
/* Widget popular Post1 */
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#f44336;}
.popular-posts ul li:nth-child(2){background-color:#e91e63;}
.popular-posts ul li:nth-child(3){background-color:#9c27b0;}
.popular-posts ul li:nth-child(4){background-color:#673ab7;}
.popular-posts ul li:nth-child(5){background-color:#3f51b5;}
.popular-posts ul li:nth-child(6){background-color:#2196f3;}
.popular-posts ul li:nth-child(7){background-color:#03a9f4;}
.popular-posts ul li:nth-child(8){background-color:#00bcd4;}
.popular-posts ul li:nth-child(9){background-color:#009688;}
.popular-posts ul li:nth-child(10){background-color:#4caf50;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>

Demo Widget popular Post 2


<style type='text/css'>
/*Popular Post 2*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#00bcd4;}
.popular-posts ul li:nth-child(2){background-color:#009688;}
.popular-posts ul li:nth-child(3){background-color:#4caf50;}
.popular-posts ul li:nth-child(4){background-color:#8bc34a;}
.popular-posts ul li:nth-child(5){background-color:#cddc39;}
.popular-posts ul li:nth-child(6){background-color:#ffeb3b;}
.popular-posts ul li:nth-child(7){background-color:#ffc107;}
.popular-posts ul li:nth-child(8){background-color:#ff9800;}
.popular-posts ul li:nth-child(9){background-color:#ff5722;}
.popular-posts ul li:nth-child(10){background-color:#795548;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>

Demo Widget popular Post 3


<style type='text/css'>
/*Popular Post 3*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#fff;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #e0e0e0;position:relative;}
.popular-posts ul li:hover{background-color:#EEE;}
.popular-posts ul li a{color:#424242;text-decoration:none;}
.popular-posts ul li a:hover{color:#212121;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>

Demo Widget popular Post 4


<style type='text/css'>
/*Popular Post 4*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#212121;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #333;position:relative;}
.popular-posts ul li:hover{background-color:#262626;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>

Nah kalo sudah di pilih dan di save, kalian tinggal atur tampilan popular postnya di bafian tataletak..

Silahkan sesuaikan seperti gambar berikut ini...

Nah kalo sudah save dan lihat hasilnya...

Cukup sekian dan terima kasih, semoga artikel tentang cara membuat widget popular post keden di blog dengan warna ini bermanfaat ya :)

BLOGGER

How To Set Up a Custom Domain in Blogger

Cyber News di February 05, 2019 0

Our web today is a wonderful place. It's increasingly become a knowledge hub for strollers around the globe. And you know what the best part is? It does not have a religion, race or color, that's where perhaps its strength lies in. Point being, no matter what you are after, from details of products to how to use them, from fruit varieties to language origins, from how to hack Facebook account to how to set up a custom domain name in Blogger. Each and everything is there, in abundance and easily available. Now I know you are here to understand how you can setup/host your custom domain on your Blogger account. So let's get on with it, without further delay.

Before we start

It's important that you realize, it isn't difficult to add a custom domain into your blogger account. If you are a blogger, it's perfect if you already own your own blog, it shows your passion and love for blogging and provides you with freedom to move from one platform to another, when and if you need. Also from users perspective, it's much easier for them to remember and visit your blog at customized address like myblog.com than myblog.blogspot.com.

One of the best things about Blogger is that it does not push you to host your site with blogger. It is entirely your own choice to choose from either of two hosting plans 'hosting on BlogSpot' with address myblog.blogspot.com, or going with a custom domain with address myblog.com.

Some Popular Web Hosting Sites:

If you don't already have purchased yourself a custom domain, these are the places that you should be looking for to get one:

EasyDNS
1and1
GoDaddy.com
Yahoo! Small Business
No-IP
ix web hosting

So now if you have bought yourself a domain, from either of these you would have an IP address and a name. Let's assume our is 'mynewdomain'.com.

Well, it's time to start adding a custom domain to your blogger account.

Remember:

Here we are using setup for GoDaddy.com, the most popular domain name provider. For custom domains from other sites, the steps are almost same, so don't vanish.

Setting Up Blogger Custom Domain

Step 1. Login to your Blogger account at www.blogger.com.

Step 2. Click on your blog and then go to "Settings", choose "Basic".

Step 3. Under "Publishing" section, click "+ Setup a 3rd party URL for your blog".

Step 4. Under "Third-party domain settings" next to "http://" type your domain that you just purchased and make sure that you don't forget to add the "www" prefix to the domain name.

Step 5. Click "View settings instructions" to get the blogger's official instructions. On the Blogger instruction page, choose the "On a top-level domain (www.example.com)" option.

Step 6. Under the point 9 of instructions, 4 IP addresses will be given, copy and save all 4 of them.

Step 7. Go back to your Blogger Settings and press Save. It won't get saved and an error will appear saying 'We have not been able to verify your authority to this domain. Error 32.'

Step 8. Under the error, you will see two fields "Name, Label or Host Field" and "Destination, target, or Points To" field. Copy data of both rows from these fields.

Step 9. Now log in to your GoDaddy.com account and click on "My account" on the upper right corner > select "Manage my Domains".

Step 10. Here you should see your purchased domain name > just click on your domain name.

Step 11. Click on the "DNS Zone File" tab next to Settings and choose "Use Classic DNS Manager".

Step 12. Next, click the "Edit" button to edit your DNS Zone File.

Step 13. Under the "CNAME (Alias)" menu, click "Quick Add" button at the bottom of the screen (see image 1 in the below screnshoot).

Step 14. In the Edit box that now appeared, enter "www" in the first box and "ghs.google.com" in the second.

Step 15. Click "Quick Add" again and enter details from second row of the data we saved in step 8.

Step 16. Under the "A (Host)" menu, again choose Quick Add (see the below image).

Step 17. Host will be @ and the "Points to" value should be the one provided by Google IPs, saved in step 6 above. These are the Google IPs that you should get:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Step 18. Add all 4 of them one by one and delete old host as you won't need it anymore.

Step 19. At the top of the page, click on the "Save Zone File" button to save your setings.

Step 20. Now go back to Blogger and try to save settings again. The registration process takes 24-48 hours, so don't worry if you get an error again. Come again later to Blogger after 24-48 hours, repeat step 2 to 4, press Save and the error should be gone.

Step 21. After your URL starts working, click on the "Edit" link next to domain name on setting page.

Step 22. Check the "Redirect... to..." checkbox below your site address to ensure that even if the visitors will miss out the www part, they will still be able to reach your site.

Step 23. And that's it. Enjoy your new URL!

So this was easy, right? Only a handful of steps and we have successfully completed our mission of adding our custom domain in our blogger account. In case you haven't yet, stay patient wait for 2 days and try again. Or repeat steps 1-22, and make sure you don't miss any. Otherwise your new URL is ready and all set to roam around the wonderful world of web.

Muhammad Rizky

Pages

Dunia Cyber

Cara memasang multi tab video iframe streaming responsive di blogger

Cara memasang multi tab video streaming responsive di blog

Cara memasang multi tab youtube responsive di postingan

menu navigasi seperti Jalan Tikus

demo multi tab video atau iframe

memasang banyak video dengan satu player

Membuat Recent Post By Label Pada Blog Untuk Mengganti Halaman Kategori Di Menu

Cara Membuat Recent Post By Label Di Laman Blogger

Tutorial Cara Memasang Material Design Recent Post Berdasarkan Label

Tutorial Cara Memasang Material Design Recent Post Berdasarkan Label

Cara Memasang Widget Recent Post

5 Widget Recent Post keren untuk blogspot

Cara Memasang Widget Recent Post

Membuat Recent Post Keren di Sidebar Blog

Membuat Recent Post Keren di Sidebar Blog

Recent Post Keren Simple Responsive Tanpa Thumbnail (Gambar)

Recent Post Keren dengan Thumbnail

Cara Paling Mudah Membuat Recent Post

Membuat Widget Popular Post Keren Di Blogger Dengan 4 Style Warna Warni Simple

Membuat Widget Popular Post Keren Di Blogger Dengan 4 Style Warna Warni Simple

widget popular post keren warna warni with thumbnails

How To Set Up a Custom Domain in Blogger

Before we start

Some Popular Web Hosting Sites:

Remember:

Setting Up Blogger Custom Domain

Popular Posts

Recent Comments

Recent Posts

Random Post

Pages