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

Saturday, 13 August 2016

Knugrha

Tutorial Membuat Artikel Terbaru di Blog

By     No comments:
Tutorial Membuat Artikel Terbaru di Blog - Kalian pasti pernah dengar ataupun melihat Recent Post. Recent post atau artikel terbaru  adalah script yang dipasang di blog untuk menampilkan secara otomatis artikel yang baru saja diupdate di blog. Fungsi dari widget ini adalah untuk menyempurnakan navigasi blog agar pengunjung bisa lebih mudah bereksplorasi di blog. Saya mengambil contoh dari blog saya saja. 


Cara Membuat Recent Post Tidak Bergambar Di blog

  1. Masuk ke blogger dan silahan pilih TATA LETAK, TAMBAH GADGET, pilih HTML/Java Script ,  
  2. Silahkan copy kode di bawah ini dan pastekan di dalam kolom Javascriptnya 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><strong></strong>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:215px;
}
#spylist ul{
width:99%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:99%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:left;
height:29px;
overflow: hidden;
background:#f4f4f4 url() repeat-x;
border:1px solid #ccc;
}
#spylist li a {
text-decoration:none;
color:#250a99;
width:99%;
font-size:11px;
height:7px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
.spydate{
overflow:hidden;
font-size:5px;
color:#4a0616;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Neucha;
}
.spycomment{
overflow:hidden;
font-family:Arial;
font-size:10px;
color:#d10100;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
showRandomImg = false;
boxwidth = 200;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth =0 ;
thumbheight = 0;
fntsize = 8;
acolor = "#d10100";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 6;
home_page = "http://www.mastahbloging.blogspot.com/";
limitspy=7
intervalspy=8000
</script>
<div id="spylist">
<script src='https://sohibsanam.googlecode.com/svn/sohibsanam%20file' type='text/javascript'></script>
</div>
  1. Selanjutnya Silahkan ganti kode ang berwarna merah dengan kode sesuai blog milik sobat sendiri Dan Simpan 
Demikian Artikel Tentang Recent Post. Semoga Bermanfaat
Read More
Knugrha

Tutorial Membuat Artikel Terkait di Blog

By     No comments:
Cara Membuat Artikel Terkait - Kalian pasti sudah tau tentang Related Post atau Artikel Terkait Related Post adalah link yang berisi Post yang berkaitan dengan artikel yang sedah dibaca, dengan kata lain related post ini di di buat agar pembaca blog lebih betah untuk tetap berada di blog sobat. Nah saya akan memberikan Tutorial cara membuatnya Langsung saja dicoba.



Cara Memasang Artikel  Simple Di Bawah Postingan Blog

  1. Masuk ke blogger sobat 
  2. Pilih Template dan klik Edit Template
  3. Silahkan cari kode </head> disana , setelah ketemu dengan kode itu silahkan copy kode warna biru di bawah ini dan pastekan di atas kode </head>  tadi, jangan lupa untuk megganti angka 500px dengan angka sesuai lebar template milik sobat.         


     <style> #related-posts { float : left; width : 500px; margin-top:20px; margin-left : 0px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mvFfOPjnDzU9YigscoCOQsAc0SHQqTDe51XYT4mBbbja3SJtNAq4Xns4x8-6LiWC9dm33FaJ3ACzbIE0baT0sTxKxCSYysYLUpkz0VR9tKTpcyGw5NB8ICDxrTb0Q7PVh_vu4YZxR0I/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://my-sanah-project.googlecode.com/svn/branches-satu' type='text/javascript'/>
  4. Kemudian yang terakhir adalah cari kode <data:post.body/>  dan silahkan copy dan patekan kode di warna biru bawah ini tepat di bawah kode <data:post.body/> tadi, biasanya setiap template mempunyai kode <data:post.body/> lebih dari dua sobat bisa mencobanya mulai dari yang paling bawah atau yang terakhir.              
  5. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
      <font face='Arial' size='3'><b><h3 style='font-size:13px'>    Artikel Terkait Selain <data:post.title/></h3> : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=    10&quot;' type='text/javascript'/></b:if></b:loop> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>
                                                                                                      
    6. Perhatikan kode yang berwarna hitam di atas itu adalah kode yag bisa sobat ganti sendiri sesuai dengan template milik sobat misalkan kode  FFFFF adalah warna huruf sedangkan angka 10 adalah jumlah. sedangkan kata Artikel Terkait selain itu bisa sobat rubah sesuai dengan kata yang menurut sobat lbih pas di hati.

  6. Setelah Selesai simpan Template sobat. 
Semoga Bermanfaat
Read More
Knugrha

Cara Memasang Widget Sharing

By     No comments:
Cara Memasang Widget Sharing - Widget Sharing cukup bagus untuk mempercantik Blog, Dengan memasang widget sharing, maka postingan atau artikel sobat akan cepat tersebar dan otomatis blog sobat akan cepat terkenal di situs-situs social bookmark yang notabennya memang tempat berkumpulnya para blogger di seluruh di dunia. Tapi dengan catatan isi konten menarik, dan sobat wajib mendaftar di berbagai situs social bookmark agar sobat bisa langsung sharing tanpa menunggu pengunjung blog yang mengklik widget sharing nya.


Baiklah mari kita lanjutkan !

1) Silahkan login ke blogger.
2) Kemudian klik tab Edit HTML.
3) Klik Expand Template Widget.
4) Copy kode di bawah ini setelah kode ]]></b:skin> 

    <style type='text/css'>
    div.sexy-bookmarks { height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat left bottom;position:relative; width:540px }
    div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat right bottom; position:absolute; right:-17px }
    div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }
    div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }
    div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}
    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarI2MridI/AAAAAAAAE4U/Qspdg7GUj5g/sexy_thumb%5B3%5D.png) no-repeat !important }
    .sexy-furl { background-position:-300px top !important }
    .sexy-furl:hover { background-position:-300px bottom !important }
    .sexy-digg { background-position:-500px top !important }
    .sexy-digg:hover { background-position:-500px bottom !important }
    .sexy-reddit { background-position:-100px top !important }
    .sexy-reddit:hover { background-position:-100px bottom !important }
    .sexy-stumble { background-position:-50px top !important }
    .sexy-stumble:hover { background-position:-50px bottom !important }
    .sexy-delicious { background-position:left top !important }
    .sexy-delicious:hover { background-position:left bottom !important }
    .sexy-yahoo { background-position:-650px top !important }
    .sexy-yahoo:hover { background-position:-650px bottom !important }
    .sexy-blinklist { background-position:-600px top !important }
    .sexy-blinklist:hover { background-position:-600px bottom !important }
    .sexy-technorati { background-position:-700px top !important }
    .sexy-technorati:hover { background-position:-700px bottom !important }
    .sexy-myspace { background-position:-200px top !important }
    .sexy-myspace:hover { background-position:-200px bottom !important }
    .sexy-twitter { background-position:-350px top !important }
    .sexy-twitter:hover { background-position:-350px bottom !important }
    .sexy-facebook { background-position:-450px top !important }
    .sexy-facebook:hover { background-position:-450px bottom !important }
    .sexy-mixx { background-position:-250px top !important }
    .sexy-mixx:hover { background-position:-250px bottom !important }
    .sexy-script-style { background-position:-400px top !important }
    .sexy-script-style:hover { background-position:-400px bottom !important }
    .sexy-designfloat { background-position:-550px top !important }
    .sexy-designfloat:hover { background-position:-550px bottom !important }
    .sexy-syndicate { background-position:-150px top !important }
    .sexy-syndicate:hover { background-position:-150px bottom !important }
    .sexy-email { background-position:-753px top !important }
    .sexy-email:hover { background-position:-753px bottom !important }
    </style>


    5) Lalu cari kode <data:post.body/>
    Jika sobat sudah menggunakan read more, maka akan terdapat 2 kode <data:post.body/>. 6)Letakkan kode dibawah ini setelah kode <data:post.body/> yang pertama

      <div class='sexy-bookmarks'>
      <ul class='socials'>
      <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/      miscah' title='Subscribe to RSS'/></li>
      <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
      </ul>
      <span class='sexy-rightside'/></div>


      Kemudian Simpan Template Semoga Bermanfaat.
      PeringatanGanti tulisan yang berwarna merah dengan ID feedburner sobat, jika belum punya sobat bisa daftarkan blog sobat langsung di feedburner.

      Read More
      Knugrha

      Widget Yang Dapat Mempengaruhi SEO

      By     No comments:
      Widget Yang Dapat Mempengaruhi SEO - Sehabis baru membuat blog di google biasanya yang kepikiran adalah menambah widget, Widget itu selain bisa berfungsi menambah tampilan blog jadi lebih cantik dan keren Widget bisa saja menambah poin SEO namun juga malah mengurangi nilai SEO itu sendiri, sharing pengalaman dari saya rangkum dari berbagai blogger-blogger lain yang akhirnya saya mencoba membuat artikel tentang cara membuat widget ini   Dari Masing-masing widget ada manfaat dan kelebihannya. tutorial ini hanya sekedar pengalaman pribadi dan beberapa blogger lain yang mungkin punya pendapat yang sama, saya akan mencoba menjelaskan nya dengan logis  agar sobat juga tidak menelan artikel ini mentah-mentah sobat bisa menerawang lebih jauh alasan masing-masing widget itu kenapa widget itu penting.. setelah itu baru sobat bisa menyimpulkan. 



      Daftar Nama Widget Yang Penting dan berpengaruh Untuk SEO  

      1. Popular Post atau juga Artikel terpopuler (artikel yang paling banyak di baca) - Sobat tentu tahu kekuatan sebuah backlink? Nah.. Popular post ini adaah berfungsi seperti backlink dari blog kita sendiri. jadi semakin banyak artikel baru yang di update maka link di popular post ini seperti mendapatkan backlink yang unik, fresh, dari artikel tersebut. Widget ini adalah Widget yang bisa di bilang penting karena popular post berfungsi mempertanankan di Serp pencarian karena  semakin sering sobat update artikel maka semakin banyak backlink yang fresh, unik, dan berkualitas dari popular post itu sendiri itupun harus dengan catatan artikel nya harus artikel yang unik dan berkualitas. jika sobat ingin mencoba membuat popular post yang lumayan keren sobat bisa melihat artikel nya disini
      2. Artikel Terbaru / Resent Post - Widget ini selain berfungsi seperti Popular namun nilai poinnya tidak sebesar Popular karena artikel terbaru ini hanya berjumlah beberapa item dan bersifat random berubah -ubah sesuai frekuensi update blog klik disini jika sobat belum punya resent post
      3. Fanspage / Follower Twitter Facebook : Kenapa harus ada Fanspage di blog? meskipun banyak yang berpendapat fanspage ini tidak terlalu berpengaruh dalam hal SEO tapi Fanspage punya pengaruh terhadap traffic jadi kalau sobat tetap ingin mendatangkan pengunjung selain dari Google maka fanspage ini bisa sobat coba untuk ikut andil dalam mendatangkan pengunjung. sobat tentu pernah melihat fanspage facebook yang mencapai ratusan ribu kira-kira jika kita sharing di halaman tersebut sebuah artikel yang menarik kira-kira dari Fanspage tersebut ada nggak yang mampir...? 
      4. Google Plus : Banyak blogger berpendapat kalau Google plus itu berpengaruh terhadap SEO karena google plus ini milik google itu sama artinya kalau google plus ya google itu sendiri. dan meskipun dari segi "pengaruhnya" itu dari segi banyak aspek seperti jumlah share, teman, follower, voting, comment dan hashtag dan lain sebagainya, 
      5. Statistik Blog : Saya yakin Widget yang satu ini semua blogger pasti memakainya karena tanpa statistik kita ibarat penjual toko tapi kita tidak tahu apakah toko kita ramai pengunjung atau tidak, kita tidak bisa memperbaiki kualitas blog jika kita tidak tahu seluk beluk fenomena dari pengunjung ke blog kita.  tapi kebanyakan blogger membuat statistik ini privat jadi hanya si empunya blog saja yang bisa melihat detail visitor blog terebut.
      6. Label / Kategori  : Label ini juga mempunyai nilai pada serp Google karena Label akan mempermudah Search engin mengindeks artikel sobat 
      7. Kotak Pencarian : Dari segi SEO mungkin tidak terlalu banyak berpengaruh namun tentu saja ini akan mempermudah pengunjung mencari blog sobat dan ini akan menambah jumlah views blog sobat. ketika views betambah maka semakin cepat halaman tersebut naik rangking ke search engine.
      8. Arsip Blog : Saya rasa fungsinya sama dengan Kotak pencarian, jika ada arsip blog pengunjung akan lebih mudah mencari artikel dengan demikian pagevies akan bertambah dan akhirnya akan mengurangi bunce blog
      9. Related Post : sama dengan fungsi kotak pencarian dan arsip blog, Related post ini saya rasa paling banyak berpengaruh di banding keduanya karean artikel terkait ini adalah artikel yang relevan dengan yang di baca pengunjung jadi kemungkinan besar pengunjung juga mencari tema artikel yang serupa. jika ingin menambah page views artikel terkait bisa sobat coba caranya disini atau disini. 
      Terima kasih sudah membaca artikel tentang Widget yang Harus ada di blog, semua pengertian di atas adalah sebuah rangkuman yang saya dapatkan dari berbagai blogger dan itupaun tidak selalu tepat 100% karena tentu setiap blogger punya pengalaman berbeda tentang ilmu SEO mereka. 
      Read More

      Monday, 8 August 2016

      Knugrha

      Cara Membuat Widget Comment Box Keren di blog

      By     3 comments:
      Kali ini saya akan menulis posting tentang cara membuat comment box di blog. Widget yang saya akan share ini sama persis seperti yang ada di blog ini.



      Widget comment blog ini sangatlah bagus karena memiliki thumbnail dari foto pengunjung yang berkomentar di sebuah postingan. Cara membuat widget komentar di blogger ini sangatlah mudah.
      Menurut saya manfaat dari widget recent comment ini adalah menarik pengunjung untuk ikut membaca artikel lain.

      Widget comment ini terbukti cepat dalam load.
      gambar disamping merupakan contohnya, dan untuk contoh real, anda bisa lihat di bagian kanan sidebar blog ini.

      Cara membuat widget komentar di blog

      1) Masuk Blogger.com

      2) Pilih tata letak / layout
      tentukan dimana widget recent comment akan dipasang, misal di sidebar
      kemudian pilih html.

      3) copykan script berikut


       <style type="text/css">    ul.latest_recent_comments{list-style:none;margin:0;padding:0;}    .latest_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}    .latest_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}    .latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}



          .latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 30,    showMorelink    = true,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/43012082112/truebloggertricks.txt.js"></script><script src="http://zenhuzaini.blogspot.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>


      4) Simpan 

      Keterangan :
      Ubah yang di Bold
      Merah menjadi alamat situs anda,
      Biru sesuai banyaknya komentar muncul

      Demikian tutorial membuat widget komentar di blog . Mudah mudahan berhasil digunakan pada blog anda.
      Read More

      Monday, 1 August 2016

      Knugrha

      Cara Memasang Artikel Terbaru dengan Thunbnail

      By     No comments:

      Recent Post yang akan kita buat ini adalah recent post statis dengan tampilan ada gambarnya / Thumbnails . Widget ini bisa dimodifikasi tampilannya dengan Kotak Scrollbar. Untuk menampilkan 10 postingan pada recent post dengan scroolbar tidak terlampau memakan tempat.

      Menampilkan Recent Post pada sebuah blok, menurut para webmaster merupakan salah satu Optimasi Seo Blog.

      Membuat Recent Post dengan Thumbnail :
      1. Login ke blogger.
      2. Pilih Rancangan
      3. Elemen Halaman
      4. Add Gadget (HTML/JavaScript).
      5. Copy kode dibawah ini dan paste pada gadget yang baru dibuat tadi.

      <right><style> img.recent_thumb
      {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;}
      .recent_posts_with_thumbs
      {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;}
      ul.recent_posts_with_thumbs li
      {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
      .recent_posts_with_thumbs a
      {text-decoration:none;}
      .recent_posts_with_thumbs normal
      {font-size:13px;}
      </style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
      <script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script>
      <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

      6. Simpan atau save
      7. Kemudian lihat hasilnya.

      Script ini bisa dimodifikasi sendiri seperti untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.


      Selamat mencoba dan salam blogger.
      Read More

      Wednesday, 27 July 2016

      Knugrha

      Tutorial Menampilkan Related Post Dengan LinkWithin

      By     No comments:
      Tutorial Menampilkan Related Post Dengan LinkWithin - Salah satu membuat pengunjung blog di blog kita betah berlama-lama adalah dengan membuat peta pada blog kita. 

      Artinya kita mengarahkan pengunjung untuk mengklik postingan yang berkaikan dengan postingan yang dia baca. 

      Dengan kata lain Widget Related Post ini dapat menambah page view blog kita. Bagaimana tertarik teman-teman ingin membuatnya?

      Berikut Caranya:
      1. Kunjungi situs http://www.linkwithin.com/learn
      2. Isi data yang dibutuhkan lihat gambar dibawah ini.


      • Email : Isikan email anda
      • Blog link : http:// namabloganda. blogspot.com
      • Platform : pilih Blogger kalo anda mau masukin di blog
      • Within : Pilih jumlah tampilan thumbail yang anda inginkan (max 5)
      • Centang My blog has light text on a dark background
      • Lalu klik Get Widget.

      3. Instalasi Widget pada blog anda :

      • Klik Install Widget
      • Pilih Blog dimana anda ingin tempatkan Related Post tadi. Lalu klik Add Widget (Menambah Widget)




        • Setelah anda Klik Add Widget (Menambah Widget) anda akan diarahkan langsung ke Rancangan Blog Anda. Akan muncul seperti gambar dibawah ini:




          Selanjutnya pindahkan widget Linkwithin tadi tepat dibawah postingan.
          Setelah itu, Simpan Rancangan Template anda.
          Read More

          Wednesday, 29 June 2016

          Knugrha

          Cara Membuat Widget Followers Blog Tanpa Menampilkan Foto

          By     No comments:

          Cara membuat efek widget bergerak memantul di BlogNamikaze kali ini akan membagikan tutorial bagaimana cara memasang widget Followers blog tanpa menampilkan foto profil. Biasanya alasan memasang widget seperti ini agar supaya loading blog lebih ringan dan memperkecil error di validasi HTML5. Widget Followers blog ini lebih dikenal dengan widget "join this site" dan seperti alasan yang sudah di sebutkan tadi maka beberapa Bloggers memilih untuk memasang widget seperti ini di blog atau website. Contohnya anda dapat melihat di template yang saya gunakan saat ini.

          Tombol follow blog ini hanya menampilkan tombolnya saja tanpa menampilkan wajah si followers blog. Dibandingkan dengan widget followers dari gadget Blogger, tombol "join this site"  ini hanya menampilkan tombolnya saja. Bicara tentang valid html5, jika anda ingin memvalidkan blog anda agar valid html5, baca postingan Cara Agar Blog Valid HTML5 atau postingan mengenai cara agar template Blog menjadi lebih SEO Frendly.
          Membuat widget Followers Blog atau Tombol Join This Site Blog Tanpa Foto Profil 

          1. Pada dashboard, pilih blog anda lalu masuk ke Tata Letak
          2. Klik tambah gadget di kolom yang sudah disesuaikan lalu pilih HTML/Javascript
          3. Copy kode script tombol join this site dibawah ini, lalu pastekan di kolom konten dan jangan lupa


          Ganti kode berwarna biru dengan ID blog anda.

          <a href="http://www.blogger.com/follow-blog.g?blogID=2889237428777887757"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrSUjZTyaHpk4ETYyMZ06P2smfX1-v2hnsjSlx6NDEVEa9uXX23FkVdLa5Z7CW0XWRFbePscm4o0JTQDTGMc0GR_lgx8YpEntfqsEGkeKGOHJwgqEosxy8su7LNTmcPHsu5ORSApSLi9w/s800/Join%2520This%2520Site.png"/></a>


          Mengetahui Blog ID


          5. Klik Simpan dan selesai.

          Oh iya ada juga cara membuat widget followers ini bergerak dari kiri ke kanan, baca 

          cara membuat membuat widget efek bergerak dari kiri ke kanan.

          Bagaimana kodenya sederhana bukan? jika anda membandingkan widget ini dengan widget followers dari Bloggers maka anda akan menemukan perbedaan kode yang lumayan panjang, dimana kode diatas lebih sederhana dan lebih pendek dari kode aslinya.



          Read More
          Knugrha

          Cara Membuat Efek Join This Site Bergerak Memantul di Blog

          By     No comments:
          Cara membuat efek widget bergerak memantul di Blog Berikut ini adalah tentang Cara membuat efek widget bergerak di Blog

          Demonya anda dapat melihat widget "join this site" di bawah blog ini. Efek ini juga dapat anda gunakan di widget-widget kecil lainnya yang ingin anda buat bergerak. Mungkin alasanya adalah membuat widget kelihatan menarik, alasan lainnya juga adalah untuk menarik perhatian agar orang yang melihat widget penasaran dan berpikir "eh apayah yang bergerak itu" hehehe.



          berikut kodenya


          <marquee>


          widget anda


          </marquee>


          Kode di atas akan membuat widgetnya bergerak dari kanan kekiri seperti menembus dinding dan keluar lagi. jika sobat ingin widgetnya memantul-mantul seperti di Demo sobat dapat menggunakan kode dibawah ini



          <marquee behavior='alternate'>


          Widget anda


          </marquee>


          Nah DIbawah ini adalah contoh kode widget "join this site" yang digabungkan efek bergerak memantul itu.


          <marquee behavior='alternate'><a href='http://www.blogger.com/follow-blog.g?blogID=8405024231897187603' rel="nofollow" target="_blank"><img alt="Join This Site" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrSUjZTyaHpk4ETYyMZ06P2smfX1-v2hnsjSlx6NDEVEa9uXX23FkVdLa5Z7CW0XWRFbePscm4o0JTQDTGMc0GR_lgx8YpEntfqsEGkeKGOHJwgqEosxy8su7LNTmcPHsu5ORSApSLi9w/s800/Join%2520This%2520Site.png" title="Join This Site" /></a></marquee>

          Yang Berwarna biru gantilah pakai ID sobat

          Ok sobat sekian artikelnya tentang Cara membuat efek Join This Site bergerak memantul di Blog dan jangan lupa untuk melihat tips dan trik blog terbaru lainnya. Semoga bermanfaat.



          Read More
          © Copyright 2016 WinXz-ID. Designed by Kristian Nugraha | Distributed By WinXz_ID. Powered by Blogger.