Showing posts with label Design Blog. Show all posts
Showing posts with label Design Blog. Show all posts

Thursday, July 4, 2019

- July 04, 2019

Cara Mengganti Link Older Posts dan Newer Posts

Cara Mengganti Link Older Posts dan Newer Posts
Older Posts dan Newer Posts
Sahabat Blogger Semenjak anda pertama kali membuat blog di platform Blogger sudah pasti anda melihat tulisan berupa link Older Posts dan Newer Posts yang terletak di bawah postingan artikel blog atau di halaman beranda blog anda, karena Tulisan link Older Posts dan Newer Posts ini adalah tampilan default(bawaan) Blogger dan bisa juga diartikan sebagai posting lama dan posting baru pada halaman blog, Namun kalau anda sudah mengganti template blog nya dengan template hasil dowload alias gratis maupun dengan template SEO Friendly premium maka tulisan Older Posts dan Newer Posts tersebut akan otomatis tersembunyi atau tidak akan kelihatan lagi.

Jadi pada kesempan kali saya akan membahas cara belajar mengganti link Older Posts dan Newer Posts, padahal sudah banyak artikel tentang Older Posts dan Newer Posts ini di halaman searching google. Dalam hal ini saya juga ingin berbagi ke sahabat blogger semuanya sekaligus agar artikel blog ini bisa berada atau tampil di halaman penelusuran google seperti artikel blog blogger lainnya Ok.

Bagaimanakah cara? untuk mengganti Tulisan link Older Posts dan Newer Posts di Blog? dari pertanyaan tadi mungkin sebagian pengguna blogger sudah tau caranya seperti apa? dan apalagi yang sudah lama membuat blog dan aktif khususnya para desain template blog blogger, namun jika ada seorang pengguna baru blogger (pemula) yang ingin tau dan mau belajar untuk menerapkan ke blog milik mereka di blogger tentunya, Mungkin diantara mereka masih bingung mengenai cara mengganti tulisan tersebut di Blognya khususnya di blog blogger.

Dari sebagian para pengguna blogger yang mahir dalam mendesain template Blog untuk mengerjakan cara tersebut pasti sangatlah mudah karena mereka sudah mengetahui sepenuhnya tentang pengodean template situsblog yang berkaitan dengan kode CSS/HTML Java Script, tetapi lain pula dengan yang belum tau bagaima caranya, apalagi yang sama sekali belum pernah mengetahui Cara Menggantinya pada Blog di Blogger, jadi dalam hal ini maka dibawah saya akan berbagi tentang bagaimana cara mengganti dan memasang kode CSS/HTML Java Script yang mengganti link Older Posts dan Newer Posts atau postingan lama dan posting baru menjadi Angka pada halaman Home atau Beranda Blog khususnya pengguna blogger, adapun caranya adalah sebagai berikut :

Baiklah langsung saja bagaimana cara menerapkan cara tersebut :


1. Masuk ke dashboard Blogger
2. Pilih Tema
3. Pilih Edit html
4. Cari Kode ]]></b:skin> dan jika sudah menemukannya talu letakan kode CSS/HTML Java Script dibawah sebelum kode ]]></b:skin> atau tepat diatas kode ]]></b:skin>

.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #FF6A00; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #FF6A00; background-color:#FF6A00; } .showpagePoint { color:#84d; text-decoration:none; border: 1px solid #FF6A00; background: #FF6A00; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #FF6A00; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#0094FF; }

5. Selanjutnya cari kode </body>Lalu letakan kode CSS/HTML Java Script dibawah sebelum kode </body> atau tepat diatas kode </body>

<!--Page Navigation Starts--> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='https://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends -->



6. Terakhir selesaikan dan Simpan Template nya!



Na...Mudah-mudahan tutorial tips trik blogger tersebut tentang Bagaimana Cara Mengganti Link Older Posts dan Newer Posts di Blogger Blogspot bisa mudah dipahami , dan untuk mempermudah mendesain blog nya saya sarankan jangan utak atik Kode Script HTML di Template Blog karena sangatlah berdampak sangat fatal tidak terindex mesin pencarian google dalam artian membutuhkan waktu yang cukup lama, Semoga postingan ini bermanfaat , terutama untuk sahabat blogger pengguna baru yang sedang belajar cara membuat blog dan mendesain template blognya.





Sekian Salam Blogger...

Wednesday, July 3, 2019

- July 03, 2019

Cara Memasang Menu Navigasi Blog Agar Responsif

Cara Memasang Menu Navigasi Blog Agar Responsif


Bagaimana cara untuk membuat atau memasang Menu Navigasi Blog agar Responsif? dari pertanyaan tersebut mungkin sebagian para blogger sudah pada tau apalagi yang sudah profesional seperti para pakar blogger khususnya deasain template blog blogger ya...pastilah sudah, namun bagaimana jika ada seorang pengguna baru blogger (pemula) yang baru mau belajar di blogger(blogspot), Mungkin diantara pengguna baru tersebut akan merasa bingung mengenai hal cara memasang dan membuat Menu Navigasi Blog agar Responsif khususnya di blog blogger(blogspot).




Dari sebagian para desainer template blog blogger profesional, untuk mengerjakan hal tersebut pasti sangatlah mudah karena mereka sudah mengetahui seluk beluk nya atau sepenuhnya tentang situsblog atau situsweb yang berkaitan dengan template dan kode-kode HTML nya, tetapi berbeda pula dengan yang belum tau bagaima membuatnya dan bagaimana caranya, apalagi yang sama sekali belum pernah mengetahui Cara Membuat Blog di Blogger(Blogspot), jadi dalam hal ini maka dibawah saya akan share tentang bagaimana cara membuat dan memasang Menu Navigasi Blog agar Responsif khususnya pengguna blogger, adapun caranya adalah sebagai berikut :

Baiklah langsung saja bagaimana cara menerapkan cara tersebut :


1. Masuk ke dashboard Blogger
2. Pilih Tema
3. Pilih Edit Html
4. Cari Kode ]]></b:skin> dan Copy kode di bawah ini lalu di letakan atas kode ]]></b:skin>

ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } }


5. Selanjutnya Cari Kode <body> Lalu Copy kode HTML di bawah lalu letakan kode HTMLnya di bawah kode <body>




<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>
</ul>




6. Agar kode-kode HTML diatas bisa berfungsi sebagai Menu Navigasi blog responsif selanjutnya cari kode </body> lalu Copy kode JAVASCRIPT dibawah lalu letakan kode JAVASCRIPTnya tepat di atas kode </body>




<script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script>




7. Terakhir selesaikan dan Simpan Template nya!




Info lebih jelas tentang kode-kode HTML untuk menu navigasi responsif blog blogger anda langsung ke ahlinya di CONTOHBLOG COM karena Sumber kode HTML yang saya paparkan di atas adalah dari Artikelnya,anda juga bisa membeli Template blog blogger responsif dan SEO Friendly disana Ok...




Mudah-mudahan tutorial tips trik blogger tersebut tentang Bagaimana cara membuat dan memasang Menu Navigasi Blog agar Responsif di Blogger Blogspot bisa mudah dipahami , dan untuk mempermudah mendesain blog nya saya sarankan jangan utak atik Kode Script HTML di Template Blog karena sangatlah berdampak sangat fatal tidak terindex mesin pencarian google dalam artian membutuhkan waktu yang cukup lama, Semoga postingan ini bermanfaat , terutama untuk sahabat blogger pengguna baru yang sedang belajar cara membuat blog dan mendesain template blognya.


Sekian Salam Blogger...

Wednesday, June 26, 2019

- June 26, 2019

Cara Mudah Memasang Breadcrumbs SEO Friendly

Cara mudah memasang breadcrumbs pada blog blogger


Memasang breadcrumbs di blog itu sangatlah penting dan berguna terhadap SEO blog Nah, untuk itu saya akan membahas cara membuat breadcrumbs.Namun sebelumnya saya mau bertanya Apakah? Anda Sudah Menerapkan Breadcrumbs Pada Situs Blognya dan Apa itu Breadcrumbs? Breadcrumbs merupakan Sebuah kode CSS/HTML yang dipasang di dalam template blog agar blog lebih SEO Friendly terutama pada tab navigasi menu agar supaya pengunjung dan pembaca mudah bernavigasi pada situsblog melalui aktifitasnya menelusuri setiap tab menu navigasi artikel postingan blog dan bisa kembali ke tab halaman awal bernavigasi dengan mudah. Breadcrumb biasanya berada di posisi atas tab halaman postingan.dan juga di bawah header.

Jika anda belum menggunakannya atau menerapkan ke blog milik anda, maka saya Sarankan untuk menggunakan Breadcrumbs. Oleh sebab itu dalam kesempatan kali ini saya akan berbagi cara membuat atau memasang Breadcrumbs simak langkah panduan Nya dibawah ini :

Berikut Cara Memasang Breadcrumbs SEO Friendly di Blog Blogger;

1. Masuk ke Dasbor Blogger dengan akun Google Blogger Anda

2. Pilih dan Klik Tema > Lalu > Edit HTML

3. Selanjutnya Cari kode ]]></b:skin> untuk memudahkan nya tekan CTRL F Bersamaan

4. Lalu salin dan tempelkan kode dibawah tepat di atas kode ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:‪#‎5f5f5f‬;border-bottom:1px dotted ‪#‎fff‬;}




5. Setelah selesai menyimpan kode di atas Selanjutnya cari lagi kode <b:includable id='main' var='top'> dan menggantikanya dengan kode CSS/HTML dibawah ini;

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v=' http://rdf.data- vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data: label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>




6. Nah Jika sudah Klik Simpan Tema dan Selesai





Breadcrumbs ini sangat bermanfaat bagi blog yang kita kelola dan para pengunjung termasuk tata letak struktur blog yang kita memiliki sehingga kelihatan rapih dan kinclong.

Menurut info yang saya baca di situs blog sebelah mengatakan bahwa, Google sangat menyukai situsblog yang mempunyai struktur blog yang rapih dan kelihatan cerah apa lagi warna nya putih, jika anda tidak percaya coba anda lihat website Google semua cerah berwarna putih, jadi anda sudah paham penting nya Breadcrumbs untuk sebuah blog.

Sekian artikel mengenai Cara Mudah Memasang Breadcrumbs Pada Blog. Kurang dan Lebihnya Mohon Maaf.dan jikat tata bahasa penulisa artikel nya tidak sessuai maka tolong berikan Saran Kritik di kolom komentar yang sudah di sediakan di bawah postingan artikel ini terimakasih sudah berkunjung.

Semoga Bermanfaat...

Monday, June 24, 2019

- June 24, 2019

Cara Mudah Membuat Widget Headline di Blog

Cara Mudah Membuat Widget Headline di Blog Blogger


Jika Anda tidak sudah terbiasa dengan Model tampilan halaman depan Home atau beranda situsblog nya hanya itu-itu saja maka beralih lah ke tampilan yang lebih keren dan juga lebih profesional, sama halnya dengan widget.

Headline untuk memperindah gaya desain tampilan tema blog dengan berupa foto atau gambar dan text yang dapat dipasang untuk blog blogger Anda. Anggap saja seperti Featured Posts dan Popular Posts yang berada di sidebar Blog Blogger.

Dengan mengembangkan desain template cukup sederhana untuk melakukan satu hal dan melakukannya dengan sangat baik. Headline telah menjadi salah satu widgets yang paling menonjol pada desain template blog yang anda bisa terapkan dengan gaya atau tampilan berfoto grid di halaman pages home blog blogger anda nantinya.

Hal yang paling besar tentang menggunakan atau memasang widgets Headline adalah bahwa itu bukan hanya untuk semata hiasan saja. Konten blog atau Artikel blog bisa muncul dan tampil bersama widgets headline di beranda blog dengan memanfaatkan fitur ini tentunya akan memberikan dampak positif dan baik terhadap blog karena kabar terbaru dalam postingan artikel bisa di tampilkan agar mereka yang mengunjungi situs blog terkesan dalam hati untuk membaca keseluruhan isi konten blog dan bisa berlangganan artikel blog atau mendesain ulang template blog pengunjung dan pembaca.

Pengunjung dan pembaca beraktifitas ke blog akan mempunyai trafik kunjungan yang berjumlah cukup banyak dari pengguna blogger yang aktif lainnya per harinya, dan apa lagi mempunyai postingan terbaru setiap harinya. Itu adalah jumlah yang menguntungkan bagi blog yang menyediakan fitur headline bagi blog Anda untuk membuat dengan menambahkan headline di Blogger sebagai widget.

Anda dapat menerapkan fitur headline untuk kabar terbaru dari situsblog dan memungkinkan pengunjung untuk mengunjungi blog anda membaca artikel di tab perhalamannya.

Dengan mempunyai tampilan unik dan keren untuk widgets blog yang di pasang disekitaran pada template blog blogger Anda akan memberi keunikan tersendiri ke manapun Anda memakai dan di pasang ke template blog miliknya, Anda dapat membuat dan menampilkan gambar grid dengan menerapkan kode CSS/HTML dan memasang kode-kode nya dengan mengedit Edit HTML ke Tema Blog Anda. dari dalam template blog.

Kode CSS widget yang sudah dirancang khusus oleh pengembang desain template blog untuk Widgets Headline di Blogger yang akan menampilkan bentuk desain gambar grid di situsblog Anda. Bahkan pengunjung yang bukan pengguna Blogger dapat memperoleh manfaat dari artikel postingan tersebut.

Kode CSS HTML yang akan saya share dalam artikel postingan ini yaitu cara mudah dan siapapun dapat dengan mudah menggunakannya.

Hanya memasang kode CSS headline pada template blog milik anda dan sangat menarik yang dapat anda terapkan dan disesuaikan dengan design situsblog. Ada beberapa kode CSS HTML yang bisa digunakan di blogger.

 Berikut Cara Memasang kode dengan mengedit Edit HTML template Langkah yang dilakukan:

Masuk ke Dasbor Blogger anda 
Klik Tema > Lalu Edit HTML 
Tambahkan kode Salin (Copy) kode CSS dibawah ini;

#Headline {background:#ececec}
.repost1 {background: #fff;margin:0;padding:0;display: block;border-top:1px solid #fff}
.repost1 h2 {color: #fff;font-size: 16px;margin: 10px 0 0 0;padding: 0;text-transform: uppercase;}
.repost1 .wrapper {display: block;float: left;margin: 10px 20px 20px 0;width: 198px;position: relative;}
.repost1 .wrapper img {height: 130px;width: 100%;}
.repost h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover{color:#0d68b1}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {line-height: normal;color:#fff;text-shadow:none}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover hover{color:#fff}
.repost1 .wrapper .reposth, .repost1 .wrapper .reposth a {display:none;color: #fff;font-size: 12px;text-transform: capitalize;}
.repost1 .wrapper .reposth a:hover {color: #fff;}
.repost1 .wrapper:nth-child(4) {margin-right: 0 !important;}
@media screen and (max-width:603px) {
.repost1 .wrapper {width:31%;}
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width: 480ppx) {
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width:600px) {
.repost1 .wrapper {width: 30.8%;}
}
@media screen and (max-width: 480px) {
.repost1 .wrapper {width:100%;margin:0 0 15px;}
.repost1 .wrapper img { height:auto; }
.repost1 .wrapper .reposth{position:relative;top:-6px;}
}


Kemudian cari kode dibawah  Lalu letakan tepat dibawa kode berikut ini;






</style>
<b:if cond='data:view.isHomepage'>
<style>

Contoh dalam bentuk gambar untuk menerapkan kode CSS nya di bawah sebagai berikut;

Cara Mudah Membuat Widget Headline di Blog Blogger


Untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” pada keyboard kemudian copy-kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya Klik simpan pada tema Selesai.


Selanjutnya Jika sudah Untuk mengaktifkan headline gambar grid nya atau menampilkan Fitur ini ke halaman depan home blog maka kembali Masuk ke Dasbor Blogger anda Klik Tata Letak > Tambahkan Gadget>Lalu Tambahkan kode Salin (Copy) kode CSS dibawah ini;

<script src='/feeds/posts/summary?orderby=published&amp;max-results=3&amp;alt=json-in-script&amp;callback=repost1'/></script>



Nah Itulah Cara Mudah Membuat Widget Headline di Blog Blogger semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.

Saturday, June 22, 2019

- June 22, 2019

Cara Mudah Membuat Gambar Background Header Blog

Cara Mudah Membuat Gambar Background Header Blog


Di setiap dalam Mendeasin tampilan pada sebuah situsblog tidak lepas dengan nama header yang memiliki desain yang unik pasti menjadi ciri khas tersendiri di setiap para pengguna blogger. Logo blog biasanya ditampilkan pada bagian header yang berupa gambar dan gambar teks yang berisi nama atau slogan dari sebuah situsblog. Seorang blogger dapat dengan mudah membuat teks logo blog maupun gambar logo blog untuk header dengan baik dan keren.

Pada umumnya slogan atau logo blog dipakai untuk menggantikan teks pada bagian title dan deskripsi header. Dalam hal ini membuat logo pada blog walaupun hanya berupa gambar atau foto logo dan text bukanlah hal mudah bagi seorang pemula blogging. setidaknya dibutuhkan keahlian khusus untuk membuat gambar logo dan teks yang lebih unik dan keren dengan menggunakan alat pengeditan maupun kode-kode tertentu agar menghasilkan tampilan cantik dan juga keren.

Pada jaman Tekhnologi janggih seperti sekarang ini di internet cukup banyak layanan situs online untuk membuat logo secara gratis maupun pascbayar yang dapat dengan mudah di temukan dari hasil penelusuran mesin pencarian google atau ada pada sebuah iklan google yang tayang di situsblog seseorang pengguna blogger. Dengan memakai jasa online untuk pembuatan logo atau gambar text memudahkan kita untuk mengedit dan membuat logo untuk header blog.

Sama halnya dengan membuat background header selain menggunakan fitur yang disediakan blogger. pada umumnya penulis blog atau admin blog membuat background header melalui klik "EDIT" pada tab halaman "TATA LETAK"di Elemen Header blog jika anda akan lebih tertarik untuk membuatnya melalui kode CSS.

Kode CSS HTML Java Script yang akan saya paparkan dalam artikel postingan ini yaitu cara paling mudah dan siapapun dapat dengan mudah menggunakannya. Hanya memasang kode CSS logo atau gambar background header untuk pada template blog milik anda dan sangatvmenarik yang dapat anda terapkan dan disesuaikan dengan design situsblog.

Ada beberapa kode CSS HTML yang bisa digunakan di blogger pada bagian header ketika anda membuat background header melalui "Elemen Header" yang digunakan. Berikut Cara Memasang Gambar Header di edit HTML template

Langkah yang dilakukan ialah :

Masuk ke Dasbor Blogger anda

Klik Tema > Lalu Edit HTML

Tambahkan kode Salin (Copy) kode CSS dibawah ini

Kemudian cari kode ]]></b:skin> untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” pada keyboard kemudian copy-kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya

Klik simpan pada tema Selesai

*/---- Header Background----- */

#header-wrap { background:url(https://3.bp.blogspot.com/-eNwf1wENyU0/XQUuYDS7OwI/AAAAAAAAEJE/j1PCwTM0yL8Px05-cK1pHhmkshSNaA9sACK4BGAYYCw/s167/iyaseo%2Bid.png) no-repeat; width:770px; height:265px; float:left; } #header-inner { background-position:center center; margin-left:auto; margin-right:auto; } #header { float:right; width:500px; color:transparent; text-align:right; padding:100px 20px 0 0; } #header h1 { height:45px; font:italic bold 30px georgia; letter-spacing:0; margin:0; padding:10px 0px 0px 0px; text-transform:none; text-shadow: 2px 2px 2px color:transparent; } #header a { color:transparent; text-decoration:none; text-shadow: 2px 2px 2px color:transparent; } #header a:hover { color:transparent; } #header .description { height:16px; color:transparent; font:bold 13px arial; letter-spacing:0em; margin:0; padding:2px 0px 47px 0px; text-transform:none; text-shadow: 1px 1px 1px color:transparent; } #header img { margin-left:auto; margin-right:auto; }
#header{ display: none !important; }



Nah sudah selesai Jika anda mau lebih keren lagi untuk background nya maka tambahkan elemen tertentu seperti Navbar dan Footer yang lebih Trend masa kini menggunakan background warna gradient ini dapat dibuat dengan kode CSS yang memang fungsi utamanya ialah untuk style atau tampilan nya warna warni dan lebih unik dari biasa atau standar pada sebuah blog dengan pembungkus dari HTML. Oke dalam kesempatan kali ini saya share cara membuat background gradien berwarna diblog Blogger berikut klik disitusblog INI untuk cara penerapan kode dibawah ini karena sumber kode ini dari blog tersebut;

Kode CSS Untuk Background Gradien Warna :
@-webkit-keyframes Gradient { 0% { background-position: 0% 50%} 50% { background-position: 100% 50%} 100% { background-position: 0% 50%} } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } div.header{ color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; display: block; font-weight: bold; color: black; }


Itulah pengenalan singkat Cara Mudah Membuat Gambar Background Header Blog semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.

Friday, June 21, 2019

- June 21, 2019

Cara Mudah Merubah Author Name Blog Blogger

Cara Mudah Merubah Author Name Blog Blogger


Apa itu Author nama?. Author nama adalah nama admin atau penulis artikel postingan dalam sebuah situsblog dan merupakan fitur bawaan default dari platform blogger. Terkadang kita merasa bosan dengan tampilan nama author pada blog sehingga kita ingin mengganti author name disetiap blog kita yang telah kita buat apalagi kita membuat blog lebih dari satu jika setelah kita ganti nama authornya, semua blog ikut terganti author namenya sebenarnya untuk Mengganti Author Name di Blogspot Blogger.bisa kita merubah sesuai dengan keinginan kita dan disetiap blog itu pasti name author berbeda-beda dalam satu akun blogger.

Mengubah nama author komentar di blog juga akan memberikan kesan tersendiri bagi admin blog itu sendiri selagi masih aktif dalam mengelola sebuah blog, dengan cara ini anda dapat menampilkan nama yang keren di profil author blog baik itu nama yang unik ataupun keren, atau bahkan nama yang berbeda dengan nama author bawaan dari blogger sebagai nama tampilan profil blogger.

Nama author yang dapat anda ganti di halaman posting di bagian post footer yang terletak tepat di bawah artikel postingan, yang berbentuk kotak yang di dalamya juga berisi hari dan tanggal waktu artikel diposting di buat, serta daftar label postingan. dan akan terlihat di setiap ada aktifitas membalas setiap komentar yang diberikan oleh author blog blogger. areal posisinya tepat di sebelah kanan icon author comment.

Oke dalam kesmpatan kali ini saya akan memberikan cara untuk merubah nama author atau nama penulis dalam sebuah blog blogger di bawah dengan bantuan kode CSS berikut ini:

.blog-author a, .ss a, .fn,.fn a{ font-size:0

!important; padding-right:5px; padding-left:5px;

} .fn:before,.comment

.blog-author a:before{ font-size:11px

!important; content:"IYASEO.ID"; }

.comment .blog-author a:before{ font-size:13px

!important; }




Cara memasang kode di atas coba anda simak langkah-langkah berikut ini:
1. Login ke Akun Google Dasbor Blogger nya

2. Lalu pilih Tema

3. Baru lanjut ke Edit HTML

o Cari Kode : ]]></b:skin>

o Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.

o Copy dan paste-kan kode CSS di atas kode ]]></b:skin>
o Ganti "IYASEO.ID" dengan nama yang ingin anda tampilkan.

o Simpan Tema

4. Nah Selesai...

5. Terakhir Buka blog di tab halaman baru artikel postinganya, lalu lihat di bawah postingan (post footer), kemudian berikan sebuah komentar untuk melihat apakah nama author yang baru sudah berubah jika sudah berarti anda selamat menerapkan cara ini semoga berhasil dan salam blogger...