Cara Membuat Permalink Di Blog

Ditulis Oleh : Wildan Andriana

Sobat sedang membaca artikel tentang . Oleh Wildan, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a>:: Get this widget ! ::

Anda Ingin Seperti Diatas Itu, Ikuti saja langkah berikut ini:

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan kode berikut di atas kode ]]></b:skin>

 .admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
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;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya. 

 <!-- Permalink Tatelu -->
<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if><br />
<div class="admin-tulisan">
<h4>
Ditulis Oleh : <b><data:post .author=""></data:post></b>Wildan Andriana</h4>
<div class="kontainer">
<img alt="Christian angkouw" src="https://lh3.googleusercontent.com/-JMR4TmAx7vw/VMr6MaM4OhI/AAAAAAAAA90/BbG6F7vptaA/s100-no/fotowildan-1.jpg" />
Sobat sedang membaca artikel tentang <b><a expr:href="data:post.url" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></b>.  Oleh Wildan, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols="50" id="bloglinking" name="bloglinking" onclick="this.focus();this.select()" onfocus="this.select()" onmouseover="this.focus()" readonly="readonly" rows="1"><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
<span style="float: right; font: italic 10px Arial, Sans-Serif;">
<a href="http://wildanandriana.blogspot.com/2014/12/tab-menuku.html" target="_blank">:: Get this widget ! ::</a></span><br />
<div style="clear: both;">
</div>
</div>
</div>
<!-- Permalink Tatelu -->

5. Klik save dan lihat hasilnya.
 
Tambahan :

• Ganti kode yang berwarna biru dengan Url foto / gambar milik sobat
• Sesuaikan angka yang berwarna merah dengan ukuran template blog sobat ( ukuran textarea )

 

Cara Membuat Buka Tutup Blog

Anda Ingin Seperti Saya Cara nya Gampil Sekali ikuti saja langkah berikut ini.

1. Login blog anda
2. Masukan Kode Dibawah ini di CSS anda

body::before,body::after{position:absolute;position:fixed;content:"";background:#000;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;z-index:99999}body::before{border:10px solid #ccc;border-left:none;top:0;left:50%;right:0;bottom:0}body::after{top:0;left:0;border:10px solid #ccc;border-right:none;right:50%;bottom:0}body:hover::before{left:100%}body span.energyatas{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 -1px;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body span.energybawah{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 0;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover::after{right:100%}body:hover::before,body:hover::after{visibility:hidden}body:hover span.energyatas{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:0}body:hover span.energybawah{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:100%}body span.energy{width:35%;border-bottom:5px solid #ccc;border-top:5px solid #ccc;padding:10px;background:#000;border-radius:20px;font-size:20px;color:#fff;text-align:center;position:absolute;position:fixed;left:32%;right:45%;top:40%;bottom:45%;margin:0 0 0 0;z-index:123455543123445556888;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover span.energy{visibility:hidden;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;-webkit-transition:all .7s ease-out;transition:all .7s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;right:0;z-index:99999999}

3. Masukan Kode HTML nya Diatas <body> / Dibawah </head>

<span class='energyatas'></span>
<span class='energy'>Review Demo<br/><span style='font-size:11px;color:#fff'>Gunakan Scroll Mouse/Keyboard Untuk Mengscroll Halaman</span></span>
<span class='energybawah'></span>
<div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div id='wrap'>
<div id='header'>
<div class='headerleft'>
<div class='headerleft section' id='headerleft'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div>
<div class='headerright'>
<div class='headerright section' id='headerright'>
</div>
</div>
</div>
</div>
</div>
</div>

Efek Hover 3

Wildan
Andriana

Selamat Datang di Blog Wildan
Blog ini saya dirikan dengan tujuan untuk kalangan sendiri dan sedikit berbagi informasi, semoga bermanfaat.

Untuk Membuat Contoh Diatas Kodenya Adalah Sebagai Berikut:

<style type="text/css">
body{background:#333;background-size:cover;color:#ccc;height:100%;overflow:visible}
#tagBlogger {
  width:100px;
  margin:30px auto;
  float:left;
  border-radius:50%}

.container {
  width:70px;
  height:70px;
  margin:0 0 30px 10px;
  position:relative;
  border-radius:60px;
  background:rgba(255,255,255,.2);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  transition:all .5s;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -ms-transition:all .5s;
  -o-transition:all .5s;
  overflow:hidden}

.photo {
  width:50px;
  height:50px;
  margin:8px;
  border-radius:50%;
  position:absolute;
  left:0px;
  overflow:hidden;
  border:2px solid white;
  top:0}

.pic{max-width:100%}
.buttonLogo {
  width:50px;
  height:50px;
  position:absolute;
  right:10px;
  top:10px;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),
             0 0 0 5px rgba(255,255,255,.3),
             0 0 0 6px rgba(0,0,0,.3);
  transition:all .5s;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -ms-transition:all .5s;
  -o-transition:all .5s;
  cursor:pointer;
  background:url(https://lh3.googleusercontent.com/-HJgeo9HXPPA/VMr6MCBbpzI/AAAAAAAAA9w/2RyYdFRPn7w/s100-no/fotowildan-2.jpg) no-repeat center center;}

.buttonLogo:hover {
  box-shadow:0 0 0 1px rgba(0,0,0,.3),
             0 0 0 5px #5ca321,
             0 0 0 6px rgba(0,0,0,.3);}

.name{
  height:50%;
  width:100px;
  position:absolute;
  right:25px;
  padding:5px;
  font:15px arial;
  color:white;
  opacity:0;
  transition:all .5s .5s;
  -webkit-transition:all .5s .5s;
  -moz-transition:all .5s .5s;
  -ms-transition:all .5s .5s;
  -o-transition:all .5s .5s;
  text-shadow:1px 2px 3px #111;
  top:0}

.small {font-size:12px; display:block; margin-top:2px; }
.comment {
  width:210px;
  position:relative;
  padding:5px;
  font-size:13px;
  color:white;
  border-radius:10px;
  background:rgba(255,255,255,.4);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  opacity:0;
  transition:all 1s;
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -ms-transition:all 1s;
  -o-transition:all 1s;
  border-bottom:20px solid #080}

.comment:before {
  content:'';
  width:0;
  height:0;
  position:absolute;
  bottom:100%;
  left:2%;
  border-bottom:15px solid rgba(255,255,255,.4);
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:15px solid transparent}

.container:hover{width:210px}
.container:hover .name,.container:hover + .comment{opacity:1}
</style>

<h2>My Family</h2>
<div id="tagBlogger"><div class="container"><a class="buttonLogo" href="#" target="_blank" title="Amarajen"></a><br />
<div class="name">Enjen<br />
<span class="small">Amarajen</span><br />
</div><div class="photo"><img src="https://lh3.googleusercontent.com/-JMR4TmAx7vw/VMr6MaM4OhI/AAAAAAAAA90/BbG6F7vptaA/s100-no/fotowildan-1.jpg" alt="Enjen, S.Pd.I." class="pic" /><br />
</div></div><p class="comment">Selamat Datang di Blog Wildan<br />
<span style="font:italic 12px/normal Verdana,serif">Blog ini saya dirikan dengan tujuan untuk kalangan sendiri dan sedikit berbagi informasi, semoga bermanfaat.</span></p></div>
<div style='clear: both;'></div>