Membuat Widget Perlabel Image Thumbnail Di Blog

DEMO SHOW

Membuat Widget Perlabel Image Thumnbnail Di Blog | kali ini saya akan coba membagikan sedikit pengetahuan saya dalam dunia blogging.
saya sendiri belajar blogging baru-baru ini jadi pengetahuan saya tentang blog atau ngeblog masih sangat minim. nah untuk tutor kali ini saya dapatkan dari seocips.com. di sini saya akan coba membagikannya lagi. tutorial yang saya dapatkan. berminat untuk memasangnya di blog kamu???????, jika berminat silahkan ikuti tutorialnya di bawah ini.

Membuat Widget Perlabel Image Thumbnail Di Blog

1. Masuk ke Blogger>Tema>Edit Html Pastekan CSS berikut tepat sebelum kode ]]><b:skin>atau</style>Untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard kamu

img.label_thumb{ float:left; padding:5px; border:1px solid #8f8f8f; 
background:#D2D0D0; margin-right:10px; height:55px; width:55px; } 
img.label_thumb:hover{ background:#f7f6f6; }      .label_with_thumbs { 
float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; 
adding: 0; } ul.label_with_thumbs li { padding:8px 0; min-height:65px; 
margin-bottom:10px; } .label_with_thumbs a {} .label_with_thumbs strong 
{}

Selanjutnya silahkan kamu pastekan Script di bawah ini tepat sebelum kode </head>

 <script src='https://cdn.rawgit.com/Brando07/share/newbe/perlabel-SEOCIPS.js' type='text/javascript'></script>

Silahkan kamu Simpan Tema/Save

Memasang Widget Perlabel Image Thumnbnail Di Blog

Untuk memasang widget ini kamu bisa menampilkannya di mana saja, misalkan pada area Sidebar ataupun Footer itu terserah kamu, dengan posisi yang cukup menarik bagi kamu, biasanya widget ini populernya di pasang pada bawah area postinga homepage.
oky untuk memasangnya silahkan kamu ikuti tutorialnya di bawah ini.
1. Masuk terlebih dahulu ke menu Tata Letak blogger
2. Pilih Tambahkan Widgte/Gadget > Html, lalu masukan Html di bawah ini pada area Html widget tadi.

<div style="overflow:hidden; width:100%px; height:auto; padding:10px;
 border:1px dotted #ddd; background-color:#fff"><script 
type='text/javascript'>var numposts = 4;var
 showpostthumbnails = true;var displaymore = false;var displayseparator =
 false;var showcommentnum = false;var showpostdate = false;var 
showpostsummary = true;var numchars = 50;</script><script 
type="text/javascript" src="http://www.iddzgn.blogspot.com/feeds/posts/default/-/Widget%20Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>

Ganti Link yang saya beri tanda dengan link blog kamu untuk menampilkan widget tertentu silahkan kamu ganti Widget%20Blog dengan label widget yang ingin kamu tampilkan.

Terakhir silahkan kamu klik Save/Simpan
oky mungkin itu saja untuk tutorial kali ini. sampe ketemu lagi di lain waktu

Membuat Menu Navigasi Di Footer Blog Keren

Membuat Menu Navigasi Di Footer Blog Keren | Hallo shobat kali ini saya akan coba membagikan sidikit tutorial tentang Membuat Menu Navigasi Di Footer Blog Keren. Navigasi ini memiliki tampilan yang cukup bisa membuat tampilan blog kamu jadi lebih keren, sehingga dapat memanjakan mata pengunjung blog kamu.

yang di tunjukan oleh tanda panah d atas adalah gambar dari navigasi yang akan di buat, bagai mana keren bukan, navigasi ini juga saya gunakan pada blog saya yang sekarang ini. Tertarik untuk membuatnya???, jika tertarik silahkan ikuti tutorialnya di bawah ini.

Membuat Menu Navigasi Di Footer Blog Keren

Menu ini menggunakan Font Awesome pastikan blog kamu sudah terpasang script dari awesome

1. Silahkan kamu masuk ke Blogger (Log In)>Template>Edit Html, pastekan code berikut tepat sebelum kode ]]></b:skinatau</style>Untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard kamu.

.menuku-wrap{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzRJpUMgVWVwI23cmGrVHeh_Fvequd_hFjZd6otFQFgFoeyZTKWDNPb0U0o_xS4y5ufZ2VuCCpFxD6pM1zRn4frtxQRZj6pjEVROLMqQIbMJzyX8DWrDP4MMwRs6DcQLoR05aVAlIWlU/s1600/seocips-menuku.png) repeat-x top;height:54px;width:100%;overflow:auto}.menuku{font:normal 12px Arial;line-height:normal;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0 auto;padding:0 auto}.menuku ul{margin:0;padding:0}.menuku li{list-style:none;color:#b69786;float:left;width:20%;display:inline;position:relative;margin:0;text-align:center}.menuku li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRU03eJWivf2qSrGh7VoTKUUcOriGQXFJr24AvDZkB2Idgg482GRi7Fzpb2zfQcmMG9TTJG6YNHGTC9aIoGmVg303oyptF0BGTsAC7rD3ZAz-C6OYYuTPWIoqanHCeQ3LZAYWocoaPWQQ/s1600/seocips-mnubg.png) repeat-x top;display:block;text-decoration:none;font-weight:700;color:#ccc;text-shadow:1px 1px 2px #111;outline:0;margin:10px 4px 8px;padding:8px 16px;border:1px solid #111}.menuku li a:hover{background:#333;-moz-box-shadow:inset 2px 2px 2px #151515;-webkit-box-shadow:inset 2px 2px 2px#151515;box-shadow:inset 2px 2px 2px #151515}.menuku li ul{position:absolute;z-index:10;left:0;top:100%;height:30px;width:170px;display:none;margin:0;padding:0;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}.menuku li ul a{margin:0;font:12px Arial;background:#2c2c2c;border-left:none;border:0;display:block;padding:7px 10px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6)}.menuku li ul a:hover{background:#1b1b1b;color:#fff}.menuku li ul li{float:none;display:block;width:auto}.menuku li ul ul{top:0;left:100%}.menuku li a:hover,.menuku ul li a:hover{color:#fc0}@media screen and (max-width:960px)
@media screen and (max-width:622px) {
    .menuku-wrap {display:none}}

Jika sudah selanjutnya kamu paste kode di bawah ini bebas di area <Footer

<div class='menuku-wrap'>
<div class='menuku'>
<ul>
<ul>
<li><a href='#' target='_blank' title='Halaman Komentar Terbaru'><i class='fa fa-star fa-spin'></i> Komentar disini</a></li>
<li><a href='#' target='_blank' title='Sitemap'><i class='fa fa-sitemap'></i> Sitemap</a></li>
<li><a href='#' target='_blank' title='Contact'><i class='fa fa-phone'></i> Contact</a></li>
<li><a href='#' target='_blank' title='Google+ Ku'><i class='fa fa-google-plus'></i> Google+</a></li>
<li><a href='#' target='_blank' title='Facebook Ku'><i class='fa fa-facebook'></i> Facebook</a></li>
</ul>
</ul>
</div></div>

Silahkan kamu ganti tanda # dengan link kamu, dan jangan lupa sebelum memasang tutor di atas bacup terlebih dahulu template untuk mengartifikasi kesalahan

Terakhir silahkan kamu save template/pertinjau, oky mungkin sampai di sini dulu tutornya kali ini, sampe ketemu di frequensi yang sama.

Membuat Form Css Filter Image Editor Menggunakan JQuery

Membuat Form Css Filter Image Editor Menggunakan JQuery | Hallo shobat kali ini saya akan membagikan sebuah tutorial form untuk image editor menggunakan css filter, kamu bisa menambah efek bluer mengubah contrast gambar dan efek efek lainnya.

Result

Baiklah jika kamu mau memasangnya silahkan ikuti tutorialnya di bawah ini.

Membuat Form Css Filter Image Editor Menggunakan JQuery

Form Ini menggunakan Script Ajax JQuery, Jadi Pastikan Template Kamu Sudah Terpasang Script ajax JQuery

1. silahkan kamu masuk ke blogger>Buat Laman Baru>dari mode Compose silahkan kamu pindahkan menjadi mode Html, Lalu kamu pastekan code berikut di Html tadi

 
<style>

/* General styles for the page */ 
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #D2D7D3;
  font-family: monospace;
  margin: 0 auto;
  width: 960px;
}

h1 {
  margin: 25px 0 25px 0;
  font-size: 40px;
  text-align: center;
}

hr {
  margin: 20px 0;
}

form {
  text-align: center;
}

/* Styles for  URL box */ 

.url-box {
  background-color: transparent;
  display: inline-block;
  height: 30px;
  border: none;
  border-bottom: 4px solid #b3b3b1;
  padding: 0px 0px 0px 20px;
  margin: 0px 0px;
  width: 50%;
  outline: none;
  text-align: center;
  font-size: 15px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
}

#go {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: transparent;
  padding: 0px;
  border: 4px solid #b3b3b1;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
}

/* Styles for image container*/

#imageContainer {
  border: 2px solid grey;
  border-radius: 10px;
  padding: 5px;
  width: 65%;
  max-width: 600px;
  float: left;
  margin: 20px;
}

#imageContainer img {
  border-radius: 10px;
  width: 100%;
}

/* Styles for sliders*/

.sliders {
  float: left;
  border: 2px solid grey;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
}

.sliders p {
  margin: 18px 0;
  vertical-align: middle;
}

.sliders label {
  display: inline-block;
  margin: 10px 0 0 0;
  width: 100px;
  font-size: 16px;
  color: #22313F;
  text-align: left;
  vertical-align: middle;
}

.sliders input {
  position: relative;
  margin: 10px 20px 0 10px;
  vertical-align: middle;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*fix for FF unable to apply focus style bug */
  border-radius: 5px;
  /*required for proper track sizing in FF*/
  width: 150px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 7px;
  background: #ABB7B7;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #4B77BE;
  margin-top: -6px;
  vertical-align: middle;
}
input[type=range]:focus {
  outline: none;
}

input[type=range]:hover {
 cursor: pointer;
}


#reset {
  display: inline-block;
  height: 40px;
  width: 100px;
  background-color: transparent;
  padding: 0px;
  border: 4px solid #b3b3b1;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
  margin: 0 0 10px 0;
}

.p {
  clear: both;
  text-align: center;
  padding:  40px 0 40px;
}</style>

selanjutnya tambahkan juga kode scriptnya di bawah ini

 
<script>//on click of go(submit) button, addImage() will be called
$("#go").click(addImage);

//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);


// editing image via css properties
function editImage() {
 var gs = $("#gs").val(); // grayscale
 var blur = $("#blur").val(); // blur
 var br = $("#br").val(); // brightness
 var ct = $("#ct").val(); // contrast
 var huer = $("#huer").val(); //hue-rotate
 var opacity = $("#opacity").val(); //opacity
 var invert = $("#invert").val(); //invert
 var saturate = $("#saturate").val(); //saturate
 var sepia = $("#sepia").val(); //sepia

 $("#imageContainer img").css(
    "filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );

 $("#imageContainer img").css(
    "-webkit-filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
}

//When sliders change image will be updated via editImage() function
$("input[type=range]").change(editImage).mousemove(editImage);

// Reset sliders back to their original values on press of 'reset'
$('#imageEditor').on('reset', function () {
 setTimeout(function() {
  editImage();
 }, 0);
});

// adding an image via url box
function addImage(e) {
 var imgUrl = $("#imgUrl").val();
 if (imgUrl.length) {
  $("#imageContainer img").attr("src", imgUrl);
 }
 e.preventDefault(); 
}</script>

Nah di bawah ini adalah Html yang berfungsi memanggil elemen-elemen css yang di buat tadi

  
<!--Form for collecting image URL -->
<form id="urlBox" class="center">
  <input class="url-box" type="url" id="imgUrl" placeholder="Paste Url Gambar Kamu Di Sini Untuk Menampilkan Gambar">
  <input id="go" type="button" value="Go">
</form>

<hr color="grey">

<!--Controls for CSS filters via range input-->
<div class="sliders">
  <form id="imageEditor">
    <p>
      <label for="gs">Grayscale</label>
      <input id="gs" name="gs" type="range" min="0" max="100" value="0">
    </p>

    <p>
      <label for="blur">Blur</label>
      <input id="blur" name="blur" type="range" min="0" max="10" value="0">
    </p>

    <p>
      <label for="br">Exposure</label>
      <input id="br" name="br" type="range" min="0" max="200" value="100">
    </p>

    <p>
      <label for="ct">Contrast</label>
      <input id="ct" name="ct" type="range" min="0" max="200" value="100">
    </p>

    <p>
      <label for="huer">Hue Rotate</label>
      <input id="huer" name="huer" type="range" min="0" max="360" value="0">
    </p>

    <p>
      <label for="opacity">Opacity</label>
      <input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
    </p>

    <p>
      <label for="invert">Invert</label>
      <input id="invert" name="invert" type="range" min="0" max="100" value="0">
    </p>

    <p>
      <label for="saturate">Saturate</label>
      <input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
    </p>

    <p>
      <label for="sepia">Sepia</label>
      <input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
    </p>

    <input type="reset" form="imageEditor" id="reset" value="Reset" />

  </form>
</div> 

<!--container where image will be loaded-->
<div id="imageContainer" class="center">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/stadium.jpg">
</div>

<p class="p">Demo By ID Dzgn. <a rel="nofollow" rel="noreferrer"href="http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery" target="_blank">See article</a>.</p>

Nah jika tahap di atas sudah kamu buat sekarang silahkan klik untuk melihat apakaah formnya berhasil di buat atau tidak.
jika form masih belum muncul coba pastekan Script Ajax JQuery di bawah ini tepat di bawah Javascript yang tadi di tambahkan (No Area Script).

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

Jika dengan menambahkan script ajax di atas masih belum muncul silahkan berikan komentarnya di bawah ini

Membuat Menu Droupdown Vertikal Slide Responsive

Membuat Menu Droupdown Vertikal Slide Responsive | Pada kesempatan kali ini saya akan membagikan tips membuat menu navigasi vertikal di blog, menu yang cantik ini akan memberikan kesan indah pada blog kamu.

Result

menu kali ini menurut saya sangat indah entah bagaimana menurut kamu, jika kamu tertarik Memasang Menu Droupdown Vertikal Slide Responsive ini di blog kamu, kamu bisa ikuti tutorialnya di bawah ini.

Membuat Menu Droupdown Vertikal Slide Responsive

Pastikan Di Blog Kamu Sudah Terpasang CSS Font Awesome, Karena Menu Ini Menampilkan Icon Dari Awesome

1. Silahkan masuk ke blogger>Template>Edit Html tambahkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>, Untuk mempercepat pencarian silahkan anda tekan

CTRL

+

F

pada keyboard.

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css)}
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);.logo{}
.settings{height:79px;float:left;background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYN5S2EmY-5VKACR2jbeisrD3PM0mpzQYitSYaQZrz1gd-pNfRLw5Qdv8HYpbQL7YZWDRwnfYuxws4Q4ILyfx8Zr1YsDOotzuGEpTnl2xwScHPBAGpchJw6gYaKlLv-Gj6y_YfhdjBPg/s1600/asx.PNG);background-repeat:no-repeat;width:250px;margin:0;text-align:center;font-size:20px;font-family:'Strait',sans-serif}
/* ScrolBar  */
.scrollbar{height:90%;width:100%;overflow-y:hidden;overflow-x:hidden}
.scrollbar:hover{height:90%;width:100%;overflow-y:scroll;overflow-x:hidden}
/* Scrollbar Style */
 

#style-1::-webkit-scrollbar-track{border-radius:2px}
#style-1::-webkit-scrollbar{width:5px;background-color:#F7F7F7}
#style-1::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#BFBFBF}
/* Scrollbar End */
 
.fa-lg{font-size:1em}
.fa{position:relative;display:table-cell;width:60px;height:36px;text-align:center;top:12px;font-size:20px}
.main-menu:hover,nav.main-menu.expanded{width:260px;overflow:hidden;opacity:1}
.main-menu{background:#F7F7F7;position:absolute;top:0;bottom:0;height:100%;left:0;width:55px;overflow:hidden;-webkit-transition:width .2s linear;transition:width .2s linear;-webkit-transform:translateZ(0) scale(1,1);box-shadow:1px 0 15px rgba(0,0,0,0.07);opacity:1}
.main-menu>ul{margin:7px 0}
.main-menu li{position:relative;display:block;width:250px}
.main-menu li>a{position:relative;width:255px;display:table;border-collapse:collapse;border-spacing:0;color:#8a8a8a;font-size:13px;text-decoration:none;-webkit-transform:translateZ(0) scale(1,1);-webkit-transition:all .14s linear;transition:all .14s linear;font-family:'Strait',sans-serif;border-top:1px solid #f2f2f2;text-shadow:1px 1px 1px  #fff}
.main-menu .nav-icon{position:relative;display:table-cell;width:55px;height:36px;text-align:center;vertical-align:middle;font-size:18px}
.main-menu .nav-text{position:relative;display:table-cell;vertical-align:middle;width:190px;font-family:'Titillium Web',sans-serif}
.main-menu .share{}
.main-menu .fb-like{left:180px;position:absolute;top:15px}
.main-menu>ul.logout{position:absolute;left:0;bottom:0}
.no-touch .scrollable.hover{overflow-y:hidden}
.no-touch .scrollable.hover:hover{overflow-y:auto;overflow:visible}
/* Logo Hover Property */
.settings:hover,settings:focus{background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYN5S2EmY-5VKACR2jbeisrD3PM0mpzQYitSYaQZrz1gd-pNfRLw5Qdv8HYpbQL7YZWDRwnfYuxws4Q4ILyfx8Zr1YsDOotzuGEpTnl2xwScHPBAGpchJw6gYaKlLv-Gj6y_YfhdjBPg/s1600/asx.PNG);-webkit-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;-moz-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;-o-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0}
.settings:active,settings:focus{background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYN5S2EmY-5VKACR2jbeisrD3PM0mpzQYitSYaQZrz1gd-pNfRLw5Qdv8HYpbQL7YZWDRwnfYuxws4Q4ILyfx8Zr1YsDOotzuGEpTnl2xwScHPBAGpchJw6gYaKlLv-Gj6y_YfhdjBPg/s1600/asx.PNG

selanjutnya kamu pastekan code berikut bebas di area (sesudah) kode <body> atau <body

<nav class="main-menu">


  
 <div>
    <a class="logo" href="#">
  </div> 
<div class="settings"></div>
<div class="scrollbar" id="style-1">
      
<ul>
  
<li>                                   
<a href="#">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>   
   
<li>                                 
<a href="#">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>   

    
<li>                                 
<a href="#">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>   
  


 
<li>
<a href="#">
<i class="fa fa-heart-o fa-lg"></i>
                                        <span class="nav-text">
                        </span>
                        
                    </a>

</li>
                            

  
  
</li>
<li class="darkerlishadow">
<a href="#">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">News</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">Technology</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">Travel</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-shopping-cart"></i>
 <span class="nav-text">Shopping</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">Film & Music</span>
</a>
</li>

<li class="darkerli">
<a href="#">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web Tools</span>
</a>
</li>
  
<li class="darkerli">
<a href="#">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">Art & Design</span>
</a>
</li>

<li class="darkerli">
<a href="#">
<i class="fa fa-align-left fa-lg"></i>
<span class="nav-text">Magazines
</span>
</a>
</li>  
</ul>
        </nav>
        
  

Silahkan Kamu Ganti Kode Yang Sudah Saya Tandai Dengan Url: Image, Link Tujuan Kamu Dan Jangan Lupa Untuk Backup Template Sebelum Mamasang Tutoril Di Atas

Memasang Widget Sosial Media Di Sidebar Blog

Memasang Widget Sosial Media Di Sidebar Blog | Pada kesempatan kali ini saya akan membagika widget sosial media untuk menghiasi tampilan pada blog anda, anda dapat menyisipkan link dari sosial media maupun following langsung ke blog kamu dengan tampilan yang menarik.

Result

baiklah bagi yang ingin: Memasang Widget Sosial Media Di Sidebar Blog, silahkan langsung ikuti tutorialnya di bawah ini

Memasang Widget Sosial Media Di Sidebar Blog

Untuk Memasang Widget Ini Pastikan Blog Kamu Sudah Terpasang Link Css Awesome Jika Belum Tambah Css Link Di Bawah Ini Tepat Sebelum </head>,

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Silahkan Login Ke Blogger>Template>Edit Html lalu salin kode di bawah ini tepat sebelum kode ]]></b:skin> Atau </style>, untuk mempercepat pencarian silahkan anda klik tombol

CTRL

+

F

pada keyboard kamu

/* Sosial Media Widget */
#HTML68 .sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedarl-img{position:relative;max-height:140px;overflow:hidden}
.sosmedarl-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedarl-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.sosmedarl-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.sosmedarl-float{text-align:center;display:table;width:100%;height:100%}
.sosmedarl-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedarl-float a i{font-weight:normal;margin:0 5px 0 0}
.sosmedarl-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedarl-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedarl-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedarl-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedarl-icon i{font-family:fontawesome;margin:0 3px 0 0}
.sosmedarl-icon.fbl a{background:#3b5998}
.sosmedarl-icon.twitt a{background:#19bfe5}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.twitt a:hover,.sosmedarl-icon.crcl a:hover{background:#404040}
.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0}
.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedarl-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedarl-info h4:before,.sosmedarl-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedarl-info h4:before {margin-left:-50%;text-align:right;}

Jika widget tidak tertata rapi silahkan anda tambahkan kode ini juga

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

kemudian tambahkan kode di bawah ini tepat sesudah kode <body> misalkan pada bagian sidebar Lalu pastekan kode di bawah tepat sesudah kode </b:widget> 

<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedarl-img'>
<img alt='Judul Blog' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguGEhh9WR21VXtwc6UgMZitA9MTtrGAgPBn4F7s0ljXntewEGyh9BA4g5kx5_NJx-rVGHXImEsBmapa5K5M6iA5UZta2XSKV-FiB-s6PujZ6bf3bdF12uEDI9a9po0I75yDpjTHzpSe7s/s1600/logo+my.JPG' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>Judul Blog</span></h4>
<p>Deskripsi blog tulis di sini</p>
</div>
<div class='sosmedarl-wrpicon'>
<ul class='extender'>
<li class='sosmedarl-icon fbl'><a href='#' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>

selanjutnya silahkan kamu ganti kode yang di tandai di atas (link gambar, sosial media, judul blog, deskripsi blog kamu).
Demikin dari saya semoga bermanfaat terimakasi

Mengubah Target Negara Visitor Blog (Pengunjung) Lewat Google Webmaster

Cara Mengubah Target Visitor Blog (Pengunjung) Lewat Google Webmaster

Mengubah Target Negara Visitor Blog (Pengunjung) Lewat Google Webmaster | penargetan visitor blog perlu di lakukan untuk para user blogger, bisanya hal ini dalakukan untuk suatu alasan agar blog bisa di baca sesuai dengan bahasa artikel yang di tentukan.
pernahkah kamu mengunjungi situs google dengan link: http:s://google.com , jika pernah pasti link yang tadinya menggunakan domain.com tiba-tiba berubah (redirect) menjadi Google.co.id . google.com hanya akan berfungsi di luar area atau negara berbeda misalkan di US, sedangkan google.co.id hanya akan berlaku di negara indonesia.
kebanyakan para blogger, blog mereka inigin tampil di mesin pencarian google.com mereka tidak tau perbedaan google.com dengan google.co.id , ya kalau bahasa artikel yang di gunakan adalah bahasa inggris, kalo bahasa indonesia (lokal) gi mana??? rasanya tidak mungkin orang luar akan mengetik kata kunci menggunakan bahasa indonesia terkecuali dia mengerti bahasa indonesia.
nah jikalau kamu ingin mengubah target visaitor blog, silahkan kamu kunjungi terlebih dahulu Google Webmaster.

Mengubah Target Negara Visitor Blog (Pengunjung) Lewat Google Webmaster

1. silahkan kamu kunjungi Google Webmaster, pastikan kamu sudah memiliki akun google webmaster
2. Pilih properti web kamu
3. silahkan kamu ikuti langkah-langkahnya sesuai dengan no pada gambar, Contoh (1 klik sesui tanda panah)

Mengubah Target Negara Visitor Blog (Pengunjung) Lewat Google Webmaster

4.Ikuti langkah-langkah selanjutnya

Mengubah Target Negara Visitor Blog (Pengunjung) Lewat Google Webmaster

5. pada gambar di atas jangan lupa untuk menberikan tanda centang pada blog pengguna, silahkan ubah nama negara sesuai dengan tujuan penargetan
6. terakhir silahkan kamu klik simpan/save, semoga berhasil

Jika Masih Bingun Dengan Cara Tutorial Di Atas Silahkan Tinggalkan Komentar

Domshit V3,0 Template Khusus Demo Widget

Domshit V3,0 Template Khusus Demo Widget

Domshit V3,0 Template Khusus Demo Widget | Hallo, kali ini saya akan coba membagikan template khusus di rancang untuk menyisipkan elemen-elemen baru, misalnya demo widget dll. untuk mendapatkan template ini anda harus rela sedikitnya mengeluarkan uang dalam saku anda sebesar 80.000 untuk pembayaran via pulsa.

Untuk melihat beberapa demo yang di hasilkan dari template ini silahkan klik di bawah ini

Live Demo

LIVE DEMO

• Test Demo1
• Homepage
• Test Demo2

untuk file downloadnya langsung ajha di bawah ini

DOWNLOAD

INFO

1k likes for free

Template Blogger Mirip Oploverz

Thnks To: Mastah Arleth

• LIVE DEMO
• DOWNLOAD

Membatasi Jumblah Halaman Search Menurut Label

Membatasi Jumblah Halaman Search Menurut Label

Kali ini ID Dzgn akan coba membagikan Tips Blog: Membatasi Jumblah Halaman Search Menurut Label.

Tips ini sangat berguna bagi blog yang menampilkan widget label, terkadang jika blum di pasangkan code batasan search kadang bisa berpengaruh buruk untuk widget/template blog kamu. misalnya pada saat search labe, label tidak membatasi jumblah postingan yang di index di karenakan Html yang belum di lengkapi code max (maksimal Search). Untuk memasangnya cukup mudah sama halnya seperti Cara Membatasi Postingan Di Halaman Search

Membatasi Jumblah Halaman Search Menurut Label

Penerapan Pada Widget Label

1. Pertama masuk ke Blogger>Template>Edit Html
2. Silahkan cari struktur html seperti berikut

expr:href='data:label.url'

Ganti code di atas dengan code di bawah ini

expr:href='data:label.url + "?&max-results=5"'

3. Tentukan nilai maxsimal postingan yang terlihat max-results=5 Seusaikan dengan selera kamu

Penerapan Pada Link Label Menu (Navigasi)

1. Misal Link Awal seperti di bawah ini

<a href='http://dzgnseo.blogspot.com/search/label/Template'>Template</a>

Tambahkan astribut Max-result=5

<a href='http://dzgnseo.blogspot.com/search/label/Template?&amp;amp;max-results=5'>Template</a>

2. Save template

Demikian Tips Blog kali ini, semoga bermanfaat

Cara Membatasi Jumblah Halaman Pencarian (Search)

Cara Membatasi Jumblah Di Halaman Pencarian (Search) | kali ini Design Seo akan membagikan sedikit tutorial membatasi jumblah pencarian pada halaman pencarian blogger (Search Page).

Cara Membatasi Jumblah Di Halaman Pencarian (Search)

Tutorial ini mungkin sudah banyak terpublikasi di luar sana, namun karna blog ini masih newbe jadi saya rasa buat saja asal tetap dalam kriteria blogger, dengan sedikit pengalaman sebelumnnya maka saya niatkan membagikan tutorial ini.
jika kamu kesusahan dalam hal Jumblah Halaman Search kamu, kamu bisa membatasinya dengan cara mengikuti tutorialnya di bawah ini. Pemasangan ini sama mudahya seperti Membatasi Jumblah Halaman Search Menurut Label

Cara Membatasi Jumblah Di Halaman Pencarian (Search)

1. Silahkan buka blogger>Template>Edit Html, Lalu silahkan anda cari Markup Pencarian (Search Form/Action) Sesuai dengan template yang kamu gunakan, karena setiap template memiliki markup berbeda contohnya seperti di bawah.

<form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>
<td class='search-boxy1'>
<input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/>
</td>
<td class='search-button1'>
<input id='search-button1' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>

Nah di atas adalah bayangan markup pencarian pada template.
2. selanjutnya kamu hanya harus menambahkan code yang sudah saya beri tanda di bawah ini, anda hanya harus menambah code tersebut.

<form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>
<td class='search-boxy1'>
<input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/>
<input name='max-results' type='hidden' value='7'/>
</td>
<td class='search-button1'>
<input id='search-button1' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>

Tentukan jumblah pencarian pada code Value='7' dengan selera anda.
3. Terakhir silahkan save/simpan template

Demikian dari saya untuk Cara Membatasi Jumblah Di Halaman Pencarian (Search), semoga bermanfaat.

Membuat Pesan Komentar Menggunakan Tombol Parse Di Blog

Cara Membuat Pesan Komentar Menggunakan Tombol Parse Terbaru | Memodifikasi template agar lebih rapi,unik.keren banyak di lakukan oleh setiap orang. semua ini di lakukan agar para pembaca postingan blog atau seorang pengunjung tidak merasakan bosa. nah kali ini saya akan membagikan tutorial yang mungkin bisa menjadikan blog kamu terlihat lebih keren dari sebelumnya.

Tertarik Untuk Membuatnya

Pertama masuk ke blogge>Template>Edit Html
Pada Edit Html Silahkan Copas code berikut tepat sebelum code </b:skin> atau</style>Untuk mempercepat pencarian silahkan kamu klik tombol

Ctrl

+

F

Pada Keyboard

/* Pesan Di Atas komentar */
.pesan-komentar{background:#fff;padding:0;width:auto;margin:10px auto 0 auto;line-height:normal;position:relative;font-weight:400;color:#888;box-shadow:inset 0 0 1px 0 #888;}
.pesan-komentar h5{font-size:14px;margin:0;background:#f8695f;color:#fff;padding:15px 20px;font-weight:700;position:relative;text-transform:uppercase;overflow:hidden;}
.pesan-komentar h5:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#e85e54;color:#fff;top:0;right:0;padding:15px 20px;position:absolute}
.pesan-komentar .strike{text-decoration:line-through;display:inline;padding:0;}
.pesan-komentar ul{padding:20px}
.pesan-komentar ul li{list-style:none;padding:5px 0;}
.pesan-komentar ul li:first-child{padding:0 0 5px 0;}
.pesan-komentar ul li:last-child{padding:5px 0 0 0;}
.parser{background:#fff;border:1px solid #ddd;padding:3px 6px;margin:0 20px 20px;cursor:pointer;display:inline-block;float:left;text-align:center}
#parser{padding:0;margin:0 20px;display:none}
#parser table,#parser2 table{margin:0 auto;width:100%}
#parser textarea#somewhere,#parser2 textarea#somewhere{background:#fff;border:0;height:100px;width:100%;padding:10px;box-shadow:inset 0 0 0 1px #ddd;transition:all .6s}
#parser textarea#somewhere:active,#parser textarea#somewhere:focus,#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{color:#151515;box-shadow:inset 0 0 0 1px #ccc;outline:0}
input.button-parse{padding:5px 8px;cursor:pointer;border:1px solid #e85e54;background:#f8695f;color:#fff;margin-bottom:20px;border-radius:2px;transition:all .3s}
input.button-parse:hover{background:#fff;border-color:#f8695f;color:#e85e54;}
.pesan-komentar ul li code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#888;}

Selanjutnya silahkan kamu cari code</body> Lalu pastekan code berikut tepat di atas </body>

//<![CDATA[
// Pesan Komentar
$(document).ready(function(){$(".parser").click(function(){$("#parser").slideToggle("fast")})});
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;};
//]]>

Terakhir silahkan kamu copas code di bawah ini lalu pastekan code tersebut tepat di bawah code <b:includable id="comments" var="post"></b:includable>

<div class='pesan-komentar'>
<h5>Penulisan markup di komentar</h5>
<ul>
<li>Untuk menulis huruf <b>bold</b> gunakan <code>&lt;strong&gt;&lt;/strong&gt;</code> atau <code>&lt;b&gt;&lt;/b&gt;</code>.</li>
<li>Untuk menulis huruf <i>italic</i> gunakan <code>&lt;em&gt;&lt;/em&gt;</code> atau <code>&lt;i&gt;&lt;/i&gt;</code>.</li>
<li>Untuk menulis huruf <u>underline</u> gunakan <code>&lt;u&gt;&lt;/u&gt;</code>.</li>
<li>Untuk menulis huruf <span class='strike'>strikethrought</span> gunakan <code>&lt;strike&gt;&lt;/strike&gt;</code>.</li>
<li>Untuk menulis kode HTML gunakan <code>&lt;code&gt;&lt;/code&gt;</code> atau <code>&lt;pre&gt;&lt;/pre&gt;</code> atau <code>&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code>, dan silakan <b>parse</b> kode pada kotak parser di bawah ini.</li>
</ul>
<div class='parser'><i class='fa fa-code'></i></div>
<div class='clear'></div>
<div id='parser'>
<table><tbody>
<tr>
<td><textarea id='somewhere'></textarea><br/>
<input class='button-parse' contenteditable='true' onclick='convert();' type='button' value='Parse Script'/></td>
</tr>
</tbody></table>
</div>
</div>

Jika sudah selesai silahkan kamu save/simpan lalu pilih Pertinjau Untuk melihat hasil akhir

Pastikan Sebelum anda memasang Pesan Komentar Menggunakan Tombol Parse Terbaru Anda mem BackUp Templat, Guna mengantisipasi kegagalan

Cara Membuat Design Color Box Di Blog Keren

Cara Membuat Design Color Box Di Blog Keren| Banyak cara yang dilakukan orang untuk membuat blognya menarik, rapi daris segi design maupun rapi dalam cara penulisan artikel. Nah kali ini Design Seo akan membagikan tutorial salah satu agar blog kamu jadi lebih keren yaitu dengan Memasang Design Color Box Di Blog Keren. caranya cukup sederhana kok.

Alasan Kenapa Sih Color Box Wajib Di Pasang Pada Blog

Alasanya cukup sederhana, dimana agar pengunjung blog tidak bosan membaca artikel postingan panjang dari atas sampe bawah {Kalo Polos-Polos Banget Mah Pasti Ga Like}, Tertarik membuatnya??, Langsung ajha ikutin tutorialnya di bawah ini.

Langkah Pertama

+Buka Blogger >Plih Template >Edit Html
+Letakan Code CSS Ini Tepat Sebelum Code </b:skin> atau </style>Untuk mempercepat pencarian silahkan klik tombol

Ctrl

+

F

/* Material Color Box */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}

+Pilih Save/Simpan Template +Selanjutnya untuk memanggil color box (memasukan ke postingan).
+Buat postingan baru pindah mode dari Compose menjadi HTML

Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.

<div class="colorbox purple">
Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.
</div>

Untuk mencapai suatu tujuan, kadang kita harus menempuh jalan memutar. Kegagalan adalah salah satu di antaranya.

<div class="colorbox blue">
Untuk mencapai suatu tujuan, kadang kita harus menempuh jalan memutar. Kegagalan adalah salah satu di antaranya.
</div>

Satu orang yang mencoba lalu gagal, lebih baik daripada seribu orang yang tak pernah mencoba.

<div class="colorbox green">
Satu orang yang mencoba lalu gagal, lebih baik daripada seribu orang yang tak pernah mencoba.
</div>

Jangan selalu mengikuti arus, jadilah diri sendiri.

<div class="colorbox red">
Jangan selalu mengikuti arus, jadilah diri sendiri.
</div>

Kegagalan adalah bagian dari usaha, bukan hasil yang membuat kita menyerah begitu saja.

<div class="colorbox orange">
Kegagalan adalah bagian dari usaha, bukan hasil yang membuat kita menyerah begitu saja.
</div>

+Klik Pertinjau Untuk Melihat haslinya.
+Terakhih {Save/Publikasi}

Cara Mendaftarkan Blog Atau Website Ke Yandex Terbaru 2017

Yandex adalah salah satu mesin terbesar  berdasarkan Comscore.com, mendaftarkan blog ke yandex adalah salah satu utama yang harus di lakukan agar mesin pencarian yandex dapat membaca konten yang ada pada blog, untuk: Cara Mendaftarkan Blog Atau Website Ke Yandex 2017 kamu harus mungunjungi situs resmi yandex

Cara Mendaftarkan Blog Atau Website Ke Yandex Terbaru 2017

Baca Juga

>Cara Daftar Blog/web Baru Ke Google Analytics 2017 
>Cara Mendaftarkan Blog Ke Norton Terbaru 2017 


Pertama silahkan anda kunjungi halamanya Yandex.com

Klik Registrasi jika belum memiliki akun yandex, jika sudah silahkan klik Log In.

Pastikan anda mengisi formulir pendaftaran dengan lengkap

Jika sudah lengkap silahkan kamu klik tombol daftar akan muncul seperti gambar di bawah ini

Klik Tombol Negatif yang berada di pojok kiri atas seperti gambar di atas tersebut.
Selanjutnya kamu masukan Url/Domain Blog kamu ke dalam Kotak (seperti kotak gambar yang saya sudah beri tanda box merah) , Jika sudah selesai silahkan kamu Klik Add

Selanjutnya

Silahkan Kamu Compas Code Meta Tag Seperi dalam gambar di atas

Memasang Pada Blog/Website

>Silahkan masuk ke Blogger Kamu
>Lalu pilih Template==>Edit Html
>Pada Area Html Silahkan kamu cari code <head> Lalu paste kan meta tag tadi tepat sesudah kode <head>
>Untuk Mempercepat Pencarian Code silahkan kamu Klik

Ctrl

+

F

>Terakhir Silahkan Kamu Save Template Oky Mungkin Ini aja yaa pencjelasan kali ini, jika masih belum mengerti silahkan kamu berikan pertannyaan ( Comment ) anda di bawah ini.

Cara Mendaftarkan Blog Ke Norton Terbaru 2017

Oky kali ini kita akan membahas tentang : Cara Mendaftarkan Blog Ke Norton Terbaru 2017. Untuk web/blog baru wajib mendaftarkan blog ke Norton ini, agar nantinya jika sudah terpasang tag dari norton, norton dapat mengakses atau memonitoring web sebagai keamanan 24jam. sebelumnya juga kamu harus mendaftarkan blog kamu ke Bing Webmaster, Search Console, pengharusan ini bukan semata-mata di buat, akses ini di buat untuk meningkatkan visitor pengunjung blog, pengamanan blog, dll

Cara Mendaftarkan Blog Ke Norton Terbaru 2017

Jika belum mendaftar ke google analytics silahkan kamu klik link berikut Cara Daftar Blog/web Baru Di Google Anlytics Terbaru 2017.

Cara Mendaftarkan Blog Ke Norton Terbaru 2017

Sebelumnya silahkan kunjungi dulu situs norton Silahkan kamu pilih masuk atau daftar terlebih dahulu (Log In atau Sign Up) persis seperti gambar di bawah

Cara Mendaftarkan Blog Ke Norton Terbaru 2017

Pastikan anda mengisi formulir pendaftaran selanjutnya

Jika sudah silahkan kamu pilih creat lalu pilih add url seperti gambar di bawah ini

Cara Mendaftarkan Blog Ke Norton Terbaru 2017

lalu masukan Url/domain anda seperti gambar di bawah ini

silahkan kamu masukan url/domain kamu lalu pilih ADD Pilih verify your site, untuk mengkonfirmasi/mendapatkan tag html untuk di pasang ke blog.

Lalu silahkan kamu compas code seperti gambar di bawah ini.

Memasang Meta Tag Di Blog

>Buka Blogger lalu pilih Template
>Lalu Pilih Edit Html
>Cari Code </head> Paste Code tadi Sebelum Code </head>
>Untuk Mempercepat Pencarian Code Silahkan Kamu Klik

CTRL

+

F

Pada Keyboard Kamu.
>Jika Sudah Silahkan Kamu Klik Simpan/Save Template Mou
Selamat Blog Kamu sudah Berhasil terdaftar di Norton

Cara Daftar Blog/web Baru Ke Google Analytics 2017

Cara Membuat Widget Like Melayang Di Blogger

Taukah kamu bahwa blog yang baru di buat wajib di daftar kan ke Google Analytics, Yaaa Kami menyarankan anda untuk mendaftarkan blog baru atau newbe dalam bahasa tren nya.
agar google analytics dapat mengetahui asal visitor (pengunjung) blog, apalagi blog baru (masih muda) karna itu lah, kamu harus mendaftarkan blog  kamu ge google analytics agar nantinya google dapat mengindex pengunjung lama berkunjung, lokasi dll. nah kali ini saya akan membagikan tutorial Cara Daftar Blog/web Baru Ke Google Analytics 2017 Simak langsung di bawah ini.

Cara Daftar Blog/web Baru Ke Google Analytics 2017

Untuk mendaftarkan Blog ke Google Analytics kunjungi situs resminy dulu, silahkan log in (masuk) jika sudah punya email analytics namun jika belum silahkan kamu sign up terlebih dahulu (mendaftar)

klik daftar seperti gambar di atas.

Pastikan anda mengisi formulir pendaftaran selanjutnya

Isi formulir dengan lengkap, jika sudah selesai silahkan anda klik tombol

, lalu kamu compas code HTML yang sudah di sediakan seperti gambar di bawah ini

Maaf saya blur gambarnya karna tidak ingin terkena virus hacker, yang pasti silahkan anda compas kode persis pada kolom yang saya tandai warna hitam. jika sudah anda compas silahkan anda pastekan code tadi tepat sesudah code <body> untuk mempercepat pencarian silahkan anda klik tombol

Ctrl

+

F

oky mungkin sampe ini saja, kalo masih ada yang di bingungkan silahkan meninggalkan komentar anda di bawah ini.

Template Blogger Mirip Nekonime

Thnks To : Arleth98

• LIVE DEMO
• DOWNLOAD

Notifikasi Adblocker Adsense Ala Kompi Ajaib

Salam Blogger, kali ini Arlina Design akan berbagi tutorial cara memberikan notifikasi adblocker adsense saat pengguna mengakses blog dan mengaktifkan ekstensi adblock di browser.

Tutorial ini saya dapat dari blog Kompi Ajaib yang dikelola oleh admin +Adhy Suryadi yang senantiasa memberikan trik dan tips blogger yang bermanfaat dan beliau sangat menginspirasi saya untuk membangun blog menjadi lebih baik. Mengenai penjelasan kenapa sobat perlu Menambahkan Notifikasi Adblocker Adsense di dalam blog sobat bisa mengunjungi sumbernya di https://www.kompiajaib.com/2016/07/membuat-notifikasi-untuk-pengguna.html
Selengkapnya »