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

Friday, January 17, 2020

- January 17, 2020

Tutorial Mengganti Template Blog Blogger

Pada saat membuat blog anda berbeda dengan yang lain yaitu terletak pada template blog dan isi artikel blog anda, tetapi ada juga yang sama template blognya, namun isi artikelnya berbeda, itu merupakan sebuah kriteria dan ciri khas dari masing-masing penulis blog itu sendiri.


Jadi, dalam hal mengembangkan sebuah blog itu kita tidak hanya fokus ke satu titik tertentu saja, seperti hanya membuat artikel untuk diposting saja keblog dan tidak memperhatikan masalah tampilan tema yang digunakan pada blog, kenapa kita harus memperhatikannya?,

Karena tema atau template adalah merupakan dasar utama yang sangat penting bagi sebuah blog agar mesin penelusuran google cepat mengindex artikel  yang sudah di posting ke halaman entri blog, tentunya dengan template blog yang seofriendly dan responsive.

Untuk template yang mendukung untuk SEO optimasi blog sudah banyak situsblog yang menyediakan template tersebut, dan kita bisa mengunduh secara gratis atau dapat kita membelinya yang versi premium, dan harga yang ditawarkan bervariasi.

Ada beberapa situsblog penyedia template blog seofriendly dan responsive gratis dan premium yang sesuai kebutuhan blog anda, yang akan saya rekomendasikan kekalian, siapatau anda berminat dan ingin merubah tampilan blog kesayangannya, di antaranya adalah sebagai berikut:
1. Situsblog Arlina Design
2. Situsblog Kompi Ajaib
3. Situsblog Mas Sugeng
4. Situsblog CB Contoh Blog
Dari empat situsblog penyedia template blog blogger yang mereka desain anda bisa mencari template blog Blogger non AMP dan juga AMP yang anda butuhkan sesuai selera kalian, dan template yang keren-keren. Semua hasil karya atau desain dari empat situsblog tersebut sudah banyak para penulis blog Blogger lainnya yang menggunakannya, termasuk dengan admin blog ini.

Agar anda bisa menemukan salahsatu dari empat nama situsblog yang sudah saya paparkan diatas, kalian hanya mengetikan kata kunci nama situsblognya ke kolom browser pencarian atau penelusuran Google. Jika anda sudah temukan situsblognya pilihlah template yang anda suka, terserah kalian mau pilih yang gratis untuk di donwload atau anda bisa order yang premiumnya.

Setelah mendonwload dan mengorder template blog bloggernya maka kalian sudah mempunyai atau memiki sebuah kode HTML template, dan tinggal anda memasang nya atau mengganti template blog kedalam template blognya.

Bagi kalian pengguna baru yang belum mengetahui cara memasang kode HTML template blog yang didapat secara donwload gratis maupun anda dapat cara membeli template premiumnnya, maka dalam kesempatan kali ini saya akan menshare kekalian tutorial dan langkah-langkah cara ganti tema(template) blog blogger dengan mudah sebagai berikut:

Cara Ganti Kode HTML Template Blog Blogger

Langkah 1.
Masuk ke Dasbor Blogger di www.blogger.com dengan alamat email yang sudah anda gunakan untuk membuat blog Blogger.


Langkah 2.
Dibilah navigasi menu kiri klik Tema setelah anda klik maka akan muncul halaman Tema yang ada tombol Edit HTML yang disebelah kanan tombol yang bertuliskan Sesuaikan yang berwarna oren, lalu anda klik Edit HTML


Langkah 3.
Selanjutnya akan muncul kolom tempat kode HTML template Blog seperti pada contoh gambar dibawah:



Langkah 4.
Kemudian salin atau copy kode HTML template blog Blogger yang sudah anda dapatkan pada situsblog donwload maupun anda beli premium prabayarnya, untuk memudahkan menyalinnya tinggal anda arahkan kursor mouse pc atau laptop anda pada file kode HTML templatenya lalu klik kanan kemudian akan ada pilihan edit contoh dalam gambar seperti gambar dibawah berikut ini: 



Langkah 5.
Setelah kalian copy kode html tersebut maka anda kembali lagi ke halaman kolom Edit HTMLnya kemudian hapus kode html yang lama lalu tempel kode yang baru anda salin tadi ke kolom edit htmlnya gambarnya demikian:


Langkah 6.
Langkah terakhir, jika anda sudah tempel kodenya maka lansung saja klik tombol Simpan tema yang berwarna oren.


Sekarang buka blog anda di tab browser baru, mak anda akan melihat tampilan template blognya akan berbeda dengan tampilan sebelumnya mudah bukan!...

Demikian tutorial cara ganti tema blog blogger dengan mudah yang dapat saya sampaikan pada artikel kali ini semoga tutorial dan cara tersebut yang sudh saya paparkan bisa bermanfaat untuk anda yang masih baru dalam mengelola blog Blogger. Terimakasih banyak...

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.