Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Cara Share Postingan Blog ke Facebook Otomatis

Cara Share Postingan Blog ke Facebook Otomatis

Dulu ada banyak cara share artikel langsung ke Akun Facebook kita, namun saat ini cara cara share artikel melalui pihak ke tiga sudah tidak bisa lagi digunakan. Dan jika menggunakan cara manual tentu akan menghabiskan banyak waktu untuk melakukan itu. Terkadang Facebook-pun akan menganggap spam jika URL artikel yang dilampirkan tidak sesuai dengan kebijakan ( Term of Service ) pihak Facebook.

Cara ini sebenernya sedikit ribet, namun hanya sekali dilakukan dan untuk seterusnya artikel blog akan secara otomatis share ke akun Facebook kita dan cara ini masih UPDATE di 2018 artinya masih WORK ! untuk share artikel Blog secara otomatis. Cara yang kita lakukan adalah membuat artikel share ke Twitter terlebih dahulu kemudian men-setting Twitter agar secara otomatis artikel tersebut share juga langsung ke Akun Facebook kita.

Cara Share Postingan Blog ke Facebook Otomatis

Langkah pertama : Silahkan aktifkan FeedBurner Blog Sobat dengan mendaftarkan feed blog Anda.

Feed blog URL seperti kode berikut: http://NamaBlogAnda/feeds/posts/default

Setelah FeedBurner blog Sobat aktif, silahkan pilih tab Publicize lalu pilih menu Socialize, aktifkan fitur ini lalu hubungkan akun Twitter Sobat. Dengan begitu FeedBurner akan otomatis share update post ke akun Twitter Sobat.

Cara Share Postingan Blog ke Facebook Otomatis


Langkah kedua, kemudian silahkan hubungkan akun Facebook pada akun Twitter agar ketika update post masuk dari FeedBurner ke Twitter, maka Twitter akan otomatis meneruskan postingan ke Facebook.

Silahkan masuk ke Setting akun Twitter Sobat lalu pilih menu Apps dan kemudian hubungkan akun Facebook Sobat.

Cara Share Postingan Blog ke Facebook Otomatis

Selesai... selamat mencoba dan semoga bermanfaat.

Cara Membuat Content Pagination di Blogger seperti Wordpress

Cara Membuat Content Pagination di  Blogger seperti Wordpress

Content Pagination berfungsi membagi sebuah konten menjadi beberapa halaman dengan menampilkan pager angka sesuai banyak halaman yang dibuat ( umumnya tampilan ini banyak digunakan oleh Template berplatform Wordpress ) sehingga memudahkan navigasi pengunjung untuk melihat konten selanjutnya.

Content Pagination yang diterapkan di blogger ini menggunakan Javascript, tanpa memerlukan jquery library sehingga tidak akan banyak mengganggu loading halaman blog. Ketika pengunjung mengklik pager untuk membaca konten selanjutnya, maka selain konten yang berganti juga otomatis mereload halaman sehingga otomatis konten berikut iklan yang ada di halaman juga ikut berganti.

Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.
Silahkan gunakan ( masukkan ) kode berikut ini pada postingan mode HTML untuk membuat postingan dengan content pagination ini.

 <style>
.button-box{margin:30px 0;text-align:center;}
#page1,#page2,#page3,#page4,#page5{display:none}
#page1.current{display:block}
a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
a.button-pager.current{background:#333;color:#fff;}
</style>

<div id='topcontent'></div>

<div id="page1" class="current">
Kontent untuk halaman 1 tulis di sini......
</div>

<div id="page2">
Kontent untuk halaman 2 tulis di sini......
</div>

<div id="page3">
Kontent untuk halaman 3 tulis di sini......
</div>

<div id="page4">
Kontent untuk halaman 4 tulis di sini......
</div>

<div id="page5">
Kontent untuk halaman 5 tulis di sini......
</div>

<div class="button-box">
<a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
<a class="button-pager" id="button2" href="?page2#topcontent">2</a>
<a class="button-pager" id="button3" href="?page3#topcontent">3</a>
<a class="button-pager" id="button4" href="?page4#topcontent">4</a>
<a class="button-pager" id="button5" href="?page5#topcontent">5</a>
</div>

<script>
//<![CDATA[
var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
//]]>
</script>

Silahkan sesuaikan pembagian konten halaman dan tombolnya sesuai keinginan. Namun Sobat juga bisa menyimpan style CSS dan javascript-nya pada edit HTML agar lebih simple ketika membuat postingannya.

Semoga bermanfaat.

Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !


Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !

Pada umumnya situs situs atau blog masih banyak yang menggunakan breadcrumb dengan markup data-vocabulary.org. Ketika markup microdata schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan oleh google, ada baiknya kitapun mengikuti apa yang direkomendasikan oleh Google .

Google Search menggunakan markup breadcrumb dari sebuah halaman web untuk mengkategorikan informasi dari halaman dalam hasil pencarian. Dengan begitu, pengguna dapat tiba di suatu halaman dan pengguna dapat kembali ke halaman web yang sama dengan kategori yang sama dengan halaman sebelumnya.

Kali ini saya akan membagikan cara membuat breadcrumb untuk Blogger dengan menggunakan markup microdata schema.org dengan menambahkan ikon SVG sebagai separator pada tiap tiap labelnya.

Untuk mengganti atau membuat Membuat Breadcrumb dengan Microdata Schema.org, silahkan ikuti langkahnya berikut ini :

1. Cari kode ]]></b:skin> Jika sebelumnya sudah ada kode CSS yang mirip seperti itu, silahkan ganti dengan kode CSS style dibawah ini :
 /* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666} 

2. Silahkan cari kode seperti dibawah ini

 <b:includable id='breadcrumb' var='posts'>
.......................
.......................
.......................
</b:includable> 


Jika sudah ketemu, silahkan ganti dengan kode di dibawah ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog#pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post#labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema#org/BreadcrumbList'>
<a expr:href='data:blog#homepageUrl' title='Home'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span>Home</span></a>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label#na#e' itemprop='item' itemscope='itemscope' itemtype='https://schema#org/Thing'>
<span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:num+1' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if></b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable> 

3. Terakhir, simpan template...
Selamat mencoba dan semoga bermanfaat.

Update Artikel Blog Tidak Harus Tiap Hari !

Update Artikel Blog Tidak Harus Tiap Hari !

Update artikel yang baik dan efisien ? pertanyaan ini mungkin ada disetiap benak para Sobat Blogger. Apakah harus setiap hari Update artikel di blog?  Update artikel baru yang menarik dan informativ selayaknya dilakukan oleh seorang blogger  agar dapat selalu memantau blognya agar tidak kehilangan pembaca, dan tentu bagi pemula atau blogger pro menginginkan trafik Blog agar berjalan stabil atau bahkan merangkak naik.

Bagaimana dengan Algoritma baru RankBrain  ? Penjelasannya ada setelah Anda selesai membaca artikel ini

Apakah menulis Blog harus setiap hari ?

Pertanyaan ini memiliki banyak sisi atau segi pandang, jika memandang dari sisi mesin pencari bisa di bilang BAIK juga bisa dibilang BURUK. Lho kok bisa begitu….?

Kita kembali pada sisi konten yang kita buat, konten haruslah menarik dan informative bagi pengunjung Blog, jika Anda membuat konten yang kurang menarik dan tidak informatif tentu pembaca akan dengan sendirinya menjauhi situs yang sedang Anda kelola.

Membuat artikel butuh waktu,materi artikel, analisa dll sehingga jika ada pertanyaan dari para 
Sobat Blogger Anda mampu menjawab pertanyaan atau solusi para pembaca setia Anda, itu yang menjadi harapan pembaca. Karena pengunjung Blog tidak hanya sekedar membaca artikel, namun butuh penjelasan serta solusi jika mereka menemui permasalahan terkait artikel yang Anda buat.

Jika Sobat setiap hari membuat artikel atau konten yang kurang menarik dan informatif ( hasil copas misalnya ) tentu Mesin Pencari akan secara otomatis tidak menempatkan artikel Anda diposisi teratas.

Terlalu sering menerbitkan konten juga akan membuat kualitas konten anda menjadi lebih buruk, karena untuk menulis sebuah artikel memerlukan beberapa referensi dan penelitian jika anda ingin memberikan sesuatu yang lebih menarik dan bermanfaat untuk pembaca.

Sekali saja pengikut anda membaca konten yang kurang baik atau menarik dari blog anda, salah satu dari pembaca setia Blog Anda pasti akan berhenti mengikuti anda selamanya.

Jadi membuat artikel atau UPDATE ARTIKEL setiap hari tidak bisa diterjemahkan secara mentah tanpa memperhatikan sisi kwalitas konten atau artikel yang kita buat. Kwalitas konten atau artikel tetap menjadi prioritas utama !!!

Bagaimana jika Anda jarang update artikel di blog ?

Kita berharap Blog yang kita kelola memiliki pengikut yang banyak. Dan pengikut Blog itu sediri bergantung dari kwalitas artikel yang Anda buat. Pengikut blog tidak akan menemukan nilai apa apa jika Anda sendiri jarang menulis atikel buat pengikut Blog Anda.

Nah kembali lagi…..Mereka mengikuti Blog Anda karena kwalitas konten ! perlu digaris bawahi sekali lagi kwalitas konten atau artikel adalah prioritas utamanya. Dengan anda jarang update artikel di blog, tentu mereka tidak akan menemukan nilai lebih dari Blog Anda lalu pergi meninggalkan Blog yang sedang anda kelola.

Tidaklah baik jika Anda harus vacum berbulan bulan tanpa artikel menarik dan jangan jangan ketika Anda memposting sebuah artikel menarik buat mereka ( para pembaca Blog Anda ) mereka malah sudah pergi jauh meninggalkan Blog Anda. Dan akan lebih sulit lagi jika mereka sudah tidak lagi mengikuti Blog Anda karena para pengikut Blog Anda tak lagi menemukan artikel menarik yang biasa mereka temukan .

Setidaknya Anda tak terlalu lama vakum dan membiarkan Blog Anda tanpa artikel menarik, dan tidak semestinya update artikel setiap hari tanpa kwalitas.

Algoritma baru RankBrain menjelaskan bahwa signal sosial amat berpengaruh untuk menentukan peringkat suatu blog.

Jika anda mempunyai anggapan bahwa semakin sering kita menulis artikel maka semakin baik pula peringkat blog tersebut. Menurut Algoritma baru RankBrain akan menjadi opini yang salah karena algoritma baru RankBrain menjelaskan bahwa signal sosial sangatlah berpengaruh untuk menentukan peringkat suatu blog.

Signal sosial yang dimaksud disini adalah nilai bounce rate yang rendah dan mempunyai banyak share ke sosial media.

Sebaliknya dengan terlalu lama vakum menulis artikel pun akan berdampak kurang baik karena bisa merusak keberadaan Blog anda di mata mesin pencarian seperti Google. Blog yang statis,diam  atau vakum dan tidak mempunyai konten yang segar,update atau menarik akan dianggap mati oleh google dan dampaknya akan menurunnya peringkat kata kunci artikel yang sebelumnya berada dipuncak halaman pertama Google.

Frekuensi update atau penerbitan artikel blog sepenuhnya bergantung kepada niche

Frekuensi update atau penerbitan artikel blog sepenuhnya bergantung kepada niche apa yang pengelola Blog  pilih. Misalnya jika anda mengelola sebuah Blog BERITA TERKINI maka semestinya Anda menerbitkan konten sehari sekali. Tapi jika anda mempunyai blog dengan niche lainnya ( selain di atas ), maka frekuensi yang ideal untuk menerbitkan artikel paling tidak 1 sampai 3 kali dalam seminggu.

Sebuah artikel tergantung dari materi apa yang sedang anda tulis, semakin sempurna pembahasan yang anda tulis maka anda membutuhkan waktu lebih lama untuk menerbitkan artikel di blog.

Artikel yang anda sajikan haruslah benar-benar informatif dan menarik untuk meningkatkan minat pembaca menelusuri lebih jauh lagi isi blog Anda. Semakin banyak kata yang kita tulis, berarti semakin banyak pula kata kunci yang tersebar di seluruhan artikel. Ini merupakan teknik SEO on page yang umum diterapkan agar artikel kita mampu bersaing dengan artikel yang membidik sasaran dengan kata kunci yang sama. Tidak hanya itu saja ada banyak faktor yang di gunakan google untuk menentukan peringkat suatu artikel. Termasuk di dalamnya seo on page dan seo off page.

Demikian informasi terkini yang sebenernya terkait dengan Algoritma baru RankBrain mengenai seberapa idealnya sih ..update artikel di blog. Dan informasi ini semoga bermanfaat bagi Sobat Blogger semuanya.

Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive

Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive

Salam Blogger, Kali ini CREPICTDGZ mau berbagi tips Bagaimana Cara Membuat atau Mengganti Header Blog Menjadi 2 Kolom dan tentunya Responsive. Mengganti yang dimaksud disini adalah HEADER BLOG yang sebelumnya hanya terdiri 1 kolom yaitu Judul dan Diskripsi blog saja, Nah… disini kita akan menggantinya menjadi 2 kolom yaitu KIRI yang terdiri Judul dan Header Blog dan KANAN umumnya sebagai kolom IKLAN atau ADSENSE.

Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive

Pada Tahap awal Sobat harus mencari kode CSS dan HTML yang terkait dengan HEADER BLOG yang ingin Sobat ganti pada Template sebelumnya…..lalu menghapusnya.
DISINI yang WAJIB Sobat Newbie lakukan adalah BACKUP TEMPLATE sebelum melakukan oprek kode CSS dan HTML dalam hal ini sambil belajar koding Newbie butuh ketelitian dan kehati-hatian  

Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive

Langkah 1

Cari kode CSS yang berkaitan dengan HEADER BLOG umumnya kode CSS seperti berikut ( #header atau .header dan pada body#layout #header dst) termasuk kode CSS yang ada pada Media Query dan jika sudah ketemu HAPUS semuanya….!

Langkah 2

Cari kode seperti dibawah ini atau mirip ( kode HTML Header Blog ini panjang )

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
...........
...........
...........
</b:section>
</div>

Jika sudah ketemu silahkan dihapus semuanya dan GANTI dengan kode yang ada dibawah ini.

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
  <b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='CREPICTDGZ (Header)' type='Header' version='1'>
      <b:widget-settings>
        <b:widget-setting name='displayUrl'/>
        <b:widget-setting name='displayHeight'>0</b:widget-setting>
        <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
        <b:widget-setting name='useImage'>false</b:widget-setting>
        <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
        <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
        <b:widget-setting name='displayWidth'>0</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
                <b:include name='title'/>
            </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'>
                <b:include name='title'/>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <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;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
          <b:include name='title'/>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
      <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
      <b:includable id='title'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h1 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'>
      <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
        <span itemprop='name'><data:title/></span>
      </a>
    </h2>
      </b:if>
</b:includable>
    </b:widget>
  </b:section>
  <b:section class='header-right section' id='header-right' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='clear'/>

Langkah 3

Kita mengganti semua kode CSS yang sudah kita hapus pada Langkah 1 sebelumnya :

1. Letakkan kode dibawah ini sebelum kode ]]></b:skin>

#header-wrapper {margin:20px;overflow:hidden;}
#header {float:left;width:100%;max-width:430px;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;
max-width:468px;}

2. Letakkan kode dibawah ini dibawah kode <b:template-skin>

body#layout #header-wrapper {min-height:0px;width:100%;}
body#layout #header {width:30%;}
body#layout #header-right {width:70%;}
#layout #header-wrapper{min-height:0px;width:100%;margin:10px 0 0 0;}

3. Kemudian letakkan kode dibawah diatas kode</head>

/* CSS Header Wrapper */
#header-wrapper {margin:30px auto;padding:0;overflow:hidden;max-width:920px;overflow:hidden;}
#header {float:left;width:100%;max-width:430px;color:#333;margin:0;}
#header h1, #header h2, #header p {font-family:Roboto;font-size:240%;font-weight:700;color:#333;text-transform:uppercase;}
#header a {color:#333;text-decoration:none;transition:all 0.3s ease-out;}
#header a:hover {color:#398dcc;}
#header .description {font-family:Roboto;font-size:100%;font-weight:400;color:#666;text-transform:none;line-height:normal;margin:0;}
.header img {display:block;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;
max-width:468px;}
.header-right img {display:block;}
.Header h1,.Header h2 {margin-bottom:0;}

@media screen and (max-width:960px) {
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
#header {margin:20px auto;padding:0 30px;background:transparent;max-width:80%;}
.header-right img, .header-right iframe{margin:0 auto;max-width:100%;}
#header-wrapper{padding:0;margin:20px auto;}}

@media only screen and (max-width:640px){
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
#header-wrapper{padding:0;margin:20px auto;}
#header {min-width:initial;background:none;margin:20px auto;padding:0 5px;}
#header .description {font-size:100%;line-height:1.5;}}

Langkah 4

Save atau Simpan Template… Selesai

Demikian Tutorial Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive, Jika permasalah terkait dengan tips diatas silahkan isikan problem serta keluhan pada kotak komentar atau hubungi Admin melalui Kontak Form yang tersedia….Terima kasih , semoga bermanfaat….

Jangan lupa share ya…Sob

Cara Membuat Kotak Kode Script untuk Posting Blog

Cara Membuat Kotak Kode Script  untuk  Posting Blog

Tutorial kali ini cocok bagi Sobat Blogger yang suka berbagi kode semacam HTML,CSS,Javascript,jQuery pada posting Blognya. Sebenernya cara yang akan saya berikan ini tidak jauh beda dengan pembuatan Synthax Hightlighter yang sudah umum kita temukan tutorialnya.

Namun kali ini saya membuat kotak kode yang lebih sederhana ( simple precode disertai seleksi ) dan memiliki fungsi yang sama dan tampilan yang tidak kalah menariknya di banding Synthax Hightlighter .

Pada konsepnya simple precode ini sama fungsinya dengan Synthax Hightlighter. Langsung aja kepada tahan dan proses pembuatan simple precode dengan seleksi. Sobat bisa melihat DEMO dibawah ini

Cara Membuat Simple precode dengan seleksi

1. Buka Blogger > Template > Klik Edit HTML > Simpan kode CSS di bawah ini sebelum ]]></b:skin>  atau </style>

/* CSS Simple Pre Code */
pre {background: #fff;white-space: pre;word-wrap: break-word;overflow: auto;}
pre.code {margin: 20px 25px;border: 1px solid #d9d9d9;border-radius: 2px;position: relative;box-shadow: 0 1px 1px rgba(0,0,0,.08);}
pre.code label {font-family: sans-serif;font-weight: normal;font-size: 13px;color: #444;position: absolute;left: 1px;top: 16px;text-align: center;width: 60px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;pointer-events: none;}
pre.code code {font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display: block;margin: 0 0 0 60px;padding: 15px 16px 14px;border-left: 1px solid #d9d9d9;overflow-x: auto;font-size: 13px;line-height: 19px;color: #444;}
pre::after {content: "double click to selection";padding: 0;width: auto;height: auto;position: absolute;right: 18px;top: 14px;font-size: 12px;color: #aaa;line-height: 20px;overflow: hidden;-webkit-backface-visibility: hidden;transition: all 0.3s ease;}
pre:hover::after {opacity: 0;visibility: visible;}
pre.code-css code {color: #0288d1;}
pre.code-html code {color: #558b2f;}
pre.code-javascript code {color: #f57c00;}
pre.code-jquery code {color: #78909c;}

2. Berikutnya simpan script di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Script di atas berfungsi untuk menyeleksi otomatis setiap pengunjung blog Anda  melakukan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

3. Setelah itu simpan template.

Cara penerapan pada postingan Blog

Silakan tambahkan kode di bawah ini pada tab HTML post

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Demikian Tutorial Cara penerapan Simple Pre Code dengan Seleksi pada Posting Blog.
Dan apabila Sobat mendapati kendala silahkan tulis kendala/problem pada kotak komentar dibawah….

Semoga bermanfaat.

Cara Menampilkan tombol Pin It ( Pinterest ) pada Gambar Blog

Cara Menampilkan tombol Pin It ( Pinterest ) pada Gambar Blog

Salam Blogger, Ok kali ini CrepictDGZ akan memerikan tips cara menampilkan tombol Pin It (Pinterest ) otomatis ketika gambar blog disentuh.


Fungsi dari tombol Pin It ini adalah untuk membagikan gambar blog kita secara langsung ke akun Pinterest milik pengguna atau pengunjung Blog, yang secara otomatis Artikel blog kita di share ke dalam Akun Pinterest pengunjung Blog. Cara kerja dari Tombol share Pin It ini yaitu tombol akan muncul saat sobat memfokuskan kursor pada setiap gambar di dalam blog.


Bagaimana Cara Menampilkan Logo Pin It pada Gambar Blog ?

Sebenernya caranya amat sangat simple dan sederhana, Sobat cukup menambahkan kode dibawah ini sebelum kode </body>

<script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/>

Kemudian Save atau Simpan Template…… Selesai

Selamat mencoba semoga bermanfaat….

Cara Sederhana Mempercepat Loading Blog

Cara Sederhana Mempercepat Loading Blog

Banyak dari sahabat Blogger yang mengeluhkan lambatnya proses loading blog ketika di akses, bahkan ketika di test pada Speed page insight Google juga dapat skor yang tidaK MEMUASKAN.

Umumnya masalah yang terjadi adalah terlalu banyakknya template dengan Javascript, CSS, dan Widget Bundle bawaan Blogger. Kebanyakan  pengguna tidak sadar dengan memasang terlalu banyak widget yang didalamnya menyimpan ( CSS dan Javascript ) sebenernya berpengaruh besar terhadap loading Blog ketika di akses.

Dibawah ini adalah contoh link Javascript Bundle dan CSS Bundle bawaan yang sebenernya kita tidak begitu butuh namun terpasang pada template ber-platform blogspot.

<!-- dibawah ini contoh link yg memperlambat loading blog -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>

<script type='text/javascript' src='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-widgets.js'></script>

<link href='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-css_bundle_v2.css' rel='stylesheet' type='text/css'/>

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=33xxxxxxxx=33xxxxxxxx8'/>

Bagaimana Cara Hapus JS, CSS, Bundle dan Widget Bundle di Blogger

Silahkan masuk ke Akun Blogger >> Theme >> Edit HTML.

Silahkan cari kode <head> silahkan ganti dengan kode dibawah ini

&lt;!--<head>--&gt;&lt;head&gt;

Silahkan cari kode </head> kemudian ganti dengan kode dibawah ini

&lt;!--</head>--&gt;&lt;/head&gt;

Lanjut cari kode <body> .Kemudian ganti dengan kode sperti dibawah inisilahkan ganti dengan kode dibawah ini

&lt;!--<body>--&gt;&lt;body&gt;

Lalu cari kode </body>  silahkan ganti dengan kode dibawah ini

&lt;!--</body>--&gt;&lt;/body&gt;

Kemudian cari kode <b:skin><![CDATA[  lalu ganti dengan kode dibawah ini:

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[

Simpan template

Bagaimana cara cek hasilnya ?

1. Silahkan tulis atau copy pastekan link ini : view-source:http://nama-blog-anda.blogspot.com/ pada address bar ( browser anda ) lalu tekan enter. Untuk nama-blog-anda silahkan ganti dengan URL blog milik anda yaaa….

2. Silahkan scroll kebawah dan lihat hasilnya kode Javascript, CSS, dan Widget bawaan Blogger berubah menjadi warna hijau.. Kode yang berwarna hijau tersebut akan dianggap sebagai HTML comment tag dan tidak lagi dieksekusi sebagai script.

3.Untuk cek Speed loading Blog silahkan cek disini

Selesai, semoga bermanfaat.....

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

CrepictDGZ berbagi lagi, kali ini saya akan memberikan Tips Cara Mempercepat Loading Blog dengan menggunakan Ikon SVG. Selama ini Fontawesome adalah ikon yang umum digunakan dalam setiap desain template ( termasuk desain saya sendiri ) hehehehe… ntar ja templatenya diupdate, maklum lagi sibuk kerja.

Namun ada sisi yang kurang enak dengan memasang FontAwesome yaitu memperlambat loading blog. Karena dengan menggunakan  Font Awesome template harus manggil script sebelum menampilkan Ikon FontAwesome. Pemanggilan script eksternal jadi salah satu point penting yang perlu dipertimbangkan bagi pengguna platform Blogger yang tidak bisa mengatur cache dan expired header. FontAwesome memang tak memperlambat blog secara signifikan, namun untuk test page speed loading akan berdampak pada score saat dilakukan test seperti di GTMetrix atau Google Page Speed Insight dll.

Dari judul diatas berarti Anda harus mengganti penggunaan Ikon FontAwesome yang sebelumnya terpasang di Blog dengan SVG ikon.

Contoh HTML script Font Awesome yang terpasang di template seperti dibawah ini :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Dan Anda wajib menghapus kode diatas jika sudah mempergunakan SVG Ikon.

Bagaimana Cara Memasang Ikon SVG di Blog ?

Kita harus masuk ke situsnya untuk mendapatkan Ikon SVG yang akan kita pasangkan di Blog. Silahkan masuk ke  Material Design Icon. Disini Anda bisa milih berbagai jenis icon SVG yang akan kita pasangkan di Blog dengan mengambil kodenya untuk dipasangkan pada template blog.
Cara Memasang Ikon SVG untuk Mempercepat Loading Blog
Silahkan klik pada ikon yang dipilih. Pilih toggle kode '</>' lalu pilih view SVG maka akan tampil kotak dengan kode seperti di bawah ini sebagai contoh saya akan mengambil ikon Account-Multiple.

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

Kemudian simpan kode SVG di atas pada Edit HTML template. Saya akan contohkan misalnya Anda ingin mengganti  ikon "account" pada link profil ( yang masih menggunakan FontAwesome ) di rubah ke SVG ikon Account-Multiple seperti .

Pada umumnya kode HTML ikon link profile adalah seperti dibawah ini
 <span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
               <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                        <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </span>

Setelah Anda tambahkan Kode dari SVG ikon akan tampak seperti dibawah ini 

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Pastekan dibawah kode SVG ikon -->
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG ikon -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Supaya gambar SVG pas ukuran baik tinggi dan lebarnya di Blog, maka kita pindahkan inline style-nya style="width:24px;height:24px" dan fill="#000000" ke dalam style CSS menjadi seperti dibawah ini

.post-author svg {width:24px;height:24px;}

Dengan menghapus inline style dan menggantinya dengan kode CSS di atas diharapkan kita bisa dengan mudah mengatur besar kecil ukuran ikonnya.
Dan jika ingin mengganti warna ( fill="#000000" )  pada ikon-nya, kita gunakan css berikut.

.post-author svg path {fill: white;}

Penting : Jika Anda sudah menambahkan style CSS seperti diatas, maka kode HTML SVG ikon diatas harus di revisi/ganti ( lihat HTML SVG ikon langkah sebelumnya diatas ). Maka perubahannya adalah seperti dibawah ini

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Jika sudah memasang kode style CSS kode SVG seperti ini -->
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG  -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Demikian Tutorial Cara Menggunakan Ikon SVG untuk Mempercepat Loading Blog, meski mungkin sulit dipahami bagi Sahabat Newbie namun belajar dari kesalahan adalah cara bagaimana agar kita tahu dan menemukan cara yang benar.

Sekian dan Semoga bermanfaat…

Membuat Tombol Download dengan Countdown Timer Responsive

Membuat Tombol Download dengan Countdown Timer Responsive

Salam Blogger, CrepictDGZ kali ingin berbagi tips bagaimana cara membuat tombol download dengan disertai countdown timer ( hitung mundur ). Maksud dari countdown timer disini adalah hitungan mundur setelah tombol download di klik, sebelum menuju ke link download yang sebenernya…nanti bisa dilihat demonya biat lebih jelas.

Keuntungan dari countdown timer adalah membuat space waktu kepada pengunjung selama 10 detik, tentu waktu ini akan memberikan sedikit peluang kepada Adsense ( iklan ) yang ada di Blog kita.

Lebih cocok tombol semacam ini dipasang pada Blog Download Software atau bagi-bagi Aplikasi Andoid.

DEMOBLOGDEMO on Codepen

Membuat Tombol Download dengan Countdown Timer Responsive

1. Silahkan masuk ke Akun Blogger Sobat lalu masuk ke menu Tema >> Edit HTML

2. Simpan kode dibawah ini sebelum kode < /head>

/*Auto Download with Countdown Timer*/
#btn{cursor:pointer;margin-top:10px;padding:10px 20px;border:none;border-radius:3px;background:#fdfdfd;color:#3cc091;float:right;text-transform:uppercase;font-size:16px;font-weight:600;text-shadow:none;}
#btn:hover, a#download:hover{background:#3cc091;margin-top:10px;color:#fff;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;  -ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.dgzwrap{display:block;width:100%;margin: 20px auto;border-radius:4px;font-family:&#39;Poppins&#39;, sans-serif}
.dgz-wrap1{background:#576269;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;margin-bottom:2px}
.size-wrap{color:#fff;display:inline-block;font-size:1.5em;font-weight:700;line-height: 38px;text-align:left}
.bottom-wrap{padding:10px 20px;background:#3cc091;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#fff}
#download{float:right}
a#download{padding:10px 20px;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;text-align:center}
.title-wrap span{display:inline-block;line-height:38px;float:right;margin-top:10px;background:#3cc091;padding:0 10px;border-radius:3px;}
.area-size{display:block}
.area-size span{margin-right:3px}
.post-labels, .post-timestamp{display:none}
a.home-link{color:#555;font-size:20px;}
a.home-link:hover{color:#222}
@media screen and (max-width:600px){
.dgzwrap{float:none;width:100%}}
@media screen and (max-width:320px){
.size-wrap{display:block;text-align:center}
#btn, a#download{width:100%;margin-bottom:10px}
.title-wrap span{float:none;width:100%;text-align:center}
.area-size{text-align:center}
}

3. Kemudian simpan kode dibawah ini diatas kode < /body>

<script type='text/javascript'>
//Download button with Countdown Timer by crepictdesign.blogspot.co.id
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 10;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
   
        } else {
            teks_waktu.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> " + "File siap diunduh dalam " + "" + waktu.toString() + " Detik....";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>

4. Simpan Template Sobat..

Penerapan Tombol Download Countdown Timer pada Posting Blog

1. Silahkan membuat artikel terkait dengan tombol download yang nanti akan Sobat pergunakan, Setelah selesai letakkan kode dibawah dimana Sobat ingin meletakkan, semisal dibawah artikel Blog ( seperti gambar diatas ).
Untuk menulis Artikel tetap pada menu compose ya…..Sob

2. Untuk meletakkan kode Download dibawah ini silahkan masuk ke HTML ( jangan Compose )

<div class="dgzwrap">
<div class="dgz-wrap1">
<div class="title-wrap">
<div class="size-wrap">
Whatsapps 3.1.200.1 Apk
</div>
<button onclick="generate()" id="btn">Download</button>
<a id="download" href="https://crepictdesign.blogspot.co.id/" style="display:none"> Try Again</a>
</div>
<div class="area-size">
<span class="uploader"></span> <span class="file-size">
 File Size 89 MB</span>
</div>
</div>
<div class="bottom-wrap">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.
</div>
</div>


Membuat Tombol Download dengan Countdown Timer Responsive


3. Copy dan pastekan kode diatas, dibagian paling bawah artikel Blog Sobat ( masih pada posisi HTML bukan Compose ), lalu tekan “Preview/Pratinjau”. Jika sudah sesuai silahkan tekan “Publikasikan/Publish”.

4. Selesai….

Selamat mencoba..

Mau Beli Domain Name di Google Domains ?

Mau Beli Domain Name di Google Domains

Kira kira akhir Agustus 2017 lalu Google meluncurkan Google Domainsnya di Indonesia.Google domain ini sebenernya diluncurkan pertengahan April 2016 namun hanya tersedia dibeberapa Negara saja, namun tidak untuk Indonesia pada waktu awal peluncurannya.

Kita akan mengetahui lauch Google Domain ini ketika membuka Akun Blogger Dashboard yang masih menggunakan custom domain ( masih blogspot ), maka akan muncul popup seperti dibawah ini.

Popup Google Domains

Disini pengguna custom domains atau Admin Blog yang masih menggunakan Custom Domains akan diberikan tawaran atau pilihan yang tertera pada popup ketika kita meng-klik tombol search. Berikut contoh nama domain anda dan extensinya

Daftar nama domain dan harga di Google Domains

Dalam popup sebelah kanan terlampir harga sekaligus jangka waktu dari expired domain tersebut. Jangan kaget harganya memang sedikit lebih mahal dibanding penyedia domain yang lain seperti namecheap,hostgator atau penyedia domain lokal.

Namun kita bisa mempertimbangkan hal yang lebih menguntungkan jika membeli domain name yang disediakan oleh Google sendiri Tentu kita tak lagi memikirkan problem jika dibanding membeli domain name diluar yang tentu akan berpengaruh jika terjadi masalah dengan server Si penyedia domain.

Nah Jika Google sendiri yang menyediakan domain name, mungkin lebih sedikit kekwawatiran kita tentang gangguan server.

Jika Anda tertarik untuk membelinya silahkan klik tombol BUY pada domain yang Anda pilih, kemudian Anda akan di arahkan pada halaman pendaftaran seperti pada gambar di bawah ini.

Formulir Pendaftaran di Google Domain

Kemudian Anda  tinggal isi formulir yang disediakan dan ikuti langkah-langkahnya.Harga yang ditampilkan adalah dalam bentuk Rupiah ( IDR ) yang pembayarannya bisa Anda lakukan via transfer Bank Lokal di Indonesia.

Mungkin akan menjadi kabar yang lebih baik lagi jika Kita membeli domain name dari Google ini tanpa harus men-setting custom domain ( langsung berubah extensi domainnya ke com,net,info ) tidak seperti ketika kita membeli domain TLD dari penyedia domain pada umumnya lalu masih mensetting lagi di dashboard Blogger yang mungkin  masih dianggap ribet oleh Blogger Newbie.

Saya kira Google sudah memikirkan apa yang terbaik bagi penggunanya…

Cara Agar Blog BARU Lebih Cepat di INDEX Google

Cara Agar Blog BARU Lebih Cepat di INDEX Google

Sebelumnya, bagi Sobat Newbie mohon dibaca dan dicermati sampai selesai tutorial ini yaa…..InsaAllah lengkap. Dari cara Verifikasi blog,Submit Sitemap Blog, Submit Artikel,dan setting robot.txt.

Selamat Siang Sobat Blogger semuanya, Crepictdgz kali ini akan berbagi tips Cara Agar Blog Lebih Cepat di INDEX Google . Cara ini wajib dilakukan oleh Blog baru, jadi setiap Blog baru wajib melakukan hal hal seperti yang akan saya jelaskan nanti dibawah….

Pada umumnya Blogger newbie hanya sekedar membuat Blog, posting dan selesai. Maklum membangun wawasan butuh waktu,kesungguhan dan tekad. Kali ini saya akan memberikan cara bagaimana sih membuat Blog baru yang baik dan sesuai prosedur agar artikel yang kita posting lebih cepat ter-index oleh mesin pencari Google.

Prosedur atau cara membuat Blog baru cepat ter-index Google

Yang Sobat lakukan setelah membuat Blog baru adalah, melakukan verifikasi dan semua ketentuan ketentuan di Google Seach Console  :

1. Verifikasikan Blog Baru Sobat di Google Search Console
2. Submit Sitemap Blog
3. Submit artikel Blog
4. Setting robot.txt

Tanpa melakukan hal diatas akan memungkinkan Blog Sobat tidak akan dikenali/dirayapi oleh mesin pencari Google, Otomatis artikel Blog Sobat tidak akan pernah muncul pada halaman pencarian Google… Secara logika karena ke 4 ketentuan ketentuan belum pernah kita lakukan sebagai standarisasi peng-index an mesin pencari.

Sebelumnya silahkan masuk ke Google Search Console.

1. Cara Verifikasi Blog

1. Selajutnya cari menu Property dan masukkan URL blog anda, seperti gambar dibawah.

Cara Agar Blog BARU Lebih Cepat di INDEX Google


2. Berikutnya klik gambar icon gerigi (pengaturan yang ada di sebelah kanan atas) kemudian pilih  menu Verification Details.

Cara Agar Blog BARU Lebih Cepat di INDEX Google


3. Anda kemudian akan masuk ke halaman Verifikasi. Selanjutnya klik Verify Using different method.

Cara Agar Blog BARU Lebih Cepat di INDEX Google


4. Berikutnya ada beberapa opsi pilihan, untuk blog anda pilih opsi HTML tag.

Disini Sobat akan mendapatkan kode verifikasi yang nantinya Sobat copy pastekan di Blog

Jangan Keluar dari halaman ini ya Sob, karena nanti setelah sobat selesai melakukan pemasangan kode Verifikasi pada Template Blog ( langkah dibawah ini ). Sobat perlu mem-verifikasikannya pada halaman ini….

 5. Copy kode yang Sobat dapatkan diatas dan masukkan/pasang di dalam Template blog.

Caranya :

Masuk ke blog anda, arahkan ke template, Pilih edit HTML, cari kode google-site-verification. Cara masukkan kode lihat gambar dibawah ini.

Cara Agar Blog BARU Lebih Cepat di INDEX Google


6. Selanjutnya klik Simpan pada template anda.

7. Silahkan Sobat kembali pada Langkah nomer 4 tadi, lalu klik Verify

8. Selesai.. artinya kita sudah melakukan prosedur pertama peng-index an.


2. Submit Sitemap Blog

Tetap pada halaman Google Search Console ya Sob..!

1. Pada Dashboard >> Crawl  >> Sitemap

Cara Agar Blog BARU Lebih Cepat di INDEX Google


2. Kemudian lihat pada pojok kanan atas test/add sitemap lalu klik

Cara Agar Blog BARU Lebih Cepat di INDEX Google


Silahkan masukkan salah satu  kode-kode di bawah ini pada kolom yang di sediakan

• sitemap.xml

• feeds/posts/default?orderby=updated

• atom.xml

Kode di atas bisa anda submit satu persatu atau satu saja cukup, tapi untuk hasil lebih baik silakan submit semuanya

3. Klik Test terlebih dahulu untuk memastikan apakah peta situs yang ingin kita kirim (error) atau tidak.

Setelah peta situs yang kita ujicoba ( test ) berhasil dirayapi oleh robot google tidak error, langkah selanjutnya klik Submit

4. Maka anda akan melihat tampilan yang menyuruh anda untuk merefresh halaman, klik pada “refresh the page”.

Sampai disini Sobat sudah sukses mengirim peta situs (sitemap) blog. Google akan menunda sementara waktu pengindex-an. Waktunya kurang lebih 24 jam sejak disubmit (didaftarkan). Namun dari pengalaman penulis, jika jumlah posting (artikel) blog masih sedikit (kurang dari seratus), waktu yang dibutuhkan paling lama hanya beberapa  jam. Artinya Langkah ke 2 cara peng-index an sudah Sobat lalui.

3. Submit Artikel Blog

Silahkan Sobat masuk di Submit URL

Cara Agar Blog BARU Lebih Cepat di INDEX Google

Silahkan Sobat masukkan link URL artikel Sobat misalnya seperti ini 

“https://crepictdesign.blogspot.co.id/2017/08/mengatasi-artikel-tidak-terindex-oleh.html

Jangan terlalu sering malakukan Submit URL (PING) Blog kita,untuk  mengantisipasi anggapan spam oleh mesin pencari. Sebenarnya kita sudah melakukan 2 prosedur diatas sudah cukup dalam aturan peng-index an Blog.

Cara Setting robot.txt


The Robot Exclusion Standard, atau sering kita kenal sebagai Robots Exclusion Protocol atau robots.txt protokol, adalah sebuah konvensi untuk mencegah web crawler bekerja sama dengan robot web lain untuk mengakses semua atau bagian dari sebuah website yang jika dilihat secara terbuka.

Robot sering digunakan mesin pencari untuk mengkategorikan dan mengarsip situs web, atau web master untuk mengkoreksi Source code. Dari beberapa artikel yang saya baca, penggunanan robot.txt ini sangat berguna dalam mengoptimalkan SEO blog.

Jika ada halaman yang tidak ingin kita tampilkan kepada publik dan mesin pencari maka kita bisa memanfaatkan fungsi robot.txt ini untuk memblokir halaman tersebut. Blogger sudah mendukung fungsi ini dan ini menunjukkan bahwa blogger semakin memudahkan kita untuk optimasi SEO blog.

1. Silahkan masuk ke Akun Blogger Sobat

2. Dashboard >> Setting >> Search preferences

3. Pada tab perayap dan pengindeksan pilih robot.txt.

Cara Agar Blog BARU Lebih Cepat di INDEX Google

4. Kemudian copy dan pastekan kode dibawah ini ke dalm kotak yang disediakan kemudian tekan “ Simpan perubahan

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://gantinamablogmu.blogspot.com/feeds/posts/default?orderby=UPDATED

 

Silahkan ganti tulisan http://gantinamablogmu.blogspot.com dengan URL Blog Sobat

5. Selesai….

Akhirnya semua tahap peng-index an standart sudah kita lalui, semoga Blog Sobat bisa secepatnya ter-index oleh Google. Semoga bermanfaat…..

Tutorial

SEO