Pages

Tampilkan postingan dengan label tutorial dan trik blog. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial dan trik blog. Tampilkan semua postingan

Selasa, 24 September 2013

Cara Membuat Komentar Blog dan Google Plus Berdampingan

Assalamualaikum kawan,hari ini saya akan bebagi kembali tentang komentar pada blog,yaitu Cara Membuat Komentar Blog dan Google Plus Berdampingan,memang saya sudah terlambat membuat postingan seperti ini,akan tetapi kata pepatah,LEBIH BAIK TERLAMBAT,DARIPADA TIDAK SAMA SEKALI.Kata-kata itu yang membuat saya tetap berbagi meskipun terlambat.Sebelumnya saya sudah pernah memposting tentang Cara memasang komentar google plus saja tanpa komentar blog,dan saya juga sudah pernah memasang komentar ini,akan tetapi saya copot lagi karena menurut saya komentar google plusnya jarang terpakai,tapi buat kawan-kawan yang memang ingin memasangnya,silahkan ikuti cara-caranya di bawah ini:

Komentar Blog dan Google Plus Berdampingan

  • Pertama tentunya login dulu ke akun sobat
  • Selanjutnya Edit template,dan jangan lupa backup dulu supaya aman
  • Kemudian temukan kode di bawah ini,dan blok semuanya
<b:includable id='threaded_comments' var='post'>...</b:includable>

  • Ganti kode di atas dengan kode di bawah ini
<b:includable id='threaded_comments' var='post'>
<div id='com-header'>
<h6>Berkomentar dengan </h6> <img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissYJdq9rK7A-x_O4lm1uVrAh_XZ4MWJmrDZJ3gxODFb79zxrTNz1PAbTf3N1f0JOp1m2YcPI8GeM7cnChQMcsRiPibXuNWGQUdNTvTXaAXxpa0Dtt1aQA0znVm5DcTwrbGRXrj0W0SoKv/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKY1whKoQceKBhjwbDMPqGl5mzy2bf4BMJxh5j8QtdPXKiuhYCvciO0kSlTSKuPsb22A-xunVWQ4eTNMlLtgpFv6r3zr8mWhvEzR4nuDA3d6SyoJmX41d8bA5C9ANV2RX6mEUtyYFLtnh/s1600/Google-plus-comments-off' title='Tampilkan Komentar Google+'/><h6>silahkan tentukan pilihan sobat!</h6>
</div>
<div id='comment-zone'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>
    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>
    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
  <div id='gcontainer'><div id='gcomments'/></div>
<script type='text/javascript'>
      window.___gcfg = {
        lang: &#39;id-ID&#39;
      };
</script>
<script src='http://apis.google.com/js/plusone.js'/>
<script type='text/javascript'>
//<![CDATA[
gapi.comments.render('gcomments',{href:window.location,width:'640',first_party_property:'BLOGGER',view_type:'FILTERED_POSTMOD'});$('#com-norm').click(function(){$('#gcontainer').css('display','none');$('#comments').css('display','block');$('#com-norm').addClass('comment-on');$('#com-gplus').removeClass('comment-on');$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissYJdq9rK7A-x_O4lm1uVrAh_XZ4MWJmrDZJ3gxODFb79zxrTNz1PAbTf3N1f0JOp1m2YcPI8GeM7cnChQMcsRiPibXuNWGQUdNTvTXaAXxpa0Dtt1aQA0znVm5DcTwrbGRXrj0W0SoKv/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKY1whKoQceKBhjwbDMPqGl5mzy2bf4BMJxh5j8QtdPXKiuhYCvciO0kSlTSKuPsb22A-xunVWQ4eTNMlLtgpFv6r3zr8mWhvEzR4nuDA3d6SyoJmX41d8bA5C9ANV2RX6mEUtyYFLtnh/s1600/Google-plus-comments-off');});$('#com-gplus').click(function(){$('#comments').css('display','none');$('#gcontainer').css('display','block');$('#com-norm').removeClass('comment-on');$('#com-gplus').addClass('comment-on');$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4xaInlAlzK3nUtFxLO3vALRQoKNp0Ig-zlBFDu1d44KEKXeeXoBL_Wfc5b7skneGHcszIvy4hGEgcv_EZF3BNddY2ti7P32xole4L3PKWXyyOUZgkRq_FfVWSRHr6ydh55UTbvA3-xsl/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV2BISVxwmWrN6DXd82oP9StRQxntc1fQB2WnVcYKb28a6MQoDKY70_HiLVjPcyAkxGSD3yIt9ZlsbekPvqIZkOPUO5RgpSwF3CQNGniCP53Or7ujMD_PKjHQddJpzqj7JmpDAyOUQ17xi/s1600/google-plus-comments-on.png');});$('#com-norm').hover(function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissYJdq9rK7A-x_O4lm1uVrAh_XZ4MWJmrDZJ3gxODFb79zxrTNz1PAbTf3N1f0JOp1m2YcPI8GeM7cnChQMcsRiPibXuNWGQUdNTvTXaAXxpa0Dtt1aQA0znVm5DcTwrbGRXrj0W0SoKv/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4xaInlAlzK3nUtFxLO3vALRQoKNp0Ig-zlBFDu1d44KEKXeeXoBL_Wfc5b7skneGHcszIvy4hGEgcv_EZF3BNddY2ti7P32xole4L3PKWXyyOUZgkRq_FfVWSRHr6ydh55UTbvA3-xsl/s1600/blogger-comments-off.png');}});$('#com-gplus').hover(function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV2BISVxwmWrN6DXd82oP9StRQxntc1fQB2WnVcYKb28a6MQoDKY70_HiLVjPcyAkxGSD3yIt9ZlsbekPvqIZkOPUO5RgpSwF3CQNGniCP53Or7ujMD_PKjHQddJpzqj7JmpDAyOUQ17xi/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKY1whKoQceKBhjwbDMPqGl5mzy2bf4BMJxh5j8QtdPXKiuhYCvciO0kSlTSKuPsb22A-xunVWQ4eTNMlLtgpFv6r3zr8mWhvEzR4nuDA3d6SyoJmX41d8bA5C9ANV2RX6mEUtyYFLtnh/s1600/Google-plus-comments-off');}});
//]]>
</script>
<style>
#gcontainer {
display:none;
  }
#com-norm,#com-gplus {
cursor:pointer;
padding:0 5px;
float:left;
  }
#com-header {
border: 1px solid #d2d2d2;
padding: 10px;
float: left;
width: 615px;
margin: 5px;
background: #f5f5f5;
  }
#com-header h6{
font-size: 15px;
text-transform: none;
font-weight: bold;
text-align: center;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
  }
</style>
</div>
</b:includable> 
Sesuaikan ukuran toggle, ganti angka 615px sesuai ukuran blog sobat. Kemudian ganti juga angka 640 sesuaikan dengan ukuran blog sobat.


  • Cari kode di bawah ini

<b:includable id='comment_picker' var='post'>...</b:includable> 

  • Ganti dengan kode di bawah ini

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='threaded_comments'/>
      </b:if>
    </b:if>
  </b:if>
 <div style='clear:both;'/>
</b:includable> 
Jika di template sobat belum ada kode Jquery,silahkan tambahkan dan apabila sudah maka tidak usah di tambahkan


  • Cari kode </head> dan tambahkan kode di bawah ini di atas atau sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

  • Simpan dan lihat hasilnya.

Untuk kode yang saya berikan di atas memang memiliki beberapa kekurangan yang belum bisa saya mengerti karena dari dulu saya tidak pintar-pintar belajar html,akan tetapi tidak ada salahnya jika anda mencobanya terlebih dahulu,atau anda bisa memperbaiki kode dan cara di atas untuk jadi lebih baik lagi silahkan saja,adapun kekurangannya yang saya ketahui adalah sebagai berikut:
  1. Komentar google plusnya tidak tampil jika belum ada yang komentar terlebih dahulu
  2. Kode Jquery nya terkadang terjadi konflik yang mengakibatkan beberapa widget atau element lain nya tidak berfungsi,seperti slider dan lainnya.

Mungkin itu saja dari saya tentang Cara membuat Komentar Blog dan Google Plus Berdampingan,semoga bisa bermanfaat dan apa bila ada yang salah tolong kawan-kawan sudi kiranya untuk memperbaiki,terimakasih dan salam sukses 

Jumat, 31 Mei 2013

Cara Membuat Widget Contact Me Metro Style


Widget Share Metro StyleCara Membuat Widget Contact Me Metro Style - Assalamualiakum sobat semuanya,sebelum nya saya minta maaf belum bisa berkunjung balik ke blog sobat,meskipun begitu saya harap hubungan kita sesama blogger tetap terjaga.Oke..hari ini saya akan memberikan tutorial lagi,setelah beberapa waktu postingan saya tentang kontes,seperti Hostingpangeran dan korek api gas,untuk saat ini saya akan mencoba berbagi widget kontak terbaru yaitu Cara Membuat Widget Contact Me Metro Style,widget ini menurut saya hanya untuk jalan pintas menuju jejaring sosial lainnya yang tentunya milik sobat,seperti facebook,twitter,youtube dan lain-lain,sehingga memudahkan pengunjung sobat untuk menuju akun tersebut dengan cepat hanya dengan meng klik salah satu logo dari jejaring tersebut,dengan seketika itu langsung di bawa ke akun yang di tuju.Untuk cara pembuatannya sobat tidak usah bingung,karena sobat cukup menambahkan widget baru dalam bentuk html,untuk lebih jelas adalah sebagai berikut :

  • Pertama login ke akun sobat
  • Selanjutnya klik tata letak>> tambah gadget baru >> html/java script
  • Copy dan paste kan kode di bawah ini
  • Kemudian simpan dan selesai

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/USER NAME"></a></li>
<li><a class="tw" href="http://twitter.com/USER NAME"></a></li>
<li><a class="gp" href="https://plus.google.com/ID G+ ANDA"></a></li>
<li><a class="pi" href="http://pinterest.com/USER NAME"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/USER NAME"></a></li>
<li><a class="yt" href="http://www.youtube.com/USER NAME"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/NAMA BLOG"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs
saya ambil kodenya disini:http://www.techprevue.com/2013/02/social-profile-widget-metro-style.html 
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>
Note ;
Jangan lupa untuk merubah tulisan USER NAME yang di beri higlight warna pada URL diatas,seperti: Facebook page/user name, Twitter username, Google+ user-id, Pinterest username, Linkedin profile url, Youtube username atau, RSS/Feedburner feed url.Oke,,mungkin itu saja dari saya tentang Cara Membuat Widget Contact Me Metro Style,semoga postingan ini bisa membantu dan bermanfaat buat sobat,terimakasih dan happy blogging.

Selasa, 14 Mei 2013

Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog


Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog

Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog - Assalamualaikum kawan semuanya,sudah lama saya tidak menyapa sahabat-sahabat blogger di karena saya memang sedang sibuk di dunia nyata di tambah lagi saya juga sibuk mencari pengalaman baru di dunia perbloggeran,yaitu sedang mengikuti kontes SEO yang tentunya membutuhkan banyak waktu untuk melakukan optimasi,sehingga kewajiban saya yang lain sedikit terabaikan,yaitu menyajikan update artikel berkala untuk para pembaca dan teman blogger semua tentunya.Di sela-sela saya mengikuti kontes SEO Ultrabook terbaru yang semakin hari semakin tertindih sama master SEO yang sudah pengalaman,di tambah lagi Korek api gas fighter indonesia yang tidak juga beranjak naik,saya akan mencoba membuat sebuah artikel baru,yaitu Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog.


Widget SMS Gratis Pada Blog
Contoh Tampilan Widget Sms Gratis

Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog

Sebelum melangkah lebih lanjut lagi,jika ada sobat yang butuh template gratis buat blog sobat,coba download template gratis di miftah.us,siapa tahu ada yang menarik di sana,oh ya kawan saya masih ada satu kontes lagi yang saya ikuti,yaitu Margahayuland 42 tahun membangun,semoga semua kontes yang saya ikuti bisa meraih hasil maksimal..aamiin.Kembali ke pembahasan saya tentang Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog ternyata cukup sederhana kawan,caranya adalah sebagai berikut :

  1. Sobat hanya perlu copy script di bawah ini.
  2. Kemudian Buka tata letak >> tambah gadget baru >> html/java script.
  3. Paste kan kode tersebut kedalam gadet yang sudah sobat tambahkan tadi
  4. Selanjutnya Save dan selesai.


<iframe src="http://www.freesmsvoip.com/index.php?do=widget" width="220" height="305" frameborder="0" scrolling="auto"></iframe>
<noframes></noframes>
<div><a href="http://harysukasuka.blogspot.com/2013/05/cara-membuat-dan-memasang-widget-sms.html">Kirim SMS Gratis</a></div>

Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog

Untuk script sendiri saya dapatkan dari freesmsvoip.com. waktu itu saya sedang jelajah dunia maya dengan tidak sengaja saya menemukan situs tersebut dan ternyata situsnya menyediakan script untuk membuat widget sms sendiri di blog kita,dengan demikian jika kita sedang kepepet butuh sms,kita bisa gunakan widget sms yang sudah terpasang di blog kita.Mungkin itu saja tutorial saya tentang Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog,dan sampai disini dulu pertemuan saya,semoga kedepannya saya masih bisa memberikan artikel-artikel menarik lainnya.Terimakasih,semoga bermanfaat dan happy blogging.

Kamis, 02 Mei 2013

Kumpulan Script Radio Online Untuk Blog


Radio Online Untuk BlogKumpulan Script Radio Online Untuk Blog adalah beberapa script atau kode-kode khusus yang bisa sobat gunakan untuk membuat radio online atau radio internet,disini saya sudah ada berbagai macam kode atau script dari berbagai saluran radio online,jika sebelumnya saya sudah menuliskan sebuah artikel yaitu Cara Memasang Musik Pada Blog,kali ini saya akan memberikan dscript dan cara memasang radio online di blog sobat,seperti halnya pemasangan kode HTML,apabila sobat ingin memasangnya pada postingan maka ambilah menu HTML pada postingan / entri baru,dan jika sobat ingin memasangnya pada sidebar blog maka ambilah gadget baru dengan pilihan java script/html,caranya sobat tinngal copas saja salah satu kode di bawah kemudian paste kan di tempat yang sobat inginkan,tentunya sobat semua juga sudah paham,berikut di bawah ini kode untuk membuat radio online pada blog :

Breaking News : Ultrabook Terbaru

Radio Muslim

<iframe src="http://radiomuslim.com/nativeradio/example.html" marginwidth="3" marginheight="0" scrolling="no" frameborder="0" height="110" width="155"></iframe>
<span style="color: rgb(51, 255, 51);" ><p><a href="http://harysukasuka.blogspot.com/">get online radio</a></p></span>

Radio Indowebster

<embed flashvars="type=mp3&file=http://radioidws.indowebster.com:8000/;stream.nsv&backcolor="ffffff" allowfullscreen=" false="" quality="high" name="streambaby" id="streambaby" style="" src="http://www.indowebster.com/templates/swf/player.swf" type="application/x-shockwave-flash" height="20? width="></embed>
<div style="text-align: right;"><a href="http://harysukasuka.blogspot.com">Make your own</a>

Radio 1

<center>
<embed allowfullscreen="false" flashvars="type=mp3&autostart=true&file=http://ur.nyit-nyit.net:8110/;stream.nsv" height="20" id="streambaby" name="streambaby" quality="high" src="http://www.nyit-nyit.net/player.swf" type="application/x-shockwave-flash" width="210" wmode="transparent"></embed></center>
<br />
<br />
<center>
<br />
<small>Powered By: <a href="http://harysukasuka.blogspot.com/">Harysukasuka</a></small></center>

Radio 2


<div align="center"><b>SKIP 94.3 FM<br>
<!-- plugin start -->
<div align="center"><embed allowscriptaccess="never"
name="RAOCXplayer" src="http://119.110.87.62:7900/"
type="application/x-mplayer2"
showstatusbar="1" displaysize="0" autostart="true"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
height="70"
width="300"></div> <br>

Oke sobat semua,itulah beberapa Kumpulan Script Radio Online Untuk Blog sobat jika ingin di pasang radio online,untuk masalah berat tidaknya loading blog jika di pasang radio online,silahkan sobat coba dulu kemudian rasakan sendiri,terimakasih dan semoga bermanfaat.

Sabtu, 13 April 2013

Cara Mencari Kode HTML Pada Edit Template Blogspot Tampilan Baru


Cara Mencari Kode HTML Pada Edit Template Blogspot Tampilan Baru-Assalamualaikum kawan semuanya,mudah-mudahan dalam keadaan sehat wal afiatt aamiin.Bagaimana sobat semuanya tentang tampilan baru editor template sekarang ini,apakah masih bingung cara menggunakannya?,tenang saja kawan,setelah sebelumnya saya sudah menuliskan tentang Cara Edit Template Pada Tampilan Baru Blogspot,untuk saat ini saya akan berbagi kepada sobat semua yang masih berhubungan dengan interface baru pada editt template blogger,yaitu Cara Mencari Kode HTML Pada Edit Template Blogspot Tampilan Baru.

Sebelumnya kita merasa bingung dengan tampilan baru ini,karena kita sedikit susah untuk mencari kode-kode html yang akan kita editt,karena jika kita hanya menggunakan menu ''Lompat Ke Widget'' saja masih merasa kurang pass dalam menemukan kode yang kita butuhkan,sedangkan CTRL+F nya tidak berfungsi jika kode yang kita cari tidak dalam jangkauan,tapi untuk sekarang kita sudah menemukan caranya,dan ternyata pihak bloger tidak sedang menyulitkan kita,palah sebaliknya perubahan-perubahan yang di berikan adalah untuk kemajuan dunia per bloggeran itu sendiri,diantaranya adalah tampilan baru pada edit html ini,.

Okee,Daripada ngelantur panjang lebar tidak karuan,mendingan langsung saja ke tutorial Cara Mencari Kode HTML Pada Edit Template Blogspot Tampilan Baru,untuk cara nya silahkan sobat lihat di bawah ini:

  • Pertama Login Ke akun blog sobat
  • Kedua klik Template pada dasbord blog sobat.
  • Selanjutnya klik tulisan Edit HTML (backup dulu sebelum di edit).
  • Kemudian sobat klik salah satu huruf yang ada pada kolom (terserah yang mana saja boleh) terus tekan CTRL+ F .maka akan muncul kotak search pada pojok kanan atas (lihat gambar yang di dalam kotak merah).
  • Selanjutnya masukan kode yang akan sobat cari kedalam kotak search tersebut,lalu klik Enter.
  • Kemudian lihat hasilnya,maka kode yang kita cari akan di tampilkan (apabila ada lebih dari satu kode yang kita cari,maka semua kode tersebut sudah ter blok secara otomatis dengan warna kuning transparan) warna mungkin berbeda-beda.
  • Selanjutnya silahkan edit template dengan sesuka hati sobat.
  • Selesai.

Cara Mencari Kode HTML Pada Edit Template Blogspot Tampilan Baru
Klik Gambar Untuk Mmeperjelas Tampilan
Mudah-mudahan dengan adanya tutorial Cara Mencari Kode HTML Pada Edit Template Blogspot Tampilan Baru ini bisa membantu sobat semua yang sedang kebingungan bagaimana cara mencari kode-kode html tersebut,karena saat ini caranya sudah di temukan dan mungkin itu saja dari saya,semoga bisa membantu dan bermanfaat,terimakasih dan salam blogger.

Kamis, 11 April 2013

Cara Edit Template Pada Tampilan Baru Blogspot


Cara Edit Template Pada Tampilan Baru Blogspot-Assalamualaikum sobat semuanya,tahu tidak kalau sekarang interface atau ampilan blogger kita pada menu edit template telah berubah?entah itu udah fix atau belum yang jelas interfacenya sudah berubah,jika belum tahu silahkan sobat cek sendiri dan lihat perbedaanya,seperti yang sobat lihat sendiri pada gambar di bawah ini adalah tampilan barunya,dimana kode dan scriptnya terlihat lebih ringkas tetapi banyak pilihan untuk mengeditnya.Dengan tidak di tampilkannya bagian Expand Widget Templates dan kode CSS nya di Tampilan Baru Edit HTML Blogger yang sekarang. Jadi kalau mau edit CSS harus download dulu templates tersebut, baru bisa ditemukan kode CSS yang sudah tertanam,Pengecualian kalau kode CSS tersebut baru mau ditambahkan ke template, masih bisa melalui bagian Customize


Seperti yang sudah saya berikan nomor-nomor pada tiap-tiap menu yang ada pada tampilan baru edit template tersebut,Pertama saya akan memberitahukan kegunaan dari setiap menu edit template interface yang baru sesuai dengan nomor yang sudah saya tuliskan pada gambar di atas :
  1. Kembali : Fungsinya adalah untuk kembali ke dasbord jika kita batal atau selesai meng editt template.
  2. Simpan Template : Berfungsi untuk menyimpan hasil edit template tersebut.
  3. Lompat Ke Widget : Berguna untuk jalan pintas di saat kita akan mengedit template tersebut,di dalam menu tersebut terdapat sub menu yang bisa kita pilih sesuai dengan keinginan kita saat akan meng editt template tersebut,sehingga kita akan langsung di arahkan ke tujuan.
  4. Edit Template : Berfungsi jika kita sedang melakukan kegiatan di luar mengedit,tapi jika sedang melakukan edit template maka menu tersebut tidak berfungsi.
  5. Pratinjau Template : Fungsinya untuk melihat hasil prajadi blog kita,apakah sesuai dengan keinginan atau tidak,dalam pratinjau ini berbeda pada pratinjau sebelumnya,dimana pratinjau sekarang akan di perlihatkan langsung pada halaman tersebut,tidak terbuka pada tab baru seperti sebelumnya.
  6. Kembalikan Perubahan : Berfungsi untuk memudahkan kita membatalkan edittan yang sudah kita lakukan.
  7. Kembalikan Template Widget Ke Default : Mengembalikan template kepada default template tersebut.
  8. Format Template : Berfungsi untuk memformat template
  9. CTRL+F : Key ini tidak berfungsi 100% sebagai mana mestinya yaitu untuk memudahkan pencarian,ctrl+f ini tidak akan berfungsi jika kode yang kita cari tidak benar-benar berada pada jangkauan

Setelah sobat semua tahu menu dan kegunaanya,sekarang lanjut ke cara mengedit template pada tampilan baru blogspot ini ;
  • Pertama Login Terlebih dahulu
  • Berikutnya Edit Template
  • Kemudian Pilih Menu Lompat Ke Widget dan pilih bagian mana yang akan di editt
  • Untuk Menampilkan kode CSS nya sebagai contoh saya akan cari kode <b:skin> ,setelah ketemu kemudian klik tanda panah kecil berwarna hitam seperti yg sudah saya lingkari,maka kode CSS pun akan muncul,

 Dan hasilnya akan seperti ini

Kode CSS Tidak Hilang,Hanya Tersembunyi
  • Untuk Menampilkan keseluruhan kode script pada tampilan baru edit template ini sobat tinggal mengklik tombol navigasi Format Template. Tunggu beberapa saat, baru setelah itu kode script secara keseluruhan akan di expand atau di tampilkan.

Nah ,,mungkin itu dulu penjelasan saya tentang Cara Edit Template Pada Tampilan Baru Blogspot,karena saya juga masih dalam tahap penjajagan,maka apabila ada kesalahan dalam penjelasan di atas jangan sungkan untuk membenarkannya,bisa lewat komentar yang pastinya untuk manfaat kita bersama,terimakasih dan semoga bermanfaat.

Senin, 25 Maret 2013

Cara Mengatur Format Waktu Dan Tanggal Pada Blog



Pada suatu ketika saya sedang berkunjung kepada sebuah blog sahabat,ternyata masih ada saja yang belum mengatur waktu dan tanggal yang terdapat pada blog yang di kelolanya,dan ternyata tidak hanya satu atau dua blog saja belum mengatur settingan waktu nya pada bagian tanggal publikasi postingan,dan yang paling sering saya lihat adalah tanggal dan waktu yang terdapat pada bagian kolom komentar,awalnya saya tidak sengaja melihat tanggal publikasi komentar,yang pada hari itu juga komentarpun muncul (komentar tanpa moderator) dan sampai akhirnya saya melihat tanggal dan waktu yang berbeda dengan hari dimana komentar tersebut di publikasikan,misalnya saya komentar pada jam 19.00 tanggal 24 maret 2013,ternyata yang muncul jam 21.30 23 maret 2013,terpaut hampir satu hari sendiri perbedannya.

Untuk mengatasi masalah itu sebenarnya sangatlah sederhana,dan saya yakin hampir setiap blogger sudah bisa melakukannya,hanya saja admin blog tersebut lupa untuk mengatur waktu dan tanggal pada blog mereka,terutama pada bagian komentar,.Dan jika memang masih ada sahabat yang belum bisa men setting nya,silahkan ikuti cara-caranya yang sudah saya tuliskan di bawah ini:


Cara Mengatur Format Waktu Dan Tanggal Pada Blog
  • Pertama masuk ke akun blog sobat,selanjutnya pilih setelan >> bahasa dan performatan (lihat kotak merah pada gambar)
  • Langkah selanjutnya silahkan lihat gambar yang sudah saya beri tanda dengan nomor 1-4 yang masing-masing bisa sobat setting sendiri sesuai dengan keadaan:
  1. Zona Waktu = Atur zona waktu tersebut sesuai dengan zona kawasan negara kita,pilih saja yang jakarta dengan waktu yang di sesuaikan sendiri dengan keadaan.
  2. Format Header Tanggal = Atur bagian ini untuk menyesuaikan waktu dan tanggal pada saat postingan di terbitkan.
  3. Format Timestamp = Sesuaikan dengan jam yang sedang berlangsung saat itu juga
  4. Format Stempel Waktu Komentar = Atur waktu dan tanggal untuk komentar yang muncul ketika di publikasikan sehingga waktu tersebut cocok dengan keadaan yang sedang berlangsung

Naahh...di bagian nomor 4 ini yang sering terlewatkan oleh para blogger sehingga waktu dan tanggal komentar tidak sesuai dengan waktu di saat komentar di publikasikan.Mungkin itu saja yang bisa saya share tentang bagaimana cara mengatur format waktu dan tanggal pada blog,semoga dengan adanya artikel saya ini bisa di mengerti dan bisa bermanfaat,terimakasih atas kunjungan sobat semua di blog ini.

Happy Blogging dan Salam Blogger

Sabtu, 23 Maret 2013

Cara Membuat Dan Memasang Follow Blog Pada Postingan



Setelah sebelumnya saya posting Cara Memasang Blog Lain Kedalam Postingan,saat ini saya juga sudah menuliskan satu buah artikel yang masih berhubungan dengan pasang memasang di postingan,yaitu Cara Membuat Dan Memasang Follow Blog Pada Postingan. Apakah sobat paham dengan maksud saya tersebut?jika belum baiklah akan saya terangkan sedikit maksud saya itu.

Cara Membuat Dan Memasang Follow Blog Pada Postingan Adalah dimana pada umumnya follow blog itu terletak pada sidebar,kali ini follow blog tersebut bisa di letakan pada postingan atau laman statis blog kita,jika belum paham juga silahkan sobat lihat gambar di bawah,dan jika sobat berminat memasang follow blog ( join this site ) pada postingan,silahkan ikuti cara-caranya yang sudah saya tuliskan di bawah ini :
  • Pertama seperti biasa,Log in dulu ke blogger Sobat
  • Setelah Masuk ke blog Sobat  lalu klik kanan pada Join this site, lalu pilih view page source (lihat gambar)
Cara Membuat Dan Memasang Follow Blog Pada Postingan
  • Selanjutnya Cari kode ini <div id="div (biar cepat cari dengan Ctrl + F )
  • Lalu copy seperti pada gambar di bawah ini (ingat copy seperti gambar sampai kode </div> )
Cara Membuat Dan Memasang Follow Blog Pada Postingan

  • Sekarang kembali ke blogger Sobat, pilih Laman atau postingan baru.
  • Buatlah judul laman atau postingan sesuai keinginan Sobat,dan isi halaman atau postingan tersebut dengan mode compose
  • Kemudian pindah ke mode html, untuk meletakan kode yang sudah di copy
  • Terakhir tambahkan kode dibawah ini tepat diatas kode <div id="div

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">
    </script>
  • Simpan Dan Lihat hasilnya
Bagaimana sobat?tertarik untuk pasang following blog pada postingan?silahkan di coba dan semoga berhasil,terimakasih.

SEMOGA BERMANFAAT..


Senin, 18 Maret 2013

Cara Memasang / Meletakan Blog Lain Kedalam Postingan


Cara Memasang / Meletakan Blog Lain Kedalam PostinganMeletakan blog lain kedalam postingan blog kita untuk sebagian blogger memang jarang di lakukan,karena memang belum banyak yang tahu atau memang sengaja tidak memasangnya,karena melihat fungsinya yang memang tidak terlalu penting dan terkesan hanya biasa-biasa saja.Tapi jika sobat memang benar-benar ingin memasang dan membutuhkan cara meletakan blog lain kedalam postingan,silahkan sobat ikuti caranya yang sudah say tuliskan di bawah,:

 

 Untuk langkah-langkah membuat postingan seperti ini sangat lah sederhana karena sama saja dengan membuat postingan biasa pada umumnya,baik melalui format compose maupun format HTML.

  • Pertama sobat copy dulu kode dibawah ini :

<iframe allowtransparency="true" frameborder="0" height="400" hspace="0" marginheight="0" marginwidth="0" name="Cara Menampilkan Blog Lain ke dalam Postingan Blog Kita" readonly="true" scrolling="yes" src="http://harysukasuka.blogspot.com" vspace="0" width="600"></iframe>


  • Selanjutnya pasang kode tersebut kedalam postingan sobat pada format HTML bukan Compose.
  • Ganti angka 400 dan 600 sesuai tinggi dan lebarnya menyesuaikan halaman postingan sobat.
  • Kemudian ganti alamat blog saya yang berwana merah dengan alamat blog yang ingin sobat pasang pada postingan sobat.
  • Selesai,dan postingan berisi blog lainpun sudah bisa di publikasikan.

Bagaimana sobat,,??.Cukup mudah bukan?.Oke mungkin itu saja ulasan saya tentang bagaimana cara memasang atau meletakan blog lain kedalam postingan blog kita.Semoga postingan saya ini bisa bermanfaat.Terimakasih dan Happy Blogging...

Cara Membuat Dan Memasang Emoticon Smiley Pada Postingan



Emoticon terkadang memang di butuhkan untuk mewakili suatu emosi kita kepada orang lain lewat gambar atau animasi yang bisa kita pasang,baik itu pada postingan,chating,bahkan pada sebuah komentar sekalipun.Dengan adanya emoticon ini kita bisa memberikan emosi kita kepada orang lain lewat tulisan,apakah kita sedang sedih,senang,tertawa,menangis atau yang lainnya,karena dengan gambar emiticon tersebut emosi kita tersalurkan.

Dan untuk kali ini saya akan mencoba untuk memposting emoticon yang bisa di letakan pada postingan blog,Kalau pada beberapa blog sahabat di kotak komentar terdapat emoticon tersebut,untuk yang saya posting ini,emoticon nya adalah untuk postingan,dimana postingan sobat bisa di letakan gambar-gambar emoticon yang bisa di pasang sesuai dengan ekspresi pada postingan tersebut.Untuk cara pemasangannya sobat ikuti langkahnya sebagai berikut :
  • Pertama login ke akun blog sobat trus pilih Layout > Edit HTML.(backup dulu sebelum edit)
  • Beri tanda centang pada Expand Widget Templates.
  • Cari kode ini ]]></b:skin> dengan ctrl+f
  • Copy script di bawah.
  • Letakan script tepat dibawah kode ]]></b:skin>


<script src='https://harysukasuka.googlecode.com/files/ysmileys.js' type='text/javascript'/>

  • Klik Save template dan selesai.

Ini Adalah Kode Yang Bisa Sobat Gunakan



Hanya itu saja dari saya tentang cara membuat dan memasang emoticon pada postinga,semoga artikel ini bisa membantu.Terimakasih.

SEMOGA BERMANFAAT..

Minggu, 17 Maret 2013

Cara Membuat Bermacam Style / Warna Dan Bentuk Tulisan Pada CBOX



Berawal dari rasa penasaran saya kepada sodari Vpie Mahadhifa yang bisa menulis tebal dan berwarna di buku tamu saya yang dari CBOX membuat saya memutuskan untuk melakukan pencarian dengan cara googling,dan sampai akhirnya saya tersangkut di blog kucoba.com dan setelah saya lihat hasil penelusuran ternyata sudah banyak juga yang posting tentang kode cara membuat style / warna dan bentuk tulisan pada CBOX,ada yang baru memposting dan ada juga yang memang postingannya sudah lama.

Cara Membuat Bermacam Style/Warna Dan Bentuk  Tulisan Pada CBOX
Sesuai prisip saya bahwa ngeblog itu berbagi,maka ilmu yang sudah saya dapatkan ini pun akan saya bagikan lagi kepada sobat blogger yang lainnya,dan yang pastinya buat sobat yang memang membutuhkan artikel seperti ini (gak butuh juga gak papa..hee).Jika sobat masih penasaran dengan maksud saya ini,silahkan sobat lihat sendiri buku tamu saya yang ada di sidebar blog saya ini di sebelah kanan.

Oke langsung saja,berikut ini adalah berbagai macam style yang bisa diaplikasikan di cbox dan cara penulisannya. Ini akan membuat pesan sobat lebih menarik dan orang lebih tertarik untuk kunjungi blog sobat



Cara Membuat Teks Tebal di CBOX (Bold Style)

Apit kata-kata yang ingin dicetak tebal dengan [b] dan [/b]
Contoh: [b]teks tebal[/b] hasilnya teks tebal


Cara Membuat Teks Berukuran Besar di CBOX (Big)

Apit kata-kata yang ingin dicetak besar dengan [big] dan [/big]
Contoh: [big]tulisan besar[/big] hasilnya tulisan besar


Cara Membuat Teks Bergaris Bawah di CBOX (Underline Style)

Apit kata-kata yang ingin digaris bawah dengan [u] dan [/u]
Contoh: [u]teks bergaris bawah[/u] hasilnya teks bergaris bawah

Cara Membuat Teks Bergaris Tengah di CBOX (Strike Style) 

Apit kata-kata yang ingin di garis tengah atau dicoret dengan [s] dan [/s]
Contoh: [s]teks dicoret[/s] hasilnya teks dicoret

Cara Membuat Tulisan Berukuran Kecil di CBOX (Small)

Apit kata-kata yang ingin dicetak kecil dengan [small] dan [/small]
Contoh: [small]tulisan kecil[/small] hasilnya tulisan kecil

Cara Membuat Tulisan Rata Tengah (Center)

Apit kata-kata yang ingin dibuat rata tengah dengan [center] dan [/center]
Contoh: [center]rata tengah[/center]


Cara Membuat Teks Miring (Italic Style)

Apit kata-kata yang ingin dicetak miring dengan [i] dan [/i]
Contoh: [i]teks miring[/i] hasilnya teks miring


Cara Membuat Tulisan Berwarna (Color)

Apit kata-kata yang ingin diberi warna dengan [color=warna] dan [/color]
Contoh: [color=blue]assalamualaikum[/color] hasilnya assalamualaikum

Kode-kode warna:

Dengan menggunakan kode ini tulisan kita akan berbeda dari punya orang lain, sehingga mendapat perhatian penuh baik dari admin ataupun para peblogwalking lainnya berikut kodenya:
[color=red] tulis pesan anda [/color]
[color=blue] tulis pesan anda [/color]
[color=green] tulis pesan anda [/color]
[color=yellow] tulis pesan anda [/color]
[color=pink] tulis pesan anda [/color]
[color=purple] tulis pesan anda [/color]
[color=brown] tulis pesan anda [/color]
[color=bronze] tulis pesan anda [/color]
[color=orange] tulis pesan anda [/color]
[color=black] tulis pesan anda [/color]
[color=white] tulis pesan anda [/color]
[color=gold] tulis pesan anda [/color]
[color=silver] tulis pesan anda [/color]
[color=violet] tulis pesan anda [/color]
[color=hotpink] tulis pesan anda [/color]
[color=navyblue] tulis pesan anda [/color]
[color=tan] tulis pesan anda [/color]
[color=aqua] tulis pesan anda [/color]
[color=teal] tulis pesan anda [/color]
[color=lime] tulis pesan anda [/color]

Cara Membuat Teks Berjalan (Marquee)

Apit kata-kata yang ingin dibuat bergerak dengan [scroll] dan [/scroll]
Contoh: [scroll]teks berjalan[/scroll]

Cara Membuat Teks Ber Link di CBOX

Apit kata-kata yang ingin diberi link dengan [url=alamattujuan] dan [/url]
Contoh: [url=http://harysukasuka.blogspot.com]Harysukasuka[/url]
hasilnya adalah Harysukasuka

Penggunaan Beberapa Macam Kode Sekaligus

Selalu letakkan teks paling tengah. Kode yang dibuka terlebih dahulu, ditutup paling akhir. Misalkan kita akan aplikasikan teks tebal dan berwarna, maka kodenya:
[b][color=red]teks merah tebal[/color][/b] hasilnya teks merah tebal
- teks merah tebal letakkan paling tengah
- kode pembuka terlebih dahulu [b] maka penutup [/b] letakkan paling akhir. contoh => [b]saya[/b] hasilnya  saya


Nah itulah Cara Membuat Bermacam Style/Warna Dan Bentuk  Tulisan Pada CBOX.Silahkan sobat mencoba beberapa trik di atas,dan semoga apa yang sudah saya tuliskan di atas bisa  bermanfaat....

Selasa, 26 Februari 2013

Cara Membuat Permalink Pada Blog



Assalamualaikum sobat semua,Pagi ini saya sudah membagikan satu lagi tutorial dengan judul cara membuat permalink pada blog,Permalink Pada blog adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan,sebagaimana kita tahu bahwa Permalink ini sudah di lengkapi dengan foto sesuai dengan keinginan sobat,dan fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog milik kita.Untuk cara membuatnya sobat tidak usah bingung,tinggal ikuti saja langkah-langkahnya yang sudah saya tuliskan di bawah ini
Cara Membuat Permalink Pada Blog

  • Login ke akun blog sobat.
  • Klik rancangan --> Edit HTML --> Centang kotak expand template widget
  • Letakkan kode berikut di atas kode ]]></b:skin>



.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

  • Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya. 

<!-- Permalink HarySukaSuka -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Sebagai Admin HarySukaSuka</h4>
<div class='kontainer'>
<img alt='HarySukaSuka' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpNKn-20PKvV4phI5Ypo3iEAmC-p9ZIIRNUFuZ-vttcaWG_tjZ63GzeYiL4ef1N-u7ggh4i2KgsepSmvvm8oIJ6_6Mgz914Gq3pDfoiEIap8qAdppC2IOuyAagpTcqvI1uOF8IWs0DTew/s325/hari.jpg'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='55' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://harysukasuka.blogspot.com/2013/02/cara-membuat-permalink-pada-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink HarySukaSuka -->
  • Ganti tulisan warna hijau dengan deskripsi sobat,terserah mau di ganti apapun juga.
  • Ganti kode yang berwarna merah dengan Url foto / gambar milik sobat
  • Sesuaikan angka yang berwarna biru dengan ukuran template blog sobat ( ukuran textarea )
  • Klik Save,dan sobat bisa lihat hasilnya

Oke sobat.,itulah cara membuat permalink pada blog,semoga cara ini bisa membatu sobat blogger yang ingin mesang permalink postingan seperti yang sobat lihat pada blog saya ini.

SEMOGA BERMANFAAT...

Minggu, 24 Februari 2013

Cara Membuat Artikel Terkait Standar Di Bawah Postingan V.2


Cara Membuat Artikel Terkait Standar Di Bawah Postingan V.2Kenapa saya beri judul Cara Membuat Artikel Terkait Standar Di Bawah Postingan V.2?Karena V.2 sendiri maksud saya adalah Versi ke 2,setelah pada sebelumnya saya juga sudah selesai menuliskan sebuah tutorial yang masih berhubungan dengan artikel terkait juga,untuk saat ini saya kembali menuliskan tentang artikel terkait versi yang berbeda,yaitu cara membuat artikel terkait standar di bawah postingan.Meskipun sama-sama masih standar tetapi cara dan tampilannya berbeda.untuk versi standar sebelumnya bahwa artikel terkait muncul dengan tampilan scroll,sedangkan untuk yang satu ini tanpa menggunakan scroll,sobat bisa lihat contoh gambar di samping dengan artikel terkait yang sudah saya pasang di blog ini.Untuk pemasangannya masih sama pada umumnya,yaitu sobat hanya mengedit template blog saja,dan untuk lebih jelasnya silahkan ikuti cara di bawah ini:

  • Pertama Kita masuk ke Menu Themplete yang ada di blogger ( backup dulu sebelum edit )
  • Kedua Kita Pilih Edit HTML >>Lanjutkan >> jangan lupa Centang Expand Template Widgetnya..
  • cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>
<script type="text/javascript" src="https://hary-suka-suka.googlecode.com/files/artikelterkaitstandar.js"></script>

  • Kemudian Anda cari kode <data:post.body/> kemudian letakkan script berikut ini di bawah kode <data:post.body/>


<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Dengan dua pilihan artikel terkait jenis standar yang sudah saya tuliskan tersebut,di harapkan sobat semua yang membutuhkan bisa memilih sesuai dengan selera dan kebutuhan masing-masing.

  1. Artikel terkait standar di bawah postingan.
  2. Artikel terkait standar di bawah postingan V.2 ( Versi 2 ).

Cara Membuat Artikel Terkait Standar Di Bawah Postingan


Cara Membuat Artikel Terkait Standar Di Bawah PostinganArtikel terkait memungkinkan pengunjung untuk membaca tulisan atau artikel kita yang lainnya dan tentunya yang masih berhubungan dengan berita yang mereka baca sebelumnya,untuk saat ini saya akan memberikan cara membuat artikel terkait standar di bawah postingan,kenapa di sebut standar?karena masih ada cara-cara lain untuk membuat artikel terkait dengan model dan bentuk yang lebih menarik lagi.Untuk cara membuatnya silahkan ikuti saja langkah-langkah yang sudah saya tuliskan di bawah ini:
  • Pertama Kita masuk ke Menu Themplete yang ada di blogger ( backup dulu sebelum edit )
  • Kedua Kita Pilih Edit HTML >>Lanjutkan >> jangan lupa Centang Expand Template Widgetnya..
  • Ketiga Cari Kode Ini <data:post.body/> Biar lebih mudah tekan CTRL + F
  • Keempat Tambahkan Kode  Berikut Tepat di bawah Kode ini <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;ardi33&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script><div class='ycdr' style='font-family: arial, sans-serif; font-size: 9px;'><a href='http://harysukasuka.blogspot.com/2013/02/cara-membuat-artikel-terkait-standar-di.html' target='_blank' title='Cara Membuat Releated Post keren'>Cara Membuat Artikel Terkait standar</a> <a href='http://harysukasuka.blogspot.com/' target='_blank'>Tutorial dan Trik Blog</a></div></div>  </div> </b:if>
  • Tapi ingat Kode <data:post.body/> ini tidak cuma satu Jadi kalo kode pertama tidak jadi.. Silahkan Tempatkan di kode berikutnya... dan seterusnya ...
  • Biasanya berhasil jika di pasang pada kode <data:post.body/> yang kedua atau ketiga.

SEMOGA  cara membuat artikel terkait standar di bawah postingan blog ini bisa bermanfaat buat blogger yang lainnya,memang penampilannya sangat standar sekali,tapi mengingat selera orang berbeda-beda,maka meskipun standar pasti ada saja yang suka dengan artikel terkait seperti ini,termasuk artikel terkait yang sobat lihat pada blog saya ini.Mungkin itu saja dari saya,semoga bermanfaat.

Rabu, 20 Februari 2013

Cara Merubah Background Blog Dengan Gambar


Cara Merubah Background Blog Dengan Gambar
Gambar Nemu Di Google
Maih dalam pembahasan tentang merubah background pada sebuah blog,setelah sebelumnya saya sudah membuat satu postingan tentang cara merubah warna background pada blog,untuk kesempatan kali ini saya akan menuliskan sebuah postingan tutorial yang sedikit sama tapi berbeda ( nah loo) yaitu bagaimana cara merubah background blog dengan gambar yang sesuai dengan keinginan kita.

Untuk caranya masih sama seperti cara pada postingan sebelumnya,yaitu cara merubah warna background pada blog,hanya saja yang jadi pembeda adalah adanya tambahan URL gambar yang akan di jadikan background pada blog kita,dan saya sarankan sobat harus sudah mempunya gambar yang akan di jadikan background yang kemudian di upload ke hosting kepercayaan sobat atau bisa di apload juga ke blog langsung untuk selanjutnya sobat ambil URL nya.Saya anggap untuk mengambil URL gambar sobat sudah mengerti,jika belum silahkan baca dulu Cara Mengambil Url Gambar DI photobucket.

Untuk selanjutnya mari kita simak baik-baik bagaimana cara merubah background blog kita dengan gambar yang sesuai dengan yang kita inginkan:
  • Pertama login ke blog,
  • Kemudian pilih menu template>>edit template>>centang expand widget template (jangan lupa backup dulu template nya)
  • Selanjutnya sobat cari kode body { 
  • Untuk memudahkan mencari,gunakan ctrl+f
  • Nah di sana terdapat kode background seperti di bawah ini
body{
background:#ded8c0;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}

  • Setiap blog mungkin berbeda Backgroundnya, nah untuk mengganti backborund misal dengan background menggunakan URL gambar ini

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5x6RYq4ecCgM6Tt6hHoUARCOvVYqJrXXUzGMteTwVervMXaY-ITbMgGN6B297qNlBaEGvEvdC-QdMGRcV3wKAgk3MdCKcy03U2tUSzQ5mizCfAWz-1clNXlmMaDhMcRlwUE59ZYXWfyg/s1600/blog.jpeg

    • Maka sobat hanya cukup menambahkan url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5x6RYq4ecCgM6Tt6hHoUARCOvVYqJrXXUzGMteTwVervMXaY-ITbMgGN6B297qNlBaEGvEvdC-QdMGRcV3wKAgk3MdCKcy03U2tUSzQ5mizCfAWz-1clNXlmMaDhMcRlwUE59ZYXWfyg/s1600/blog.jpeg pada kode di tersebut sehingga menjadi seperti yang sobat lihat di bawah ini :

    body{
    background:#ded8c0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5x6RYq4ecCgM6Tt6hHoUARCOvVYqJrXXUzGMteTwVervMXaY-ITbMgGN6B297qNlBaEGvEvdC-QdMGRcV3wKAgk3MdCKcy03U2tUSzQ5mizCfAWz-1clNXlmMaDhMcRlwUE59ZYXWfyg/s1600/blog.jpeg) repeat-x;
    color:#28261A;
    font:12px verdana,arial,Sans-erif;
    text-align:left;
    margin:0;
    line-height:1.6em;
    }


    Gambar tersebut juga dapat diatur agar ketika di scroll ke bawah, gambar menjadi tetap dan tidak berubah.  Caranya tinggal kamu rubah  kata repeat-x; menjadi repeat-x top left fixed;Atau kamu juga bisa merubah sebuah gambar kecil menjadi gambar besar. Caranya sama tinggal mengganti repeat-x; menjadi repeat scroll 0 0;

    Untuk demonya silahkan sobat lihat saja sendiri background saya yang tadinya berwarna putih,sekarang telah saya rubah dengan gambar seperti saat ini yang sobat sedang lihat (gak tau gambar apaan hee..)Oke mungkin ini saja yang bisa saya jelaskan tentang bagaimana cara merubah background pada blog dengan gambar.Terimakasih

    SEMOGA BERMANFAAT... 

    Cara Merubah Warna Background Pada Blog


    Cara Merubah Warna Background Pada Blog
    Gambar Nemu Di Google
    Assalmualaikum sobat semuanya,untuk postingan saya saat ini adalah membahas bagaimana cara merubah warna background pada blog kita,terkadang kita ingin merubah warna background pada blog yang kita miliki dengan warna yang sesuai dengan keinginan kita,tujuannya tidak lain hanyalah untuk mencocokan background dengan template yang sudah ada,atau untuk mempercantik blog.

    Tapi tenang saja sobat,di bawah ini sudah saya tulis kan cara merubah warna background kita,sebenarnya background pada sebuah blog selain background yang bisa di ganti dengan berbagai macam jenis warna,background pada blog pun bisa di ganti dengan gambar sendiri atau gambar yang cocok dengan template blog kita.Tapi untuk saat ini saya akan membahas cara merubah warna background pada blog.

    Apabila sobat ingin mengganti background nya tidak menggunakan warna,tapi menggunakan gambar atau foto,silahkan sobat baca Cara Merubah Background Blog Dengan Gambar.Adapun untuk cara merubah warna background kita dengan warna yang lain adalah sebagai berikut:

    Background blog yang menggunakan warna lalu ingin diganti dengan warna lain.
    Caranya:
    • Masuk ke dashbor blog sobat >> Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
    • Cari kode  body {  (gunakan F3 untuk mempermudah)
    • Kemudian cari kode berikut
    body {
    background: #FFFFFF;
    Keterangan: kode di atas adalah blog yang menggunakan background warna putih. Nah, jika sobat ingin mengganti, sobat tinggal mengganti kode #FFFFFF (putih) dengan kode warna lain.,seperti merah kuning atau hijau,silahkan cari kode-kode warna yang sobat butuhkan   DISINI
    • Simpan template sobat.
    • Dan selesai.

    Bagaimana sobat,cukup simple bukan,nah bagi sobat yang ingin merubah background nya dengan warna lain,silahkan ikuti cara-cara di atas,semoga berhasil dan......

    SEMOGA BERMANFAAT...

    Kamis, 14 Februari 2013

    Cara Kirim Postingan Blog Lewat Ponsel | Blogger Mobile


    Untuk sobat semua yang mempunyai kegiatan blogging dan menggunakan perangkat ponsel yang sudah mendukung keperluan internet,maka sobat tidak usah khawatir lagi,atau tidak usah bingung lagi untuk mengeposkan postingan sobat melalui ponsel,atau yang biasa di sebut dengan blogger mobile,karena pihak blogger sudah memudahkan kita untuk melakukannya melalui perangkat seluler.
    Untuk cara pengeposan postingan seluler tersebut,sobat bisa pahami dahulu cara-caranya di bawah ini sebelum mempraktekannya,sehingga tidak terjadi kesalahan dalam pengeposan postingan ke blog milik kita.Adapun caranya adalah sebagai berikut:

    Kirim dari mana pun!

    Ketika sobat mengirimkan teks ke BLOGGR (256447) atau foto ke go@blogger.com dari perangkat ponsel sobat, maka teks atau foto tersebut akan diposkan ke blog baru milik sobat.

    Cara kerja MMS 
    • Pertama, kirim MMS atau email dengan kata 'REGISTER' ke go@blogger.com.
    • Kemudian blogger akan menjawab dengan alamat blog seluler baru Anda, ditambah dengan kode klaim.
    • Poskan ke blog seluler baru sobat, atau gunakan kode klaim untuk menautkan ponsel sobat ke blog berbeda.
    • Untuk mencopot akses perangkat sobat ke Blogger, kirimkan MMS atau email dengan kata 'UNREGISTER' ke go@blogger.com. 
    • Tarif data & pesan standar berlaku. 

    Atau gunakan SMS
    • Pertama kirim SMS yang berisi pesan 'REGISTER' ke BLOGGR (256447).
    • Selanjutnya blogger akan menjawab dengan alamat blog seluler baru sobat, ditambah dengan kode klaim.
    • Poskan ke blog seluler baru milik sobat, atau gunakan kode klaim untuk menautkan ponsel sobat ke blog berbeda.
    • Untuk menyisih dari menerima pesan SMS di ponsel sobat, kirim SMS STOP ke BLOGGR (256447) Untuk mendapatkan bantuan dari ponsel, kirim SMS HELP ke BLOGGR (256447)
    • Untuk memutuskan tautan perangkat dari Blogger, kirim SMS UNREGISTER ke BLOGGR (256447). SMS ke BLOGGR (256447) saat ini hanya tersedia untuk nomor telepon AS. Tarif data & pesan standar berlaku.

    Perangkat dan lainnya 
    • Blogger Seluler berfungsi pada segala jenis perangkat yang dapat mengirim pesan melalui SMS atau email melalui MMS.
    • Google tidak mengenakan biaya untuk layanan ini.
    • Tarif data & pesan standar berlaku.
    • Blogger Mobile juga terpasang di beberapa ponsel kamera Sony Ericsson, sehingga sobat dapat mengirim ke blog hanya dengan beberapa klik. Untuk penjelasan selengkapnya tentang blog via perangkat seluler, lihat: Bagaimana cara kerja Blogger Mobile? 
    • Pengguna iPhone: Ponsel tanpa fitur MMS tetap dapat mengirim posting ke Blogger melalui email dengan Mail2Blogger.

    Bagaimana sobat,apakah cara yang sudah saya tuliskan di atas bisa membantu sobat blogger semuanya?.jika masih bleum bisa membantu,silahkan sobat kunjungi sendiri situs yang saya jadikan sumber dari postingan ini.

    Terimakasih
    SEMOGA BERMANFAAT..


    SUMBER : http://www.blogger.com/mobile-start.g?hl=id

    Cara Membuat Efek Klik Kanan Pada Postingan

    Setelah sebelumnya saya sudah membuat artikel tentang cara membuat postingan blog anti copas,sekarang saya akan melanjutkan kembali ke tutorial yang masih berhubungan dengan copas-mengcopas.
    Cara Membuat Efek Klik Kanan Pada Postingan
    Klik Saja Pada Gambar Untuk Memperjelas
    Sekarang apa yang sobat pikirkan dengan melihat gambar screenshot di atas?.gambar tersebut adalah contoh dari hasil efek klik kanan pada postingan blog kita ketika ada orang yang akan copas sebuah artikel atau postingan,cara ini lah yang akan saya share sekarang yaitu cara membuat efek klik kanan pada postingan.

    Script ini cocok untuk sobat yang artikelnya tidak ingin di copy mentah-mentah oleh orang lain,karena sebelum orang itu copas artikel kita,mereka akan di peringatkan terlebih dahulu untuk menyertakan sumbernya.Mau tahu caranya seperti apa?sobat bisa ikuti langkah-langkahnya yang saya tuliskan di bawah ini.karena cara membuat nya cukup mudah,saya rasa sobat bisa mengerjakannya dengan hasil yang benar.

    Untuk membuatnya masih seperti biasa,sobat hanya perlu edit HTML sobat yang ada pada template blog milik sobat pastinya,untuk lebih jelasnya silahkan baca cara membuat efek klik kanan pada postingan di bawah ini
    • Pertama login ke akun blog milik sobat,
    • Kedua masuk ke rancangan,pilih template>>edit html>>centang expand widget template,
    • Selanjutnya cari kode ]]></b:skin> (gunakan ctrl+f)
    • Copy kode di bawah ini kemudian paste kode tersebut tepat dibawah  kode ]]></b:skin>
    <script language='javascript' src='http://hary-suka-suka.googlecode.com/files/klik%20kanan.js'/>
    •  Lihat pratinjaunya dulu,jika blog tidak rusak kemudian klik simpan/save

    Efek ini akan bekerja jika ada seseorang yang akan copas artikel sobat dengan klik kanan pada mouse mereka,maka orang tersebut akan di beri waktu hingga 5 detik untuk melanjutkan aktifitasnya.

    Oke..mungkin cukup sekian dari saya tentang tutorial cara membuat efek klik kanan pada postingan,semoga bisa di pahami oleh sobat semua,terimakasih

    SEMOGA BERMANFAAT...

    Rabu, 13 Februari 2013

    Cara Membuat Saving Mode Dengan Gambar


    Masih dalam pembahasan tentang saving mode atau screen saver pada blog,kali ini saya akan berbagi lagi tentang bagaimana cara membuat atau memasang saving mode kita dengan gambar,setelah sebelumnya saya telah membuat saving mode yang tidak menggunakan gambar atau hanya tulisan saja,sekarang saving mode atau screen saver blog sobat bisa tampil dengan gambar kesukaan sobat,bahkan gambar tersebut bisa di rubah dengan gambar kita sendiri,bagaimana sobat,bagus kan..? 

    Untuk cara pembuatan dan pemasangannya ada sedikit perbedaan dengan saving mode sebelumnya yang sudah saya bahas,perbedaanya yaitu sobat tidak usah edit template lagi dan sobat hanya butuh menambahkan gadget baru pada blog milik sobat.Untuk lebih jelasnya silahkan sobat baca dulu langkah-langkahnya yang ada di bawah ini ;
     

    • Pertama login ke blog sobat terlebih dahulu.
    • Copy code di bawah ini.
    • Kemudian cari tata letak>>tambah gadget baru>>html/javascript.
    • Paste kode yang sudah sobat copy sebelumnya kedalam gadget yang sudah sobat tambahkan tadi.
    • Selanjutnya simpan dan lihat hasilnya 
    <script language='javascript' src='http://hary-suka-suka.googlecode.com/files/savemode%20gambar.js' type='text/javascript'></script>
    <style type='text/css'>
    div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(http://i1358.photobucket.com/albums/q776/Harry_Bobotoh-braga_Seduluran/h_zpsfdfae9f1.jpg) no-repeat center center fixed black; }
    div#energysaving p span {display:none;visibility:hidden;}
    </style>
     keterangan:
    • Ganti URL gambar yang warna merah di atas dengan URL gambar  milik sobat sendiri.
    • Seperti halnya saving mode yang sebelumnya,efek ini akan bekerja atau berfungsi jika halaman blog di istirahatkah dalam beberapa waktu tertentu.

    Bagimana sobat,apakah sobat tertarik dan ingin memasang saving mode atau screen saver pada blog sobat?jika ia saya ada dua pilihan saving mode yang bisa sobat gunakan.
    1. Saving mode yang hanya dengan tulisan saja.
    2. Saving mode yang menggunakan gambar.

    Silahkan sobat pilih yang sobat sukai,mungkin itu saja tutorial dari saya,terimaksih dan semoga bermanfaat.