Monday, July 18, 2016

Cara Membuat Featured Post Terbaru Keren dan Responsive Banget

cara membuat featured Post terbaru responsive
Kali ini saya akan berbagi bagaimana cara membuat featured post blog yang simple dan keren dan tentunya responsive untuk blog sobat bagi yang belum tau apa itu featured post blog berfungsi untuk menampilkan postingan ataupun hal yang terbaik ataupun artikel terbaik yang sobat miliki dan terbukti ini bisa menambah jumlah visitor blog sobat 

Mengingat google saat ini sangat menyukai hal ataupun artikel yang cepat dan responsive sebagai tuntutan banyaknya artikel dalam blog ataupun website banyak di akses melalui gadget android, iphone dan sebagainya dan menjawab itu saya berbagi tutorial cara membuat featured post untuk blog yang simple keren dan responsive tentunya sangat penting demi meningkatkan tafik pengunjung blog sobat dan ini merupakan featured pos yang bukan slide

Pertama silahkan login ke akun blogger sobat kemudian pilih ke tata letak pilih HTML/JAVASCRIPT masukkan kode dibawah ini lalu simpan

<div id="masfitur">
<div id="masfiturcontent">
<div class="masfiturimage">
<a href="urlpostingdisini" title="Game Point Blank"><img alt="Game Point Blank" height="150" src="urlgambardisini" title="Game Point Blank" width="300" /></a>
</div>
<div class="masfiturpanel">
<h2>
<a href="urlpostingdisini" title="game point blank">game point blank</a></h2>
Game Point Blank adalah game terbaru yang bakal menggebrak dunia game diseluruh dunia...</div>
<div class="clear">

silahkan ganti sesuai postingan sobat biar htmlnya jalan kemudian setelah itu silahkan masuk ke edit template lagi kali ini masukkan kode css untuk memanggil dan menjalankan htmlnya letakkan di atas kode </style>

<!--Mas Fitur Posts start-->
#masfitur{height:auto;}
#masfiturcontent{margin:0 auto;transition:opacity .3s linear 0s;color:#fff;background:#1fa67a;border:1px solid #dedede;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;position:relative;overflow:hidden;height:auto;max-width:300px;margin-left:0px;margin-right:10px;}
.masfiturpanel{width:100%;padding:10px 15px 15px;-moz-box-sizing:border-box;word-wrap:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;float:left}
.masfiturpanel&gt;h2{text-align:left;font-size:20px;font-weight:bold;line-height:1.2em;color:#333;margin-top:2px;text-transform:capitalize;padding:0!important}
.masfiturpanel a{color:#fff;text-decoration:none;font-weight:700;transition:all .4s ease-out;background:#1fa67a}
.masfiturimage img{width:200px;height:200px;margin-bottom:1px;margin-top:20px;margin-left:37px;position:relative}
<!--Mas Fitur Posts selesai-->

setelah itu silahkan simpan dan lihat hasilnya cara seperti ini sudah saya praktekkan diblog ini dijamin berhasil
Demikian semoga bermanfaat ya bila merasa berguna dan bermanfaat silahkan bagikan 
Previous Post
Next Post

0 comments: