Tampilkan postingan dengan label Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Blog. Tampilkan semua postingan

Cara Membuat Daftar Isi Dengan Scroll

0 komentar

Kali ini Cyber Blog akan berbagi tentang cara membuat daftar isi dengan menggunakan scroll, kemudahan mengakses artikel bagi para pengunjung tentunya harus menjadi perhatiann bagi para blogger, salah satunya dengan membuat navigasi yang berisi daftar artikel yang sudah di posting pada blog itu. 
Adapun cara untuk membuat daftar isi secara umum menerapkan dua metode :
1. Semua label disatukan dalam satu box scroll (contohnya lihat di sidebar blog ini)
2. Hanya membuat daftar isi pada label tertentu (bisa dilihat di sidebar blog http://riitutor.blogspot.com)

Adapun cara untuk membuat daftar isi metode 1 adalah :
  • Copy paste kode berikut pada tambah gadget--> + html/javascript di pengaturan tata letak blogger
<div style="overflow:auto;width:160;height:220px;padding:10px;border:2px dashed#5e5e5e"><script style="text/javascript" src="http://sites.google.com/site/icalcell/javascript/daftarisiku.js"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://sipkom.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Keterangan :
+Warna merah untuk mengatur lebar dan tingginya
+Warna biru ganti dengan alamat blog anda

Adapun cara untuk membuat daftar isi metode 2 :
  • Copy paste kode berikut :
<div style="border: 3px solid #0000FF; padding: 5px; overflow: auto; width: auto; height: 100px; border-radius:10px;background-color: #fff;">
<script style="text/javascript"> var numposts = 1000; var standardstyling = true; </script> <script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script> <ol> <script src="http://sipkom.blogspot.com/feeds/posts/default/-/Tips dan Trik?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ol></div>

Keterangan :
+Ganti warna biru dengan alamat blog anda
+Ganti warna merah dengan nama label yang ada di blog anda.

Saya kira cukup jelas untuk dimengerti, apabila ada yang kurang dimengerti silahkan tanyakan.

Cara membuat efek zoom pada gambar blog

0 komentar

Posting kali ini Cyber blog akan berbagi ilmu mengenai cara membuat efek zoom pada gambar blog ketika disorot mouse, setelah diamati kebanyakan tutorial memberikan cara yang bisa dibilang cukup rumit dalam membuat efek zoom pada gambar itu, biasanya harus memberi kode tertentu pada gambar yang ingin diberi efek zoom. 
Kali ini Cyber blog akan memberi solusi mudah untuk membuat efek zoom tanpa perlu menambahkan kode tertentu pada saat memposting. 
Untuk melihat contohnya silahkan arahkan mouse ke gambar di bawah ini :
Untuk cara membuatnya :
  • Login ke akun blogger anda, kemudian klik template-->klik Edit html
  • Cari kode ]]></b:skin>   
  • Copy paste kode di bawah ini tepat di atasnya

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
-webkit-transform: scale(1.9); }
Kalo bingung lihat contoh penempatannya :

cara membuat efek zoom pada gambar

    • Terakhir simpan template anda.
    Semoga ini dapat bermanfaat, bagi anda semua.

     

    Cara Membuat Menu Dropdown Di bawah Header

    3 komentar

    Halo para pengunjung setia Cyber Blog, setelah beberapa hari tidak posting karena disibukkan dengan berbagai aktifitas, akhirnya saya kembali lagi untuk berbagi ilmu yang saya tahu, saya ingin share cara ini sebenarnya sudah lama, cara membuat menu dropdown, apakah menu dropdown? langsung saja yaa, menu dropdown ini adalah menu yang biasanya berada di bawah/atas header, dan ketika mouse diarahkan maka akan terbuka beberapa pilihan yang berisi link yang sudah anda setting sebelumnya. Sebagai contohnya anda bisa langsung saja lihat screenshoot di bawah ini :
    Nah jika sobat Cyber Blog tertarik untuk membuatnya, langkahnya adalah :
    • Anda login akun blogger anda, kemudian masuk ke menu edit Html, centang kotak expand template widgets.
    • Kemudian anda cari kode ]]></b:skin> (gunakan Ctrl+F untuk mempermudah pencariannya).
    • letakkan kode di bawah di atas kode tadi :
    /* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
    • Selanjutnya anda cari kode </header> , dan letakkan kode di bawah tepat dibawahnya :
    <div id='menuwrapperpic'>
    <div id='menuwrapper'>
    <ul id='menubar'>
    <li><a href='/'><img border='0' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
    <li><a href='#' target='new'>Tentang Admin</a></li>
    <li><a class='trigger'>Contact Us</a>
    <ul>
    <li><a href='#' target='new'>Goggle +</a></li>
    <li class='hr'/>
    <li><a href='#' target='new'>Contact on Twitter</a></li>
    <li><a href='#' target='new'>Contact on Myspace</a></li>
    <li><a href='#' target='new'>Cyber Blog on Facebook</a></li>
    </ul>
    </li>
    <li><a href='#' target='new'>Created By CyberBlog</a></li>
    <li><a class='trigger'>Tips dan Trik</a>
    <ul>
    <li><a href='#'>Komputer</a></li>
    <li class='hr'/>
    <li><a href='#'>Blogspot</a></li>
    <li class='hr'/>
    <li><a href='#'>Facebook</a></li>
    <li class='hr'/>
    </ul>
    </li>
    <li><a class='trigger'>Kategori</a>
    <ul>
    <li><a href='#'>TV Online</a></li>
    <li class='hr'/>
    <li><a href='#'>Komputer</a></li>
    <li class='hr'/>
    <li><a href='#'>Desain Grafis</a></li>
    <li class='hr'/>
    <li><a href='#'>Game</a></li>
    <li class='hr'/>
    <li><a href='#'>Microsoft</a></li>
    <li class='hr'/>
    <li><a href='#'>Software APP</a></li>
    <li class='hr'/>
    <li><a href='#'>Software Program</a></li>
    <li class='hr'/>
    </ul>
    </li>
    </ul><div class='menusearch'>
    <div style='float:right;padding:8px 8px 0 0;'>
    <form action='http://sipkom.blogspot.com/search' method='get' target=''>
    <input name='sitesearch' style='display:none;' value='http://sipkom.blogspot.com'/>
    <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
    </form></div></div></div></div>
    • Ganti tanda # dengan link target yang anda kehendaki, misalnya dengan alamat home page misalnya 'http://sipkom.blogspot.com'
    • Selanjutnya ganti tulisan berwarna biru dengan alamat blog anda. Lalu simpan template.
    Selesai..mudah bukan ?
    Note : saya sarankan anda untuk unduh lengkap template anda terlebih dahulu demi menjaga dari terjadinya hal yang tidak diinginkan ^-^


    Cara Membuat Kotak Keterangan Admin Di Bawah Posting

    0 komentar

    Anda mungkin ingin membuat suatu kotak yang berisi keterangan admin di bawah posting blog, yang berisi kata-kata anda :
    Artikel***** ini dibuat oleh *****pada hari***......
    Terimakasih atas kunjungan anda......dan seterusnya.

    Untuk lebih jelasnya silahkan anda lihat pada bagian bawah artikel ini , perhatikan kotak yang berisi sebuah foto dan beberapa kata yang dbuat admin, jika itu yang anda maksud, anda bisa membuatnya dengan mudah.

    1. Seperti biasa anda masuk akun blogger anda, kemudian masuk ke Edit html jangan lupa centang Expand template widget (saya sarankan agar anda unduh lengkap template anda terlebih dahulu !! ).
    2. Anda cari kode ]]></b:skin> untuk memudahkan pencarian anda gunakan Ctrl+F
    3. Jika anda sudah menemukannya silahkan anda copy paste kode berikut tepat di atasnya

    .admin-tulisan{
        display:block;
        width:auto;
        background:#FFFFFF;
        border:2px solid #000000;
        box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
        padding:0;
        margin:30px 0 10px 0;
        font:normal 12px Comic Sans Ms;
        color:#222;
        }
        .admin-tulisan .kontainer{padding:5px;}
        .admin-tulisan h4{
        background:#0000FF;
        border:none;
        border-bottom:2px solid #000000;
        color:#fff;
        text-transform:normal;
        text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
        font:bold 12px Comic Sans Ms;
        padding:5px 10px;
        margin:0 0 0 0;
        display:block;
        }
        .admin-tulisan h4 a{color:#FEEA83;}
        .admin-tulisan img{
        width:70px;
        height:70px;
        margin:0 10px 0 0;
        float:left;
        border:1px solid #000000;
        padding:2px;
        background:#000000;
        box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
        }
    4. lalu anda simpan template terlebih dahulu. Lalu anda cari kode <data:post.body/> , jika anda menerapkan read more otomatis pada blog anda silahkan cari kode <data:post.body/> yang ke-2, seperti biasa anda gunakan Ctrl+F untuk memudahkan pencarian. 
    Note :Jika anda belum tahu cara melakukan pencariannya : Tekan Ctrl+F bersama-sama, setelah muncul kotak kecil di sebelah kiri lalu anda copy paste kode yang ingin anda cari lalu tekan Enter.
    5. Jikalau sudah ketemu, lalu anda letakkan kode di bawah tepat sesudah kode <data:post.body/> 

    <!-- Kotak Admin -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='admin-tulisan'>
    <h4>Di Posting Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ http://sipkom.blogspot.com/</h4>
    <div class='kontainer'>
    <img src='http://i1252.photobucket.com/albums/hh568/ari337/photo.jpg'/>
    Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan anda serta kesediaan anda membaca artikel ini, Kritik dan saran dapat dapat sampaikan melalui kotak komentar. Semoga Artikel <data:post.title/> dapat Bermanfaat .. ^_^
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Kotak Admin -->
     6. Silahkan anda ganti sesuai keinginan anda pada tulisan yang berwarna merah, terakhir anda simpan template anda dan lihat hasilnya.

    Sangat mudah sekali bukan ?
    Semoga dapat bermanfaat.

     

    Cara Membuat Garis Pembatas Antar Paragraf Di Posting Blog

    5 komentar

    Hanya sekedar ingin berbagi, tentang kode untuk membuat garis pembatas antar paragraf untuk memperindah tampilan blog anda sehingga memudahkan pembaca.

    Berikut saya berikan contoh berikut kodenya :


    Line 1:

    Kode 1 : <hr color="blue" position="relative" width="auto" />
    Line 2:

    Kode 2 : <hr color="black" position="relative" width="auto" />
    Line 3:

    Kode 3 : <hr color="yellow" position="relative" width="auto" />
    Line 4:

    Kode 4: <hr color="green" position="relative" width="auto" />
    Line 5:

    Kode 5: <hr color="purple" position="relative" width="auto" />
    Line 6 :

    Kode 6 : <hr color="orange" position="relative" width="auto" />
    Keterangan :
    *Kode berwarna merah adalah untuk mengatur posisi garis.
    *Width -->>untuk mengatur lebar garis (anda bisa menggantinya dengan angka )Misalnya :
                       
      Width="100px"

    Semoga ini bermanfaat bagi anda yang belum tahu.

    Cara Mengidentifikasi Kode Warna Html Suatu Gambar

    0 komentar

    Anda semua pasti suka memodifikasi blog anda supaya penuh warna bukan ?
    Nah tentunya kode warna html itu sangat banyak sekali jumlahnya dan rasanya sangat tidak mungkin untuk menghafalnya satu persatu.

    Banyak website ataupun blog yang sudah menyediakan kode warna html, namun terkadang kita tidak puas. Lalu bagaimanakah solusinya ?


    Anda bisa menggunakan sebuah tool yang ukurannya sangat kecil sekali yakni sekitar 148kb, jika anda tertarik anda bisa langsung untuh aplikasinya di bawah :

    Anda akan diarahkan ke Adf.li, kemudian anda tunggu 5 detik dan lihat di pojok kanan atas kemudian anda klik Skip Ad
    Cara pemakaiannya :

    1. Jalankan Tool html color picker yang sudah anda download, kemudian anda buka notepad (untuk mencatat kode warna yang diberikan tool nya)*Jika ingat dihafal juga tidak masalah..
    2. Anda arahkan mouse ke gambar atau objek apapun yang ingin anda ketahui kode html warnanya.
    3. Catat dengan notepad atau hafal pada kode yang paling atas pada Tool itu.

    Untuk lebih jelasnya silahkan simak gambar berikut :


    Kode yang diberi tanda panah itulah yang harus anda catat (ingat sebelumnya kamu kasih tanda '#' ), itulah kode html nya sesuai mouse yang kamu arahkan. Jadi contohnya : #E7F9D0

    Semoga dapat bermanfaat bagi anda.



    Cara Memperbaiki Tombol Reply Pada Blogger Yang Tidak Berfungsi

    0 komentar

    Halo blogger Indonesia, saya yakin pasti anda semua pernah mengalami hal serupa yang pernah saya alami, mengoptimalisasi tampilan blog sudah pasti sering dilakukan bukan ?

    Namun pasti anda merasa cemas dan sempat kesal apalagi salah satu fungsi yang lumayan penting untuk interaksi dengan pengunjung blog, yaitu tombol reply pada form komentar tidak berfungsi sesuai dengan harapan, nah kali ini saya punya sedikit pengalaman yang mungkin akan bermanfaat bagi kawan semua.

    Tanpa basa-basi lagi  :
    1. Anda Login ke akun blogger anda-->kemudian klik template-->Edit Html-->Jangan lupa centang pada Expand Template Widgets. (Sebelumnya anda unduh lengkap template anda terlebih dahulu,,Penting!!).
    2. Kemudian anda cari kode berikut :
    <b:includable id='threaded_comment_js' var='post'><br>   <script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/><br> <br>   <script type='text/javascript'><br>     (function() {<br>       var items = <data:post.commentJso/>;<br>       var msgs = <data:post.commentMsgs/>;<br>       var postId = '<data:post.id/>';<br>       var feed = '<data:post.commentFeed/>';<br>       var authorName = '<data:post.author/>';<br>       var authorUrl = '<data:post.authorUrl/>';<br>       var blogId = '<data:top.id/>';<br>       var baseUri = '<data:post.commentBase/>';<br> <br> // <![CDATA[<br>       feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';<br>       var cursor = null;<br>       if (items && items.length > 0) {<br>         cursor = parseInt(items[items.length - 1].timestamp) + 1;<br>       }<br> <br>       var bodyFromEntry = function(entry) {<br>         if (entry.gd$extendedProperty) {<br>           for (var k in entry.gd$extendedProperty) {<br>             if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {<br>               return '<span class="deleted-comment">' + entry.content.$t + '</span>';<br>             }<br>           }<br>         }<br>         return entry.content.$t;<br>       }<br> <br>       var parse = function(data) {<br>         cursor = null;<br>         var comments = [];<br>         if (data && data.feed && data.feed.entry) {<br>           for (var i = 0, entry; entry = data.feed.entry[i]; i++) {<br>             var comment = {};<br>             // comment ID, parsed out of the original id format<br>             var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);<br>             comment.id = id ? id[2] : null;<br>             comment.body = bodyFromEntry(entry);<br>             comment.timestamp = Date.parse(entry.published.$t) + '';<br>             if (entry.author && entry.author.constructor === Array) {<br>               var auth = entry.author[0];<br>               if (auth) {<br>                 comment.author = {<br>                   name: (auth.name ? auth.name.$t : undefined),<br>                   profileUrl: (auth.uri ? auth.uri.$t : undefined),<br>                   avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)<br>                 };<br>               }<br>             }<br>             if (entry.link) {<br>               if (entry.link[2]) {<br>                 comment.link = comment.permalink = entry.link[2].href;<br>               }<br>               if (entry.link[3]) {<br>                 var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);<br>                 if (pid && pid[1]) {<br>                   comment.parentId = pid[1];<br>                 }<br>               }<br>             }<br>             comment.deleteclass = 'item-control blog-admin';<br>             if (entry.gd$extendedProperty) {<br>               for (var k in entry.gd$extendedProperty) {<br>                 console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);<br>                 if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {<br>                   comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;<br>                 }<br>               }<br>             }<br>             comments.push(comment);<br>           }<br>         }<br>         return comments;<br>       };<br> <br>       var paginator = function(callback) {<br>         if (hasMore()) {<br>           var url = feed;<br>           if (cursor) {<br>             url += '&published-min=' + new Date(cursor).toISOString();<br>           }<br>           window.bloggercomments = function(data) {<br>             var parsed = parse(data);<br>             cursor = parsed.length < 50 ? null<br>                 : parseInt(parsed[parsed.length - 1].timestamp) + 1<br>             callback(parsed);<br>             window.bloggercomments = null;<br>           }<br>           url += '&callback=bloggercomments';<br>           var script = document.createElement('script');<br>           script.type = 'text/javascript';<br>           script.src = url;<br>           document.getElementsByTagName('head')[0].appendChild(script);<br>         }<br>       };<br>       var hasMore = function() {<br>         return !!cursor;<br>       };<br>       var getMeta = function(key, comment) {<br>         if ('iswriter' == key) {<br>           var matches = !!comment.author<br>               && comment.author.name == authorName<br>               && comment.author.profileUrl == authorUrl;<br>           return matches ? 'true' : '';<br>         } else if ('deletelink' == key) {<br>           return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;<br>         } else if ('deleteclass' == key) {<br>           return comment.deleteclass;<br>         }<br>         return '';<br>       };<br> <br>       var replybox = null;<br>       var replyUrlParts = null;<br>       var replyParent = undefined;<br> <br>       var onReply = function(commentId, domId) {<br>         if (replybox == null) {<br>           // lazily cache replybox, and adjust to suit this style:<br>           replybox = document.getElementById('comment-editor');<br>           if (replybox != null) {<br>             replybox.height = '250px';<br>             replybox.style.display = 'block';<br>             replyUrlParts = replybox.src.split('#');<br>           }<br>         }<br>         if (replybox && (commentId !== replyParent)) {<br>           document.getElementById(domId).insertBefore(replybox, null);<br>           replybox.src = replyUrlParts[0]<br>               + (commentId ? '&parentID=' + commentId : '')<br>               + '#' + replyUrlParts[1];<br>           replyParent = commentId;<br>         }<br>       };<br> <br>       var tok = 'comment-form_';<br>       var hash = window.location.hash || '';<br>       var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;<br> <br>       // Configure commenting API:<br>       var configJso = {<br>         'maxDepth': 2<br>       };<br>       var provider = {<br>         'id': postId,<br>         'data': items,<br>         'loadNext': paginator,<br>         'hasMore': hasMore,<br>         'getMeta': getMeta,<br>         'onReply': onReply,<br>         'rendered': true,<br>         'initReplyThread': startThread,<br>         'config': configJso,<br>         'messages': msgs<br>       };<br> <br>       var render = function() {<br>         if (window.goog && window.goog.comments) {<br>           var holder = document.getElementById('comment-holder');<br>           window.goog.comments.render(holder, provider);<br>         }<br>       };<br> <br>       // render now, or queue to render when library loads:<br>       if (window.goog && window.goog.comments) {<br>         render();<br>       } else {<br>         window.goog = window.goog || {};<br>         window.goog.comments = window.goog.comments || {};<br>         window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];<br>         window.goog.comments.loadQueue.push(render);<br>       }<br>     })();<br> // ]]><br>   </script><br> </b:includable>

    3. Jika anda sudah menemukannya, maka ganti kode di atas dengan kode berikut :


    <b:includable id='threaded_comment_js' var='post'><br /> <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/> <script type='text/javascript'> (function() { var items = <data:post.commentJso/>; var msgs = <data:post.commentMsgs/>; var config = <data:post.commentConfig/>; // <![CDATA[ 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) { 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 = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50'; 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 == config.authorName && comment.author.profileUrl == config.authorUrl; return matches ? 'true' : ''; } else if ('deletelink' == key) { return config.baseUri + '/delete-comment.g?blogID=' + config.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 hash = (window.location.hash || '#').substring(1); var startThread, targetComment; if (/^comment-form_/.test(hash)) { startThread = hash.substring('comment-form_'.length); } else if (/^c[0-9]+$/.test(hash)) { targetComment = hash.substring(1); } // Configure commenting API: var configJso = { 'maxDepth': config.maxThreadDepth }; var provider = { 'id': config.postId, 'data': items, 'loadNext': paginator, 'hasMore': hasMore, 'getMeta': getMeta, 'onReply': onReply, 'rendered': true, 'initComment': targetComment, '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><br /> </b:includable>


    4. Terakhir anda simpan template. Jika anda berhasil melakukannya sesuai prosedur, maka fungsi reply seharusnya sudah normal kembali.

    Catatan :
    Mungkin saja kode html pada no 1 tidak akan sama persis, yang paling penting cari saja yang mirip kodenya, yang harus anda perhatikan kode di atas di awali dengan <b:includable id='threaded_comment_js' var='post'> dan diakhiri dengan kode </b:includable>


    Modifikasi Text Area

    0 komentar


    Jika beberapa waktu lalu saya telah membahas mengenai text area standar, dan text area + highlight, kali ini saya akan membahas mengenai text area yang telah dimodifikasi sehingga tampilannya lebih menarik karena diberi warna dan bentuk yang bervariasi.

    Sebelumnya sudah tahukan fungsi text area?
    Sekedar mengingatkan, sesuai dengan namanya maka text area berfungsi untuk menampilkan text, text area sering disgunakan untuk memberikan tutorial yang berisi kode html, karena kode html yang berada dalam text area akan ditampilkan apa adanya.

    Silahkan simak dan pilih text area yang anda sukai di bawah ini :

    Text area di bawah sudah berikut kode untuk membuatnya.
    Contoh 1  :

    Contoh 2 :

    Contoh 3 :

    Contoh 4 :

    Contoh 5 :


    Nah demikianlah contoh text area yang dapat saya berikan, untuk tampilan yang lebih keren lagi, silahkan keluarkan kreatifitas anda dengan berimprovisasi dari kode yang sudah saya berikan di atas.

    Semoga dapat bermanfaat, salam blogger.

    Cara Membuat Blog Menjadi Transparan

    10 komentar

    Banyak sekali orang yang awam dengan blog, dan mengikuti berbagai macam cara untuk memperindah blognya, diantaranya adalah ingin membuat blognya menjadi transparan, namun malah gagal.

    Berikut ini akan saya share cara membuat blog transparan dan cara ini pasti semua orang baik itu yang masih newbie dalam dunia blog pasti bisa mempraktikannya. Tanpa basa-basi lagi :

    1. Anda login ke akun blogger anda -->klik Template (tampilan blogger yang baru)-->klik Edit Html, jangan lupa centang Expand Template Widgets.

    2. Cari kode #outer-wrapper{ , untuk mempermudah pencarian tekan Ctrl+F.

    3. Copy paste kode di bawah setelah kode #outer-wrapper{ ,

    biar tidak pusing lihat contoh penempatannya :
    Kodenya :
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:0.8;
    4. Selesai, coba sekarang anda lihat blog anda.

    Keterangan :
    • perhatikan angka 0.8 pada kode di atas, anda bisa menggantinya sesuai tingkat ketransparanan yang anda inginkan. Semakin kecil angkanya maka akan semakin transparan.

    Cara Membuat Artikel Terkait Di Bawah Postingan

    0 komentar


     ___Contoh Menu Artikel Terkait___
    Membuat blog lebih mudah digunakan oleh pengunjung adalah sesuatu yang harus dilakukan karena demi kenyamanan para pengunjung setiap blog, dimulai dari cara pembuatan menu drop down, dan lain sebagainya.
    Kali ini saya akan berbagi tentang cara pembuatan "Artikel Terkait/ Related Post" di bawah setiap posting blog anda. Sebagai contohnya anda bisa melihat pada bagian bawah artikel ini..

    Tujuannya sudah saya jelaaskan di atas, yakni untuk membuat pengunjung semakin nyaman karena semakin mudah untuk mengakses artikel terkait yang ada di blog kita. Cara kerja yang akan di tampilkan pada artikel terkait itu sesuai label posting yang anda buat, jika anda membuat posting dengan label Tips dan Trik maka yang ditampilkan adalah yang ber label itu. Begitu Juga dengan Label yang lain yang telah anda buat.

    Tanpa basa-basi lagi, untuk menerapkannya yaitu :

    1. Seperti biasa anda masuk ke >> Edit Html, jangan lupa centang kotak kecil bertuliskan Expand Template Widget.

    2. Lalu anda cari kode ini <data:post.body/> ,untuk memudahkan pencarian anda tekan Ctrl+F.
        Note : Jika blog anda telah dipasang Read More otomatis, maka cari kode serupa yang ke-2.

    3. Copy Paste kode di bawah ini, dan letakkan setelah kode <data:post.body/> 



    4. Simpan Template Anda, jika anda sudah melakukannya dengan benar, maka seharusnya apa yang anda inginkan sudah berhasil.

    Terimakasih, salam blogger.

    Cara Membuat Read More Secara Otomatis Pada Blog

    0 komentar


    Read More adalah fasilitas yang digunakan pada blog untuk melanjutkan pembacaan artikel, tentunya ini sangat berguna karena dengan adanya read more ini blog tampil lebih rapi dan enak dipandang. pada posting kali ini saya akan share cara pembuatan read more otomatis, kegunaan dari pada readmore otomatis yakni membuat readmore secara otomatis tanpa harus kita menulis <!--more--> pada saat menulis.

    Manfaat dari pada readmore otomatis untuk SEO yakni sangat berperan penting, yg akan membuat suatu blog menjadi ringan loading saat di akses oleh pengunjung. Ini termasuk salah satu SEO template. Untuk membuatnya tak usah panjang lebar, langsung menuju TKP.

    Untuk cara membuatnya mudah saja :
    1. login ke dashboard blogger.
    2. pilih Rancangan »» edit HTML
    3. Tandai kotak kecil pada tulisan Expand Template Widget.
    4. Tempatkan script berikut dibawah kode

    5. Selanjutnya cari kode <data:post.body/> atau kode <p><data:post.body/></p> sama saja.
    6. Ganti kode tersebut dengan kode berikut »
    7. Terakhir Simpan Template.





    Note : Saya sarankan anda untuk membackup (unduh template)  terlebih dahulu template anda untuk menjaga apabila terjadi kesalahan.

    Cara Mengatur Jumlah Posting Yang Ingin Ditampilkan Pada Saat Klik Label Dan Menampilkan Navigasi Halamannya

    1 komentar


    Halo kawan, jika sebelumnya anda mengikuti tutorial saya yaitu mengenai cara membuat page/halaman di http://sipkom.blogspot.com/2012/04/cara-membuat-page-pada-blog.html, maka biasanya ketika anda mengklik salah satu label posting maka tidak akan tampil navigasi page nya, dan seluruh posting yang ada pada label itu akan tampil semua, meski demikian cara yang akan saya jelaskan di bawah juga berlaku bagi yang tidak membuat navigasi dari tutorial saya, serta cara ini juga sekaligus untuk membatasi jumlah posting yang ingin ditampilkan pada setiap label, nah untuk mengatasinya,,Silahkan simak :
    1. Masuk Ke Edit Html, kemudian anda centang kotak Expand Template Widget, kemudian cari kode ini :
    Lihat:

    expr:href='data:label.url'
    2. kemudian tambahkan kode di bawah ini setelahnya :
    Lihat:

    + &quot;?&amp;max-results=5&quot;
    3. Maka tampilannya menjadi :
    Lihat:

    expr:href='data:label.url + &quot;?&amp;max-results=5&quot;


    4. Karena kode expr:href='data:label.url , bukan hanya ada satu, maka cari lagi yang laiinya, dan tambahkan kode yang sama seperti di point 2.

    Selamat mencoba dan semoga berhasil, jika ada yang tidak dipahami, silahkan ditanyakan.

    Cara Posting Kode html di Blog

    4 komentar


    Assalamualaikum.Wr.Wb
    Sebenarnya banyak cara untuk menampilkan kode html di blog, tujuannya yaitu ingin memberikan tutorial kepada pembaca, agar kode html yang kita posting tidak diterjemahkan, tapi ditampilkan apa adanya.

    Sebagai contoh anda ingin memposting kode seperti di bawah ini :

    Tentu saja untuk menampilkan kode html diatas tidak langsung copy paste html nya, tetapi ada caranya dan sangat mudah sekali, karena jika anda langsung copast maka html nya akan di terjemahkan. Contohnya kode di atas adalah kode text area, akan tampil text area, bukan kode html nya.

    Adapun langkah-langkahnya yaitu :





    1. Anda masuk ke sini http://www.blogcrowds.com/resources/parse_html.php
    2. Lalu anda copy paste kode html yang ingin di posting, di halaman tadi, lalu anda klik parse.
    3. Setelah selesai, akan keluar hasilnya, dan itulah kode html yang harus anda posting supaya html nya tampil apa adanya.

    Cara Membuat Page Pada Blog

    0 komentar

    Selamat datang kembali di blog saya, kali ini saya akan memberikan tutorial mengenai pemberian page pada blog, untuk lebih jelasnya silahkan lihat contoh berikut :
    Contoh Page Pada Blog:

    Photobucket
    Tujuan daripada pembuatan page pada blog adalah untuk mempermudah akses posting kita oleh para pengunjung, dan juga memperindah tampilan blog kita sehingga memanjakan para pengunjung.

    Langkah-langkahnya yaitu :
    1. Masuk ke setelan, kemudian edit html, kemudian cari kode ]]></b:skin>
    2. Selanjutnya Copy Paste Kode html berikut :
    3. Letakan diatas kode yang tadi. Lalu simpan template.
    4. Kemudian anda cari kode  </body> , setelah ketemu anda copy paste lagi kode di bawah ini dan letakkan tepat di atasnya. Kemudian simpan template. Selesai.
    Semoga ini dapat bermanfaat bagi anda semua dan selamat mencoba.
    **Saya sarankan anda memback up template anda terlebih dahulu.


    Cara Membuat Text Area + Highlight

    0 komentar



    Saya akan share cara membuat text area yang paling sering digunakan, silahkan anda pilih saja mana yang anda sukai :

    A. Text Area Standar

    Silahkan anda copy paste kode di atas pada postingan yang ingin anda beri text area.


    Atau ini :

    B. Text Area + Highlight
    Silahkan anda coopy paste jika menginginkannya, pilihan ada di tangan anda.

    Lalu apa gunanya tombol highlight itu ?

    Gunanya adalah untuk mempermudah pengunjung ketika akan mengkopi paste tulisan atau apapun yang berada dalam text area tersebut.

    Selamat mencoba dan semoga tulisan saya ini bermanfaat bagi anda semua.

    Cara Membuat Spoiler Sederhana

    0 komentar

    Cara membuat Spoiler
    Sesuai dengan judulnya, pasti sobat semua sudah sering lihat kan bagaimana spoiler bekerja, jika belum lihat contoh di bawah ini :

    Open:

    saya ari ramadhan, anda bisa menyisipkan gambar di sini


    Tujuan daripada pembuatan spoiler ini yakni untuk menghemat tempat pada posting, dan juga memberi kesan bagus, serta jika anda menyisipkan gambar tidak akan berat sehingga mempercepat loading blog.

    Pasti anda tertarik kan untuk mencobanya ?

    Caranya Copy paste code di bawah ini :

    <div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
    <b>Nama Spoiler</b>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 100px;" type="button" value="Open" /></div>
    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 3px;">
    <div style="display: none;">

    Alamat URL Gambar atau tulisan yang akan ditambahkan

    </div>
    </div>
    </div>


    Selanjutnya anda ganti tulisan berwarna merah di atas dengan tulisan yang anda kehendaki, ataupun dengan URL gambar jika anda ingin membuat spoiler yang berisi gambar.
    Semoga bermanfaat..





    Pengenalan HTML

    0 komentar


         





    Para blogger pasti sudah tidak asing lagi jika mendengar html?
    Hyper Text Markup Language atau sering disapa denagn HTML.
    Apa itu HTMl ?
    HTML merupakan kumpulan kode-kode yang ditampilkan dalam format Tag untuk ditampilkan dalam halaman web.
    Bagaimana cara membuatnya ?
    Untuk dapat membuat suatu dokumen Html prinsipnya sma saja saat kita membuat file ms.word, namun pembuatan html biasanya menggunakan editor notepad atau Ms. FrontPage.
    1. Elemen-elemen html
    Untuk lebih mengenel dan membuat file HTMl, langkah pertama adalah kita mengetahui elemen yang membangun dokumen html. Di dalam penggunaan Tag html tidak membedakan penggunaan huruf besar ataupun kecil, misalnya tag sama artinya dengan tag .
    a. Head
    Tag head memiliki fungsi untuk mendesripsikan header atau keterangan yang didalamnya memiliki elemen-elemen diantaranya sebagai berikut :
    Tag ...., digunakan untuk memberi judul dari suatu homepage.
    Tag ...., lokasi URL lengkap dari dokumen ini.
    Tag ...., link (taut) dokumen ini dan dokumen lain
    Tag ...., informasi tentang dokumen ini sendiri.
    b. Body
    Tag Body berfungsi menyediakan tempat untuk mengisi teks yang akan ditampilkan. Beberapa atribut yang menyertai tag body diantaranya sebagai berikut :
    -Background, digunakan untuk memuat background image
    -Bgcolor, digunakan untuk mnentukan warna latar belakang.
    -Bgproperties,  digunakan untuk menentukan nilai property background
    -Leftmargin, digunakan untuk menentukan batas kiri halaman dalam satuan pixel.
    -Topmargin,  digunakan untuk menentukan batas atas halaman dalam satuan pixel.
    -Text, digunakan untuk menentukan warna text
    -Link, digunakan untuk mennentukan warna link yang belu, dikunjungi
    -Alink, digunakan untuk menentukan warna link aktif
    -Vlink, digunakan untuk menentukan warna link yang sudah dikunjungi.