Cara Mudah Membuat Box Permalink di Blogger

Tutorial Blog: Cara Mudah Membuat Box Permalink di Blogger

Pernahkah sobat blogger mendengar apa itu Permalink? Permalink adalah link permanen yang terdapat pada suatu website/blog. Permalink ini dapat selalu muncul pada setiap akhir posting atau posisi lain yang ditentukan oleh pemilik blog. Permalink juga dipercaya dapat menaikan Page Rank dan Seo pada Blog kita.

Disini saya akan mencoba membuat permalink yang bagus sudah dilengkapi dengan foto dan pesan-pesan pada permalink. Seperti punya saya ini yang menampilkan pesan-pesan agar artikel tidak di copy dan disebarluaskan dengan sembarangan. Jika sobat membuat permalink dengan cara yang saya ulas ini, hasilnya akan seperti tangkapan layar berikut ini,.

Langsung saja sobat blogger semua, kita mulai ke pembahasan. Cara Mudah Membuat Box Permalink di Blogger:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Klik Edit HTML.
4. Centang "Expand Template Widget".
5. Cari kode ]]></b:skin>, agar lebih mudah gunakan tombol ctrl+F.
6. Letakan kode berikut diatas 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;
}

Pada kode diatas terdapat kode-kode warna yang tidak bisa saya tandai semua, bisa sobat ubah.

7. Cari kode <data:post.body/>, dalam template saya terdapat beberapa kode tersebut. Jika sobat mengalami hal yang sama, cobalah satu-persatu kode tersebut.
8. Masukan kode berikut tepat dibawah kode <data:post.body/>.

Ada dua pilihan sobat, silahkan sobat pilih sesuai keinginan dari kode dibawah ini:

Kode Pertama:

<!-- Permalink -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tutorial Blogger, Game, Software, Blogging, Information</h4>
<div class='kontainer'>
<img alt='SaungjiwaBlog' src='https://blogger.googleusercontent.com/img/a/AVvXsEiAQTkeBAEK0ZGLxkNbntg-Yfs-YrI5Mup1jJDBNG2Gu4ibexsZLh0TfvaJUkBVUCVDLKI7iYFrddaW-A2wKllwN30kIfsYgojsZ6E7ulGIPHCwFPnjeyUi22x87fsY88NsfJWlPtZfQIFQWb-syE4Xbbw6A4GDIk-m_iG6JRyHF3iByXPORQQ2l2Vu57pV=s1600'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Saling menghargai kreatifitas sobat Blogger.
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='https://saungjiwa2012.blogspot.com/' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink -->

Kode Kedua:

<!-- Begin Permalink Responsif --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style> /* CSS untuk membuat widget permalink responsif */ .admin-tulisan { background: #f9f9f9; border: 1px solid #ddd; padding: 15px; margin: 20px 0; border-radius: 5px; font-size: 14px; line-height: 1.6; } .admin-tulisan h4 { margin-top: 0; margin-bottom: 10px; font-size: 15px; } .kontainer { display: block; overflow: hidden; } /* PENGATURAN GAMBAR UTAMA */ .kontainer img { float: left; margin-right: 15px; margin-bottom: 10px; max-width: 80px; height: auto; border-radius: 50%; /* Mengubah gambar jadi bulat agar efek berputar lebih bagus */ border: 2px solid #ccc; /* Transisi halus saat mouse masuk keluar */ transition: all 0.6s ease-in-out; } /* EFEK SAAT MOUSE DIARAHKAN (HOVER) */ .kontainer img:hover { transform: rotate(360deg); /* Membuat gambar berputar 1 putaran penuh */ border-color: #008cff; /* Mengubah warna border saat bersinar */ /* Efek Bercahaya (Glow Effect) */ box-shadow: 0 0 15px rgba(0, 140, 255, 0.8); filter: brightness(1.2); /* Membuat gambar sedikit lebih terang/bercahaya */ } #bloglinking { width: 100%; box-sizing: border-box; padding: 8px; margin-top: 10px; font-family: monospace; font-size: 12px; border: 1px solid #ccc; background: #fff; display: block; } @media screen and (max-width: 480px) { .kontainer img { float: none; display: block; margin: 0 auto 10px auto; } } </style> <div class='admin-tulisan'> <h4>Ditulis Oleh : <b><data:post.author/></b> ~SAUNGJIWA BLOG~ </h4> <!-- Sub-Topik (Sekarang rapi di bawahnya dengan gaya berbeda) --> <span class='sub-topik'><i>Tutorial Blogger, Game, Software, Blogging, Information</i></span> <div class='kontainer'> <img alt='SaungjiwaBlog' src='https://blogger.googleusercontent.com/img/a/AVvXsEiAQTkeBAEK0ZGLxkNbntg-Yfs-YrI5Mup1jJDBNG2Gu4ibexsZLh0TfvaJUkBVUCVDLKI7iYFrddaW-A2wKllwN30kIfsYgojsZ6E7ulGIPHCwFPnjeyUi22x87fsY88NsfJWlPtZfQIFQWb-syE4Xbbw6A4GDIk-m_iG6JRyHF3iByXPORQQ2l2Vu57pV=s1600'/> Assalamualaikum, Sobat Blogger sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/>.</a></b>Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Saling menghargai dalam kreatifitas menulis ya sobat Blogger. Salam.,🙏 <textarea id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea> <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'> <a href='https://saungjiwa2012.blogspot.com/' target='_blank'>:: Get this widget ! ::</a></span></p> <div style='clear:both;'/> </div> </div> </b:if> <!-- End Permalink Responsif -->

Keterangan Kode: 

Tulisan berwarna Hijau adalah deskripsi Blog sobat, Tulisan berwarna Ungu adalah alt gambar, URL berwarna Merah adalah gambar yang akan sobat tampilkan di permalink, Tulisan berwarna Biru adalah pesan-pesan yang akan sobat tampilkan di permalink.

9. Ubah deskripsi blog, alt gambar, gambar, dan pesan-pesan yang akan sobat tampilkan di permalink sesuai dengan yang sobat inginkan.
10. Klik Simpan Template.

Selesai deh pemasangannya sobat blogger, kini permalink telah terpasang di Blog kesayangan sobat semuanya. 

Demikianlah artikel singkat saya kali ini tentang "Cara Mudah Membuat Box Permalink di Blogger" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏 

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...