Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Tuesday, July 16, 2013

Cara Membuat Widget Random Post Default

Cara Membuat Widget Random Post 
Cara Membuat Widget Random Post Default. Siapa sih yang nggak kenal sama yang satu ini ???? pasti semua suah mengenal apa itu random post / postingan acak yang merupakan salah satu widget yang sangat berguna untuk blog. Selain bisa untuk mengaitkan postingan-postingan blog, random post ini juga bisa menjadkan blog kita bertpenampilan indah / keren.

Mengapat saya memberikan judul Cara Membuat Widget Random Post Default ??? Sebab, saya tidak terlalu suka dengan konten yang memberatkan blog yang membuat loading blog menjadi lelet. Maka dari itu, saya sekarang memilih memasang yang tampilan biasa dibandingkan yang mempunyai banyak CSS.

Cara menerapkannya anda tinggal masukan kode ini dalam widget blog anda
<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=20;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&amp;max-results=1000&amp; callback=randomposts" type="text/javascript"></script>

Itulah  Cara Membuat Widget Random Post Default, memang mudah menerapkannya, semoga bisa bermanfaat bagi anda semua.

Wednesday, July 3, 2013

Kumpulan Widget Blog Keren dan Bermanfaat

Kumpulan Widget Blog Keren dan Bermanfaat

Berbicara tentang Widget Blog memang banyak macamnya , dan banyak juga dari banyak tersebut widget blog yang keren serta dapat bermanfaat bagi blog kita. Saya sendiri hanya memakai widget blog yang bisa bermanfaat dan tidak membuat loading blog pelan / lama. Kumpulan Widget Blog Keren dan Bermanfaat ini saya kumpulkan menjadi satu dan akan saya share di Planet Ajaib ini.

Widget blog ini dapat anda koleksi untuk blog anda serta dapat mmpercantik tampilan blog anda , pokoknya sangat bermanfaat bagi blog anda atau saya yang Merekomendasikannya untuk dipakai di blog anda.

Berikut ini Kumpulan Widget Blog Keren dan Bermanfaat dari Planet Ajaib :

1. Widget Box
Widget ini bisa membuat widget yang menampilkan data RSS dari blog yang antum , anda juga bisa mengubah-ubah tampilan warna widget agar sesuai dengan selera antum , serta dapat untuk mempromosikan blog anda.

2. Cbox
Berfunsi sebagai widget messenger langsung di blog.

3. Envolve
Untuk mengobrol online dengan pengunjung blog

5. Feedjit
berfungsi untuk merecord secara realtime pengunjung ke blog / web Antum

Begitulah Kumpulan Widget Blog Keren dan Bermanfaat , dan saya rasa cukup sekian postingan kali ini , semoga bisa dimengerti dan bermanfaat , Wassalamualaikum

Monday, July 1, 2013

Cara Memasang Musik di Blog (Lagu Pilih Sendiri)

Cara Memasang Musik di Blog (Lagu Pilih Sendiri)
Memasang musik di blog selain untuk menambah rasa sepi di blog ternyata bisa juga untuk membuat visitor sendiri betah berlama-lama di blog anda, alasannya karena mereka ingin menyelesaikan lagu yang mereka dengar (kalau pas musik yang di dengar pengunjung sendiri memang pengunjungnya suka) hehehe. Saya sendiri pernah memasang musik di blog saya , tetapi saya kwatir akan ketenangan pengunjung blog yang suka konsentrasi dengan artikel , apalagi blog ini membahas tentang tutorial-tutorial blog yang saya dapatkan dari blog lain terus saya tulis dengan narasi versi sendiri di blog saya.

Tutorial blog menurut saya membutuhkan ketenangan agar mereka bisa fokus terhadap tutorial blog tersebut (ini cuma menurut saya ya, tapi kalau menurut anda sendiri saya tidak tahu) , tapi saya rasa pendapat orang berbeda-beda , jadi kita harus menghargainya.

Cara Memasang Musik di Blog ini saya sajikan khusus sesuai keinginan pemiliknya / Lagu Pilih Sendiri , 
berikut ini Cara Memasang Musik di Blog (Lagu Pilih Sendiri) :

1. Anda harus pergi ke alamat http://www.divine-music.info/ dan jika ingin tutorial blog yang keren, kunjungi www.mestiqui.com
2. Setelah itu anda tinggal memilih nama band yang anda suka , contoh "planet ajaib" akan memilih "Bruno Mars"

Cara Memasang Musik di Blog (Lagu Pilih Sendiri)

3. Setelah itu pilihlah salah satu judul lagu yang anda suka.
4. Kemudian , Copy dan Paste kode yang telah disediakan

Cara Memasang Musik di Blog (Lagu Pilih Sendiri)
5. Lalu letakan kode yang telah di copas di Dasbor Blogger > Tata Letak > Tambahkan Gadget
6. Simpan / Save dan lihat hasilnya

Demikianlah postingan kali ini tentang Cara Memasang Musik di Blog (Lagu Pilih Sendiri) , semoga postingan ini bisa dimengerti dan bermanfaat , Wassalamulaikum.

Friday, June 28, 2013

Cara Membuat Social Share Button Keren

Cara Membuat Social Share Button Keren
Social social share nutton sangat bermanfaat bagi blog kita, karena sosial share ini bisa menyebarluaskan artikel dari blog kita pada sosial media besar seperti facebook , twitter , dan masih banyak lagi agar blog kita lebih terkenal dan diingat banyak orang. Saya sendiri menerapkan cara ini di blog saya ,agar para pengunjung yang suka artikel saya bisa membagikannya di sosial media mereka.

Social share button ini sangatlah menarik karena disain yang sangat profesional yaitu warna-warninya yang disesuaikan warna sosial media yang ada , seperti halnya facebook berwarna biru maka sosial sharenya pun berwarna biru. Anda bisa melihat contoh gambarnya berikut ini :

Contoh Sosial Share

Bila anda ingin menerapkannya di blog anda , bisa dilakukan dengan cara berikut :
1. Login ke blogger anda
2. Klik Template > Edit HTML
3. Cari kode <data:post.body/> (gunakan CTRL+F) untuk mempercepat pencarian , jika di blog anda terdapat banyak kode <data:post.body/> pilihlah yang terakhir / yang terakhir kedua. dan Letakkan kode di bawah ini tepat dibawah <data:post.body/> (jika ingin tombol share bawah) / tepat diatas <data:post.body/> (jika ingin tombol share diatas)
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='border-top:3px dotted #ccc;border-bottom:1px solid #b8b8b8;width:100%;height:25px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'><div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'><strong>Share this article</strong> :</div><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Share on FB</a><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' style='color: #fff; background: #808080; text-decoration: none; border: 1px solid #000000; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Submit to Digg'>Submit to Digg</a><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Tweet</a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Share on G+</a></div></b:if>
4. Simpan template anda dan lihat hasilnya

Demikianlah artikel singkat pada malam hari ini tentang  Cara Membuat Social Share Button Keren , semoga artikel ini dapat dimengerti dan bermanfaat , Wassalamualaikum.

Tuesday, June 25, 2013

Cara Mendaftarkan Blog di W3 Directory

Cara Mendaftarkan Blog di W3 Directory

Cara Mendaftarkan Blog di W3 Directory - Pada siang hari yang panas ini pas sekali untuk saya menulis artikel Cara Mendaftarkan Blog di W3 Directory untuk dibagikan kepada para blogger semua ,  W3 Directory ini merupakan salah satu directory penyedia backlink untuk blog kita , saya sendiripun memasangnya W3 Directory di blog planet ajaib ini supaya mendapat backlink dari W3 Directory nya.

Tapi yang perlu anda lakukan untuk mendapat backlink dari W3 Directory dengan mendaftarkan blog anda ke W3 Directory dulu , apabila blog anda belum terdaftar di W3 Directory maka anda pun belum akan mendapatkan backlink dari W3 Directory nya. Maka dari itu kita akan membahas Cara Mendaftarkan Blog di W3 Directory supayan anda dapat mendapatkan backlink dari W3 Directory.

Sedikit informasi lagi bagi anda bahwa :
Apabila Banyak pengunjung yang mengklik logo / banner W3 Directory di blog anda maka Semakin banyak poin yang berhasil dikumpulkan dan  posisi website atau blog andat akan terus naik pada list / daftar website yang telah dibagi sesuai dengan kategori, berarti semakin besar kemungkinan website atau blog anda akan terlihat dan diklik oleh para pengunjung W3 Directory tersebut dan anda pun akan lebih banyak mendapatkan backlink
Bila anda ingin memasang W3 Directory berikut ini langkah-langkah yan harus anda lakukan :

1. Anda kli banner / logo disamping untuk menuju W3 Directory W3 Directory - the World Wide Web Directory
2 .Setelah anda berada di W3 Directory , pikih Add The Website yang terdapat pada menu sebelah atas, , berikut ini contoh gambarnya :

Cara Mendaftarkan Blog di W3 Directory

3. Isilah kolom-kolom yang telah disediakan disana , contoh gambar :

Cara Mendaftarkan Blog di W3 Directory
4. Jika sudah mengisi data-data tinggal klik Submit My Website
5. Copy Code yang telah disediakan di W3 Directory , contoh :

Cara Mendaftarkan Blog di W3 Directory

Begitulah langkah-langkah Cara Mendaftarkan Blog di W3 Directory semoga bisa berguna serta bermanfaat bagi blog anda , dan saya rasa demikianlah postingan saya pada kali ini tentang Cara Mendaftarkan Blog di W3 Directory , Wassalamualaikum

Monday, June 24, 2013

Membuat Widget Recent Comment Valid HTML5

Membuat Widget Recent Comment Valid HTML5

Widget Recent Comment (Komentar Terbaru) ini merupakan widget yang sangat bermanfaat bagi blog kita , karena widget ini bisa memudahkan kita untuk melihat komentar-komentar terbaru dari para visitor blog yang baru memberikan komentarnya di blog kita. Saya juga menerapkan tutorial Widget Recent Comment (Komentar Terbaru) dari blog lain tetapi Kode Widget Recent Comment (Komentar Terbaru) dari blog tersebut mengakibatkan Error di Validator.w3.org , makannya saya langsung memperbaikinya dan akhirnya berhasil juga.

Saya membagikan Widget Recent Comment Valid HTML5 ini siapa tahu anda juga sedang mencari-cari Widget Recent Comment yang Valid HTML5 ini dan tidak menyebabkan error di validator.w3.org , dan apabila blog anda masih banyak yang error alias tidak Valid HTML5 , anda bisa juga membaca postingan saya dahulu tentang Cara Membuat Blog Valid HTML5 Lengkap dan semoga setelah anda menerapkan tutorial disamping , blog anda bisa menjadi Valid HTML5 dan Memudahkan semua Browser mengindetifikasi blog anda dengan baik / ramah dengan blog anda.

Bila anda ingin melihat bagaimana wujud / contoh Widget Recent Comment (Komentar Terbaru) ini , anda bisa melihat disisi kanan sidebar blog saya ini , pasti anda akan menemukan widget Recent Comment (Komentar Tebaru) ini , atau anda bisa lihat gambarnya dibawah ini :

Membuat Widget Recent Comment Valid HTML5

Bila anda tetarik dengan Widget Recent Comment Valid HTML5  ini anda bisa menerapkannya berikut ini:

1. Login ke blogger anda
2. Pilih Tata Letak > Tambahkan Gadget
3. Masukan kode berikut ini
<style scoped type="text/css">
    ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
    .sakahayang_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .sakahayang_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .sakahayang_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=20,
 adminBlog='Ahmad Manarul';
//]]>
</script>
<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwanau.js"></script>
<script type="text/javascript" src="http://planetajaib.blogspot.com/feeds/comments/default?alt=json&amp;callback=sakahayang_recent_comments&&amp;max-results=20"></script>

Keterangan : Ganti kode warna Biru dengan nama admin blog , dan ganti kode berwarna Merah dengan url blog anda
4. Simpan / Save Gadget
5. Lihat hasilnya

Demikianlah postingan saya kali ini , dan juga postingan Membuat Widget Recent Comment Valid HTML5 menjadi penutup artikel saya pada hari ini , Semoga Bermanfaat , wassalamualaikum

Saturday, June 8, 2013

Mengubah Tampilan Blog Praktis Terkeren

Mengubah Tampilan Blog Praktis TerkerenSelamat malam , pada malam minggu ini saya akan membagikan sebuah tutorial untuk memperindah tampilan blog anda yaitu tutorial Mengubah Tampilan Blog Praktis Terkeren yang bisa berfungsi sebagai sarana untuk memperingah tampilan blog anda dan juga memungkinkan pengungjung blog anda lebih praktis / cepat dalam mengganti tampilan blog anda dan disesuaikan dengan keinginan pengunjung blog anda.

Artikel Mengubah Tampilan Blog Praktis Terkeren ini merupakan artikel kedua saya hari ini dan artikel Mengubah Tampilan Blog Praktis Terkeren ini juga akan menjadi penutupu artikel pada hari ini / lebih tepatnya malam minggu ini.

Sebelumnya saya juga pernah membahas suatu artikel untuk memperindah blog kita yaitu artikel yang berjudul Membuat Tombol Next Prev Di Samping Kanan Kiri Blog , dan tutorial disamping juga saya terapkan sendiri di blog saya , apabila anda ingin melihat demonya tinggal lihat kanan dan kiri sidebar blog ini.

Tutorial Mengubah Tampilan Blog Praktis Terkeren sendiri dibuat oleh Alya Zahra pemilik blog aiizahh.blogspot.com yang merupakan blog yang keren menurut saya.

Harap anda berkonsentrasi dulu sebelum menerapkan tutorial ini.

Berikut ini cara Mengubah Tampilan Blog Praktis Terkeren :

1. Login ke blogger anda
2. Klik Template > Edit HTML
3. Letakkan kode berikut ini di atas </head> atau </body> :
<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/cookieforblog.js'></script>
<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/styleswitcher.js'></script>
4. Simpan template
5. Selanjutnya taruh kode dibawah ini di Tata Letak > Tambahkan Gadget
<style type="text/css">
#styleSwitcher {
  border:none;
  margin:0 0;
  padding:0 0;
  width:98%;
  text-align:left;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  border-collapse:collapse;
}
#styleSwitcher th,
#styleSwitcher td {
  vertical-align:middle;
  border:none !important;
  padding:2px 10px;
}
#styleSwitcher th.title {
  background-color:#ccc;
  padding:5px 10px;
  margin:0 0 10px;
  text-transform:uppercase;
  font-size:12px;
  font-family:Arial,Sans-Serif;
}
#styleSwitcher select,
#styleSwitcher input[type="text"] {
  width:130px;
  border:2px solid #bbb;
  background-color:#9D8675;
  padding:2px;
  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
  color:#000;
  display:block;
  margin:0 0 0;
  height:24px;
}
#styleSwitcher select option {
  color:white;
  padding:5px 10px;
  cursor:pointer;
}
#styleSwitcher button {
  font:normal 11px Tahoma,Arial,Sans-Serif;
  padding:3px 5px;
  cursor:pointer;
}
#styleSwitcher #bgColorer {
  overflow:hidden;
  margin:10px 0 10px;
}
#styleSwitcher #bgColorer span {
  display:block;
  float:left;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}
#styleSwitcher #bgpattern {
  overflow:hidden;
  margin:10px 0 10px;
}
#styleSwitcher #bgpattern span {
  display:block;
  float:left;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}
#styleSwitcher input[type="text"] {
  width:118px !important;
  padding:4px !important;
  height:auto !important;
}
</style>
<table border="0" id="styleSwitcher">
  <tr><th class="title" colspan="2">Ubah Tampilan Blog</th></tr>
  <tr>
    <td colspan="2">
     <div id="bgColorer">
      <span style="background-color:#A735E0;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#EF2D19;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#F1FF00;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#F49AC2;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#FA8D63;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#967878;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#49E84C;" onclick="bgSwitch(this.style.backgroundColor);"></span>
            </div>
     <div id="bgpattern">
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/amazing%20willows.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20circle.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/pattern%20flowers.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20square.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/tie.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/kinder%20floral.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/Brightness.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
            </div>
        </td>
    </tr>
    <tr><th>Tipe Font</th>
        <td>
            <select onchange="fontSwitch(this.value);">
                <option selected="true">--</option>
                <option value="'Book Antiqua',Serif">Book Antiqua</option>
                <option value="'Times New Roman',Serif">Times New Roman</option>
                <option value="Georgia,Serif">Georgia</option>
                <option value="Arial,Sans-Serif">Arial</option>
                <option value="Tahoma,Verdana,Arial,Sans-Serif">Tahoma</option>
                <option value="'Trebuchet MS',Arial,Sans-Serif">Trebuchet</option>
                <option value="Verdana,Arial,Sans-Serif">Verdana</option>
                <option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif">Century Gothic</option>
                <option value="'Comic Sans MS',Serif">Comic Sans</option>
            </select>
        </td>
    </tr>
    <tr><th>Warna Font</th>
        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
    </tr>
    <tr><th>Ukuran Huruf</th>
        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
    </tr>
    <tr><th>Reset</th>
        <td><button onclick="resetStyle();">Reset Semua Tampilan</button></td>
    </tr>
</table><small><a href="http://aiizahh.blogspot.com/2013/05/mengubah-tampilan-blog-dengan-style.html" target="blank">Pasang Widget Ini</a></small> 

6. Simpan Gadget dan lihat hasilnya

Demikianlah artikel penutup malam minggu ini yang berjudul Mengubah Tampilan Blog Praktis Terkeren semoga artikel ini dapat berguna dan bermanfaat bagi kita semua , bila ada tutur kata atau pengucapan saya yang kurang baik saya mohon maaf sebesar-besarnya , Wassalamualaikum.

Tutorial ini hanya berlaku sampai 1 tahun , maka dari itu anda segeralah memakai tutorial ini

Saturday, June 1, 2013

Membuat Recent Comment Keren Dengan Pemberitahuan

Ketemu lagi sob dengan saya di hari ini , artikel Membuat Recent Comment Keren Dengan Pemberitahuan ini merupakan artikel ke dua saya hari ini. Dan alhamdulillah saya masih bisa membagikan sesuatu kepada sobat blogger semua. Cara ini sendiri saya pakai di blog saya ini.

Apa Fungsi Recent Comment Keren (komentar terbaru) Dengan Pemberitahuan ??? Fungsi pemberitahuannya yaitu bila ada pengunjung yang memberikan komentar di blog sobat , lalu sobat sedang online di blognya , pasti langsung ada pemberitahuan komentar yang beruliskan "1 KOMENTAR BARU" . ini juga memudahkan kita sebagai pemilik blog untuk cepat-cepat membalas komentar pengunjung yang baru saja berkomentar di blog sobat. Berikut ini contoh gambar Recent Comment (komentar terbaru) keren :

Recent Comment Keren Dengan Pemberitahuan
Sobat tertarik untuk mencoba dan menerapkan cara  Recent Comment Keren Dengan Pemberitahuan di blog sobat ??? Bila sobat tertarik untuk mencobanya silahkan ikuti langkah-langkahnya berikut ini :

1. Login ke blogger Sobat
2. Setelah masuk ke dasboard  silahkan klik Template > Edit HTML 
3. Lalu sobat cari kode ]]></b:skin> Lalu letakan kode berikut tepat di atas nya
#outer-comment { Background: none; margin: 0; padding: 5px; width: auto; height: 300px; overflow: auto; border: 0px solid#000; }#boxcomment { border: 0px solid#000; background: #000; text-align: left; color: red; padding: 5px; margin-bottom: 5px; height: 20px; }#comments-total { color: #fff; text-align: center; margin-top: -20px; }.cm-outer { margin: 0 auto; padding: 0 0; font: normal normal 11px Arial,Sans-Serif; border: 0px solid; border-top: none; }.cm-outer li { margin: 0 0; padding: 7px 10px 12px; list-style: none; clear: both; border-top: 2px dotted; 2px; } .cm-outer .cm-header { margin: 0 0 5px; } .cm-outer .cm-content { overflow: hidden; } .cm-outer img { display: block; float: left; margin: 2px 10px 2px 0; border: 0px solid black; background: #8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%; overflow: hidden; -moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .cm-outer img:hover { display: block; float: left; margin: 2px 10px 2px 0; border: 0px solid black; background: #8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%; overflow: hidden; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }.accessible-hidden { position: absolute; top: -99px; left: -99px; width: 1px; height: 1px; }
 KETERANGAN : Kode yang berwarna merah silahkan sobat ngganti sesuai keinginan sobat.

4. Simpan template sobat
5. Selanjutnya untuk Membuat Recent Comment Keren Dengan Pemberitahuan sobat masuk ke Tata Letak > Tambahkan Gadget , lalu sobat masukan kode berikut ini :
<div id="outer-comment"><div id="boxcomment"><b>Total Comment:</b>
    <div id="comments-total"></div></div>
<div id="comments-container">Loading&hellip;</div>
<script type="text/javascript">
var cm_config = {
    home_page: "http://planetajaib.blogspot.com",
    max_result: 7,
    t_w: 32,
    t_h: 32,
    new_tab_link: true,
    tt_id: "comments-total",
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true
};
</script>
    <script type="text/javascript" src="http://karina-project.googlecode.com/files/recent-comments-script-with-notification.js"></script></div>
KETERANGAN : Sobat ganti url http://planetajaib.blogspot.com dengan Url Blog sobat.
6. Simpan atau Save

Cara pemasang Recent Comment Keren Dengan Pemberitahuannya mudah kan sob ???? iya lah ,..kalau kita terus berusaha pasti mudah kok ... hehehe

Demikianlah artikel kedua saya hari ini yang berjudul Membuat Recent Comment Keren Dengan Pemberitahuan semoga artikel dari saya dapat berguna dan bermanfaat bagi blog sobat. Dan seperti biasanya sob , bila ada tutur kata atau pengucapan saya yang kurang baik saya mohon maaf sebesar-besarnya , Wassalamualaikum.

Membuat Random Post SEO Terkeren

Ketemu lagi sob dengan saya disini , mungkin saya mengawali hari ini dengan sebuat artikel yaitu artikel Membuat Random Post SEO Terkeren , saya juga telah mencoba widget Random Post SEO Terkeren ini sob. Makannya saya langsung bagikan kepada sobat blogger semua.

Setelah sebelumnya saya pernah membagikan tentang cara Mengecek Kualitas Meta Tag Blog Sobat yang berguna untuk sobat mengecek Kualitas Meta Tag blog sobat , dan bila kualitas meta tag blog sobat tidak baik / bagus maka segeralah sobat memperbaiki meta tag nya.

Saya sekarang lagi rajin-rajinnya membuat artikel tanpa Copy Paste karena sebentar lagi google akan mengadakan UPDATE PAGERANK tahun 2013. Seperti yang dikatakan oleh Mbak indah yaitu pagerank google akan update di minggu pertama bulan juni ini. Dan semoga pagerank blog saya juga naik dan pagerank blog sobat semua juga akan naik ,  Amiin ya robbal alamin.

Kalau sobat ingin pagerank sobat naik , segeralah sobat kurangi hobi Copy Paste karena hoby Copy Paste ini sangat tidak baik untuk blog sobat dimata Search Engine.

Balik ke tutorial sob , Random Post atau Artikel Acak merupakan widget yang berisi tentang artikel-artikel secara acak (Random) dan siapa tahu artikel acak tersebut yang akan dicari oleh pengunjung blog kita. Berikut ini contoh gambar Random Post nya :

 Random Post SEO Terkeren

Gambar Random Postnya rapi kan sob ???? iya dong . Sobat mau nih ??? Pastinya dong , hehehe
Kalau sobat mau widget Random Post SEO Terkeren silahkan ikuti cara-caranya dibawah ini :

1. Login ke blogger sobat
2. Pilih Template > Edit HTML
3. Masukan kode berikut ini di atas kode ]]></b:skin>
#random-post ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjseI3D6TlBIg4CmMPRlg5mC_FwU-OvB4-rArfbkxVPXiElaJvoCY2dkcoFD_Ljm8q89XzQEdZB6KjZI6CK1ekSp311DMzqBpbtj0HJ6mVaUwe93JxnCTYFszblUblFBXWBeLxc25ZGz-U_/s400/33.gif") no-repeat scroll 5px 8px #E1E1E1;
margin: 0 0 5px;
padding: 5px 5px 5px 20px !important;
}
4. Simpan Template Sobat
5. Selanjutnya , Letakan kode dibawah ini pada Tata Letak > Tambahkan Gadget
<div id="random-post">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=8;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + " title=" + entry.title.$t +">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script></div>
6. Save atau Simpan dan lihat hasilnya di blog sobat

Cara-cara diatas mudah bukan sob ??? iya dong , kalau mau berusaha pasti menjadi mudah kok sob.

Demikianlah artikel pembukaan pada hari minggu ini tentang Membuat Random Post SEO Terkeren. Semoga Artikel dari saya ini dapat membantu sobat dalam masalah blogging. Dan seperti biasanya sob , bila ada tutur kata atau pengucapan saya yang kurang berkenan mohon dimaafkan , Wassalamualaikum

Friday, May 31, 2013

Membuat Link Pelangi di Blog

Alhamdulillah akhirnya saya bisa posting lagi nih sob , saya bersyukur sekali masih diberikan kesempatan oleh Allah SWT. Setelah pada kesempatan sebelumnya saya pernah bagikan trik dan tips yaitu Cara Membuat Loading Blog Super Cepat dan Ringan dan Cara Membuat Arsip Blog (Blog Archive) dengan Scroll yang insyaallah dapat berguna bagi sobat semua.

Cara Membuat Link Pelangi di Blog ini pastinya sudah banyaaaakk para blogger-blogger lain membagikannnya , tapi sekali lagi tidak ada salahnya jika saya ikut membagikannya kepada sobat semua untuk melengkapi isi dari blog ini yang masih keroncongan , hehehe

Membuat Link Pelangi di Blog ini juga bisa menghias blog sobat sendiri karena Cara Membuat Link Pelangi di Blog ini memberikan efek yanh indah bagi yang melihatnya yaitu efek pelangi.

Berikut ini gambar contoh Link Pelangi :

Contoh Link Pelangi di Blog

Gambar diatas sendiri saya potret saat blog ini masih menggunakan efek ini ..
Sobat ingin Membuat Link Pelangi di Blog sobat ??? caranya mudah kok , bahkan sangatlah mudah , yaitu caranya sebagai berikut :

1. Pastinya sobat harus login ke blogger sobat terlebih dahulu
2. Klik Tata Letak > Tambahkan Gadget
3. Pilih HTML/Javascript
4. Masukan kode Berikut ini :
<script src="http://aiizahh-blog.googlecode.com/files/link%20pelangi.js" type="text/javascript"></script>
5. Simpan gadget dan lihat hasilnya

Caranya saya sudah bilang mudah bahkan cukup mudah , betull kan ??? pastinya dong.. hehehe

Demikianlah postingan singkat saya kali ini tentang Cara Membuat Link Pelangi di Blog. dan seperti biasanya semoga bisa berguna dan bermanfaat bagi blog sobat tentunya. Dan bila ada tutur kata atau pengucapan saya yang kurang berkenan dihati saya mohon maaf sebesar-besarnya. Wassalamualaikum

Thursday, May 30, 2013

Cara Membuat Arsip Blog (Blog Archive) dengan Scroll

Ketemu lagi sob dengan saya di blog ini dan alhamdulillah saya masih diberi kesempatan untuk menulis artikel lagi . Pada kesempatan sebelumnya saya sudah bagikan sebuat trik untuk blog sobat yaitu trik Membuat Loading Blog Super Cepat dan Ringan yang bisa membantu loading blog sobat lebih cepat lagi..

Arsip Blog atau Blog Archive menurut saya merupakan kumpulan artikel-artikel kita dari pertama sampai yang terakhir kalinya yang terkumpul dalam satu widget dalam blog , Arsip Blog atau Blog Archive juga memudahkan pengunjung blog kita agar mengetahui artikel-artikel kita yang terdahulu. Dan agar Arsip Blog atau Blog Archive tidak terlalu panjang menjulur ke bawah kita bisa membuat Arsip Blog atau Blog Archive dengan scroll agar lebih menghemat ruang blog sobat.

Berikut ini contoh Arsip Blog (Blog Archive) dengan Scroll :

Contoh Arsip Blog (Blog Archive) dengan Scroll

Arsip Blog (Blog Archive) diatas saya beri scroll pendek agat menghemat ruang di blog saya sendiri.
Apakah sobat mau membuat Arsip Blog (Blog Archive) dengan scroll seperti diatas ???
bila sobat mau silahkan ikuti langkah-langkahnya berikut ini , mudah kok sob , hehehe

1. Login ke blogger sobat
2. Pilih Tata Letak > Tambahkan Gadget
3. Pilih Arsip Blog atau Blog Archive
4. Simpan Gadget
5. Kita pergi ke Edit HTML
6. Lalu kita cari kode <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
7. Tampilan Kode Penuhnya kira-kira seperti berikut
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
8. Tambahkan kode <div style='overflow:auto; width:ancho; height:177px;'> dan </div>
    Dan kodenya kira-kira akan menjadi seperti ini :
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:177px;'><div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div><b:include name='quickedit'/>
</div>
9. Kode warna merah adalah kode yang ditambahkan kedalam script template, anngka 177 adalah tinggi Arsip Blog atau Blog Archive , Sobat bisa menggantinya sesuka hati.

10. Klik simpan template dan lihat hasilnya.

Demikianlah Sob postingan saya kali ini yaitu tentang Cara Membuat Arsip Blog (Blog Archive) dengan Scroll. dan semoga trik ini bisa berguna dan bermanfaat bagi kita srmua , Dan seperti biasanya sob , bila ada tutur kata atau pengucapan saya yangg kurang berkenan dihati saya mohon maaf sebesar-besarnya , Wassalamualaikum.

Tuesday, May 28, 2013

Cara Membuat Efek Shadow Terbaru Terkeren

Alhamdulillah saya bisa posting artikel lagi , saya sangat mengucapkan terimakasih sekali pada Allah SWT yang masih memberi saya peluang untuk memposting artikel. Kalau yang artikel kemarin saya bagikan setelah listriknya mati , sekarang saya baru akan memberikan artikel setelah ada tamu dari tadi di rumah saya (hehehe) , yang kemarin saya bagikan yaitu berjudul Membuat Blogroll Bergerak Paling Keren yang bertujuan untuk menambahkan link teman atau sahabat kedalam widget atau postingan blog sobat.

Cara Membuat Efek Shadow Terbaru Terkeren ini sendiri sudah banyak para blogger lainnya yang membagikannya , tapi saya ganti judul menjadi judul seperti diatas itu.

Contohya sobat bisa lihat gambar dibawah ini dan begitulah contoh Efek Shadow Terbaru Terkeren , hehehe
Contoh Efek Shadow Terbaru Terkeren
Sobat mau membuat efek shadow seperti diatas ??? silahkan sobat ikuti cara-caranya berikut ini,mudah kok:

1. Login ke Blogger Sobat
2. Klik Template > Edit HTML
3. Sobat cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah pencarian)
4. Taruh kode berikut ini diatas kode ]]></b:skin> tadi
#shadow2{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqj6-ye1irM-UVXWjhQTgv2giPgGDh_lCUV6rOgApZU7iUutimnMg73nii-JRouFdSb-ah_7Xs1gsXk77bfr8OB8npnjHopAFCj9sg6pDXAl8ncJYMvHKxDh1jMs42jwOMp49AZW9Iek/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent; height: 20px; width: 300px; } Sumber : http://ahmad-manarul.blogspot.com/2013/05/membuat-efek-shadow-di-widget-sidebar.html#ixzz2UZx0X8dX
5.Simpan template sobat.
6. Bila sobat sudah menyimpan templatenya , sekarang yang harus kita lakukan adalah memilih widget apa yang akan kita berikan efek shadownya , contoh kita menggunakan artikel terbaru sebagai contohnya .
Maka sobat cari kata artikel terbaru (Gunakan ctrl + f untuk mempercepat) maka kurang lebih bentuk kodenya seperti ini :
<b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
<b:includable id='main'>
  <!-- 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>
7. Sobat tambahkan kode <div style='overflow:auto; width:auto;height:200px;'> dan </div> dan <div id='shadow2'/>. Maka penampakan kodenya kira-kira menjadi seperti ini :
<b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<div style='overflow:auto; width:auto;height:200px;'>
<div class='widget-content'>
    <data:content/>
  </div></div><div id='shadow2'/>
8. Lalu simpan template Sobat dan lihat hasilnya.

Bila sobat berhasil menerapkan cara diatas maka kurang lebih widget sobat mempunyai efek shadow keren dibawahnya. Mudah kan sob ???? kalau kita berusaha pasti mudah kok , hehehe

Demikianlah postingan saya kali ini tentang Cara Membuat Efek Shadow Terbaru Terkeren . Seperti biasanya sob , semoga artikel ini berguna dan bermanfaat bagi sobat semua. Bila ada tutur kata atau pengucapan saya yang tidak enak , mohon dimaafkan , Wassalamualaikum

Monday, May 27, 2013

Membuat Blogroll Bergerak Paling Keren

Alhamdulillah bisa posting lagi nih , setelah barusan di daerah sini listriknya mati sekitar 2 jam dan akhirnya nyala juga deh listriknya , alhamdulillah. Saya pada kesempatan sebelumnya pernah membahas sebuah artikel yang berjudul Membuat Widget Subscribe Paling Keren yang gunanya supaya pengunjung bisa mengikuti blog kita dan juga akan mendapat informasi bila kita membuat postingan. dan kesempatan sebelumnya saya juga pernah membahas masalah template yaitu Template Mirip Terselubung Paling Keren.

Teman 
 Balik ke topik sob , Fungsi Blogroll ini sendiri untuk blog yaitu untuk mencantumkan link-link teman atau kawan. Tapi keistimewaan tutorial ini yaitu Blogroll yang kita buat bisa bergerak sob , mau liat contohnya gak sob ??? ,berikut ini contoh blogrollnya sob :

Contoh Blogroll Contoh Blogroll

Sobat ingin membuat  Blogroll Bergerak Paling Keren seperti diatas ???
kalau sobat ingin , silahkan ikuti tutorialnya berikut ini , mudah kok sob santai aja.
  1. Login ke blogger sobat
  2. Klik Template > Edit HTML
  3. Masukan kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
var $ul = $('#blog-roll'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    },
    anim = setInterval(roll, 3000);
// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    setInterval(roll, 3000);
});
</script>
   4. Klik Simpan Template
   5. Letakan kode berikut di tata letak maupun postingan , ya pokoknya yang sobat sukai :

<ul id="blog-roll">         
<li><a href="#">Planet Ajaib 1</a></li>
<li><a href="#">Planet Ajaib 21</a></li>
<li><a href="#">Planet Ajaib 3</a></li>
<li><a href="#">Planet Ajaib 4</a></li>
<li><a href="#">Planet Ajaib 5</a></li>
<li><a href="#">Planet Ajaib 6</a></li>
<li><a href="#">Planet Ajaib 7</a></li>
<li><a href="#">Planet Ajaib 8</a></li>
<li><a href="#">Planet Ajaib 9</a></li>
<li><a href="#">Planet Ajaib 10</a></li>
<li><a href="#">Planet Ajaib 11</a></li>
<li><a href="#">Planet Ajaib 12</a></li>
<li><a href="#">Planet Ajaib 13</a></li>
<li><a href="#">Planet Ajaib 14</a></li>
<li><a href="#">Planet Ajaib 15</a></li>
</ul>

Gantilah tanda pagar (#) dengan link-link teman atau kawan , dan Planet Ajaib 1-15 dengan judul
Mudah kan sobat ????? pastinya dong .....

Demikianlah kali ini postingan saya tentang Membuat Blogroll Bergerak Paling Keren , Semoga dapat berguna dan bermanfaat bagi sobat semua . Dan seperti biasanya bila ada tutur kata atau ucapan saya yang kurang berkenan mohon dimaafkan , dan bila ada pertanyaan silahkan berkomentar dibawah , Wassalamualaikum.

Saturday, May 25, 2013

Membuat Widget Subscribe Paling Keren

Alhamdulillah akhirnya saya bisa update postingan lagi , soalnya dari tadi pagi cuma ngutak-atik template nih. Setelah hari-hari sebelumnya saya disibukan oleh masalah blog agar SEO dan akhirnya saya pun bisa menerapkannya yaitu pada tutorial Cara Membuat Blog Valid CSS3 dan Membuat Blog SEO Di Chkme.com. Nah kan masalah SEO pada tutorial sebelumnya sudah teratasi , sekarang masalah Widget Subscribe. Mengapa Widget Subscribe ini diperlukan ??? karena agar pengunjung bisa mengikuti blog sobat.

Saya juga baru memasangnya barusan , karena ada seorang pengujung bernama maryam ishmatullah ingin ikut blog saya tapi tidak ada Widget Subscribe nya , kan repooottt tho. Makannya saya langsung memasang Widget Subscribe di blog saya , Ehh ternyata berguna banget lhooo.

Berikut ini penampakan widget subcribe paling keren yang saya pakai , hehehe :

Widget Subscribe Paling Keren

Sobat tertarik dengan  Widget Subscribe Paling Keren kaya diatas ??? Pasti dong.
ayoooo berangkat belajar cara Membuat Widget Subscribe Paling Keren :

1. Sob , untuk menggunakan kode CSS yg mengatur tampilan gambar Email, RSS, Twitter, Facebook, dan Google+. Silahkan copy kode di bawah ini dan simpan di atas kode ]]></b:skin>
.social a{color: #6e6e6e;font: bold 12px Arial;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #999;}
.social a:hover {color: #333;border-color: #666;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
Tempelkan kode diatas tadi agar tampilan Widget Subscribenya menjadi Paling Keren

2. Kemudian sobat pergi ke Tata Letak > Tambahkan Gadget dan letakan kode berikut ini :
<div style="background: none; border:none; padding: 4px;">
<div class='social' style='padding: 0pt 0pt 0pt 5px;'>
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=Planetajaib' target='_blank' title='newsletters'><img alt='email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsX-tQ8L57Z8j-EQd_KcvKM3qNsgE53ssMOZaTvosoq0zLxPSLtQt1TdlI95ICrNJAtoc7qo6zXlJ_ghdSfdMNs49L2sL-06okwNoTfmFElS3EAOrvjXN0CmXtOUy6BOndA7kUgX_UG6w/s40/mail.png' title='newsletters'/></a> </td>
<td> <a href='http://feeds.feedburner.com/planetajaib'target='_blank' title='rss'><img alt='rssfeed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyd2yE7K1bfi5HNZy0c9IyUWrQAln07ORuRhux_L5t3q3ckbO8PChf9Bnut5zIJn9vgz_L0LnAlkUUGOu4WbnP4nWSJ5juX9D7eRg09rNh6PVDOEfzj-2qZCOKD4U7GokgiHvLhEV_Ceo/s40/rss.png' title='rss'/></a> </td>
<td> <a href='https://twitter.com/Ahmad_ManarulH' target='_blank' title='Follow on twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_qY87kux7zPK_45Dix1ufVMP-WplDM8Ibs33vBtc628poh3XC_nlq2jzjdn7keBDnVkK88afwBA6hGev8QJNv9-N14nEBag0drg2taSxYuCI4aW4hSdJtRdvRAhumZn_m35zmDHm8WU/s40/twitter.png' title='Follow on twitter'/></a> </td>
<td> <a href='https://www.facebook.com/PlanetAjaib'_blank' title=' like me on facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuyUZvKBDvmSpQYwGBXzORv_WDHbwUECGTHXnM-bRWVQqdTlUZVxRSMy8Co-7jMnIWK9q-wtUfuDWmyykid5g-dJjvVwOpr_B6kuUt9qtJDFZgDmzLfwMsNr81e50z0iFJbLsZdEjixKo/s40/facebook.png' title=' Like me on Facebook'/></a> </td>
<td> <a href='https://plus.google.com/u/0/111196340129624846374' target='_blank' title='Follow on G+'><img alt='blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrU4L6imkk7pZoiaXEGIkE5uphtSGT29krZyIFRTXjg2oa9nWs4zWxwj4Wp-rsLmCyDvKoZ0sudFPz8_Bi6hs9KwEwQMBXpETH8W637SOVtSZUi0Em7HNiek2VAai-UAh-xOeuWCsJgWU/s1600/g+.png' title='Follow on G+'/></a>
</td></tr></tbody></table></div> <br/>
<div style='text-align: center;'>
<a href='http://www.blogger.com/follow-blog.g?blogID=2376713864947803790' target='_blank' title='Follow this blog'><img alt='blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8z7FDL3ccqRrQBF3zvB0TfAkiyeQPS2wZTCkTtNeGgH1gzoGwcVo7-d476iqib_Cg4gnDzp7ISw5tXT9tIZQc1TB_ckyZp0-44W2NRB8SkAmWdsAmVn_FDVR_EnZVUY59m4ojWhW1Qk/s1600/Follower.png' title='Follow this blog'/></a>
</div><br/>
</div>

Keterangan tulisan berwarna yang ada di atas :
  1. Untuk tulisan Planet Ajaib, silahkan ganti dengan user name feedburner blog Sobat.
  2. Tulisan http://feeds.feedburner.com/planetajaib, ganti dengan url feedburner blog Sobat.
  3. Tulisan https://twitter.com/Ahmad_ManarulH, ganti dengan url profil Twitter Sobat.
  4. Tulisan https://www.facebook.com/PlanetAjaib, ganti dengan url Facebook Sobat.
  5. Untuk  https://plus.google.com/u/0/111196340129624846374, silahkan ganti dengan url profil G+ Sobat.
  6. Untuk  2376713864947803790 ganti dengan ID blog Sobat.
Terus kalau sudah dirubah tinggal simpan dan lihat hasilnya.

Demikianlah sob postingan saya kali ini tentang Membuat Widget Subscribe Paling Keren , dan seperti biasa sob , semoga berguna dan bermanfaat , apabila ada pertanyaan silahkan komentar dibawah akan saya jawab bila saya bisa , dan bila ada tutur kata / pengucapan saya yang salah mohon dima'afkan , Wassalamualaikum.

Thursday, May 23, 2013

Memasang TV Online Di Blog

Memang benar adanya bahwa Dunia Online Sekarang sudah mempunyai apa saja , contohnya yang saya akan bahas kali ini. Masa sekarang TV yang biasanya kita lihat di Televisi bisa dilihat di Internet. Itu karena perkembangan Dunia online yang begitu pesat. Contohnya : Sekarang orang bisa beli barang melalui media online , bisa chatting jarak jauh , dan masih banyak lagi yang lainnya.

Mungkin cara ini sudah banyak yang membagikannya tapi tidak ada salahnya jika saya juga ikut memposting artikel cara Memasang TV Online Di Blog ini. Memasangnyapun bisa dibilang mudah , karena saya sendiripun memasangnya di blog saya. Bila sobat ingin melihat TV Online klik Disini

Contoh TV Online Planet Ajaib

Sobat tertarik menerapkannya ??? Bila sobat tertarik silahkan ikuti cara-caranya , mudah kok.
  1. Login ke Blogger sobat
  2. Pilih Buat entri baru / Postingan Baru
  3. Klik HTML bukan Compose
  4. Letakan kode berikut didalamnya
<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="860" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed><span style="font-size: 50%">Widget TV Online <a href="http://planetajaib.blogspot.com" target="_blank" rel="follow">Mivo TV Online</a></span>
    5. Publikasikan dan liat hasilnya

Apabila sudah terlihat TV online di blog anda, maka anda berhasil menerapkan cara ini, apabila tv online belum muncul di blog anda, berarti anda belum beruntung, hehehe.

Demikianlah postingan singkat saya tentang Cara Memasang TV Online Di Blog. Semoga Berguna dan bermanfaat bagi kita semua, bila ada tutur kata / pengucapan saya yang salah mohon dimaafkan , Wassalamualaikum.

Membuat Widget Icon Social Network Keren dengan Efek Spin

Alhamdulillah Sob , masih bisa posting lagi nih. Setelah semalam saya memposting tentang Daftar Situs Layanan Ping Terbaik Untuk Blog, Kali ini saya akan membahas persis dengan judul postingan diatas.
Tahukah sobat apa funsi Widget Icon Sosial Network ini ??? Kalo menurut saya Icon sosial network ini bisa untuk lebih memperjelas siapa si  author / pemilik blog (ini menurut saya . kalo menurut yang lain apa ? saya juga tidak tahu). Icon Sosial Network ini bisa mempercantik blog sobat , Mengapa ? Karena Icon Sosial Network ini dilengkapi dengan efek Spin (Berputar).

Widget Icon Social Network Keren dengan Efek Spin ini juga ringan / tidak memberatkan loading blog anda, selain seperti yang sudah saya jelaskan diatas, bahwa tampilannya juga keren. Jadi tunggu apa lagi ?? ayo langsung memasangnya.

Berikut ini Contoh gambarnya :
Icon Sosial Network
Bila disentuh Cursor Akan berubah seperti ini :
Icon Sosial Network

Sobat mau membuatnya ?? kalo sobat mau silahkan ikuti langkah-langkahnya berikut ini :
  1. Login ke blogger Sobat
  2. Pilih Tata Letak > Tambahkan Gadget
  3. Letakan kode berikut ini :
<style> p#aiizahh_socialnetworkicon img { /* Social Network Widget By http://planetajaib.blogspot.com/ */ -moz-transition: all 0.9s ease-in-out; -webkit-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } p#aiizahh_socialnetworkicon img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } /* Social Network Widget By http://planetajaib.blogspot.com/*/ </style> <center><p id="aiizahh_socialnetworkicon"> <a href="http://twitter.com/USERNAME"' target='_blank'> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzK4aJzlva6X0N1c_NtnEl7au2MoskwK6Sr5LuHcVLsILhzeosOwnSaW3vu-JYKp_a6-BdgpStrj7AtDMRLsYxyu-kBQdPbRhSuNwDQf1QjUrhG9xanIn9Z-U-g8Kzn1UGDev0erUnGa3N/s0/twitter.png' title='Twitter" /></a> <a href="http://www.facebook.com/USERNAME"' target='_blank'> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLizeIABB9m5SHtHAzfxMQA5TLXyF0TCp8j0gNwkTfpsa6HMWxkY63D3YuBwir8h30ujtdYGgexpVQt-pB5P_E1ROsyJVwky0bUz_f61IM4hrXIVR-EcB29YoQNo8c3PTwYHQSEgRL_pJZ/s0/facebook.png' title='Facebook" /></a> <a href="https://plus.google.com/USERNAME"' target='_blank'> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVadDa3OsEN_Sd0cHQP5kh9_bW-i-ls-vjqS_ROzUa6HiWJOP7Z-WXVCTM28CjJ-D2tUwMhsv4pG3K_pz-PbYYO27umo8AuYUjXgUtf6T3UVHItI7Wz8JiTyzFDYpan6dt1c6vrWZaMcX1/s0/gplus.png' title='Google Plus" /></a> <a href="http://www.linkedin.com/USERNAME"' target='_blank'> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMPpU9QykkgC651UlOF2YKTIonFFfmh4tjVRXle_VVI7W3Od6dVNnxl5pNhFrApnUnHHJmfiehhO3_anaqo0_8M60CvBnn92KN-5pdtYk_OmxUzEkvwJoqqgpexHyZDCoVEB_B2eFaE9f4/s0/linkedin.png' title='LinkedIn" /></a> <a href="http://URL BLOG/feeds/posts/default"' target='_blank'> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHYmbqwbWr77cONWa_-zRAbsV0Gnko1sygX5RjltDxG2pjpkV2coiZGNkek5IFugKtyr9ooMQ_LrHp39KPh66N4gpDv7DTiSdqV-a-6QA7fLim017YTJrhhxFYs7OBG9NuFiV2tuE-zBql/s0/rss.png" /></a> <a href="mailto:USERNAME@gmail.com"' target='_blank'> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF0hYAOfymHj8DIIvkpe-OMFUIyqwihCoLVAh50lKX6DrtwLThasWR59Bbgc5LcT3iVI9-o03LF33SMan4_Ble7MZlJwy6WYXHBO_DFwJ-MpQJeJJaIxhJBoPLNaQ3SBBt-lhtyjnc05b5/s0/email.png' title='Email" /></a> </p></center>
NB : Ganti USERNAME Dengan Username Sobat.
      4. Simpan

Sudah tahu kan caranya ??? kalau saya sih berharap semua mengerti cara ini, kalau anda belum tahu (masih kurang mengerti) bisa tanyakan lewat komentar dibawah.

Demikianlah postingan saya tentang Membuat Widget Icon Sosial Network Keren dengan Efek Spin , Semoga Bermanfaat bagi sobat semua , bila ada tutur kata yang tidak pas , saya mohon ma'af sebesar-besarnya. Wassalamualaikum.

Membuat Widget Buka Tutup di bawah Postingan Ala Blog Teriaaak

Tutorial ini juga saya minta langsung dari Mas Birlando dan Mas M Rakadinata pemilik blog (http://teriaaak.blogspot.com/). Saya sangat mengucapkan terimakasih kepada Kedua Mas-mas diatas ,karena permintaan saya telah di setujui dan dibagikan kepada semua. Dan sebagai bentuk terimakasih saya ,   saya akan memberi tautan ke blog Teriaaak. Bagi sobat yang ingin mengujungi blog Teriaaak tinggal pergi ke url berikut www.teriaak.com, Blog Teriaaak juga loadingnya sangat cepat dan desainnya pun membuat pengunjung betah berlama-lama di blog Nya. Oh ya ,  Kembali ke tutorial semula.Widget ini sendiri di modifikasi oleh Mas Birlando yang terinspirasi dari Blog mas hendriono [modification blog].

Apa fungsi dari Widget Buka tutup ini ? Menurut saya widget buka tutup ini membuat blog lebih simple dan lebih enak dilihat mata , karena membuat tata widgetnya menjadi rapi. Lalu mana contohnya ? Berikut ini contoh gambarnya , Saya ambil langsung dari blog Teriaaak.blogspot.com :

Teriaaak Blogspot

Teriaaak Blogspot

Sobat tertarik untuk menerapkan di blog sobat seperti Blog Teriaaak itu ??? Kalau sobat blogger mau silahkan ikuti langkah-langkah saya dibawah ini :

1. Login ke Blogger (http://www.blogger.com/) Sobat
2. Klik Template > Edit HTML 
3. Backup Template Sobat / Copy template sobat dan letakkan pada Notepad , untuk mengantisipasi kesalahan
4. Cari Kode <data:post.dateheader/>
5. Dan letakkan kode berikut dibawah kode <data:post.dateheader/>

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdmdWroo301U6-QGaAaEjtufik6ouwrdr6qx08hgl0TaDI7gzOmahH2aY1YWM3qSORFQfomS35GRMcxNd3UC0n0Y9sLUgo_vYsMPsml7_HZjb-JZ4cxwRMHrFWGAswtgYWdzMSw7Ql9iE/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrmg5RBsGVom6eO06UWECN3evkoOheLWEww_TLQcX8VQZk7OJSt5F4ElizkP2v3XK54asLdVRpV8ay0sSBMOnYIoBF6MnCvo8FFoOOpQNg-_ZeE-I30T9AU8cp-uqYNBKKSwSB2CTmhM/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script src="http://yourjavascript.com/121511228073/accordion-menu.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>
Title 1</h2>
<div class="content">
Isi konten 1</div>
<div id="accordion">
<h2>
Title 2</h2>
<div class="content">
Isi konten 2</div>
<div id="accordion">
<h2>
Title 3</h2>
<div class="content">
Isi konten 3</div>
<div id="accordion">
<h2>
Title 4</h2>
<div class="content">
Isi konten 4</div>
<div id="accordion">
<h2>
Title 5</h2>
<div class="content">
Isi konten 5</div>
</div>
</div>
</div>
</div>
</div>
Keterangan :  Isi kata Title dengan judul widget sobat
                       Isi kata Isi Konten dengan Konten sobat

5. Klik Simpan , dan liat hasilnya

Saya sangat berharap sekali semoga anda mengerti dengan tutorial diatas, karena saya juga masih rada bingung, hehehe. Tapi tak apalah, yang penting membagikan artikel, dan siapa tahu artikelnya bermanfaat bagi semua, Karena membagikan ilmu sangat baik.

Demikianlah postingan saya tentang Membuat Widget Buka Tutup dibawah Postingan Ala Blog Teriaaak, Semoga Bermanfaat bagi sobat semua , dan bila ada kata yang kurang pas / salah mohon dima'afkan , Wassalam.

Monday, May 20, 2013

Widget Contact Form Baru untuk Blogger

Pada tanggal 19 Mei 2013 Blogger meluncurkan kembali widget terbarunya yaitu Widget Contact From Baru untuk Blogger. Saya juga pengguna blogger setia jadi saya juga ikut berbahagia (hehehe).Setelah hari-hari kemarin www.blogger.com telah menambahkan fitur-fitur baru yaitu diantaranya :
  • Fitur Balas Komentar
  • Fitur Komentar Google Plus
  • dan sekarang Widget Contact From Baru untuk Blogger
Fitur ini tentunya sangat bermanfaat bagi kita semua , karena pengunjung blog tinggal mengirim pesan kepada anda , dan anda pun bisa membalas pesannya , tanpa melalui email yahoo / lainnya , pokoknya widget ini sangat di recomendasikan , hehehe

Widget ini juga mempunyai tampilan yang Ciamik , atau istilahnya keren banget, hehehe. Saya juga pernah memakainya, tetapi saya copot widgetnya, karena menurut saya agak gimana gituh, hehehe

Berikut ini contoh penampakan widgetnya
 :
Widget Contact From Baru untuk Blogger

Jadi dengan diterbitkannya Widget ini , anda lebih mudah untuk menambahkan Widget Contact From.
Bila anda ingin memasang widget seperti diatas , pemasangannya sebagai berikut:

1. Login ke Blogger anda tentunya.
2. Klik Tata Letak > Tambahkan Widget
3. Pilih Formulir Kontak

Widget Contact From Baru untuk Blogger

4. Tembahkan
5. Selesai

NB : Setiap ada orang/pengunjung yang mengirim pesan melalui widget contact form ini maka pesannya otomatis masuk ke alamat email anda.

Demikianlah potingan dari saya tentang Widget Contact From Baru untuk Blogger. Bila ada tutur kata atau pengucapan saya yang kurang pas mohon di ma'afkan / maklumi karena saya baru belajar mengetiok artikel sendiri. Terimakasih , dan Semoga Bermanfaat