Pages

Showing posts with label Desain Blogger. Show all posts
Showing posts with label Desain Blogger. Show all posts

Wednesday, July 10, 2013

Membuat Related Post Thumbnail Responsive Ringan!

Tutorial cara membuat widget artikel terkait di blog ?, widget tersebut berfungsi untuk menampilakan artikel yang berkaitan dengan kategori atau artikel yang kita baca dan salah satu faktor SEO one page blogspot. Bila menggunakan template blog yang responsive tentu harus menggunakan widget yang responsive pula demi kenyamanan pengunjung saat di blog anda, sebetulnya responsive saja tidak cukup jika tidak disertai kata "ringan" pada widget yang digunakan pada blog. Banyak keuntungan jika menggunakan widget yang ringan tetapi tetap keren dan profesional kelihatannya.

Related post yang sekarang dishare sudah saya coba baik itu lewat komputer atau via mobile, dan alhasil memuaskan untuk template blog ini :D.  Widget artikel terkait ini sudah saya coba di browser mozilla, google chrome, internet explorer, avant browser, dan tentunya opera dan memang responsive.

cara membuat related post thumbnail responsive blogspot

Berikut cara memasang Widget Related Post Thumbnail Responsive!

  • Masuk akun blogger, selanjutnya pada dashboard pilih menu » Template » Edit HTML
  • Copy dan paste kode dibawah ini, Tepat dibawah ]]></b:skin>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/* css related posts */
#related_posts { background-color:#FFF; margin:10px 0 0 0; padding:10px; -moz-box-shadow:inset 0 0 1px #000000; -webkit-box-shadow:inset 0 1px 1px #000000; box-shadow:inset 0 0 1px #000000 }
#related_posts h4 { color:#fff; font-size:15px; margin:-10px -10px 10px; padding:5px 3px; text-align:center; font-weight:bold; -moz-text-shadow:2px 0 0 #333; -webkit-text-shadow:2px 0 0 #333; text-shadow:2px 0 0 #333; position:relative; background-color:#888 }
#related_posts ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#related_posts ul { margin-top:10px }
#related_posts li { float:left; width:100%; margin:0 0 5px}
#related_posts .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }
#related_posts strong { font-weight:normal; font-size:15px; line-height:1.1em }
#related_posts p { margin:2px 0 0; font-size:12px }
.loadingxx { width:100%; min-height:150px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nRV8H5S9ONqGMUkUx10Kt_LRSEm84_s3hZrD7JKFEwgR8DCY6gVfoaRk8vyU-DjvIMhgQXq27g-6jPXetjEPZneJBGlnzfdoHZDPycbxoLN-dPgB1sBhlIVuNr9KvVeasm_bROjib78/h92/loading-dip.gif) no-repeat center; display:block; text-indent:-9999px }
.kotak-dalem { background-color:transparent; padding:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; margin-bottom:0 }</style></b:if>

membuat related post responsive blogspot

  • Selanjutnya copy kode dibawah ini dan paste tepat dibawah <data:post.body/>
    jika terdapat kode <data:post.body/> lebih dari dua maka cari yang paling bawah atau kode yang kedua. Jika pada template ini ada 4 <data:post.body/> dan saya pasang di paling akhir yaitu ke-4.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'/>
<script type='text/javascript'>
//<![CDATA[
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:100,relatedTitle:"Related Posts<data:post.title/>",readMoretext:"Read more",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7FJBTVS0NzApQfNkYFLNFL4Wms2Xk3_9irxLpMwD7QcQVW6He8hTAkHkI1NC6zMRJgres2ft0AKOa6pYFojnAyZApyW8FM7ehW3e1DUtScESS2uQXavAZzJ5UdXc383bOTb_KDZsY8dQ/h120/20Blogger.jpg",rlt_thumb:55,recentTitle:"Recent Posts",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="related_posts"></div>');f.containerSelector="#related_posts"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#related-posts-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#related_posts"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related_posts"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="related-posts-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#related_posts",
maxPosts: 5,
loadingClass: "loadingxx",
rlt_thumb: 50
});
//]]>
</script>
</b:if>
cara membuat widget related post responsive seo friendnly blogger

Warna orange merupakan background related post, sedangkan warna hijau adalah jumlah post yang ditampilkan, silahkan ganti sesuai keingingan anda.
Sampai disini sudah jadi widget artikel terkaitnya ?, jika belum dibawah ini video tutorial membuat widget related post :D

Video Tutorial Memasang Dan Membuat Related Post Responsive Blogspot



Sekian semoga tutorial cara membuat widget related post responsive ini bermanfaat :D

Friday, March 29, 2013

Cara Membuat Ratings Bintang Votes Blogger

Membuat sebuah widget seo menarik di blog anda yaitu rating bintang  di dalam postingan blog tepatnya dibawah judul postingan :D, yang nantinya widget tersebut akan memberikan sebuah penilaian yang diberikan oleh pengunjung blog anda terhadap artikel yang sedang dia baca, baik itu dalam jumlah vote dan view :D. Semakin banyak dan besarnya vote dan view terhadap artikel blog anda maka hal tersebut akan menjadi sebuah penilaian bagi pengunjung blog anda bahwa artikel yang anda buat memang bermanfaat :)


Dalam membuat widget ini kita akan memanfaatkan sebuah jasa dari web yang menyediakan fitur rating bintang ini. Selain widgetnya ringan untuk dipasang di blog anda, widget tersebut juga akan menambah fitur yang ada dan mempercantik blog anda dan terlihat lebih profesional :D tentunya, oke langsung ke proses pemasangan widget rating bintang ini ke blog anda :D.

Tutorial Membuat Rating Bintang Votes Dan Views Dalam Postingan Blog

  1. Pertama anda kunjungi http://www.graddit.com/ratings-widget
  2. Selanjutnya klik tab menu Rating Widgets, dan muncul tampilan seperti gambar dibawah ini
  3. Cara Membuat Ratings Bintang Votes Blogger
    • Selanjutnya masuk Dashboard blog anda kemudian pilih Template dan klik Edit HTML. Setelah itu copy kode yang ditunjukan No.2 pada gambar, dan paste sesudah kode <head> atau sebelum </head>, tekan Ctrl+F untuk mempercepat pencarian.
      <head><link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
      </head>
    • Kemudian pilih Blogger seperti yang ditunjukan No.3 pada gambar diatas.
    • Disamping kiri yang ditunjukan No.4 itu desain bentuk rating yang nantinya akan digunakan di blog anda, pilih salah satu yang sesuai dengan desain blog anda :D.
    • Selanjutnya copy kode yang ditunjukan seperti No. 5 pada gambar diatas, seperti dibawah ini :

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&quot;&#9734;&quot;,&quot;&#9733;&quot;]]}</div>
      <div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
      <script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;views=yes&amp;average=yes&amp;votes=yes&quot;'></script></b:if>
    • Kemudian paste kode script rating bintang sesudah kode  <div class='post-body entry-content'>,  jika terdapat lebih dari satu maka pilihlah yang pertama, tekan Ctrl+F untuk mempercepat pencarian dan hasilnya seperti dibawah ini :
         <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&quot;&#9734;&quot;,&quot;&#9733;&quot;]]}</div>
      <div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
      <script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;views=yes&amp;average=yes&amp;votes=yes&quot;'></script></b:if><br/><br/>
              <data:post.body/>
              <div style='clear: both;'/> <!-- clear for photos floats -->

    • Setelah itu simpan dan lihat hasilnya :D
    Cara Membuat Ratings Bintang Votes Blogger
    Gimana udah jadi belum Cara Membuat Ratings Bintang Votes Blogger ?, klo belum dibawah ini tutorialnya lagi dalam bentuk video :D

    Video Tutorial Cara Membuat Ratings Bintang Votes Blogger


    Sunday, February 10, 2013

    Cara membuat redirect url pada blog web

    Pelempar link atau disebut redirect berfungsi untuk mengalihkan atau memindahkan url awal yang diklik oleh pengunjung ke url yang telah ditentukan oleh anda. Sebagai contoh begini, misalkan anda membuat sebuah blog dan telah mendapatkan banyak pengunjung perharinya, terus anda membuat lagi blog namun ingin fokus ke blog tersebut, nah..dari situ kita dapat memindahkan pengunjung blog pertama anda , ke blog yang kedua secara otomatis agar menambah banyak pengunjung ke blog yang kedua.

       Misalkan blog pertama anda membuat sebuah postingan yang berjudul " Trik & Tips seo" dan telah terindex search engine, ketika pengunjung menemukan postingan tersebut di search engine dan kemudian mengkliknya maka pengunjung tersebut akan secara otomatis masuk ke blog kedua anda, gimana sudah jelas ? :D hehe. Trik ini dapat mendatangkan banyak pengunjung ? yaa..bisa saja sob tinggal semua blog yang anda punya dilepar urlnya ke satu blog yang anda fokuskan, asalkan blog lama anda sudah banyak mendapat banyak pengunjung :D. Apa lagi untuk blog yang baru dibuat sangat membantu dalam segi seo.
     
    Ok untuk gambaran singkat tentang redirect url mungkin seperti itu, jika kurang jelas simak baik-baik gan cara membuatnya dibawah ini :
    • Pertama anda login ke blogger.com
    • Selanjutnya pada dashboard blog pilih Template ===> Edit HTML
      Cara membuat redirect url pada blog web Part 1
    • Kemudian centang kotak putih yang bertuliskan Expand Template Widget. Setelah itu tekan Ctrl+F pada browser anda kemudian cari kode </head>, setelah ketemu pastekan script dibawah ini :
    <script type="text/javascript">window.location = "http://ramdani-blog.blogspot.com/2013/01/site-map.html"</script>
    Cara membuat redirect ulr pada blog web part 2
    Ganti http://ramdani-blog.blogspot.com/2013/01/site-map.html dengan url yang sobat inginkan :D
    Jika script di atas tidak mendukung template anda, silahkan pilih script dibawah ini yang masih mempunyai fungsi yang sama :
    <script language="javascript" type="text/javascript">window.location.href="http://URL Blog atau web anda?backurl="+window.location.href;</script>
    Atau
    <script language="javascript">window.navigate("http://URL Blog atau web anda");</script>
    Atau
    <script language="JavaScript">self.location="http://URL Blog atau web anda";</script>
    Atau
    <script language="javascript">alert("Access Violation");top.location="http://URL Blog atau web anda";</script>
    Jika anda Melakukan redirect url dengan php; letakkan kode ini dibagian paling atas dari script php&lt;?php header( 'Location:http://URL Blog atau web anda' ) ;?&gt;

    Jika kurang jelas dengan tutorial diatas, silahkan simak tutorialnya dalam bentuk video dibawah ini :

    Thursday, January 24, 2013

    Cara merekam aktivitas desktop dengan software HyperCam

    Cara merekam aktivitas desktop dengan software HyperCam-Bagi yang ingin dan suka membuat tutorial baik itu tutorial blog maupun tutorial tentang trik komputer beralihlah yang tadi biasanya menggunakan screenshot berupa gambar pada postingan blog sekarang anda dapat menggunakan sebuah software yaitu HyperCam yang dapat membantu anda membuat tutorial berupa video hehe :D, apa lagi dilengkapi degan crack atau serial number jadi agan gk perlu bingung-bingung lagi jikalau masa gratisnya abis hehe.. :D
    HyperCam yang saya share sekarang itu versi 2 gan, dan lagi software yang satu ini menghasilkan video dengan hasil akhir dengan format avi.Ok simak baik-baik gan apa lagi cracknya hehe :D


    Download software HyperCam 2 full crack dan serial number

    Download

    Nah...dibawah ini adalah video bagaimana cara mengaktifkan serial number HyperCam jika masa gratisnya habis :D


    Dan dibawah ini adalah crack yang dapat anda gunakan nantinya :D

    PD:{HyperCam 2}
    LO:{Gideon Ariel}
    SN:{e5-9368837}
    NC:{1}
    LD:{2005.02.09}
    KI{HPHS-0}
    FS:{1}
    KD:{101
    048 099 002 001 003 128 020 088
    020 218 217 142 101 237 160 167
    138 156 046 095 153 097 206 124
    115 001 129 048 009 006 005 043
    014 003 002 026 005 000 048 011
    006 007 042 134 072 206 056 004
    001 005 000 004 048 048 046 002
    021 000 172 110 017 081 132 054
    215 219 198 188 239 243 049 222
    194 099 112 040 019 229 002 021
    000 208 029 143 156 085 103 033
    103 116 245 059 156 102 174 108
    221 244 245 089 246
    EK:}

    OR

    PD:{HyperCam 2}
    LO:{Trento Castricone}
    SN:{e5-6160309}
    NC:{1}
    LD:{2004.06.13}
    KI:{HPHS-0}
    FS:{0}
    KD:{100
    048 098 002 001 003 128 020 088
    020 218 217 142 101 237 160 167
    138 156 046 095 153 097 206 124
    115 001 129 048 009 006 005 043
    014 003 002 026 005 000 048 011
    006 007 042 134 072 206 056 004
    001 005 000 004 047 048 045 002
    021 000 153 051 134 092 118 170
    206 084 238 198 104 151 250 220
    177 054 124 224 130 120 002 020
    076 011 125 220 100 055 144 136
    223 124 210 093 005 200 148 105
    159 241 027 199
    EK:}

    Tuesday, January 15, 2013

    Cara Merubah Tulisan Jumlah Komentar di Blogspot

    Template baru ? atau template lama ?, hehe cuma nanya doang gan, ok apa agan pernah lihat kalimat "0 Comments" atau 0 Komentar ?, nah kalimat tersebut menandakan berabapa banyak jumlah komentar yang telah ada pada post terkait, tapi kurang menarik gan jika tulisan yang tertera hanya 0 Comments, oke dengan itu mari kita ubah dengan kalimat & tulisan yang anda inginkan :D



    Cara Merubah Tulisan Jumlah Komentar di Blogspot dengan kalimat yang anda inginkan

    • Pastikan anda login di blogger.com
    • Sebelumnya download dulu template blog anda, agar tejadi kesalah dalam pengeditan dapat direstore kembali, untuk download Pilih "Cadangkan/Pulihkan" kemudian  Unduh Template Lengkap
    • Pilih Template, dan Edit HTML, Centang kotak Expand Template Widget
    • Cara Merubah Tulisan Jumlah Komentar di Blogspot

    • Tekan CTL+F untuk mempercepat pencarian kode, kemudian cari kode yang mirip dibawah ini : 
     <h4>
          <b:if cond='data:post.numComments == 1'>
            1 <data:commentLabel/>:
          <b:else/
    <data:post.numComments/> <data:commentLabelPlural/>:      </b:if>
        </h4>
    • Perhatikan struktur kode diatas, terkadang ada 2 kode lebih yang sama, jika ada 2 struktur kode yang sama anda cukup menganti kode yang berwarna merah semua, Ganti kode yang berwarna merah diatas dengan : 
        Ada <data:post.numComments/> Komentar Untuk &quot;<b><data:post.title/></b>&quot;

    • Sehingga menjadi seperti dibawah ini :

     <h4>
          <b:if cond='data:post.numComments == 1'>
            1 <data:commentLabel/>:
          <b:else/
        Ada <data:post.numComments/> Komentar Untuk &quot;<b><data:post.title/></b>&quot;      </b:if>
        </h4>