Cara Mudah Membuat Pesan Pemberitahuan Admin Blogger

Tutorial Blogger: Cara Mudah Membuat Pesan Pemberitahuan Admin Blogger

Contoh Pesan Pemberitahuan Admin Blog

Salam Ngerapik Blog, apa kabar teman teman semua masih ngeblog atau sudah malas 😅 Kali ini saya mencoba bersemangat menulis lagi meskipun blog ini sangat susah di index google..hahaha😁yaitu menerapkan pengaplikasian tutorial blog yaitu tentang Cara Mudah Membuat Pesan Pemberitahuan Admin Blogger. Cekidot wae.. 

Maksud dari Tutorial Blog Pesan Pemberitahuan Admin Blogger diperuntukan sekedar sebagai pemberitahuan bahwa Blog kesayangan teman teman sedang dalam perbaikan, entah dalam pengembangan atau sedang menjalani hal-hal sibuk. Jadi kesimpulannya para pengunjung lebih paham mengapa Blog kalian sudah sangat jarang update.

Kali ini saya mencoba membuat dan mengulas cara pembuatannya. Berikut langkah - langkah untuk Membuat nya:

1. Masuk ke edit html template blogger teman teman semua. Letakkan kode dibawah tepat di atas kode </body>

<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixmz_4beUnnZNHPadH8xFqwB8sIcMPsTIdP7iLEx4vE3L-CQnnobId6g9v-FvKBL_Xaj2ou5rmGkAtjG64dVdxjZYBg4tlJBFY993ZTIt388Y5SDmiJfnzzsiaVDoTgYXR6eiqz_JgnYg/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDuBEWtc6snQTad5Qgzih-r9AWNIeGFWMDB70FBHq8ON6zUr-ZAi77NLKdPrKvZG5WgS782FPW3AQ2OVt6K21SQiDrftZVJ1rQp-iTpr3eRDJvNIKehIu1MzPaiqhW5z7a5aGqGptp3B8/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>

2. Lalu, tambahkan kode di bawah ini (letakkan tepat dibawah kode yang di atas tadi no.1)


<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Pesan Admin :</strong>Selamat Datang Di Tutorial Belajar BLog</p></div></b:if>

 

3. Teman teman juga dapat memilih apabila mau widget tersbut muncul dimana. Pilihan kode sematan        lihat dibawah: Jangan lupa selimuti kode di pling atas.

a. Hanya muncul di halaman utama

<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE DI ATAS........
</b:if>

b. Muncul di halaman Posting

<b:if cond='data:blog.pageType == "item"'>
KODE DI ATAS........
</b:if>

DEmo Tutorial Belajar Blog

Ketarangan:

• Tulisan bottom yang Berwarna kuning dan left tulisan berwarna merah bisa di ganti dengan keinginan
  
• Tulisan berwarna Merah silahkan diganti dengan kata-kata kalian sendiri.

Seperti itulah artikel sederhana ini saya buat. Akhir kata saya ucapkan terimakasih kepada teman teman blogger yang telah berkunjung ke blog ngerapik ini untuk membaca artikel tentang "Tutorial Cara Mudah Membuat Kolom Widget di Bawah Header Blogger" semoga dapat bermanfaat bagi pengunjung blog sederhana ini. Salam Ngerapik Blog.

Meta Hastags: #TutorialBlog #WidgetPesanBlog #SEOIndonesia #TipsBlogging #OptimasiBlog #NgerapikBlog