Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Cara Membuat Permanen Link (Permalink) di Blog

Cara Membuat Permanen Link (Permalink) di Blog
Cara Membuat Permanen Link (Permalink) di Blog - Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya yaitu untuk meningkatkan seo on page blog sobat. widget tersebut saya ambil dari CHRISTIAN TATELU. namun sedikit saya rubah warnanya (biar segar).. hehehe


Cara Membuat Permanen Link (Permalink) di Blog

  • Masuk ke akun blogger sobat.
  • Klik TEMPLATE --> HTML EDIT
  • Letakkan kode berikut di atas kode ]]></b:skin>
.tulisanadmin-setiashare{max-width:100%;
width:auto;
background:#f2f2f2;
border:2px solid #4488dd;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.tulisanadmin-setiashare .kontainer{padding:5px;}
.tulisanadmin-setiashare h4{
background:#4488dd;
border:none;
border-bottom:1px solid #4488dd;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.tulisanadmin-setiashare h4 a{color:#000000;}
.tulisanadmin-setiashare img{
background:#4488dd;
width:90px;
height:100px;
border:1px solid #4488dd;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;box-shadow:none;box-shadow:none;
}
  • Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya. 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='tulisanadmin-setiashare'>
 <h4>
  Ditulis Oleh :
 <b>
 <data:post.author/>
 </b>
 </h4>
 <div class='kontainer'>
 <img alt='Helmi Junior' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXv07p_8Ec57wufeiDFI8sa8JjHMwJ3B9_LE0JDi7dHh4Uy63CZaB_JMiHUBqHqtNEA4jzLVaGReu74_BwvYYm-QtV1-ex9i1uCR7tvc1EmfzZ7KODh7e5aEFxWszXCMXRQslwYWTenmM/s130-no/1146502_558868657501417_2036555469_a.jpg'/>
 Sobat sedang membaca artikel tentang
 <b>
 <a expr:href='data:post.url'>
 <data:post.title/>
 </a>
 </b>
 . Sobat boleh menyebarluaskan asal sobat memberi sumber artikel.
 <textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>
 Sumber : &lt;a href=&quot;
 <data:post.url/>
 &quot; target=&quot;_blank&quot;&gt;
  <data:blog.pageName/>
 &lt;/a&gt;
 </textarea>
 <div style='clear:both;'/>
 </div>
 </div>
 </b:if>
  • Klik save dan lihat hasilnya.

Notes :
  • Ganti kode yang berwarna Hijau dengan Url foto / gambar milik sobat
  • Sesuaikan nama yang berwarna merah dengan nama sobat.
mungkin itu yang bisa saya share kepada kalian semua tentang Cara Membuat Permanen Link (Permalink) di Blog , jika anda ingin bertanya gunakan kolom komentar yang tersedia dibawah ini. Semoga Berhasil..
 Semoga Bermanfaat.

Cara Membuat Komentar Terbaru Dengan Avatar

Cara Membuat Komentar Terbaru Dengan Avatar

Cara Membuat Komentar Terbaru Dengan Avatar - widget ini menampilkan komentar terbaru diblog sobat, widget ini sering dikenal dengan Recent Comments. Selain menampilkan komentar terbaru, juga terpampang foto profil yang berkomentar. Tertarik menggunakan widget Recent Comments. Langsung saja simak berikut ini :

  • Langkah 1. Dashboard > Tata Letak > Tambahkan Gadget. > HTML/Javascript.
  • Langkah 2. Masukan Kode Berikut .
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_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;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
characters  = 30,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://hfr-xp.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
  • Langkah 3. Simpan.
Note: 
5 adalah jumlah komentar yang akan ditampilkan. ganti semau sobat.
http://hfr-xp.blogspot.com komentar yang akan sobat tampilkan, ganti dengan Alamat Blog Sobat

Mudahkan sob, terima kasih sudah membaca artikel  Cara Membuat Komentar Terbaru Dengan Avatar, dan terima kasih sudah berkunjung. Jika ada kesulitan tanyakan di kolom komentar.

Semoga Bermanfaat.

Cara Membuat Iklan Teks Mirip Google Adsense

Cara Membuat Iklan Baris Seperti Google Adsense
Cara Membuat Iklan Teks Mirip Google Adsense, Sekarang HFR-XP akan ngeshare tentang memanipulasi iklan baris seperti google adsense! kok bisa?. bisa. ini saya ambil dari blog KangIsmet. Sekarang ikuti cara-cara dibawah ini supaya bisa mempraktekan ke blog sobat!.

  • Lihat Demonya Berikut : 

Blogger Tutorial hfr-xp.blogspot.com/ Berisi konten tentang Tutorial Blogger. arrow

Pasang Iklan di Sini hfr-xp.blogspot.com/ Pasang iklan Anda di sini, hanya 10 ribu / bulan. arrow

Pasang Iklan di Sini hfr-xp.blogspot.com/ Pasang iklan Anda di sini, hanya 10 ribu / bulan. arrow

Pasang Iklan di Sini hfr-xp.blogspot.com/ Pasang iklan Anda di sini, hanya 10 ribu / bulan. arrow
Iklan oleh HFR-XP info
  • Langkah Pertama Letakan kode berikut di atas </head>.
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>
  •  Lankah Berikutnya sisipkan kode dibawah ini tepat diatas kode ]]></b:skin>.
/* HFR-XP
----------------------------------------------- */
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}
#iklan-teks h2.active {
  display: none;
}
#iklan-teks h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
  height:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue;
  text-decoration:underline;
}
.isi-iklan a{
  font:normal 13px Verdana, Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover{
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  float: right;
  margin-right: -60px;
  margin-top: -40px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.panah-besar:hover {
  background: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}
  • Langkah Terakhir Tambahkan Kode Berikut pada Widget HTML / Javascript.



<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://hfr-xp.blogspot.com/' target='_blank'>Blogger Tutorial</a>
            <a href='http://hfr-xp.blogspot.com/' target='_blank'>hfr-xp.blogspot.com/</a>
        <span class='isi'>Berisi konten tentang Tutorial Blogger.</span>
            <a class='panah-besar' href='http://hfr-xp.blogspot.com/' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKfrFmxqd-qZbBtO9E0RP9KIPrq5Fi6Kc5XikoqVsLrB8Zbf4gZFgFbXBg_Uex8TYBjJgHpU5MJBmy5iM590vb8OCQ13y1WQyI1KXN7h6hrBQzhhuyCDIddyY4r4ITFZbRAUmWGXvmhI/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://hfr-xp.blogspot.com/' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://hfr-xp.blogspot.com/' target='_blank'>hfr-xp.blogspot.com/</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 10 ribu / bulan.
            <a class='panah-besar' href='http://hfr-xp.blogspot.com/' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKfrFmxqd-qZbBtO9E0RP9KIPrq5Fi6Kc5XikoqVsLrB8Zbf4gZFgFbXBg_Uex8TYBjJgHpU5MJBmy5iM590vb8OCQ13y1WQyI1KXN7h6hrBQzhhuyCDIddyY4r4ITFZbRAUmWGXvmhI/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://hfr-xp.blogspot.com/' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://hfr-xp.blogspot.com/' target='_blank'>hfr-xp.blogspot.com/</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 10 ribu / bulan.
            <a class='panah-besar' href='http://hfr-xp.blogspot.com/' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKfrFmxqd-qZbBtO9E0RP9KIPrq5Fi6Kc5XikoqVsLrB8Zbf4gZFgFbXBg_Uex8TYBjJgHpU5MJBmy5iM590vb8OCQ13y1WQyI1KXN7h6hrBQzhhuyCDIddyY4r4ITFZbRAUmWGXvmhI/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://hfr-xp.blogspot.com/' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://hfr-xp.blogspot.com/' target='_blank'>hfr-xp.blogspot.com/</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 10 ribu / bulan.
            <a class='panah-besar' href='http://hfr-xp.blogspot.com/' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKfrFmxqd-qZbBtO9E0RP9KIPrq5Fi6Kc5XikoqVsLrB8Zbf4gZFgFbXBg_Uex8TYBjJgHpU5MJBmy5iM590vb8OCQ13y1WQyI1KXN7h6hrBQzhhuyCDIddyY4r4ITFZbRAUmWGXvmhI/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh HFR-XP</span>
    <span class='info-icon'><a href='http://hfr-xp.blogspot.com/' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPlgFHPu7fJtZPG0vFjueakuYywRQ6oajin2ZjDOdeq6463vlOwsF5eSWxK7rMMQOsWY5xSbTgQmfSYgpcD5y-u1WTirHLAJp7SM9jmKKYl8LwiBI7DgADXv2nzSVoULdNvaOV_UkxjKQ/s1600/info-iklan.png'/></a></span> </div>     


Semoga Bermanfaat