tutorialvai

Senin, 18 Januari 2016

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>


<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>


<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType not in {"item","static_page"} and data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</span>

<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='//img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>


<b:include data='post' name='postQuickEdit'/>
</span>


<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</div>
</div>
</b:includable>

Rabu, 13 Januari 2016

membuat widget shared keren

Cara Membuat Social Share Button Keren

Cara Membuat Social Share Button Keren. Sobat Blogger, widget Social Share Button atau bisa disebut widget tombol berbagi, berhubung bahwa kegunaan widget ini sangat efektif untuk kemajuan blog dalam hal share artikel, maka saya akan memberi anda tutorial membuat widget social share. Dalam widget ini menggunakan empat kode jaringan yang populer seperti media sosial berbagi ke (facebook, twitter, google + dan linkedin) dan menggunakan slide-in dan slide-out, untuk melihat tampilannya silahkan anda lihat gambar di bawah ini.

Untuk penempatannya sendiri widget ini akan saya pasangkan di bawah posting blog dan jika anda tertarik dengan widget ini silahkan ikuti tutorialnya.

Cara Menambahkan Widget Social Share Button :
1. Buka akun blogger anda.
2. Pilih menu > template > klik edit Html
3. Copy code dibawah ini dan letakan tepat di atas kode </head>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

4. Selanjutnya copy code dibawah ini dan letakan tepat di atas </head> , Simpan template.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>  <style type='text/css'>/*<![CDATA[*//*-----Social Sharing CSS code widget by www.digitalhubinc.com----*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons {    border-radius: 5px;    padding: 14px 7px;    background: white;    width: 680px;    overflow: hidden;    margin: 2px auto 0;    box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button {    background: #DCE0E0;    position: relative;    display: block;    float: left;    height: 40px;    margin: 0 7px;    overflow: hidden;    width: 150px;    border-radius: 3px;    -o-border-radius: 3px;    -ms-border-radius: 3px;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;}.icon {    display: block;    float: left;    position: relative;    z-index: 3;    height: 100%;    vertical-align: top;    width: 38px;    -moz-border-radius-topleft: 3px;    -moz-border-radius-topright: 0px;    -moz-border-radius-bottomright: 0px;    -moz-border-radius-bottomleft: 3px;    -webkit-border-radius: 3px 0px 0px 3px;    border-radius: 3px 0px 0px 3px;    text-align: center;}.icon i {    color: #fff;    line-height: 42px;}.slide {    z-index: 2;    display: block;    margin: 0;    height: 100%;    left: 38px;    position: absolute;    width: 112px;    -moz-border-radius-topleft: 0px;    -moz-border-radius-topright: 3px;    -moz-border-radius-bottomright: 3px;    -moz-border-radius-bottomleft: 0px;    -webkit-border-radius: 0px 3px 3px 0px;    border-radius: 0px 3px 3px 0px;}.slide p {    font-family: Open Sans;    font-weight: 400;    border-left: 1px solid #fff;    border-left: 1px solid rgba(255,255,255,0.35);    color: #fff;    font-size: 16px;    left: 0;    margin: 0;    position: absolute;    text-align: center;    top: 10px;    width: 100%;}.button .slide {    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;}.facebook iframe {    display: block;    position: absolute;    right: -16px;    top: 10px;    z-index: 1;}.twitter iframe {    width: 90px !important;    right: 5px;    top: 10px;    z-index: 1;    display: block;    position: absolute;}.google #___plusone_0 {    width: 70px !important;    top: 10px;    right: 15px;    position: absolute;    display: block;    z-index: 1;}.linkedin .IN-widget {    top: 10px;    right: 2px;    position: absolute;    display: block;    z-index: 1;}.facebook:hover .slide {    left: 150px;}.twitter:hover .slide {    top: -40px;}.google:hover .slide {    bottom: -40px;}.linkedin:hover .slide {    left: -150px;}.facebook .icon, .facebook .slide {    background: #305c99;}.twitter .icon, .twitter .slide {    background: #00cdff;}.google .icon, .google .slide {    background: #d24228;}.linkedin .icon, .linkedin .slide {    background: #007bb6;}    /*]]>*/</style>  </b:if>

5. Langkah selanjutnya copy kode dibawah ini dan letakan tepat dibawah code <data:post.body/>

 <div style='border-bottom: 1px solid #CCCCCC; padding: 10px 10%;margin:5px;'/><div id='sbuttons'><div class='facebook button'><i class='icon'><i class='icon-facebook'></i></i><div class='slide'><p>facebook</p></div><fb:share-button type='button_count'/> </div> <div class='twitter button'><i class='icon'><i class='icon-twitter'></i></i><div class='slide'><p>twitter</p></div><a class='twitter-share-button' data-via='digitalhubinc' href='https://twitter.com/share'>Tweet</a><script>!function(d,s,id){      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;      if(!d.getElementById(id)){        js=d.createElement(s);        js.id=id;        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);  </script>  </div> <div class='google button'><i class='icon'><i class='icon-google-plus'></i></i><div class='slide'><p> google+</p></div><!-- Place this tag where you want the +1 button to render. --><div class='g-plusone' data-size='medium'></div><!-- Place this tag after the last +1 button tag. --><script type='text/javascript'>    (function() {      var po = document.createElement(&#39;script&#39;);      po.type = &#39;text/javascript&#39;;      po.async = true;      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;      var s = document.getElementsByTagName(&#39;script&#39;)[0];      s.parentNode.insertBefore(po, s);    }    )();  </script>  </div>  <div class='linkedin button'><i class='icon'><i class='icon-linkedin'></i></i><div class='slide'><p>linkedin</p></div><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script></div></div><div style='border-bottom: 1px solid #CCCCCC; padding: 5px 10%;margin:2px;'/> </b:if>

6. Selipkan code <b:if cond='data:blog.pageType == "item"'> di antar kedua code tag.

Contoh :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
Widget code social....bla bla bla

Catatan : Biasanya code <data:post.body/> , lebih dari satu silahkan anda sesuiakan penempatannya, maka misalkan anda meletakan di code pertama tidak muncul, maka di ulang di kode kedua dan selanjtnya.

hapus semua posting

Cari kode berikut ini : ( gunakan ctrl+F biar mudah )

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Rubahlah kode tersebut sehingga jadi seperti ini :
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div style='clear: both;'/>
</b:if>
</b:includable>
Simpan template dan lihat hasilnya. Mudah bukan....

menghilangkan tulisan web di mobile

Berikut adalah tutorialnya.

1. Buka Blogger.com >> Template >> Cadangkan / Pulihkan (Demi keamanan jika terjadi galat) >> Edit HTML >> Centang Expand Template Widget
2. Cari kode <div class='mobile-desktop-link'> dengan menekan CTRL + F dan hapus hingga kode</div> yang ada dibawahnya.
3. Silahkan anda pratinjau terlebih dahulu, jika tidak terjadi masalah dengan template blog anda, klik simpan!

menhgilangkan langganan entri atom

Login ke akun blogger sobat.
Pada Dasbor blogger klik Template > Edit HTML > Lanjutkan.
Beri tanda centang pada Expand Template Widget
Cari kode di bawah ini, gunakan fungsi Find (Ctrl+F) biar mudah.
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
Hapus semua kode diatas.
Lalu klik Simpan Templates

Senin, 11 Januari 2016

menhapus tulisan beranda

Bagaimana sih cara menghapus tulisan Home atau Beranda di bawah postingan?
ada sebagian orang yang sesudah membuat blog ada tulisan Home atau beranda di bawah posting dan bagaimana sih carannya?, di posting ini saya akan menjelaskan cara menghapus tulisan Home atau Beranda yang ada di bawah posting. langsung saja jelaskan cara menghapus tulisan home atau beranda yang ada di bawah postingan:

Masuk ke akun blogger anda.
Klik menu Template.
Lalu klik tombol Edit HTML.

Centang Expand Template Widget.

Cari Kode Berikut : <data:homeMsg/> Dengan cara Menekan tombol CTRL+F.
Setelah menemukan kode tersebut hapus kode tersebut.
Setelah terhapus Klik Tombol Simpan Template.
Setelah menekan tombol Simpan Template Tulisan Home atau Beranda akan terhapus otomatis.

Selasa, 05 Januari 2016

erikut ini akan saya jelaskan caranya membuat widget Artikel Terbaru yang bergerak dari atas ke bawah yang disertai dengan gambar.
1. Log in dulu di Blogger
2. Setelah ada di dashboard blogger pilih Tata letak / Layout
3. Pilih Add Gadget / Tambahkan Gadget
4. Cari HTML/JavaScript
5. Copy paste script yang ada di bawah ini

Ini Contoh tampilan widgetnya

<style type="text/css">
#rp_plus_img{height:377px;overflow:hidden;border:solid 1px #fff;padding:6px 6px 24px 5px;background-color:transparent;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#;
border:solid 1px #ffffff;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});

</script>
<ul id="rp_plus_img"><script>
var numposts = 25;
var numchars = 40;</script>
<script src="http://khiansantang.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
<center><script language="javascript" src="http://gallerydunia.googlecode.com/files/google_translate.js">
</script></center>
<small><a href="http://khiansantang.blogspot.com" target="_blank">Khiansantang</a></small>

6. Jangan lupa di save
kemudian lihat hasilnya........ (^_^)

Keterangan :
Merah ---> Ganti dengan nama blog kamu
Biru -----> Jumlah posting yang akan dimunculkan dalam widget
Kuning --> Jumlah karakter yang akan ditampilkan
Hijau -----> Tinggi widget, atur sesuai kebutuhan