inisiteku

Showing posts with label edit template blogger. Show all posts

Cara Host File JS Di Google Drive

Assalamualaikum.

Beberapa saat yang lalu saya sudah share cara menyimpan file JS di yourjavascript.com yang seharusnya berjudul cara host file JS online menggunakan situs javascript,karena terlalu panjang makanya saya singkat saja judulnya.

Di kesempatan kali ini saya akan share cara host file JS dengan memanfaatkan fasilitas penyimpanan dari Google yaitu Google Drive.

Seperti yang kita ketahui,Google Drive adalah media penyimpanan online milik google yang memiliki kapasitas penyimpanan yang besar,untuk dapat mengakses Google Drive anda harus memiliki akun Google.

Berikut cara host file JS di Google Drive

1.Pertama-tama anda silahkan anda kunjungi Google Drive,dengan menggunakan akun Google yang anda miliki.

2.Di Google Drive,silahkan anda upload file JS yang anda miliki,dengan cara klik unggah file (bahasa indonesia),seperti contoh gambar berikut ini.

3.Setelah anda berhasil mengupload file JS maka akan langsung muncul file JS yang anda upload tersebut,seperti contoh gambar dibawah ini.

4.Berikutnya,silahkan anda klik kanan pada file JS tersebut (apabila anda mmenggunakan PC dengan mouse),lalu klik bagikan seperti contoh gambar berikut ini.

5.Berikutnya akan muncul pop-up,silahkan anda klik lanjutan,seperti contoh gambar dibawah ini.

6.Berikutnya silahkan anda klik ubah pada peizinan siapa saja yang dapat mengakses file JS tersebut,seperti contoh gambar dibawah ini.

7.Berikutnya,silahkan anda pilih opsi yang publik,lalu anda klik simpan seperti contoh gambar dibawah ini.

8.Berikutnya,silahkan anda copy kode URL file JS yang dapat anda bagikan,seperti contoh gambar dibawah ini.

9.Kode URL file JS yang kita dapat dari google drive adalah seperti berikut ini.

https://drive.google.com/file/d/<span style="color: red;">0Bxxxxxxxxx-xxxxxxxxxxOEk/view?usp=sharing

Keterangan: Teks yang saya beri warna merah adalah nama file JS kita di google drive.

10.Agar kode dapat digunakan dan berjalan dengan baik,maka silahkan anda modifikasi kode tersebut menjadi seperti berikut ini.

https://googledrive.com/host/0Bxxxxxxxxx-xxxxxxxxxxOEk/

Keterangan: Teks yang saya beri warna merah adalah nama file JS kita di google drive.

11.Silahkan anda copy kode URL file JS yang sudah anda modifikasi tadi,dan kode sudah dapat digunakan dengan cara memasukkan di atas kode </head>pada template blogger.

Demikianlah tutorial sederhana tentang bagaimana caranya host file JS di google drive.

Semoga tutorial yang amat sederhana ini mudah difahami.

Terimakasih telah berkunjung dan semoga bermanfaat.

Assalamualaikum.

Selengkapnya ➢

Cara memasang ShareThis button di posting blogger

Assalamualaikum.

Beberapa saat yang lalu saya sudah share cara membuat share button radiculously responsive dibawah postingan blog.Di kesempatan kali ini saya akan share cara membuat share button dari situs sharethis yang memiliki style yang berbeda dari share button lainnya.

Fungsi dari pemasangan sharethis button ini ialah untuk menggantikan fungsi share buton bawaan blogger,karena share button bawaan blogger dinilai memiliki beberapa kekurangan dari segi style dan fungsi.

Untuk mendapatkan sharethis button secara aman ialah dengan mengunjungi situsnya terlebih dahulu untuk mendapatkan kode,lalu kode tersebut di masukkan kedalam template blogger.

Bagi anda yang ingin sekali memasang sharethis button di blog anda namun belum mengerti caranya,berikut langkah-langkahnya.

A.Cara mendapatkan kode sharethis button

1.Silahkan anda kunjungi situs www.sharethis.com,lalu lakukanlah registrasi,agar lebih cepat anda dapat menggunakan akun facebook dan google plus untuk masuk.

2.Dihalaman homepage sharethis.com,silahkan anda klik Get Tools,seperti contoh gambar dibawah ini.

3.Berikutnya anda akan diminta untuk memilih platform yang di gunakan,karena platform blogger disitu tidak ada maka silahkan anda pilih dan klik www (website),seperti contoh gambar dibawah ini.

4..Berikutnya akan muncul style share button yang sudah tersedia,silahkan anda pilih yang kira-kira anda sukai seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda lakukan kostumisasi share button yang akan anda gunakan,seperti contoh gambar dibawah ini.

Coba anda perhatikan gambar diatas,di halaman tersebut ada beberapa opsi yang cukup menarik,diantaranya adalah:

Selected Service,memungkinkan kita memilih dan menghapus layanan share button ke media sosial yang akan kita gunakan,kita dapat menggantinya sesuai dengan selera kita.
Sharing button,adalah layanan share button ke media sosial yang sudah disediakan oleh pihak sharethis,kita dapat memilih dan memindahkannya ke Selected Service.
Button Size,adalah ukuran dari share button yang akan kita gunakan,disana terdapat 2 size yaitu 16x16 (kecil) dan 32x32(besar).

6.Jika anda telah selesai mengedit? berikutnya silahkan anda klik Get Code.

7.Nanti akan muncul kode seperi contoh gambar dibawah ini.

Coba anda perhatikan gambar diatas.

Untuk nomor 1,silahkan anda pilih website tipe,http atau https,karena pada umumnya blogger menggunakan http,maka pilihlah yang http.
Untuk Nomor 2,adalah kode HTML yang berfungsi sebagai pemanggil script yang dapat dipasang dibagian blog seperti bagian posting dan sidebar.
Untuk Nomor 3,adalah kode script yang biasanya dipasang dibagian atas kode </head> pada template blogger.

B.Cara memasang ShareThis button di blogger

1.Silahkan buka tab baru pada browser,lalu login ke blogger.com seperti biasa.

2.Berikutnya silahkan anda klik Template > Edit HTML.

3.Seperti yang kita ketahui bahwa kode yang kita dapat di situs sharethis adalah seperti contoh gambar dibawah ini (harap perhatikan baik-baik!).

4.Silahkan anda masukkan kode nomor 3 diatas kode

</head>

5.Lalu masukkan kode nomor 2 dibawah kode

<div class='post-footer-line post-footer-line-1'>

atau

<div class='post-footer-line post-footer-line-2'>

atau

<data:post.body/>

(jika anda ingin meletakkan share button dibawah posting).
Jika anda ingin meletakkan share button diatas posting blog,maka silahkan anda letakkan kode tersebut dibawah kode

<div class='post-header'>

atau dibawah kode

<div class='post-header-line-1'/>

6.Berikutnya silahkan anda klik Save untuk menyimpan perubahan.

Silahkan anda kinjungi blog anda,maka sharethis button telah muncul di halaman posting blog anda.

Bagaimana? Cukup mudah bukan?

Demikianlah cara memasang sharethis button di posting blogger,semoga mudah anda fahami dan bermanfaat.

Terimakasih telah berkunjung.

Assalamualaikum.

Selengkapnya ➢

Cara memasang share button radiculously responsive

Assalamualaikum,

Share button (tombol berbagi) merupakan salah satu widget penting didalam sebuah blog,dimana keberadaannya yang selain berfungsi sebagai jalan utuk sharing posting ke media sosial,juga keberadaan share button ini dapat membuat tampilan lebih menarik,apalagi jika tampilannya responsive.

Sebenarnya ada banyak share button responsive yang dapat dipasang di blog,namun dari sekian banyak share button,menurut saya share button radiculously lah yang lumayan paling baik dari segi tampilan dan fungsi.

Bagi anda yang ingin sekali memasang share button ini maka dikesempatan kali ini saya akan share caranya.

Cara memasang share button radiculously responsive

1.Pertama-tama silahkan anda hapus terlebih dahulu share button bawaan blogger,caranya dapat anda baca disini.Skip langkah ini apabila anda menginginkan share button bawaan blogger tetap ada.

2.Silahkan anda login ke blogger.com.

3.Berikutnya silahkan anda klik Template,seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda klik Edit HTML,seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda cari kode

</head>

6.Berikutnya silahkan anda copy dan paste CSS berikut ini diatas kode </head> tersebut.

<!-- RRSSB Share Button Responsive -->
<link href='https://googledrive.com/host/0B6pfV4RtjIP-UFlraU1XTHZJdjQ' rel='stylesheet' type='text/css'/>

7.Berikutnya anda silahkan anda cari kode

</body>

8.Berikutnya anda copy dan paste JQuery,script berikut ini diatas kode </body> tersebut

<!-- RRSSB Share Button Responsive -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script>window.jQuery || document.write(&#39;&lt;script src=&quot;js/vendor/jquery.1.10.2.min.js&quot;&gt;&lt;\/script&gt;&#39;)</script> <script src='https://googledrive.com/host/0B6pfV4RtjIP-RmRycmhfTDFDeXM' type='text/javascript'/>

9.Berikutnya silahkan anda copy kode berikut ini.

<!-- RRSSB Buttons START -->
      <ul class='rrssb-buttons clearfix'>
        <li class='rrssb-facebook'>
          <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'>
            <span class='rrssb-icon'>
              <svg height='29' preserveAspectRatio='xMidYMid' viewBox='0 0 29 29' width='29' xmlns='http://www.w3.org/2000/svg'>
                <path class='cls-2' d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z' fill-rule='evenodd'/>
              </svg>
            </span>
            <span class='rrssb-text'>facebook</span>
          </a>
        </li>
        <li class='rrssb-linkedin'>
          <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/>
              </svg>
            </span>
            <span class='rrssb-text'>linkedin</span>
          </a>
        </li>
        <li class='rrssb-twitter'>
          <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z'/>
              </svg>
            </span>
            <span class='rrssb-text'>twitter</span>
          </a>
        </li>
        <li class='rrssb-googleplus'>
          <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M14.703 15.854l-1.22-.948c-.37-.308-.88-.715-.88-1.46 0-.747.51-1.222.95-1.662 1.42-1.12 2.84-2.31 2.84-4.817 0-2.58-1.62-3.937-2.4-4.58h2.098l2.203-1.384h-6.67c-1.83 0-4.467.433-6.398 2.027C3.768 4.287 3.06 6.018 3.06 7.576c0 2.634 2.02 5.328 5.603 5.328.34 0 .71-.033 1.083-.068-.167.408-.336.748-.336 1.324 0 1.04.55 1.685 1.01 2.297-1.523.104-4.37.273-6.466 1.562-1.998 1.187-2.605 2.915-2.605 4.136 0 2.512 2.357 4.84 7.288 4.84 5.822 0 8.904-3.223 8.904-6.41.008-2.327-1.36-3.49-2.83-4.73h-.01zM10.27 11.95c-2.913 0-4.232-3.764-4.232-6.036 0-.884.168-1.797.744-2.51.543-.68 1.49-1.12 2.372-1.12 2.807 0 4.256 3.797 4.256 6.24 0 .613-.067 1.695-.845 2.48-.537.55-1.438.947-2.295.95v-.003zm.032 13.66c-3.62 0-5.957-1.733-5.957-4.143 0-2.408 2.165-3.223 2.91-3.492 1.422-.48 3.25-.545 3.556-.545.34 0 .52 0 .767.034 2.574 1.838 3.706 2.757 3.706 4.48-.002 2.072-1.736 3.664-4.982 3.648l.002.017zM23.254 11.89V8.52H21.57v3.37H18.2v1.714h3.367v3.4h1.684v-3.4h3.4V11.89'/>
              </svg>
            </span>
            <span class='rrssb-text'>google+</span>
          </a>
        </li>
        <li class='rrssb-pinterest'>
          <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/>
              </svg>
            </span>
            <span class='rrssb-text'>pinterest</span>
          </a>
        </li>
      </ul>
<!-- RRSSB Buttons END -->

10.Berikutnya silahkan anda paste kode yang saya berikan pada langkah nomor 9 dibawah kode

<div class='post-footer-line post-footer-line-1'>

atau

<div class='post-footer-line post-footer-line-2'>

atau

<data:post.body/>

(jika anda ingin meltakkan share button dibawah posting).

Jika anda ingin meletakkan share button diatas posting blog,maka silahkan anda letakkan kode tersebut dibawah kode

<div class='post-header'>

atau dibawah kode

<div class='post-header-line-1'/>

11.Jika sudah selesai? silahkan anda klik save untuk menyimpan perubahan.

Silahkan kunjungi blog anda untuk melihat hasilnya.

Demikianlah cara memasang share buttom radiculously responsive pada blogger,semoga bermanfaat.

Terimkasih telah berkunjung.

Assalamualaikum.

Selengkapnya ➢

Cara menyembunyikan share button bawaan blogger

Assalamualaikum.

Beberapa saat yang lalu saya sudah share cara menghapus share button bawaan blogger di blog,yang semoga mudah di fahami.

Dikesempatan kali ini saya akan share cara menyembunyikan share button bawaan blogger tanpa harus menghapus kode di bagian template blog.Cara ini dapat anda tempuh apabila anda menginginkan kemudahan dan malas untuk memodifikasi template di dalam template,namun cara ini kurang efektif apabila anda ingin mengganti share button bawaan blogger dengan share button dari luar blogger,mengingat nantinya akan ada 2 style share button di blog yang anda miliki.

Berikut cara menyembunyikan share button bawaan blogger

1.Pertama-tama silahkan anda login terlebih dahulu ke blogger.com.

2.Di halaman dashboard blogger,silahkan anda klik Tata Letak seperti gambar dibawah ini.

3.Pada layout Tata Letak,silahkan anda klik Edit pada bagian layout Main seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda hilangkan tanda ceck (centang) pada opsi share button,berikutnya silahkan anda klik simpan untuk menyimpan perubahan.Seperti contoh gambar berikut ini.

5.Jika sudah? Silahkan kunjungi blog anda untuk melihat hasilnya.

Untuk memunculkan kembali share button bawaan blogger,maka anda tinggal mengikuti langkah-langkah yang saya berikan diatas,bedanya jika ingin menyembunyikan share button bawaan blogger kita hilangkan tanda ceck (centang) nya sedangkan jika kita ingin memunculkan share button maka kita beri tanda ceck (centang) pada opsi share button.

Demikianlah cara menyembunyikan share button bawaan blogger,semoga bermanfaat dan terimakasih telah berkunjung.

Assalamualaikum.

Selengkapnya ➢

Cara menghapus share button bawaan blogger

Assalamualaikum.

Share button (tombol berbagi) merupakan salah satu widget yang disiapkan oleh pihak blogger,dimana fungsinya ialah mempermudah pengunjung blog maupun pengguna blog untuk sharing posting yang sedang dibaca ke media sosial yang dimilikinya.

Adapun share button yang disiapkan oleh blogger adalah share untuk ke media sosial seperti facebook,google plus,twitter,pinterest,blogger,dan share via email,bagi saya saya hal ini dirasa sudah cukup membantu.

Namun yang namanya seorang blogger,tentu memiliki selera imajinasi dan kreativitas yang berbeda-beda,ada yang menyukai tampilan dari share button bawaan blogger dan ada yang tidak menyukai tampilan dari share button bawaan blogger.

Bagi yang menyukai tampilan dari share button bawaan blogger tentu akan membiarkan share button tersebut tetap berada di blog,namun bagi yang tidak menyukainya mereka akan mencoba untuk menghapusnya untuk diganti dengan share button buatan dari luar blogger.

Bagi anda yang juga ingin menghapus share button bawaan blogger,maka dikesempatan kali ini saya akan share caranya.Cara ini berlaku untuk template default simple blogger.

1.Pertama-tama silahkan anda login terlebih dahulu ke blogger.com.

2,Berikutnya silahkan anda klik Template,seperti contoh gambar dibawah ini.

3.Berikutnya silahkan anda klik Edit HTML,seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda cari dan hapus kode seperti berikut ini (untuk mempermudah pencarian silahkan anda menggunakan CTRL+F jika anda menggunakan komputer).

<div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>

5.Berikutnya silahkan anda cari dan hapus kode seperti berikut ini.

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
</b:includable>

6.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.

Demikianlah cara menghapus share button bawaan blogger,semoga bermanfaat dan mudah anda fahami.

Terimkaasih telah berkunjung.

Assalamualaikum.

Selengkapnya ➢

Cara membuat related post dengan thumbnail (style ke-2)

Assalamualaikum.

Beberapa saat yang lalu saya sudah share cara membuat related post dengan thumbnail,dikesempatan kali ini saya akan share cara membuat related post dengan thubmnail versi ke-2 di blog ini yang tentu tampilannya akan sedikit berbeda,namun fungsinya sama.

Berikut cara membuat related post dengan thumbnail (style ke-2)
1.Pastikan anda sudah login di blogger.com dengan akun masing-masing.
2.Di halaman dashboard silahkan anda klik Template > Edit HTML.
3.Berikutnya anda cari kode

</head>

(untuk mempermudah pencarian silahkan anda gunakan CTRL+F jika anda menggunakan komputer),lalu masukkan kode CSS berikut ini diatas kode tersebut.

<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #ccc;  border-bottom:1px solid #ccc;  color:#fff;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#41749f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLzWI6CuXXSWL-wvOeU40OMWBVWqxQdzOqw7rtChMwIqPFF47EcMsREzCl3RPVUNn0jJwzXldwNQDqjUYt0xtb80lRjK3LlDAJ4RvzO_AOkMmJK99vr_axOwKAVFrJ5knn2ER5xBDHf7S/s1600/nav.png) repeat-x;background-position: 0px -63px; }
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:transparent; margin:0 0 5px; padding:5px; height:65px; list-style:none}
</style>
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}

4.Untuk menambahkan fungsi read more,silahkan anda letakkan script berikut diatas kode </head>.

<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var morelink = "readmore";
var numchars = 50;
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>

5.Jika sudah? berikutnya anda copy kode berikut ini.

<div id='related_posts' style='margin-top:10px;'>
<h4>Related Posts</h4>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
</b:loop>
<script type='text/javascript'>relatpost();</script>
<ul id='relpost_img_sum'>
</ul>
</div>

Tambahan:
Untuk kata Related Posts dapat anda ganti dengan kata Artikel Terkait atau sesuai dengan selera anda.

6.Silahkan anda paste kode tersebut dibawah kode

<div class='post-footer-line post-footer-line-2'>

atau kode

<div class='post-footer-line post-footer-line-1'>

Perhatian:
Biasanya kode <div class='post-footer-line post-footer-line-2'> dan <div class='post-footer-line post-footer-line-1'> ada dua,Silahkan anda fokuskan pada kode yang kedua.Didalam tahap ini anda harus hati-hati dan teliti serta sabar,karena jika salah meletakkan kode maka akan gagal.

Demikianlah cara membuat Related Post dengan thumbnail (style ke-2) di blog,semoga bermanfaat.Jika anda mengalami kesulitan,silahkan bertanya di kolom komentar.
Terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Cara membuat credit link pada bagian footer

Assalamualaikum.

Dalam memodifikasi sebuah template blogger,tentunya anda juga memikirkan bagian footer blog agar kelihatan lebih menarik.Salah satu cara untuk membuat footer terlihat lebih menarik adalah dengan cara membuat credit link pada bagian footer atau mengganti kata link powered by blogger (diberdayakan oleh blogger) dengan kata-kata yang kita inginkan.

Bagi anda yang ingin sekali membuat credit link pada bagian footer,maka dikesempatan kali ini saya akan share caranya yang semoga mudah anda fahami.

1.Pertama-tama silahkan anda login terlebih dahulu ke blogger.com.

2.Jika anda menggunakan template bawaan blogger,hilangkan terlebih dahulu link atribusinya,caranya dapat anda baca disini.

3.Jika anda sudah berhasil menghapus link atribusi bawaan blogger,berikutnya silahkan anda klik Template,seperti contoh gambar dibawah ini.

Cara membuat credit link pada bagian footer

4.Berikutnya silahkan anda klik Edit HTML,seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda cari kode:

]]></b:skin>

(agar lebih mudah dalam pencarian,silahkan anda menggunakan CTRL+F jika anda menggunakan komputer).

6.Berikutnya silahkan anda paste kode berikut ini diatas kode ]]></b:skin> tersebut.

#credit-footer {
background:#333333;
overflow:hidden;
margin:0 auto;
padding:15px 15px 15px;
color:#dddddd;
text-align:center;
font-size:12px;
}

Keterangan:

Background Adalah warna background dari credit footer yang akan anda buat,silahkan anda rubah kode warna #333333 dengan kode warna yang anda sukai.
Margin adalah jarak luar antara konten satu dengan konten ainnya,silahkan anda rubah ukurannya sesuai selera anda.
Padding adalah jarak didalam konten,silahkan anda rubah ukurannya sesuai selera anda.
Color adalah warna font dari credit link yang akan anda buat,silahkan anda rubah kode warna #dddddd dengan kode warna yang anda sukai.
Text-align:center; adalah posisi teks dengan posisi di tengah,silahkan anda ganti kata center dengan kata right (posisi teks di kanan) atau left (posisi teks di kiri).
Font size adalah ukuran font,silahkan anda ganti ukuran 12px dengan ukuran yang anda perlukan.

7.Jika sudah,silahkan anda cari kode seperti ini:

<div id='footer-wrapper'>...</div>

8.Berikutnya anda masukkan kode berikut ini tepat dibawahnya.

<div id='creedit-footer'> <b:section class='clear' id='clear' preferred='yes'/>Copyright &#169; 2016
<span style='font-size:12px;'><data:blog.title/>
</span> | All Right Reserved | Design by <a href='http://www.inisiteku.com'>Achmad Jauhari</a><br/> Powered by <a href='http://www.blogger.com'>Blogger</a>
</div>
<div class='clear'/>

Keterangan:

Silahkan anda ganti teks yang berwarna biru sesuai selera anda.
Silahkan anda ganti URL yang saya beri warna merah dengan URL blog anda.

9.Terakhir,silahkan anda klik simpan untuk menyimpan perubahan.
Silahkan anda kunjungi blog anda untuk melihat hasilnya.
Demikianlah cara membuat credit link pada bagian footer blog,terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Selengkapnya ➢

Cara menghilangkan link diberdayakan oleh blogger

Assalamualaikum.

Link diberdayakan oleh blogger (powered by blogger) atau link atribusi biasanya terletak dibagian footer blog,banyak pengguna blogger yang membiarkan link ini tetap berada di blog,namun banyak pula sebagian pengguna blogger yang menghilangkan link tersebut dengan tujuan tertentu.

Bagi anda yang ingin menghilangkan link tersebut,maka di tutorial kali ini saya akan share caranya.

Ditutorial ini saya akan memberikan 3 opsi cara yang dapat anda pilih salah satu,baiklah berikut cara menghilangkan link diberdayakan oleh blogger.

A.CARA PERTAMA

Cara pertama adalah dengan cara menghapus link diberdayakan oleh blogger pada bagian tata letak tanpa menghilangkan kode pada bagian template blog.

1.Silahkan anda login terlebih dahulu ke blogger.com.

2.Jika sudah? Di halaman dashboard blogger silahkan anda klik Template > Edit HTML.

3.Berikutnya silahkan anda cari kode berikut ini:

<b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'>

Silahkan anda ganti kata perintah true yang sudah saya beri warna merah dengan kata false,sehingga hasilnya akan menjadi seperti kode berikut ini.

<b:widget id='Attribution1' locked='false' title='' type='Attribution' visible='true'>

4.Jika sudah? berikutnya anda klik simpan untuk menyimpan perubahan.

5.Berikutnya silahkan anda klik Tata Letak.

6.Berikutnya anda klik edit pada bagian layout footer,seperti contoh gambar dibawah ini:

Cara menghilangkan link diberdayakan oleh blogger

7.Berikutnya akan muncul tab kecil baru,silahkan anda klik hapus,seperti contoh gambar dibawah ini.

8.Sekarang link tulisan diberdayakan oleh blogger sudah menghilang dari blog anda.

B.CARA KEDUA

Cara kedua adalah menghapus link diberdayakan oleh blogger secara permanen yaitu dengan cara menghapusnya melalui template.

1.Pada halaman dashboard blogger,silahkan anda klik Template > Edit HTML.

2.Berikutnya silahkan anda cari kode seperti berikut ini.

 <b:widget id='Attribution1' locked='false' title='' type='Attribution' visible='true'>
          <b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
        </b:widget>

3.Berikutnya silahkan anda hapus semua kode tersebut.

4.Jika sudah? berikutnya anda klik simpan untuk menyimpan perubahan.

5.Sekarang link tulisan diberdayakan oleh blogger sudah menghilang dari blog anda.

C.CARA KETIGA

Cara ketiga adalah dengan cara menyembunyikan link diberdayakan oleh blogger tanpa menghapus kode pada bagian template,ada namun tersembunyi.

1.Pada halaman dashboard blogger,silahkan anda klik Template > Edit HTML.

2.Berikutnya silahkan anda cari kode:

]]></b:skin>

3.Jika sudah? Silahkan anda copy kode dibawah ini:

#Attribution1 {height:0px;visibility:hidden;display:none}

4.Silahkan paste kode yang saya berikan diatas kode ]]></b:skin>.

5.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.

Demikianlah cara menghilangkan link tulisan diberdayakan oleh blogger pada blog berplatform blogger.com,namun perlu anda perhatikan bahwa lebih baik anda membiarkan link diberdayakan oleh blogger tersebut tetap ada sebagai wujud terimakasih kepada blogger.com.Pilihan saya serahkan kepada anda.

Terimakasih telah berkunjung dan semoga bermanfaat.

Assalamualaikum.

Selengkapnya ➢

Cara memasang dan menggunakan google font di blogger

Assalamulaikum.

Bagi anda yang sedang memodifikasi template blog,tentunya anda juga memikirkan style font apa saja yang akan anda gunakan untuk blog anda.Anda dapat mengganti style font yang anda sukai dengan cara masuk ke menu perancang template yang telah disediakan oleh pihak blogger.com maupun masuk pada menu edit HTML template.

Namun bagi anda yang kurang puas dengan style font yang telah disediakan oleh blogger.com,maka sebaiknya anda memasang font dari luar blogger.com.Adapun layanan penyedia font yang paling sering dipakai para pendesain template baik amatir seperti saya maupun yang sudah mahir adalah layanan google font,dimana google font memiliki banyak sekali jenis font yang dapat dipakai untuk keperluan blogging atau web.

Bagi anda yang belum memahami bahkan belum tau tentang cara memasang dan menggunakan google font ini,maka dikesempatan kali ini saya akan share tutorialnya yang semoga mudah anda fahami.

CARA MENDAPATKAN KODE GOOGLE FONT

Pertama-tama yang anda harus lakukan adalah mendapatan kode font yang anda sukai di situs google font uttuk berikutnya dipasang kedalam template blog anda.

Caranya adalah sebagai berikut ini:

1.Silahkan anda kunjungi situs google font

2.Berikutnya silahkan anda cari font yang anda sukai,lalu pilih quick use,seperti contoh gambar dibawah ini.

3.Berikutnya,silahkan anda pilih style font sesuai dengan kebutuhan anda,caranya yaitu dengan memberi tanda ceck (centang) pada kolom ceck yang telah disediakan.

Seperti contoh gambar dibawah ini.

Perhatian:

Perlu anda ingat bahwa semakin banyak style font yang anda gunakan maka semakin berat pula loadingnya,

4.Jika sudah? Berikutnya anda geser kursor ke halaman bawah,nanti anda akan melihat kode dari font tersebut,berikutnya anda copy kode tersebut,seperti contoh gambar dibawah ini.

CARA MEMASANG KODE GOOGLE FONT DI TEMPLATE BLOGGER

Jika anda sudah berhasil mendapatkan kode di google font,maka langkah berikutnya adalah memasang kode tersebut didalam template blogger.

Caranya adalah sebagai berikut ini:

1.Pertama-tama silahkan anda login ke blogger.com.

2.Di halaman dashboard blogger,silahkan anda klik template > Edit HTML.

3.Berikutnya silahkan anda paste kode font yang anda dapatkan dari google font diatas kode <head> pada template blog anda.

4.Jangan lupa menambahkan tag penutup "/" (tanpa tanda kutip),pada kode yang anda paste tersebut.

Misalnya,kode yang anda dapat dari google font adalah sebagai berikut:

fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

Silahkan anda beri tag penutup "/" pada bagian akhir kode,sehingga hasilnya akan seperti contoh berikut ini : (perhatikan teks yang berwarna merah)

fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

5.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.

CARA MENGGUNAKAN GOOGLE FONT

Jika anda sudah berhasil memasang kode google font pada template,berikutnya adalah menggunakan font tersebut didalam css style template blog anda.

Caranya adalah sebagai berikut ini:

1.Pertama-tama silahkan anda login ke blogger.com.

2.Di halaman dashboard blogger,silahkan anda klik template > Edit HTML.

3.Misalnya anda ingin mengubah font pada bagian header dengan font yang anda gunakan dari google font yaitu "PT Sans".

Maka silahkan anda cari kode :

#header h1{
  margin:5px 5px 0;
  padding:15px 20px .25em;
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

Coba anda perhatikan kode diatas yang saya beri warna merah,silahkan anda ganti jenis font tersebut dengan jenis google font yang anda gunakan,sehingga hasilnya seperti berikut ini:

#header h1{
  margin:5px 5px 0;
  padding:15px 20px .25em;
  font: PT Sans;
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

4.Jika sudah? silahkan anda klik simpan untuk menyimpan perubahan.

Demikianlah cara memasang dan menggunakan google font di blogger.Namun,perlu anda ingat bahwa tutorial diatas hanyalah tutorial secara garis besarnya saja,karena sebenarnya anda dapat melakukan berbagai variasi font yang style yang berbeda-beda dan anda dapat mengganti semua font yang ada didalam template blog.Bukan hanya di bagian header saja,namun dapat anda aplikasikan juga pada bagian sidebar,link,posting,bahkan anda dapat mengganti keseluruhan font di blog dengan google font.

Semoga bermanfaat dan terimakasih telah berkunjung.

Assalaamualaikum.

Selengkapnya ➢

Cara memasang font awesome icon di blog

Assalamualaikum.
Untuk membuat blog lebih menarik tentunya kita juga memerlukan icon-icon gambar kecil yang dapat dipasang di blog.Jika dulu kita hanya dapat memasang icon gambar dengan URL file gambar online,maka disaat ini kita dapat memasang icon dengan bantuan font awesome icon,sehingga loading blog tidak terlalu berat.
Untuk pemasangan font awesome icon di blog tidaklah sulit,karena caranya sama dengan halnya kita memasang jquery dan bootstrap yaitu memasang pemanggil font awesome diatas kode </head> dan menyisipkan kode font pada bagian html teks atau link yang kita sukai.
Bagi anda yang belum mengetahui caranya,maka dikesempatan kali ini saya akan share caranya.

CARA MEMASANG FONT AWESOME ICON DI BLOG
1.Pertama-tama silahkan anda login ke blogger.com.
2.Berikutnya silahkan anda klikTemplate > Edit HTML.
3.Berikutnya silahkan anda cari kode </head>.
4.Berikutnya silahkan anda masukkan kode berikut diatas kode </head>.

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

5.Berikutnya silahkan anda buka tab baru pada browser,lalu kunjungi situs fortawesome.github.io/Font-Awesome/icons
6.Nanti anda akan melihat banyak sekali icon,silahkan anda klik icon yang anda sukai,seperti contoh gambar dibawah ini.

7.Berikutnya anda akan dibawa ke halaman baru,anda akan melihat kode dari icon yang anda klik tadi,silahkan anda copy kode tersebut,seperti contoh gambar dibawah ini.

8.Berikutnya adalah menyisipkan kode tersebut kedalam HTML link atau teks didalam template blogger,misalnya saya akan membuat link di bagian navigasi dropdown,maka kode standard untuk penulisan link adalah sebagai berikut ini.

<a href='URL LINK'> TEKS LINK </a>

Untuk menyisipkan font awesome icon,silahkan anda masukkan kode font awesome yang sudah anda copy setelah kode <a href='URL LINK'>,sehingga hasilnya adalah sebagai berikut.

<a href='URL LINK'><i class='fa fa-user'></li> TEKS LINK </a>

9.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.

Silahkan anda kunjungi blog anda untuk melihat hasilnya,sebenarnya banyak efek untuk font awesome icon ini,namun disini saya hanya share cara pemasangannya saja sebagai dasar.
Demikianlah cara memasang font awsome icon di blog.
Semoga bermanfaat dan terimkasih atas kunjungan anda.
Assalamualaikum.

Selengkapnya ➢

Cara membuat next page button dengan angka di blog (style ke-2)

Assalamualaikum.
Seperti yang kita ketahui bahwa tujuan pembuatan navigasi next page,previous page dengan angka di blog adalah untuk memudahkan para pengunjung blog dalam melihat artikel apa saja yang ada di blog yang kita miliki halaman demi halaman.
Untuk jumlah artikel atau posting di tiap satu halaman,kita dapat menentukannya sendiri,semakin banyak jumlah arikel dalam satu halaman maka loading blog akan semakin berat,begitu pula dengan sebaliknya.Untuk itu jumlah artikel pada satu halaman sebaiknya dibatasi maksimal 10 posting atau dibawahnya.
Beberapa saat yang lalu saya telah share cara membuat tombol navigasi next page dengan angka di blog,nah di kesempatan kali ini saya akan share cara membuat next page button dengan angka di blog tentunya dengan style yang berbeda atau saya namakan style ke-2 di blog ini.

Berikut cara membuat nextpage button dengan angka di blog (style yang ke-2)
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang anda miliki (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.

cara membuat next page button dengan angka di blog

3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.

4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.

5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode ]]></b:skin>.Agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
6.Silahkan anda masukkan kode CSS berikut ini tepat diatas kode ]]></b:skin>.

.showpageArea a{text-decoration:underline}
.showpageNum a{text-decoration:none;border:1px solid #ccc;margin:0 3px;padding:3px}
.showpageNum a:hover{border:1px solid #ccc;background-color:#ccc}
.showpagePoint{color:#333;text-decoration:none;border:1px solid #ccc;background:#ccc;margin:0 3px;padding:3px}
.showpageOf{text-decoration:none;padding:3px;margin:0 3px 0 0}
.showpage a{text-decoration:none;border:1px solid #ccc;padding:3px}
.showpage a:hover{text-decoration:none}
.showpageNum a:link,.showpage a:link{text-decoration:none;color:#333}

7.Berikutnya silahkan anda cari kode </body> lalu masukkan kode dan script berikut ini tepat diatasnya.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Tambahan:

Kata prev dan next dapat anda ganti dengan kata yang anda inginkan.
Angka 4 yang pertama adalah jumlah post yang ditampilkan untuk setiap page yang di klik.
Angka 4 yang kedua adalah jumlah nomor yang ingin ditampilkan diarea homepage blog.

8.Jika sudah? silahkan anda klik simpan untuk menyimpan perubahan.

Silahkan anda kunjungi homepage (halaman utama blog anda) maka navigasi next page dengan angka kini telah muncul dibagian bawah post footer blog anda.
Bagaimana? cukup mudah bukan?
Demikianlah cara membuat next page button dengan angka di blog (style ke-2).
Semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Cara menghilangkan navbar di blog

Assalamualaikum.

Navbar pada blogger (blogspot) terletak dibagian paling atas halaman blog,dimana navbar ini sebenarnya dibuat untuk mempermudah pengguna blogger dalam urusan blogging.namun sayangnya tampilan navbar ini dirasa kurang bagus sehingga banyak pengguna blogger,termasuk saya menghilangkan navbar tersebut.

Untuk mengganti keberadaan navbar tersebut,banyak pengguna blogger yang akhirnya mengganti navbar tersebut dengan menu navigasi,widget yang tampilan dan fungsinya cukup menarik,sehingga tampilan blog lebih terlihat professional.

Jika anda benar-benar ingin menghilangkan navbar tersebut,maka di kesempatan kali ini saya akan share caranya dengan beberapa metode,mulai dari penonaktifan navbar sampai penghapusan navbar tersebut secara permanen.

A.MENONAKTIFKAN NAVBAR

Jika anda ingin navbar tetap ada namun tidak muncul di halaman blog,sebaiknya anda menonaktifkan fungsi navbar,caranya adalah sebagai berikut.

1,Di halaman dashboard blogger.com.silahkan anda klik Tata Letak (jika anda memakai blogger versi bahasa indonesia).

2.Di halaman tata letak,silahkan anda klik edit pada bagian navbar,seperti contoh gambar dibawah ini.

3.Nanti akan muncul tab kecil untuk konfigurasi warna navbar,silahkan anda pilih off lalu klik simpan,seperti contoh gambar dibawah ini.

4.Berikutnya silahkan anda kunjungi blog anda,maka navbar sudah menghilang.

B.MENGHAPUS NAVBAR

Jika anda ingin benar-benar menghilangkan navbar dengan cara menghapusnya,maka anda harus menghapusnya didalam template blog,caranya adalah sebagai berikut.

1.Di halaman dashboard blogger,silahkan anda klik Template lalu klik Edit HTML.

2.Berikutnya silahkan anda cari kode seperti berikut ini.

<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
      <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
          if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: &#39;https://www.blogger.com/navbar.g?targetBlogID\0752531931455330875258\46blogName\75inisiteku1\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://inisiteku1.blogspot.com/search\46blogLocale\75in\46v\0752\46homepageUrl\75http://inisiteku1.blogspot.com/\46vt\75-989763482000475803&#39;,
                where: document.getElementById(&quot;navbar-iframe-container&quot;),
                id: &quot;navbar-iframe&quot;
            });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
    </b:widget>
  </b:section>

3.Silahkan anda hapus kode tersebut,lalu klik simpan untuk menyimpan perubahan.
4.Silahkan anda kunjungi blog anda maka navbar di halaman blog anda telah menghilang.

Demikianlah cara menghilangkan navbar di blog,semoga mudah difahami dan semoga bermanfaat.
Terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢