Modifikasi Tampilan Dan Teks Pada Status Message - Dewa Blogger

Halaman

    Social Items

Buy Now
 yaitu sebuah pesan yang akan muncul di atas posting dikala kita sedang berada di halaman Modifikasi Tampilan dan Teks pada Status Message
Contoh tampilan ‘status message’ yang sudah dimodifikasi.

Status Message yaitu sebuah pesan yang akan muncul di atas posting dikala kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS bawaan Blogger dengan arahan CSS gres yang mengandung pengaturan tampilan yang berbeda menyerupai ini:

.status-msg-wrap {   font-size:110%;   width:90%;   margin:10px auto;   position:relative; }  .status-msg-border {   border:1px solid #000;   filter:alpha(opacity=40);   -moz-opacity:.4;   opacity:.4;   width:100%;   position:relative; }  .status-msg-bg {   background-color:#ccc;   opacity:.8;   filter:alpha(opacity=30);   -moz-opacity:.8;   width:100%;   position:relative;   z-index:1; }  .status-msg-body {   text-align:center;   padding:.3em 0;   width:100%;   position:absolute;   z-index:4; }  .status-msg-hidden {   visibility:hidden;   padding:.3em 0; }  .status-msg-wrap a {   padding-left:.4em;   text-decoration:underline; }

Tapi bagaimana kalau kita ingin memodifikasi goresan pena di dalamnya?

Untuk melaksanakan itu, kita mau tidak mau harus menghapus elemen tersebut dan menggantinya dengan markup yang gres menyerupai ini:

<!-- b:include data='top' name='status-message'/ --> <b:if cond='data:blog.searchQuery'>   <b:if cond='data:numPosts != 0'>     <p class='custom-status-message'>Menampilkan semua entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong></p>   <b:else/>     <p class='custom-status-message-error'>Pencarian entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong> tidak ditemukan.</p>   </b:if> </b:if> <b:if cond='data:blog.searchLabel'>   <p class='custom-status-message'>Menampilkan semua entri dengan kategori <strong>&amp;#8220;<data:blog.searchLabel/>&amp;#8221;</strong></p> </b:if>

Salin arahan di atas, lalu gunakan untuk menggantikan arahan yang tampak menyerupai ini di dalam template (biasanya ada dua):

<b:include data='top' name='status-message'/>

Kemudian tambahkan arahan CSS ini di atas ]]></b:skin> atau </style>:

.custom-status-message, .custom-status-message-error {   font:normal normal 13px/normal Segoe,"Segoe UI",Calibri,"Helvatica Neue",Arial,Sans-Serif;   color:white;   text-shadow:0 -1px 0 rgba(0,0,0,.4);   padding:7px 14px;   margin:5px 5px 1.7em;   background-color:#5A6777;   background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   border:2px solid #404B55;   border-bottom-color:#212729;   border-top-color:#8E97A2;   -webkit-border-radius:5px;   -moz-border-radius:5px;   border-radius:5px;   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);   -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);   box-shadow:0 1px 3px rgba(0,0,0,.4); }  .custom-status-message-error {   background-color:#600;   border-color:#700 #500 #300; }  .custom-status-message strong {color:#AADD99} .custom-status-message-error strong {color:#ff0}

Sumber https://www.dte.web.id/

Modifikasi Tampilan Dan Teks Pada Status Message

 yaitu sebuah pesan yang akan muncul di atas posting dikala kita sedang berada di halaman Modifikasi Tampilan dan Teks pada Status Message
Contoh tampilan ‘status message’ yang sudah dimodifikasi.

Status Message yaitu sebuah pesan yang akan muncul di atas posting dikala kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS bawaan Blogger dengan arahan CSS gres yang mengandung pengaturan tampilan yang berbeda menyerupai ini:

.status-msg-wrap {   font-size:110%;   width:90%;   margin:10px auto;   position:relative; }  .status-msg-border {   border:1px solid #000;   filter:alpha(opacity=40);   -moz-opacity:.4;   opacity:.4;   width:100%;   position:relative; }  .status-msg-bg {   background-color:#ccc;   opacity:.8;   filter:alpha(opacity=30);   -moz-opacity:.8;   width:100%;   position:relative;   z-index:1; }  .status-msg-body {   text-align:center;   padding:.3em 0;   width:100%;   position:absolute;   z-index:4; }  .status-msg-hidden {   visibility:hidden;   padding:.3em 0; }  .status-msg-wrap a {   padding-left:.4em;   text-decoration:underline; }

Tapi bagaimana kalau kita ingin memodifikasi goresan pena di dalamnya?

Untuk melaksanakan itu, kita mau tidak mau harus menghapus elemen tersebut dan menggantinya dengan markup yang gres menyerupai ini:

<!-- b:include data='top' name='status-message'/ --> <b:if cond='data:blog.searchQuery'>   <b:if cond='data:numPosts != 0'>     <p class='custom-status-message'>Menampilkan semua entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong></p>   <b:else/>     <p class='custom-status-message-error'>Pencarian entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong> tidak ditemukan.</p>   </b:if> </b:if> <b:if cond='data:blog.searchLabel'>   <p class='custom-status-message'>Menampilkan semua entri dengan kategori <strong>&amp;#8220;<data:blog.searchLabel/>&amp;#8221;</strong></p> </b:if>

Salin arahan di atas, lalu gunakan untuk menggantikan arahan yang tampak menyerupai ini di dalam template (biasanya ada dua):

<b:include data='top' name='status-message'/>

Kemudian tambahkan arahan CSS ini di atas ]]></b:skin> atau </style>:

.custom-status-message, .custom-status-message-error {   font:normal normal 13px/normal Segoe,"Segoe UI",Calibri,"Helvatica Neue",Arial,Sans-Serif;   color:white;   text-shadow:0 -1px 0 rgba(0,0,0,.4);   padding:7px 14px;   margin:5px 5px 1.7em;   background-color:#5A6777;   background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));   border:2px solid #404B55;   border-bottom-color:#212729;   border-top-color:#8E97A2;   -webkit-border-radius:5px;   -moz-border-radius:5px;   border-radius:5px;   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);   -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);   box-shadow:0 1px 3px rgba(0,0,0,.4); }  .custom-status-message-error {   background-color:#600;   border-color:#700 #500 #300; }  .custom-status-message strong {color:#AADD99} .custom-status-message-error strong {color:#ff0}

Sumber https://www.dte.web.id/