Tampilkan postingan dengan label Tips. Tampilkan semua postingan
Tampilkan postingan dengan label Tips. Tampilkan semua postingan

Cara membuat efek bayangan pada tulisan blog

Minggu, 21 Oktober 2012

Dikesempatan kali ini saya akan membagi postingan tentang Cara membuat efek bayangan pada tulisan blog,sebenarnya ini adalah trik yang sudah cukup lama tapi tak ada salahnya jika saya posting kembali mungkin saja ada para blogger yang belum tau,efek ini menurut saya cukup menarik dan simpel,sebelum kita memulai tutorial ini ada baiknya anda memfollow blog ini terlebih dahulu setelah itu mari kita mulai

untuk teks dengan bayangan

anda hanya perlu mengcopy kode ini
<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 2px yellow }</style><font color="red"><b class="drop-shadow"><b>tulisan yang anda inginkan</b></font></b>

hasilnya akan seperti ini

tulisan yang anda inginkan

untuk link dengan bayangan


anda hanya perlu mengcopy kode ini
<a href="webmiftah.blogspot.com"><style type="text/css">b.drop-shadow { text-shadow: 2px 2px 2px blue }</style><font color="yellow"><b class="drop-shadow"><b>webmiftah.blogspot.com</b></font></b></a>

hasilnya seperti ini:

webmiftah.blogspot.com

oh iya untuk cara pemasangannya kode dicopy di tab html pada postingan seperti gambar dibawah ini,atau bisa dipasang pada fitur edit html

html

keterangan:

-untuk tulisan berwarna biru,merah dan kuning bisa anda rubah dengan warna keinginan anda
-untuk tulisan yang berwarna hitam bisa anda ganti dengan teks yang ingin anda tampilkan
-untuk tulisan yang berwarna biru muda bisa anda rubah dengan link yang anda inginkan

sekian tutorial dari saya,selamat mencoba

cara membuat text area dan jenis-jenisnya

Sabtu, 01 September 2012




text area webmiftahkali ini saya membahas tentang cara membuat text area dan jenis-jenisnya,text area adalah sebuah kotak khusus yang biasanya diisi dengan kode,text,gambar maupun widget,text area berguna untuk memudahkan dalam hal mengcopy kode,yaudah daripada makin bingung langsung aja lihat koleksi text area milik saya tinggal dipilih mana yang paling kalian suka,tapi jangan lupa follow blog ini dulu ya


<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(121, 222, 111); border-radius: 7px 7px 7px 7px; border: 1px solid rgb(202, 61, 217); color: red; height: 147px; line-height: 1.5em; padding: 5px; width: 387px;">isi sesuatu disini</textarea>

  
 
<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(11, 112, 134); border: 3px dotted rgb(255, 119, 59); color: #ffeff9; height: 154px; line-height: 1.5em; padding: 5px; width: 391px;"> isi sesuatu disini </textarea>

 

<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(255, 111, 1); border-color: rgb(155, 0, 215) rgb(64, 255, 255) rgb(64, 255, 255) rgb(155, 0, 215); border-radius: 10px 10px 10px 10px; border-style: solid; border-width: 4px; color: white; height: 180px; line-height: 1.5em; padding: 5px; width: 397px;">isi sesuatu disini</textarea>

<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(0, 255, 255); border: 2px dashed rgb(231, 95, 122); color: red; height: 130px; line-height: 1.5em; padding: 5px; width: 390px;">isi sesuatu disini</textarea>

<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(255, 0, 255); border: 5px outset rgb(231, 95, 122); color: black; height: 130px; line-height: 1.5em; padding: 5px; width: 390px;">isi sesuatu disini</textarea

 
<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(235, 125, 0); border: 5px ridge rgb(231, 112, 122); color: blue; height: 130px; line-height: 1.5em; padding: 5px; width: 390px;">isi sesuatu disini</textarea>

 

<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(225, 248, 255); border-bottom-right-radius: 15px; border-top-left-radius: 15px; border: 2px ridge rgb(127, 255, 0); color: #771200; height: 153px; line-height: 1.5em; padding: 5px; width: 391px;">isi sesuatu disini</textarea>




<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 166px; width: 445px;" wrap="VIRTUAL">isi sesuatu disini</textarea><br />
<br />
<br /></div>
</form>
</div>
<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(0, 111, 221); border: 5px double rgb(0, 112, 122); color: yellow; height: 130px; line-height: 1.5em; padding: 5px; width: 390px;">isi sesuatu disini</textarea></center>
<center>
<br />
<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(0, 111, 221); border: 5px double rgb(0, 112, 122); color: yellow; height: 130px; line-height: 1.5em; padding: 5px; width: 390px;">isi sesuatu disini</textarea>

<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(111, 222, 111); border: 5px groove rgb(221, 32, 122); color: blue; height: 130px; line-height: 1.5em; padding: 5px; width: 390px;">isi sesuatu disini</textarea>



<textarea cols="40" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(111, 25, 25); border: 5px inset rgb(12, 95, 11); color: #fff000; height: 130px; line-height: 1.5em; padding: 5px; width: 390px;">isi sesuatu disini</textarea>

tinggal dipilih mana yang anda suka (kodenya ada dibawah contoh text area)

kalau nggak tahu cara masangnya baca caranya dbawah ini


1.login ke akun blogger anda
2.pilih fitur tata letak
3.kemudian pilih "tambah gadget"
4.lalu pilih "html/java script"
lalu masukkan kode yang anda pilih dari koleksi text area diatas


 selamat mencoba

Cara Mencantumkan Link Otomatis Saat Artikel Dicopas

Rabu, 22 Agustus 2012

Setelah kemarin saya mosting tentang  cara atasi tombol reply yang error,kali ini saya akan mosting tentang "Cara Mencantumkan Link Otomatis Saat Artikel Dicopas",cara ini berfungsi untuk menghasilkan sumber link jika artikel yang kita miliki di copy oleh seseorang,kalo masih belum paham,coba copy beberapa kata di blog ini lalu paste'kan dan lihat hasilnya. keren kan.

Gmana  udah penasaran kan? oke kalo gitu langsung aja,tapi sebelum itu follow blog ini dulu ya,kalo udah kita langsung ke tutorialnya

1.pertama klik link ini
2.setelah itu isi formulir seperti contoh dibawah ini

3.jangan lupa centang " Usage and Privacy Agreements",lalusubmit
4.lalu copy semua javascript yang diberikan oleh "Tynt"


cara memasang di blog :

1.Login ke akun blogger anda
2.Pilih fitur "template"
3.Pilih Edit html
4.pilih "lanjutkan"
5.Centang "expand template widget"
6.letakkan kode yang anda dapatkan tadi dibawah kode <head>
7.lalu Simpan

Selamat Mencoba

Mengatasi Error Pada Tombol Reply

Selasa, 21 Agustus 2012


Setelah lama blog ini tak terupdate,kini saya akan mengupdate'nya dengan sebuah tutorial cara "Mengatasi Error Pada Tombol Reply Komentar yang Tidak Bisa di Klik",tutorial ini melengkapi postingan saya tentang cara membuat thread comment reply .tutorial ini digunakan jika tombol thread comment reply di blog kita tidak berfungsi ,sebenarnya tutorial ini adalah tutorial lama,tapi saya posting saja,ya mungkin saja ada yang belum tau tutorial ini

yaudah tak usah lama-lama langsung aja,oh iya tapi sebelum itu follow blog ini dulu ya,kalau sudah langsung aja ke tutorialnya

1.Login ke akun blogger anda
2.Pilih fitur "template"
3.Back up dulu templatenya
4.Pilih Edit html

5.pilih "lanjutkan"
6.Centang "expand template widget"
7.cari kode dibawah ini
<b:includable id='threaded_comment_js' var='post'>
  <script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var postId = &#39;<data:post.id/>&#39;;
      var feed = &#39;<data:post.commentFeed/>&#39;;
      var authorName = &#39;<data:post.author/>&#39;;
      var authorUrl = &#39;<data:post.authorUrl/>&#39;;
      var blogId = &#39;<data:top.id/>&#39;;
      var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
      feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = feed;
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == authorName
              && comment.author.profileUrl == authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var tok = 'comment-form_';
      var hash = window.location.hash || '';
      var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

      // Configure commenting API:
      var configJso = {
        'maxDepth': 2
      };
      var provider = {
        'id': postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>
8.ganti semua kode diatas dengan kode dibawah ini
9.SImpan Template

 SELAMAT MENCOBA
thanks to : kangismet

Cara membuat thread comment reply seperti di wordpress

Sabtu, 18 Februari 2012

setelah dulu saya pernah mosting tentang Cara membuat tombol reply pada komentar blog kaliini saya akan membahas hal yang sama tapi yang satu ini lebih bagus dari yang sebelumnya.Namanya "Thread comment reply" apa itu Thread comment reply?Apakah kalian tau form komentar di wordpress? ya seperti itulah bentuknya Thread comment reply kalau kalian masih bingung lihatlah gambar disamping (klik gambar untuk memperbesar).Gimana udah tau kan? oke kalo gitu langsung aja kita praktekin tapi sebelum praktek seperti biasa follow dulu kalo udah follow langsung aja kita mulai:


1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian cari kode b:include data='post' name='comments'/> (agar lebih mudah mencarinya gunakan f3)
6.Lalu ganti kode yang berwarna biru dengan kode berikut : 'threaded_comments'/>

 Catatan:kode b:include data='post' name='comments'/> biasanya terdapat lebih dari 1,jika anda menemukannya lagi silahkan ulangi lagi langkah ke 6

7.Copy kode dibawah ini dan letakkan diatas kode <body>

<style>.comments {  clear: both;  margin-top: 10px;  margin-bottom: 0px;  line-height: 1em;}.comments .comments-content {font-size: 12px;margin-bottom: 16px;font-weight: normal;text-align:left;line-height: 1.4em;}.comments .comment .comment-actions a {display: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;color: #424242 !important;text-align: center;text-shadow: 0 -1px 0 white;text-decoration: none;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font: 11px/18px sans-serif;padding:2px 8px; margin-right:10px;}.comments .comment .comment-actions a:hover {text-decoration: none; background:#fff; border:1px solid #5AB1E2;}.comments .comments-content .comment-thread ol {  list-style-type: none;  padding: 0;  text-align: none;}.comments .comments-content .inline-thread {  padding: 0.5em 1em;}.comments .comments-content .comment-thread {  margin: 8px 0px;}.comments .comments-content .comment-thread:empty {  display: none;}.comments .comments-content .comment-replies {  margin-top: 1em;  margin-left: 40px;   font-size:12px; background:#f0f0f0;}.comments .comments-content .comment {  margin-bottom:16px;  padding-bottom:8px; }.comments .comments-content .comment:first-child {  padding-top:16px;}.comments .comments-content .comment:last-child {  border-bottom:0;  padding-bottom:0;}.comments .comments-content .comment-body {  position:relative;}.comments .comments-content .user {  font-style:normal;  font-weight:bold;}.comments .comments-content .user a {color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;}.comments .comments-content .icon.blog-author {  width: 18px;  height: 18px;  display: inline-block;  margin: 0 0 -4px 6px;}.comments .comments-content .datetime {color: #999999;float: right;font-size: 11px;text-decoration: none;}.comments .comments-content,.comments .comments-content .comment-content {  margin:0 0 8px;} .comment-header {background-color: #FFFFFF;    border: thin solid #E6E6E6;    margin-bottom: 5px;    padding: 5px;}.comments .comments-content .comment-content {  text-align:none;}.comments .comments-content .owner-actions {  position:absolute;  right:0;  top:0;}.comments .comments-replybox {  border: none;  height: 250px;  width: 100%;}.comments .comment-replybox-single {  margin-top: 5px;  margin-left: 48px;}.comments .comment-replybox-thread {  margin-top: 5px;}.comments .comments-content .loadmore a {  display: block;  padding: 10px 16px;  text-align: center;}.comments .thread-toggle {  cursor: pointer;  display: inline-block;}.comments .continue {  cursor: pointer;}.comments .continue a {display: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;color: #424242 !important;text-align: center;text-shadow: 0 -1px 0 white;text-decoration: none;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font: 11px/18px sans-serif;padding:2px 8px; margin-right:10px;}.comments .comments-content .loadmore {  cursor: pointer;  max-height: 3em;  margin-top: 3em;}.comments .comments-content .loadmore.loaded {  max-height: 0px;  opacity: 0;  overflow: hidden;}.comments .thread-chrome.thread-collapsed {  display: none;}.comments .thread-toggle {  display: inline-block;}.comments .thread-toggle .thread-arrow {  display: inline-block;  height: 6px;  width: 7px;  overflow: visible;  margin: 0.3em;  padding-right: 4px;}.comments .thread-expanded .thread-arrow {  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;}.comments .thread-collapsed .thread-arrow {  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;}.comments .avatar-image-container {background-image: url(&quot;http://img846.imageshack.us/img846/7357/unled1oww.jpg&quot;);background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;border: 1px solid #DDDDDD;}.comments .avatar-image-container img {  width: 36px;}.comments .comment-block {  margin-left: 48px;  position: relative;} /* Responsive styles. */@media screen and (max-device-width: 480px) {  .comments .comments-content .comment-replies {    margin-left: 0;  }}</style>

8.Tinggal di save deh

note : jika terjadi error klik disini
SELAMAT MENCOBA

Cara membuat Spoiler di Blog

Minggu, 22 Januari 2012

Kali ini Saya akan membahas tentang "Cara membuat Spoiler di Blog".apa itu Spoiler?.Spoiler adalah sebuah tombol yang bila diklik akan terbuka isinya.Spoiler biasa digunakan di sebuah forum dan sebagainya.Sebuah spoiler biasa diisi dengan sebuah gambar,tulisan,video atau semacamnya tujuannya agar tidak terlalu berat dan terlihat rapi.Masih belum tau apa itu spoiler?
ini contohnya


keren kan?

contoh diatas itu contoh yang backgroundnya transparan
kalau mau backgroundnya berwarna ini contohnya (misal background oranye)

backgroundnya oranye

penasaran kan gimana cara bikinnya?
oke langsung aja kita mulai tapi sebelum itu follow blog saya dulu ya
kalo udah langsung aja tanpa basa-basi kita mulai tipsnya:

tapi sebelum itu saya jelaskan dulu
spoiler ini bisa ditaruh di postingan ataupun "Html/Javascript" terserah anda ingin menaruhnya dimana kalau ingin ditaruh dipostingan taruh di bagian edit html seperti disamping.Kalau ingin ditaruh di sidebar (html/javascript) caranya seperti dibawah ini

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML Java/Script
6.Masukkan kodenya
7.Simpan

KODENYA SPOILER :

<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Lagi'; }">
</div>

<div style="background: #00ffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
isi spoiler
</div>
Keterangan:
 -kode yang berwarna hijau bisa anda ganti sesuai keinginan anda contoh :buka,show dan sebagainya
-kode yang berwarna kuning bisa anda ganti sesuai keinginan anda contoh :tutup,hidden dan sebagainya
 -kode yang berwarna merah bisa anda ganti sesuai keinginan anda contoh :buka lagi,show again dan sebagainya
 -kode yang berwarna biru muda (cyan) adalah kode background untuk spoiler yang berwarna biru muda anda bisa menggantinya sesuai keinginan anda (Jika anda ingin membuatnya transparan ganti kode tersebut dengan tulisan transparent)
- -kode yang berwarna biru adalah isi untuk spoiler

selamat mencoba

Menampilkan status YM di blog

Minggu, 18 Desember 2011

YM wah kayaknya udah lama banget nih saya nggak mosting.Oke kali ini saya akan mosting tentang "Menampilkan status YM di blog" udah pada penasaran kan? oke tapi sebelum itu saya jelasin dulu kegunaan widget ini:
-widget ini biasanya digunakan untuk sarana berkomunikasi antara visitor dan admin blog
-dan banyak lagi
oke deh kalo gitu kita mulai tapi sebelum mulai jangan lupa follow dulu ya kalo udah baru kita mulai:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML Java/Script
6.Masukkan kode seperti di bawah ini

<a href="ymsgr:sendIM?miftahul_anwar30" title="Test"><img src="http://opi.yahoo.com/online?u=miftahul_anwar30&m=g&t=24" alt="YM" border="0" /></a>

7.Simpan

keterangan:
-Ganti tulisan yang berwarna merah dengan ID YM kamu
-Ganti tulisan yang berwarna biru dengan angka antara 0-24 karena disetiapangka ada gambar yang berbeda

SELAMAT MENCOBA

Cara Membuat Efek Refresh/Reload di Blog

Minggu, 13 November 2011

kali ini saya akan membahas tentang Cara Membuat Efek Refresh/Reload di Blog.tapi ada yang tau nggakapa sih fungsinya?fungsinya biasanya digunakan untuk merefresh blog kita setiap waktu (sesuai yang kita atur)biasanya efek refresh ini di gunakan di forum-forum seperti kaskus.us biasanya digunakan efek tersebut agar para pengunjung tau kalau ada thread (postingan) terbaru.okelah kalo begitu gakusah panjang lebar langsung aja kita praktekin tapi sebelum itu follow dulu blog saya ya oke kalau udah follow langsung aja kita mulai:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Cari kode <head> (gunakan f3 agar lebih mudah mencari)
5.Kalo udah ketemu letakkan kode dibawah ini dibawah kode <head> 

<meta http-equiv="refresh" content="300"/>

kalo udah tinggal save templatenya

keterangan

-Tulisan yang berwarna merah "300" adalah hitungan waktu blog akan di reload setiap berapa detik semakin kecil angka semakin cepat me reload tapi kalau saya sarankan waktu jangan di set terlalu cepat sebaiknya sekitar 5 menitan (300 detik)

selamat mencoba

Cara membuat Daftar Isi Otomatis di Blog versi 2

Senin, 07 November 2011

setelah dulu saya sudah pernah mosting tentang Cara membuat Daftar Isi Otomatis di Blog kali ini saya akan membahas hal yang sama tapi daftar isi yang satu ini lebih bagus dari sebelumnya screenshotnya disebelah kanan(klik untuk memperbesar) oke deh kalo udah penasaran langsung aja kita mulai tapi sebelum itu follow blog saya dulu dong kalo udah follow kita mulai:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Cari kode <b:skin><![CDATA[ (gunakan f3 agar lebih mudah mencari)
5.Kalo udah ketemu letakkan kode dibawah ini dibawah kode <b:skin><![CDATA[

.judul-label{background:-moz-linear-gradient(top,#393e41,#000);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;vertical-align:baseline;margin:0 2px;outline:none;cursor:pointer;text-decoration:none;font:14px/100% Arial,Helvetica,sans-serif;padding:.5em 2em .55em;text-shadow: 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:1px 1px 4px #aaa;box-shadow: 1px 2px rgba(0,0,0,.2);color:#e9e9e9;border:2px solid white !important;background:#0000fff }.judul-label,.data-list{white-space:nowrap}.data-list{font:12px comic sans ms /1.5em;margin-:5px;padding-left:20px;15px;text-align:left;left}.list-ganjil,.list-genap{background:#000;color:#51a104;border-top:1px solid #f00;border-bottom:1px solid #f00}.headactive,.headactive{color:#fff;border:2px solid:#c0c0c0;!important;background:#d11717;background:-moz-linear-gradient(top,#d11717,#8c0000)}

6.kalo udah tinggal di simpan deh



LANGKAH INI BELUM SELESAI MASIH ADA LANGKAH SELANJUTNYA

untuk memanggil kode tersebut kita harus membuat sebuah postingan baru ikuti langkah-langkah berikut:

1.Login ke akun blogger anda
2.Pilih tab entri baru
3.Pilih Edit html

masukkan kode dibawah ini dikotak yang telah disediakan

<script src="https://sites.google.com/site/webmiftah/js/wm2.js">
</script>
<script src="http://webmiftah.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://sites.google.com/site/webmiftah/js/wm.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/webmiftah/js/wm3.js" type="text/javascript">
</script>

kalo udah tinggal di terbitkan deh

contoh bisa dilihat disini

keterangan:kode yang berwarna biru ganti dengan url blog anda

SELAMAT MENCOBA

Cara memasang script alert di blog

Sabtu, 10 September 2011

Sobat blogger kali ini saya akan membahas tentang "Cara memasang script alert di blog".ngomong-ngomong yang dimaksud "alert" itu apa ya?Disini "alert"nya bukan "alert" yang artinya "waspada" tapi seperti sebuah pesan singkat yang akan muncul pertama kali saat blog dibuka kalo masih belum tau maksudnya bisa dilihat seperti gambar-gambar dibawah:

Versi Google Chrome

Versi Mozilla Firefox

Versi Internet Explorer

Udah pada ngerti kan kalo gitu langsung aja praktekin tapi sebelum mraktekin follow blog ini dulu dong setelah anda follow baru kita mulai praktekin:
1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Kemudian cari kode </head> (agar lebih mudah mencarinya gunakan f3)
5.Letakkan kode berikut di atas kode </head>


<SCRIPT language='JavaScript'>alert("JANGAN LUPA FOLLOW YA");</SCRIPT>
6.Tinggal di Save deh

KETERANGAN:

ganti tulisan JANGAN LUPA FOLLOW YA sesuai keinginan anda
Selamat mencoba

Cara memasang widget Related Post/artikel terkait dengan thumbnail di blog

Senin, 29 Agustus 2011

Sobat blogger bentar lagi kan lebaran saya punya tutorial baru nih tentang Widget "Artikel terkait" apa sih artikel terkait?.Artikel terkait adalah Daftar link yang berhubungan dengan sebuah artikel yang kita baca.Kalo masih bingung langsung aja praktekin,tapi sebelum itu kalian wajib follow blog saya dulu setelah itu kita mulai:


1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian centangExpand Template Widget
6.Kemudian cari kode </head> (agar lebih mudah mencarinya gunakan f3)
7.Letakkan kode berikut di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='https://sites.google.com/site/webmiftah/js/relatedpostthumbnail.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8.Kemudian cari kode <div class='post-footer-line post-footer-line-1'>  kalo gak ketemu jangan panik bisa car kode seperti ini <p class='post-footer-line post-footer-line-1'> 
9.Kalo udah ketemu salah satu letakkan kode dibawah ini di bawah kode yang anda barusan temukan:

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

10.Tinggal di Save deh

KETERANGAN:

-Ganti tulisan yang berwarna MERAH dengan kode wana sesuai kesukaanmu
-Ganti tulisan yang berwarna KUNING sesuai jumlah artikel terkait yang ingin anda munculkan
-Ganti tulisan yang berwarna  CYAN dengan Tulisan yang ingin anda tampilkan (judul) di atas related post

SELAMAT MENCOBA

Cara mengganti tulisan Reply dengan gambar

Jumat, 19 Agustus 2011

Kalau sebelumnya saya sudah memposting tentang 'Cara membuat tombol reply di komentar blog',kali ini saya akan membahas tentang 'Cara mengganti tulisan Reply dengan gambar' mungki saja ada yang bosan dengan tulisan reply-nya sehingga ingin diganti dengan gambar,yaudah biar gak kelamaan kita mulai,eits tapi sebelum itu follow blog saya dulu dong hehehehe,setelah kalian follow baru kita mulai:


1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian cari kode return false;'>Balas</a></span> (agar lebih mudah mencarinya gunakan f3)
6.Ganti kode yang berwarna biru dengan script seperti ini
<img src='URL GAMBAR KAMU' style='float:right;' title='Reply To This Comment'/>
7.Save templatenya

PENTING:Ganti Tulisan 'URL GAMBAR KAMU' dengan url button reply kamu

Kalo gak mau pusing-pusing cari gambar buat tombol reply klik aja disini
Selamat mencoba

Cara membuat tombol reply pada komentar blog

Kamis, 18 Agustus 2011

Kali ini miftah mau membahas tentang Cara membuat tombol reply pada komentar blog ,biasanya tombol reply digunakan untuk membalas sebuah komentar,kalo masih belum ngerti yaudah langsung aja kita praktekin,tapi sebelum itu kalian wajib follow blog saya dulu baru kalo udah follow kita mulai:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian cari kode <dd class='comment-footer'> (agar lebih mudah mencarinya gunakan f3)
6.Letakkan kode dibawah ini dibawah kode  <dd class='comment-footer'>
 <a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtux1d8wMWq1ZvoFi9p13hWGK1zuoUQFL_g0yht84deRTSWp6GTHT3sbJuso3uScWOZ9aEXgU8B0Kd3uffVXaTFOOk-6XuFoEAn36RWTC4C-iH4Kt_xUQUnDONpY9aSizy4WfULNEFgCL/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2513873037599071879&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.openundefinedthis.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Balas</a></span>
7.Ganti Tulisan yang berwarna merah dengan ID blog anda,cara mengetahui ID anda seperti gambar dibawah ini
8.Kalo udah tinggal disimpan deh

NB:kalo pengen tulisan 'balas' nya bisa diganti sesuai keinginan anda misalnya "Reply" atau apalah tereserah tapi kalo pengen tulisan balasnya jadi gambar itu mudah klik aja disini

SELAMAT MENCOBA

Cara merubah font di blogspot secara otomatis

Jumat, 12 Agustus 2011

Sobat blogger kali ini Miftah mau sharing ilmu baru nih namanya "Merubah font di blogspot secara otomatis" wih pasti udah pada penasaran kan?kalo udah pada penasaran kita harus segera memulainya nih,tapi sebelum itu kalian follow blog saya dulu biar bisa tau kalo ada tips baru lagi kalo kalian udah follow baru kita mulai:



1.Login ke akun blogger anda
2. Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML Java/Script
6.Masukkan kode dibawah ini di kotak yang telah disediakan:



<div class='widget-content'>
<center><script>
function go1(){
if (document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize
=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value
}
}

function go2(){
if (document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily
=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value
}
}
</script>
<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman" />Times New Roman
<option value="Arial" />Arial
<option selected value="Book Antiqua" />Book Antiqua
<option value="Bookman Old Style" />Bookman Old Style
<option value="Century Gothic" />Century Gothic
<option value="Comic Sans Ms" />Comic Sans Ms
<option value="Tahoma" />Tahoma

<option selected value="Trebuchet Ms"//>Trebuchet Ms
<option value="Verdana" />Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px" />8
<option value="9px" />9
<option value="10px" />10
<option value="11px" />11
<option selected value="12px" />12
<option value="14px" />14
<option value="16px" />16
<option value="18px" />18
</select></form><center></center></center>
</div>


7.Tinggal disimpan deh

Hasilnya seperti ini


SEMOGA BERMANFAAT

Cara membuat link berkedip

Selasa, 09 Agustus 2011

Setelah dulu saya sudah pernah posting tentang Cara membuat link bersinar dan Cara membuat link wrna-warni,kali ini saya akan mosting tentang Cara membuat link berkedip.Apa itu link berkedip?Link berkedip adalah link yang selalu berkedip kalo gak ngerti maksudnya ini contohnya HOME .Tapi itu hanya tulisan biasa yang gak bisa diklik kalo pengen yang bisa diklik ini contohnya Home mau tau caranya follow dulu dong kalo udah follow mari kita mulai:

UNTUK TEKS BERKEDIP

Sertakan kode <blink> di awal dan akhir kata yang akan dibuat berkedip contoh <blink>Berkedip<blink> nanti hasilnya akan jadi seperti ini Berkedip

UNTUK LINK BERKEDIP

Kodenya agak berbeda dengan kode sebelumnya,kodenya seperti dibawah ini

<blink><a href ="http://webmiftah.blogspot.com/" target ="_blank">Miftah</a></blink>

Hasilnya akan seperti ini Miftah

KETERANGAN

Untuk Link Berkedip
-Ganti tulisan yang berwarna merah dengan url yang ingin di link
-Ganti tulisan yang berwarna biru dengan tulisan yang akan muncul mewakili link

Semoga bermanfaat

Tips agar blog banyak pengunjung

Minggu, 31 Juli 2011


Sobat blogger kali ini Miftah akan membahas tentang 'Tips agar blog banyak pengunjung' wih pasti enak tuh dapet banyak pengunjung oke biar gak kelamaan ayo kita mulai.Eits tapi tunggu dulu sebelum kalian membaca postingan saya kali ini kalian wajib Follow dulu di blog ini setelah itu kita mulai langkah-langkahnya:


1. Buat sedikitnya 1 posting Perhari
Hal ini akan berdampak baik bagi blog anda karena dengan anda membuat sedikitnya 1 posting Perhari selain anda bisa mendapatkan banyak pengunjung anda juga bisa meningkatkan traffic alexa anda

2. Berkomentar di blog orang lain
Biasanya beberapa blogger akan berkomentar jika ia diberi komentar terlebih dahulu jadi sering-seringlah berkomentar di blog seseorang agar kamu mendapatkan komentar balik

3. Gunakan Nama Domain
Ini juga salah satu hal yang mendukung banyaknya pengunjung blog.dengan menggunakan nama domain blog anda terkesan lebih profesional gunakan nama domain seperti (.com, .co.id, .net dll) contohnya google.com

4. Anjurkan orang lain untuk berkomentar
Untuk memancing pembaca meninggalkan komentar, Anda bisa menyertakan sebuah pertanyaan pada tiap posting,contohnya: "Bagaimana menurut Anda?"

5. Bertukar Link
Hal ini juga bisa membantu banyaknya pengunjung.Buat widget tukar link di blog anda,dan ajak teman-teman untuk bertukar link dengan anda,insyaallah blog anda lama-lama akan kedatangan pengunjung


Kok dikit ya cuma 5 soalnya saya taunya cuma itu hehehe tapi jika menurut anda ada yang kurang kasih tau lewat komentar ya

SEMOGA BERMANFAAT

Cara membuat link bersinar

Sabtu, 23 Juli 2011


Setelah dulu saya pernah mosting tentang Cara membuat link warna-warni,kali ini saya akan sharing ilmu baru lagi yaitu Cara membuat link bersinar.Apa itu link bersinar?link bersinar maksudnya adalah link yang jika didekati cursor akan keluar bintang-bintang di sekelilingnya pasti kalian udah pada penasaran kan.yaudah kalo gitu langsung aja kita praktekin tapi sebelum itu kalian harus follow blog saya dulu hehehehe karena apa? karena dengan mem-follow blog saya anda akan tau kalo ada postingan baru yang menarik lagi oke kalo gitu kita mulai:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Cari kode </head> (gunakan f3 agar lebih mudah mencari)
5.Kalo udah ketemu letakkan kode dibawah ini diatas kode </head>
 
<style>
a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc3xR71S2-inB3nMPvV0OOcmvQpo58t1o3bA5JdQXDSx8yTI8z7TzkS5g6NueoaoqR0BbAYGDKdAe18sAfgOnughr7Tv_Ifmtx1np3jpm6k9ct9pNe3HozMXc35-FBxpnGgOCmuOoUQpY/s1600/blink.gif); }
</style>


6.Kalo udah tinggal di save




SELAMAT MENCOBA