All About Anime, Template, And Tricks

Home » Posts filed under Tutorial Blog

Cara Membuat Dan Memasang Widget SMS Gratis Di Blog

Diposting oleh Unknown - 0 komentar
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,cobadownload 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.
Cara Membuat Dan Memasang Widget SMS Gratis Pada Blog
Label:

Cara Membuat Komentar Google Plus Di Blogger

Diposting oleh Unknown - 2 komentar
Beberapa saat lalu, blogger telah memperbaharui editor html pada template blog. Sekarang, Kotak Komentar Google+ juga merupakan perangkat tambahan terbaru. Bagaimana cara membuatnya ? Sebelum mengikuti setiap langkah, kita harus mengetahui terlebih dahulu fungsi dari komentar dengan memanfaatkan jejaring sosial google plus.
google+ comments

Fitur Komentar System di Google+ :
1. Semua Aktifitas dalam satu Media.
Setiap kali kita melakukan share yaitu pada saat mempublikasikan artikel posting terbaru anda maka secara otomatis anda akan berbagi ke semua orang. Setiap jejak komentar atau juga menambah plus button akan menghasilkan komentar mereka masuk ke dalam feed anda. Dengan ini, situs anda akan menjadi praktis dan muncul juga di komentar blog anda.

2. Menambah jumlah traffik dan lalu lintas
Seperti yang kita ketahui, hampir semua produk dari Google diberikan keistimewaan swasta tersendiri. Dengan memanfaatkan setiap produk yang dimilikinya maka secara otomatis situs yang kita buat menjadi lebih maksimal dan semakin meningkatkan pengunjung.

3. Interface yang Interaktif

 Komentar yang muncul dalam urutan yang sistematis berdasarkan tanggal diterbitkan sehingga pengguna dapat menjawab atau menambahkan satu komentar. Anda dapat dengan mudah chat / balas komentar seperti merasa seolah-olah Anda sedang mengobrol dengan teman-teman dekat atau sahabat sekolah.

4. Bersifat Publik

Sekarang pembaca Anda akan dapat memposting komentar umum atau pribadi kepada orang-orang dalam lingkaran Google mereka. Selain itu, ketika orang browsing komentar mereka dapat melihat semuanya, sebagian sebagai orang, atau hanya dari orang-orang di lingkaran mereka.

5. Admin Comment System
Anda sebagai pemilik blog akan memiliki hak penuh terhadap setiap komentar yang masuk karena anda adalah seorang author. Anda dapat dengan menghapus, mengedit dan menambah komentar sesuai dengan keinginan.

Cara Membuat Kotak Komentar Google Plus Berdampingan dengan Blogger :
1. Silahkan anda masuk ke Google+. Klik More. Yaitu kita akan membuat halaman yang nantinya sebagai tempat untuk mengarahkan kepada situs anda.
more pages blog

Silahkan anda klik More dan pilih Pages.
Kemudian buatlah halaman baru dan isi sesuai dengan data blog anda seperti terlihat pada gambar di bawah ini.
create page
2. Kemudian jika sudah selesai, silahkan Simpan.

3. Masih di Google+, klik Profile lalu pilih About dan cari di bagian kanan seperti gambar berikut.
edit profile
4. Pada bagian Link, Isi Other Profiles, Contributor To, dan Links dengan memasukkan url blog anda.
5. Simpan Profile apabila telah selesai edit.

6. Login ke Blogger.com
7. Klik Google+ pada daftar menu elemen blogger.
blogger google+

8. Setelah anda masuk, lalu akan muncul sebuah tampilan. Disana terdapat identitas profile Google+ Anda dengan Blogger.

Klik Use Google+ Comments in Your Blog
Jika anda telah melakukan langkah 1 dan 5 dengan benar, maka dibagian bawah foto profile akan terdapat page blog anda.


Setelah diklik makan akan tersimpan secara otomatis oleh sistem.

9. Barulah kita akan masuk ke bagian pengeditan HTML.
10. Masuk ke Template, Pilih Edit HTML, Klik Edit Templates untuk melakukan pengeditan.
      Untuk berjaga-jaga silahkan backup (download terlebih dahulu) template anda.
11. Anda dapat melakukan pencarian kode dengan mengklik dimana saja pada bagian dalam lembar kerja berbentuk kotak di edit html tersebut kemudian tekan CTRL + F.
12. Cari kode <div class='post-footer'>
13. Copy script kode berikut di bawahnya.
<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>
14. Kemudian cari lagi kode <b:includable id='threaded_comments' var='post'>
Silahkan anda lihat atau download terlebih dahulu scriptnya di Comments Hack Tutorial V2
[ untuk mendownload, kik link disamping dan tunggu 5 detik lalu klik skip ad ] Comments Script Bot Cbox Link2

15. Hapus kode yang berada di bawah kode <b:includable id='threaded_comments' var='post'> sampai kode </b:includable>
edit script html

16. Letakkan script yang didownload tadi dibawah <b:includable id='threaded_comments' var='post'>
delete script
17. Selanjutnya cari kode <b:includable id='comment_picker' var='post'> dan hapus sampai kode </b:includable> seperti pada gambar.
comment picker
18. Ganti dengan kode berikut 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>
</b:includable>

19. Selesai dan Simpan Template Anda.

Cukup panjang pada tutorial kali ini, semoga dapat dilakukan dengan mudah dan benar. Source by mbloggerlab

Label:

Cara Membuat Komentar Tersembunyi

Diposting oleh Unknown - 1 komentar
Cara Membuat Tombol Show Hide Komentar Blog - Kali ini saya kembali hadir di blog ini dan kali ini saya memposting artikel Cara Membuat Tombol Show Hide Komentar Blog. Mungkin anda pernah saat blogwalking pada blog, kemudian anda melihat tombol "Show Comment" dan kemudian "Hide Comment" di blog tersebut. Lalu anda ingin menerapkannya pada blog anda. Jika anda ingin memasang Tombol Show Hide Komentar pada blog, Berikut ini adalah Cara Membuat Tombol Show Hide Komentar Blog :

capture-20120721-215007

1. Login ke akun blogger anda, bisa disini.
2. Template -->> Edit Html -->> Lanjutkan >> Kasih centang "Expand Template Widget".
3. Tekan CTRL + F
4. Letakkan kode berikut ini tepat DIATAS kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

5. Letakkan kode berikut ini tepat DIATAS kode ]]></b:skin>
a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

6. Klik "Simpan Template" dan lihat hasilnya.
 
Sumber : http://muhammad-ghony.blogspot.com/2012/11/cara-membuat-komentar-tersembunyi.html
Label:

Membuat Popular Posts Dengan Efek Animasi Spy

Diposting oleh Unknown - 0 komentar
Popular Posts Animasi SpySebelumnya saya pernah mengetengahkan tutorial cara membuat widget recent posts dengan animasi spy, kali ini kita akan menambahkan animasi yang sama tapi pada widget yang berbeda yaitu pada widget popular posts. Widget Popular posts ini sama dengan widget recent posts yang terdahulu, menggunakan script JQuery dan resource dari master blogger indonesia Abu Farhan.
Untuk lebih jelasnya silahkan lihat demo widget popular posts dengan efek animasi spy ini dengan mengklik button berikut:
View Demo
 
Nah jika anda tertarik untuk membuat widget popular posts dengan animasi spy, silahkan ikuti tahap pembuatannya:
  • Login ke akun anda
  • Pada menu tata letak >> tambahkan gadget popular posts seperti image berikut:
Popular Posts Widget
  • Kemudian klik tambah gadget lagi >> pilih HTML/JavaScript >> Salin dan tempel kode berikut pada form yang tampil
    <style type="text/css" media="screen">
    #PopularPosts1 {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:400px;
    }
    #PopularPosts1 ul {
    width:220px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:80px;
    overflow: hidden;
    background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
    border:1px solid #ddd;
    }
    #PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
    }
    #PopularPosts1 li .item-title a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #PopularPosts1 li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    #PopularPosts1 li .item-snippet {
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 .item-snippet a,
    #PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
    }
    #PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
    }
    #PopularPosts1 {
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
    }
    .tags span,
    .tags a {
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
    }
    a img {
    border: 0;
    }
    -->
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    $(function () {
    $('.popular-posts ul').simpleSpy();
    });
    </script>
    <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
  • Sehingga posisi widget seperti image atau screen shoot berikut;
Untitled picture
  • Simpan dan lihat hasilnya pada blog anda! 
Label:

Cara Buat Emotional Pada Blogger

Diposting oleh Unknown - 3 komentar
Cara Buat Emotional Pada Blogger
 Hay Sobat Bloger..
Ada yang penasaran cara buat emotional seperti dibawah ini..???
     
Dan Masih Bnyak Lagi,..
Nah kali ini sya akan bagikan Caranya..
Mohon yyaa untuk menekan tombol G+ dan Komen Untuk Membuat saya tetap bersemangat dalam memberikan ilmu-ilmu tutorial yang lain..
oh ya sebelum kita ke TKP untuk sobat blogger tersedia Tukar Link pada blog ini




  <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width=18 height=18 border=0>



<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width=18 height=18 border=0> 
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width=18 height=18 border=0>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width=18 height=18 border=0>


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" width=42 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width=20 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width=18 height=18 border=0> 

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width=18 height=18 border=0>
 
 
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width=18 height=18 border=0> 

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" width=18 height=18 border=0> 

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" width=34 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" width=18 height=18 border=0> 

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width=22 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width=18 height=18 border=0> 

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" width=18 height=18 border=0> 

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" width=30 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width=30 height=18 border=0>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" width=24 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" width=18 height=18 border=0> 
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif" width=40 height=18 border=0>


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif" width=52 height=18 border=0>

 
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/64.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif" width=22 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif" width=22 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif" width=22 height=18 border=0>

dancing\:D/dancing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" width=26 height=18 border=0>

bring it on>:/bring it on
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif" width=23 height=18 border=0>

hee hee;))hee hee
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width=18 height=18 border=0>

chatterbox:-@chatterbox
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif" width=36 height=18 border=0>

not worthy^:)^not worthy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif" width=32 height=18 border=0>

oh go on:-joh go on
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif" width=26 height=18 border=0>

star(*)star
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif" width=18 height=18 border=0>

hiroo->hiro
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/72.gif" width=18 height=18 border=0>

billyo=>billy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/73.gif" width=18 height=18 border=0>

aprilo-+april
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/74.gif" width=18 height=18 border=0>

yin yang(%)yin yang
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif" width=18 height=18 border=0>

 
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif" width=23 height=18 border=0>
 
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" width=26 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width=18 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif" width=36 height=18 border=0>

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif" width=32 height=18 border=0> 

  
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif" width=26 height=18 border=0>

Akhirnya selesai juga postingan kali ini.. Selamat mempercantik posting blogger kalian yah sobatt..
Jangan Lupa Tombo G+, follow, dan komennya..
Label:
 
Terima Kasih Atas Kunjungan Anda. Gunakan Google Chrome Atau Mozila Fire Fox Terbaru Untuk Melihat Tampilan Sempurna Blog Ini