inisiteku

Showing posts with label edit template klasik 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 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 menghilangkan See More At saat copy paste

Assalamualaikum.
Posting ini saya share bagi anda yang senang menulis tutorial dan berbagi ilmu mengenai blogging dan kode-kode yang dapat di copy-paste oleh orang lain.
Jika anda,menemukan tulisan See More At saat copy-paste di bagian text area postingan anda padahal sebelumnya tidak muncul hal demikian,mungkin anda harus mengecek kembali template anda.
Biasanya tulisan See More At ini muncul karena anda memasang widget share button dari share this,yang biasanya berbentuk script yang harus dipasang di bagian atas kode </head> dan kode HTML yang harus anda pasang di bagian post footer pada template blog.Untuk cara memasang sharethis button di posting blogger,anda bisa baca tutorialnya disini.
Lalu bagaimanakah cara menghilangkan tulisan See more At di blog yang anda miliki?
Sebelum anda menghilangkan tulisan tersebut,ada baiknya anda mengetahui fungsinya terlebih dahulu,karena ini akan menjadi pertimbangan bagi anda sendiri.Tulisan See More At ini berfungsi untuk mengantisipasi copy-paste artikel di blog,karena jika ada seseorang yang mengcopy artikel anda maka hasil copy paste biasanya akan disertai tulisan See More At http://link URL postingan anda.
Jika anda senang menulis hal-hal yang berhubungan dengan kode-kode dan blogging,mungkin anda akan merasa sedikit terganggu karena anda tentunya ingin berbagi konten berupa kode-kode secara utuh.Jika di blog anda sudah terpasang widget share button dari share this,lantas anda ingin menghilangkan tulisan See More At tanpa menghapus share button maka berikut caranya.

Cara menghilangkan See More At saat copy paste
1.Silahkan anda login ke blogger.com seperti biasa.
2.Berikutnya anda klik Template > Edit HTML.
3.Berikutnya anda cari kode seperti berikut ini.

<script type="text/javascript">stLight.options({publisher: "hnnmxxxxxx3m34mm", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

4.Berikutnya silahkan anda ganti kode tersebut dengan kode berikut ini.

<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

5.Berikutnya anda klik save atau simpan untuk menyimpan perubahan.

Silahkan anda kunjungi blog anda dan lakukan copy paste salah satu artikel di blog anda maka tulisan See At More akan menghilang.
Demikianlah cara menghilangkan See At More At saat copy-paste di blog anda.
Semoga bermanfaat,terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Membuat back to top di blogger

Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara membuat ombol back to top di blogger tanpa jquery.Alhamdulillah di kesempatan kali ini saya akan share cara membuat tombol back top di blogger dengan menggunakan jquery.
Dengan memeanfaatkan jquery,memungkinkan kita dapat membuat tombol back to top dengan menggunakan gambar kecil (icon) yang pastinya tampilannya lebih menarik.
Sudah tidak sabar lagi untuk mencobanya?Baiklah,silahkan anda baca dengan baik dan semoga mudah difahami.

CARA MEMBUAT BACK TO TOP DI BLOGGER
1.Pertama-tama silahkan anda kunjungi dashboard blogger anda masing-masing di blogger.com.
2.Di halaman dashboard blogger,silahkan anda klik Tata Letak.
3.Berikutnya silahkan anda klik Add Gadget (Tambahkan Gadget),seperti contoh gambar dibawah ini.

4.Nanti akan muncul berbagai pilihan gadget yang dapat anda pasang di blogger,silahkan anda klik HTML/JavaScript,seperti contoh gambar dibawah ini.

5.Berikutnya silahkan anda masukkan kode berikut ini.

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMAz9Ss63N3Poynn9OEe1Ft_XIFawmXNfpEyAPFDwQN4PU7-hA0rCsutMMCSxnTnTEeBUgGfj4DvFm2S5ZXkXiCrj836nlD7-L_UnGH1iN-NgCm_L04va6cqoZu2MGB7-O5kVfn-aDHbs/s50-Ic42/button-back-to-top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    });

    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Tambahan:
Kode yang saya beri warna hijau adalah kode URL gambar (icon) untuk tombol back to top dengan ukuran 50x50 px.Anda bisa menggantinya dengan URL link gambar yang anda sukai atau sesuai dengan selera anda masing-masing.

6.Berikutnya silahkan anda klik simpan untuk menyimpan perubahan.

Apakah sudah selesai? Belum ! Karena kita harus menambahkan jquery kedalam template blogger agar kode dapat berjalan dengan baik.

CARA MEMASANG JQUERY DI TEMPLATE BLOGGER
1.Silahkan anda klik Template > Edit HTML.
2Berikutnya silahkan anda cari kode </head> (silahkan gunakan CTRL+F untuk memudahkan pencarian apabila anda menggunakan PC).
3.Berikutnya silahkan anda masukkan kode berikut ini tepat diatas kode tersebut.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Perhatian:
Apabila kode seperti diatas sudah ada didalam template blog anda,maka anda tidak perlu lagi memasang kode tersebut (abaikan saja),karena jika ada 2 kode (dobel) maka script tidak akan berjalan atau gagal.
4.Jika sudah,silahkan anda klik simpan untuk menyimpan perubahan.

Berikutnya kunjungilah blog anda,jika anda berhasil maka tombol back to top telah muncul di blog anda.
Demikianlah cara membuat tombol back to top di blogger,semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Membuat back to top di blogger tanpa jquery

Assalamualaikum.
Tombol Back to top biasanya digunakan untuk mempermudah pengunjung dalam membaca artikel dari sebuah blog.Dengan tombol back to top memungkinkan pengunjung kembali ke halaman atas hanya dengan sekali klik.
Metode pemasangan tombol back to top ini terbagi 2 diantaranya adalah dengan menggunakan jquery dan tanpa jquery.Perbedaannya adalah jika kita menggunakan jquery maka loading blog akan terasa berat namun tampilannya bagus,sedangkan tanpa jquery maka loading tidak akan seberat jika kita memakai jquery namun hasil tampilannya sangat sederhana.
Karena terbatasnya waktu,maka disini saya akan share cara membuat tombol back to top tanpa jquery terlebih dahulu,sedangkan cara membuat back top dengan jquery akan saya share di posting berikutnya insyaallah jika ada waktu,kesempatan dan umur.

CARA MEMBUAT BACK TO TOP DI BLOGGER TANPA JQUERY
1.Pertama-tama silahkan anda masuk atau login seperti biasa ke blogger.com.
2.Berikutnya silahkan anda klik Template > Edit HTML.
3.Berikutnya anda cari kode </body> (silahkan gunakan CTRL+F jika anda menggunakan komputer).
4.Berikutnya silahkan anda masukkan kode HTML berikut ini tepat diatasnya.

<span class='back-to-top'><a href='#'> &#8593; </a></span>
<span class='back-to-top-a'><a href='http://www.inisiteku.com/'>inisiteku</a></span>
<style>

Tambahan:

Teks yang saya beri warna merah,silahkan anda ganti dengan URL blog anda.
Teks yang saya beri warna biru silahkan anda ganti dengan judul blog anda atau sesuai dengan selera anda.

5.Berikutnya anda masukkan kode CSS berikut ini tepat dibawah kode HTML yang saya berikan pada langkah nomor 4.

.back-to-top{position:fixed;bottom:20px;right:10px;z-index:9999999}
.back-to-top-a{font-size:10px;z-index:9999999;opacity:.2;position:fixed;bottom:0}
.back-to-top a{font-size:16px;background-color:#45818e;color:#FFF;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;padding:12px 18px 20px;text-decoration:none}
.back-to-top a:hover{background-color:#283C48;text-decoration:none}

6.Berikutnya silahkan anda masukkan kode HTML penutup berikut ini tepat dibawah kode CSS yang saya berikan pada langkah nomor 5.

</style>

7.Terakhir silahkan anda klik save atau simpan untuk menyimpan perubahan.

Silahkan kunjungi blog anda,maka tombol back to top akan muncul di halaman blog anda.
Bagaimana? cukup mudah bukan?
Demikianlah cara membuat tombol back to top di blogger tanpa jquery,semoga bermanfaat dan terimakasih atas kunjungan anda.
Assalamualaikum.

Selengkapnya ➢

Cara membuat related post dengan thumbnail

Assalamualaikum.
Related post atau artikel terkait berfungsi untuk memberikan informasi kepada pembaca mengenai konten apa saja yang terkait dengan apa yang ia baca.Related post atau artikel terkait biasanya diletakkan dibawah post footer (dibawah posting blog).
Beberapa saat yang lalu saya sudah share cara membuat related post sederhana di blog,di kesempatan kali ini saya akan share cara membuat related post dengan menggunakan thumbnail.
Perbedaannya yaitu related post sederhana hanya berupa baris link di area post footer,sedangkan related post dengan thumbnail menggunakan gambar thumbnail yang diambil dari gambar konten post.
Contoh tampilannnya seperti contoh gambar dibawah ini.

Sudah tidak sabar lagi untuk membuatnya? berikut caranya.
1.Pertama-tama silahkan anda login terlebih dahulu ke blogger.com.
2.Di halaman dashboard silahkan anda klik Template > Edit HTML.
3.Berikutnya anda cari kode ]]></b:skin> (untuk mempermudah pencarian silahkan anda gunakan CTRL+F jika anda menggunakan komputer),lalu masukkan kode CSS berikut ini diatas kode tersebut.

/* RELATED POST  THUMBNAIL
----------------------------------------------- */
#related_posts{padding:5px;overflow:hidden;display:inline}
#related_posts h4{padding:5px;font-size:14px;text-align:left;border-bottom:1px dotted #ccc}
ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline}
ul#relpost_img_sum li{list-style:none;padding:5px;margin:0;width:auto;float:left;display:inline}
ul#relpost_img_sum li a{display:block}
ul#relpost_img_sum li img{float:left;width:60px;height:60px;margin-right:5px;padding:2px;background-color:transparent;border:1px solid #eee}
ul#relpost_img_sum li a.relinkjdulx{display:block;height:30px;overflow:hidden;margin-bottom:3px;background-image:none;font-weight:400;text-decoration:none;background:#F7F7F7}

4.Berikutnya anda cari kode </head>,lalu masukkan script berikut ini diatas kode tersebut.

<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary 1.0 (http://www.ublogger.net)
*/
var relnojudul = 0;
var numpost = 5;
var numchars = 155;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
    </script>

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

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

Tambahan:
Untuk kata Related Post 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 memasang Related Post dengan thumbnail di blog,semoga bermanfaat.Jika anda mengalami kesulitan,silahkan bertanya di kolom komentar.
Terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢

Membuat Quote Menarik Di Posting Blogger

Assalamualaikum.
Fungsi quote (tanda kutip) biasanya digunakan untuk memberi tanda kutip pada kata-kata yang dirasa penting di dalam posting blog agar kelihatan berbeda,namun pada perkembangannya fungsi quote banyak digunakan untuk keperluan postingan yang berkaitan dengan tutorial blogging yang didalamnya memuat kode-kode maupun script.
Sebenarnya banyak cara untuk memperindah tutorial yang berhubungan tentang kode-kode diantaranya adalah dengan penggunaan kolom text area,syntax highlighter dan lain sebagainya,namun yang paling mudah dan paling simple adalah dengan menggunakan fungsi quote walaupun fungsi dari quote sebenarnya untuk memberi tanda kutip pada kata-kata yang dirasa penting.
Seperti yang kita tau bahwa di blogger memang telah telah menyediakan fungsi quote,namun bagi anda yang bosan dengan tampilan quote bawaan blogger maka alangkah baiknya jika anda memodifikasinya agar lebih keliatan menarik.
Berikut dibawah ini contoh tampilan quote yang akan saya share di tutorial kali ini.

Cara membuatnya?
Caranya sangat mudah,disini yang kita perlukan adalah menambahkan beberapa kode CSS di template blogger.
1.Silahkan anda masuk ke akun blogger anda.
2.Berikutnya anda klik Template > Edit HTML.
3.Berikutnya anda cari kode ]]></b:skin>.
4.Berikutnya silahkan anda masukkan kode berikut ini tepat diatasnya.

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEBKqtmtFDA76O2H39mKYFfKGi3jVP3TL7fnatPTzhZ0cxHBqEHGmyx7IZ_-5DcZv_hUSoyD8j4BlMwjtXcykf-4mHlncY91krBOcHclTGZFntznzkMp2DEyqq6-on0mgV1R0BPuSHNVc/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, “Times New Roman”; } .post blockquote p { margin: 0; padding-top: 10px; }

5.Terakhir,silahkan anda klik simpan untuk mneyimpan perubahan.

Cara menggunakannya?
1,Pertama-tama silahkan anda tulis postingan seperti biasa.
2.Silahkan anda blok kata-kata yang anda anggap penting,seperti contoh gambar dibawah ini.

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

4.Jika anda telah selesai menulis postingan,berikutnya silahkan anda publikasikan postingan anda seperti biasa.
Silahkan kunjungi blog anda untuk melihat hasilnya.
Bagaimana? cukup menarik bukan?
Demikianlah caranya,semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

Selengkapnya ➢