Tampilkan postingan dengan label Blogging. Tampilkan semua postingan
Tampilkan postingan dengan label Blogging. Tampilkan semua postingan

Cara Mudah buat blog SafeLink Converter Gratis rasa Premium Terbaru

KANGCYMOT | Pada kesempatan ini saya akan sharing mengenai Cara Mudah buat blog SafeLink Converter Gratis rasa Premium Terbaru, Template safelink resposif ini buatan kompi ajaib dan sedikit saya rubah tampilannya supaya terlihat simple aja. Di template safelink ini sobat bisa menambahkan artikel sendiri supaya aman bagi yang memasang iklan Adsense.

Cara Mudah buat blog SafeLink Converter Gratis rasa Premium Terbaru

Untuk safelink sendiri adalah blog untuk mengkonversi atau membikin encrypted link untuk segala link dari suatu blog supaya link-link tersebut menjadi aman dengan dikonversi menjadi base64. Serta bila ada pengunjung yang meng-klik link tersebut maka pengunjung bakal dibawa ke halaman redirect safelink converter untuk memperoleh link aslinya. Buat sobat yang memiliki blog download cocok sekali bila dipasang safelink ini untuk memperoleh penghasilan tambahan dari iklan yang sobat pasang.

Cara Mudah buat blog SafeLink Converter Gratis rasa Premium Terbaru
Oke kita langsung aja mempraktekan caranya berikut dibawah ini, sobat harus simak baik-baik caranya karena dengan sedikit kesalahan saja safelink nya tidak akan berfungsi.
Baca Juga:

Cara Mudah buat blog SafeLink Converter Gratis rasa Premium Terbaru

  • Langkah pertama silahkan sobat buat blog baru
  • Jika sudah membuatnya jangan lupa gunakan https:// caranya masuk menu Setelan>Dasar>pilih Ya pada Pengalihan HTTPS.
Cara Mudah buat blog SafeLink Converter Gratis rasa Premium Terbaru
  • Ganti template blog bawaan dengan template safelink klik Disini
  • Kemudian buat artikel pada laman statis (untuk artikel di rekomendasikan harus konten inggris) beri judul sesuai konten.
  • Kemudian selipkan kode script dibawah ini pada mode HTML dan simpan diantara artikel yang dibuat kalo sudah selesai silahkan klik perbarui.

<div style="border-radius: 10px; border: 1px solid #e4e4e4; padding: 10px;">
<div class="row margin-bottom-20">
<div class="col-md-4 text-center">
<h3>
Advertise</h3>
Kode Iklan Disini
</div>
<div class="col-md-4 margin-top-25">
<div class="panel panel-success text-center">
<div class="panel-heading">
<h2>
<i class="fa fa-shield"></i> SafeLink Converter <i class="fa fa-shield"></i></h2>
</div>
<div class="panel-body text-center">
<div class="text-primary margin-bottom-20">
Encrypting your link and protect the link from viruses, malware, thief, etc!<br />
Made your link safe to visit.
</div>
<div class="progress" id="daplong">
<div class="progress-bar progress-bar-striped active six-sec-ease-in-out" data-transitiongoal="100" role="progressbar">
</div>
</div>
<button class="alert alert-dismissible alert-success btn-lg" id="download2" style="display: none;"><i aria-hidden="true" class="fa fa-thumbs-o-up"></i> <strong>Well done!</strong> you have successfully gained access to Decrypted Link. <i aria-hidden="true" class="fa fa-hand-o-down slideInDownThumb"></i></button>
<br />
<div class="panel-body">
<script src="https://cdn.rawgit.com/mulyanacymot/safelinkliknew/2d2fb103/safelinknew.js" type="text/javascript"></script>
<script type="text/javascript">
var currentURL=location.href;
var str = currentURL;
var res = str.replace("https://safelinklik.blogspot.com/p/understanding-downloads-how-it-works.html?url=", "");
document.write('<button type="button" id="download" class="Visit_Link btn btn-success" onclick="changeLink();" style="display: none;"><strong>Visit Link</strong> <i class="fa fa-external-link" aria-hidden="true"></i></button>')
</script>
  </div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<h3>
Advertise</h3>
Kode Iklan Disini
</div>
<div class="clear">
</div>
</div>
</div>
<div class="container">
<div class="text-left">
</div>
</div>
  • Selanjutnya membuat file Js, Silahkan copy Script dibawah ini dan paste di notepad. ganti url https://safelinklik.blogspot.com/p/laman dengan Url laman sobat. kemudian save dengan tipe .js (misal: safelink.js).
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(input){var output="";var chr1,chr2,chr3,enc1,enc2,enc3,enc4;var i=0;input=Base64._utf8_encode(input);while(i<input.length){chr1=input.charCodeAt(i++);chr2=input.charCodeAt(i++);chr3=input.charCodeAt(i++);enc1=chr1>>2;enc2=((chr1&3)<<4)|(chr2>>4);enc3=((chr2&15)<<2)|(chr3>>6);enc4=chr3&63;if(isNaN(chr2)){enc3=enc4=64;}else if(isNaN(chr3)){enc4=64;}
output=output+ this._keyStr.charAt(enc1)+ this._keyStr.charAt(enc2)+ this._keyStr.charAt(enc3)+ this._keyStr.charAt(enc4);}
return output;},decode:function(input){var output="";var chr1,chr2,chr3;var enc1,enc2,enc3,enc4;var i=0;input=input.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(i<input.length){enc1=this._keyStr.indexOf(input.charAt(i++));enc2=this._keyStr.indexOf(input.charAt(i++));enc3=this._keyStr.indexOf(input.charAt(i++));enc4=this._keyStr.indexOf(input.charAt(i++));chr1=(enc1<<2)|(enc2>>4);chr2=((enc2&15)<<4)|(enc3>>2);chr3=((enc3&3)<<6)|enc4;output=output+ String.fromCharCode(chr1);if(enc3!=64){output=output+ String.fromCharCode(chr2);}
if(enc4!=64){output=output+ String.fromCharCode(chr3);}}
output=Base64._utf8_decode(output);return output;},_utf8_encode:function(string){string=string.replace(/\r\n/g,"\n");var utftext="";for(var n=0;n<string.length;n++){var c=string.charCodeAt(n);if(c<128){utftext+=String.fromCharCode(c);}
else if((c>127)&&(c<2048)){utftext+=String.fromCharCode((c>>6)|192);utftext+=String.fromCharCode((c&63)|128);}
else{utftext+=String.fromCharCode((c>>12)|224);utftext+=String.fromCharCode(((c>>6)&63)|128);utftext+=String.fromCharCode((c&63)|128);}}
return utftext;},_utf8_decode:function(utftext){var string="";var i=0;var c=c1=c2=0;while(i<utftext.length){c=utftext.charCodeAt(i);if(c<128){string+=String.fromCharCode(c);i++;}
else if((c>191)&&(c<224)){c2=utftext.charCodeAt(i+ 1);string+=String.fromCharCode(((c&31)<<6)|(c2&63));i+=2;}
else{c2=utftext.charCodeAt(i+ 1);c3=utftext.charCodeAt(i+ 2);string+=String.fromCharCode(((c&15)<<12)|((c2&63)<<6)|(c3&63));i+=3;}}
return string;}}
var encode=document.getElementById('encode'),decode=document.getElementById('decode'),output=document.getElementById('output'),input=document.getElementById('input');var User_ID="";var protected_links="";var a_to_va=0;var a_to_vb=0;var a_to_vc="";function auto_safelink(){auto_safeconvert();}
function auto_safeconvert(){var a_to_vd=window.location.hostname;if(protected_links!=""&&!protected_links.match(a_to_vd)){protected_links+=", "+ a_to_vd;}else if(protected_links=="")
{protected_links=a_to_vd;}
var a_to_ve="";var a_to_vf=new Array();var a_to_vg=0;a_to_ve=document.getElementsByTagName("a");a_to_va=a_to_ve.length;a_to_vf=a_to_fa();a_to_vg=a_to_vf.length;var a_to_vh=false;var j=0;var a_to_vi="";for(var i=0;i<a_to_va;i++)
{a_to_vh=false;j=0;while(a_to_vh==false&&j<a_to_vg)
{a_to_vi=a_to_ve[i].href;if(a_to_vi.match(a_to_vf[j])||!a_to_vi||!a_to_vi.match("http"))
{a_to_vh=true;}
j++;}
if(a_to_vh==false)
{var encryptedUrl=Base64.encode(a_to_vi);a_to_ve[i].href="https://safelinklik.blogspot.com/p/laman.html?url="+ encryptedUrl;a_to_ve[i].rel="nofollow";a_to_vb++;a_to_vc+=i+":::"+ a_to_ve[i].href+"\n";}}
var a_to_vj=document.getElementById("anonyminized");var a_to_vk=document.getElementById("found_links");if(a_to_vj)
{a_to_vj.innerHTML+=a_to_vb;}
if(a_to_vk)
{a_to_vk.innerHTML+=a_to_va;}}
function a_to_fa()
{var a_to_vf=new Array();protected_links=protected_links.replace(" ","");a_to_vf=protected_links.split(",");return a_to_vf;}

  • Lalu Upload file js yang sobat buat tadi ke GitHub, Caranya bisa baca Disini
  • Selanjutnya setelah selesai upload file js-nya, edit laman yang dibuat tadi dan ganti url yang warna hijau dengan link url file js yang sudah di Raw. begitu juga dengan url warna kuning ganti dengan url laman sobat.
  • Selanjutnya edit juga semua url pada template blog sama seperti mengganti pada laman tadi.
catatan :
Untuk mencari url yang akan kita ganti pada template gunakan ctrl+F dan ketik URL-LAMAN dan ganti semua dengan url laman blog sobat.
Begitu juga dengan url file js pada template gunakan ctrl+F ketik URL-JS dan ganti semua dengan url js sobat.
  • Kemudian Simpan Template.
  • Sampai sini sobat sudah bisa mencobanya dan tes apakah berjalan atau masih ada yang error.
  • Bila sudah berhasil berjalan dengan baik, sobat bisa simpan kode script dibawah ini kedalam template blog utama. Simpan di atas code </body>
<script src='URL-JS' type='text/javascript'/>
<script type='text/javascript'>
protected_links = &quot;domain.com,blogspot.com,blogger.com,linkedin.com,facebook.com,twitter.com,google.com,feedburner.com&quot;;
auto_safelink();
</script>
Catatan : ganti URL-JS dengan url js punya sobat, dan domain.com ganti dengan domain blog utama supaya tidak terkena redirect safelink.
Untuk sobat yang menggunakan domain TLD silahkan hapus script dalam template tersebut. script-nya seperti dibawah ini. Untuk yang menggunakan blogspot biarkan saja.
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
var ncr = "https://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr); };

Demikian ulasan mengenai Cara Mudah buat blog SafeLink Converter Gratis rasa Premium Terbaru, semoga dengan artikel ini bisa menjadi informasi yang bermanfaat buat sobat. Bila ada saran atau pertanyaan silahkan berkomentar dibawah.

Cara Upload file css, html, Js ke GitHub Terbaru

KANGCYMOT | Cara Upload file css, html, Js ke GitHub Terbaru, Github merupakan suatu web penyedia layanan penyimpan proyek perangkat lunak dengan cara gratis. Github adalah situs paling terkenal di dunia maya untuk hosting serta kolaborasi software. Selain itu, Github juga lumayan terkenal untuk meng-upload atau meng-hosting file JS, CSS, serta HTML dengan cara gratis dengan server MaxCDN.

Cara Upload file css, html, Js ke GitHub Terbaru

Nah.. kabarnya sebab bila file yang dihosting di Google Drive tak jarang mengalami error 429 sebab terhalang limit akses, kasrena itu saya menyarankan untuk mencoba memakai hosting dari Github dengan tanpa batas akses dengan server MaxCDN. Yuk kita simak caranya berikut dibawah ini.
Baca Juga:

Cara Upload file css, html, Js ke GitHub Terbaru

  • Pertama Silahkan klik Disini untuk mengunjungi halaman GitHub.
  • Daftar buat akun seprti biasa, jangan lupa Verifikasi pada email yang dikirim GitHub.
  • Selesai membuat akun, Klik tanda (+) dikanan atas lalu pilih New Repository.
Cara Upload file css, html, Js ke GitHub Terbaru

  • Kemudian sobat akan melihat halaman seperti pada gambar dibawah, Sobat isi sesuai nama File sobat yang akan di upload, Pilih sebagai Publik dan jangan lupa centang pada Initialize this repository with a README lalu klik Create repository. (Lihat gambar)
Cara Upload file css, html, Js ke GitHub Terbaru

  • Selanjutnya sobat akan melihat halaman Repository yang telah sobat buat, Silahkan upload file css, html maupun Js dihalaman tersebut. (Lihat Gambar)

Cara Upload file css, html, Js ke GitHub Terbaru

  • Setelah upload selesai, sobat klik kanan pada file yang sudah di upload tadi dan pilih Copy link address yang nantinya link tersebut akan dibuat raw file. (Lihat Gambar)

Cara Upload file css, html, Js ke GitHub Terbaru

  • Untuk melakukan Raw file tersebut sobat kunjungi situs RawGit  atau raw.githack.com dan paste link yang sudah tadi di copy kedalam kotak yang pertama. dan hasilnya tinggal copy link yang sudah di raw pada kotak yang kiri dibawah nya.

Cara Upload file css, html, Js ke GitHub Terbaru


  • Selesai, Selamat mencoba!

Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile

KANG CYMOTCara buat Sticky widget responsif sidebar blog FIX Tampilan mobile, Apa kabar sahabat blogger Kang Cymot? semoga sobat - sobat baik-baik saja tentunya. Pada postingan kali ini saya akan membagikan tutorial membuat sticky widget pada sidebar khusunya dan sticky widget ini sudah fix pada tampilan mobil, contohnya bisa dilihat pada blog saya.

Terus apa sih kegunaaannya membikin sticky widget? Salah satu tujuan dibuatnya sticky widget merupakan untuk membekali info dengan cara terus-menerus memperlihatkan pengunjung yang mengunjungi blog anda. Biasanya pembuatan sticky widget di gunakan untuk artikel terbaru atau popular post bahkan ada juga yang digunakan untuk mempromosikan iklan semacam google adsense. Dengan sticky tersebut pastinya diinginkan bisa menambah jumlah klik iklan banyak pada blog anda. Baiklah tidak usah berlama - lama lagi, yuk simak tutorialnya berikut dibawah ini.

Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile

Berikut Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile

  • Pertama Silahkan Masuk ke dashboard blogger sobat>Tema>Edit HTML.
  • Simpan kode script dibawah ini tepat diatas atau sebelum kode </body>.
  <!-- JAVASCRIPT STICKY WIDGET -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#sticky-sidebar').offset().top - stickyHeight - 35; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();

        var lebar = $(window).width();

      if ((stickyTop < windowTop)&&(lebar > 759)) {

        el.css({

          position: 'fixed',

          top: 20 // Jarak atau margin sticky dari atas

        });

      } else {

        el.css('position', 'static');

      }

      if (limit < windowTop) {

        var diff = limit - windowTop;

        el.css({

          top: diff

        });

      }

    });

  }

});

//]]>

</script> 

  • Perhatikan kode yang saya beri warna hijau, sobat ganti dengan ID WIDGET yang akan dibuat sticky.

Cara menemukan ID atau kode widget sidebar blog sobat, sobat bisa pergi ke Tata letak pada Dashboard blog sobat terus Klik Edit pada widget Sidebar yang akan dibuat sticky, selajutnya lihat pada link nya disitu sobat bisa menemukan ID widgetnya seperti contoh gambar dibawah.

Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile
Sobat bisa menggantinya seperti contoh #HTML1 pada #sticky-sidebar.

Baca Juga:

  • Selanjutnya untuk membuat Widget sticky tersebut tidak melebar tampilannya saat di scroll, Sobat tambahkan kode CSS dibawah ini dan simpan diatas kode ]]></b:skin>.

 /* CSS RESPONSIVE STICKY WIDGET */
#sticky-sidebar{background:#fff;width:100%;max-width:300px}
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
} 
Kode yang saya beri warna hijau Ganti dengan kode ID HTML yang dibuat Sticky widget.

Demikian saja postingan mengenai Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile, semoga dengan artikel ini bisa menjadi informasi yang bermanfaat buat sobat. Bila ada saran atau ada pertanyaan, sobat bisa berkomentar dibawah. Selamat mencoba!!!

Cara menghasilkan uang dari blog dengan AdsOptimal selain Adsense

Para blogger tentu tau yang namanya CPM (Cost Per Million). Ya, itu merupakan salah satu tutorial menghasilkan uang dari internet melewati blog. Apabila kamu searching di Google tentu tak sedikit artikel yang membahas tutorial menperoleh uang dari internet salah satunya CPM yang didapat dari tak sedikitnya pengunjung. Tetapi penghasilan yang didapat tak rutin berbuntut manis, para sobat wajib teliti untuk memilih layanan iklan publisher yang terpercaya serta cukup penghasilannya.

Cara menghasilkan uang dari blog dengan AdsOptimal selain Adsense

Tentang AdsOptimal

AdsOptimal merupakan salah satu penyedia iklan mobile yang terkenal kali ini. Khususnya apabila pengunjung blog kamu hadir dari Mobile (ponsel pintar atau tablet), AdsOptimal bisa dijadikan rekomendasi paling baik untuk anda. AdsOptimal juga bisa dipakai untuk iklan desktop bahkan untuk berbagai review penghasilan dari AdsOptimal lebih besar dari Google Adsense serta untuk kamu yang sempat ditolak Google Adsense, maka AdsOptimal merupakan rekomendasi paling baik untuk sobat.

Dalam pendapatan dari AdsOptimal terbilang lumayan tak sedikit, dalam hasil yang maximal pastikan blog kamu juga mempunyai traffic yang tak sedikit. Bahkan di AdsOptimal tanpa butuh pengunjung mengklik iklan, kamu telah dapat memperoleh dolar sebab penghitungan dari AdsOptimal merupakan berdasarkan rate jumlah pengunjung blog anda.

Pendaftaran cukup mudah

Cara daftar AdsOptimal lumayan mudah tak semacam Google Adsense yang memerlukan waktu berhari – hari dalam mendapat email balasan. Persyaratan mendaftar AdsOptimal sederhana, bahkan dalam blog yang belum lama dibangun telah dapat mendaftar. Tak ada salahnya dicoba.

Baca juga : Perpendek link URL menghasilkan dollar (Shorte.st) Terbaru

Pembayaran

Pembayaran yang diperbuat salah satunya via PayPal dengan minimal payout $50, serta apabila blog kamu diterima biasanya kamu bakal menperoleh free $15, jarang ada perusahaan yang memberikan bayaran gratis kepeda pendaftar anyar semacam AdsOptimal, so jangan ragu dalam mendaftar sebagai publisher AdsOptimal.

Cara mendaftar AdsOptimal

1. Klik gambar berikut untuk menuju halaman AdsOptimal  
2. Kemudian Klik "Sign Up for AdsOptimal"
3. Isi Form dengan jelas sesuai Identitas sobat.(Lihat gambar)

Cara menghasilkan uang dari blog dengan AdsOptimal selain Adsense
Form Pendaftaran AdsOptimal

4. Klik "Submit"

Untuk pendaftaran pertama telah berakhir, tunggu balasan email konfirmasi yang bakal di kirimkan pihak AdsOptimal ke email sobat biasanya 1 – 2 hari.

Baca Juga : Cara mudah mendaftar Payoneer dan mendapatkan bonus $25 - Lengkap terbaru 2016

Seusai sobat memperoleh email konfirmasi, lalu klik tautan langsung yang dikirim tim AdsOptimal untuk melengkapi data yang dibutuhkan. Untuk kamu yang memakai platform WordPress self hosting, untuk memasang iklan kamu bisa memakai plugin yang dikirim oleh AdsOptimal atau search plugin AdsOptimal di dashboard WordPress anda.

Demikian ulasan mengenai Cara menghasilkan uang dari blog dengan AdsOptimal selain Adsense, Semoga dengan informasi ini dapat bermanfaat buat sobat Kang Cymot, dan semoga sukses untuk kita semua.

Cara memasang Recent post slider Responsive bawah navigasi Terbaru

Pada kesempatan ini kang cymot akan membagikan cara memasang widget recent post yang tentunya sudah responsive, dengan memasang widget ini pastinya blog sobat dapat kelihatan jadi lebih keren dipandang. Widget recent post ini buatan Teteh arlina tapi sedikit sudah saya modifikasi, sobat - sobat juga dapat merubah widget recent post ini sesuai warna template sobat yang digunakan.

Cara memasang Recent post slider Responsive bawah navigasi Terbaru

Baiklah tidak perlu berpanjang lebar lagi kita langsung saja ke caranya, yuk simak caranya berikut dibawah ini.

Cara memasang Recent post slider Responsive dibawah menu navigasi


  • Silahkan login ke blog sobat dan pilih > Template > Edit HTML
  • Kemudian salin kode css dibawah ini dan pastekan tepat diatas kode  ]]></b:skin> atau </style>
/* CSS Responsive Slider Recent Post */
#featuredpost {margin:10px 30px}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:350px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:20px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:#357AE8(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#357AE8;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background:rgba(0, 0, 0, 0.4);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(192,192,192,0.3);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(70, 171, 255, 0.4);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
  • Selanjutnya Copy lagi kode script dibawah ini dan pastekan tepat diatas kode  </body>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://kangcymot.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Note : Ganti tulisan yang berwana merah dengan URL blog sobat.
Keterangan :
  • MaxPost : Jumlah semua postingan yang akan tampil dalam list
  • ImageSize : Ukuran maksimal pada gambar (Semakin besar ukurannya maka akan semakin jelas kerapatan pixel gambar yang akan tampil, namun akan semakin banyak waktu yang dibutuhkan dalam proses memuat halaman)
  • Interval : Waktu yang dibutuhkan ketika post berpindah (Contoh : 10000 yang berarti 10 detik)
  • Autoplay : (True) Post akan berpindah secara otomatis, (False) Post tidak akan berpindah secara otomatis.
  • Kemudian copy lagi kode dibawah ini dan pastekan diatas kode content-wrapper atau dibawah kode  menu-wrapper
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>
Note : Kode diatas yang saya beri warna biru tersebut adalah agar widget recent post tersebut hanya muncul pada halaman utama saja, jika sobat menginginkan widget recent post tersebut muncul di halaman utama dan muncul juga dihalaman postingan, sobat tinggal hapus kode warna biru.
  • Jika sudah, Simpan Template dan lihat hasilnya.

Sebagai tambahan jika sobat kesulitan dengan memasang kode recent post diatas tersebut, jangan galau gelisah merana karena saya sudah menyediakan cara praktisnya.
  • Sobat tinggal copy kode dibawah ini lalu pergi Tata Letak > Tambahkan Gadget > HTML/JavaScript dan pastekan kodenya disana.
<style>
/* CSS Responsive Slider Recent Post */
#featuredpost {margin:10px 30px}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:350px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:20px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:#357AE8(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#357AE8;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background:rgba(0, 0, 0, 0.4);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(192,192,192,0.3);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(70, 171, 255, 0.4);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://kangcymot.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Note : Ganti tulisan yang berwarna merah dengan URL blog sobat.
  • Klik Simpan.


Jika sobat ingin memunculkan widget recent post tersebut hanya dihalaman utama saja, silahkan bungkus widgetnya dengan tag kondisional khusus halaman utama. Sebagai contohnya :

  • Klik Template > Buka edit HTML > Misal kode widget Recent post slider sobat adalah #HTML4
  • Tambahkan kode dibawah ini dan letakkan diantara kode widget contoh #HTML4
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.................................................................................
</b:if>
  • Sehingga jika sudah ditambahkan maka akan seperti dibawah ini.
<b:widget id='HTML4' locked='false' title='' type='HTML'>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
    </b:widget>
  • Simpan Template dan lihat hasilnya.

Source : www.arlinadzgn.com/

Demikian ulasan Cara memasang Recent post slider Responsive bawah navigasi Terbaru, Semoga artikel ini bermanfaat buat sobat dan selamat mencoba. Jika ada yang mau ditanyakan silahkan beri komentar dibawah.

Cara termudah membuat Disclaimer diblog Terbaru

Mungkin sobat yang perlu harus tahu Disclaimer ini merupakan halaman statis yang mutlak sobat buat ketika sobat akan mendaftarkan blognya ke google adsense, karena inilah salah satu dari syarat untuk diterima Google adsense, selain itu, Disclaimer ini menandakan bahwa blog atau website sobat itu profesional.

Sekilas tentang disclaimer, ialah dalam istilah dunia maya dapat dikatakan dengan sebuah aturan dan peraturan dari suatu halaman diblog atau website. Pentingnya dalam pemasangan disclaimer pada suatu halaman blog berguna untuk dapat menginformasikan terhadap pengunjung situs web ataupun blog agar dalam berinteraksi pada halaman situs baik itu berupa, Komentar, share, upload dll, agar lebih serba saling menghargai sesama pengunjung dan pemilik halaman situs.

Meskipun membuat disclaimer di blog itu mungkin mudah, namun belum semua orang bisa membuatnya, nah.. maka dari itu bila sobat yang masih pemula atau masih belajar dalam dunia blogging seperti saya, sobat bisa membuatnya dengan secara mudah dan gratis pula tanpa harus kebingungan mencari kata - kata. Baiklah, tidak perlu banyak - banyak lagi penjelasan kita simak saja tutorial membuat Disclaimer berikut ini.

Artikel Terkait : Cara mudah membuat Privacy Policy diblog Terbaru

 

Cara membuat Disclaimer

Cara termudah membuat Disclamer diblog Terbaru
Form Disclaimer
  • Selanjutnya sobat isi form tersebut sesuai data blog atau website sobat, setelah itu klik Generate Disclaimer maka akan tampil seperti gambar dibawah.
Cara termudah membuat Disclamer diblog Terbaru
script HTML Disclaimer
  • Kemudian sobat copy semua kode script HTML tersebut dan simpan dilaman Blog sobat. (Laman blog dalam mode HTML).
  • Selesai.

Demikianlah artikel saya Cara termudah membuat Disclamer diblog Terbaru, Semoga dapat membantu dan bermanfaat tentunya buat sobat semua. Bila ada yang mau ditanyakan atau sekedar mau kasih sarannya, Silahkan tinggalkan komentar dibawah. Terima Kasih.

Cara mudah membuat Privacy Policy diblog Terbaru

Sobat tentunya sudah tau apa itu Privacy Policy ? Sobat harus wajib memasangnya diblog sobat, nah,, Privacy Policy itu sendiri adalah Kebijakan Pribadi yang dibuat oleh seorang pemilik blog atau website untuk dipaparkan kepada para pembaca sehingga mengetahui Ketentuan dan Kebijakan yang telah dibuat dalam blog atau website tersebut. Dengan begitu, para pembaca pun bisa mematuhi dan menaati Kebijakan dari Blog atau Website.

Privacy Policy ini juga salah satu hal yang paling penting bagi sobat apabila ingin mendaftarkan blog sobat atau pada Google Adsense, dalam mendaftarkan blog ke Google adsense supaya di approve salah satunya adalah dengan adanya navigasi yang jelas, privacy policy inilah salah satu dari navigasi tersebut.

Apa Alasannya ? Dikarenakan Kebijakan Privasi ini akan dibaca oleh orang yang menganalisa dan memeriksa Blog atau Website yang telah sobat daftarkan. Bagi sobat yang telah melihat Privacy Policy dari beberapa Blog atau Website yang ada kadang tidak mengetahui apa fungsi dari Privacy Policy itu sendiri. Nah.. bagi sobat yang ingin membuatnya saya akan memberikan tips membuat Privacy Policy dengan mudah juga gratis.

Dengan begitu, Sobat tidak Perlu Menulis Privacy Policy itu sendiri dan kebingungan, akan tetapi sobat hanya perlu mengisi form yang telah disediakan oleh penyedia situs Privacy Policy tersebut. Oke, klo begitu kita langsung saja simak caranya berikut ini.

Artikel Terkait : Cara termudah membuat Disclamer diblog Terbaru

Cara membuat Privacy Policy

Cara mudah membuat Privacy Policy dan diblog Terbaru
Form Privacy Policy
  • Kemudian sini form tersebut sesuai data blog atau website sobat.
  • Setelah itu sobat klik Generate HTML (Lihat Gambar).
Cara mudah membuat Privacy Policy dan diblog Terbaru
Script HTML Privacy Policy
  • Pada gambar diatas adalah hasil yang sobat generate tadi, Copy semua script HTML tersebut dan simpan pada laman blog sobat.
  • Selesai.

Nah.. itulah Cara mudah membuat Privacy Policy dan diblog Terbaru, Semoga bermanfaat buat sobat - sobat. Bila ada yang mau ditanyakan atau sekedar mau kasih sarannya, silahkan tinggalkan komentar dibawah. Terima kasih.

Cara membuat popular post berdasarkan label atau kategori with thumbnail Terbaru

Hallo sobat - sobat googeling, saya mau share Cara membuat popular post berdasarkan label atau kategori with thumbnail. Biasanya widget ini banyak digunakan oleh blog konten berita, salah satu fungsi widget ini untuk memudahkan para pengunjung untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Untuk lebig jelasnya silahkan sobat lihat gambar dibawah :

Cara membuat popular post berdasarkan label atau kategori with thumbnail
Contoh tampilan Label dengan Thumbnail
Bila sobat - sobat googeling tertarik untuk mencobanya mari kita simak tutorial berikut ini.


Cara memasang widget label with thumbnail :


  • Pertama yang harus dilakukan adalah login ke blogger dengan akun sobat pastinya
  • Masuk dashboard kemudian pilih Tamplate lalu edit HTML
  • Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template sobat.
  • Kemudian copy kode CSS dibawah ini dan letakan tepat di atas kode ]]></b:skin>

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

Note :Perhatikan tulisan warna Biru diatas, itu adalah lebar dan tinggi thumbnail image.

  • Selanjutnya masih pada bagian Edit HTML, masukkan kode script dibawah ini dan letakkan diatas kode </head> untuk memudahkan pencarian tekan Ctrl+f.


<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjabBLmftmTkWRoy9Ca8ebpCEUiOYqYDpEpp3zkCD6J702eNuosv2dxUuo6EqbQ94Rva6HwGKlntwsFCDe80MkB1hXmYCzzWfFzPCjFe-cvdK0cwlOidXUs30B0YUisWvS8eFuwshKq6GSb/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Jika kode script diatas terlalu panjang, sobat bisa simpan di tempat penyimpanan Google Code sobat sendiri atau bila tidak mau ribet sobat bisa gunakan kode script di bawah ini yang sudah di ringkas di Google Code.

<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>


  • Setelah sobat yakin sudah benar melakukannya kemudian simpan templates. Selanjutnya menuju ke layout atau Tata letak kemudian klik Tambahkan gadget lalu cari HTML/javascript dan letakkan kode dibawah ini kedalam gadget dan klik simpan.


Cara membuat popular post berdasarkan label atau kategori with thumbnail
Tampilan memasang widget


<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = true;var showpostsummary = true;var numchars = 60;</script>


<script type="text/javascript" src="/feeds/posts/default/-/LABELSOBAT?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>


<script src="http://NAMABLOG.blogspot.com/feeds/posts/summary/-/LABELSOBAT?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://NAMABLOG.blogspot.com/search/label/LABELSOBAT" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Note : Warna biru : adalah label atau kategori yang ditampikan, Sobat bisa menggantinya dengan label sobat yang diinginkan.
Warna merah : Ganti URL dengan URL blog sobat.

Demikian postingan saya Cara membuat popular post berdasarkan label atau kategori with thumbnail, Semoga bermanfaat. Bila ada yang kurang jelas silahkan berkomentar dikotak komentar.

Tombol sharing sosial media keren untuk blogger Terbaru

Mungkin sobat Googeling sudah melihat banyak tentang widget Sharing sosial untuk blogger, tapi dalam postingan ini saya akan membagikan yang special untuk sobat yaitu Sharing Social Bergaya Tombol untuk Blogger yang Keren dengan Hover Efek. Widget sosial media ini dengan codingnya tidak akan mempengaruhi kinerja blog sobat seperti kecepatan loading dan fitur navigasi pengguna lainnya. Hal ini paling menarik media sosial widget dengan efek hover keren bagi pengguna blogspot. Selain itu, widget ini juga sangat responsif sehingga sobat dapat menambahkannya pada setiap tempat seperti menambahkannya pada sidebar kiri atau kanan, di Footer atau tempat lain yang sobat inginkan.
Tombol sharing sosial media keren untuk blogger Terbaru
Tombol widget social media
Artikel Terkait :

Dengan memasang widget social media ini banyak manfaat untuk blog kita, seperti halnya dengan widget tersebut pengunjung blog kita dapat mengikuti melalui situs sosial media yang sobat pasang diblog sobat, sehingga para pembaca blog sobat dapat melihat artikel ter-update yang sobat posting. Nah.. Bila sobat tertarik untuk mencoba memasangnya diblog sobat, yuk kita simak caranya dibawah :

 

Cara memasang Widget Tombol social media blogger

  • Pertama login dulu dengan akun blogger sobat.
  • Kemudian Masuk Dashboard >> Tata Letak >> Tambahkan Gadget >> HTML/javaScript (Lihat gambar)
Cara memasang Widget Tombol social media blogger
memasang widget HTML/Javascript
  • Kemudian Copy script dibawah ini dan Letakkan di HTML/JavaScript tersebut.

<style>
.socialLinks{text-align:center;margin:50px 0 0}.socialLinks a{display:inline-block;margin:0 .5em;-webkit-transition-property:all !important;-moz-transition-property:all !important;-o-transition-property:all;transition-property:all !important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;border:2px solid #8fb73e}.socialLinks a:hover{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px}.socialLinks span{display:none}.fTwitter{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:1px -1083px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook:hover{background-color:#369;border-color:#fff;background-position:1px -1141px}.fTwitter:hover{background-color:#28aae1;border-color:#fff;background-position:0 -718px}.fInstagram:hover{background-color:#517fa4;border-color:#fff;background-position:0 -597px}.fPintrest:hover{background-color:#cc2127;border-color:#fff;background-position:0 -285px}.fLinkedIn:hover{background-color:#007fb1;border-color:#fff;background-position:0 -860px}.fDribbble:hover{background-color:#ea4c89;border-color:#fff;background-position:0 -52px}.fGoogle:hover{background-color:#e46044;border-color:#fff;background-position:0 -395px}.fInstagram{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 11px;background-repeat:no-repeat;height:62px;width:62px}.fGoogle{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -343px;background-repeat:no-repeat;height:62px;width:62px}
</style>
<div class="socialLinks">
<a href="https://facebook.com/URL-FACEBOOK" class="fFacebook transition"><span>Facebook</span></a>
<a href="https://twitter.com/URL-TWITTER" class="fTwitter transition"><span>Twitter</span></a>
<a href="http://instagram.com/URL-INSTAGRAM" class="fInstagram transition"><span>Instagram</span></a>
<a href="http://pinterest.com/URL-PINTEREST" class="fPintrest transition"><span>Pinterest</span></a>
<a href="http://www.linkedin.com/in/URL-LINKEDIN" class="fLinkedIn transition"><span>LinkedIn</span></a>
<a href="http://dribbble.com/URL-DRIBBBLE" class="fDribbble transition"><span>Dribbble</span></a>
<a href="https://plus.google.com/URL-G+" class="fGoogle transition"><span>G+</span></a>
    </div>

Note : Ganti yang saya tandai warna biru sesuai dengan link Url social media sobat.

  • Selanjutnya Klik Simpan.

Demikian saja postingan Tombol sharing sosial media keren untuk blogger Terbaru, Semoga dapat membantu dan bermanfaat buat sobat Googeling. Bila ada yang mau ditanyakan atau sekedar mau kasih sarannya, silahkan tinggalkan komentar dibawah. Terimakasih.

Cara Termudah memasang Emoticon pada komentar blog - Terbaru

Pastinya sobat - sobat sudah pada tahu apa itu emoticon ? Emoticon ini sering kali kita lihat disitus - situs seperti diberbagai social media salah satunya seperti Facebook dan masih banyak lagi seperti pada forum - forum juga salahsatunya Kaskus. Emoticon juga bisa dikatakan termasuk jenis pelampiasan perasaan pembaca atau sebuah ungkapan yang kita mau katakan dan sedang dirasakan, seperti kita menulis kode :) yang mengimajinasikan kita tersenyum atau bahagia. Untuk sebuah tampilan emoticonnya sendiri sobat bisa lihat Gambarnya seperti dibawah ini.

Cara Termudah memasang Emoticon pada komentar blog - Terbaru
Tampilan emoticon
Nah.. pada kesepatan ini saya akan sharing Cara Termudah memasang Emoticon pada komentar blog - Terbaru, dengan kita memasang emoticon diblog, pastinya para pembaca atau pengunjung blog sobat bisa berkomentar dan menggambarkan persaannya dengan emoticon ini. Tampilan emoticon ini juga bisa bergerak - gerak dan lucu - lucu. Baiklah, tidak perlu berpanjang lebar lagi bila sobat ingin mencobanya memasangnya diblog sobat, yuk kita simak caranya dibawah ini :

 

Cara memasang emoticon diblog

  • Langkah pertama sobat Login melalui akun blogger sobat.
  • Masuk Dashboard >> Template >> Edit HTML
  • Selanjutnya sobat cari kode </body> (biasanya berada paling bawah), untuk memudahkan pencarian tekan Ctrl+F pada keyboard.
  • Bila sudah ketemu, Copy kode script dibawah ini dan letakkan diatas kode </body> tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// kode js untuk menampilkan emoticon
jQuery(document).ready(function () {emoticonx({
emoRange:".post-body, #comments p, div.emoWrap",
})
});
//]]>
</script>
<script src='http://id-pemula-javascript.googlecode.com/files/emoticons.js'

type='text/javascript'/>

Note : Bila pada template sobat sudah terpasang script jquery, hapus script yang saya beri warna merah.
  • Kemudian Simpan Template dan lihat hasilnya.

Demikian postingan saya Cara Termudah memasang Emoticon pada komentar blog - Terbaru, Semoga dapat membantu dan bermanfaat buat sobat - sobat Googeling. Bila ada yang mau ditanyakan atau kasih saran, silahkan tinggalkan komentar dibawah.Terimakasih.

Cara memasang dan mengirim peta situs (SiteMap) di Google webmaster - Terbaru

Selamat malam sobat - sobat Blogger, setelah pada hari kemarin saya telah membahas Cara mendaftarkan blog atau situs ke Google Webmaster. Pada kesempatan sekarang saya akan sharing lagi Cara memasang dan mengirim peta situs (SiteMap) di Google webmaster - Terbaru, masih ada kaitannya dengan postingan saya yang kemarin, dan dipostingan tersebut saya sudah menjelaskan apa itu Google webmaster Tools, jadi sobat - sobat sudah tidak perlu dikasih tahu lagi.

Cara memasang dan mengirim peta situs (SiteMap) di Google webmaster - Terbaru

Untuk Peta situs atau SiteMap itu sendiri sangatlah penting untuk blog kita yang kita buat, dengan demikian sobat harus membuat dan mengirim sitemap blog sobat di google webmaster Tools ini supaya googlebot dapat mengindex semua artikel maupun halaman yang ada diblog sobat tanpa ada yang terlewat, bagi saya sendiri dengan mengirimkan sitemap ke google webmaster ini dapat memberikan banyak manfaat seperti halnya dapat mempercepat proses index update postingan terbaru dan untuk memberi tahu semua artikel yang ada diblog kita kedalam mesin pencari google untuk diindex dan dimasukan dihalaman penelusuran google. Jadi bagi blog yang belum mengirim peta situs ke google webmaster saya rasa anda harus cepat cepat mengirimkan peta situs blog sobat ke google webmaster Tools.

Cara mengirim peta situs (SiteMap) ke Google webmaster

  • Pertama sobat kunjungi Google webmaster tools klik Disini
  • Kemudian Klik Blog sobat yang sudah didaftarkan ke Google webmaster Tools
  • Selanjutnya sobat akan dialihkan pada halaman Dasboard webmaster tools, disana terlihat ada 3 tampilan diantaranya : Kesalahan perayapan, Kueri penelusuran dan Peta Situs. (Lihat Gambar)
Cara megirim peta situs (SiteMap) ke Google webmaster
Dasboard Webmaster Tools
  • Mungkin untuk sobat - sobat tampilannya akan terlihat masih kosong, seperti pada gambar diatas yang saya beri kotak warna merah adalah data Peta situs blog kita, yang warna biru menunjukan URL blog kita yang terkirim dan yang warna merah menunjukkan URL blog kita yang sudah terindex dimesin pencari google.
  • Untuk langkah selanjutnya sobat klik tab Peta situsnya, lalu klik tombol yang berwarna merah dipojok kanan atas yang bertuliskan "TAMBAHKAN/UJI PETA SITUS"
  • Selanjutanya isikan satu persatu kode dibawah ini kedalam peta situs tersebut.

- atom.xml
- atom.xml?redirect=false&amp;start-index=1&amp;max-results=500
- feeds/posts/default?alt=rss
- feeds/posts/default?orderby=updated
- rss.xml
- sitemap.xml


Cara megirim peta situs (SiteMap) ke Google webmaster
memasang kode peta situs
  • Selamat, sobat sudah berhasil mengirimkan peta situs, kini sobat tinggal menunggu peta situsnya terindex oleh juragan Google.

Demikianlah postingan saya Cara memasang dan mengirim peta situs (SiteMap) di Google webmaster - Terbaru, Semoga dapat membantu dan bermanfaat buat sobat. Bila ada yang mau ditanyakan atau sekedar mau kasih sarannya, silahkan tinggalkan komentar dibawah.

Daftarkan dan Verifikasi blog ke Google webmaster Tools Terbaru

Ketemu lagi dengan saya sobat - sobat, setelah saya sibuk didunia nyata, akhirnya saya bisa meluangkan waktu untuk menulis artikel. Pada kali ini saya akan membagikan tips buat sobat - sobat Googeling. Daftarkan dan Verifikasi blog ke Google webmaster Tools - Terbaru, yups benar sekali, karena menurut saya tips ini penting banget buat blog sobat.

Daftarkan dan Verifikasi blog ke Google webmaster Tools - Terbaru
Saya akan jelaskan sedikit mengenai webmaster tools itu adalah salah satu produk milik google yang suka digunakan untuk memonitoring interaksi diantara robot pencari google terhadap web atau situs yang kita miliki, fasilitas yang dimiliki oleh alat ini cukup lengkap dan cukup jitu untuk meningkatkan trafik dan untuk memelihara web atau situs yang kita miliki,  namun sebelum kita bisa memanfaatkan google webmaster tool untuk memonitoring blog kita yang harus sobat lakukan pertama adalah mendaftarkan situs atau blog yang kita miliki ke google webmaster tools, dengan demikian robot pencari google akan lebih mengenali situs atau blog yang kita miliki sehingga setiap halaman blog yang kita miliki lebih cepat muncul dipencarian google sehingga dapat meningkat trafik pengunjung ke blog kita.

Cara mendaftar Google webmaster Tools

  • Sobat kunjungi Google Webmaster Tools Disini
  • Kemudian Klik tombol yang berwarna biru yang bertuliskan "Masuklah ke layanan Alat Webmaster"
  • Jika berhasil maka akan memuat halaman webmaster Tools.
  • Selanjutnya sobat Klik "Tambahkan Situs" yang berada dipojok kanan atas berwarna merah. (Lihat Gambar)
Cara mendaftar Google webmaster Tools
Tambahkan situs
  • Sampai langkah ini sobat sudah berhasil mendaftarkan blog sobat ke webmaster tools.

Artikel Terkait : Cara memasang dan mengirim peta situs (SiteMap) di Google webmaster - Terbaru

Pada langkah berikutnya yang harus sobat lakukan adalah memverifikasi kepemilikan blog tersebut yang didaftarkan di Google webmaster. Ada banyak cara webmaster Tools menyediakan verifikasi kepemilikan blog, diantaranya dengan menggunakan Google Analytics, Unggahan File HTML, Penyedia nama domain, Google pengelola Tag, dan yang terakhir cara yang paling simple dengan menggunakan Tag HTML.

Diantara ke-5 cara untuk memverifikasi kepemilikan blog di Google webmaster Tools tersebut, kita pilih saja cara yang terakhir yaitu menggunakan Tag HTML. Bagimana caranya ? yuk kita simak lagi caranya berikut ini.

Cara Verifikasi kepemilikan Blog di Google webmaster

  • Melanjutkan dari langkah yang pertama menambahkan situs sobat diatas tadi, sobat klik alamat blog sobat yang berada dalam daftar Dashboard webmaster Tools.
  • Selanjutnya Sobat klik Gambar grigi di pojok kanan atas lalu pilih "Detail Verifikasi" (Lihat Gambar)
Cara Verifikasi kepemilikan Blog di Google webmaster
Verifikasi Kepemilikan

  • Selanjutnya sobat pilih "Verifikasikan dengan menggunakan metode yang berbeda" dan Klik.
  • Setelah muncul disana ada 5 Langkah cara yang saya sebutkan tadi, sobat pilih yang terakhir dengan menggunakan Tag HTML.
  • Copy script tersebut kedalam Template sobat dan letakkan tepat dibawah kode <head>.
  • Caranya : masuk ke blogger Dashboard >> Template >> Edit HTML.(Lihat Gambar)
Cara Verifikasi kepemilikan Blog di Google webmaster
Menempatkan kode verifikasi
  • Jika sudah Simpan Template.
  • Langkah selanjutnya kembali ke Halaman webmaster sobat lalu klik Verifikasi letaknya dibawah yang berwarna merah.
  • Jika berhasil maka akan ada tanda ceklis berwarna Hijau, Selesai.

Demikianlah postingan saya Daftarkan dan Verifikasi blog ke Google webmaster Tools - Terbaru, Semoga dapat membantu dan bermanfaat buat sobat - sobat. Bila ada yang mau ditanyakan atau mau kasih sarannya, silahkan tinggalkan komentar dibawah.Terimakasih.


My Ping in TotalPing.com